zod-form-radix/dist/components/fields/NumberField.js

Radix UI integration for zod-form-kit

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// React import not needed with new JSX transform
import { Input } from '../input';
import { Label } from '../label';
import { cn } from '../../lib/utils';
export function NumberField({ name, label, value = 0, onChange, error, required, options = {}, className = '' }) {
    const { min, max, step = 1, readonly } = options;
    const handleInputChange = (e) => {
        const inputValue = e.target.value;
        if (inputValue === '') {
            onChange(0);
        }
        else {
            const numericValue = Number(inputValue);
            // Only call onChange if we have a valid number
            if (!isNaN(numericValue)) {
                onChange(numericValue);
            }
        }
    };
    return (_jsxs("div", { className: cn("space-y-2", className), children: [label && (_jsxs(Label, { htmlFor: name, children: [label, required && _jsx("span", { className: "text-red-500 ml-1", children: "*" })] })), _jsx(Input, { id: name, name: name, type: "number", value: value, onChange: handleInputChange, className: cn(error && "border-red-500 focus-visible:ring-red-500"), required: required, readOnly: readonly, min: min, max: max, step: step }), error && (_jsx("p", { className: "text-sm text-red-500 mt-1", children: error }))] }));
}