Switch

1"use client";
2 
3import {
4  forwardRef,
5  useRef,
6  useState,
7  useEffect,
8  useCallback,
9  useId,
10  type HTMLAttributes,
11} from "react";
12import { motion, useMotionValue, animate, type Transition } from "framer-motion";
13import * as SwitchPrimitive from "@radix-ui/react-switch";
14import { cn } from "@/lib/utils";
15import { spring } from "@/lib/springs";
16 
17interface SwitchProps extends HTMLAttributes<HTMLDivElement> {
18  label: string;
19  checked: boolean;
20  onToggle: () => void;
21  disabled?: boolean;
22  thumbTransition?: Transition;
23}
24 
25const TRACK_WIDTH = 34;
26const TRACK_HEIGHT = 20;
27const THUMB_SIZE = 16;
28const THUMB_OFFSET = 2;
29const THUMB_TRAVEL = TRACK_WIDTH - THUMB_SIZE - THUMB_OFFSET * 2;
30const PILL_EXTEND = 2;
31const PRESS_EXTEND = 4;
32const PRESS_SHRINK = 4;
33const DRAG_DEAD_ZONE = 2;
34 
35const Switch = forwardRef<HTMLDivElement, SwitchProps>(
36  ({ label, checked, onToggle, disabled = false, thumbTransition, className, ...props }, ref) => {
37    const labelId = useId();
38    const hasMounted = useRef(false);
39    const [hovered, setHovered] = useState(false);
40    const [pressed, setPressed] = useState(false);
41 
42    // Drag refs (not state to avoid re-renders during drag)
43    const dragging = useRef(false);
44    const didDrag = useRef(false);
45    const pointerStart = useRef<{
46      clientX: number;
47      originX: number;
48    } | null>(null);
49 
50    // Motion value for thumb x-axis
51    const motionX = useMotionValue(
52      checked ? THUMB_OFFSET + THUMB_TRAVEL : THUMB_OFFSET
53    );
54 
55    useEffect(() => {
56      hasMounted.current = true;
57    }, []);
58 
59    // Compute thumb shape
60    const thumbWidth = pressed
61      ? THUMB_SIZE + PRESS_EXTEND
62      : hovered
63        ? THUMB_SIZE + PILL_EXTEND
64        : THUMB_SIZE;
65    const thumbHeight = pressed ? THUMB_SIZE - PRESS_SHRINK : THUMB_SIZE;
66    const thumbY = pressed ? THUMB_OFFSET + PRESS_SHRINK / 2 : THUMB_OFFSET;
67    const extraWidth = thumbWidth - THUMB_SIZE;
68    const thumbX = checked
69      ? THUMB_OFFSET + THUMB_TRAVEL - extraWidth
70      : THUMB_OFFSET;
71 
72    // Sync motionX when thumbX changes (hover/press/checked) and not dragging
73    useEffect(() => {
74      if (dragging.current) return;
75      if (!hasMounted.current) {
76        motionX.set(thumbX);
77      } else {
78        animate(motionX, thumbX, thumbTransition ?? spring.moderate);
79      }
80    }, [thumbX, motionX, thumbTransition]);
81 
82    // --- Pointer handlers ---
83 
84    const handlePointerDown = useCallback(
85      (e: React.PointerEvent<HTMLDivElement>) => {
86// … truncated