Fader

1'use client'
2 
3import { Slider as BaseSlider } from '@base-ui/react/slider'
4import { type MotionValue, motion, useTransform } from 'motion/react'
5import type { Ref } from 'react'
6import { cn } from '@/lib/utils'
7import { springs } from '@/lib/motion-tokens'
8import { BAR_BOX, barCenterFor, fillEdgePx } from './geometry'
9import { type UseFaderOptions, useFader } from './use-fader'
10import { playHoverSound, playClickSound, playTickSound } from '@/lib/sound'
11 
12const MARK_HIDE_RADIUS = 10
13const MARK_HIDE_FADE = 6
14 
15const sizeVariants = {
16  sm: {
17    control: 'h-8',
18    overlay: 'px-3',
19    text: 'text-xs',
20    bar: 'h-4',
21    mark: 'size-1',
22  },
23  md: {
24    control: 'h-10',
25    overlay: 'px-3.5',
26    text: 'text-sm',
27    bar: 'h-5',
28    mark: 'size-1',
29  },
30  lg: {
31    control: 'h-12',
32    overlay: 'px-4',
33    text: 'text-sm',
34    bar: 'h-6',
35    mark: 'size-1.5',
36  },
37} as const
38 
39const toneVariants = {
40  accent: {
41    fill: 'border border-muted-foreground/30 bg-muted-foreground/40 pointer-fine:group-hover/fader:bg-muted-foreground/50 group-data-dragging/control:bg-muted-foreground/55',
42    bar: 'bg-muted-foreground',
43  },
44  neutral: {
45    fill: 'border border-muted-foreground/25 bg-muted-foreground/35 pointer-fine:group-hover/fader:bg-muted-foreground/45 group-data-dragging/control:bg-muted-foreground/50',
46    bar: 'bg-muted-foreground/90',
47  },
48} as const
49 
50function DetentMark({
51  pct,
52  fill,
53  trackWidth,
54  className,
55}: {
56  pct: number
57  fill: MotionValue<number>
58  trackWidth: MotionValue<number>
59  className: string
60}) {
61  const filledOpacity = useTransform(() => {
62    const tw = trackWidth.get()
63    if (!tw) return fill.get() >= pct ? 1 : 0
64    const covered = fillEdgePx(fill.get(), tw) - (pct / 100) * tw
65    return Math.min(1, Math.max(0, covered / 8))
66  })
67  const visibility = useTransform(() => {
68    const tw = trackWidth.get()
69    if (!tw) {
70      return Math.abs(fill.get() - pct) < 0.001 ? 0 : 1
71    }
72    const markPx = (pct / 100) * tw
73    const barCenter = barCenterFor(fillEdgePx(fill.get(), tw))
74    const distance = Math.abs(markPx - barCenter)
75    return Math.min(1, Math.max(0, (distance - MARK_HIDE_RADIUS) / MARK_HIDE_FADE))
76  })
77  return (
78    <motion.span
79      aria-hidden
80      className={cn('-translate-x-1/2 -translate-y-1/2 absolute top-1/2', className)}
81      style={{ left: `${pct}%`, opacity: visibility }}
82    >
83      <span className="absolute inset-0 round bg-foreground/25" />
84      <motion.span
85// … truncated