zod-form-radix/dist/components/fields/ArrayField.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 { Button } from '../button';
import { Label } from '../label';
import { cn } from '../../lib/utils';
export function ArrayField({ label, value = [], onChange, error, required, itemSchema, errors, path, options = {}, className = '' }) {
    const { minLength = 0, maxLength } = options;
    const addItem = () => {
        const newValue = [...value, getDefaultValueForSchema(itemSchema)];
        onChange(path, newValue);
    };
    const removeItem = (index) => {
        const newValue = value.filter((_, i) => i !== index);
        onChange(path, newValue);
    };
    const updateItem = (index, newItemValue) => {
        const newValue = [...value];
        newValue[index] = newItemValue;
        onChange(path, newValue);
    };
    const canAddMore = !maxLength || value.length < maxLength;
    const canRemove = value.length > minLength;
    return (_jsxs("div", { className: cn("space-y-4", className), children: [_jsxs("div", { className: "flex items-center justify-between", children: [label && (_jsxs(Label, { children: [label, required && _jsx("span", { className: "text-red-500 ml-1", children: "*" })] })), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: addItem, disabled: !canAddMore, children: "Add Item" })] }), value.length === 0 ? (_jsx("div", { className: "text-sm text-muted-foreground p-4 border-2 border-dashed rounded-lg text-center", children: "No items added yet. Click \"Add Item\" to get started." })) : (_jsx("div", { className: "space-y-3", children: value.map((item, index) => (_jsx("div", { className: "flex items-start space-x-2 p-3 border rounded-lg bg-card", children: _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsxs("span", { className: "text-sm font-medium", children: ["Item ", index + 1] }), canRemove && (_jsx(Button, { type: "button", variant: "destructive", size: "sm", onClick: () => removeItem(index), children: "Remove" }))] }), _jsx("div", { className: "space-y-2", children: typeof item === 'string' ? (_jsx("input", { type: "text", value: item, onChange: (e) => updateItem(index, e.target.value), className: "w-full px-3 py-2 border border-input rounded-md bg-background", placeholder: `Enter ${itemSchema.type || 'value'}` })) : typeof item === 'number' ? (_jsx("input", { type: "number", value: item, onChange: (e) => updateItem(index, Number(e.target.value)), className: "w-full px-3 py-2 border border-input rounded-md bg-background", placeholder: `Enter ${itemSchema.type || 'number'}` })) : (_jsxs("div", { className: "text-sm text-muted-foreground", children: ["Complex item type - ", JSON.stringify(item)] })) }), errors[`${path}.${index}`] && (_jsx("p", { className: "text-sm text-red-500 mt-1", children: errors[`${path}.${index}`] }))] }) }, index))) })), error && (_jsx("p", { className: "text-sm text-red-500 mt-1", children: error }))] }));
}
// Helper function to get default value for a schema
function getDefaultValueForSchema(schema) {
    if (schema.defaultValue !== undefined)
        return schema.defaultValue;
    switch (schema.type) {
        case 'string': return '';
        case 'number': return 0;
        case 'boolean': return false;
        case 'date': return new Date();
        case 'array': return [];
        case 'object': return {};
        default: return null;
    }
}