{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "page-hero",
  "title": "page-hero",
  "dependencies": [
    "class-variance-authority@^0.7"
  ],
  "registryDependencies": [
    "@dwellir/dwellir-theme",
    "@dwellir/utils",
    "@dwellir/container",
    "@dwellir/section",
    "@dwellir/section-heading"
  ],
  "files": [
    {
      "path": "components/brand/page-hero.tsx",
      "content": "import { cva } from 'class-variance-authority';\nimport { type ComponentProps, type ReactNode, useId } from 'react';\nimport { cn } from '@/lib/utils';\nimport { Container } from './container';\nimport { Section } from './section';\nimport { SectionHeading } from './section-heading';\n\ntype Layout = 'center' | 'split' | 'lead';\n\nconst heroVariants = cva('relative grid gap-10', {\n  variants: {\n    layout: {\n      /* The copy centred over the sheet, with no visual. */\n      center: '',\n      /* Copy and visual in two equal columns from lg, centred on each other. */\n      split: 'lg:grid-cols-2 lg:items-center lg:gap-16',\n      /* The copy leads in 7 of 12 columns at the top; the visual takes 5. */\n      lead: 'items-start lg:grid-cols-12 lg:gap-12',\n    },\n    space: {\n      default: 'py-14 lg:py-20',\n      /* More air above and below, for a narrow column. */\n      tall: 'py-14 md:py-20 lg:py-24',\n    },\n  },\n  defaultVariants: { layout: 'center', space: 'default' },\n});\n\nconst copyVariants = cva('flex flex-col', {\n  variants: {\n    layout: {\n      center: 'items-center gap-8 text-center',\n      split: 'gap-8',\n      lead: 'gap-6 lg:col-span-7',\n    },\n  },\n});\n\nconst visualVariants = cva('', {\n  variants: {\n    layout: {\n      center: '',\n      split: 'min-w-0',\n      lead: 'flex justify-center lg:col-span-5 lg:self-center',\n    },\n  },\n});\n\n/* Stacked below sm, so the row count cannot change when the fonts load. */\nconst actionsVariants = cva('flex w-full flex-col gap-3 sm:flex-row sm:flex-wrap', {\n  variants: {\n    layout: {\n      center: 'sm:justify-center',\n      split: '',\n      lead: 'sm:items-center',\n    },\n  },\n});\n\ntype PageHeroProps = Omit<ComponentProps<'section'>, 'title'> & {\n  /**\n   * center: the copy centred, no visual. split: copy and visual side by side\n   * in equal columns. lead: the copy leads (7 of 12 columns) and the accent\n   * is a smaller second line. Default: split with a visual, center without.\n   */\n  layout?: Layout;\n  /** page: the page column. narrow: the pricing column, with more air (space=\"tall\"). */\n  width?: 'page' | 'narrow';\n  space?: 'default' | 'tall';\n  /** The page's h1. */\n  title: ReactNode;\n  /** The title's level: h1, or h2 for a preview of a hero inside a page. */\n  as?: 'h1' | 'h2';\n  /** The promise, a second line of the h1 in green. */\n  accent?: ReactNode;\n  lede?: ReactNode;\n  /** A short label over the title. */\n  eyebrow?: ReactNode;\n  /** The calls to action, in order of weight. */\n  actions?: ReactNode;\n  /** Beside the copy from lg up, under it below lg. */\n  visual?: ReactNode;\n  /**\n   * The aurora behind the hero, such as the site's live curtain. It must\n   * position itself in the sheet; the copy sits over it.\n   */\n  backdrop?: ReactNode;\n};\n\nfunction heading(layout: Layout, title: ReactNode, accent: ReactNode) {\n  if (!accent) return title;\n  if (layout === 'lead') {\n    return (\n      <>\n        <span className=\"block\">{title}</span>\n        <span className=\"mt-2 block text-heading text-accent-ink\">{accent}</span>\n      </>\n    );\n  }\n  return (\n    <>\n      {title}\n      <br />\n      <span className=\"text-accent-ink\">{accent}</span>\n    </>\n  );\n}\n\n/**\n * The hero of a page: the h1 on a sky sheet, with an optional lede, actions,\n * visual and aurora. The section takes its name from the h1. The title keeps\n * the display cap (16.5em), so its line count holds when the web fonts load.\n */\nfunction PageHero({\n  layout: layoutProp,\n  width = 'page',\n  space,\n  title,\n  as = 'h1',\n  accent,\n  lede,\n  eyebrow,\n  actions,\n  visual,\n  backdrop,\n  ...props\n}: PageHeroProps) {\n  const titleId = useId();\n  const layout = layoutProp ?? (visual ? 'split' : 'center');\n  return (\n    <Section tone=\"sky\" space=\"none\" aria-labelledby={titleId} {...props}>\n      {backdrop}\n      <Container size={width} className={heroVariants({ layout, space })}>\n        <div className={copyVariants({ layout })}>\n          <SectionHeading\n            as={as}\n            size=\"display\"\n            titleId={titleId}\n            align={layout === 'center' ? 'center' : 'start'}\n            className={cn(layout === 'lead' && 'gap-6')}\n            eyebrow={eyebrow}\n            title={heading(layout, title, accent)}\n            lede={lede}\n          />\n          {actions ? <div className={actionsVariants({ layout })}>{actions}</div> : null}\n        </div>\n        {visual ? <div className={visualVariants({ layout })}>{visual}</div> : null}\n      </Container>\n    </Section>\n  );\n}\n\nexport { PageHero };\n",
      "type": "registry:component",
      "target": "components/brand/page-hero.tsx"
    }
  ],
  "type": "registry:component"
}