{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"tabs","title":"Tabs","type":"registry:ui","description":"A set of layered sections of content—known as tab panels—that are displayed one at a time.","dependencies":["@radix-ui/react-tabs"],"registryDependencies":["utils","https://fysk.dev/r/fysk-hooks.json","https://fysk.dev/r/fysk-provider.json"],"files":[{"path":"fysk/tabs.tsx","type":"registry:ui","content":"\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\n// --- Types & Context ---\r\n\r\nimport { useFyskAnimation } from \"@/components/hooks/useFyskAnimation\"\r\n\r\ntype TabsVariant = \"default\" | \"glass\" | \"underline\" | \"pill\"\r\ntype TabsSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"\r\n\r\nimport { useFyskConfig } from \"@/components/fysk-provider\"\r\n\r\ntype TabsContextValue = {\r\n    variant: TabsVariant\r\n    size: TabsSize\r\n    fullWidth?: boolean\r\n    value?: string\r\n    id: string\r\n}\r\n\r\nconst TabsContext = React.createContext<TabsContextValue>({\r\n    variant: \"default\",\r\n    size: \"md\",\r\n    id: \"tabs\"\r\n})\r\n\r\nconst useTabsContext = () => React.useContext(TabsContext)\r\n\r\n// --- Components ---\r\n\r\nconst Tabs = React.forwardRef<\r\n    React.ComponentRef<typeof TabsPrimitive.Root>,\r\n    React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {\r\n        variant?: TabsVariant\r\n        size?: TabsSize\r\n        fullWidth?: boolean\r\n    }\r\n>(({ className, variant = \"default\", size = \"md\", fullWidth = false, value: propsValue, defaultValue, onValueChange, ...props }, ref) => {\r\n    const [value, setValue] = React.useState(propsValue || defaultValue)\r\n    const id = React.useId()\r\n\r\n    React.useEffect(() => {\r\n        if (propsValue !== undefined) setValue(propsValue)\r\n    }, [propsValue])\r\n\r\n    const handleValueChange = (val: string) => {\r\n        if (propsValue === undefined) setValue(val)\r\n        onValueChange?.(val)\r\n    }\r\n\r\n    return (\r\n        <TabsContext.Provider value={{ variant, size, fullWidth, value, id }}>\r\n            <TabsPrimitive.Root\r\n                ref={ref}\r\n                value={value}\r\n                onValueChange={handleValueChange}\r\n                className={cn(\"w-full\", className)}\r\n                {...props}\r\n            />\r\n        </TabsContext.Provider>\r\n    )\r\n})\r\nTabs.displayName = TabsPrimitive.Root.displayName\r\n\r\nconst TabsList = React.forwardRef<\r\n    React.ComponentRef<typeof TabsPrimitive.List>,\r\n    React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\r\n>(({ className, ...props }, ref) => {\r\n    const { variant, size, fullWidth } = useTabsContext()\r\n\r\n    return (\r\n        <TabsPrimitive.List\r\n            ref={ref}\r\n            className={cn(\r\n                \"inline-flex list-none items-center justify-center transition-all duration-300\",\r\n                // Height Alignment Logic\r\n                size === \"xs\" && \"h-8\",\r\n                size === \"sm\" && \"h-9\",\r\n                size === \"md\" && \"h-10\",\r\n                size === \"lg\" && \"h-12\",\r\n                size === \"xl\" && \"h-14\",\r\n\r\n                // Default Style\r\n                variant === \"default\" && \"rounded-md bg-muted/50 overflow-hidden text-muted-foreground border border-border/50 px-0.5\",\r\n\r\n                // Glass Style (Premium)\r\n                variant === \"glass\" && \"rounded-full border border-border/10 bg-background/20 backdrop-blur-xl p-1 gap-1\",\r\n\r\n                // Underline Style\r\n                variant === \"underline\" && \"h-auto w-full justify-start rounded-none border-b border-border bg-transparent p-0\",\r\n\r\n                // Pill Style\r\n                variant === \"pill\" && \"h-auto gap-1.5 bg-transparent p-0\",\r\n\r\n                fullWidth && \"w-full\",\r\n                className\r\n            )}\r\n            {...props}\r\n        />\r\n    )\r\n})\r\nTabsList.displayName = TabsPrimitive.List.displayName\r\n\r\nconst TabsTrigger = React.forwardRef<\r\n    React.ComponentRef<typeof TabsPrimitive.Trigger>,\r\n    React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & { loading?: boolean }\r\n>(({ className, loading = false, ...props }, ref) => {\r\n    const { variant, size, fullWidth, value, id } = useTabsContext()\r\n    const { isEnabled, motion, transitions } = useFyskAnimation()\r\n    const config = useFyskConfig()\r\n    const isActive = value === props.value\r\n\r\n    return (\r\n        <TabsPrimitive.Trigger\r\n            ref={ref}\r\n            disabled={loading || props.disabled}\r\n            className={cn(\r\n                \"relative inline-flex items-center justify-center whitespace-nowrap 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-50\",\r\n\r\n                // Typography Alignment\r\n                size === \"xs\" && \"text-xs px-2.5 py-1\",\r\n                size === \"sm\" && \"text-sm px-3 py-1.5\",\r\n                size === \"md\" && \"text-sm px-4 py-2\",\r\n                size === \"lg\" && \"text-base px-5 py-2.5\",\r\n                size === \"xl\" && \"text-lg px-7 py-3.5\",\r\n\r\n                // Active Text Color\r\n                isActive\r\n                    ? (variant === \"pill\" ? \"text-primary-foreground\" : \"text-foreground\")\r\n                    : \"text-muted-foreground hover:text-foreground/80\",\r\n\r\n                // Base Structural Styles\r\n                variant === \"default\" && \"rounded-sm\",\r\n                variant === \"glass\" && \"rounded-full hover:bg-foreground/5\",\r\n                variant === \"underline\" && \"rounded-none bg-transparent pb-3 pt-2\",\r\n                variant === \"pill\" && \"rounded-full border border-transparent hover:bg-muted/80\",\r\n\r\n                // Static Backgrounds (when animations are OFF)\r\n                !isEnabled && isActive && [\r\n                    variant === \"default\" && \"bg-background shadow-sm\",\r\n                    variant === \"glass\" && \"bg-foreground/20 font-semibold backdrop-blur-md\",\r\n                    variant === \"underline\" && \"border-b-2 border-primary text-primary\",\r\n                    variant === \"pill\" && \"bg-primary text-primary-foreground\",\r\n                ],\r\n\r\n                fullWidth && \"flex-1\",\r\n                className\r\n            )}\r\n            {...props}\r\n        >\r\n            {isEnabled && isActive && (\r\n                <motion.div\r\n                    layoutId={`${id}-active-tab-indicator`}\r\n                    className={cn(\r\n                        \"absolute inset-0 z-0\",\r\n                        variant === \"default\" && \"bg-background rounded-sm shadow-sm\",\r\n                        variant === \"glass\" && \"bg-foreground/20 rounded-full backdrop-blur-md\",\r\n                        variant === \"underline\" && \"border-b-2 border-primary inset-x-0 bottom-0 top-auto\",\r\n                        variant === \"pill\" && \"bg-primary rounded-full\"\r\n                    )}\r\n                    transition={transitions?.layout}\r\n                />\r\n            )}\r\n            <span className=\"relative z-10 flex items-center justify-center gap-2\">\r\n                {loading && (\r\n                    <span className=\"h-4 w-4 flex items-center justify-center [&_svg]:size-full animate-spin opacity-70\">\r\n                        {config.icons?.loading}\r\n                    </span>\r\n                )}\r\n                {props.children}\r\n            </span>\r\n        </TabsPrimitive.Trigger>\r\n    )\r\n})\r\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\r\n\r\nconst TabsContent = React.forwardRef<\r\n    React.ComponentRef<typeof TabsPrimitive.Content>,\r\n    React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\r\n>(({ className, ...props }, ref) => (\r\n    <TabsPrimitive.Content\r\n        ref={ref}\r\n        className={cn(\r\n            \"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\r\n            className\r\n        )}\r\n        {...props}\r\n    />\r\n))\r\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\r\n\r\n"}]}