{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "typography",
  "title": "Typography",
  "description": "21 typography components: 6 Display, 6 Headline, 3 Title, 3 Label, 3 Body. Required by every other IndiaCN component.",
  "registryDependencies": ["https://indiacn.in/r/theme.json"],
  "files": [
    {
      "path": "components/ui/typography.tsx",
      "content": "import { FC, HTMLAttributes } from 'react';\n\nimport { cn } from '@/lib/utils';\n\n/**\n * Display1 Component - 80px display text for prominent titles and hero sections.\n *\n * @component\n * @example\n * ```tsx\n * <Display1>Large Hero Title</Display1>\n * <Display1 className=\"text-center\">Centered Title</Display1>\n * ```\n *\n * @param props - Standard HTML heading attributes\n * @returns  An h1 element with 80px font size and medium weight\n */\nconst Display1: FC<HTMLAttributes<HTMLHeadingElement>> = ({ children, className, ...props }) => {\n  return (\n    <h1 className={cn('text-[5rem] leading-25 font-medium', className)} {...props}>\n      {children}\n    </h1>\n  );\n};\n\n/**\n * Display2 Component - 72px display text for large headings.\n *\n * @component\n * @example\n * ```tsx\n * <Display2>Section Title</Display2>\n * ```\n *\n * @param props - Standard HTML heading attributes\n * @returns  An h1 element with 72px font size and medium weight\n */\nconst Display2: FC<HTMLAttributes<HTMLHeadingElement>> = ({ children, className, ...props }) => {\n  return (\n    <h1 className={cn('text-[4.5rem] leading-25 font-medium', className)} {...props}>\n      {children}\n    </h1>\n  );\n};\n\n/**\n * Display3 Component - 64px display text for medium-large headings.\n *\n * @component\n * @example\n * ```tsx\n * <Display3>Page Title</Display3>\n * ```\n *\n * @param props - Standard HTML heading attributes\n * @returns  An h1 element with 64px font size and medium weight\n */\nconst Display3: FC<HTMLAttributes<HTMLHeadingElement>> = ({ children, className, ...props }) => {\n  return (\n    <h1 className={cn('text-[4rem] leading-20 font-medium', className)} {...props}>\n      {children}\n    </h1>\n  );\n};\n\n/**\n * Display4 Component - 56px display text for prominent headings.\n *\n * @component\n * @example\n * ```tsx\n * <Display4>Feature Title</Display4>\n * ```\n *\n * @param props - Standard HTML heading attributes\n * @returns  An h1 element with 56px font size and medium weight\n */\nconst Display4: FC<HTMLAttributes<HTMLHeadingElement>> = ({ children, className, ...props }) => {\n  return (\n    <h1 className={cn('text-[3.5rem] leading-18 font-medium', className)} {...props}>\n      {children}\n    </h1>\n  );\n};\n\n/**\n * Display5 Component - 48px display text for section headings.\n *\n * @component\n * @example\n * ```tsx\n * <Display5>Content Section</Display5>\n * ```\n *\n * @param props - Standard HTML heading attributes\n * @returns  An h1 element with 48px font size and medium weight\n */\nconst Display5: FC<HTMLAttributes<HTMLHeadingElement>> = ({ children, className, ...props }) => {\n  return (\n    <h1 className={cn('text-[3rem] leading-14 font-medium', className)} {...props}>\n      {children}\n    </h1>\n  );\n};\n\n/**\n * Display6 Component - 40px display text for smaller display headings.\n *\n * @component\n * @example\n * ```tsx\n * <Display6>Card Title</Display6>\n * ```\n *\n * @param props - Standard HTML heading attributes\n * @returns  An h1 element with 40px font size and medium weight\n */\nconst Display6: FC<HTMLAttributes<HTMLHeadingElement>> = ({ children, className, ...props }) => {\n  return (\n    <h1 className={cn('text-[2.5rem] leading-12 font-medium', className)} {...props}>\n      {children}\n    </h1>\n  );\n};\n\n/**\n * Headline1 Component - 40px semibold headline for main page headings.\n *\n * @component\n * @example\n * ```tsx\n * <Headline1>Main Page Heading</Headline1>\n * ```\n *\n * @param props - Standard HTML heading attributes\n * @returns  An h1 element with 40px font size and semibold weight\n */\nconst Headline1: FC<HTMLAttributes<HTMLHeadingElement>> = ({ children, className, ...props }) => {\n  return (\n    <h1 className={cn('text-[2.5rem] leading-12 font-semibold', className)} {...props}>\n      {children}\n    </h1>\n  );\n};\n\n/**\n * Headline2 Component - 32px semibold headline for section headings.\n *\n * @component\n * @example\n * ```tsx\n * <Headline2>Section Heading</Headline2>\n * ```\n *\n * @param props - Standard HTML heading attributes\n * @returns  An h2 element with 32px font size and semibold weight\n */\nconst Headline2: FC<HTMLAttributes<HTMLHeadingElement>> = ({ children, className, ...props }) => {\n  return (\n    <h2 className={cn('text-[2rem] leading-10 font-semibold', className)} {...props}>\n      {children}\n    </h2>\n  );\n};\n\n/**\n * Headline3 Component - 28px semibold headline for subsection headings.\n *\n * @component\n * @example\n * ```tsx\n * <Headline3>Subsection Title</Headline3>\n * ```\n *\n * @param props - Standard HTML heading attributes\n * @returns  An h3 element with 28px font size and semibold weight\n */\nconst Headline3: FC<HTMLAttributes<HTMLHeadingElement>> = ({ children, className, ...props }) => {\n  return (\n    <h3 className={cn('text-[1.75rem] leading-8 font-semibold', className)} {...props}>\n      {children}\n    </h3>\n  );\n};\n\n/**\n * Headline4 Component - 24px semibold headline for card headings.\n *\n * @component\n * @example\n * ```tsx\n * <Headline4>Card Title</Headline4>\n * ```\n *\n * @param props - Standard HTML heading attributes\n * @returns  An h4 element with 24px font size and semibold weight\n */\nconst Headline4: FC<HTMLAttributes<HTMLHeadingElement>> = ({ children, className, ...props }) => {\n  return (\n    <h4 className={cn('text-[1.5rem] leading-7 font-semibold', className)} {...props}>\n      {children}\n    </h4>\n  );\n};\n\n/**\n * Headline5 Component - 20px semibold headline for component headings.\n *\n * @component\n * @example\n * ```tsx\n * <Headline5>Component Header</Headline5>\n * ```\n *\n * @param props - Standard HTML heading attributes\n * @returns  An h5 element with 20px font size and semibold weight\n */\nconst Headline5: FC<HTMLAttributes<HTMLHeadingElement>> = ({ children, className, ...props }) => {\n  return (\n    <h5 className={cn('text-[1.25rem] leading-6 font-semibold', className)} {...props}>\n      {children}\n    </h5>\n  );\n};\n\n/**\n * Headline6 Component - 16px semibold headline for small headings.\n *\n * @component\n * @example\n * ```tsx\n * <Headline6>Small Heading</Headline6>\n * ```\n *\n * @param props - Standard HTML heading attributes\n * @returns  An h6 element with 16px font size and semibold weight\n */\nconst Headline6: FC<HTMLAttributes<HTMLHeadingElement>> = ({ children, className, ...props }) => {\n  return (\n    <h6 className={cn('text-[1rem] leading-5 font-semibold', className)} {...props}>\n      {children}\n    </h6>\n  );\n};\n\n/**\n * Title1 Component - 22px medium title for list items and card titles.\n *\n * @component\n * @example\n * ```tsx\n * <Title1>List Item Title</Title1>\n * ```\n *\n * @param props - Standard HTML heading attributes\n * @returns  An h3 element with 22px font size and medium weight\n */\nconst Title1: FC<HTMLAttributes<HTMLHeadingElement>> = ({ children, className, ...props }) => {\n  return (\n    <h3 className={cn('text-[1.375rem] leading-7 font-medium', className)} {...props}>\n      {children}\n    </h3>\n  );\n};\n\n/**\n * Title2 Component - 16px medium title for buttons and form labels.\n *\n * @component\n * @example\n * ```tsx\n * <Title2>Button Text</Title2>\n * ```\n *\n * @param props - Standard HTML heading attributes\n * @returns  An h4 element with 16px font size and medium weight\n */\nconst Title2: FC<HTMLAttributes<HTMLHeadingElement>> = ({ children, className, ...props }) => {\n  return (\n    <h4\n      className={cn('text-[1rem] leading-6 font-medium tracking-[0.009375rem]', className)}\n      {...props}\n    >\n      {children}\n    </h4>\n  );\n};\n\n/**\n * Title3 Component - 14px medium title for compact headings.\n *\n * @component\n * @example\n * ```tsx\n * <Title3>Compact Title</Title3>\n * ```\n *\n * @param props - Standard HTML heading attributes\n * @returns  An h5 element with 14px font size and medium weight\n */\nconst Title3: FC<HTMLAttributes<HTMLHeadingElement>> = ({ children, className, ...props }) => {\n  return (\n    <h5\n      className={cn('text-[0.875rem] leading-5 font-medium tracking-[0.00625rem]', className)}\n      {...props}\n    >\n      {children}\n    </h5>\n  );\n};\n\n/**\n * Label1 Component - 14px medium label for button text and form labels.\n *\n * @component\n * @example\n * ```tsx\n * <Label1>Button Label</Label1>\n * <label><Label1>Form Field</Label1></label>\n * ```\n *\n * @param  props - Standard HTML span attributes\n * @returns  A span element with 14px font size and medium weight\n */\nconst Label1: FC<HTMLAttributes<HTMLSpanElement>> = ({ children, className, ...props }) => {\n  return (\n    <span\n      className={cn('text-[0.875rem] leading-5 font-medium tracking-[0.00625rem]', className)}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n};\n\n/**\n * Label2 Component - 12px medium label for small buttons and tags.\n *\n * @component\n * @example\n * ```tsx\n * <Label2>Small Button</Label2>\n * <Label2>Tag</Label2>\n * ```\n *\n * @param  props - Standard HTML span attributes\n * @returns  A span element with 12px font size and medium weight\n */\nconst Label2: FC<HTMLAttributes<HTMLSpanElement>> = ({ children, className, ...props }) => {\n  return (\n    <span\n      className={cn('text-[0.75rem] leading-4 font-medium tracking-[0.03125rem]', className)}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n};\n\n/**\n * Label3 Component - 11px medium label for tiny labels and captions.\n *\n * @component\n * @example\n * ```tsx\n * <Label3>Tiny Label</Label3>\n * ```\n *\n * @param  props - Standard HTML span attributes\n * @returns  A span element with 11px font size and medium weight\n */\nconst Label3: FC<HTMLAttributes<HTMLSpanElement>> = ({ children, className, ...props }) => {\n  return (\n    <span\n      className={cn('text-[0.6875rem] leading-4 font-medium tracking-[0.03125rem]', className)}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n};\n\n/**\n * Body1 Component - 16px normal body text for main content.\n *\n * @component\n * @example\n * ```tsx\n * <Body1>This is the main content paragraph with regular body text.</Body1>\n * ```\n *\n * @param  props - Standard HTML paragraph attributes\n * @returns  A p element with 16px font size and normal weight\n */\nconst Body1: FC<HTMLAttributes<HTMLParagraphElement>> = ({ children, className, ...props }) => {\n  return (\n    <p\n      className={cn('text-[1rem] leading-6 font-normal tracking-[0.03125rem]', className)}\n      {...props}\n    >\n      {children}\n    </p>\n  );\n};\n\n/**\n * Body2 Component - 14px normal body text for secondary content.\n *\n * @component\n * @example\n * ```tsx\n * <Body2>This is secondary body text for descriptions.</Body2>\n * ```\n *\n * @param  props - Standard HTML paragraph attributes\n * @returns  A p element with 14px font size and normal weight\n */\nconst Body2: FC<HTMLAttributes<HTMLParagraphElement>> = ({ children, className, ...props }) => {\n  return (\n    <p\n      className={cn('text-[0.875rem] leading-5 font-normal tracking-[0.015625rem]', className)}\n      {...props}\n    >\n      {children}\n    </p>\n  );\n};\n\n/**\n * Body3 Component - 12px normal body text for small text and captions.\n *\n * @component\n * @example\n * ```tsx\n * <Body3>This is small text for captions or helper text.</Body3>\n * ```\n *\n * @param  props - Standard HTML paragraph attributes\n * @returns  A p element with 12px font size and normal weight\n */\nconst Body3: FC<HTMLAttributes<HTMLParagraphElement>> = ({ children, className, ...props }) => {\n  return (\n    <p\n      className={cn('text-[0.75rem] leading-4 font-normal tracking-[0.025rem]', className)}\n      {...props}\n    >\n      {children}\n    </p>\n  );\n};\n\nexport {\n  Display1,\n  Display2,\n  Display3,\n  Display4,\n  Display5,\n  Display6,\n  Headline1,\n  Headline2,\n  Headline3,\n  Headline4,\n  Headline5,\n  Headline6,\n  Title1,\n  Title2,\n  Title3,\n  Label1,\n  Label2,\n  Label3,\n  Body1,\n  Body2,\n  Body3,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}