@uipath/apollo-wind 2.60.1 → 2.62.0

package/dist/components/forms/field-renderer.cjs

@@ -29,34 +29,28 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_react_namespaceObject = require("react");
 const external_react_hook_form_namespaceObject = require("react-hook-form");
-const checkbox_cjs_namespaceObject = require("../ui/checkbox.cjs");
-const date_picker_cjs_namespaceObject = require("../ui/date-picker.cjs");
-const datetime_picker_cjs_namespaceObject = require("../ui/datetime-picker.cjs");
-const file_upload_cjs_namespaceObject = require("../ui/file-upload.cjs");
 const form_field_cjs_namespaceObject = require("../ui/form-field.cjs");
-const input_cjs_namespaceObject = require("../ui/input.cjs");
-const label_cjs_namespaceObject = require("../ui/label.cjs");
-const multi_select_cjs_namespaceObject = require("../ui/multi-select.cjs");
-const radio_group_cjs_namespaceObject = require("../ui/radio-group.cjs");
-const select_cjs_namespaceObject = require("../ui/select.cjs");
-const slider_cjs_namespaceObject = require("../ui/slider.cjs");
-const switch_cjs_namespaceObject = require("../ui/switch.cjs");
-const textarea_cjs_namespaceObject = require("../ui/textarea.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
 const external_data_fetcher_cjs_namespaceObject = require("./data-fetcher.cjs");
+const external_field_control_cjs_namespaceObject = require("./field-control.cjs");
 const external_form_schema_cjs_namespaceObject = require("./form-schema.cjs");
+const external_mode_aware_field_cjs_namespaceObject = require("./mode-aware-field.cjs");
 const external_rules_engine_cjs_namespaceObject = require("./rules-engine.cjs");
 const external_string_list_field_cjs_namespaceObject = require("./string-list-field.cjs");
+const external_value_modes_cjs_namespaceObject = require("./value-modes.cjs");
 function FormFieldRenderer({ field, context, customComponents, disabled: formDisabled = false }) {
     const { control, watch, getValues } = (0, external_react_hook_form_namespaceObject.useFormContext)();
     const contextRef = (0, external_react_namespaceObject.useRef)(context);
     contextRef.current = context;
+    const readValues = (0, external_react_namespaceObject.useCallback)(()=>(0, external_value_modes_cjs_namespaceObject.literalValues)(getValues(), contextRef.current.schema, contextRef.current.valueModes?.codecs), [
+        getValues
+    ]);
     const getInitialVisibility = ()=>{
         if (!field.rules || 0 === field.rules.length) return true;
         const hasShowRule = field.rules.some((rule)=>rule.effects?.visible === true);
         const hasHideRule = field.rules.some((rule)=>rule.effects?.visible === false);
         if (!hasShowRule && !hasHideRule) return true;
-        const allValues = getValues();
+        const allValues = readValues();
         const ruleResult = external_rules_engine_cjs_namespaceObject.RulesEngine.applyRules(field.rules, allValues, context);
         if (void 0 !== ruleResult.visible) return ruleResult.visible;
         return !hasShowRule;
@@ -64,7 +58,7 @@ function FormFieldRenderer({ field, context, customComponents, disabled: formDis
     const getInitialRequired = ()=>{
         const staticRequired = field.validation?.required ?? false;
         if (!field.rules || 0 === field.rules.length) return staticRequired;
-        const allValues = getValues();
+        const allValues = readValues();
         const ruleResult = external_rules_engine_cjs_namespaceObject.RulesEngine.applyRules(field.rules, allValues, context);
         return ruleResult.required ?? staticRequired;
     };
@@ -103,7 +97,7 @@ function FormFieldRenderer({ field, context, customComponents, disabled: formDis
     const watchedRuleDependentValues = watch(dependentFields);
     (0, external_react_namespaceObject.useEffect)(()=>{
         if (!field.rules || 0 === field.rules.length) return;
-        const allValues = getValues();
+        const allValues = readValues();
         const ruleResult = external_rules_engine_cjs_namespaceObject.RulesEngine.applyRules(field.rules, allValues, contextRef.current);
         const hasShowRule = field.rules.some((rule)=>rule.effects?.visible === true);
         const hasHideRule = field.rules.some((rule)=>rule.effects?.visible === false);
@@ -130,7 +124,7 @@ function FormFieldRenderer({ field, context, customComponents, disabled: formDis
     }, [
         field.rules,
         field.validation?.required,
-        getValues,
+        readValues,
         watchedRuleDependentValues
     ]);
     const isOptionsField = (0, external_form_schema_cjs_namespaceObject.hasOptions)(field);
@@ -155,7 +149,7 @@ function FormFieldRenderer({ field, context, customComponents, disabled: formDis
         if (!field.dataSource) return;
         const fetchOptions = async ()=>{
             try {
-                const allValues = getValues();
+                const allValues = readValues();
                 const data = await external_data_fetcher_cjs_namespaceObject.DataFetcher.fetch(field.dataSource, allValues);
                 setFieldState((prev)=>{
                     if ((0, index_cjs_namespaceObject.deepEqual)(prev.options, data)) return prev;
@@ -172,7 +166,7 @@ function FormFieldRenderer({ field, context, customComponents, disabled: formDis
     }, [
         field.dataSource,
         field.name,
-        getValues,
+        readValues,
         watchedDataSourceValues
     ]);
     if (!fieldState.visible) return null;
@@ -180,8 +174,20 @@ function FormFieldRenderer({ field, context, customComponents, disabled: formDis
     const gridStyle = {
         gridColumn: `span ${gridSpan}`
     };
-    if ((0, external_form_schema_cjs_namespaceObject.isCustomField)(field) && customComponents[field.component]) {
-        const CustomComponent = customComponents[field.component];
+    if (field.valueModes || field.headerActions || field.menuActions || field.badge) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        style: gridStyle,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_mode_aware_field_cjs_namespaceObject.ModeAwareField, {
+            field: field,
+            context: context,
+            customComponents: customComponents,
+            disabled: formDisabled || fieldState.disabled,
+            required: fieldState.required,
+            options: fieldState.options
+        })
+    });
+    const customEntry = (0, external_form_schema_cjs_namespaceObject.isCustomField)(field) ? customComponents[field.component] : void 0;
+    if ((0, external_form_schema_cjs_namespaceObject.isCustomField)(field) && customEntry) {
+        const CustomComponent = (0, external_value_modes_cjs_namespaceObject.isFieldControlRegistration)(customEntry) ? customEntry.component : customEntry;
         return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
             style: gridStyle,
             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_hook_form_namespaceObject.Controller, {
@@ -205,222 +211,35 @@ function FormFieldRenderer({ field, context, customComponents, disabled: formDis
             name: field.name,
             control: control,
             defaultValue: field.defaultValue,
-            render: ({ field: formField, fieldState: { error } })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FieldByType, {
+            render: ({ field: formField, fieldState: { error } })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(BuiltInField, {
                     field: field,
                     formField: formField,
                     error: error?.message,
                     disabled: formDisabled || fieldState.disabled,
                     required: fieldState.required,
-                    options: fieldState.options
+                    options: fieldState.options,
+                    strings: context.strings?.boolean
                 })
         })
     });
 }
-function FieldByType({ field, formField, error, disabled, required, options }) {
+function BuiltInField({ field, formField, error, disabled, required, options, strings }) {
+    const control = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_field_control_cjs_namespaceObject.FieldControl, {
+        field: field,
+        formField: formField,
+        options: options,
+        disabled: disabled,
+        invalid: !!error,
+        strings: strings
+    });
     switch(field.type){
-        case 'text':
-        case 'email':
-            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(form_field_cjs_namespaceObject.FormField, {
-                children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldLabel, {
-                        htmlFor: field.name,
-                        required: required,
-                        tooltip: field.tooltip,
-                        tooltipAriaLabel: field.tooltipAriaLabel,
-                        children: field.label
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(input_cjs_namespaceObject.Input, {
-                        id: field.name,
-                        value: formField.value,
-                        onChange: (e)=>formField.onChange(e.target.value),
-                        onBlur: formField.onBlur,
-                        name: formField.name,
-                        ref: formField.ref,
-                        type: field.type,
-                        placeholder: field.placeholder,
-                        disabled: disabled,
-                        "aria-invalid": error ? true : void 0,
-                        "aria-describedby": error ? `${field.name}-error` : void 0,
-                        "aria-errormessage": error ? `${field.name}-error` : void 0,
-                        "aria-label": field.ariaLabel
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldDescription, {
-                        children: field.description
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldError, {
-                        id: `${field.name}-error`,
-                        children: error
-                    })
-                ]
-            });
-        case 'number':
-            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(form_field_cjs_namespaceObject.FormField, {
-                children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldLabel, {
-                        htmlFor: field.name,
-                        required: required,
-                        tooltip: field.tooltip,
-                        tooltipAriaLabel: field.tooltipAriaLabel,
-                        children: field.label
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(input_cjs_namespaceObject.Input, {
-                        id: field.name,
-                        value: formField.value,
-                        onBlur: formField.onBlur,
-                        name: formField.name,
-                        ref: formField.ref,
-                        type: "number",
-                        min: field.min,
-                        max: field.max,
-                        step: field.step,
-                        placeholder: field.placeholder,
-                        disabled: disabled,
-                        "aria-invalid": error ? true : void 0,
-                        "aria-describedby": error ? `${field.name}-error` : void 0,
-                        "aria-errormessage": error ? `${field.name}-error` : void 0,
-                        onChange: (e)=>formField.onChange(parseFloat(e.target.value))
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldDescription, {
-                        children: field.description
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldError, {
-                        id: `${field.name}-error`,
-                        children: error
-                    })
-                ]
-            });
-        case 'textarea':
-            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(form_field_cjs_namespaceObject.FormField, {
-                children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldLabel, {
-                        htmlFor: field.name,
-                        required: required,
-                        tooltip: field.tooltip,
-                        tooltipAriaLabel: field.tooltipAriaLabel,
-                        children: field.label
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(textarea_cjs_namespaceObject.Textarea, {
-                        id: field.name,
-                        value: formField.value,
-                        onChange: (e)=>formField.onChange(e.target.value),
-                        onBlur: formField.onBlur,
-                        name: formField.name,
-                        ref: formField.ref,
-                        placeholder: field.placeholder,
-                        disabled: disabled,
-                        maxLength: field.maxLength,
-                        "aria-invalid": error ? true : void 0,
-                        "aria-describedby": error ? `${field.name}-error` : void 0,
-                        "aria-errormessage": error ? `${field.name}-error` : void 0,
-                        ...null != field.minRows ? {
-                            minRows: field.minRows
-                        } : {
-                            rows: field.rows || 4
-                        }
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldDescription, {
-                        children: field.description
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldError, {
-                        id: `${field.name}-error`,
-                        children: error
-                    })
-                ]
-            });
-        case 'select':
-            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(form_field_cjs_namespaceObject.FormField, {
-                children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldLabel, {
-                        htmlFor: field.name,
-                        required: required,
-                        tooltip: field.tooltip,
-                        tooltipAriaLabel: field.tooltipAriaLabel,
-                        children: field.label
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(select_cjs_namespaceObject.Select, {
-                        value: formField.value,
-                        onValueChange: formField.onChange,
-                        disabled: disabled,
-                        children: [
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectTrigger, {
-                                id: field.name,
-                                "aria-label": field.label,
-                                "aria-invalid": error ? true : void 0,
-                                "aria-describedby": error ? `${field.name}-error` : void 0,
-                                "aria-errormessage": error ? `${field.name}-error` : void 0,
-                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectValue, {
-                                    placeholder: field.placeholder || 'Select...'
-                                })
-                            }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectContent, {
-                                children: options.map((option)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectItem, {
-                                        value: String(option.value),
-                                        disabled: 'disabled' in option ? Boolean(option.disabled) : false,
-                                        children: option.label
-                                    }, String(option.value)))
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldDescription, {
-                        children: field.description
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldError, {
-                        id: `${field.name}-error`,
-                        children: error
-                    })
-                ]
-            });
-        case 'multiselect':
-            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(form_field_cjs_namespaceObject.FormField, {
-                children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldLabel, {
-                        htmlFor: field.name,
-                        required: required,
-                        tooltip: field.tooltip,
-                        tooltipAriaLabel: field.tooltipAriaLabel,
-                        children: field.label
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(multi_select_cjs_namespaceObject.MultiSelect, {
-                        id: field.name,
-                        selected: formField.value || [],
-                        onChange: formField.onChange,
-                        options: options.map((opt)=>({
-                                label: opt.label,
-                                value: String(opt.value)
-                            })),
-                        disabled: disabled,
-                        placeholder: field.placeholder || 'Select items...',
-                        emptyMessage: field.emptyMessage ?? 'No items found.',
-                        searchPlaceholder: field.searchPlaceholder ?? 'Search...',
-                        maxSelected: field.maxSelected,
-                        "aria-invalid": error ? true : void 0,
-                        "aria-describedby": error ? `${field.name}-error` : void 0,
-                        "aria-errormessage": error ? `${field.name}-error` : void 0
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldDescription, {
-                        children: field.description
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldError, {
-                        id: `${field.name}-error`,
-                        children: error
-                    })
-                ]
-            });
         case 'checkbox':
             return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(form_field_cjs_namespaceObject.FormField, {
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                         className: "flex items-start space-x-2",
                         children: [
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(checkbox_cjs_namespaceObject.Checkbox, {
-                                checked: true === formField.value,
-                                onCheckedChange: (checked)=>formField.onChange(true === checked),
-                                disabled: disabled,
-                                "aria-invalid": error ? true : void 0,
-                                "aria-describedby": error ? `${field.name}-error` : void 0,
-                                "aria-errormessage": error ? `${field.name}-error` : void 0,
-                                id: field.name
-                            }),
+                            control,
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                                 className: "space-y-1 leading-none",
                                 children: [
@@ -465,15 +284,7 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                                     })
                                 ]
                             }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(switch_cjs_namespaceObject.Switch, {
-                                id: field.name,
-                                checked: true === formField.value,
-                                onCheckedChange: (checked)=>formField.onChange(true === checked),
-                                disabled: disabled,
-                                "aria-invalid": error ? true : void 0,
-                                "aria-describedby": error ? `${field.name}-error` : void 0,
-                                "aria-errormessage": error ? `${field.name}-error` : void 0
-                            })
+                            control
                         ]
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldError, {
@@ -482,40 +293,26 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                     })
                 ]
             });
-        case 'radio':
+        case 'slider':
             return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(form_field_cjs_namespaceObject.FormField, {
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldLabel, {
-                        id: `${field.name}-label`,
-                        required: required,
-                        tooltip: field.tooltip,
-                        tooltipAriaLabel: field.tooltipAriaLabel,
-                        children: field.label
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(radio_group_cjs_namespaceObject.RadioGroup, {
-                        "aria-labelledby": `${field.name}-label`,
-                        value: formField.value,
-                        onValueChange: formField.onChange,
-                        disabled: disabled,
-                        "aria-invalid": error ? true : void 0,
-                        "aria-describedby": error ? `${field.name}-error` : void 0,
-                        "aria-errormessage": error ? `${field.name}-error` : void 0,
-                        children: options.map((option)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                className: "flex items-center space-x-2",
-                                children: [
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(radio_group_cjs_namespaceObject.RadioGroupItem, {
-                                        value: String(option.value),
-                                        id: `${field.name}-${option.value}`,
-                                        disabled: 'disabled' in option ? Boolean(option.disabled) : false
-                                    }),
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(label_cjs_namespaceObject.Label, {
-                                        variant: "muted",
-                                        htmlFor: `${field.name}-${option.value}`,
-                                        children: option.label
-                                    })
-                                ]
-                            }, String(option.value)))
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "flex justify-between",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldLabel, {
+                                id: `${field.name}-label`,
+                                required: required,
+                                tooltip: field.tooltip,
+                                tooltipAriaLabel: field.tooltipAriaLabel,
+                                children: field.label
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SliderValue, {
+                                field: field,
+                                value: formField.value
+                            })
+                        ]
                     }),
+                    control,
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldDescription, {
                         children: field.description
                     }),
@@ -525,98 +322,34 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                     })
                 ]
             });
-        case 'slider':
-            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SliderField, {
+        case 'string-list':
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_string_list_field_cjs_namespaceObject.StringListField, {
                 field: field,
-                formField: formField,
+                inputRef: formField.ref,
+                value: formField.value,
+                onChange: formField.onChange,
+                onBlur: formField.onBlur,
                 error: error,
                 disabled: disabled,
                 required: required
             });
-        case 'date':
-            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(form_field_cjs_namespaceObject.FormField, {
-                children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldLabel, {
-                        htmlFor: field.name,
-                        required: required,
-                        tooltip: field.tooltip,
-                        tooltipAriaLabel: field.tooltipAriaLabel,
-                        children: field.label
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(date_picker_cjs_namespaceObject.DatePicker, {
-                        id: field.name,
-                        value: formField.value,
-                        onValueChange: formField.onChange,
-                        disabled: disabled,
-                        placeholder: field.placeholder,
-                        "aria-invalid": error ? true : void 0,
-                        "aria-describedby": error ? `${field.name}-error` : void 0,
-                        "aria-errormessage": error ? `${field.name}-error` : void 0
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldDescription, {
-                        children: field.description
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldError, {
-                        id: `${field.name}-error`,
-                        children: error
-                    })
-                ]
-            });
-        case 'datetime':
-            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(form_field_cjs_namespaceObject.FormField, {
-                children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldLabel, {
-                        id: `${field.name}-label`,
-                        required: required,
-                        tooltip: field.tooltip,
-                        tooltipAriaLabel: field.tooltipAriaLabel,
-                        children: field.label
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(datetime_picker_cjs_namespaceObject.DateTimePicker, {
-                        "aria-labelledby": `${field.name}-label`,
-                        "aria-invalid": error ? true : void 0,
-                        "aria-describedby": error ? `${field.name}-error` : void 0,
-                        "aria-errormessage": error ? `${field.name}-error` : void 0,
-                        value: formField.value,
-                        onValueChange: formField.onChange,
-                        disabled: disabled,
-                        placeholder: field.placeholder,
-                        use12Hour: field.use12Hour
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldDescription, {
-                        children: field.description
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldError, {
-                        id: `${field.name}-error`,
-                        children: error
-                    })
-                ]
-            });
-        case 'file':
+        case 'custom':
+            return null;
+        default:
             return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(form_field_cjs_namespaceObject.FormField, {
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldLabel, {
-                        htmlFor: field.name,
+                        ...'radio' === field.type || 'boolean' === field.type || 'datetime' === field.type ? {
+                            id: `${field.name}-label`
+                        } : {
+                            htmlFor: field.name
+                        },
                         required: required,
                         tooltip: field.tooltip,
                         tooltipAriaLabel: field.tooltipAriaLabel,
                         children: field.label
                     }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(file_upload_cjs_namespaceObject.FileUpload, {
-                        id: field.name,
-                        ariaLabel: field.ariaLabel ?? field.label,
-                        "aria-invalid": error ? true : void 0,
-                        "aria-describedby": error ? `${field.name}-error` : void 0,
-                        "aria-errormessage": error ? `${field.name}-error` : void 0,
-                        accept: field.accept,
-                        multiple: field.multiple,
-                        disabled: disabled,
-                        maxSize: field.maxSize,
-                        showPreview: field.showPreview,
-                        onFilesChange: (files)=>{
-                            formField.onChange(field.multiple ? files : files[0]);
-                        }
-                    }),
+                    control,
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldDescription, {
                         children: field.description
                     }),
@@ -626,91 +359,15 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                     })
                 ]
             });
-        case 'string-list':
-            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_string_list_field_cjs_namespaceObject.StringListField, {
-                field: field,
-                inputRef: formField.ref,
-                value: formField.value,
-                onChange: formField.onChange,
-                onBlur: formField.onBlur,
-                error: error,
-                disabled: disabled,
-                required: required
-            });
-        default:
-            return null;
     }
 }
-function SliderField({ field, formField, error, disabled, required }) {
-    const { watch } = (0, external_react_hook_form_namespaceObject.useFormContext)();
-    const watchedMax = field.maxRef ? watch(field.maxRef.fromField) : void 0;
-    const resolvedMax = resolveSliderMax(field, watchedMax);
-    const prevMaxRef = (0, external_react_namespaceObject.useRef)(resolvedMax);
-    (0, external_react_namespaceObject.useEffect)(()=>{
-        if (resolvedMax === prevMaxRef.current) return;
-        prevMaxRef.current = resolvedMax;
-        const v = formField.value;
-        if ('number' == typeof v && v > resolvedMax) formField.onChange(resolvedMax);
-    }, [
-        resolvedMax,
-        formField.value,
-        formField.onChange
-    ]);
-    const displayValue = (()=>{
-        const v = formField.value;
-        if ('number' == typeof v) return Math.min(v, resolvedMax);
-        return v;
-    })();
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(form_field_cjs_namespaceObject.FormField, {
-        children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                className: "flex justify-between",
-                children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldLabel, {
-                        id: `${field.name}-label`,
-                        required: required,
-                        tooltip: field.tooltip,
-                        tooltipAriaLabel: field.tooltipAriaLabel,
-                        children: field.label
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                        className: "text-sm text-muted-foreground",
-                        children: displayValue
-                    })
-                ]
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(slider_cjs_namespaceObject.Slider, {
-                "aria-labelledby": `${field.name}-label`,
-                "aria-invalid": error ? true : void 0,
-                "aria-describedby": error ? `${field.name}-error` : void 0,
-                "aria-errormessage": error ? `${field.name}-error` : void 0,
-                value: [
-                    displayValue ?? field.min ?? 0
-                ],
-                onValueChange: (values)=>formField.onChange(values[0]),
-                min: field.min || 0,
-                max: resolvedMax,
-                step: field.step || 1,
-                disabled: disabled
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldDescription, {
-                children: field.description
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldError, {
-                id: `${field.name}-error`,
-                children: error
-            })
-        ]
+function SliderValue({ field, value }) {
+    const displayValue = (0, external_field_control_cjs_namespaceObject.clampSliderValue)(value, (0, external_field_control_cjs_namespaceObject.useSliderMax)(field));
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+        className: "text-sm text-muted-foreground",
+        children: displayValue
     });
 }
-function resolveSliderMax(field, watchedValue) {
-    if (field.maxRef) {
-        if ('number' == typeof watchedValue && Number.isFinite(watchedValue) && watchedValue > 0) return watchedValue;
-        if ('number' == typeof field.maxRef.fallback) return field.maxRef.fallback;
-    }
-    if ('number' == typeof field.max) return field.max;
-    return 100;
-}
 exports.FormFieldRenderer = __webpack_exports__.FormFieldRenderer;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "FormFieldRenderer"

package/dist/components/forms/field-renderer.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-import type { CustomFieldComponentProps, FieldMetadata, FormContext } from './form-schema';
+import type { CustomComponents, FieldMetadata, FormContext } from './form-schema';
 /**
  * Field Renderer - Connects metadata to actual UI components
  * Integrates with shadcn/ui components from apollo-wind
@@ -7,7 +6,7 @@ import type { CustomFieldComponentProps, FieldMetadata, FormContext } from './fo
 interface FormFieldRendererProps {
     field: FieldMetadata;
     context: FormContext;
-    customComponents: Record<string, React.ComponentType<CustomFieldComponentProps>>;
+    customComponents: CustomComponents;
     disabled?: boolean;
 }
 export declare function FormFieldRenderer({ field, context, customComponents, disabled: formDisabled, }: FormFieldRendererProps): import("react/jsx-runtime").JSX.Element | null;