{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "section-heading",
  "title": "section-heading",
  "dependencies": [
    "class-variance-authority@^0.7"
  ],
  "registryDependencies": [
    "@dwellir/dwellir-theme",
    "@dwellir/utils"
  ],
  "files": [
    {
      "path": "components/brand/section-heading.tsx",
      "content": "import { cva, type VariantProps } from 'class-variance-authority';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nconst headingVariants = cva('flex flex-col gap-4', {\n  variants: {\n    align: {\n      start: 'items-start text-left',\n      center: 'items-center text-center',\n    },\n  },\n  defaultVariants: { align: 'start' },\n});\n\nconst titleVariants = cva('font-display font-bold text-balance text-title', {\n  variants: {\n    size: {\n      /* A section title, as on the homepage. */\n      heading: 'max-w-4xl text-heading',\n      /* The page title in a hero. */\n      display: 'max-w-display text-display',\n    },\n  },\n  defaultVariants: { size: 'heading' },\n});\n\ntype SectionHeadingProps = Omit<ComponentProps<'div'>, 'title'> &\n  VariantProps<typeof headingVariants> &\n  VariantProps<typeof titleVariants> & {\n    /** A short uppercase label over the title: the topic, not a sentence. */\n    eyebrow?: ReactNode;\n    title: ReactNode;\n    /** One or two sentences that say why the section matters. */\n    lede?: ReactNode;\n    /** The title's heading level: h1 once per page, h2 for sections. */\n    as?: 'h1' | 'h2' | 'h3';\n    /** An id on the title, so a section can take its name (aria-labelledby). */\n    titleId?: string;\n  };\n\n/* Eyebrow, title and lede: the opening of a section. */\nfunction SectionHeading({\n  className,\n  align,\n  size,\n  eyebrow,\n  title,\n  lede,\n  as: Title = 'h2',\n  titleId,\n  ...props\n}: SectionHeadingProps) {\n  return (\n    <div\n      data-slot=\"section-heading\"\n      className={cn(headingVariants({ align }), className)}\n      {...props}\n    >\n      {eyebrow ? (\n        <p\n          data-slot=\"section-heading-eyebrow\"\n          className=\"flex items-center gap-2 font-label text-eyebrow font-bold text-accent-ink uppercase\"\n        >\n          {eyebrow}\n        </p>\n      ) : null}\n      <Title\n        id={titleId}\n        data-au-collider={Title === 'h1' ? 'always' : undefined}\n        data-au-collider-shape={Title === 'h1' ? 'text' : undefined}\n        data-au-collider-light={Title === 'h1' ? 'off' : undefined}\n        className={titleVariants({ size })}\n      >\n        {title}\n      </Title>\n      {lede ? <p className=\"max-w-2xl text-lg text-pretty text-muted-foreground\">{lede}</p> : null}\n    </div>\n  );\n}\n\nexport { SectionHeading };\n",
      "type": "registry:component",
      "target": "components/brand/section-heading.tsx"
    }
  ],
  "type": "registry:component"
}