Switch

1"use client"
2
3import * as React from "react"
4import * as SwitchPrimitive from "@radix-ui/react-switch"
5import { cva, type VariantProps } from "class-variance-authority"
6import { Loader2, Check, X } from "lucide-react"
7import { cn } from "@/lib/utils"
8
9import { useFyskConfig } from "@/components/fysk-provider"
10import { useFyskAnimation } from "@/components/hooks/useFyskAnimation"
11
12const switchVariants = cva(
13    "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",
14    {
15        variants: {
16            variant: {
17                normal:
18                    "rounded-full border-2 border-transparent data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
19                square:
20                    "rounded-[6px] border-2 border-transparent data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
21                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",
22                glass: "rounded-full border border-border/50 data-[state=checked]:bg-primary/20 backdrop-blur-md data-[state=unchecked]:bg-foreground/10",
23            },
24            size: {
25                default: "",
26                xs: "",
27                sm: "",
28                md: "",
29                lg: "",
30                xl: "",
31            },
32        },
33        compoundVariants: [
34            // Normal, Square & Glass sizes
35            {
36                variant: ["normal", "square", "glass"],
37                size: "xs",
38                className: "h-3 w-5",
39            },
40            {
41                variant: ["normal", "square", "glass"],
42                size: "sm",
43                className: "h-4 w-7",
44            },
45            {
46                variant: ["normal", "square", "glass"],
47                size: ["md", "default"],
48                className: "h-6 w-11",
49            },
50            {
51                variant: ["normal", "square", "glass"],
52                size: "lg",
53                className: "h-8 w-14",
54            },
55            {
56                variant: ["normal", "square", "glass"],
57                size: "xl",
58// … truncated