zod-form-radix/dist/components/fields/ObjectField.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 { Label } from '../label';
import { cn } from '../../lib/utils';
import { StringField } from './StringField';
import { NumberField } from './NumberField';
import { BooleanField } from './BooleanField';
import { DateField } from './DateField';
export function ObjectField({ name, label, value = {}, onChange, error, required, properties = {}, errors = {}, path, className = '' }) {
    const handlePropertyChange = (propertyPath, propertyValue) => {
        // Call onChange with the property path and value as expected by core
        onChange(propertyPath, propertyValue);
    };
    const renderPropertyField = (propertyName, propertySchema, propertyValue, propertyError) => {
        const propertyPath = path ? `${path}.${propertyName}` : propertyName;
        const fieldProps = {
            name: `${name}-${propertyName}`,
            label: propertySchema.label || propertyName,
            value: propertyValue,
            onChange: (newValue) => handlePropertyChange(propertyPath, newValue),
            error: propertyError,
            required: propertySchema.required,
            path: propertyPath
        };
        // Render the appropriate field component based on type
        switch (propertySchema.type) {
            case 'string':
                return _jsx(StringField, { ...fieldProps });
            case 'number':
                return _jsx(NumberField, { ...fieldProps });
            case 'boolean':
                return _jsx(BooleanField, { ...fieldProps });
            case 'date':
                return _jsx(DateField, { ...fieldProps });
            case 'object':
                return (_jsx(ObjectField, { ...fieldProps, properties: propertySchema.properties || {}, errors: errors }));
            default:
                // Fallback for unsupported types
                return (_jsxs("div", { className: "text-sm text-muted-foreground p-2 border border-dashed rounded", children: [_jsxs("div", { className: "font-medium mb-1", children: ["Unsupported field type: ", propertySchema.type] }), _jsxs("div", { className: "text-xs", children: ["Property: ", propertyName] }), _jsxs("div", { className: "text-xs", children: ["Current value: ", JSON.stringify(propertyValue)] })] }));
        }
    };
    return (_jsxs("div", { className: cn("space-y-4", className), children: [label && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: name, children: [label, required && _jsx("span", { className: "text-red-500 ml-1", children: "*" })] }), _jsx("hr", { className: "border-border" })] })), _jsx("div", { className: cn("space-y-4", "pl-4 border-l-2 border-border"), children: Object.entries(properties).map(([propertyName, propertySchema]) => {
                    // Skip if schema is undefined
                    if (!propertySchema) {
                        console.warn(`ObjectField: Schema for property '${propertyName}' is undefined`);
                        return null;
                    }
                    const propertyValue = value[propertyName];
                    const propertyError = errors?.[`${path}.${propertyName}`] || errors?.[propertyName];
                    return (_jsx("div", { children: renderPropertyField(propertyName, propertySchema, propertyValue, propertyError) }, propertyName));
                }) }), error && (_jsx("p", { className: "text-sm text-red-500 mt-2", children: error }))] }));
}