"use client"; import { useState } from "react"; import { cn } from "@/lib/utils"; interface NumericInputProps { min?: number; max?: number; step?: number; defaultValue?: number; } function NumericInput({ min = 0, max = 100, step = 1, defaultValue = 50, }: NumericInputProps) { const [value, setValue] = useState(defaultValue); const [isFocused, setIsFocused] = useState(false); const percentage = ((value - min) / (max - min)) * 100; const handleChange = (e: React.ChangeEvent) => { const newValue = Number.parseFloat(e.target.value); if (!Number.isNaN(newValue) && newValue >= min && newValue <= max) { setValue(newValue); } }; const incrementValue = () => { const newValue = Math.min(value + step, max); setValue(newValue); }; const decrementValue = () => { const newValue = Math.max(value - step, min); setValue(newValue); }; return (

setIsFocused(true)} onBlur={() => setIsFocused(false)} min={min} max={max} step={step} className="w-full text-center border-none bg-transparent focus:outline-none [-moz-appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none text-zinc-900 dark:text-zinc-100" />

{min} {max}

); } export { NumericInput }