Ratio Slider

1'use client'
2 
3import { forwardRef, useState, useRef, useCallback, useEffect, type HTMLAttributes } from 'react'
4import {
5  animate,
6  motion,
7  useMotionValue,
8  useMotionValueEvent,
9  useReducedMotion,
10  useTransform,
11} from 'motion/react'
12import { cn } from '@/lib/utils'
13import { springs } from '@/lib/motion-tokens'
14import { playHoverSound, playClickSound, playTickSound } from '@/lib/sound'
15 
16export interface RatioSliderProps extends Omit<
17  HTMLAttributes<HTMLDivElement>,
18  'onChange' | 'defaultValue'
19> {
20  value?: number
21  defaultValue?: number
22  onChange?: (value: number) => void
23  min?: number
24  max?: number
25  step?: number
26  leftLabel?: string
27  rightLabel?: string
28  leftColor?: string
29  rightColor?: string
30  leftLabelColor?: string
31  rightLabelColor?: string
32  disabled?: boolean
33}
34 
35function clamp(n: number, lo: number, hi: number) {
36  return Math.max(lo, Math.min(hi, n))
37}
38 
39export const RatioSlider = forwardRef<HTMLDivElement, RatioSliderProps>(
40  (
41    {
42      value,
43      defaultValue = 60,
44      onChange,
45      min = 0,
46      max = 100,
47      step = 1,
48      leftLabel = 'RICH',
49      rightLabel = 'LIGHT',
50      leftColor = 'var(--color-fg)',
51      rightColor = 'var(--color-muted)',
52      leftLabelColor = 'var(--color-bg)',
53      rightLabelColor = 'var(--color-fg)',
54      disabled = false,
55      className,
56      ...rest
57    },
58    ref,
59  ) => {
60    const isControlled = value !== undefined
61    const [internal, setInternal] = useState(defaultValue)
62    const leftRatio = isControlled ? value : internal
63 
64    const reduceMotion = useReducedMotion()
65    const [isCompact, setIsCompact] = useState(false)
66    const sliderRef = useRef<HTMLDivElement>(null)
67    const leftBarRef = useRef<HTMLDivElement>(null)
68    const rightBarRef = useRef<HTMLDivElement>(null)
69    const leftLabelRef = useRef<HTMLDivElement>(null)
70    const rightLabelRef = useRef<HTMLDivElement>(null)
71    const isDragging = useRef(false)
72    const [draggingState, setDraggingState] = useState(false)
73 
74    const ratio = 100 - leftRatio
75    const barHeight = isCompact ? 32 : 60
76    const labelsRowHeight = 32
77    const gap = 16
78    const edgePadding = 16
79 
80    const leftPercent = useMotionValue(leftRatio)
81    const settleRef = useRef<ReturnType<typeof animate> | null>(null)
82    const settleTargetRef = useRef<number | null>(null)
83 
84    const stopSettle = useCallback(() => {
85      settleRef.current?.stop()
86      settleRef.current = null
87      settleTargetRef.current = null
88    }, [])
89 
90// … truncated