aragrp/components/ui/typography.tsx

import * as React from "react";
import { Slot } from "@radix-ui/react-slot";

import {
  typographyVariants,
  type TypographyVariant,
} from "@/lib/typography";
import { cn } from "@/lib/utils";

const defaultElement: Record<TypographyVariant, React.ElementType> = {
  display: "h1",
  h1: "h1",
  h2: "h2",
  h3: "h3",
  h4: "h4",
  "body-lg": "p",
  body: "p",
  "body-sm": "p",
  caption: "span",
  micro: "span",
  eyebrow: "p",
  label: "span",
  nav: "span",
  "nav-mobile": "span",
  button: "span",
  "button-lg": "span",
  "card-title": "h3",
  "card-desc": "p",
  chat: "p",
  code: "code",
  stat: "span",
  link: "span",
  "section-intro": "p",
  emphasis: "p",
  "list-title": "span",
  "cta-title": "h2",
  "display-mono": "span",
};

export type TypographyProps = {
  variant: TypographyVariant;
  as?: React.ElementType;
  asChild?: boolean;
  className?: string;
  children?: React.ReactNode;
} & React.HTMLAttributes<HTMLElement>;

export function Typography({
  variant,
  as,
  asChild = false,
  className,
  children,
  ...props
}: TypographyProps) {
  const Comp = asChild ? Slot : (as ?? defaultElement[variant] ?? "p");

  return (
    <Comp
      className={cn(typographyVariants({ variant }), className)}
      {...props}
    >
      {children}
    </Comp>
  );
}

export {
  Display,
  PageTitle,
  SectionTitle,
  SubsectionTitle,
  SmallHeading,
  BodyLarge,
  BodyText,
  BodySmall,
  Caption,
  Eyebrow,
  CardTitleText,
  CardDescText,
  ButtonText,
  ButtonTextLarge,
};

function Display(props: Omit<TypographyProps, "variant">) {
  return <Typography variant="display" {...props} />;
}

function PageTitle(props: Omit<TypographyProps, "variant">) {
  return <Typography variant="h1" {...props} />;
}

function SectionTitle(props: Omit<TypographyProps, "variant">) {
  return <Typography variant="h2" {...props} />;
}

function SubsectionTitle(props: Omit<TypographyProps, "variant">) {
  return <Typography variant="h3" {...props} />;
}

function SmallHeading(props: Omit<TypographyProps, "variant">) {
  return <Typography variant="h4" {...props} />;
}

function BodyLarge(props: Omit<TypographyProps, "variant">) {
  return <Typography variant="body-lg" {...props} />;
}

function BodyText(props: Omit<TypographyProps, "variant">) {
  return <Typography variant="body" {...props} />;
}

function BodySmall(props: Omit<TypographyProps, "variant">) {
  return <Typography variant="body-sm" {...props} />;
}

function Caption(props: Omit<TypographyProps, "variant">) {
  return <Typography variant="caption" {...props} />;
}

function Eyebrow(props: Omit<TypographyProps, "variant">) {
  return <Typography variant="eyebrow" {...props} />;
}

function CardTitleText(props: Omit<TypographyProps, "variant">) {
  return <Typography variant="card-title" {...props} />;
}

function CardDescText(props: Omit<TypographyProps, "variant">) {
  return <Typography variant="card-desc" {...props} />;
}

function ButtonText(props: Omit<TypographyProps, "variant">) {
  return <Typography variant="button" {...props} />;
}

function ButtonTextLarge(props: Omit<TypographyProps, "variant">) {
  return <Typography variant="button-lg" {...props} />;
}