{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "typography",
  "title": "Typography",
  "description": "Semantic text primitives: headings, paragraph, lead, muted, blockquote, inline code, and list.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/typography/typography.tsx",
      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@vllnt/ui\";\n\n/**\n * Shared typographic scale for the semantic text primitives. Exposed so\n * consumers can compose the same styles onto bespoke elements.\n */\nexport const typographyVariants = cva(\"\", {\n  defaultVariants: {\n    variant: \"p\",\n  },\n  variants: {\n    variant: {\n      blockquote: \"mt-6 border-l-2 border-border pl-6 italic text-foreground\",\n      h1: \"scroll-m-20 text-4xl font-extrabold tracking-tight text-balance lg:text-5xl\",\n      h2: \"scroll-m-20 border-b border-border pb-2 text-3xl font-semibold tracking-tight 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      inlineCode:\n        \"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold text-foreground\",\n      lead: \"text-xl text-muted-foreground\",\n      list: \"my-6 ml-6 list-disc [&>li]:mt-2\",\n      muted: \"text-sm text-muted-foreground\",\n      p: \"leading-7 [&:not(:first-child)]:mt-6\",\n    },\n  },\n});\n\n/** Variant key accepted by {@link typographyVariants}. */\nexport type TypographyVariant = NonNullable<\n  VariantProps<typeof typographyVariants>[\"variant\"]\n>;\n\n/** Props for a heading-level typographic primitive. */\nexport type HeadingProps = React.HTMLAttributes<HTMLHeadingElement>;\n\n/** Props for a paragraph-level typographic primitive. */\nexport type ParagraphProps = React.HTMLAttributes<HTMLParagraphElement>;\n\n/** Props for the blockquote primitive. */\nexport type BlockquoteProps = React.BlockquoteHTMLAttributes<HTMLQuoteElement>;\n\n/** Props for the inline code primitive. */\nexport type InlineCodeProps = React.HTMLAttributes<HTMLElement>;\n\n/** Props for the unordered list primitive. */\nexport type ListProps = React.HTMLAttributes<HTMLUListElement>;\n\n/**\n * Top-level page heading.\n * @example\n * <H1>Page title</H1>\n */\nconst H1 = ({\n  children,\n  className,\n  ref,\n  ...props\n}: HeadingProps & { ref?: React.Ref<HTMLHeadingElement> }) => (\n  <h1\n    className={cn(typographyVariants({ variant: \"h1\" }), className)}\n    ref={ref}\n    {...props}\n  >\n    {children}\n  </h1>\n);\nH1.displayName = \"H1\";\n\n/** Section heading. */\nconst H2 = ({\n  children,\n  className,\n  ref,\n  ...props\n}: HeadingProps & { ref?: React.Ref<HTMLHeadingElement> }) => (\n  <h2\n    className={cn(typographyVariants({ variant: \"h2\" }), className)}\n    ref={ref}\n    {...props}\n  >\n    {children}\n  </h2>\n);\nH2.displayName = \"H2\";\n\n/** Subsection heading. */\nconst H3 = ({\n  children,\n  className,\n  ref,\n  ...props\n}: HeadingProps & { ref?: React.Ref<HTMLHeadingElement> }) => (\n  <h3\n    className={cn(typographyVariants({ variant: \"h3\" }), className)}\n    ref={ref}\n    {...props}\n  >\n    {children}\n  </h3>\n);\nH3.displayName = \"H3\";\n\n/** Minor heading. */\nconst H4 = ({\n  children,\n  className,\n  ref,\n  ...props\n}: HeadingProps & { ref?: React.Ref<HTMLHeadingElement> }) => (\n  <h4\n    className={cn(typographyVariants({ variant: \"h4\" }), className)}\n    ref={ref}\n    {...props}\n  >\n    {children}\n  </h4>\n);\nH4.displayName = \"H4\";\n\n/** Body paragraph with sensible vertical rhythm. */\nconst P = ({\n  className,\n  ref,\n  ...props\n}: ParagraphProps & { ref?: React.Ref<HTMLParagraphElement> }) => (\n  <p\n    className={cn(typographyVariants({ variant: \"p\" }), className)}\n    ref={ref}\n    {...props}\n  />\n);\nP.displayName = \"P\";\n\n/** Emphasised introductory paragraph. */\nconst Lead = ({\n  className,\n  ref,\n  ...props\n}: ParagraphProps & { ref?: React.Ref<HTMLParagraphElement> }) => (\n  <p\n    className={cn(typographyVariants({ variant: \"lead\" }), className)}\n    ref={ref}\n    {...props}\n  />\n);\nLead.displayName = \"Lead\";\n\n/** De-emphasised secondary text. */\nconst Muted = ({\n  className,\n  ref,\n  ...props\n}: ParagraphProps & { ref?: React.Ref<HTMLParagraphElement> }) => (\n  <p\n    className={cn(typographyVariants({ variant: \"muted\" }), className)}\n    ref={ref}\n    {...props}\n  />\n);\nMuted.displayName = \"Muted\";\n\n/** Quoted passage with a leading rule. */\nconst Blockquote = ({\n  className,\n  ref,\n  ...props\n}: BlockquoteProps & { ref?: React.Ref<HTMLQuoteElement> }) => (\n  <blockquote\n    className={cn(typographyVariants({ variant: \"blockquote\" }), className)}\n    ref={ref}\n    {...props}\n  />\n);\nBlockquote.displayName = \"Blockquote\";\n\n/** Inline monospaced code span. */\nconst InlineCode = ({\n  className,\n  ref,\n  ...props\n}: InlineCodeProps & { ref?: React.Ref<HTMLElement> }) => (\n  <code\n    className={cn(typographyVariants({ variant: \"inlineCode\" }), className)}\n    ref={ref}\n    {...props}\n  />\n);\nInlineCode.displayName = \"InlineCode\";\n\n/** Bulleted list with indentation and item spacing. */\nconst List = ({\n  className,\n  ref,\n  ...props\n}: ListProps & { ref?: React.Ref<HTMLUListElement> }) => (\n  <ul\n    className={cn(typographyVariants({ variant: \"list\" }), className)}\n    ref={ref}\n    {...props}\n  />\n);\nList.displayName = \"List\";\n\nexport { Blockquote, H1, H2, H3, H4, InlineCode, Lead, List, Muted, P };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.2.1",
  "stability": "stable"
}