ivt 0.8.5 → 0.8.7

package/dist/form-layout/index.mjs

@@ -1,70 +1,75 @@
 import * as React from 'react';
 import { useId, useState, useRef, useEffect } from 'react';
-import { N as NumericFormat, P as PatternFormat } from '../chunks/react-number-format.es-B11gLKR5.mjs';
-import { M as MultiSelect } from '../chunks/multi-select-B6DLSXK6.mjs';
-import { c as cn } from '../chunks/utils-Dws4Ft8U.mjs';
-import { f as formatDateToBrazilian } from '../chunks/date-Dy-Pzcmp.mjs';
-import { f as formatMoney, s as styleInputError, a as styleInput } from '../chunks/format-numbers-CBSY6ZvL.mjs';
-import { f as FormField, a as FormItem, b as FormLabel, c as FormControl, d as FormDescription, e as FormMessage, F as Form } from '../chunks/form-BrcvX0yc.mjs';
-import { C as CalendarRange } from '../chunks/CalendarRange-DucTFDzH.mjs';
-import { T as Toggle } from '../chunks/toggle-DGw8vPFo.mjs';
-import { I as InputOTP, a as InputOTPGroup, b as InputOTPSlot } from '../chunks/input-otp-DfumrHpI.mjs';
-import { S as Slider } from '../chunks/slider-D39dP_g8.mjs';
-import { R as RadioGroup, a as RadioGroupItem } from '../chunks/radio-group-DhGJL_gc.mjs';
-import { S as Switch } from '../chunks/switch-B3zf2gI8.mjs';
-import { C as CalendarPopover, A as AutoComplete } from '../chunks/CalendarPopover-CRB6GXIt.mjs';
-import { L as ListItem } from '../chunks/ListItem-Da4Od2ts.mjs';
-import { L as Label } from '../chunks/label-Dxv54YUS.mjs';
-import { C as Checkbox } from '../chunks/checkbox-CgrFFc0p.mjs';
-import { S as Select, h as SelectTrigger, i as SelectValue, a as SelectContent, c as SelectItem } from '../chunks/select-Cl_ZzI9R.mjs';
-import { I as Input } from '../chunks/input-B4HxPY7D.mjs';
-import { T as Textarea } from '../chunks/textarea-W2TtG6RT.mjs';
-import { S as Separator } from '../chunks/separator-DohkJ_xb.mjs';
+import { N as NumericFormat, P as PatternFormat } from '../chunks/react-number-format.es-HizMU4ab.mjs';
+import { M as MultiSelect } from '../chunks/multi-select-ILUAJeKL.mjs';
+import { c as cn } from '../chunks/utils-BDcRwQMd.mjs';
+import { f as formatDateToBrazilian } from '../chunks/date-Dqmv8Nr4.mjs';
+import { f as formatMoney } from '../chunks/format-numbers-LmnBEQr0.mjs';
+import { s as styleInputError, a as styleInput } from '../chunks/styles-lQyUmHf7.mjs';
+import { f as FormField, a as FormItem, b as FormLabel, c as FormControl, d as FormDescription, e as FormMessage, F as Form } from '../chunks/form-paAECAsZ.mjs';
+import { C as CalendarRange } from '../chunks/CalendarRange-BZ-rc5Ns.mjs';
+import { C as Combobox } from '../chunks/combobox-D9iqP8Dp.mjs';
+import { T as Toggle } from '../chunks/toggle-Du3jnh1s.mjs';
+import { I as InputOTP, a as InputOTPGroup, b as InputOTPSlot } from '../chunks/input-otp-BNC4E0wv.mjs';
+import { S as Slider } from '../chunks/slider-D3yx--Ba.mjs';
+import { R as RadioGroup, a as RadioGroupItem } from '../chunks/radio-group-BlSUw5ql.mjs';
+import { S as Switch } from '../chunks/switch-COE1z3YV.mjs';
+import { D as DatePicker } from '../chunks/date-picker-BBCtT16G.mjs';
+import { C as CalendarPopover, A as AutoComplete } from '../chunks/CalendarPopover-DNS2oszG.mjs';
+import { I as InputFile } from '../chunks/input-file-BH3SMNJ7.mjs';
+import { L as ListItem } from '../chunks/ListItem-CtUZSq2i.mjs';
+import { L as Label } from '../chunks/label-D0iRy8Wj.mjs';
+import { C as Checkbox } from '../chunks/checkbox-DvxpZsiG.mjs';
+import { S as Select, h as SelectTrigger, i as SelectValue, a as SelectContent, c as SelectItem } from '../chunks/select-BBatgGtL.mjs';
+import { I as Input } from '../chunks/input-B-W81Xmi.mjs';
+import { T as Textarea } from '../chunks/textarea-DM2uvcxK.mjs';
+import { S as Separator } from '../chunks/separator-DYyhdAi6.mjs';
 import 'class-variance-authority';
-import '../chunks/x-CQ0W-nWi.mjs';
-import '../chunks/createLucideIcon-D3jW_oal.mjs';
-import '../chunks/chevrons-up-down-C5lu4ULp.mjs';
-import '../chunks/check-VfNn6myv.mjs';
-import '../chunks/wand-sparkles-C3OGp2qM.mjs';
-import '../chunks/popover--9SMD-cC.mjs';
-import '../chunks/index-B-46hbYc.mjs';
+import '../chunks/string-DRS4HkY8.mjs';
+import '../chunks/x-B6hDJA_l.mjs';
+import '../chunks/createLucideIcon-C11Tr46U.mjs';
+import '../chunks/chevrons-up-down-CdBVNy4c.mjs';
+import '../chunks/check-Ds358kZc.mjs';
+import '../chunks/wand-sparkles-DqgQle7F.mjs';
+import '../chunks/popover-CdZgcLPo.mjs';
+import '../chunks/index-Dsw02Eup.mjs';
 import 'react-dom';
 import '@radix-ui/react-slot';
 import 'react/jsx-runtime';
-import '../chunks/index-RaUpQCps.mjs';
-import '../chunks/index-EcI_mW3m.mjs';
-import '../chunks/index-Dp_x2nI3.mjs';
-import '../chunks/index-BbPnHdtV.mjs';
-import '../chunks/tslib.es6-B32hQ9eG.mjs';
-import '../chunks/index-DF-3JHwb.mjs';
-import '../chunks/index-C__GtYCW.mjs';
-import '../chunks/index-BzAMFivh.mjs';
-import '../chunks/index-DDM8Lpbb.mjs';
-import '../chunks/index-JZ-FhLOH.mjs';
-import '../chunks/index-DGUU265f.mjs';
-import '../chunks/index-SLs8oClH.mjs';
-import '../chunks/button-BvsCd2vf.mjs';
-import '../chunks/badge-BUI8RIXy.mjs';
-import '../chunks/tooltip-CI9dbI1p.mjs';
-import '../chunks/index-B5fbJZIT.mjs';
-import '../chunks/command-e20cpPEv.mjs';
-import '../chunks/index-B46fiGOC.mjs';
-import '../chunks/dialog-B20zSjze.mjs';
-import '../chunks/bundle-mjs-CjTndHqR.mjs';
-import '../chunks/format-CxsCX_YZ.mjs';
-import '../chunks/calendar-days-C3N6HIT-.mjs';
-import '../chunks/calendar-LFBK0slp.mjs';
-import '../chunks/chevron-left-B7ClEtyW.mjs';
-import '../chunks/chevron-right-Bb52eown.mjs';
-import '../chunks/chevron-down-CD1QpvBA.mjs';
-import '../chunks/index-DslxcA48.mjs';
-import '../chunks/index-Csf3aM1P.mjs';
-import '../chunks/index-3TdUvynV.mjs';
+import '../chunks/index-D4jPaBZ2.mjs';
+import '../chunks/index-4NpeUekv.mjs';
+import '../chunks/index-DC-gAYjS.mjs';
+import '../chunks/index-z4Hk6sF4.mjs';
+import '../chunks/tslib.es6-Q9puKanr.mjs';
+import '../chunks/index-gX0V59dZ.mjs';
+import '../chunks/index-C8u7IIcP.mjs';
+import '../chunks/index-B87m6Bfb.mjs';
+import '../chunks/index-DAa5gqEY.mjs';
+import '../chunks/index-BksCjWh6.mjs';
+import '../chunks/index-DfeRLazC.mjs';
+import '../chunks/index-1toTCGyr.mjs';
+import '../chunks/button-CZpmCmNo.mjs';
+import '../chunks/badge-ZU62MOiS.mjs';
+import '../chunks/tooltip-njN_ok-r.mjs';
+import '../chunks/index-BJrVyyCQ.mjs';
+import '../chunks/command-o67hOCgH.mjs';
+import '../chunks/index-CaYwp6E6.mjs';
+import '../chunks/dialog-DL1cSseU.mjs';
+import '../chunks/bundle-mjs-CXmmFvYo.mjs';
+import '../chunks/format-8qs-kXlN.mjs';
+import '../chunks/calendar-days-DnYx8d46.mjs';
+import '../chunks/calendar-CDJv1B--.mjs';
+import '../chunks/chevron-left-Baq244Ce.mjs';
+import '../chunks/chevron-right-Dq6zFe5E.mjs';
+import '../chunks/chevron-down-CDFTds2-.mjs';
+import '../chunks/index-CcmH_f2V.mjs';
+import '../chunks/index-UxWlwQlk.mjs';
+import '../chunks/index-COfEgTJM.mjs';
 import '@radix-ui/react-collection';
-import '../chunks/index-DghbVew_.mjs';
-import '../chunks/index.module-B4lVPYXp.mjs';
-import '../chunks/loader-circle-hYdtBTNb.mjs';
-import '../chunks/TooltipIndicator-B9oMD_x3.mjs';
+import '../chunks/index-DIHpzffL.mjs';
+import '../chunks/index.module-Czm-Rcez.mjs';
+import '../chunks/loader-circle-BMRpEmW6.mjs';
+import '../chunks/TooltipIndicator-o_ekzuQD.mjs';
 import '@radix-ui/react-select';
 
 /**
@@ -115,10 +120,16 @@ function AutocompleteFieldWrapper({ field, form, autocompleteConfig, placeholder
     useEffect(()=>{
         if (selectedOptionRef.current && field.value) {
             const currentValue = getOptionValue(selectedOptionRef.current);
-            if (currentValue === field.value) {
+            const newValue = typeof field.value === "object" && field.value !== null ? getOptionValue(field.value) : field.value;
+            if (currentValue === newValue) {
                 return;
             }
         }
+        if (field.value && typeof field.value === "object" && field.value !== null) {
+            selectedOptionRef.current = field.value;
+            setSelectedOption(field.value);
+            return;
+        }
         if (field.value && autocompleteConfig.fetchOptions) {
             const isNumericValue = typeof field.value === "number";
             const searchTerm = isNumericValue ? "" : field.value;
@@ -178,18 +189,19 @@ function AutocompleteFieldWrapper({ field, form, autocompleteConfig, placeholder
         getOptionLabel: getOptionLabel,
         getOptionKey: getOptionKey,
         clearable: autocompleteConfig.clearable ?? true,
-        className: cn("border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", isError && styleInputError)
+        className: cn("border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 truncate max-w-150", autocompleteConfig?.className, isError && styleInputError)
     });
 }
 function BaseFormField({ config, control, readOnly = false, form }) {
     const baseId = useId();
-    const { name, label, type, placeholder, description, required, options, items, allowNegative, decimalScale, disabled, prefix, radioOptions, otpLength, sliderRange, format: patternFormat, mask, autocompleteConfig, render: customRender, maxLength, endAdornment, multiSelectConfig, dateConfig, fileConfig } = config;
+    const { name, label, type, placeholder, description, required, options, items, allowNegative, decimalScale, disabled, prefix, radioOptions, otpLength, sliderRange, format: patternFormat, mask, autocompleteConfig, comboboxConfig, inlineElement, render: customRender, maxLength, endAdornment, multiSelectConfig, dateConfig, fileConfig, isCheckboxDefault } = config;
     const formatReadOnlyValue = (value, fieldType)=>{
         if (value === null || value === undefined || value === "") {
             return undefined;
         }
         switch(fieldType){
             case "date":
+            case "date-picker":
                 return formatDate(value);
             case "currency":
                 return formatCurrency(value);
@@ -269,6 +281,18 @@ function BaseFormField({ config, control, readOnly = false, form }) {
                     }
                     return undefined;
                 }
+            case "combobox":
+                {
+                    if (typeof value === "string" || typeof value === "number") {
+                        const valStr = String(value);
+                        if (config.comboboxConfig?.items) {
+                            const option = config.comboboxConfig.items.find((opt)=>String(opt.value) === valStr);
+                            return option ? option.label : valStr;
+                        }
+                        return valStr;
+                    }
+                    return String(value);
+                }
             default:
                 return String(value);
         }
@@ -278,7 +302,7 @@ function BaseFormField({ config, control, readOnly = false, form }) {
             control: control,
             name: name,
             render: ({ field })=>/*#__PURE__*/ React.createElement(ListItem, {
-                    title: label,
+                    title: label ?? "",
                     value: formatReadOnlyValue(field.value, type)
                 })
         });
@@ -290,8 +314,10 @@ function BaseFormField({ config, control, readOnly = false, form }) {
             const isError = fieldState?.invalid;
             if (customRender && form) {
                 return /*#__PURE__*/ React.createElement(FormItem, {
-                    className: type === "checkbox" ? "flex flex-row items-start space-y-0 space-x-3 rounded-md border p-4" : ""
-                }, type !== "checkbox" && type !== "switch" && /*#__PURE__*/ React.createElement(FormLabel, null, label, required && /*#__PURE__*/ React.createElement("span", {
+                    className: cn(type === "checkbox" && "flex flex-row items-start space-y-0 space-x-3 rounded-md border p-4", type === "checkbox" && isCheckboxDefault && "border-none p-0")
+                }, type !== "checkbox" && type !== "switch" && /*#__PURE__*/ React.createElement(FormLabel, {
+                    htmlFor: name
+                }, label, label && required && /*#__PURE__*/ React.createElement("span", {
                     className: "text-destructive",
                     style: {
                         float: "none",
@@ -299,16 +325,26 @@ function BaseFormField({ config, control, readOnly = false, form }) {
                         marginRight: 0,
                         marginTop: 0
                     }
-                }, "*"), ":"), /*#__PURE__*/ React.createElement(FormControl, {
+                }, "*"), /*#__PURE__*/ React.createElement("span", {
+                    className: !label ? "text-transparent" : ""
+                }, ":")), /*#__PURE__*/ React.createElement("div", {
+                    className: cn(inlineElement && "flex w-full items-center gap-2")
+                }, /*#__PURE__*/ React.createElement("div", {
+                    className: cn(inlineElement && "min-w-0 flex-1")
+                }, /*#__PURE__*/ React.createElement(FormControl, {
                     className: isError ? styleInputError : ""
                 }, customRender({
                     field,
                     form
-                })), type !== "checkbox" && description && !isError && /*#__PURE__*/ React.createElement(FormDescription, null, description), /*#__PURE__*/ React.createElement(FormMessage, null));
+                }))), inlineElement && /*#__PURE__*/ React.createElement("div", {
+                    className: "shrink-0"
+                }, inlineElement)), type !== "checkbox" && description && !isError && /*#__PURE__*/ React.createElement(FormDescription, null, description), /*#__PURE__*/ React.createElement(FormMessage, null));
             }
             return /*#__PURE__*/ React.createElement(FormItem, {
-                className: type === "checkbox" ? "flex flex-row items-start space-y-0 space-x-3 rounded-md border p-4" : ""
-            }, type !== "checkbox" && type !== "switch" && /*#__PURE__*/ React.createElement(FormLabel, null, label, required && /*#__PURE__*/ React.createElement("span", {
+                className: cn(type === "checkbox" && "flex flex-row items-start space-y-0 space-x-3 rounded-md border p-4", isCheckboxDefault && "border-none p-0")
+            }, type !== "checkbox" && type !== "switch" && /*#__PURE__*/ React.createElement(FormLabel, {
+                htmlFor: name
+            }, label, label && required && /*#__PURE__*/ React.createElement("span", {
                 className: "text-destructive",
                 style: {
                     float: "none",
@@ -316,7 +352,13 @@ function BaseFormField({ config, control, readOnly = false, form }) {
                     marginRight: 0,
                     marginTop: 0
                 }
-            }, "*"), ":"), /*#__PURE__*/ React.createElement(FormControl, null, (()=>{
+            }, "*"), /*#__PURE__*/ React.createElement("span", {
+                className: !label ? "text-transparent" : ""
+            }, ":")), /*#__PURE__*/ React.createElement("div", {
+                className: cn(inlineElement && "flex w-full items-center gap-2")
+            }, /*#__PURE__*/ React.createElement("div", {
+                className: cn(inlineElement && "min-w-0 flex-1")
+            }, /*#__PURE__*/ React.createElement(FormControl, null, (()=>{
                 switch(type){
                     case "text":
                     case "email":
@@ -336,18 +378,19 @@ function BaseFormField({ config, control, readOnly = false, form }) {
                             className: "text-muted-foreground pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-xs"
                         }, endAdornment(field.value)));
                     case "file":
-                        return /*#__PURE__*/ React.createElement("div", {
-                            className: "flex items-center gap-2"
-                        }, /*#__PURE__*/ React.createElement(Input, {
-                            type: "file",
+                        return /*#__PURE__*/ React.createElement(InputFile, {
+                            id: String(name),
+                            name: String(name),
+                            value: field.value,
                             onChange: (e)=>{
                                 const file = e.target.files?.[0] || null;
                                 field.onChange(file);
                             },
-                            className: "cursor-pointer file:cursor-pointer",
                             accept: fileConfig?.accept,
-                            disabled: disabled
-                        }));
+                            disabled: disabled,
+                            isError: isError,
+                            placeholder: placeholder
+                        });
                     case "textarea":
                         return /*#__PURE__*/ React.createElement(Textarea, {
                             className: cn("min-h-20", isError && styleInputError),
@@ -359,6 +402,7 @@ function BaseFormField({ config, control, readOnly = false, form }) {
                         });
                     case "number":
                         return /*#__PURE__*/ React.createElement(NumericFormat, {
+                            id: name,
                             customInput: Input,
                             decimalSeparator: ",",
                             thousandSeparator: ".",
@@ -373,10 +417,11 @@ function BaseFormField({ config, control, readOnly = false, form }) {
                             },
                             placeholder: placeholder,
                             disabled: disabled,
-                            className: isError ? styleInputError : ""
+                            className: cn("h-9", isError && styleInputError)
                         });
                     case "currency":
                         return /*#__PURE__*/ React.createElement(NumericFormat, {
+                            id: name,
                             customInput: Input,
                             decimalSeparator: ",",
                             thousandSeparator: ".",
@@ -392,7 +437,7 @@ function BaseFormField({ config, control, readOnly = false, form }) {
                             placeholder: placeholder,
                             disabled: disabled,
                             prefix: prefix ?? "R$ ",
-                            className: isError ? styleInputError : ""
+                            className: cn("h-9", isError && styleInputError)
                         });
                     case "pattern":
                         return /*#__PURE__*/ React.createElement(PatternFormat, {
@@ -413,14 +458,15 @@ function BaseFormField({ config, control, readOnly = false, form }) {
                             return /*#__PURE__*/ React.createElement(Select, {
                                 onValueChange: field.onChange,
                                 value: selectValue,
-                                disabled: disabled
+                                disabled: disabled,
+                                clearable: config.selectConfig?.clearable ?? true
                             }, /*#__PURE__*/ React.createElement(FormControl, null, /*#__PURE__*/ React.createElement(SelectTrigger, {
                                 id: name,
                                 className: cn("w-full", isError && styleInputError)
                             }, /*#__PURE__*/ React.createElement(SelectValue, {
                                 placeholder: placeholder || "Selecione"
                             }))), /*#__PURE__*/ React.createElement(SelectContent, {
-                                className: "max-h-[300px] overflow-x-hidden overflow-y-auto"
+                                className: "max-h-75 overflow-x-hidden overflow-y-auto"
                             }, options?.map((opt)=>{
                                 const val = typeof opt === "object" ? String(opt.value) : opt;
                                 const lab = typeof opt === "object" ? opt.label : opt;
@@ -432,6 +478,7 @@ function BaseFormField({ config, control, readOnly = false, form }) {
                         }
                     case "date":
                         return /*#__PURE__*/ React.createElement(CalendarPopover, {
+                            id: name,
                             date: field.value,
                             setDate: field.onChange,
                             placeholder: placeholder,
@@ -440,18 +487,34 @@ function BaseFormField({ config, control, readOnly = false, form }) {
                             disableWeekends: false,
                             className: cn("w-full", isError && styleInputError)
                         });
+                    case "date-picker":
+                        return /*#__PURE__*/ React.createElement(DatePicker, {
+                            id: name,
+                            date: field.value,
+                            setDate: field.onChange,
+                            placeholder: placeholder,
+                            disabled: disabled,
+                            className: cn("w-full", isError && styleInputError)
+                        });
                     case "checkbox":
-                        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Checkbox, {
+                        return /*#__PURE__*/ React.createElement("div", {
+                            className: "flex items-center gap-2"
+                        }, /*#__PURE__*/ React.createElement(Checkbox, {
                             checked: !!field.value,
                             onCheckedChange: field.onChange,
-                            disabled: disabled
+                            disabled: disabled,
+                            id: name
                         }), /*#__PURE__*/ React.createElement("div", {
                             className: "space-y-1 leading-none"
-                        }, /*#__PURE__*/ React.createElement(FormLabel, null, label), description && !isError && /*#__PURE__*/ React.createElement(FormDescription, null, description)));
+                        }, /*#__PURE__*/ React.createElement(FormLabel, {
+                            htmlFor: name
+                        }, label), description && !isError && /*#__PURE__*/ React.createElement(FormDescription, null, description)));
                     case "switch":
                         return /*#__PURE__*/ React.createElement("div", {
                             className: "flex items-center justify-between"
-                        }, /*#__PURE__*/ React.createElement(FormLabel, null, label), /*#__PURE__*/ React.createElement(Switch, {
+                        }, /*#__PURE__*/ React.createElement(FormLabel, {
+                            htmlFor: name
+                        }, label), /*#__PURE__*/ React.createElement(Switch, {
                             checked: !!field.value,
                             onCheckedChange: field.onChange,
                             disabled: disabled
@@ -527,13 +590,40 @@ function BaseFormField({ config, control, readOnly = false, form }) {
                                 isError: isError
                             });
                         }
-                    case "dateRange":
+                    case "combobox":
                         {
+                            if (!comboboxConfig) return null;
                             return /*#__PURE__*/ React.createElement("div", {
+                                tabIndex: -1,
+                                className: "outline-none"
+                            }, /*#__PURE__*/ React.createElement(Combobox, {
                                 id: name,
+                                items: comboboxConfig.items,
+                                value: String(field.value ?? ""),
+                                onValueChange: (val)=>{
+                                    if (comboboxConfig.valueType === "number") {
+                                        field.onChange(val !== "" ? Number(val) : null);
+                                    } else {
+                                        field.onChange(val || null);
+                                    }
+                                },
+                                placeholder: placeholder,
+                                searchPlaceholder: comboboxConfig.searchPlaceholder,
+                                emptyMessage: comboboxConfig.emptyMessage,
+                                groupHeading: comboboxConfig.groupHeading,
+                                normalizeSearch: comboboxConfig.normalizeSearch,
+                                disabled: disabled,
+                                widthClassName: "w-full",
+                                className: cn(isError && styleInputError)
+                            }));
+                        }
+                    case "dateRange":
+                        {
+                            return /*#__PURE__*/ React.createElement("div", {
                                 tabIndex: -1,
                                 className: "outline-none"
                             }, /*#__PURE__*/ React.createElement(CalendarRange, {
+                                id: name,
                                 numberOfMonths: 2,
                                 value: field.value,
                                 onChange: (value)=>{
@@ -547,10 +637,9 @@ function BaseFormField({ config, control, readOnly = false, form }) {
                                     }
                                 },
                                 placeholder: placeholder,
-                                className: cn("h-10 w-full", isError && styleInputError),
-                                disabled: disabled || dateConfig?.disabledDate,
-                                disabledDateTooltip: dateConfig?.disabledDateTooltip,
-                                showQuickRanges: dateConfig?.showQuickRanges
+                                className: cn("h-9 w-full", isError && styleInputError),
+                                disabled: disabled || dateConfig?.disabled,
+                                ...dateConfig
                             }));
                         }
                     case "numberRange":
@@ -558,6 +647,7 @@ function BaseFormField({ config, control, readOnly = false, form }) {
                             return /*#__PURE__*/ React.createElement("div", {
                                 className: "flex gap-2"
                             }, /*#__PURE__*/ React.createElement(NumericFormat, {
+                                id: name,
                                 placeholder: "Mínimo",
                                 value: field.value?.min ?? "",
                                 allowNegative: allowNegative ?? true,
@@ -580,6 +670,7 @@ function BaseFormField({ config, control, readOnly = false, form }) {
                                 className: styleInput,
                                 disabled: disabled
                             }), /*#__PURE__*/ React.createElement(NumericFormat, {
+                                id: name,
                                 placeholder: "Máximo",
                                 value: field.value?.max ?? "",
                                 allowNegative: allowNegative ?? true,
@@ -615,31 +706,45 @@ function BaseFormField({ config, control, readOnly = false, form }) {
                                     label: opt.label,
                                     value: String(opt.value)
                                 }) || [];
+                            const typedValue = Array.isArray(field.value) ? field.value.map(String) : [];
                             return /*#__PURE__*/ React.createElement("div", {
-                                id: name,
                                 tabIndex: -1,
                                 className: "outline-none"
                             }, /*#__PURE__*/ React.createElement(MultiSelect, {
+                                id: name,
                                 options: multiSelectOptions,
-                                onValueChange: field.onChange,
-                                defaultValue: field.value,
-                                value: field.value,
+                                onValueChange: (val)=>{
+                                    if (multiSelectConfig?.valueType === "number") {
+                                        field.onChange(val.map(Number));
+                                    } else {
+                                        field.onChange(val);
+                                    }
+                                },
+                                defaultValue: typedValue,
+                                value: typedValue,
                                 placeholder: placeholder,
                                 variant: "default",
                                 maxCount: multiSelectConfig?.maxCount,
                                 subtle: multiSelectConfig?.subtle,
-                                className: isError && styleInputError
+                                messageEmpty: multiSelectConfig?.emptyMessage,
+                                searchPlaceholder: multiSelectConfig?.searchPlaceholder,
+                                groupHeading: multiSelectConfig?.groupHeading,
+                                normalizeSearch: multiSelectConfig?.normalizeSearch,
+                                className: isError && styleInputError,
+                                disabled: disabled
                             }));
                         }
                     default:
                         return null;
                 }
-            })()), type !== "checkbox" && description && !isError && /*#__PURE__*/ React.createElement(FormDescription, null, description), /*#__PURE__*/ React.createElement(FormMessage, null));
+            })())), inlineElement && /*#__PURE__*/ React.createElement("div", {
+                className: "shrink-0"
+            }, inlineElement)), type !== "checkbox" && description && !isError && /*#__PURE__*/ React.createElement(FormDescription, null, description), /*#__PURE__*/ React.createElement(FormMessage, null));
         }
     });
 }
 BaseFormField.displayName = "BaseFormField";
-function FormLayout({ form, sections, onSubmit, onError, formId, title, description, headerContent, readOnly = false, formRef }) {
+function FormLayout({ form, sections, onSubmit, onError, formId, title, description, headerContent, readOnly = false, formRef, children, stepNavigator }) {
     const getColSpanClass = (cols)=>{
         if (!cols || cols === 1) return "col-span-12 md:col-span-6 xl:col-span-4";
         if (cols === 2) return "col-span-12 md:col-span-12 xl:col-span-8";
@@ -651,7 +756,7 @@ function FormLayout({ form, sections, onSubmit, onError, formId, title, descript
         onSubmit: form.handleSubmit(onSubmit, onError),
         id: formId,
         ref: formRef,
-        className: "relative space-y-8 px-1"
+        className: "relative space-y-8"
     }, (title || description) && /*#__PURE__*/ React.createElement("div", {
         className: "mb-6 space-y-2"
     }, /*#__PURE__*/ React.createElement("div", {
@@ -660,7 +765,7 @@ function FormLayout({ form, sections, onSubmit, onError, formId, title, descript
         className: "text-xl font-semibold tracking-tight"
     }, title), description && /*#__PURE__*/ React.createElement("p", {
         className: "text-muted-foreground text-sm"
-    }, description)), headerContent)), sections.map((section, idx)=>/*#__PURE__*/ React.createElement("div", {
+    }, description)), headerContent)), children, sections?.map((section, idx)=>/*#__PURE__*/ React.createElement("div", {
             key: section.title ? `${section.title}-${idx}` : `section-${idx}`,
             className: "space-y-4"
         }, (section.title || section.description) && /*#__PURE__*/ React.createElement("div", {
@@ -677,10 +782,10 @@ function FormLayout({ form, sections, onSubmit, onError, formId, title, descript
                 control: form.control,
                 readOnly: readOnly,
                 form: form
-            }))))))) : /*#__PURE__*/ React.createElement("div", {
+            })))))), stepNavigator) : /*#__PURE__*/ React.createElement("div", {
         id: formId,
         className: "relative space-y-8 px-1"
-    }, sections.map((section, idx)=>/*#__PURE__*/ React.createElement("div", {
+    }, children, sections?.map((section, idx)=>/*#__PURE__*/ React.createElement("div", {
             key: section.title ? `${section.title}-${idx}` : `section-${idx}`,
             className: "space-y-4"
         }, (section.title || section.description) && /*#__PURE__*/ React.createElement("div", {
@@ -697,7 +802,7 @@ function FormLayout({ form, sections, onSubmit, onError, formId, title, descript
                 control: form.control,
                 readOnly: readOnly,
                 form: form
-            }))))))));
+            })))))), stepNavigator));
 }
 FormLayout.displayName = "FormLayout";