Switch

1"use client";
2
3import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
4
5import { cn } from "@/lib/classes";
6
7interface SwitchProps extends SwitchPrimitive.Root.Props {
8  reduceMotion?: boolean;
9  isInteractive?: boolean;
10  size?: "sm" | "md" | "lg";
11}
12
13function Switch({
14  reduceMotion = false,
15  isInteractive = false,
16  size = "md",
17  className,
18  ...props
19}: SwitchProps) {
20  return (
21    <SwitchPrimitive.Root
22      {...props}
23      data-slot="switch"
24      className={cn(
25        "group relative rounded-full inline-flex items-center justify-start cursor-pointer touch-none select-none data-disabled:cursor-not-allowed data-disabled:opacity-70 px-1 bg-input inset-shadow-[0_1px_--theme(--color-black/4%)] data-checked:bg-primary",
26        size === "sm" && "w-10 h-6",
27        size === "md" && "w-12 h-7",
28        size === "lg" && "w-14 h-8",
29        !reduceMotion &&
30          "[transition-property:background-color] ease-[cubic-bezier(.25,.46,.45,.94)] duration-250",
31        className
32      )}
33    >
34      <SwitchPrimitive.Thumb
35        data-slot="switch-thumb"
36        className={cn(
37          "z-2 bg-white shadow-sm rounded-full origin-right pointer-events-none data-checked:bg-primary-foreground shrink-0",
38          size === "sm" && [
39            "size-4 text-xs data-checked:ms-4",
40            isInteractive && "group-active:w-5 data-checked:group-active:ml-3",
41          ],
42          size === "md" && [
43            "size-5 text-sm data-checked:ms-5",
44            isInteractive && "group-active:w-6 data-checked:group-active:ml-4",
45          ],
46          size === "lg" && [
47            "size-6 text-base data-checked:ms-6",
48            isInteractive && "group-active:w-7 data-checked:group-active:ml-5",
49          ],
50          !reduceMotion &&
51            "[transition-property:margin,transform,width,background-color] ease-[cubic-bezier(.25,.46,.45,.94)] duration-200"
52        )}
53      />
54    </SwitchPrimitive.Root>
55  );
56}
57
58export { Switch };