tabs

1'use client';
2 
3import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
4import * as React from 'react';
5 
6import { cn } from '@/registry/lib/utils';
7 
8type TabsVariant = 'soft' | 'solid';
9 
10const TabsContext = React.createContext<{ variant: TabsVariant }>({ variant: 'soft' });
11 
12function Tabs({ className, ...props }: TabsPrimitive.Root.Props) {
13  return (
14    <TabsPrimitive.Root
15      data-slot="tabs"
16      className={cn(
17        'flex flex-col gap-2 data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-start',
18        className
19      )}
20      {...props}
21    />
22  );
23}
24 
25function TabsSurface({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
26  return (
27    <div
28      data-slot="tabs-surface"
29      className={cn('w-fit rounded-md bg-hover/50 p-1 dark:bg-surface-2', className)}
30      {...props}
31    />
32  );
33}
34 
35function TabsList({
36  className,
37  variant = 'soft',
38  track = true,
39  transition = false,
40  children,
41  ...props
42}: TabsPrimitive.List.Props & {
43  variant?: TabsVariant;
44  track?: boolean;
45  transition?: boolean;
46}) {
47  const isSoft = variant === 'soft';
48 
49  return (
50    <TabsContext.Provider value={{ variant }}>
51      <TabsPrimitive.List
52        data-slot="tabs-list"
53        data-variant={variant}
54        className={cn(
55          'relative flex w-fit items-center',
56          'data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-start',
57          isSoft && 'gap-0.5',
58          className
59        )}
60        {...props}
61      >
62        {children}
63        <TabsPrimitive.Indicator
64          data-slot="tabs-indicator"
65          data-variant={variant}
66          className={cn(
67            'pointer-events-none absolute',
68            transition &&
69              'motion-safe:transition-[translate,width,height] motion-safe:duration-200 motion-safe:ease-in-out',
70            [
71              // Anchor to bottom-left; translate to exact tab position for both orientations
72              'bottom-0 left-0 z-0 rounded-sm',
73              'h-(--active-tab-height) w-(--active-tab-width)',
74              'translate-x-(--active-tab-left) -translate-y-(--active-tab-bottom)',
75              isSoft ? 'bg-active' : 'bg-fill',
76            ]
77          )}
78        />
79      </TabsPrimitive.List>
80    </TabsContext.Provider>
81  );
82}
83 
84function TabsTab({ className, ...props }: TabsPrimitive.Tab.Props) {
85  const { variant } = React.useContext(TabsContext);
86  const isSoft = variant === 'soft';
87  return (
88    <TabsPrimitive.Tab
89// … truncated