Tabs Glass

1/* eslint-disable react-refresh/only-export-components */
2/**
3 * TabsGlass Component (Radix UI based)
4 *
5 * Glass-themed tab navigation built on Radix UI primitives with:
6 * - 100% shadcn/ui type compatibility
7 * - Theme-aware styling (glass/light/aurora)
8 * - Active tab indicator
9 * - Full keyboard navigation (Arrow keys, Home, End)
10 * - Support for orientation, dir, activationMode
11 *
12 * @since v2.2.6 - Migrated to Radix UI primitives for full type compatibility
13 */
14 
15import * as React from 'react';
16import * as TabsPrimitive from '@radix-ui/react-tabs';
17import { cn } from '@/lib/utils';
18import '@/glass-theme.css';
19 
20// ========================================
21// TYPES
22// ========================================
23 
24/**
25 * Legacy TabItem interface for backwards compatibility
26 */
27export interface TabItem {
28  readonly id: string;
29  readonly label: string;
30}
31 
32/**
33 * Props for TabsGlass Root component
34 *
35 * Extends Radix UI Tabs.Root props for 100% shadcn/ui compatibility.
36 * All Radix props are supported including: value, defaultValue, onValueChange,
37 * orientation, dir, activationMode.
38 *
39 * **Type Compatibility (v2.3.1+):**
40 * - Extends `React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>`
41 * - No more `as unknown as` type assertions needed
42 * - Full IntelliSense for all Radix props
43 *
44 * **New props from Radix:**
45 * - `orientation`: 'horizontal' | 'vertical' - Tab layout direction
46 * - `dir`: 'ltr' | 'rtl' - Text direction for RTL support
47 * - `activationMode`: 'automatic' | 'manual' - Tab activation behavior
48 *
49 * @accessibility
50 * - **Keyboard Navigation:** Arrow keys navigate between tabs (respects orientation)
51 * - **Focus Management:** Visible focus ring using CSS variables
52 * - **Screen Readers:** Radix UI handles all ARIA attributes automatically
53 * - **RTL Support:** Full RTL support via `dir` prop
54 *
55 * @example
56 * ```tsx
57 * // Basic usage
58 * <Tabs defaultValue="tab1">
59 *   <TabsList>
60 *     <TabsTrigger value="tab1">Tab 1</TabsTrigger>
61 *     <TabsTrigger value="tab2">Tab 2</TabsTrigger>
62 *   </TabsList>
63 *   <TabsContent value="tab1">Content 1</TabsContent>
64 *   <TabsContent value="tab2">Content 2</TabsContent>
65 * </Tabs>
66 *
67 * // Vertical tabs
68 * <Tabs defaultValue="tab1" orientation="vertical">
69 *   <TabsList>
70 *     <TabsTrigger value="tab1">Tab 1</TabsTrigger>
71 *     <TabsTrigger value="tab2">Tab 2</TabsTrigger>
72 *   </TabsList>
73 *   <TabsContent value="tab1">Content 1</TabsContent>
74 * </Tabs>
75 *
76// … truncated