{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "typography",
  "description": "A polymorphic Typography component with 14 variants (hero, h1–h4, p, lead, large, small, muted, tiny, blockquote, code, error) built with cva. Renders the semantically correct HTML element by default with full support for the `as` prop.",
  "dependencies": [
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "registry/components/typography.tsx",
      "content": "import React, { type JSX } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '~/lib/utils';\n\ntype TypographyVariant =\n    | 'hero'\n    | 'h1'\n    | 'h2'\n    | 'h3'\n    | 'h4'\n    | 'p'\n    | 'blockquote'\n    | 'code'\n    | 'lead'\n    | 'large'\n    | 'small'\n    | 'muted'\n    | 'tiny'\n    | 'error';\n\nconst variantElementMap: Record<TypographyVariant, keyof JSX.IntrinsicElements> = {\n    hero: 'h1',\n    h1: 'h1',\n    h2: 'h2',\n    h3: 'h3',\n    h4: 'h4',\n    p: 'p',\n    blockquote: 'blockquote',\n    code: 'code',\n    lead: 'p',\n    large: 'div',\n    small: 'small',\n    muted: 'p',\n    tiny: 'span',\n    error: 'span',\n};\n\nconst typographyVariants = cva('', {\n    variants: {\n        variant: {\n            hero: 'scroll-m-20 font-extrabold tracking-wider text-[4.5em] lg:text-[6em]',\n            h1: 'scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl',\n            h2: 'scroll-m-20 text-3xl font-semibold tracking-tight transition-colors first:mt-0',\n            h3: 'scroll-m-20 text-2xl font-semibold tracking-tight',\n            h4: 'scroll-m-20 text-xl font-semibold tracking-tight',\n            p: 'leading-7 [&:not(:first-child)]:mt-6',\n            blockquote: 'mt-6 border-l-2 pl-6 italic',\n            code: 'relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold',\n            lead: 'text-xl text-muted-foreground',\n            large: 'text-lg font-semibold',\n            small: 'text-sm font-medium leading-none',\n            muted: 'text-sm text-muted-foreground',\n            tiny: 'text-[10px] leading-3 text-muted-foreground',\n            error: 'text-[10px] leading-3 text-destructive-foreground',\n        },\n    },\n    defaultVariants: {\n        variant: 'p',\n    },\n});\n\ntype TypographyProps = React.HTMLAttributes<HTMLElement> &\n    VariantProps<typeof typographyVariants>;\n\nconst Typography = ({ variant = 'p', children, className, ...props }: TypographyProps) => {\n    const Element = variantElementMap[variant as TypographyVariant];\n\n    return React.createElement(\n        Element,\n        {\n            className: cn(typographyVariants({ variant }), className),\n            ...props,\n        },\n        children\n    );\n};\n\nexport { Typography, type TypographyProps, type TypographyVariant, typographyVariants };\nexport default Typography;\n",
      "type": "registry:component",
      "target": "components/ui/typography.tsx"
    }
  ],
  "type": "registry:component"
}