shadcn-zod-formkit 1.26.0 → 1.26.1

package/dist/index.d.mts

@@ -88,9 +88,10 @@ 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;
+    form?: UseFormReturn<any>;
     isRemovebleOption?: boolean;
     withDuplicatTag?: boolean;
-    onChange?: (...event: any[]) => void;
+    onChange?: (event: any[], formValues?: Record<string, any>) => void;
     tabLabelField?: string;
     childrenPosition?: 'up' | 'down';
     children?: ReactNode | ((item: any, index: number) => ReactNode);
@@ -207,6 +208,7 @@ declare const entitiesToInputOption: (data: any[], optionValue?: string, grouped
 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;
+declare const isValidField: (input: FieldProps, form: UseFormReturn, defaultValue?: any) => boolean;
 
 type alertPositionType = 'up' | 'down';
 interface FormResp<T> {
@@ -734,4 +736,4 @@ declare function TooltipContent({ className, sideOffset, children, ...props }: R
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Accordion, AccordionContent, AccordionGroupedSwitchInput, AccordionGroupedSwitches, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, type BtnConfig, Button, ButtonGroup, ButtonGroupInput, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, CheckboxInput, ColorCnInput, type ColorCompProps, ColorInput, ComboboxInput, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CurrencyInput, CustomAlert, DateInput, DateTimeInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, Field, FieldButtonGroup, type FieldConfig, FieldContent, FieldCurrency, FieldDateTimeInput, FieldDescription, FieldError, FieldFileMultiUpload, FieldGroup, FieldKeyValueList, FieldLabel, FieldLegend, type FieldProps, FieldRepeater, FieldSeparator, FieldSet, FieldSimpleCheckList, FieldSlider, FieldStringValueList, FieldTextGroup, FieldTimeInput, FieldTitle, FileInput, FileMultiUploadInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormFieldsGrid, FormItem, FormLabel, FormMessage, type FormResp, GenericFilter, type GroupedOption, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputOption, type InputSetup, InputTypes, KeyValueListInput, Label, MultiSelectInput, NumberInput, OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type Props, RadioGroup, RadioGroupInput, RadioGroupItem, RepeaterInput, RepeaterTabsInput, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SimpleCheckListInput, Slider, SliderInput, SortableListInput, StringValueListInput, Switch, SwitchInput, Tabs, TabsContent, TabsList, TabsTrigger, TagInput, TextAreaInput, TextInput, TextInputGroup, TextInputType, Textarea, TimeInput, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonGroupVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, handleOnChage, inputFieldComp, mockFields, useFormField, validationMessages };
+export { Accordion, AccordionContent, AccordionGroupedSwitchInput, AccordionGroupedSwitches, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, type BtnConfig, Button, ButtonGroup, ButtonGroupInput, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, CheckboxInput, ColorCnInput, type ColorCompProps, ColorInput, ComboboxInput, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CurrencyInput, CustomAlert, DateInput, DateTimeInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, Field, FieldButtonGroup, type FieldConfig, FieldContent, FieldCurrency, FieldDateTimeInput, FieldDescription, FieldError, FieldFileMultiUpload, FieldGroup, FieldKeyValueList, FieldLabel, FieldLegend, type FieldProps, FieldRepeater, FieldSeparator, FieldSet, FieldSimpleCheckList, FieldSlider, FieldStringValueList, FieldTextGroup, FieldTimeInput, FieldTitle, FileInput, FileMultiUploadInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormFieldsGrid, FormItem, FormLabel, FormMessage, type FormResp, GenericFilter, type GroupedOption, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputOption, type InputSetup, InputTypes, KeyValueListInput, Label, MultiSelectInput, NumberInput, OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type Props, RadioGroup, RadioGroupInput, RadioGroupItem, RepeaterInput, RepeaterTabsInput, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SimpleCheckListInput, Slider, SliderInput, SortableListInput, StringValueListInput, Switch, SwitchInput, Tabs, TabsContent, TabsList, TabsTrigger, TagInput, TextAreaInput, TextInput, TextInputGroup, TextInputType, Textarea, TimeInput, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonGroupVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, handleOnChage, inputFieldComp, isValidField, mockFields, useFormField, validationMessages };

package/dist/index.d.ts

@@ -88,9 +88,10 @@ 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;
+    form?: UseFormReturn<any>;
     isRemovebleOption?: boolean;
     withDuplicatTag?: boolean;
-    onChange?: (...event: any[]) => void;
+    onChange?: (event: any[], formValues?: Record<string, any>) => void;
     tabLabelField?: string;
     childrenPosition?: 'up' | 'down';
     children?: ReactNode | ((item: any, index: number) => ReactNode);
@@ -207,6 +208,7 @@ declare const entitiesToInputOption: (data: any[], optionValue?: string, grouped
 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;
+declare const isValidField: (input: FieldProps, form: UseFormReturn, defaultValue?: any) => boolean;
 
 type alertPositionType = 'up' | 'down';
 interface FormResp<T> {
@@ -734,4 +736,4 @@ declare function TooltipContent({ className, sideOffset, children, ...props }: R
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Accordion, AccordionContent, AccordionGroupedSwitchInput, AccordionGroupedSwitches, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, type BtnConfig, Button, ButtonGroup, ButtonGroupInput, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, CheckboxInput, ColorCnInput, type ColorCompProps, ColorInput, ComboboxInput, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CurrencyInput, CustomAlert, DateInput, DateTimeInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, Field, FieldButtonGroup, type FieldConfig, FieldContent, FieldCurrency, FieldDateTimeInput, FieldDescription, FieldError, FieldFileMultiUpload, FieldGroup, FieldKeyValueList, FieldLabel, FieldLegend, type FieldProps, FieldRepeater, FieldSeparator, FieldSet, FieldSimpleCheckList, FieldSlider, FieldStringValueList, FieldTextGroup, FieldTimeInput, FieldTitle, FileInput, FileMultiUploadInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormFieldsGrid, FormItem, FormLabel, FormMessage, type FormResp, GenericFilter, type GroupedOption, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputOption, type InputSetup, InputTypes, KeyValueListInput, Label, MultiSelectInput, NumberInput, OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type Props, RadioGroup, RadioGroupInput, RadioGroupItem, RepeaterInput, RepeaterTabsInput, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SimpleCheckListInput, Slider, SliderInput, SortableListInput, StringValueListInput, Switch, SwitchInput, Tabs, TabsContent, TabsList, TabsTrigger, TagInput, TextAreaInput, TextInput, TextInputGroup, TextInputType, Textarea, TimeInput, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonGroupVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, handleOnChage, inputFieldComp, mockFields, useFormField, validationMessages };
+export { Accordion, AccordionContent, AccordionGroupedSwitchInput, AccordionGroupedSwitches, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, type BtnConfig, Button, ButtonGroup, ButtonGroupInput, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, CheckboxInput, ColorCnInput, type ColorCompProps, ColorInput, ComboboxInput, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CurrencyInput, CustomAlert, DateInput, DateTimeInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, Field, FieldButtonGroup, type FieldConfig, FieldContent, FieldCurrency, FieldDateTimeInput, FieldDescription, FieldError, FieldFileMultiUpload, FieldGroup, FieldKeyValueList, FieldLabel, FieldLegend, type FieldProps, FieldRepeater, FieldSeparator, FieldSet, FieldSimpleCheckList, FieldSlider, FieldStringValueList, FieldTextGroup, FieldTimeInput, FieldTitle, FileInput, FileMultiUploadInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormFieldsGrid, FormItem, FormLabel, FormMessage, type FormResp, GenericFilter, type GroupedOption, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputOption, type InputSetup, InputTypes, KeyValueListInput, Label, MultiSelectInput, NumberInput, OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type Props, RadioGroup, RadioGroupInput, RadioGroupItem, RepeaterInput, RepeaterTabsInput, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SimpleCheckListInput, Slider, SliderInput, SortableListInput, StringValueListInput, Switch, SwitchInput, Tabs, TabsContent, TabsList, TabsTrigger, TagInput, TextAreaInput, TextInput, TextInputGroup, TextInputType, Textarea, TimeInput, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonGroupVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, handleOnChage, inputFieldComp, isValidField, mockFields, useFormField, validationMessages };

package/dist/index.mjs

@@ -195,9 +195,17 @@ 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);
+  input.onChange?.(event, input.form?.getValues());
+};
+var isValidField = (input, form, defaultValue) => {
+  const value = defaultValue ?? form.getValues(input.name);
+  const fieldState = form.getFieldState(input.name);
+  if (input.zodType) {
+    const result = input.zodType.safeParse(value);
+    return result.success;
+  }
+  return !fieldState.error && value !== void 0 && value !== "";
 };
 
 // src/components/custom/form/inputs/base/definitions.ts
@@ -4166,60 +4174,82 @@ function cleanEscapedString(input) {
 var DateInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
-    const formField = /* @__PURE__ */ jsx(
-      FormField,
-      {
-        control: form.control,
-        name: input.name,
-        render: ({ field }) => {
-          const [date, setDate] = React3.useState(
-            field.value ? new Date(field.value) : void 0
-          );
-          React3.useEffect(() => {
-            if (field.value && !date) {
-              setDate(new Date(field.value));
-            }
-          }, [field.value]);
-          const handleSelect = (selectedDate) => {
-            setDate(selectedDate);
-            handleOnChage(selectedDate, input, field);
-          };
-          return /* @__PURE__ */ jsxs(FormItem, { children: [
-            /* @__PURE__ */ jsx(FormLabel, { children: /* @__PURE__ */ jsx("b", { children: input.label }) }),
-            /* @__PURE__ */ jsxs(Popover, { children: [
-              /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs(
-                Button,
-                {
-                  variant: "outline",
-                  className: cn(
-                    "w-full justify-start text-left font-normal",
-                    !date && "text-muted-foreground"
-                  ),
-                  children: [
+    return /* @__PURE__ */ jsx(FieldTimeInput, { input, form, isSubmitting });
+  }
+};
+var FieldTimeInput = ({ form, input, isSubmitting }) => {
+  const [isValid2, setIsValid] = useState(isValidField(input, form));
+  const groupConfig = input.inputGroupConfig;
+  const autoValidate = groupConfig?.autoValidIcons ?? input.zodType ? true : false;
+  const iconValidState = /* @__PURE__ */ jsx(CircleCheck, { style: { color: "#00bf3e" } });
+  const iconInvalidState = /* @__PURE__ */ jsx(CircleX, { style: { color: "#ff8080" } });
+  const iconLoadingState = /* @__PURE__ */ jsx(Loader2, { className: "animate-spin", style: { color: "#1e90ff" } });
+  const iconsRight = groupConfig?.iconsRight ?? [];
+  groupConfig?.iconsLeft ?? [];
+  groupConfig?.textLeft;
+  const textRight = groupConfig?.textRight;
+  const formField = /* @__PURE__ */ jsx(
+    FormField,
+    {
+      control: form.control,
+      name: input.name,
+      render: ({ field }) => {
+        setIsValid(isValidField(input, form));
+        const [date, setDate] = React3.useState(
+          field.value ? new Date(field.value) : void 0
+        );
+        React3.useEffect(() => {
+          if (field.value && !date) {
+            setDate(new Date(field.value));
+            setIsValid(isValidField(input, form));
+          }
+        }, [field.value]);
+        const handleSelect = (selectedDate) => {
+          setDate(selectedDate);
+          handleOnChage(selectedDate, input, field);
+        };
+        return /* @__PURE__ */ jsxs(FormItem, { children: [
+          /* @__PURE__ */ jsx(FormLabel, { children: /* @__PURE__ */ jsx("b", { children: input.label }) }),
+          /* @__PURE__ */ jsxs(Popover, { children: [
+            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(InputGroup, { className: "flex flex-row gap-1", children: /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "outline",
+                className: cn(
+                  "w-full justify-start text-left py-0.5 ",
+                  !date && "text-muted-foreground"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-1 justify-start text-left ", children: [
                     /* @__PURE__ */ jsx(CalendarIcon, {}),
                     date ? format(date, "PPP") : /* @__PURE__ */ jsx("span", { children: input.placeHolder ?? "Fecha" })
-                  ]
-                }
-              ) }) }),
-              /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", children: /* @__PURE__ */ jsx(
-                Calendar,
-                {
-                  mode: "single",
-                  selected: date,
-                  onSelect: handleSelect,
-                  initialFocus: true
-                }
-              ) })
-            ] }),
-            /* @__PURE__ */ jsx(FormDescription, { children: input.description }),
-            /* @__PURE__ */ jsx(FormMessage, {})
-          ] });
-        }
-      },
-      input.name
-    );
-    return /* @__PURE__ */ jsx(Fragment, { children: formField });
-  }
+                  ] }),
+                  (iconsRight.length > 0 || textRight || autoValidate) && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    textRight && /* @__PURE__ */ jsx(InputGroupText, { children: textRight }),
+                    iconsRight.map((IconComponent, index) => /* @__PURE__ */ jsx(IconComponent, { size: 24, className: "w-6! h-6!" }, index)),
+                    autoValidate && /* @__PURE__ */ jsx("div", { children: isSubmitting ? iconLoadingState : isValid2 ? iconValidState : iconInvalidState })
+                  ] })
+                ]
+              }
+            ) }) }) }),
+            /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", children: /* @__PURE__ */ jsx(
+              Calendar,
+              {
+                mode: "single",
+                selected: date,
+                onSelect: handleSelect,
+                initialFocus: true
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx(FormDescription, { children: input.description }),
+          /* @__PURE__ */ jsx(FormMessage, {})
+        ] });
+      }
+    },
+    input.name
+  );
+  return /* @__PURE__ */ jsx(Fragment, { children: formField });
 };
 var DateTimeInput = class extends BaseInput {
   render() {
@@ -4229,7 +4259,7 @@ var DateTimeInput = class extends BaseInput {
 };
 var FieldDateTimeInput = ({ form, input, isSubmitting }) => {
   const groupConfig = input.inputGroupConfig;
-  const autoValidate = groupConfig?.autoValidIcons;
+  const autoValidate = groupConfig?.autoValidIcons ?? input.zodType ? true : false;
   const iconValidState = /* @__PURE__ */ jsx(CircleCheck, { style: { color: "#00bf3e" } });
   const iconInvalidState = /* @__PURE__ */ jsx(CircleX, { style: { color: "#ff8080" } });
   const iconLoadingState = /* @__PURE__ */ jsx(Loader2, { className: "animate-spin", style: { color: "#1e90ff" } });
@@ -4280,7 +4310,7 @@ var FieldDateTimeInput = ({ form, input, isSubmitting }) => {
             ),
             (iconsRight.length > 0 || textRight || autoValidate) && /* @__PURE__ */ jsxs(InputGroupAddon, { align: "inline-end", children: [
               textRight && /* @__PURE__ */ jsx(InputGroupText, { children: textRight }),
-              iconsRight.map((IconComponent, index) => /* @__PURE__ */ jsx(IconComponent, { size: 20 }, index)),
+              iconsRight.map((IconComponent, index) => /* @__PURE__ */ jsx(IconComponent, { size: 24 }, index)),
               autoValidate && /* @__PURE__ */ jsx("div", { children: isSubmitting ? iconLoadingState : isValid2 ? iconValidState : iconInvalidState })
             ] })
           ] }) }),
@@ -4658,7 +4688,7 @@ var TextInputGroup = class extends BaseInput {
 var FieldTextGroup = ({ form, input, isSubmitting }) => {
   const groupConfig = input.inputGroupConfig;
   const infoTooltip = input?.infoTooltip;
-  const autoValidate = groupConfig?.autoValidIcons;
+  const autoValidate = groupConfig?.autoValidIcons ?? input.zodType ? true : false;
   const iconValidState = /* @__PURE__ */ jsx(CircleCheck, { style: { color: "#00bf3e" } });
   const iconInvalidState = /* @__PURE__ */ jsx(CircleX, { style: { color: "#ff8080" } });
   const iconLoadingState = /* @__PURE__ */ jsx(Loader2, { className: "animate-spin", style: { color: "#1e90ff" } });
@@ -4666,11 +4696,7 @@ var FieldTextGroup = ({ form, input, isSubmitting }) => {
   const iconsLeft = groupConfig?.iconsLeft ?? [];
   const textLeft = groupConfig?.textLeft;
   const textRight = groupConfig?.textRight;
-  const [isValid2, setIsValid] = useState(() => {
-    const value = form.getValues(input.name);
-    const fieldState = form.getFieldState(input.name);
-    return !fieldState.error && value !== void 0 && value !== "";
-  });
+  const [isValid2, setIsValid] = useState(isValidField(input, form));
   const [showPassword, setShowPassword] = useState(false);
   const isPasswordField = input.keyboardType === "password" /* PASSWORD */;
   const isNumberField = input.keyboardType === "number" /* NUMBER */;
@@ -4680,9 +4706,8 @@ var FieldTextGroup = ({ form, input, isSubmitting }) => {
     {
       control: form.control,
       name: input.name,
-      render: ({ field, fieldState }) => {
-        const validNow = !fieldState.error && field.value !== void 0 && field.value !== "";
-        if (validNow !== isValid2) setIsValid(validNow);
+      render: ({ field }) => {
+        setIsValid(isValidField(input, form));
         return /* @__PURE__ */ jsxs(FormItem, { className: input.className, children: [
           /* @__PURE__ */ jsx(FormLabel, { children: /* @__PURE__ */ jsx("b", { children: input.label }) }),
           /* @__PURE__ */ jsx(FormControl, { className: "shadow-lg", children: /* @__PURE__ */ jsxs(InputGroup, { children: [
@@ -4707,6 +4732,7 @@ var FieldTextGroup = ({ form, input, isSubmitting }) => {
                   }
                   handleOnChage(value, input, field);
                   field.onChange(value);
+                  isValidField(input, form);
                 }
               }
             ),
@@ -5784,10 +5810,10 @@ var FieldText = ({ input, form, isSubmitting }) => {
 var TimeInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
-    return /* @__PURE__ */ jsx(FieldTimeInput, { input, form, isSubmitting });
+    return /* @__PURE__ */ jsx(FieldTimeInput2, { input, form, isSubmitting });
   }
 };
-var FieldTimeInput = ({ form, input, isSubmitting }) => {
+var FieldTimeInput2 = ({ form, input, isSubmitting }) => {
   const groupConfig = input.inputGroupConfig;
   const autoValidate = groupConfig?.autoValidIcons;
   const iconValidState = /* @__PURE__ */ jsx(CircleCheck, { style: { color: "#00bf3e" } });
@@ -5895,6 +5921,7 @@ var inputMap = {
 };
 var InputFactory = class {
   static create(input, form, isSubmitting = false) {
+    input.form = form;
     const inputType = input.inputType ?? "text" /* TEXT */;
     const InputClass = inputMap[inputType] ?? TextInput;
     const instance = new InputClass(input, form, isSubmitting);
@@ -6075,7 +6102,7 @@ var DynamicForm = ({
   });
   useEffect(() => {
     form.reset(initialValues);
-  }, [initialValues, form]);
+  }, []);
   const handleSubmit = (data) => {
     if (readOnly) return;
     startTransition(() => {
@@ -6472,6 +6499,6 @@ var GenericFilter = ({
   ) }) });
 };
 
-export { Accordion, AccordionContent, AccordionGroupedSwitchInput, AccordionGroupedSwitches, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, Button, ButtonGroup, ButtonGroupInput, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, CheckboxInput, ColorCnInput, ColorInput, ComboboxInput, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CurrencyInput, CustomAlert, DateInput, DateTimeInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, Field, FieldButtonGroup, FieldContent, FieldCurrency, FieldDateTimeInput, FieldDescription, FieldError, FieldFileMultiUpload, FieldGroup, FieldKeyValueList, FieldLabel, FieldLegend, FieldRepeater, FieldSeparator, FieldSet, FieldSimpleCheckList, FieldSlider, FieldStringValueList, FieldTextGroup, FieldTimeInput, FieldTitle, FileInput, FileMultiUploadInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormFieldsGrid, FormItem, FormLabel, FormMessage, GenericFilter, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputTypes, KeyValueListInput, Label, MultiSelectInput, NumberInput, OTPInput2 as OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, RadioGroup, RadioGroupInput, RadioGroupItem, RepeaterInput, RepeaterTabsInput, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SimpleCheckListInput, Slider, SliderInput, SortableListInput, StringValueListInput, Switch, SwitchInput, Tabs, TabsContent, TabsList, TabsTrigger, TagInput, TextAreaInput, TextInput, TextInputGroup, TextInputType, Textarea, TimeInput, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonGroupVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, handleOnChage, inputFieldComp, mockFields, useFormField, validationMessages };
+export { Accordion, AccordionContent, AccordionGroupedSwitchInput, AccordionGroupedSwitches, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, Button, ButtonGroup, ButtonGroupInput, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, CheckboxInput, ColorCnInput, ColorInput, ComboboxInput, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CurrencyInput, CustomAlert, DateInput, DateTimeInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, Field, FieldButtonGroup, FieldContent, FieldCurrency, FieldDateTimeInput, FieldDescription, FieldError, FieldFileMultiUpload, FieldGroup, FieldKeyValueList, FieldLabel, FieldLegend, FieldRepeater, FieldSeparator, FieldSet, FieldSimpleCheckList, FieldSlider, FieldStringValueList, FieldTextGroup, FieldTimeInput2 as FieldTimeInput, FieldTitle, FileInput, FileMultiUploadInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormFieldsGrid, FormItem, FormLabel, FormMessage, GenericFilter, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputTypes, KeyValueListInput, Label, MultiSelectInput, NumberInput, OTPInput2 as OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, RadioGroup, RadioGroupInput, RadioGroupItem, RepeaterInput, RepeaterTabsInput, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SimpleCheckListInput, Slider, SliderInput, SortableListInput, StringValueListInput, Switch, SwitchInput, Tabs, TabsContent, TabsList, TabsTrigger, TagInput, TextAreaInput, TextInput, TextInputGroup, TextInputType, Textarea, TimeInput, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonGroupVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, handleOnChage, inputFieldComp, isValidField, mockFields, useFormField, validationMessages };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map