"use client"; import { cn } from "@/lib/utils"; import { Minus, Plus } from "lucide-react"; import { useState, useRef, useEffect } from "react"; export type NumberInputProps = { className?: string; min?: number; max?: number; step?: number; defaultValue?: number; onChange?: (value: number) => void; } & Omit, "onChange" | "type" | "value" | "defaultValue">; export default function NumberInput({ className, min = 0, max = 100, step = 1, defaultValue = 0, onChange, ...props }: NumberInputProps) { const [value, setValue] = useState(defaultValue); const timerRef = useRef(null); function handleChange(newValue: number) { if (newValue >= min && newValue <= max) { setValue(newValue); if (onChange) onChange(newValue); } } function startTimer(increment: boolean) { let intervalTime = 100; // Initial delay before speeding up setValue((prevValue) => { const newValue = prevValue + (increment ? step : -step); if (newValue >= min && newValue <= max) { if (onChange) onChange(newValue); return newValue; } return prevValue; }); if (timerRef.current) clearTimeout(timerRef.current); timerRef.current = setTimeout(() => { timerRef.current = setInterval(() => { setValue((prevValue) => { const newValue = prevValue + (increment ? step : -step); if (newValue >= min && newValue <= max) { if (onChange) onChange(newValue); return newValue; } return prevValue; }); }, intervalTime); // Speed up the interval after a certain time setTimeout(() => { if (timerRef.current) { clearInterval(timerRef.current); intervalTime = 75; timerRef.current = setInterval(() => { setValue((prevValue) => { const newValue = prevValue + (increment ? step : -step); if (newValue >= min && newValue <= max) { if (onChange) onChange(newValue); return newValue; } return prevValue; }); }, intervalTime); } }, 750); }, 150); } function stopTimer() { if (timerRef.current) { clearTimeout(timerRef.current); clearInterval(timerRef.current); } } useEffect(() => { return () => { if (timerRef.current) clearInterval(timerRef.current); }; }, []); return (

handleChange(Number(e.target.value))} className={cn( "h-full w-14 [appearance:textfield] border-none bg-transparent px-2 text-center text-sm", "[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", "focus:ring-0 focus:outline-hidden", "dark:text-gray-100", className, )} min={min} max={max} step={step} {...props} />

); }