Tabs

1import * as React from 'react'
2import * as TabsPrimitive from '@radix-ui/react-tabs'
3import { cn } from '@/lib/utils'
4 
5const Tabs      = TabsPrimitive.Root
6const TabsGroup = TabsPrimitive.List  // alias
7 
8/* ── List ── */
9const TabsList = React.forwardRef<
10  React.ElementRef<typeof TabsPrimitive.List>,
11  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
12>(({ className, ...props }, ref) => (
13  <TabsPrimitive.List
14    ref={ref}
15    className={cn(
16      'inline-flex items-end',
17      'border-b border-[var(--border)]',
18      'w-full gap-0',
19      className
20    )}
21    {...props}
22  />
23))
24TabsList.displayName = TabsPrimitive.List.displayName
25 
26/* ── Trigger ── */
27const TabsTrigger = React.forwardRef<
28  React.ElementRef<typeof TabsPrimitive.Trigger>,
29  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
30>(({ className, ...props }, ref) => (
31  <TabsPrimitive.Trigger
32    ref={ref}
33    className={cn(
34      'inline-flex items-center justify-center',
35      'px-4 py-2',
36      'text-[0.7rem] font-mono font-medium uppercase tracking-widest',
37      'border-b-2 border-transparent',
38      '-mb-px',
39      'text-[var(--text-muted)]',
40      'cursor-pointer',
41      'outline-none',
42      'transition-all duration-150',
43      'hover:text-[var(--text-secondary)]',
44      'data-[state=active]:text-[var(--color-green)]',
45      'data-[state=active]:border-b-[var(--color-green)]',
46      'data-[state=active]:[text-shadow:var(--text-glow-green)]',
47      'disabled:pointer-events-none disabled:opacity-40',
48      className
49    )}
50    {...props}
51  />
52))
53TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
54 
55/* ── Content ── */
56const TabsContent = React.forwardRef<
57  React.ElementRef<typeof TabsPrimitive.Content>,
58  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
59>(({ className, ...props }, ref) => (
60  <TabsPrimitive.Content
61    ref={ref}
62    className={cn(
63      'mt-4',
64      'focus-visible:outline-none',
65      className
66    )}
67    {...props}
68  />
69))
70TabsContent.displayName = TabsPrimitive.Content.displayName
71 
72export { Tabs, TabsGroup, TabsList, TabsTrigger, TabsContent }