ivt 0.8.6 → 0.8.7

package/dist/form-layout/index.mjs

@@ -1,72 +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-BJ890ESD.mjs';
-import { M as MultiSelect } from '../chunks/multi-select-DocC2zjT.mjs';
-import { c as cn } from '../chunks/utils-CPJ225se.mjs';
-import { f as formatDateToBrazilian } from '../chunks/date-DHdJpggz.mjs';
-import { f as formatMoney } from '../chunks/format-numbers-CB_euyLQ.mjs';
-import { s as styleInputError, a as styleInput } from '../chunks/styles-TJifgkC0.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-DnPCp-Jr.mjs';
-import { C as CalendarRange } from '../chunks/CalendarRange-CbhXjWnp.mjs';
-import { T as Toggle } from '../chunks/toggle-BKFdE2bV.mjs';
-import { I as InputOTP, a as InputOTPGroup, b as InputOTPSlot } from '../chunks/input-otp-CtjuBqi3.mjs';
-import { S as Slider } from '../chunks/slider-B3vRKZLc.mjs';
-import { R as RadioGroup, a as RadioGroupItem } from '../chunks/radio-group-Cv9s2DCN.mjs';
-import { S as Switch } from '../chunks/switch-QvQzfy42.mjs';
-import { C as CalendarPopover, A as AutoComplete } from '../chunks/CalendarPopover-Dk28a8Qn.mjs';
-import { I as InputFile } from '../chunks/input-file-DM9pEX8i.mjs';
-import { L as ListItem } from '../chunks/ListItem-CoWJkU9U.mjs';
-import { L as Label } from '../chunks/label-B9lRzjyu.mjs';
-import { C as Checkbox } from '../chunks/checkbox-KwWS11aZ.mjs';
-import { S as Select, h as SelectTrigger, i as SelectValue, a as SelectContent, c as SelectItem } from '../chunks/select-H7CGuPw0.mjs';
-import { I as Input } from '../chunks/input-DIpq60B2.mjs';
-import { T as Textarea } from '../chunks/textarea-DYiDaInd.mjs';
-import { S as Separator } from '../chunks/separator-NkxldVGm.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-C2RTSdrs.mjs';
-import '../chunks/createLucideIcon-BxEkCUha.mjs';
-import '../chunks/chevrons-up-down-DOPAGbXb.mjs';
-import '../chunks/check-BcL3DXZb.mjs';
-import '../chunks/wand-sparkles-DgnbuUXs.mjs';
-import '../chunks/popover-n7Qp5Vuh.mjs';
-import '../chunks/index-DjAgghT8.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-BQoxzJyp.mjs';
-import '../chunks/index-alSGOasi.mjs';
-import '../chunks/index-Dg_RIZZE.mjs';
-import '../chunks/index-uXbHxUHA.mjs';
-import '../chunks/tslib.es6-DhTbpVFO.mjs';
-import '../chunks/index-CHk809FF.mjs';
-import '../chunks/index-DVCjbhNa.mjs';
-import '../chunks/index-B61q0y1M.mjs';
-import '../chunks/index-Cwb07MWH.mjs';
-import '../chunks/index-DxIif-Dg.mjs';
-import '../chunks/index-Ct3MZwaI.mjs';
-import '../chunks/index-DHft9BCd.mjs';
-import '../chunks/button-ipHWqubg.mjs';
-import '../chunks/badge-B6L7PP2k.mjs';
-import '../chunks/tooltip-CAFwKDsn.mjs';
-import '../chunks/index-BcMUIxgo.mjs';
-import '../chunks/command-D6Om1YRG.mjs';
-import '../chunks/index-B2krUfsE.mjs';
-import '../chunks/dialog-DBzJ_Uvh.mjs';
-import '../chunks/bundle-mjs-BUGtC8WI.mjs';
-import '../chunks/format-DWYRGSuv.mjs';
-import '../chunks/calendar-days-CYxfkz0x.mjs';
-import '../chunks/calendar-bYikS8Dj.mjs';
-import '../chunks/chevron-left-alk1ZJbf.mjs';
-import '../chunks/chevron-right-C4T232LB.mjs';
-import '../chunks/chevron-down-VVHD7dC4.mjs';
-import '../chunks/index-8SOlbV6d.mjs';
-import '../chunks/index-C7fGMq_n.mjs';
-import '../chunks/index-DhPL9ENz.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-B2dOt1gw.mjs';
-import '../chunks/index.module-B0Ca3Gdk.mjs';
-import '../chunks/loader-circle-CV4eu4xA.mjs';
-import '../chunks/TooltipIndicator-BHCKFiPx.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';
 
 /**
@@ -117,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;
@@ -180,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-9 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, className, 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);
@@ -271,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);
         }
@@ -280,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)
                 })
         });
@@ -292,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",
@@ -301,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",
@@ -318,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":
@@ -353,7 +393,7 @@ function BaseFormField({ config, control, readOnly = false, form }) {
                         });
                     case "textarea":
                         return /*#__PURE__*/ React.createElement(Textarea, {
-                            className: cn("min-h-20", className, isError && styleInputError),
+                            className: cn("min-h-20", isError && styleInputError),
                             ...field,
                             placeholder: placeholder,
                             disabled: disabled,
@@ -362,6 +402,7 @@ function BaseFormField({ config, control, readOnly = false, form }) {
                         });
                     case "number":
                         return /*#__PURE__*/ React.createElement(NumericFormat, {
+                            id: name,
                             customInput: Input,
                             decimalSeparator: ",",
                             thousandSeparator: ".",
@@ -376,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: ".",
@@ -395,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, {
@@ -416,7 +458,8 @@ 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)
@@ -435,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,
@@ -443,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
@@ -530,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)=>{
@@ -551,9 +638,8 @@ function BaseFormField({ config, control, readOnly = false, form }) {
                                 },
                                 placeholder: placeholder,
                                 className: cn("h-9 w-full", isError && styleInputError),
-                                disabled: disabled || dateConfig?.disabledDate,
-                                disabledDateTooltip: dateConfig?.disabledDateTooltip,
-                                showQuickRanges: dateConfig?.showQuickRanges
+                                disabled: disabled || dateConfig?.disabled,
+                                ...dateConfig
                             }));
                         }
                     case "numberRange":
@@ -561,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,
@@ -583,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,
@@ -618,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";
@@ -654,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", {
@@ -663,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", {
@@ -680,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", {
@@ -700,7 +802,7 @@ function FormLayout({ form, sections, onSubmit, onError, formId, title, descript
                 control: form.control,
                 readOnly: readOnly,
                 form: form
-            }))))))));
+            })))))), stepNavigator));
 }
 FormLayout.displayName = "FormLayout";