{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"switch","title":"Switch","type":"registry:ui","description":"A control that allows the user to toggle between checked and not checked.","dependencies":["@radix-ui/react-switch","class-variance-authority","lucide-react"],"registryDependencies":["utils","https://fysk.dev/r/fysk-provider.json","https://fysk.dev/r/fysk-hooks.json"],"files":[{"path":"fysk/switch.tsx","type":"registry:ui","content":"\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\nimport { Loader2, Check, X } from \"lucide-react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nimport { useFyskConfig } from \"@/components/fysk-provider\"\r\nimport { useFyskAnimation } from \"@/components/hooks/useFyskAnimation\"\r\n\r\nconst switchVariants = cva(\r\n    \"peer inline-flex shrink-0 cursor-pointer items-center transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 relative\",\r\n    {\r\n        variants: {\r\n            variant: {\r\n                normal:\r\n                    \"rounded-full border-2 border-transparent data-[state=checked]:bg-primary data-[state=unchecked]:bg-input\",\r\n                square:\r\n                    \"rounded-[6px] border-2 border-transparent data-[state=checked]:bg-primary data-[state=unchecked]:bg-input\",\r\n                line: \"bg-transparent after:absolute after:inset-x-0.5 after:top-1/2 after:h-[2px] after:-translate-y-1/2 after:rounded-full after:bg-input data-[state=checked]:after:bg-primary/40 after:transition-all after:duration-300\",\r\n                glass: \"rounded-full border border-border/50 data-[state=checked]:bg-primary/20 backdrop-blur-md data-[state=unchecked]:bg-foreground/10\",\r\n            },\r\n            size: {\r\n                default: \"\",\r\n                xs: \"\",\r\n                sm: \"\",\r\n                md: \"\",\r\n                lg: \"\",\r\n                xl: \"\",\r\n            },\r\n        },\r\n        compoundVariants: [\r\n            // Normal, Square & Glass sizes\r\n            {\r\n                variant: [\"normal\", \"square\", \"glass\"],\r\n                size: \"xs\",\r\n                className: \"h-3 w-5\",\r\n            },\r\n            {\r\n                variant: [\"normal\", \"square\", \"glass\"],\r\n                size: \"sm\",\r\n                className: \"h-4 w-7\",\r\n            },\r\n            {\r\n                variant: [\"normal\", \"square\", \"glass\"],\r\n                size: [\"md\", \"default\"],\r\n                className: \"h-6 w-11\",\r\n            },\r\n            {\r\n                variant: [\"normal\", \"square\", \"glass\"],\r\n                size: \"lg\",\r\n                className: \"h-8 w-14\",\r\n            },\r\n            {\r\n                variant: [\"normal\", \"square\", \"glass\"],\r\n                size: \"xl\",\r\n                className: \"h-10 w-18\",\r\n            },\r\n            // Line sizes\r\n            {\r\n                variant: \"line\",\r\n                size: \"xs\",\r\n                className: \"h-3 w-6\",\r\n            },\r\n            {\r\n                variant: \"line\",\r\n                size: \"sm\",\r\n                className: \"h-4 w-8\",\r\n            },\r\n            {\r\n                variant: \"line\",\r\n                size: [\"md\", \"default\"],\r\n                className: \"h-6 w-12\",\r\n            },\r\n            {\r\n                variant: \"line\",\r\n                size: \"lg\",\r\n                className: \"h-8 w-16\",\r\n            },\r\n            {\r\n                variant: \"line\",\r\n                size: \"xl\",\r\n                className: \"h-10 w-20\",\r\n            },\r\n        ],\r\n        defaultVariants: {\r\n            variant: \"normal\",\r\n            size: \"default\",\r\n        },\r\n    }\r\n)\r\n\r\nconst thumbVariants = cva(\r\n    \"pointer-events-none block bg-background shadow ring-0 transition-all duration-150 flex items-center justify-center overflow-hidden\",\r\n    {\r\n        variants: {\r\n            variant: {\r\n                normal: \"rounded-full\",\r\n                square: \"rounded-[4px]\",\r\n                line: \"rounded-full bg-background z-10 border border-input data-[state=checked]:border-primary shadow-sm\",\r\n                glass: \"rounded-full bg-background/80 backdrop-blur-sm\",\r\n            },\r\n            size: {\r\n                default: \"h-5 w-5\",\r\n                xs: \"h-2 w-2\",\r\n                sm: \"h-3 w-3\",\r\n                md: \"h-5 w-5\",\r\n                lg: \"h-7 w-7\",\r\n                xl: \"h-9 w-9\",\r\n            },\r\n        },\r\n        compoundVariants: [\r\n            // Normal, Square & Glass thumb sizes\r\n            {\r\n                variant: [\"normal\", \"square\", \"glass\"],\r\n                size: \"xs\",\r\n                className: \"data-[state=checked]:translate-x-2 data-[state=unchecked]:translate-x-0\",\r\n            },\r\n            {\r\n                variant: [\"normal\", \"square\", \"glass\"],\r\n                size: \"sm\",\r\n                className: \"data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0\",\r\n            },\r\n            {\r\n                variant: [\"normal\", \"square\", \"glass\"],\r\n                size: [\"md\", \"default\"],\r\n                className: \"data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0\",\r\n            },\r\n            {\r\n                variant: [\"normal\", \"square\", \"glass\"],\r\n                size: \"lg\",\r\n                className: \"data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0\",\r\n            },\r\n            {\r\n                variant: [\"normal\", \"square\", \"glass\"],\r\n                size: \"xl\",\r\n                className: \"data-[state=checked]:translate-x-8 data-[state=unchecked]:translate-x-0\",\r\n            },\r\n            // Line thumb sizes\r\n            {\r\n                variant: \"line\",\r\n                size: \"xs\",\r\n                className: \"data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0\",\r\n            },\r\n            {\r\n                variant: \"line\",\r\n                size: \"sm\",\r\n                className: \"data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0\",\r\n            },\r\n            {\r\n                variant: \"line\",\r\n                size: [\"md\", \"default\"],\r\n                className: \"data-[state=checked]:translate-x-7 data-[state=unchecked]:translate-x-0\",\r\n            },\r\n            {\r\n                variant: \"line\",\r\n                size: \"lg\",\r\n                className: \"data-[state=checked]:translate-x-9 data-[state=unchecked]:translate-x-0\",\r\n            },\r\n            {\r\n                variant: \"line\",\r\n                size: \"xl\",\r\n                className: \"data-[state=checked]:translate-x-11 data-[state=unchecked]:translate-x-0\",\r\n            },\r\n        ],\r\n        defaultVariants: {\r\n            variant: \"normal\",\r\n            size: \"default\",\r\n        },\r\n    }\r\n)\r\n\r\n\r\nexport interface SwitchProps\r\n    extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>,\r\n    VariantProps<typeof switchVariants> {\r\n    state?: \"idle\" | \"loading\" | \"success\" | \"error\"\r\n}\r\n\r\nconst Switch = React.forwardRef<\r\n    React.ComponentRef<typeof SwitchPrimitive.Root>,\r\n    SwitchProps\r\n>(({ className, variant, size, state = \"idle\", ...props }, ref) => {\r\n    const isLoading = state === \"loading\"\r\n    const isSuccess = state === \"success\"\r\n    const isError = state === \"error\"\r\n\r\n    const config = useFyskConfig()\r\n    const { isEnabled, motion, AnimatePresence, transitions, variants } = useFyskAnimation()\r\n    const MotionDiv = motion?.div || \"div\"\r\n\r\n    return (\r\n        <SwitchPrimitive.Root\r\n            className={cn(\r\n                switchVariants({ variant, size, className }),\r\n                (isSuccess && variant !== \"line\") && \"data-[state=checked]:bg-green-600 data-[state=unchecked]:bg-green-600/20\",\r\n                (isSuccess && variant === \"line\") && \"after:bg-green-500/30 data-[state=checked]:after:bg-green-500/60\",\r\n                (isError && variant !== \"line\") && \"data-[state=checked]:bg-destructive data-[state=unchecked]:bg-destructive/20\",\r\n                (isError && variant === \"line\") && \"after:bg-destructive/30 data-[state=checked]:after:bg-destructive/60\",\r\n                isLoading && \"opacity-70\"\r\n            )}\r\n            {...props}\r\n            disabled={isLoading || props.disabled}\r\n            ref={ref}\r\n        >\r\n            <SwitchPrimitive.Thumb asChild>\r\n                <MotionDiv\r\n                    {...(isEnabled ? {\r\n                        layout: true,\r\n                        transition: transitions?.layout\r\n                    } : {})}\r\n                    className={cn(thumbVariants({ variant, size }))}\r\n                >\r\n                    <AnimatePresence {...(isEnabled ? { mode: \"wait\" } : {})}>\r\n                        {isLoading && (\r\n                            <motion.div\r\n                                key=\"loading\"\r\n                                {...(isEnabled && variants ? variants.scaleIn : {})}\r\n                                className=\"absolute inset-0 flex items-center justify-center p-[15%]\"\r\n                            >\r\n                                <span className={cn(\r\n                                    \"flex items-center justify-center [&_svg]:size-full animate-spin\",\r\n                                    (size === \"xs\" || size === \"sm\") ? \"h-full w-full\" : \"h-full w-full\"\r\n                                )}>\r\n                                    {config.icons?.loading || <Loader2 />}\r\n                                </span>\r\n                            </motion.div>\r\n                        )}\r\n                        {isSuccess && (\r\n                            <motion.div\r\n                                key=\"success\"\r\n                                {...(isEnabled && variants ? variants.iconPop : {})}\r\n                                className=\"absolute inset-0 flex items-center justify-center p-[15%]\"\r\n                            >\r\n                                <span className=\"h-full w-full flex items-center justify-center [&_svg]:size-full text-green-600 dark:text-green-400\">\r\n                                    {config.icons?.success || <Check />}\r\n                                </span>\r\n                            </motion.div>\r\n                        )}\r\n                        {isError && (\r\n                            <motion.div\r\n                                key=\"error\"\r\n                                {...(isEnabled && variants ? variants.scaleIn : {})}\r\n                                className=\"absolute inset-0 flex items-center justify-center p-[15%]\"\r\n                            >\r\n                                <span className=\"h-full w-full flex items-center justify-center [&_svg]:size-full text-destructive\">\r\n                                    {config.icons?.error || <X />}\r\n                                </span>\r\n                            </motion.div>\r\n                        )}\r\n                    </AnimatePresence>\r\n                </MotionDiv>\r\n            </SwitchPrimitive.Thumb>\r\n        </SwitchPrimitive.Root>\r\n    )\r\n})\r\nSwitch.displayName = SwitchPrimitive.Root.displayName\r\n\r\nexport { Switch }\r\n\r\n\r\n"}]}