Tabs

1"use client"
2
3import * as React from "react"
4import * as TabsPrimitive from "@radix-ui/react-tabs"
5import { cn } from "@/lib/utils"
6
7// --- Types & Context ---
8
9import { useFyskAnimation } from "@/components/hooks/useFyskAnimation"
10
11type TabsVariant = "default" | "glass" | "underline" | "pill"
12type TabsSize = "xs" | "sm" | "md" | "lg" | "xl"
13
14import { useFyskConfig } from "@/components/fysk-provider"
15
16type TabsContextValue = {
17    variant: TabsVariant
18    size: TabsSize
19    fullWidth?: boolean
20    value?: string
21    id: string
22}
23
24const TabsContext = React.createContext<TabsContextValue>({
25    variant: "default",
26    size: "md",
27    id: "tabs"
28})
29
30const useTabsContext = () => React.useContext(TabsContext)
31
32// --- Components ---
33
34const Tabs = React.forwardRef<
35    React.ComponentRef<typeof TabsPrimitive.Root>,
36    React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {
37        variant?: TabsVariant
38        size?: TabsSize
39        fullWidth?: boolean
40    }
41>(({ className, variant = "default", size = "md", fullWidth = false, value: propsValue, defaultValue, onValueChange, ...props }, ref) => {
42    const [value, setValue] = React.useState(propsValue || defaultValue)
43    const id = React.useId()
44
45    React.useEffect(() => {
46        if (propsValue !== undefined) setValue(propsValue)
47    }, [propsValue])
48
49    const handleValueChange = (val: string) => {
50        if (propsValue === undefined) setValue(val)
51        onValueChange?.(val)
52    }
53
54    return (
55        <TabsContext.Provider value={{ variant, size, fullWidth, value, id }}>
56            <TabsPrimitive.Root
57                ref={ref}
58                value={value}
59                onValueChange={handleValueChange}
60                className={cn("w-full", className)}
61                {...props}
62            />
63        </TabsContext.Provider>
64    )
65})
66Tabs.displayName = TabsPrimitive.Root.displayName
67
68const TabsList = React.forwardRef<
69    React.ComponentRef<typeof TabsPrimitive.List>,
70    React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
71>(({ className, ...props }, ref) => {
72    const { variant, size, fullWidth } = useTabsContext()
73
74    return (
75        <TabsPrimitive.List
76            ref={ref}
77            className={cn(
78                "inline-flex list-none items-center justify-center transition-all duration-300",
79                // Height Alignment Logic
80                size === "xs" && "h-8",
81// … truncated