Tabs

1'use client';
2 
3import * as TabsPrimitive from '@radix-ui/react-tabs';
4import { ComponentProps, createContext, useContext } from 'react';
5 
6import { cn } from '@/lib/utils';
7 
8/*
9 * UX4G nav variants:
10 * - tabs:      border-bottom 1px neutral-200, link rounded-top; active = neutral-0 bg, visible top/side border
11 * - pills:     active bg primary, text neutral-0, rounded
12 * - underline: border-bottom animates in on active (2px primary)
13 * Disabled: color neutral-500, pointer-events none.
14 */
15 
16type TTabsVariant = 'tabs' | 'pills' | 'underline';
17 
18const TABS_CONTEXT = createContext<TTabsVariant>('tabs');
19 
20interface ITabsProps extends ComponentProps<typeof TabsPrimitive.Root> {
21  variant?: TTabsVariant;
22}
23 
24/** Tabs root component. Passes variant down to list/trigger via context. */
25function Tabs({ className, variant = 'tabs', ...props }: ITabsProps) {
26  return (
27    <TABS_CONTEXT.Provider value={variant}>
28      <TabsPrimitive.Root className={cn('w-full', className)} {...props} />
29    </TABS_CONTEXT.Provider>
30  );
31}
32 
33interface ITabsListProps extends ComponentProps<typeof TabsPrimitive.List> {
34  variant?: TTabsVariant;
35}
36 
37/** Container for tab trigger buttons. */
38function TabsList({ className, variant, ...props }: ITabsListProps) {
39  const ctxVariant = useContext(TABS_CONTEXT);
40  const resolved = variant ?? ctxVariant;
41  return (
42    <TabsPrimitive.List
43      className={cn(
44        'inline-flex items-center',
45        resolved === 'tabs' && 'gap-0 border-b border-neutral-200',
46        resolved === 'pills' && 'gap-1',
47        resolved === 'underline' && 'gap-0 border-b border-neutral-200',
48        className,
49      )}
50      {...props}
51    />
52  );
53}
54 
55interface ITabsTriggerProps extends ComponentProps<typeof TabsPrimitive.Trigger> {
56  variant?: TTabsVariant;
57}
58 
59/** Clickable tab trigger button. */
60function TabsTrigger({ className, variant, ...props }: ITabsTriggerProps) {
61  const ctxVariant = useContext(TABS_CONTEXT);
62  const resolved = variant ?? ctxVariant;
63  return (
64    <TabsPrimitive.Trigger
65      className={cn(
66        'inline-flex items-center justify-center px-4 py-2 text-sm transition-[color,background-color,border-color] duration-150 focus-visible:outline-none disabled:pointer-events-none disabled:text-neutral-500 disabled:opacity-50',
67        resolved === 'tabs' && [
68          'relative -mb-px rounded-t-md border border-transparent text-neutral-600',
69          'hover:text-neutral hover:border-neutral-100 hover:border-b-neutral-200',
70// … truncated