{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "typography",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": ["class-variance-authority"],
  "devDependencies": [],
  "files": [
    {
      "path": "typography.tsx",
      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst componentThemeClassName =\n  \"[--ic-background:#ffffff] [--ic-foreground:#111111] [--ic-primary:#111111] [--ic-secondary:#646b75] [--ic-surface-border:#e9edf2] [--ic-border:#e3e7ec] [--ic-card:#ffffff] [--ic-card-foreground:#111111] [--ic-muted:#f5f7fa] [--ic-muted-foreground:#6d7480] [--ic-accent:#f3f5f8] [--color-accent:var(--ic-accent)] [--color-accent-foreground:var(--ic-accent-foreground)] [--ic-accent-foreground:#111111] [--ic-input:#e3e7ec] [--ic-ring:rgba(17,17,17,0.16)] [--ic-destructive:#dc2626] [--ic-paper:#fcfcfd] [--ic-popover-foreground:#111111] [--ic-brand:#0ea5e9] [--ic-brand-soft:#bae6fd] [--ic-shadow-soft:0_18px_38px_-24px_rgba(15,23,42,0.35)] [--ic-chart-1:oklch(0.52_0.19_254)] [--ic-chart-2:oklch(0.74_0.11_232)] [--ic-chart-3:oklch(0.42_0.16_262)] [--ic-chart-4:oklch(0.84_0.07_228)] [--ic-chart-5:oklch(0.62_0.14_240)] [--color-background:var(--ic-background)] [--color-foreground:var(--ic-foreground)] [--color-primary:var(--ic-primary)] [--color-secondary:var(--ic-secondary)] [--color-border:var(--ic-border)] [--color-card:var(--ic-card)] [--color-card-foreground:var(--ic-card-foreground)] [--color-muted:var(--ic-muted)] [--color-muted-foreground:var(--ic-muted-foreground)] [--color-accent:var(--ic-accent)] [--color-accent-foreground:var(--ic-accent-foreground)] [--color-input:var(--ic-input)] [--color-ring:var(--ic-ring)] [--color-destructive:var(--ic-destructive)] [--color-paper:var(--ic-paper)] [--color-popover-foreground:var(--ic-popover-foreground)] [--color-brand:var(--ic-brand)] [--color-brand-soft:var(--ic-brand-soft)] [--color-chart-1:var(--ic-chart-1)] [--color-chart-2:var(--ic-chart-2)] [--color-chart-3:var(--ic-chart-3)] [--color-chart-4:var(--ic-chart-4)] [--color-chart-5:var(--ic-chart-5)] dark:[--ic-background:#111111] dark:[--ic-foreground:#f6f3ec] dark:[--ic-primary:#f6f3ec] dark:[--ic-secondary:#cbc6bb] dark:[--ic-surface-border:#2a2a25] dark:[--ic-border:#2b2a25] dark:[--ic-card:#111111] dark:[--ic-card-foreground:#f6f3ec] dark:[--ic-muted:#171716] dark:[--ic-muted-foreground:#9a958a] dark:[--ic-accent:#1a1a18] [--color-accent:var(--ic-accent)] [--color-accent-foreground:var(--ic-accent-foreground)] dark:[--ic-accent-foreground:#f6f3ec] dark:[--ic-input:#2b2a25] dark:[--ic-ring:rgba(246,243,236,0.18)] dark:[--ic-destructive:#f87171] dark:[--ic-paper:#171716] dark:[--ic-popover-foreground:#f6f3ec] dark:[--ic-brand:#38bdf8] dark:[--ic-brand-soft:#0c4a6e] dark:[--ic-shadow-soft:0_20px_44px_-28px_rgba(0,0,0,0.6)] dark:[--ic-chart-1:oklch(0.68_0.17_250)] dark:[--ic-chart-2:oklch(0.82_0.09_225)] dark:[--ic-chart-3:oklch(0.58_0.15_260)] dark:[--ic-chart-4:oklch(0.75_0.12_235)] dark:[--ic-chart-5:oklch(0.88_0.06_220)]\";\n\nconst TYPOGRAPHY_SAMPLE_TEXT = \"Talent without working hard is nothing.\";\n\nconst TYPOGRAPHY_VARIANT_META = {\n  h1: {\n    label: \"Title / H1 Title\",\n    element: \"h1\",\n    weight: \"Medium / 500\",\n    fontSize: \"56px\",\n    lineHeight: \"64px\",\n    letterSpacing: \"-1%\",\n    className: \"font-medium text-[56px] leading-[64px] tracking-[-0.01em]\",\n  },\n  h2: {\n    label: \"Title / H2 Title\",\n    element: \"h2\",\n    weight: \"Medium / 500\",\n    fontSize: \"48px\",\n    lineHeight: \"56px\",\n    letterSpacing: \"-1%\",\n    className: \"font-medium text-[48px] leading-[56px] tracking-[-0.01em]\",\n  },\n  h3: {\n    label: \"Title / H3 Title\",\n    element: \"h3\",\n    weight: \"Medium / 500\",\n    fontSize: \"40px\",\n    lineHeight: \"48px\",\n    letterSpacing: \"-1%\",\n    className: \"font-medium text-[40px] leading-[48px] tracking-[-0.01em]\",\n  },\n  h4: {\n    label: \"Title / H4 Title\",\n    element: \"h4\",\n    weight: \"Medium / 500\",\n    fontSize: \"32px\",\n    lineHeight: \"40px\",\n    letterSpacing: \"-0.5%\",\n    className: \"font-medium text-[32px] leading-[40px] tracking-[-0.005em]\",\n  },\n  h5: {\n    label: \"Title / H5 Title\",\n    element: \"h5\",\n    weight: \"Medium / 500\",\n    fontSize: \"24px\",\n    lineHeight: \"32px\",\n    letterSpacing: \"0%\",\n    className: \"font-medium text-[24px] leading-[32px] tracking-[0em]\",\n  },\n  h6: {\n    label: \"Title / H6 Title\",\n    element: \"h6\",\n    weight: \"Medium / 500\",\n    fontSize: \"20px\",\n    lineHeight: \"28px\",\n    letterSpacing: \"0%\",\n    className: \"font-medium text-[20px] leading-[28px] tracking-[0em]\",\n  },\n  \"label-xl\": {\n    label: \"Label / X-Large\",\n    element: \"p\",\n    weight: \"Medium / 500\",\n    fontSize: \"24px\",\n    lineHeight: \"32px\",\n    letterSpacing: \"-1.5%\",\n    className: \"font-medium text-[24px] leading-[32px] tracking-[-0.015em]\",\n  },\n  \"label-lg\": {\n    label: \"Label / Large\",\n    element: \"p\",\n    weight: \"Medium / 500\",\n    fontSize: \"18px\",\n    lineHeight: \"24px\",\n    letterSpacing: \"-1.5%\",\n    className: \"font-medium text-[18px] leading-[24px] tracking-[-0.015em]\",\n  },\n  \"label-md\": {\n    label: \"Label / Medium\",\n    element: \"p\",\n    weight: \"Medium / 500\",\n    fontSize: \"16px\",\n    lineHeight: \"24px\",\n    letterSpacing: \"-1.1%\",\n    className: \"font-medium text-[16px] leading-[24px] tracking-[-0.011em]\",\n  },\n  \"label-sm\": {\n    label: \"Label / Small\",\n    element: \"p\",\n    weight: \"Medium / 500\",\n    fontSize: \"14px\",\n    lineHeight: \"20px\",\n    letterSpacing: \"-0.6%\",\n    className: \"font-medium text-[14px] leading-[20px] tracking-[-0.006em]\",\n  },\n  \"label-xs\": {\n    label: \"Label / X-Small\",\n    element: \"p\",\n    weight: \"Medium / 500\",\n    fontSize: \"12px\",\n    lineHeight: \"16px\",\n    letterSpacing: \"0%\",\n    className: \"font-medium text-[12px] leading-[16px] tracking-[0em]\",\n  },\n  \"paragraph-xl\": {\n    label: \"Paragraph / X-Large\",\n    element: \"p\",\n    weight: \"Regular / 400\",\n    fontSize: \"24px\",\n    lineHeight: \"32px\",\n    letterSpacing: \"-1.5%\",\n    className: \"text-[24px] leading-[32px] tracking-[-0.015em]\",\n  },\n  \"paragraph-lg\": {\n    label: \"Paragraph / Large\",\n    element: \"p\",\n    weight: \"Regular / 400\",\n    fontSize: \"18px\",\n    lineHeight: \"24px\",\n    letterSpacing: \"-1.5%\",\n    className: \"text-[18px] leading-[24px] tracking-[-0.015em]\",\n  },\n  \"paragraph-md\": {\n    label: \"Paragraph / Medium\",\n    element: \"p\",\n    weight: \"Regular / 400\",\n    fontSize: \"16px\",\n    lineHeight: \"24px\",\n    letterSpacing: \"-1.1%\",\n    className: \"text-[16px] leading-[24px] tracking-[-0.011em]\",\n  },\n  \"paragraph-sm\": {\n    label: \"Paragraph / Small\",\n    element: \"p\",\n    weight: \"Regular / 400\",\n    fontSize: \"14px\",\n    lineHeight: \"20px\",\n    letterSpacing: \"-0.6%\",\n    className: \"text-[14px] leading-[20px] tracking-[-0.006em]\",\n  },\n  \"paragraph-xs\": {\n    label: \"Paragraph / X-Small\",\n    element: \"p\",\n    weight: \"Regular / 400\",\n    fontSize: \"12px\",\n    lineHeight: \"16px\",\n    letterSpacing: \"0%\",\n    className: \"text-[12px] leading-[16px] tracking-[0em]\",\n  },\n  \"subheading-md\": {\n    label: \"Subheading / Medium\",\n    element: \"p\",\n    weight: \"Medium / 500\",\n    fontSize: \"16px\",\n    lineHeight: \"24px\",\n    letterSpacing: \"6%\",\n    className: \"font-medium text-[16px] leading-[24px] tracking-[0.06em]\",\n  },\n  \"subheading-sm\": {\n    label: \"Subheading / Small\",\n    element: \"p\",\n    weight: \"Medium / 500\",\n    fontSize: \"14px\",\n    lineHeight: \"20px\",\n    letterSpacing: \"6%\",\n    className: \"font-medium text-[14px] leading-[20px] tracking-[0.06em]\",\n  },\n  \"subheading-xs\": {\n    label: \"Subheading / X-Small\",\n    element: \"p\",\n    weight: \"Medium / 500\",\n    fontSize: \"12px\",\n    lineHeight: \"16px\",\n    letterSpacing: \"4%\",\n    className: \"font-medium text-[12px] leading-[16px] tracking-[0.04em]\",\n  },\n  \"subheading-2xs\": {\n    label: \"Subheading / 2X-Small\",\n    element: \"p\",\n    weight: \"Medium / 500\",\n    fontSize: \"11px\",\n    lineHeight: \"12px\",\n    letterSpacing: \"2%\",\n    className: \"font-medium text-[11px] leading-[12px] tracking-[0.02em]\",\n  },\n  \"doc-label\": {\n    label: \"Doc / Label\",\n    element: \"p\",\n    weight: \"Medium / 500\",\n    fontSize: \"18px\",\n    lineHeight: \"32px\",\n    letterSpacing: \"-1.5%\",\n    className: \"font-medium text-[18px] leading-[32px] tracking-[-0.015em]\",\n  },\n  \"doc-paragraph\": {\n    label: \"Doc / Paragraph\",\n    element: \"p\",\n    weight: \"Regular / 400\",\n    fontSize: \"18px\",\n    lineHeight: \"32px\",\n    letterSpacing: \"-1.5%\",\n    className: \"text-[18px] leading-[32px] tracking-[-0.015em]\",\n  },\n} as const;\n\nconst TYPOGRAPHY_VARIANT_CLASSES = {\n  h1: TYPOGRAPHY_VARIANT_META.h1.className,\n  h2: TYPOGRAPHY_VARIANT_META.h2.className,\n  h3: TYPOGRAPHY_VARIANT_META.h3.className,\n  h4: TYPOGRAPHY_VARIANT_META.h4.className,\n  h5: TYPOGRAPHY_VARIANT_META.h5.className,\n  h6: TYPOGRAPHY_VARIANT_META.h6.className,\n  \"label-xl\": TYPOGRAPHY_VARIANT_META[\"label-xl\"].className,\n  \"label-lg\": TYPOGRAPHY_VARIANT_META[\"label-lg\"].className,\n  \"label-md\": TYPOGRAPHY_VARIANT_META[\"label-md\"].className,\n  \"label-sm\": TYPOGRAPHY_VARIANT_META[\"label-sm\"].className,\n  \"label-xs\": TYPOGRAPHY_VARIANT_META[\"label-xs\"].className,\n  \"paragraph-xl\": TYPOGRAPHY_VARIANT_META[\"paragraph-xl\"].className,\n  \"paragraph-lg\": TYPOGRAPHY_VARIANT_META[\"paragraph-lg\"].className,\n  \"paragraph-md\": TYPOGRAPHY_VARIANT_META[\"paragraph-md\"].className,\n  \"paragraph-sm\": TYPOGRAPHY_VARIANT_META[\"paragraph-sm\"].className,\n  \"paragraph-xs\": TYPOGRAPHY_VARIANT_META[\"paragraph-xs\"].className,\n  \"subheading-md\": TYPOGRAPHY_VARIANT_META[\"subheading-md\"].className,\n  \"subheading-sm\": TYPOGRAPHY_VARIANT_META[\"subheading-sm\"].className,\n  \"subheading-xs\": TYPOGRAPHY_VARIANT_META[\"subheading-xs\"].className,\n  \"subheading-2xs\": TYPOGRAPHY_VARIANT_META[\"subheading-2xs\"].className,\n  \"doc-label\": TYPOGRAPHY_VARIANT_META[\"doc-label\"].className,\n  \"doc-paragraph\": TYPOGRAPHY_VARIANT_META[\"doc-paragraph\"].className,\n} as const;\n\nconst TYPOGRAPHY_GROUPS = [\n  {\n    label: \"Title\",\n    variants: [\"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\"],\n  },\n  {\n    label: \"Label\",\n    variants: [\"label-xl\", \"label-lg\", \"label-md\", \"label-sm\", \"label-xs\"],\n  },\n  {\n    label: \"Paragraph\",\n    variants: [\n      \"paragraph-xl\",\n      \"paragraph-lg\",\n      \"paragraph-md\",\n      \"paragraph-sm\",\n      \"paragraph-xs\",\n    ],\n  },\n  {\n    label: \"Subheading\",\n    variants: [\n      \"subheading-md\",\n      \"subheading-sm\",\n      \"subheading-xs\",\n      \"subheading-2xs\",\n    ],\n  },\n  {\n    label: \"Doc\",\n    variants: [\"doc-label\", \"doc-paragraph\"],\n  },\n] as const satisfies ReadonlyArray<{\n  label: string;\n  variants: readonly (keyof typeof TYPOGRAPHY_VARIANT_META)[];\n}>;\n\nconst typographyVariants = cva(\"text-foreground\", {\n  variants: {\n    variant: TYPOGRAPHY_VARIANT_CLASSES,\n  },\n  defaultVariants: {\n    variant: \"paragraph-md\",\n  },\n});\n\ntype TypographyElement = React.ElementType;\n\ntype TypographyVariant = keyof typeof TYPOGRAPHY_VARIANT_META;\n\ntype TypographyProps = React.HTMLAttributes<HTMLElement> &\n  VariantProps<typeof typographyVariants> & {\n    as?: TypographyElement;\n  };\n\nconst Typography = React.forwardRef<HTMLElement, TypographyProps>(\n  ({ as, className, variant, ...props }, ref) => {\n    const resolvedVariant = variant ?? \"paragraph-md\";\n    const Component = as ?? TYPOGRAPHY_VARIANT_META[resolvedVariant].element;\n\n    return (\n      <Component\n        className={cn(\n          componentThemeClassName,\n          typographyVariants({ variant: resolvedVariant }),\n          className\n        )}\n        ref={ref as never}\n        {...props}\n      />\n    );\n  }\n);\nTypography.displayName = \"Typography\";\n\nexport {\n  Typography,\n  TYPOGRAPHY_GROUPS,\n  TYPOGRAPHY_SAMPLE_TEXT,\n  TYPOGRAPHY_VARIANT_META,\n  typographyVariants,\n};\nexport type { TypographyProps, TypographyVariant };\n",
      "type": "registry:ui"
    }
  ],
  "title": "Typography",
  "description": "Single typography primitive that maps the full heading, label, paragraph, subheading, and documentation scale through one variant prop."
}