shadcn-zod-formkit 1.23.2 → 1.24.0

package/dist/index.d.mts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import { ReactNode, JSX } from 'react';
 import * as react_hook_form from 'react-hook-form';
-import { UseFormReturn, FieldValues, FormState, FieldPath, ControllerProps } from 'react-hook-form';
+import { UseFormReturn, ControllerRenderProps, FieldValues, FormState, FieldPath, ControllerProps } from 'react-hook-form';
 import { ZodTypeAny, z, ZodObject } from 'zod';
 import { LucideProps } from 'lucide-react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
@@ -83,13 +83,14 @@ type FieldConfig<T, RT = Record<string, any>> = FieldProps<T, RT> | FieldConfig<
 interface FieldProps<T = Record<string, any>, RT = Record<string, any>> {
     name: keyof T;
     label: string;
+    withDuplicatTag?: boolean;
     onChange?: (...event: any[]) => void;
     tabLabelField?: string;
     childrenPosition?: 'up' | 'down';
     children?: ReactNode | ((item: any, index: number) => ReactNode);
     defaultValue?: any;
     direction?: 'row' | 'col';
-    repeaterFields?: FieldConfig<RT>;
+    repeaterFields?: Array<FieldProps<RT> | FieldProps<RT>[]>;
     minItems?: number;
     maxItems?: number;
     currencyFormat?: Intl.NumberFormatOptions;
@@ -199,6 +200,7 @@ declare const entityToInputOption: (entitiy: any, name?: string, description?: s
 declare const entitiesToInputOption: (data: any[], optionValue?: string, groupedLabel?: string) => InputOption[];
 declare const entityToGroupedOption: (entitiy: any, name?: string) => GroupedOption;
 declare const entitiesToGroupedOption: (data: any[], optionValue?: string) => GroupedOption[];
+declare const handleOnChage: (event: any[] | any, input: FieldProps, field?: ControllerRenderProps<FieldValues, string>) => void;
 
 type alertPositionType = 'up' | 'down';
 interface FormResp<T> {
@@ -454,4 +456,4 @@ declare function TooltipContent({ className, sideOffset, children, ...props }: R
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, type BtnConfig, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, ColorCnInput, type ColorCompProps, ColorInput, CustomAlert, DateInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, type FieldConfig, type FieldProps, FileInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormItem, FormLabel, FormMessage, type FormResp, type GroupedOption, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputOption, type InputSetup, InputTypes, Label, NumberInput, OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type Props, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Switch, SwitchInput, TextAreaInput, TextInput, TextInputType, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, inputFieldComp, mockFields, useFormField, validationMessages };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, type BtnConfig, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, ColorCnInput, type ColorCompProps, ColorInput, CustomAlert, DateInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, type FieldConfig, type FieldProps, FileInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormItem, FormLabel, FormMessage, type FormResp, type GroupedOption, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputOption, type InputSetup, InputTypes, Label, NumberInput, OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type Props, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Switch, SwitchInput, TextAreaInput, TextInput, TextInputType, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, handleOnChage, inputFieldComp, mockFields, useFormField, validationMessages };

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import { ReactNode, JSX } from 'react';
 import * as react_hook_form from 'react-hook-form';
-import { UseFormReturn, FieldValues, FormState, FieldPath, ControllerProps } from 'react-hook-form';
+import { UseFormReturn, ControllerRenderProps, FieldValues, FormState, FieldPath, ControllerProps } from 'react-hook-form';
 import { ZodTypeAny, z, ZodObject } from 'zod';
 import { LucideProps } from 'lucide-react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
@@ -83,13 +83,14 @@ type FieldConfig<T, RT = Record<string, any>> = FieldProps<T, RT> | FieldConfig<
 interface FieldProps<T = Record<string, any>, RT = Record<string, any>> {
     name: keyof T;
     label: string;
+    withDuplicatTag?: boolean;
     onChange?: (...event: any[]) => void;
     tabLabelField?: string;
     childrenPosition?: 'up' | 'down';
     children?: ReactNode | ((item: any, index: number) => ReactNode);
     defaultValue?: any;
     direction?: 'row' | 'col';
-    repeaterFields?: FieldConfig<RT>;
+    repeaterFields?: Array<FieldProps<RT> | FieldProps<RT>[]>;
     minItems?: number;
     maxItems?: number;
     currencyFormat?: Intl.NumberFormatOptions;
@@ -199,6 +200,7 @@ declare const entityToInputOption: (entitiy: any, name?: string, description?: s
 declare const entitiesToInputOption: (data: any[], optionValue?: string, groupedLabel?: string) => InputOption[];
 declare const entityToGroupedOption: (entitiy: any, name?: string) => GroupedOption;
 declare const entitiesToGroupedOption: (data: any[], optionValue?: string) => GroupedOption[];
+declare const handleOnChage: (event: any[] | any, input: FieldProps, field?: ControllerRenderProps<FieldValues, string>) => void;
 
 type alertPositionType = 'up' | 'down';
 interface FormResp<T> {
@@ -454,4 +456,4 @@ declare function TooltipContent({ className, sideOffset, children, ...props }: R
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, type BtnConfig, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, ColorCnInput, type ColorCompProps, ColorInput, CustomAlert, DateInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, type FieldConfig, type FieldProps, FileInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormItem, FormLabel, FormMessage, type FormResp, type GroupedOption, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputOption, type InputSetup, InputTypes, Label, NumberInput, OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type Props, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Switch, SwitchInput, TextAreaInput, TextInput, TextInputType, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, inputFieldComp, mockFields, useFormField, validationMessages };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, type BtnConfig, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, ColorCnInput, type ColorCompProps, ColorInput, CustomAlert, DateInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, type FieldConfig, type FieldProps, FileInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormItem, FormLabel, FormMessage, type FormResp, type GroupedOption, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputOption, type InputSetup, InputTypes, Label, NumberInput, OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type Props, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Switch, SwitchInput, TextAreaInput, TextInput, TextInputType, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, handleOnChage, inputFieldComp, mockFields, useFormField, validationMessages };

package/dist/index.mjs

@@ -194,6 +194,11 @@ var entitiesToGroupedOption = (data, optionValue = "name") => {
   }
   return entities;
 };
+var handleOnChage = (event, input, field) => {
+  console.log("\u{1F680} ~ handleOnChage ~ event:", event);
+  if (event) field?.onChange(event);
+  input.onChange?.(event);
+};
 
 // src/components/custom/form/inputs/base/definitions.ts
 var flattenFields = (fields) => {
@@ -1629,13 +1634,14 @@ var GroupedSwitches = ({ options, onChange, input, isSubmitting }) => {
     setAllChecked(checked);
     onChange?.(updated.filter((opt) => opt.checked));
   };
-  const handleChildToggle = (option, checked) => {
+  const handleChildToggle = (option, checked, input2) => {
     const updated = switches.map(
       (opt) => opt.id === option.id ? { ...opt, checked } : opt
     );
     setSwitches(updated);
     setAllChecked(updated.every((opt) => opt.checked));
     onChange?.(updated.filter((opt) => opt.checked));
+    handleOnChage(updated.filter((opt) => opt.checked), input2);
   };
   return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs("div", { className: cn(`w-full h-full space-y-4 p-4  border-2 rounded-xl bg-green-500 ${allChecked ? "bg-green-500/5 border-green-400/10" : "bg-black/5"}`), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b p-2", children: [
@@ -1653,7 +1659,7 @@ var GroupedSwitches = ({ options, onChange, input, isSubmitting }) => {
           disabled: input.disabled || isSubmitting,
           id: String(opt.id),
           checked: opt?.checked || false,
-          onCheckedChange: (checked) => handleChildToggle(opt, checked)
+          onCheckedChange: (checked) => handleChildToggle(opt, checked, input)
         }
       )
     ] }, opt.id))
@@ -1694,7 +1700,7 @@ var AccordionGroupedSwitches = ({ form, input, groups = [], onChange, isSubmitti
   const countCheckedByGroup = (group) => {
     return group.options.filter((opt) => opt.checked).length;
   };
-  const handleOptionChange = (field, updatedGroupLabel, updatedOptions) => {
+  const handleOptionChange = (field, updatedGroupLabel, updatedOptions, input2) => {
     const newGroups = groupsState.map(
       (group) => group.label === updatedGroupLabel ? { ...group, options: updatedOptions } : group
     );
@@ -1703,6 +1709,7 @@ var AccordionGroupedSwitches = ({ form, input, groups = [], onChange, isSubmitti
     setSelectedOptions(allChecked);
     field.onChange(allChecked);
     onChange?.(allChecked);
+    handleOnChage(allChecked, input2, field);
   };
   return /* @__PURE__ */ jsx(
     FormField,
@@ -1733,7 +1740,7 @@ var AccordionGroupedSwitches = ({ form, input, groups = [], onChange, isSubmitti
                     isSubmitting,
                     input,
                     options: group.options,
-                    onChange: (updated) => handleOptionChange(field, group.label, updated)
+                    onChange: (updated) => handleOptionChange(field, group.label, updated, input)
                   }
                 ) })
               ]
@@ -1798,7 +1805,10 @@ var FieldButtonGroup = ({ input, form, isSubmitting, className = "w-full flex-1"
       type: "button",
       className,
       variant: selectedValue === option.value ? "default" : "outline",
-      onClick: () => handleSelect(option.value),
+      onClick: () => {
+        handleSelect(option.value);
+        handleOnChage(option.value, input);
+      },
       disabled: isSubmitting,
       children: option.label ?? option.name
     },
@@ -1823,6 +1833,7 @@ var CheckListInput = class extends BaseInput {
           /* @__PURE__ */ jsx(
             Checkbox,
             {
+              onChange: (e) => handleOnChage(e, input),
               disabled: input.disabled || isSubmitting,
               id: String(item[optionValue]),
               checked: value.includes(item[optionValue]),
@@ -1874,7 +1885,7 @@ var FieldCheckbox = ({ input, form, isSubmitting }) => {
               {
                 id: input.name,
                 checked: field.value,
-                onCheckedChange: field.onChange,
+                onCheckedChange: (e) => handleOnChage(e, input, field),
                 disabled: input.disabled || isSubmitting,
                 className: "data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white \n                  dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700"
               }
@@ -1910,23 +1921,14 @@ var FieldColor = ({ form, input, isSubmitting }) => {
           ColorCmp,
           {
             value: field.value || "#000000",
-            onChange: field.onChange,
+            onChange: (event) => {
+              handleOnChage(event, input, field);
+            },
             onBlur: field.onBlur,
             disabled: input.disabled || isSubmitting,
             placeholder: input.placeHolder
           }
-        ) : /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "color",
-            value: field.value || "#000000",
-            onChange: (e) => field.onChange(e.target.value),
-            onBlur: () => field.onBlur(),
-            disabled: input.disabled || isSubmitting,
-            placeholder: input.placeHolder,
-            style: { width: 48, height: 28 }
-          }
-        ) }),
+        ) : "N/A" }),
         /* @__PURE__ */ jsx(FormDescription, { children: input.description }),
         /* @__PURE__ */ jsx(FormMessage, {})
       ] })
@@ -2147,6 +2149,7 @@ var FieldCombobox = ({ form, input, isSubmitting }) => {
                     const newValue = currentValue === value ? "" : currentValue;
                     setValue(newValue);
                     form.setValue(input.name, newValue);
+                    handleOnChage(options.find((o) => getValue(o) === newValue), input);
                     input.listConfig?.onOptionChange?.(
                       options.find((o) => getValue(o) === newValue)
                     );
@@ -2269,6 +2272,7 @@ var FieldCurrency = ({ form, input, isSubmitting }) => {
                   setRawValue(newVal);
                   const parsed = parseValue(newVal);
                   if (parsed !== null) field.onChange(parsed);
+                  handleOnChage(parsed, input, field);
                 },
                 onBlur: (e) => {
                   const formatted = formatValue(e.target.value);
@@ -3867,7 +3871,7 @@ var DateInput = class extends BaseInput {
           }, [field.value]);
           const handleSelect = (selectedDate) => {
             setDate(selectedDate);
-            field.onChange(selectedDate);
+            handleOnChage(selectedDate, input, field);
           };
           return /* @__PURE__ */ jsxs(FormItem, { children: [
             /* @__PURE__ */ jsx(FormLabel, { children: /* @__PURE__ */ jsx("b", { children: input.label }) }),
@@ -3957,7 +3961,10 @@ var FieldDateTimeInput = ({ form, input, isSubmitting }) => {
                 type: "datetime-local",
                 value: dateTime,
                 disabled: input.disabled || isSubmitting,
-                onChange: (e) => handleChange(e.target.value)
+                onChange: (e) => {
+                  handleOnChage(e.target.value, input, field);
+                  handleChange(e.target.value);
+                }
               }
             ),
             (iconsRight.length > 0 || textRight || autoValidate) && /* @__PURE__ */ jsxs(InputGroupAddon, { align: "inline-end", children: [
@@ -4017,6 +4024,7 @@ var FieldFile = ({ form, input, isSubmitting }) => {
               onChange: (e) => {
                 field.onChange(e.target.files?.[0]);
                 handleFileChange(e);
+                handleOnChage(e.target.files?.[0], input, field);
               }
             }
           ) }),
@@ -4300,7 +4308,10 @@ var FieldMultiSelect = ({ form, input, isSubmitting }) => {
                   return /* @__PURE__ */ jsxs(
                     CommandItem,
                     {
-                      onSelect: () => toggleOption(value),
+                      onSelect: () => {
+                        handleOnChage(value, input, field);
+                        toggleOption(value);
+                      },
                       children: [
                         /* @__PURE__ */ jsx(
                           Check,
@@ -4383,6 +4394,7 @@ var FieldTextGroup = ({ form, input, isSubmitting }) => {
                   if (isNumberField) {
                     value = e.target.value === "" ? "" : Number(e.target.value);
                   }
+                  handleOnChage(value, input, field);
                   field.onChange(value);
                 }
               }
@@ -4440,7 +4452,7 @@ var FieldOTP = ({ form, input, isSubmitting }) => {
       name: input.name,
       render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
         /* @__PURE__ */ jsx(FormLabel, { children: /* @__PURE__ */ jsx("b", { children: input.label }) }),
-        /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(InputOTP, { maxLength: totalPositions.length, ...field, children: /* @__PURE__ */ jsx(InputOTPGroup, { children: totalPositions.map((position) => /* @__PURE__ */ jsx(InputOTPSlot, { index: position }, position)) }) }) }),
+        /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(InputOTP, { maxLength: totalPositions.length, ...field, onChange: (event) => handleOnChage(event, input, field), children: /* @__PURE__ */ jsx(InputOTPGroup, { children: totalPositions.map((position) => /* @__PURE__ */ jsx(InputOTPSlot, { index: position }, position)) }) }) }),
         /* @__PURE__ */ jsx(FormDescription, { children: input.description }),
         /* @__PURE__ */ jsx(FormMessage, {})
       ] })
@@ -4481,7 +4493,7 @@ var FieldRadioGroup = ({ input, form, isSubmitting }) => {
           {
             ...field,
             value: field.value ?? "",
-            onValueChange: field.onChange,
+            onValueChange: (e) => handleOnChage(e, input, field),
             className: "space-y-2 mt-3",
             children: options.map((opt, index) => /* @__PURE__ */ jsxs(
               "div",
@@ -4833,7 +4845,7 @@ var FieldSelect = ({ form, input, isSubmitting }) => {
             {
               disabled: input.disabled || isSubmitting || loading,
               onValueChange: (val) => {
-                field.onChange(val);
+                handleOnChage(val, input, field);
                 setValue(val);
                 if (input.listConfig?.onOptionChange) {
                   const selectedItem = lista.find(
@@ -4877,7 +4889,7 @@ var SimpleCheckListInput = class extends BaseInput {
             isSubmitting,
             input,
             value: field.value || [],
-            onChange: field.onChange
+            onChange: (e) => handleOnChage(e, input, field)
           }
         )
       }
@@ -4899,12 +4911,14 @@ var FieldSimpleCheckList = ({ input, value, onChange, isSubmitting }) => {
   const handleMainToggle = (checked) => {
     const updated = options.map((opt) => ({ ...opt, checked }));
     setOptions(updated);
+    handleOnChage(updated, input);
     onChange(updated);
   };
   const handleChildToggle = (option, checked) => {
     const updated = options.map(
       (opt) => opt.id === option.id ? { ...opt, checked } : opt
     );
+    handleOnChage(updated, input);
     setOptions(updated);
     onChange(updated);
   };
@@ -5169,7 +5183,7 @@ var FieldSwitch = ({ input, form, isSubmitting }) => {
           Switch,
           {
             checked: field.value,
-            onCheckedChange: field.onChange,
+            onCheckedChange: (event) => handleOnChage(event, input, field),
             "aria-disabled": true,
             disabled: input.disabled || isSubmitting
           }
@@ -5196,8 +5210,9 @@ var FieldTags = ({ input, form, isSubmitting }) => {
         /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
           TagsInput,
           {
+            input,
             value: field.value ?? [],
-            onValueChange: field.onChange,
+            onValueChange: (event) => handleOnChage(event, input, field),
             placeholder: "Enter for add tag"
           }
         ) }),
@@ -5212,6 +5227,7 @@ var SPLITTER_REGEX = /[\n#?=&\t,./-]+/;
 var FORMATTING_REGEX = /^[^a-zA-Z0-9]*|[^a-zA-Z0-9]*$/g;
 var TagsInput = React3__default.forwardRef(
   ({
+    input,
     value,
     onValueChange,
     placeholder,
@@ -5226,7 +5242,7 @@ var TagsInput = React3__default.forwardRef(
     const parseMinItems = minItems ?? 0;
     const parseMaxItems = maxItems ?? Infinity;
     const addTag = (val) => {
-      if (!value.includes(val) && value.length < parseMaxItems) {
+      if (!value.includes(val) && value.length < parseMaxItems || input.withDuplicatTag) {
         onValueChange([...value, val]);
       }
     };
@@ -5301,7 +5317,18 @@ function FieldTextArea({ form, input, isSubmitting }) {
       name: input.name,
       render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { className: "shadow-lg", children: [
         /* @__PURE__ */ jsx(FormLabel, { children: /* @__PURE__ */ jsx("b", { children: input.label }) }),
-        /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Textarea, { className: "min-w-[260px] bg-white", placeholder: input.placeHolder, ...field, disabled: input.disabled || isSubmitting }) }),
+        /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            className: "min-w-[260px] bg-white",
+            placeholder: input.placeHolder,
+            ...field,
+            onChange: (event) => {
+              handleOnChage(event, input, field);
+            },
+            disabled: input.disabled || isSubmitting
+          }
+        ) }),
         input.description && /* @__PURE__ */ jsx(FormDescription, { children: input.description }),
         /* @__PURE__ */ jsx(FormMessage, {})
       ] })
@@ -5332,6 +5359,7 @@ var FieldText = ({ input, form, isSubmitting }) => {
             placeholder: input.placeHolder,
             ...field,
             type,
+            onChange: (e) => handleOnChage(e, input, field),
             disabled: input.disabled || isSubmitting
           }
         ) }),
@@ -5382,6 +5410,7 @@ var FieldTimeInput = ({ form, input, isSubmitting }) => {
         if (validNow !== isValid2) setIsValid(validNow);
         const handleChange = (val) => {
           setTime(val);
+          handleOnChage(val, input, field);
           field.onChange(val);
         };
         return /* @__PURE__ */ jsxs(FormItem, { className: input.className, children: [
@@ -5920,6 +5949,6 @@ var InputList = ({ handleAddInput, inputsTypes }) => {
   }) });
 };
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, ColorCnInput, ColorInput, CustomAlert, DateInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, FileInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormItem, FormLabel, FormMessage, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputTypes, Label, NumberInput, OTPInput2 as OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Switch, SwitchInput, TextAreaInput, TextInput, TextInputType, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, inputFieldComp, mockFields, useFormField, validationMessages };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, ColorCnInput, ColorInput, CustomAlert, DateInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, FileInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormItem, FormLabel, FormMessage, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputTypes, Label, NumberInput, OTPInput2 as OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Switch, SwitchInput, TextAreaInput, TextInput, TextInputType, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, handleOnChage, inputFieldComp, mockFields, useFormField, validationMessages };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map