tabs

1import * as React from "react"
2import * as TabsPrimitive from "@radix-ui/react-tabs"
3import { cva, type VariantProps } from "class-variance-authority"
4 
5import { cn } from "@/lib/utils"
6import "./tabs.css"
7 
8/* ------------------------------------------------------------------ */
9/*  Context                                                            */
10/* ------------------------------------------------------------------ */
11 
12type TabsVariant = "underline" | "pill"
13 
14const TabsContext = React.createContext<{
15  variant: TabsVariant
16  size: "sm" | "md"
17}>({ variant: "underline", size: "md" })
18 
19/* ------------------------------------------------------------------ */
20/*  CVA                                                                */
21/* ------------------------------------------------------------------ */
22 
23const tabsListVariants = cva("tabs-list inline-flex items-center", {
24  variants: {
25    variant: {
26      underline: "tabs-list-underline gap-[var(--layout-gap-lg)]",
27      pill: "tabs-list-pill w-fit gap-[var(--layout-gap-xs)] p-[var(--layout-padding-2xs)] rounded-[var(--layout-radius-lg)]",
28    },
29  },
30  defaultVariants: {
31    variant: "underline",
32  },
33})
34 
35const tabsTriggerVariants = cva(
36  "tabs-trigger inline-flex items-center justify-center whitespace-nowrap font-accent cursor-pointer",
37  {
38    variants: {
39      variant: {
40        underline: "tabs-trigger-underline",
41        pill: "tabs-trigger-pill rounded-[var(--layout-radius-md)]",
42      },
43      size: {
44        sm: "h-[var(--layout-size-lg)] px-[var(--layout-padding-xs)] text-content-caption",
45        md: "h-[var(--layout-size-xl)] px-[var(--layout-padding-md)] text-content-note",
46      },
47    },
48    compoundVariants: [
49      { variant: "pill", size: "sm", className: "h-[var(--layout-size-md)]" },
50      { variant: "pill", size: "md", className: "h-[var(--layout-size-lg)]" },
51    ],
52    defaultVariants: {
53      variant: "underline",
54      size: "md",
55    },
56  }
57)
58 
59/* ------------------------------------------------------------------ */
60/*  Tabs                                                               */
61/* ------------------------------------------------------------------ */
62 
63function Tabs({
64  className,
65  variant = "underline",
66  size = "md",
67  ...props
68}: React.ComponentProps<typeof TabsPrimitive.Root> & {
69  variant?: TabsVariant
70  size?: "sm" | "md"
71}) {
72  return (
73    <TabsContext.Provider value={{ variant, size }}>
74      <TabsPrimitive.Root
75        data-slot="tabs"
76// … truncated