"use client"; // Motion tokens. Each tier's value is the ENTER transition — a critically // damped spring, except the largest tier which keeps a little bounce. Its // `.exit` is the matching EXIT transition — a plain tween, no bounce, one tier // quicker — so a dismissal reads as crisp and final rather than replaying the // entrance in reverse. // // transition={spring.fast} // enter // exit={{ opacity: 0, transition: spring.fast.exit }} // leave // // The bigger the thing that moves, the slower the spring. Never hand-write a // duration — always reach for a tier. const spring = { fast: { type: "spring" as const, duration: 0.08, bounce: 0, exit: { duration: 0.06 }, }, // Critically damped: same perceived speed as a bouncier tier, but lands // exactly with no overshoot — for short travel and panels/sheets that must // settle precisely (dropdowns, tabs, drawers, merged selection backgrounds). moderate: { type: "spring" as const, duration: 0.16, bounce: 0, exit: { duration: 0.12 }, }, slow: { type: "spring" as const, duration: 0.24, bounce: 0.12, exit: { duration: 0.16 }, }, } as const; // Fallback delay (ms) for deferred-unmount timers that guard an exit tween: // popups keep their portal mounted until onAnimationComplete fires, but a // throttled/background tab can stall the animation, so a timer force-unmounts // after the tier's exit duration plus a safety buffer. Deriving it here keeps // the timers in step with the tokens above. const exitFallbackMs = (tier: { exit: { duration: number } }) => Math.round(tier.exit.duration * 1000) + 100; import { forwardRef, useRef, useState, useEffect, useCallback, useId, type HTMLAttributes, } from "react"; import { motion, useMotionValue, animate, type Transition } from "framer-motion"; import * as SwitchPrimitive from "@radix-ui/react-switch"; import { cn } from "@/lib/utils"; interface SwitchProps extends HTMLAttributes { label: string; checked: boolean; onToggle: () => void; disabled?: boolean; thumbTransition?: Transition; } const TRACK_WIDTH = 34; const TRACK_HEIGHT = 20; const THUMB_SIZE = 16; const THUMB_OFFSET = 2; const THUMB_TRAVEL = TRACK_WIDTH - THUMB_SIZE - THUMB_OFFSET * 2; const PILL_EXTEND = 2; const PRESS_EXTEND = 4; const PRESS_SHRINK = 4; const DRAG_DEAD_ZONE = 2; const Switch = forwardRef( ({ label, checked, onToggle, disabled = false, thumbTransition, className, ...props }, ref) => { const labelId = useId(); const hasMounted = useRef(false); const [hovered, setHovered] = useState(false); const [pressed, setPressed] = useState(false); // Drag refs (not state to avoid re-renders during drag) const dragging = useRef(false); const didDrag = useRef(false); const pointerStart = useRef<{ clientX: number; originX: number; } | null>(null); // Motion value for thumb x-axis const motionX = useMotionValue( checked ? THUMB_OFFSET + THUMB_TRAVEL : THUMB_OFFSET ); useEffect(() => { hasMounted.current = true; }, []); // Compute thumb shape const thumbWidth = pressed ? THUMB_SIZE + PRESS_EXTEND : hovered ? THUMB_SIZE + PILL_EXTEND : THUMB_SIZE; const thumbHeight = pressed ? THUMB_SIZE - PRESS_SHRINK : THUMB_SIZE; const thumbY = pressed ? THUMB_OFFSET + PRESS_SHRINK / 2 : THUMB_OFFSET; const extraWidth = thumbWidth - THUMB_SIZE; const thumbX = checked ? THUMB_OFFSET + THUMB_TRAVEL - extraWidth : THUMB_OFFSET; // Sync motionX when thumbX changes (hover/press/checked) and not dragging useEffect(() => { if (dragging.current) return; if (!hasMounted.current) { motionX.set(thumbX); } else { animate(motionX, thumbX, thumbTransition ?? spring.moderate); } }, [thumbX, motionX, thumbTransition]); // --- Pointer handlers --- const handlePointerDown = useCallback( (e: React.PointerEvent) => { if (disabled) return; if (e.pointerType === "mouse" && e.button !== 0) return; setPressed(true); dragging.current = false; didDrag.current = false; pointerStart.current = { clientX: e.clientX, originX: motionX.get(), }; (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId); }, [disabled, motionX] ); const handlePointerMove = useCallback( (e: React.PointerEvent) => { if (!pointerStart.current) return; const delta = e.clientX - pointerStart.current.clientX; if (!dragging.current) { if (Math.abs(delta) < DRAG_DEAD_ZONE) return; dragging.current = true; } const dragMin = THUMB_OFFSET; const pressedThumbWidth = THUMB_SIZE + PRESS_EXTEND; const dragMax = TRACK_WIDTH - THUMB_OFFSET - pressedThumbWidth; const rawX = pointerStart.current.originX + delta; motionX.set(Math.max(dragMin, Math.min(dragMax, rawX))); }, [motionX] ); const handlePointerUp = useCallback( () => { if (!pointerStart.current) return; setPressed(false); if (dragging.current) { didDrag.current = true; dragging.current = false; const currentX = motionX.get(); const dragMin = THUMB_OFFSET; const pressedThumbWidth = THUMB_SIZE + PRESS_EXTEND; const dragMax = TRACK_WIDTH - THUMB_OFFSET - pressedThumbWidth; const midpoint = (dragMin + dragMax) / 2; const shouldBeOn = currentX > midpoint; if (shouldBeOn !== checked) { onToggle(); } else { // Snap back to current resting position (un-pressed) const snapTarget = checked ? THUMB_OFFSET + THUMB_TRAVEL : THUMB_OFFSET; animate(motionX, snapTarget, thumbTransition ?? spring.moderate); } requestAnimationFrame(() => { didDrag.current = false; }); } pointerStart.current = null; }, [checked, onToggle, motionX, thumbTransition] ); const handlePointerCancel = useCallback( () => { if (!pointerStart.current) return; setPressed(false); if (dragging.current) { dragging.current = false; // Gesture cancelled by the system — snap back without toggling const snapTarget = checked ? THUMB_OFFSET + THUMB_TRAVEL : THUMB_OFFSET; animate(motionX, snapTarget, thumbTransition ?? spring.moderate); } pointerStart.current = null; }, [checked, motionX, thumbTransition] ); return (

{ if (e.pointerType === "mouse") setHovered(true); }} onPointerLeave={() => setHovered(false)} onPointerDown={handlePointerDown} onPointerMove={handlePointerMove} onPointerUp={handlePointerUp} onPointerCancel={handlePointerCancel} onClick={() => { if (disabled || didDrag.current) return; onToggle(); }} {...props} > {/* Switch */} { if (didDrag.current) return; onToggle(); }} disabled={disabled} tabIndex={0} className={cn( "relative shrink-0 rounded-full outline-none cursor-pointer", "transition-colors duration-80", "focus-visible:ring-1 focus-visible:ring-[color:var(--focus-ring,#6B97FF)] focus-visible:ring-offset-2 focus-visible:ring-offset-background" )} style={{ width: TRACK_WIDTH, height: TRACK_HEIGHT, backgroundColor: checked ? hovered ? "#5C89F2" : "#6B97FF" : hovered ? "color-mix(in oklab, var(--accent), rgb(var(--overlay)) 10%)" : "var(--accent)", }} onClick={(e) => e.stopPropagation()} > {/* Label */} {label}

); } ); Switch.displayName = "Switch"; export { Switch }; export type { SwitchProps };