Tabs

1'use client';
2
3import { cva, type VariantProps } from 'class-variance-authority';
4import { motion, useReducedMotion } from 'motion/react';
5import * as React from 'react';
6import { cn } from '../lib/cn';
7import { springs, still } from '../lib/motion';
8import { useControllableState } from '../lib/use-controllable-state';
9
10const tabsListVariants = cva(
11  'inline-flex max-w-full rounded-md p-0.5 text-muted-foreground w-full sm:w-auto overflow-x-auto overflow-y-hidden [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
12  {
13    variants: {
14      variant: {
15        default: 'bg-muted/60 border border-border/40',
16        outline: 'border border-border bg-transparent',
17        underline: 'bg-transparent border-b border-border rounded-none p-0 justify-start w-full',
18        ghost: 'bg-transparent p-0 gap-1',
19        unstyled: '',
20      },
21      size: {
22        default: 'h-9',
23        sm: 'h-8',
24        lg: 'h-11',
25      },
26    },
27  },
28);
29
30const tabsTriggerVariants = cva(
31  'relative inline-flex shrink-0 items-center justify-center whitespace-nowrap px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-40 z-10 cursor-pointer',
32  {
33    variants: {
34      variant: {
35        default: 'text-muted-foreground data-[state=active]:text-foreground',
36        outline: 'text-muted-foreground data-[state=active]:text-foreground',
37        underline:
38          'text-muted-foreground hover:text-foreground data-[state=active]:text-foreground rounded-none bg-transparent px-4 pb-3 pt-2',
39        ghost:
40          'text-muted-foreground hover:text-foreground data-[state=active]:text-foreground hover:bg-muted/50 rounded-md',
41      },
42      size: {
43        default: 'text-sm',
44        sm: 'text-xs',
45        lg: 'text-base px-5',
46      },
47    },
48    defaultVariants: {
49      variant: 'default',
50      size: 'default',
51    },
52  },
53);
54
55type TabsOrientation = 'horizontal' | 'vertical';
56
57interface TabsContextValue {
58  activeTab: string;
59  setActiveTab: (value: string) => void;
60  variant: NonNullable<TabsProps['variant']>;
61  size: NonNullable<TabsProps['size']>;
62  layoutId: string;
63  mountedPanels: ReadonlySet<string>;
64  registerPanel: (value: string) => () => void;
65}
66
67interface TabsListContextValue {
68  orientation: TabsOrientation;
69  fallbackTab: string | null;
70}
71
72const TabsContext = React.createContext<TabsContextValue | null>(null);
73const TabsListContext = React.createContext<TabsListContextValue>({
74  orientation: 'horizontal',
75  fallbackTab: null,
76});
77
78function useTabsContext() {
79  const context = React.use(TabsContext);
80  if (!context) throw new Error('Tabs components must be used within Tabs');
81  return context;
82}
83
84function toDomId(value: string) {
85  return value.replace(
86    /[^A-Za-z0-9-]/g,
87    (char) => `_${char.charCodeAt(0).toString(16).padStart(4, '0')}`,
88  );
89}
90
91function getTriggers(list: Element) {
92  return Array.from(list.querySelectorAll<HTMLButtonElement>('[role="tab"]')).filter(
93    (trigger) => trigger.closest('[role="tablist"]') === list,
94  );
95}
96
97interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
98  defaultValue?: string;
99  value?: string;
100  onValueChange?: (value: string) => void;
101  variant?: 'default' | 'outline' | 'underline' | 'ghost';
102  size?: 'default' | 'sm' | 'lg';
103}
104
105const TabsRoot = ({
106  className,
107  defaultValue,
108  value: controlledValue,
109  onValueChange,
110  variant = 'default',
111  size = 'default',
112  children,
113  ref,
114  ...props
115}: TabsProps & { ref?: React.Ref<HTMLDivElement> }) => {
116  const [activeTab, setActiveTab] = useControllableState({
117    value: controlledValue,
118    defaultValue: defaultValue || '',
119    onChange: onValueChange,
120  });
121  const layoutId = React.useId();
122  const [mountedPanels, setMountedPanels] = React.useState<ReadonlySet<string>>(() => new Set());
123
124  const registerPanel = React.useCallback((value: string) => {
125    setMountedPanels((previous) => (previous.has(value) ? previous : new Set(previous).add(value)));
126    return () => {
127      setMountedPanels((previous) => {
128        if (!previous.has(value)) return previous;
129        const next = new Set(previous);
130        next.delete(value);
131        return next;
132      });
133    };
134  }, []);
135
136  const contextValue = React.useMemo(
137    () => ({ activeTab, setActiveTab, variant, size, layoutId, mountedPanels, registerPanel }),
138    [activeTab, setActiveTab, variant, size, layoutId, mountedPanels, registerPanel],
139  );
140
141  return (
142    <TabsContext value={contextValue}>
143      <div ref={ref} className={cn('w-full', className)} {...props}>
144        {children}
145      </div>
146    </TabsContext>
147  );
148};
149TabsRoot.displayName = 'Tabs';
150
151interface TabsListProps
152  extends
153    Omit<
154      React.HTMLAttributes<HTMLDivElement>,
155      'onAnimationStart' | 'onDrag' | 'onDragEnd' | 'onDragStart'
156    >,
157    VariantProps<typeof tabsListVariants> {
158  orientation?: TabsOrientation;
159}
160
161const TabsList = ({
162  className,
163  variant,
164  size,
165  orientation = 'horizontal',
166  children,
167  ref,
168  ...props
169}: TabsListProps & { ref?: React.Ref<HTMLDivElement> }) => {
170  const { activeTab, variant: contextVariant, size: contextSize } = useTabsContext();
171  const finalVariant = variant || contextVariant;
172  const listRef = React.useRef<HTMLDivElement | null>(null);
173  const [fallbackTab, setFallbackTab] = React.useState<string | null>(null);
174
175  React.useLayoutEffect(() => {
176    const list = listRef.current;
177    if (!list) return;
178    const enabled = getTriggers(list).filter((trigger) => !trigger.disabled);
179    const hasActive = enabled.some((trigger) => trigger.getAttribute('aria-selected') === 'true');
180    setFallbackTab(hasActive ? null : (enabled[0]?.dataset.value ?? null));
181  }, [activeTab, children]);
182
183  const mergedRef = React.useCallback(
184    (node: HTMLDivElement | null) => {
185      listRef.current = node;
186      if (typeof ref === 'function') ref(node);
187      else if (ref) ref.current = node;
188    },
189    [ref],
190  );
191
192  const listContext = React.useMemo(
193    () => ({ orientation, fallbackTab }),
194    [orientation, fallbackTab],
195  );
196
197  return (
198    <TabsListContext value={listContext}>
199      <motion.div
200        ref={mergedRef}
201        role="tablist"
202        aria-orientation={orientation}
203        layoutScroll
204        className={cn(
205          tabsListVariants({ variant: finalVariant, size: size || contextSize }),
206          className,
207        )}
208        {...props}
209      >
210        {children}
211      </motion.div>
212    </TabsListContext>
213  );
214};
215TabsList.displayName = 'TabsList';
216
217interface TabsTriggerProps
218  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof tabsTriggerVariants> {
219  value: string;
220  children: React.ReactNode;
221}
222
223const TabsTrigger = ({
224  className,
225  value,
226  children,
227  variant,
228  size,
229  onClick,
230  onKeyDown,
231  ref,
232  ...props
233}: TabsTriggerProps & { ref?: React.Ref<HTMLButtonElement> }) => {
234  const {
235    activeTab,
236    setActiveTab,
237    variant: contextVariant,
238    size: contextSize,
239    layoutId,
240    mountedPanels,
241  } = useTabsContext();
242  const { orientation, fallbackTab } = React.use(TabsListContext);
243  const isActive = activeTab === value;
244  const finalVariant = variant || contextVariant;
245  const finalSize = size || contextSize;
246  const shouldReduceMotion = useReducedMotion();
247  const domValue = toDomId(value);
248  const hasPanel = isActive || mountedPanels.has(value);
249
250  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
251    onClick?.(e);
252    if (e.defaultPrevented) return;
253    setActiveTab(value);
254  };
255
256  const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
257    onKeyDown?.(e);
258    if (e.defaultPrevented) return;
259    const current = e.currentTarget;
260    const list = current.closest('[role="tablist"]');
261    if (!list) return;
262
263    const triggers = getTriggers(list).filter((trigger) => !trigger.disabled);
264    const currentIndex = triggers.indexOf(current);
265    if (currentIndex === -1) return;
266
267    const isRtl = orientation === 'horizontal' && getComputedStyle(list).direction === 'rtl';
268    const nextKey = orientation === 'vertical' ? 'ArrowDown' : isRtl ? 'ArrowLeft' : 'ArrowRight';
269    const previousKey = orientation === 'vertical' ? 'ArrowUp' : isRtl ? 'ArrowRight' : 'ArrowLeft';
270
271    let newIndex: number;
272    if (e.key === nextKey) {
273      newIndex = (currentIndex + 1) % triggers.length;
274    } else if (e.key === previousKey) {
275      newIndex = (currentIndex - 1 + triggers.length) % triggers.length;
276    } else if (e.key === 'Home') {
277      newIndex = 0;
278    } else if (e.key === 'End') {
279      newIndex = triggers.length - 1;
280    } else {
281      return;
282    }
283
284    e.preventDefault();
285    if (newIndex !== currentIndex) {
286      triggers[newIndex]?.focus();
287      triggers[newIndex]?.click();
288    }
289  };
290
291  return (
292    <button
293      ref={ref}
294      type="button"
295      role="tab"
296      id={`${layoutId}-trigger-${domValue}`}
297      aria-selected={isActive}
298      aria-controls={hasPanel ? `${layoutId}-content-${domValue}` : undefined}
299      tabIndex={isActive || fallbackTab === value ? 0 : -1}
300      data-state={isActive ? 'active' : 'inactive'}
301      data-value={value}
302      className={cn(tabsTriggerVariants({ variant: finalVariant, size: finalSize }), className)}
303      {...props}
304      onClick={handleClick}
305      onKeyDown={handleKeyDown}
306    >
307      <span className="inherit relative z-20">{children}</span>
308      {isActive && (
309        <motion.div
310          layoutId={`${layoutId}-indicator`}
311          className={cn(
312            'absolute inset-0 z-10',
313            finalVariant === 'underline'
314              ? 'bg-foreground top-auto bottom-0 h-[1.5px]'
315              : 'bg-background dark:bg-input border-border/30 rounded-sm border shadow-sm',
316          )}
317          transition={shouldReduceMotion ? still : springs.smooth}
318        />
319      )}
320    </button>
321  );
322};
323TabsTrigger.displayName = 'TabsTrigger';
324
325interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
326  value: string;
327  forceMount?: boolean;
328}
329
330const TabsContent = ({
331  className,
332  value,
333  forceMount = false,
334  children,
335  ref,
336  ...props
337}: TabsContentProps & { ref?: React.Ref<HTMLDivElement> }) => {
338  const { activeTab, layoutId, registerPanel } = useTabsContext();
339  const isActive = activeTab === value;
340  const domValue = toDomId(value);
341
342  React.useLayoutEffect(() => {
343    if (!forceMount) return;
344    return registerPanel(value);
345  }, [forceMount, registerPanel, value]);
346
347  if (!isActive && !forceMount) return null;
348
349  return (
350    <div
351      ref={ref}
352      role="tabpanel"
353      id={`${layoutId}-content-${domValue}`}
354      aria-labelledby={`${layoutId}-trigger-${domValue}`}
355      tabIndex={0}
356      hidden={!isActive}
357      data-state={isActive ? 'active' : 'inactive'}
358      className={cn(
359        'ring-offset-background focus-visible:ring-ring mt-4 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
360        className,
361      )}
362      {...props}
363    >
364      {children}
365    </div>
366  );
367};
368TabsContent.displayName = 'TabsContent';
369
370const Tabs = Object.assign(TabsRoot, {
371  List: TabsList,
372  Trigger: TabsTrigger,
373  Content: TabsContent,
374});
375
376export { Tabs };