"use client"; import * as React from "react"; import { ThemeIcon } from "@/components/registry/primitives/core/theme-icon"; import { cn } from "@/lib/registry/cn"; export interface NumberInputProps extends Omit< React.ComponentPropsWithoutRef<"input">, "type" | "value" | "defaultValue" > { value?: number; defaultValue?: number; min?: number; max?: number; step?: number; /** Show stepper buttons. Default true. */ showStepper?: boolean; onValueChange?: (value: number) => void; } const NumberInput = React.forwardRef( function NumberInput( { className, value, defaultValue, min, max, step = 1, showStepper = true, onChange, onValueChange, disabled, ...props }, ref, ) { const [internalValue, setInternalValue] = React.useState( value != null ? String(value) : defaultValue != null ? String(defaultValue) : "", ); const isControlled = value !== undefined; const numValue = isControlled ? value : Number.parseFloat(internalValue); const safeNum = Number.isNaN(numValue) ? undefined : numValue; const clamp = (n: number) => { let v = n; if (min != null) v = Math.max(min, v); if (max != null) v = Math.min(max, v); return v; }; const handleChange = (e: React.ChangeEvent) => { const raw = e.target.value; if (!isControlled) setInternalValue(raw); onChange?.(e); const parsed = Number.parseFloat(raw); if (!Number.isNaN(parsed)) onValueChange?.(parsed); }; const stepUp = () => { const next = clamp((safeNum ?? min ?? 0) + step); onValueChange?.(next); if (!isControlled) setInternalValue(String(next)); }; const stepDown = () => { const next = clamp((safeNum ?? max ?? 0) - step); onValueChange?.(next); if (!isControlled) setInternalValue(String(next)); }; const inputValue = isControlled ? value === undefined ? "" : value : internalValue; return (

{showStepper && (

)}

); }, ); NumberInput.displayName = "NumberInput"; export { NumberInput };

Number Input

Showcase

Number Input