Typography

1"use client"
2import * as React from "react"
3import { cva, type VariantProps } from "class-variance-authority"
4import { cn } from "@/lib/utils"
5
6const typographyVariants = cva("text-foreground transition-colors duration-300", {
7    variants: {
8        variant: {
9            h1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl ",
10            h2: "scroll-m-20 pb-2 text-3xl font-semibold tracking-tight mt-6",
11            h3: "scroll-m-20 text-2xl font-medium tracking-tight mt-4",
12            h4: "scroll-m-20 text-xl font-normal tracking-tight mt-2",
13            p: "leading-7 text-foreground/75 not-first:mt-2 tracking-wide",
14            blockquote: "mt-6 border-l-2 pl-6 italic text-foreground/75",
15            list: "my-6 ml-6 list-disc [&>li]:mt-2 text-foreground/75",
16            inlineCode: "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold text-foreground/75",
17            lead: "text-xl text-muted-foreground",
18            large: "text-lg font-semibold text-foreground",
19            small: "text-sm font-medium leading-none text-foreground/75",
20            muted: "text-sm text-muted-foreground",
21            strong: "font-semibold text-foreground/75",
22        },
23    },
24    defaultVariants: {
25        variant: "p",
26    },
27})
28
29// --- Context ---
30interface TypographyContextValue {
31    variant?: "h1" | "h2" | "h3" | "h4" | "p" | "blockquote" | "list" | "inlineCode" | "lead" | "large" | "small" | "muted" | "strong"
32}
33
34const TypographyContext = React.createContext<TypographyContextValue>({})
35
36export const TypographyProvider = ({
37    children,
38    variant,
39}: {
40    children: React.ReactNode
41    variant?: TypographyContextValue["variant"]
42}) => (
43    <TypographyContext.Provider value={{ variant }}>
44        {children}
45    </TypographyContext.Provider>
46)
47
48export interface TypographyProps
49    extends React.HTMLAttributes<HTMLElement>,
50    VariantProps<typeof typographyVariants> {
51    as?: React.ElementType
52    data?: React.ReactNode[] // For list type
53}
54
55const Typography = React.forwardRef<HTMLElement, TypographyProps>(
56    ({ className, variant: propsVariant, as, data, children, ...props }, ref) => {
57        const context = React.useContext(TypographyContext)
58        const variant = propsVariant || context.variant || "p"
59
60// … truncated