Switch

1"use client";
2 
3import { useEffect, useRef, useState } from "react";
4import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
5import { motion, useMotionValue, useReducedMotion, animate } from "motion/react";
6 
7import { cn } from "@/lib/utils";
8import { spring } from "@/lib/springs";
9 
10const SIZES = {
11  default: { track: 34, height: 20, thumb: 16 },
12  sm: { track: 24, height: 14, thumb: 12 },
13} as const;
14 
15const DRAG_DEAD_ZONE = 2;
16 
17function Switch({
18  className,
19  size = "default",
20  checked: checkedProp,
21  defaultChecked,
22  onCheckedChange,
23  disabled = false,
24  ...props
25}: Omit<SwitchPrimitive.Root.Props, "inputRef"> & {
26  size?: "sm" | "default";
27}) {
28  const { track, height, thumb } = SIZES[size];
29  const offset = (height - thumb) / 2;
30  const travel = track - thumb - offset * 2;
31  const hoverExtend = (2 * thumb) / 16;
32  const pressExtend = (4 * thumb) / 16;
33  const pressShrink = (4 * thumb) / 16;
34 
35  const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked ?? false);
36  const checked = checkedProp ?? uncontrolledChecked;
37 
38  const applyChecked = (next: boolean, eventDetails?: SwitchPrimitive.Root.ChangeEventDetails) => {
39    if (checkedProp === undefined) setUncontrolledChecked(next);
40    onCheckedChange?.(next, eventDetails as SwitchPrimitive.Root.ChangeEventDetails);
41  };
42 
43  const [hovered, setHovered] = useState(false);
44  const [pressed, setPressed] = useState(false);
45  const dragging = useRef(false);
46  const suppressNextClick = useRef(false);
47  const dragStart = useRef<{ clientX: number; originX: number } | null>(null);
48 
49  const thumbWidth = pressed ? thumb + pressExtend : hovered ? thumb + hoverExtend : thumb;
50  const thumbHeight = pressed ? thumb - pressShrink : thumb;
51  const thumbY = pressed ? offset + pressShrink / 2 : offset;
52  const thumbX = checked ? offset + travel - (thumbWidth - thumb) : offset;
53 
54  const motionX = useMotionValue(thumbX);
55  const reduceMotion = useReducedMotion();
56  const hasMountedRef = useRef(false);
57  useEffect(() => {
58    hasMountedRef.current = true;
59  }, []);
60 
61  useEffect(() => {
62    if (dragging.current) return;
63    if (!hasMountedRef.current) {
64      motionX.set(thumbX);
65      return;
66    }
67    const controls = animate(motionX, thumbX, spring.moderate.enter);
68    return () => controls.stop();
69    // eslint-disable-next-line react-hooks/exhaustive-deps
70  }, [thumbX]);
71 
72  return (
73    <SwitchPrimitive.Root
74      data-slot="switch"
75      data-size={size}
76      checked={checked}
77// … truncated