{
  "name": "heading",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "heading.tsx",
      "content": "\"use client\";\r\n\r\nimport { createVariants, themeVars as theme } from \"@yugnex/core\";\r\nimport { forwardRef, type HTMLAttributes } from \"react\";\r\n\r\nconst headingVariants = createVariants({\r\n  base: {\r\n    fontFamily: theme.fontFamily.sans,\r\n    fontWeight: theme.fontWeight.semibold,\r\n    letterSpacing: theme.letterSpacing.tight,\r\n    margin: 0,\r\n  },\r\n  variants: {\r\n    size: {\r\n      sm: { fontSize: theme.fontSize.lg, lineHeight: theme.lineHeight.lg },\r\n      md: { fontSize: theme.fontSize[\"2xl\"], lineHeight: theme.lineHeight[\"2xl\"] },\r\n      lg: { fontSize: theme.fontSize[\"3xl\"], lineHeight: theme.lineHeight[\"3xl\"] },\r\n      xl: { fontSize: theme.fontSize[\"4xl\"], lineHeight: theme.lineHeight[\"4xl\"] },\r\n      \"2xl\": { fontSize: theme.fontSize[\"5xl\"], lineHeight: theme.lineHeight[\"5xl\"] },\r\n    },\r\n  },\r\n  defaultVariants: { size: \"md\" },\r\n});\r\n\r\nexport interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {\r\n  as?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\r\n  size?: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\r\n}\r\n\r\n/** Sane default heading typography. `as` picks the semantic level; `size` picks the visual scale — independently. */\r\nexport const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(function Heading(\r\n  { as, size, className, ...props },\r\n  ref,\r\n) {\r\n  const Component = as ?? \"h2\";\r\n  return <Component ref={ref} className={headingVariants({ size, className })} {...props} />;\r\n});\r\n",
      "type": "registry:component"
    }
  ]
}