{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "heading",
  "title": "Heading",
  "description": "Semantic heading (h1–h6) with theme-overridable font-family, weight, and size design tokens.",
  "dependencies": [
    "@vllnt/ui@^0.3.0"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/heading/heading.tsx",
      "content": "import { cn } from \"@vllnt/ui\";\n\n/** Heading level 1–6. Drives both the semantic element and the scale step. */\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\n/** Props for {@link Heading}. */\nexport type HeadingProps = React.HTMLAttributes<HTMLHeadingElement> & {\n  /** Semantic rank — renders `h1`–`h6`, plus its scale step unless `size` overrides it. */\n  level?: HeadingLevel;\n  ref?: React.Ref<HTMLHeadingElement>;\n  /**\n   * Visual scale step, decoupled from the semantic `level`. Defaults to `level`.\n   * Use it to keep a correct document outline while matching a design — e.g.\n   * `<Heading level={2} size={1}>` is an `h2` rendered at h1 size.\n   */\n  size?: HeadingLevel;\n};\n\nconst headingTag = {\n  1: \"h1\",\n  2: \"h2\",\n  3: \"h3\",\n  4: \"h4\",\n  5: \"h5\",\n  6: \"h6\",\n} as const;\n\nconst headingSize = {\n  1: \"text-[length:var(--font-size-h1)] leading-[var(--line-height-h1)]\",\n  2: \"text-[length:var(--font-size-h2)] leading-[var(--line-height-h2)]\",\n  3: \"text-[length:var(--font-size-h3)] leading-[var(--line-height-h3)]\",\n  4: \"text-[length:var(--font-size-h4)] leading-[var(--line-height-h4)]\",\n  5: \"text-[length:var(--font-size-h5)] leading-[var(--line-height-h5)]\",\n  6: \"text-[length:var(--font-size-h6)] leading-[var(--line-height-h6)]\",\n} as const;\n\nconst headingBase =\n  \"font-[family-name:var(--font-display)] [font-weight:var(--font-weight-heading)] text-balance tracking-tight text-foreground\";\n\n/**\n * Semantic heading that reads its font family, weight, and size from\n * theme-overridable design tokens (`--font-display`, `--font-weight-heading`,\n * `--font-size-h{n}`). `level` sets the element (`h1`–`h6`); `size` overrides\n * the visual scale step (defaults to `level`), so a brand restyles every heading\n * by overriding tokens — no fork.\n *\n * @example\n * <Heading level={1}>Page title</Heading>\n * @example\n * <Heading level={2} size={1}>An h2 sized like an h1</Heading>\n */\nconst Heading = ({\n  className,\n  level = 2,\n  ref,\n  size,\n  ...props\n}: HeadingProps) => {\n  const Tag = headingTag[level];\n\n  return (\n    <Tag\n      className={cn(headingBase, headingSize[size ?? level], className)}\n      ref={ref}\n      {...props}\n    />\n  );\n};\nHeading.displayName = \"Heading\";\n\nexport { Heading };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.3.0",
  "stability": "stable",
  "a11y": {
    "role": "heading",
    "notes": "Renders a native h1–h6 chosen by `level` for a correct document outline. `size` restyles the visual scale without changing the semantic rank, so the outline stays intact. No ARIA required."
  }
}