{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "typography",
  "title": "Typography",
  "description": "Heading and Text for the Notra type scale: Satoshi headlines on a display scale with tight tracking, and Inter body copy with size, tone and weight. Load Satoshi (Fontshare) and Inter Variable yourself; the stacks fall back to system fonts.",
  "dependencies": [
    "@base-ui/react",
    "cn"
  ],
  "files": [
    {
      "path": "registry/notra/typography/components/typography.tsx",
      "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cn } from \"cn\";\n\nimport {\n  HEADING_SIZE_CLASSES,\n  TEXT_SIZE_CLASSES,\n  TEXT_TONE_CLASSES,\n  TEXT_WEIGHT_CLASSES,\n} from \"../constants/typography\";\nimport type { HeadingProps, TextProps } from \"../types/typography\";\n\n/**\n * A Satoshi headline from the display scale. Renders an `h2`; pass\n * `render={<h1 />}` for another level, since size doesn't imply a level.\n */\nexport function Heading({\n  size = \"section\",\n  className,\n  render,\n  ...props\n}: HeadingProps) {\n  return useRender({\n    defaultTagName: \"h2\",\n    render,\n    props: mergeProps<\"h2\">(\n      {\n        // The size stays outside cn: merge tables read `text-display-*` as a\n        // colour and would drop it next to a colour in `className`.\n        className: `${HEADING_SIZE_CLASSES[size]} ${cn(\"font-display text-balance\", className)}`,\n      },\n      props\n    ),\n  });\n}\n\n/** Body copy in Inter. Renders a `p`; pass `render={<span />}` inline. */\nexport function Text({\n  size = \"base\",\n  tone,\n  weight,\n  className,\n  render,\n  ...props\n}: TextProps) {\n  return useRender({\n    defaultTagName: \"p\",\n    render,\n    props: mergeProps<\"p\">(\n      {\n        className: cn(\n          \"text-pretty\",\n          TEXT_SIZE_CLASSES[size],\n          tone && TEXT_TONE_CLASSES[tone],\n          weight && TEXT_WEIGHT_CLASSES[weight],\n          className\n        ),\n      },\n      props\n    ),\n  });\n}\n",
      "type": "registry:component",
      "target": "components/typography/components/typography.tsx"
    },
    {
      "path": "registry/notra/typography/constants/typography.ts",
      "content": "/**\n * Display steps per heading size. Hero and section grow a step from `sm` up.\n * Pick a size with the `size` prop; a `text-*` size in `className` won't replace it.\n */\nexport const HEADING_SIZE_CLASSES = {\n  hero: \"text-display-lg sm:text-display-2xl\",\n  section: \"text-display-md sm:text-display-xl\",\n  title: \"text-display-sm\",\n  subhead: \"text-display-xs\",\n} as const;\n\nexport const TEXT_SIZE_CLASSES = {\n  lg: \"text-lg\",\n  base: \"text-base\",\n  sm: \"text-sm\",\n  xs: \"text-xs\",\n  \"2xs\": \"text-2xs\",\n} as const;\n\nexport const TEXT_TONE_CLASSES = {\n  default: \"text-foreground\",\n  muted: \"text-muted-foreground\",\n} as const;\n\nexport const TEXT_WEIGHT_CLASSES = {\n  regular: \"font-normal\",\n  medium: \"font-medium\",\n} as const;\n",
      "type": "registry:lib",
      "target": "components/typography/constants/typography.ts"
    },
    {
      "path": "registry/notra/typography/types/typography.ts",
      "content": "import type { useRender } from \"@base-ui/react/use-render\";\n\nimport type {\n  HEADING_SIZE_CLASSES,\n  TEXT_SIZE_CLASSES,\n  TEXT_TONE_CLASSES,\n  TEXT_WEIGHT_CLASSES,\n} from \"../constants/typography\";\n\nexport type HeadingSize = keyof typeof HEADING_SIZE_CLASSES;\nexport type TextSize = keyof typeof TEXT_SIZE_CLASSES;\nexport type TextTone = keyof typeof TEXT_TONE_CLASSES;\nexport type TextWeight = keyof typeof TEXT_WEIGHT_CLASSES;\n\nexport type HeadingProps = useRender.ComponentProps<\"h2\"> & {\n  /** Display step. Independent of the heading level, which `render` sets. */\n  size?: HeadingSize;\n};\n\nexport type TextProps = useRender.ComponentProps<\"p\"> & {\n  size?: TextSize;\n  /** Leave unset to inherit the surrounding colour. */\n  tone?: TextTone;\n  /** Leave unset to inherit the surrounding weight. */\n  weight?: TextWeight;\n};\n",
      "type": "registry:lib",
      "target": "components/typography/types/typography.ts"
    }
  ],
  "cssVars": {
    "theme": {
      "font-display": "\"Satoshi\", \"Inter Variable\", \"Inter Fallback\", ui-sans-serif, system-ui, sans-serif",
      "font-instrument": "\"Instrument Serif\", ui-serif, Georgia, serif",
      "text-display-2xl": "3rem",
      "text-display-2xl--line-height": "1.1",
      "text-display-2xl--letter-spacing": "-0.02em",
      "text-display-2xl--font-weight": "500",
      "text-display-xl": "2.875rem",
      "text-display-xl--line-height": "1.12",
      "text-display-xl--letter-spacing": "-0.02em",
      "text-display-xl--font-weight": "500",
      "text-display-lg": "2.25rem",
      "text-display-lg--line-height": "1.1",
      "text-display-lg--letter-spacing": "-0.02em",
      "text-display-lg--font-weight": "500",
      "text-display-md": "2rem",
      "text-display-md--line-height": "1.12",
      "text-display-md--letter-spacing": "-0.02em",
      "text-display-md--font-weight": "500",
      "text-display-sm": "1.75rem",
      "text-display-sm--line-height": "1.21",
      "text-display-sm--letter-spacing": "-0.02em",
      "text-display-sm--font-weight": "500",
      "text-display-xs": "1.125rem",
      "text-display-xs--line-height": "1.5rem",
      "text-display-xs--letter-spacing": "-0.015em",
      "text-display-xs--font-weight": "500",
      "text-2xs": "0.6875rem",
      "text-3xs": "0.625rem"
    }
  },
  "type": "registry:component"
}