{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "heading",
  "type": "registry:ui",
  "title": "Heading",
  "description": "Renders an h1 to h6 from a number, so you set the heading level and the visual size separately.",
  "categories": [
    "atom"
  ],
  "registryDependencies": [
    "https://facadeui.dev/r/types.json"
  ],
  "files": [
    {
      "path": "src/ui/heading.tsx",
      "type": "registry:ui",
      "target": "components/ui/heading.tsx",
      "content": "/**\n * Heading — renders `<h1>`–`<h6>` from a numeric level.\n *\n * Written as an exhaustive switch over literal JSX rather than the obvious\n * `const Tag = \\`h${level}\\`; <Tag />`. The dynamic-tag form is what\n * `react-hooks/static-components` exists to catch, and suppressing that rule in\n * every section would blunt it everywhere else. This is a few lines longer and\n * needs no suppression at all.\n *\n * a11y: the whole point of the atom. Sections take a `headingLevel` prop and\n * pass it here, so a hero dropped inside an existing page can be `<h2>` while\n * the same component on its own landing page is `<h1>` — without the visual\n * size changing, which `className` controls independently.\n *\n * Dependencies: react, @/lib/types.\n */\n\nimport type { ComponentPropsWithoutRef } from \"react\"\n\nimport type { HeadingLevel } from \"@/lib/types\"\n\nexport interface HeadingProps extends ComponentPropsWithoutRef<\"h2\"> {\n  /** 1 to 6. Sets the heading level, not the visual size. */\n  level: HeadingLevel\n}\n\nexport function Heading({ level, children, ...props }: HeadingProps) {\n  switch (level) {\n    case 1:\n      return <h1 {...props}>{children}</h1>\n    case 2:\n      return <h2 {...props}>{children}</h2>\n    case 3:\n      return <h3 {...props}>{children}</h3>\n    case 4:\n      return <h4 {...props}>{children}</h4>\n    case 5:\n      return <h5 {...props}>{children}</h5>\n    case 6:\n      return <h6 {...props}>{children}</h6>\n  }\n}\n"
    }
  ],
  "docs": "Import styles/facade-tokens.css in your global stylesheet, after @import \"tailwindcss\". Docs: https://facadeui.dev/components/heading"
}