zod-form-radix/dist/components/fields/StringField.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 StringField({ name, label, value = '', onChange, error, required, options = {}, className = '' }) {
    const inputType = getInputType(options.format);
    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: inputType, value: value, onChange: (e) => onChange(e.target.value), className: cn(error && "border-red-500 focus-visible:ring-red-500"), required: required, readOnly: options.readonly, minLength: options.minLength, maxLength: options.maxLength, pattern: options.pattern?.source, placeholder: options.format === 'email' ? 'Enter email address' :
                    options.format === 'url' ? 'Enter URL' :
                        label ? `Enter ${label.toLowerCase()}` : undefined }), error && (_jsx("p", { className: "text-sm text-red-500 mt-1", children: error }))] }));
}
function getInputType(format) {
    switch (format) {
        case 'email': return 'email';
        case 'url': return 'url';
        case 'password': return 'password';
        default: return 'text';
    }
}