ivt 0.7.6 → 0.7.7

package/dist/form-layout/index.mjs

@@ -1,64 +1,69 @@
 import * as React from 'react';
-import { useId, useState, useEffect } from 'react';
-import { P as PatternFormat, N as NumericFormat } from '../chunks/react-number-format.es-C3uDZhRo.mjs';
-import { c as cn } from '../chunks/utils-uOfHPBdi.mjs';
-import { f as formatDateToBrazilian, p as ptBR } from '../chunks/date-Y_hKMQVr.mjs';
-import { f as formatMoney } from '../chunks/format-numbers-CWj9Vf7x.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-BAxhKbgh.mjs';
-import { T as Toggle } from '../chunks/toggle-GXtKRhvr.mjs';
-import { I as InputOTP, a as InputOTPGroup, b as InputOTPSlot } from '../chunks/input-otp-BKqdZwNx.mjs';
-import { S as Slider } from '../chunks/slider-CaliGouI.mjs';
-import { R as RadioGroup, a as RadioGroupItem } from '../chunks/radio-group-yF1QEewC.mjs';
-import { S as Switch } from '../chunks/switch-szutUcvb.mjs';
-import { c as createLucideIcon } from '../chunks/createLucideIcon-CkP7424r.mjs';
-import { A as AutoComplete } from '../chunks/AutoComplete-BpwnFm_u.mjs';
-import { L as ListItem } from '../chunks/ListItem-B0_5JcsU.mjs';
-import { C as Checkbox } from '../chunks/checkbox-CvaPsjy3.mjs';
-import { P as Popover, a as PopoverTrigger, b as PopoverContent } from '../chunks/popover-D3JC54Y3.mjs';
-import { B as Button } from '../chunks/button-BW9I4XWU.mjs';
-import { f as format } from '../chunks/format-CR4Q6BSq.mjs';
-import { C as Calendar$1 } from '../chunks/calendar-C549VT55.mjs';
-import { S as Select, h as SelectTrigger, i as SelectValue, a as SelectContent, c as SelectItem } from '../chunks/select-B8JYuJE5.mjs';
-import { I as Input } from '../chunks/input-YpoAHnXb.mjs';
-import { S as Separator } from '../chunks/separator-sWF5eZgM.mjs';
-import '../chunks/bundle-mjs-BRbxNcQb.mjs';
+import { useId, useState, useRef, useEffect } from 'react';
+import { N as NumericFormat, P as PatternFormat } from '../chunks/react-number-format.es-BN_RzQtV.mjs';
+import { M as MultiSelect } from '../chunks/multi-select-CN3aRFMh.mjs';
+import { c as cn } from '../chunks/utils-DnvLjiIj.mjs';
+import { f as formatDateToBrazilian, p as ptBR } from '../chunks/date-ClgZoeOx.mjs';
+import { f as formatMoney, s as styleInputError, a as styleInput } from '../chunks/format-numbers-Ds4Usx3O.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-itZyV1Dd.mjs';
+import { C as CalendarRange } from '../chunks/CalendarRange-C1JaC0NH.mjs';
+import { T as Toggle } from '../chunks/toggle-FD-Jw2xC.mjs';
+import { I as InputOTP, a as InputOTPGroup, b as InputOTPSlot } from '../chunks/input-otp-WMzsnf2P.mjs';
+import { S as Slider } from '../chunks/slider-BMHrznD3.mjs';
+import { R as RadioGroup, a as RadioGroupItem } from '../chunks/radio-group-Dmw7n5e7.mjs';
+import { S as Switch } from '../chunks/switch-D_AtRQaE.mjs';
+import { c as createLucideIcon } from '../chunks/createLucideIcon-IJTsyy04.mjs';
+import { A as AutoComplete } from '../chunks/AutoComplete-CwXFZyHj.mjs';
+import { L as ListItem } from '../chunks/ListItem-lXygMzwt.mjs';
+import { L as Label } from '../chunks/label-BExccyIB.mjs';
+import { C as Checkbox } from '../chunks/checkbox-D0AQLtly.mjs';
+import { P as Popover, a as PopoverTrigger, b as PopoverContent } from '../chunks/popover-5o_1oulo.mjs';
+import { B as Button } from '../chunks/button-BtEUUk_h.mjs';
+import { f as format } from '../chunks/format-rKG7bR7-.mjs';
+import { C as Calendar$1 } from '../chunks/calendar-CzCHYS3Z.mjs';
+import { S as Select, h as SelectTrigger, i as SelectValue, a as SelectContent, c as SelectItem } from '../chunks/select-CQwHSTHT.mjs';
+import { I as Input } from '../chunks/input-NkOFiDdw.mjs';
+import { T as Textarea } from '../chunks/textarea-BcmwRML8.mjs';
+import { S as Separator } from '../chunks/separator-CFkfEDOC.mjs';
+import 'class-variance-authority';
+import '../chunks/x-CKkn5Jb1.mjs';
+import '../chunks/chevrons-up-down-Cvh-L0Ad.mjs';
+import '../chunks/check-CppcZQPE.mjs';
+import '../chunks/wand-sparkles-BYe6ab0J.mjs';
+import '../chunks/badge-0b82aTVL.mjs';
 import '@radix-ui/react-slot';
-import '../chunks/label-D5s6d0et.mjs';
+import '../chunks/tooltip-DpEs9Uln.mjs';
+import '../chunks/index-bhfoRF9s.mjs';
 import 'react-dom';
 import 'react/jsx-runtime';
-import '../chunks/index-DLqxy-dg.mjs';
-import '../chunks/index-D2DYiX9D.mjs';
-import '../chunks/index-4pJ77hyF.mjs';
-import 'class-variance-authority';
-import '../chunks/index-oX_tk439.mjs';
-import '../chunks/index-CVjOpozG.mjs';
-import '../chunks/index-D_Q4NGnO.mjs';
-import '../chunks/index-D8mA4n7w.mjs';
-import '../chunks/index-DhI6OG_H.mjs';
+import '../chunks/index-b6LGpn-D.mjs';
+import '../chunks/index-CO8BD2gK.mjs';
+import '../chunks/index-B2h5mEFW.mjs';
+import '../chunks/index-BSMFZq7D.mjs';
+import '../chunks/index-BYHg2bm1.mjs';
+import '../chunks/index-D_0BjrgS.mjs';
+import '../chunks/index-C9nN2J3_.mjs';
+import '../chunks/index-U9iegIVd.mjs';
+import '../chunks/index-CcOAET5X.mjs';
+import '../chunks/index-CAQFO5pv.mjs';
+import '../chunks/index-BqGZCpIk.mjs';
+import '../chunks/command-BAV_ZM-u.mjs';
+import '../chunks/index-B4gr9hob.mjs';
+import '../chunks/index-CeAVvwQy.mjs';
+import '../chunks/tslib.es6-BBSUcSv5.mjs';
+import '../chunks/dialog-DtOWs7bR.mjs';
+import '../chunks/bundle-mjs-sQO1296o.mjs';
+import '../chunks/calendar-days-CRvU4N4b.mjs';
+import '../chunks/index-Bp-UT0u_.mjs';
+import '../chunks/index-B8A26Y89.mjs';
+import '../chunks/index-VoloYtJc.mjs';
 import '@radix-ui/react-collection';
-import '../chunks/index-CS2Lzoed.mjs';
-import '../chunks/index-Dp_0m03a.mjs';
-import '../chunks/index-Cs9A0tpU.mjs';
-import '../chunks/index-CByz7d8q.mjs';
-import '../chunks/check-CKdwsuVA.mjs';
-import '../chunks/index.module-Df4mRjmZ.mjs';
-import '../chunks/x-D5HL_X5m.mjs';
-import '../chunks/chevrons-up-down-BSIPdamI.mjs';
-import '../chunks/command-B29vdoVO.mjs';
-import '../chunks/index-Bt1elORc.mjs';
-import '../chunks/index-CvVBB5ll.mjs';
-import '../chunks/index-D_e6adwb.mjs';
-import '../chunks/tslib.es6-B20VGjW7.mjs';
-import '../chunks/index-DQD35Ges.mjs';
-import '../chunks/dialog-BhaHMQnG.mjs';
-import '../chunks/TooltipIndicator-Db1poSJI.mjs';
-import '../chunks/tooltip-z43eMlPO.mjs';
-import '../chunks/index-DCDDoDjL.mjs';
-import '../chunks/index-Ct610FOk.mjs';
-import '../chunks/badge-CsUuqHNu.mjs';
-import '../chunks/chevron-left-BZ8X7kLy.mjs';
-import '../chunks/chevron-right-jAScR3zY.mjs';
-import '../chunks/chevron-down-o7NUBnJ4.mjs';
+import '../chunks/index-DjsX-naS.mjs';
+import '../chunks/index.module-cPd7xzY9.mjs';
+import '../chunks/TooltipIndicator-lfV17ijc.mjs';
+import '../chunks/chevron-left-KMSmVyA4.mjs';
+import '../chunks/chevron-right-BmRsffrg.mjs';
+import '../chunks/chevron-down-t-R0PXW2.mjs';
 import '@radix-ui/react-select';
 
 const __iconNode = [
@@ -135,39 +140,49 @@ const Calendar = createLucideIcon("Calendar", __iconNode);
     });
 }
 
-function AutocompleteFieldWrapper({ field, form, autocompleteConfig, placeholder, disabled }) {
+function AutocompleteFieldWrapper({ field, form, autocompleteConfig, placeholder, disabled, isError }) {
     const [open, setOpen] = useState(false);
-    // biome-ignore lint/suspicious/noExplicitAny: autocomplete option type
     const [selectedOption, setSelectedOption] = useState(null);
-    const getOptionLabel = autocompleteConfig.getOptionLabel || // biome-ignore lint/suspicious/noExplicitAny: autocomplete option type
-    ((option)=>option.label || String(option.id));
-    const getOptionKey = autocompleteConfig.getOptionKey || // biome-ignore lint/suspicious/noExplicitAny: autocomplete option type
-    ((option)=>option.id);
-    const getOptionValue = autocompleteConfig.getOptionValue || // biome-ignore lint/suspicious/noExplicitAny: autocomplete option type
-    ((option)=>option.id);
+    const selectedOptionRef = useRef(null);
+    const getOptionLabel = autocompleteConfig.getOptionLabel || ((option)=>option.label || String(option.id));
+    const getOptionKey = autocompleteConfig.getOptionKey || ((option)=>option.id);
+    const getOptionValue = autocompleteConfig.getOptionValue || ((option)=>option.id);
     useEffect(()=>{
+        if (selectedOptionRef.current && field.value) {
+            const currentValue = getOptionValue(selectedOptionRef.current);
+            if (currentValue === field.value) {
+                return;
+            }
+        }
         if (field.value && autocompleteConfig.fetchOptions) {
-            const searchTerm = typeof field.value === "string" ? field.value : "";
+            const isNumericValue = typeof field.value === "number";
+            const searchTerm = isNumericValue ? "" : field.value;
             autocompleteConfig.fetchOptions(searchTerm).then((options)=>{
-                let found = options.find((opt)=>getOptionValue(opt) === field.value);
-                if (!found && typeof field.value === "string") {
-                    found = options.find((opt)=>{
-                        const label = getOptionLabel(opt);
-                        return label === field.value || label.toLowerCase().includes(field.value.toLowerCase());
-                    });
-                }
-                if (!found && typeof field.value === "number") {
+                let found = null;
+                if (isNumericValue) {
                     found = options.find((opt)=>getOptionKey(opt) === field.value);
+                } else {
+                    found = options.find((opt)=>getOptionValue(opt) === field.value);
+                    if (!found) {
+                        found = options.find((opt)=>{
+                            const label = getOptionLabel(opt);
+                            return label === field.value || label.toLowerCase().includes(field.value.toLowerCase());
+                        });
+                    }
                 }
                 if (found) {
+                    selectedOptionRef.current = found;
                     setSelectedOption(found);
                 } else {
+                    selectedOptionRef.current = null;
                     setSelectedOption(null);
                 }
             }).catch(()=>{
+                selectedOptionRef.current = null;
                 setSelectedOption(null);
             });
-        } else {
+        } else if (!field.value) {
+            selectedOptionRef.current = null;
             setSelectedOption(null);
         }
     }, [
@@ -179,10 +194,10 @@ function AutocompleteFieldWrapper({ field, form, autocompleteConfig, placeholder
     ]);
     return /*#__PURE__*/ React.createElement(AutoComplete, {
         value: selectedOption,
-        // biome-ignore lint/suspicious/noExplicitAny: autocomplete option type
         onChange: (option)=>{
             const value = option ? getOptionValue(option) : null;
             field.onChange(value);
+            selectedOptionRef.current = option;
             setSelectedOption(option);
             if (option && autocompleteConfig.onChangeCallback) {
                 autocompleteConfig.onChangeCallback(option, form);
@@ -197,13 +212,13 @@ function AutocompleteFieldWrapper({ field, form, autocompleteConfig, placeholder
         messageEmpty: autocompleteConfig.messageEmpty || "Nenhum resultado encontrado...",
         getOptionLabel: getOptionLabel,
         getOptionKey: getOptionKey,
-        clearable: autocompleteConfig.clearable ?? false,
-        className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+        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)
     });
 }
 function BaseFormField({ config, control, readOnly = false, form }) {
     const baseId = useId();
-    const { name, label, type, placeholder, description, required, options, decimalScale, disabled, prefix, radioOptions, otpLength, sliderRange, format: patternFormat, mask, autocompleteConfig, render: customRender } = config;
+    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 formatReadOnlyValue = (value, fieldType)=>{
         if (value === null || value === undefined || value === "") {
             return undefined;
@@ -249,6 +264,46 @@ function BaseFormField({ config, control, readOnly = false, form }) {
                 return String(value);
             case "slider":
                 return typeof value === "number" ? String(value) : undefined;
+            case "numberRange":
+                {
+                    if (typeof value === "object" && value !== null && ("min" in value || "max" in value)) {
+                        const range = value;
+                        const minStr = range.min !== null && range.min !== undefined ? range.min.toLocaleString("pt-BR", {
+                            minimumFractionDigits: decimalScale ?? 0,
+                            maximumFractionDigits: decimalScale ?? 7
+                        }) : "";
+                        const maxStr = range.max !== null && range.max !== undefined ? range.max.toLocaleString("pt-BR", {
+                            minimumFractionDigits: decimalScale ?? 0,
+                            maximumFractionDigits: decimalScale ?? 7
+                        }) : "";
+                        if (minStr && maxStr) {
+                            return `${minStr} - ${maxStr}`;
+                        }
+                        if (minStr) return `Mín: ${minStr}`;
+                        if (maxStr) return `Máx: ${maxStr}`;
+                    }
+                    return undefined;
+                }
+            case "dateRange":
+                {
+                    if (typeof value === "object" && value !== null && "from" in value) {
+                        const range = value;
+                        if (range.from && range.to) {
+                            return `${formatDate(range.from)} - ${formatDate(range.to)}`;
+                        }
+                        if (range.from) {
+                            return `De: ${formatDate(range.from)}`;
+                        }
+                    }
+                    return undefined;
+                }
+            case "multiselect":
+                {
+                    if (Array.isArray(value) && value.length > 0) {
+                        return value.join(", ");
+                    }
+                    return undefined;
+                }
             default:
                 return String(value);
         }
@@ -257,7 +312,6 @@ function BaseFormField({ config, control, readOnly = false, form }) {
         return /*#__PURE__*/ React.createElement(FormField, {
             control: control,
             name: name,
-            // biome-ignore lint/suspicious/noExplicitAny: react-hook-form field type
             render: ({ field })=>/*#__PURE__*/ React.createElement(ListItem, {
                     title: label,
                     value: formatReadOnlyValue(field.value, type)
@@ -267,38 +321,59 @@ function BaseFormField({ config, control, readOnly = false, form }) {
     return /*#__PURE__*/ React.createElement(FormField, {
         control: control,
         name: name,
-        // biome-ignore lint/suspicious/noExplicitAny: react-hook-form field type
-        render: ({ field })=>{
+        render: ({ field, fieldState })=>{
+            const isError = fieldState?.invalid;
             if (customRender && form) {
                 return /*#__PURE__*/ React.createElement(FormItem, {
-                    className: type === "checkbox" ? "flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4" : ""
-                }, type !== "checkbox" && type !== "switch" && /*#__PURE__*/ React.createElement(FormLabel, null, label, " ", required && /*#__PURE__*/ React.createElement("span", {
+                    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: "text-destructive"
-                }, "*")), /*#__PURE__*/ React.createElement(FormControl, null, customRender({
+                }, "*"), ":"), /*#__PURE__*/ React.createElement(FormControl, {
+                    className: isError ? styleInputError : ""
+                }, customRender({
                     field,
                     form
                 })), type !== "checkbox" && description && /*#__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-x-3 space-y-0 rounded-md border p-4" : ""
-            }, type !== "checkbox" && type !== "switch" && /*#__PURE__*/ React.createElement(FormLabel, null, label, " ", required && /*#__PURE__*/ React.createElement("span", {
+                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: "text-destructive"
-            }, "*")), /*#__PURE__*/ React.createElement(FormControl, null, (()=>{
+            }, "*"), ":"), /*#__PURE__*/ React.createElement(FormControl, null, (()=>{
                 switch(type){
                     case "text":
                     case "email":
                     case "url":
                     case "tel":
-                        return /*#__PURE__*/ React.createElement(Input, {
+                        return /*#__PURE__*/ React.createElement("div", {
+                            className: "relative"
+                        }, /*#__PURE__*/ React.createElement(Input, {
                             ...field,
                             type: type,
                             placeholder: placeholder,
                             disabled: disabled,
-                            value: field.value || ""
-                        });
+                            maxLength: maxLength,
+                            value: field.value || "",
+                            className: cn(isError ? styleInputError : "", endAdornment && "pr-20")
+                        }), endAdornment && /*#__PURE__*/ React.createElement("div", {
+                            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",
+                            onChange: (e)=>{
+                                const file = e.target.files?.[0] || null;
+                                field.onChange(file);
+                            },
+                            className: "cursor-pointer file:cursor-pointer",
+                            accept: fileConfig?.accept,
+                            disabled: disabled
+                        }));
                     case "textarea":
-                        return /*#__PURE__*/ React.createElement("textarea", {
-                            className: "flex min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+                        return /*#__PURE__*/ React.createElement(Textarea, {
+                            className: cn("min-h-20", isError && styleInputError),
                             ...field,
                             placeholder: placeholder,
                             disabled: disabled,
@@ -319,7 +394,8 @@ function BaseFormField({ config, control, readOnly = false, form }) {
                                 }
                             },
                             placeholder: placeholder,
-                            disabled: disabled
+                            disabled: disabled,
+                            className: isError ? styleInputError : ""
                         });
                     case "currency":
                         return /*#__PURE__*/ React.createElement(NumericFormat, {
@@ -337,7 +413,8 @@ function BaseFormField({ config, control, readOnly = false, form }) {
                             },
                             placeholder: placeholder,
                             disabled: disabled,
-                            prefix: prefix ?? "R$ "
+                            prefix: prefix ?? "R$ ",
+                            className: isError ? styleInputError : ""
                         });
                     case "pattern":
                         return /*#__PURE__*/ React.createElement(PatternFormat, {
@@ -349,7 +426,8 @@ function BaseFormField({ config, control, readOnly = false, form }) {
                             value: field.value || "",
                             onValueChange: (values)=>{
                                 field.onChange(values.value);
-                            }
+                            },
+                            className: isError ? styleInputError : ""
                         });
                     case "select":
                         {
@@ -359,11 +437,11 @@ function BaseFormField({ config, control, readOnly = false, form }) {
                                 value: selectValue,
                                 disabled: disabled
                             }, /*#__PURE__*/ React.createElement(FormControl, null, /*#__PURE__*/ React.createElement(SelectTrigger, {
-                                className: "w-full"
+                                className: cn("w-full", isError && styleInputError)
                             }, /*#__PURE__*/ React.createElement(SelectValue, {
                                 placeholder: placeholder || "Selecione"
                             }))), /*#__PURE__*/ React.createElement(SelectContent, {
-                                className: "max-h-[300px] overflow-y-auto overflow-x-hidden"
+                                className: "max-h-[300px] 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;
@@ -379,7 +457,7 @@ function BaseFormField({ config, control, readOnly = false, form }) {
                         }, /*#__PURE__*/ React.createElement(Button, {
                             variant: "outline",
                             disabled: disabled,
-                            className: cn("w-full justify-start text-left font-normal", !field.value && "text-muted-foreground")
+                            className: cn("w-full justify-start text-left font-normal", !field.value && "text-muted-foreground", isError && styleInputError)
                         }, /*#__PURE__*/ React.createElement(Calendar, {
                             className: "mr-2 h-4 w-4"
                         }), field.value ? format(new Date(field.value), "dd/MM/yyyy", {
@@ -415,16 +493,18 @@ function BaseFormField({ config, control, readOnly = false, form }) {
                             onValueChange: field.onChange,
                             className: "flex flex-col gap-2",
                             disabled: disabled ?? false
-                        }, (radioOptions ?? [])?.map((opt)=>/*#__PURE__*/ React.createElement("div", {
+                        }, (radioOptions ?? [])?.map((opt)=>{
+                            const radioId = `${String(name)}-${opt.value}`;
+                            return /*#__PURE__*/ React.createElement("div", {
                                 key: opt.value,
                                 className: "flex items-center gap-2"
                             }, /*#__PURE__*/ React.createElement(RadioGroupItem, {
                                 value: opt.value,
-                                id: `${String(name)}-${opt.value}`
-                            }), /*#__PURE__*/ React.createElement("label", {
-                                htmlFor: `${String(name)}-${opt.value}`,
-                                className: "text-sm"
-                            }, opt.label))));
+                                id: radioId
+                            }), /*#__PURE__*/ React.createElement(Label, {
+                                htmlFor: radioId
+                            }, opt.label));
+                        }));
                     case "slider":
                         return /*#__PURE__*/ React.createElement("div", {
                             className: "space-y-2"
@@ -438,7 +518,7 @@ function BaseFormField({ config, control, readOnly = false, form }) {
                             step: sliderRange?.step ?? 1,
                             disabled: disabled
                         }), typeof field.value === "number" && /*#__PURE__*/ React.createElement("p", {
-                            className: "text-xs text-muted-foreground"
+                            className: "text-muted-foreground text-xs"
                         }, "Valor: ", field.value));
                     case "otp":
                         return /*#__PURE__*/ React.createElement(InputOTP, {
@@ -448,9 +528,12 @@ function BaseFormField({ config, control, readOnly = false, form }) {
                             disabled: disabled
                         }, /*#__PURE__*/ React.createElement(InputOTPGroup, null, Array.from({
                             length: otpLength ?? 6
-                        }, (_, i)=>/*#__PURE__*/ React.createElement(InputOTPSlot, {
-                                key: `${baseId}-otp-${i}`,
+                        }, (_, i)=>({
+                                id: `${baseId}-otp-${i}`,
                                 index: i
+                            })).map((slot)=>/*#__PURE__*/ React.createElement(InputOTPSlot, {
+                                key: slot.id,
+                                index: slot.index
                             }))));
                     case "toggle":
                         return /*#__PURE__*/ React.createElement("div", {
@@ -458,7 +541,8 @@ function BaseFormField({ config, control, readOnly = false, form }) {
                         }, /*#__PURE__*/ React.createElement(Toggle, {
                             pressed: !!field.value,
                             onPressedChange: (pressed)=>field.onChange(pressed),
-                            disabled: disabled
+                            disabled: disabled,
+                            className: cn(isError && styleInputError)
                         }, label));
                     case "autocomplete":
                         {
@@ -470,7 +554,102 @@ function BaseFormField({ config, control, readOnly = false, form }) {
                                 form: form,
                                 autocompleteConfig: autocompleteConfig,
                                 placeholder: placeholder,
+                                disabled: disabled,
+                                isError: isError
+                            });
+                        }
+                    case "dateRange":
+                        {
+                            return /*#__PURE__*/ React.createElement(CalendarRange, {
+                                numberOfMonths: 2,
+                                value: field.value,
+                                onChange: (value)=>{
+                                    field.onChange(value);
+                                    if (form) {
+                                        setTimeout(()=>{
+                                            form.trigger([
+                                                name
+                                            ]);
+                                        }, 0);
+                                    }
+                                },
+                                placeholder: placeholder,
+                                className: cn("h-10 w-full", isError && styleInputError),
+                                disabled: disabled || dateConfig?.disabledDate,
+                                disabledDateTooltip: dateConfig?.disabledDateTooltip
+                            });
+                        }
+                    case "numberRange":
+                        {
+                            return /*#__PURE__*/ React.createElement("div", {
+                                className: "flex gap-2"
+                            }, /*#__PURE__*/ React.createElement(NumericFormat, {
+                                placeholder: "Mínimo",
+                                value: field.value?.min ?? "",
+                                allowNegative: allowNegative ?? true,
+                                allowLeadingZeros: false,
+                                maxLength: undefined,
+                                decimalSeparator: ",",
+                                thousandSeparator: ".",
+                                decimalScale: decimalScale ?? 8,
+                                fixedDecimalScale: false,
+                                onValueChange: (values)=>{
+                                    const numericValue = values.floatValue ?? null;
+                                    field.onChange({
+                                        ...field.value ?? {
+                                            min: null,
+                                            max: null
+                                        },
+                                        min: numericValue
+                                    });
+                                },
+                                className: styleInput,
                                 disabled: disabled
+                            }), /*#__PURE__*/ React.createElement(NumericFormat, {
+                                placeholder: "Máximo",
+                                value: field.value?.max ?? "",
+                                allowNegative: allowNegative ?? true,
+                                allowLeadingZeros: false,
+                                maxLength: undefined,
+                                decimalSeparator: ",",
+                                thousandSeparator: ".",
+                                decimalScale: decimalScale ?? 8,
+                                fixedDecimalScale: false,
+                                onValueChange: (values)=>{
+                                    const numericValue = values.floatValue ?? null;
+                                    field.onChange({
+                                        ...field.value ?? {
+                                            min: null,
+                                            max: null
+                                        },
+                                        max: numericValue
+                                    });
+                                },
+                                className: styleInput,
+                                disabled: disabled
+                            }));
+                        }
+                    case "multiselect":
+                        {
+                            const multiSelectOptions = items?.map((item)=>({
+                                    label: item,
+                                    value: item
+                                })) || options?.map((opt)=>typeof opt === "string" ? {
+                                    label: opt,
+                                    value: opt
+                                } : {
+                                    label: opt.label,
+                                    value: String(opt.value)
+                                }) || [];
+                            return /*#__PURE__*/ React.createElement(MultiSelect, {
+                                options: multiSelectOptions,
+                                onValueChange: field.onChange,
+                                defaultValue: field.value,
+                                value: field.value,
+                                placeholder: placeholder,
+                                variant: "default",
+                                maxCount: multiSelectConfig?.maxCount,
+                                subtle: multiSelectConfig?.subtle
                             });
                         }
                     default:
@@ -493,11 +672,11 @@ function FormLayout({ form, sections, onSubmit, onError, formId, title, descript
         onSubmit: form.handleSubmit(onSubmit, onError),
         id: formId,
         ref: formRef,
-        className: "space-y-8 relative px-1"
+        className: "relative space-y-8 px-1"
     }, (title || description) && /*#__PURE__*/ React.createElement("div", {
-        className: "space-y-2 mb-6"
+        className: "mb-6 space-y-2"
     }, /*#__PURE__*/ React.createElement("div", {
-        className: "flex justify-between items-start"
+        className: "flex items-start justify-between"
     }, /*#__PURE__*/ React.createElement("div", null, title && /*#__PURE__*/ React.createElement("h2", {
         className: "text-xl font-semibold tracking-tight"
     }, title), description && /*#__PURE__*/ React.createElement("p", {
@@ -521,7 +700,7 @@ function FormLayout({ form, sections, onSubmit, onError, formId, title, descript
                 form: form
             }))))))) : /*#__PURE__*/ React.createElement("div", {
         id: formId,
-        className: "space-y-8 relative px-1"
+        className: "relative space-y-8 px-1"
     }, sections.map((section, idx)=>/*#__PURE__*/ React.createElement("div", {
             key: section.title ? `${section.title}-${idx}` : `section-${idx}`,
             className: "space-y-4"