Tabs

1
"use client";
2

3
import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
4
import { cva, type VariantProps } from "class-variance-authority";
5

6
import { cn } from "@/lib/utils";
7

8
function Tabs({
9
  className,
10
  orientation = "horizontal",
11
  ...props
12
}: TabsPrimitive.Root.Props) {
13
  return (
14
    <TabsPrimitive.Root
15
      data-slot="tabs"
16
      data-orientation={orientation}
17
      className={cn(
18
        "group/tabs flex gap-2 data-horizontal:flex-col has-[[data-slot=tabs-list][data-variant=line]]:gap-0",
19
        className
20
      )}
21
      {...props}
22
    />
23
  );
24
}
25

26
const tabsListVariants = cva(
27
  "group/tabs-list items-center justify-center text-muted-foreground group-data-horizontal/tabs:grid group-data-horizontal/tabs:h-9 group-data-horizontal/tabs:w-fit group-data-horizontal/tabs:auto-cols-fr group-data-horizontal/tabs:grid-flow-col group-data-vertical/tabs:flex group-data-vertical/tabs:h-fit group-data-vertical/tabs:w-fit group-data-vertical/tabs:flex-col",
28
  {
29
    variants: {
30
      variant: {
31
        default: "pixel-rounded pixel-size-[3px] gap-1 bg-muted p-0.75",
32
        line: "group-data-horizontal/tabs:w-full bg-transparent",
33
      },
34
    },
35
    defaultVariants: {
36
      variant: "default",
37
    },
38
  }
39
);
40

41
function TabsList({
42
  className,
43
  variant = "default",
44
  ...props
45
}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
46
  return (
47
    <TabsPrimitive.List
48
      data-slot="tabs-list"
49
      data-variant={variant}
50
      className={cn(tabsListVariants({ variant }), className)}
51
      {...props}
52
    />
53
  );
54
}
55

56
function TabsTrigger({
57
  className,
58
  ...props
59
}: TabsPrimitive.Tab.Props) {
60
  return (
61
    <TabsPrimitive.Tab
62
      data-slot="tabs-trigger"
63
      className={cn(
64
        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 pixel-size-md pixel-color-[transparent] px-2 py-1 text-sm whitespace-nowrap text-foreground/60 [transition-property:color]! focus-visible:z-10 group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
65
        // Default variant: a rounded pill that fills with the page background when active.
66
        "group-data-[variant=default]/tabs-list:pixel-rounded group-data-[variant=default]/tabs-list:pixel-size-lg group-data-[variant=default]/tabs-list:data-active:bg-background group-data-[variant=default]/tabs-list:data-active:text-foreground dark:group-data-[variant=default]/tabs-list:data-active:bg-[color-mix(in_oklab,var(--input)_30%,transparent)]",
67
        // Line variant: a flush, equal-width tab strip — only the outer edges round off, active fills with secondary.
68
        // Inactive tabs blend the focus ring's face into the page background, so
69
        // focus only ever shows as the thin ring border, not a solid fill.
70
        className
71
      )}
72
      {...props}
73
    />
74
  );
75
}
76

77
function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
78
  return (
79
    <TabsPrimitive.Panel
80
      data-slot="tabs-content"
81
      className={cn("flex-1 text-sm outline-none", className)}
82
      {...props}
83
    />
84
  );
85
}
86

87
export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants };