Switch

1'use client'
2 
3import {
4  forwardRef,
5  useCallback,
6  useEffect,
7  useId,
8  useRef,
9  useState,
10  type HTMLAttributes,
11} from 'react'
12import { animate, motion, useMotionValue, useReducedMotion } from 'motion/react'
13import { cn } from '@/lib/utils'
14import { springs } from '@/lib/motion-tokens'
15import { playHoverSound, playClickSound } from '@/lib/sound'
16 
17const TRACK_W = 44
18const THUMB_SIZE = 20
19const THUMB_TRAVEL = TRACK_W - THUMB_SIZE - 4
20export interface SwitchProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange'> {
21  checked?: boolean
22  defaultChecked?: boolean
23  onCheckedChange?: (checked: boolean) => void
24  label?: string
25  labelSide?: 'left' | 'right'
26  name?: string
27  disabled?: boolean
28  required?: boolean
29  'aria-invalid'?: boolean
30  'aria-describedby'?: string
31}
32 
33export const Switch = forwardRef<HTMLButtonElement, SwitchProps>(
34  (
35    {
36      checked: checkedProp,
37      defaultChecked = false,
38      onCheckedChange,
39      label,
40      labelSide = 'right',
41      disabled,
42      name,
43      required,
44      className,
45      id: idProp,
46      'aria-invalid': ariaInvalid,
47      'aria-describedby': ariaDescribedby,
48      ...props
49    },
50    ref,
51  ) => {
52    const reactId = useId()
53    const id = idProp ?? reactId
54    const isControlled = checkedProp !== undefined
55    const [internal, setInternal] = useState(defaultChecked)
56    const value = isControlled ? checkedProp : internal
57    const reduceMotion = useReducedMotion()
58 
59    const thumbX = useMotionValue(value ? THUMB_TRAVEL : 0)
60    const thumbScaleX = useMotionValue(1)
61 
62    const prevValue = useRef(value)
63    useEffect(() => {
64      if (prevValue.current === value) return
65      prevValue.current = value
66      animate(thumbX, value ? THUMB_TRAVEL : 0, springs.settle)
67    }, [value, thumbX])
68 
69    const toggle = useCallback(() => {
70      if (disabled) return
71      playClickSound()
72      const next = !value
73      if (!isControlled) setInternal(next)
74      onCheckedChange?.(next)
75    }, [value, isControlled, onCheckedChange, disabled])
76    const handlePointerDown = useCallback(() => {
77      if (reduceMotion || disabled) return
78      animate(thumbScaleX, 1.15, springs.press)
79    }, [reduceMotion, disabled, thumbScaleX])
80 
81    const handlePointerUp = useCallback(() => {
82      if (reduceMotion || disabled) return
83      animate(thumbScaleX, 1, springs.settle)
84    }, [reduceMotion, disabled, thumbScaleX])
85 
86    return (
87      <div
88        className={cn(
89          'flex items-center gap-3',
90// … truncated