Scrub Input

1"use client";
2 
3import React, { useRef, useState } from "react";
4import { cn } from "@workspace/ui/lib/utils";
5 
6export interface ScrubInputProps {
7    value?: number;
8    defaultValue?: number;
9    onChange?: (value: number) => void;
10    label: string;
11    min?: number;
12    max?: number;
13    step?: number;
14    className?: string;
15}
16 
17export function ScrubInput({
18    value: controlledValue,
19    defaultValue = 0,
20    onChange,
21    label,
22    min = 0,
23    max = 100,
24    step = 1,
25    className,
26}: ScrubInputProps) {
27    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
28    const isControlled = controlledValue !== undefined;
29    const value = isControlled ? controlledValue : uncontrolledValue;
30 
31    const [isDragging, setIsDragging] = useState(false);
32    const containerRef = useRef<HTMLDivElement>(null);
33 
34    const handleValueChange = (newValue: number) => {
35        if (!isControlled) setUncontrolledValue(newValue);
36        onChange?.(newValue);
37    };
38 
39    const updateValueFromPointer = (clientX: number) => {
40        if (!containerRef.current) return;
41        const rect = containerRef.current.getBoundingClientRect();
42        const x = clientX - rect.left;
43        let percentage = x / rect.width;
44        percentage = Math.max(0, Math.min(1, percentage));
45 
46        let newValue = min + percentage * (max - min);
47        newValue = Math.round(newValue / step) * step;
48 
49        // Ensure value stays within bounds due to rounding
50        newValue = Math.max(min, Math.min(max, newValue));
51 
52        if (newValue !== value) {
53            handleValueChange(newValue);
54        }
55    };
56 
57    const onPointerDown = (e: React.PointerEvent) => {
58        containerRef.current?.setPointerCapture(e.pointerId);
59        setIsDragging(true);
60        updateValueFromPointer(e.clientX);
61    };
62 
63    const onPointerMove = (e: React.PointerEvent) => {
64        if (!isDragging) return;
65        updateValueFromPointer(e.clientX);
66    };
67 
68    const onPointerUp = (e: React.PointerEvent) => {
69        containerRef.current?.releasePointerCapture(e.pointerId);
70        setIsDragging(false);
71    };
72 
73    const percentage = max > min ? ((value - min) / (max - min)) * 100 : 0;
74 
75    // Create a minimum width so the fill doesn't look too weird when value is 0
76    const fillWidth = Math.max(20, percentage);
77 
78    return (
79        <div
80            ref={containerRef}
81            className={cn(
82// … truncated