Typography

import Typography from "@/components/ui/typography"

export function TypographyComponentDemo() {
  return (
    <div className="space-y-6">
      <Typography variant="h1">Heading 1</Typography>
      <Typography variant="h2">Heading 2</Typography>
      <Typography variant="h3">Heading 3</Typography>
      <Typography variant="paragraph-lg">
        This is a paragraph with the paragraph-lg variant. It uses CSS custom
        properties for consistent typography across your application.
      </Typography>
      <Typography variant="label-md">
        This is a label with label-md variant
      </Typography>
    </div>
  )
}

import Typography from "@/components/ui/typography"

export function TypographyHeadings() {
  return (
    <div className="space-y-3">
      <Typography variant="h1">Heading 1</Typography>
      <Typography variant="h2">Heading 2</Typography>
      <Typography variant="h3">Heading 3</Typography>
      <Typography variant="h4">Heading 4</Typography>
      <Typography variant="h5">Heading 5</Typography>
      <Typography variant="h6">Heading 6</Typography>
    </div>
  )
}

import Typography from "@/components/ui/typography"

export function TypographyParagraphs() {
  return (
    <div className="space-y-4">
      <Typography variant="paragraph-xl">
        Paragraph XL - Large introductory text that draws attention.
      </Typography>
      <Typography variant="paragraph-lg">
        Paragraph LG - Default body text for articles and main content.
      </Typography>
      <Typography variant="paragraph-md">
        Paragraph MD - Component descriptions for cards and dialogs.
      </Typography>
      <Typography variant="paragraph-sm">
        Paragraph SM - Small text for captions.
      </Typography>
    </div>
  )
}

import Typography from "@/components/ui/typography"

export function TypographyLabels() {
  return (
    <div className="space-y-4">
      <Typography variant="label-xl">
        Label XL - Lead text and feature introductions
      </Typography>
      <Typography variant="label-lg">
        Label LG - Important form labels and emphasis
      </Typography>
      <Typography variant="label-md">
        Label MD - Standard form labels and UI labels
      </Typography>
      <Typography variant="label-sm">
        Label SM - Small labels, badges, and metadata
      </Typography>
      <Typography variant="label-xs">
        Label XS - Tiny indicators and micro copy
      </Typography>
    </div>
  )
}

import Typography from "@/components/ui/typography"

export function TypographyPolymorphic() {
  return (
    <div className="space-y-4">
      <Typography
        variant="paragraph-md"
        as="a"
        href="#"
        className="text-primary hover:underline"
      >
        This is a paragraph rendered as a link
      </Typography>

      <div>
        <Typography variant="label-md" as="label" htmlFor="email">
          Email Address
        </Typography>
        <input
          id="email"
          type="email"
          className="mt-1 block w-full rounded-md border px-3 py-2"
          placeholder="you@example.com"
        />
      </div>
    </div>
  )
}