{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "heading",
  "title": "Heading",
  "description": "Heading component for React and shadcn: size, weight, tracking and leading set together from 16 to 60px, separate from the h1–h6 level.",
  "registryDependencies": [
    "https://eased.dev/r/eased-tokens.json"
  ],
  "files": [
    {
      "path": "src/registry/eased/heading/heading.tsx",
      "content": "import type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n/** md 16 · lg 18 · xl 20 · 2xl 24 · 3xl 30 · 4xl 36 · 5xl 48 · 6xl 60 (px). */\nexport type HeadingSize = \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"6xl\";\n\nexport type HeadingProps = {\n  /** The outline level: renders h1–h6. Default 2. */\n  level?: HeadingLevel;\n  /** The visual size, separate from the level. Defaults by level: 1 → 4xl, 2 → 2xl, 3 → xl, 4 → lg, 5–6 → md. */\n  size?: HeadingSize;\n  /** secondary for a heading that sits under a stronger one. Default \"default\". */\n  tone?: \"default\" | \"secondary\";\n  className?: string;\n  children?: ReactNode;\n} & Omit<ComponentPropsWithoutRef<\"h2\">, \"className\" | \"children\">;\n\nconst BY_LEVEL: Record<HeadingLevel, HeadingSize> = { 1: \"4xl\", 2: \"2xl\", 3: \"xl\", 4: \"lg\", 5: \"md\", 6: \"md\" };\n\n// Size, leading and tracking travel together: semibold from 24px, display tracking and the\n// display face from 36px (rules 40, 41, 43). Below 24px a heading is medium, like a title.\nconst SIZE: Record<HeadingSize, string> = {\n  md: \"text-ui-md font-medium\",\n  lg: \"text-ui-lg font-medium\",\n  xl: \"text-display-xl font-medium\",\n  \"2xl\": \"text-display-2xl font-semibold\",\n  \"3xl\": \"text-display-3xl font-semibold\",\n  \"4xl\": \"font-display text-display-4xl font-semibold tracking-display\",\n  \"5xl\": \"font-display text-display-5xl font-semibold tracking-display\",\n  \"6xl\": \"font-display text-display-6xl font-semibold tracking-display\",\n};\n\n/**\n * A heading whose size, weight, tracking and leading are bound together, so a 36px title\n * always gets display tracking and a 20px one never goes semibold. `level` is the document\n * outline; `size` is how it looks. Balanced wrapping keeps short last lines off titles.\n */\nexport function Heading({ level = 2, size, tone = \"default\", className = \"\", ...props }: HeadingProps) {\n  const Tag = `h${level}` as const;\n  return (\n    <Tag\n      {...props}\n      className={`${SIZE[size ?? BY_LEVEL[level]]} ${tone === \"secondary\" ? \"text-text-secondary\" : \"text-text\"} min-w-0 text-balance break-words ${className}`}\n    />\n  );\n}\n",
      "type": "registry:ui",
      "target": "@components/eased/heading/heading.tsx"
    }
  ],
  "meta": {
    "details": "A heading whose size, weight, tracking and leading are bound together. Level sets the outline and size sets the look, from 16 to 60px, with display tracking from 36px.",
    "industries": [
      "ai",
      "devtools",
      "finance",
      "crypto",
      "saas",
      "legal",
      "ecommerce",
      "real-estate",
      "health",
      "hr",
      "education",
      "travel",
      "media"
    ],
    "releaseAt": "2026-10-23"
  },
  "docs": "Import Heading from components/eased/heading/heading. Props: level (1–6), size (md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl), tone. The text-display-* sizes come from the Eased tokens. The Eased tokens were merged into your global CSS; nothing to import.",
  "type": "registry:ui"
}