heading

1import { mergeProps } from "@base-ui/react/merge-props"
2import { useRender } from "@base-ui/react/use-render"
3import { cva, type VariantProps } from "class-variance-authority"
4 
5import { cn } from "@/lib/utils"
6 
7const headingVariants = cva("font-heading text-foreground", {
8  variants: {
9    size: {
10      1: "text-[2.25rem]/[1.25] font-bold tracking-[-0.02em]",
11      2: "text-[1.75rem]/[1.3] font-bold tracking-[-0.017em]",
12      3: "text-[1.5rem]/[1.35] font-bold tracking-[-0.014em]",
13      4: "text-[1.375rem]/[1.4] font-bold tracking-[-0.011em]",
14      5: "text-[1.25rem]/[1.4] font-bold tracking-[-0.008em]",
15      6: "text-[1.125rem]/[1.45] font-bold tracking-[-0.005em]",
16    },
17    wrap: {
18      normal: "text-wrap",
19      nowrap: "text-nowrap",
20      balance: "text-balance",
21      pretty: "text-pretty",
22    },
23  },
24  defaultVariants: {
25    size: 1,
26    wrap: "normal",
27  },
28})
29 
30type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6
31 
32function Heading({
33  className,
34  level = 1,
35  size,
36  wrap,
37  render,
38  ...props
39}: useRender.ComponentProps<"h1"> &
40  VariantProps<typeof headingVariants> & {
41    /** Heading rank. Sets the rendered tag and, unless `size` says otherwise, the visual size. */
42    level?: HeadingLevel
43  }) {
44  const resolvedSize = size ?? level
45 
46  return useRender({
47    defaultTagName: `h${level}`,
48    props: mergeProps<"h1">(
49      {
50        className: cn(headingVariants({ size: resolvedSize, wrap }), className),
51      },
52      props
53    ),
54    render,
55    state: {
56      slot: "heading",
57      level,
58      size: resolvedSize,
59    },
60  })
61}
62 
63export { Heading, headingVariants }