shadcn-zod-formkit 1.26.0 → 1.26.1

package/dist/index.cjs

@@ -233,9 +233,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
@@ -4204,60 +4212,82 @@ function cleanEscapedString(input) {
 var DateInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
-    const formField = /* @__PURE__ */ jsxRuntime.jsx(
-      FormField,
-      {
-        control: form.control,
-        name: input.name,
-        render: ({ field }) => {
-          const [date, setDate] = React3__namespace.useState(
-            field.value ? new Date(field.value) : void 0
-          );
-          React3__namespace.useEffect(() => {
-            if (field.value && !date) {
-              setDate(new Date(field.value));
-            }
-          }, [field.value]);
-          const handleSelect = (selectedDate) => {
-            setDate(selectedDate);
-            handleOnChage(selectedDate, input, field);
-          };
-          return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-                Button,
-                {
-                  variant: "outline",
-                  className: cn(
-                    "w-full justify-start text-left font-normal",
-                    !date && "text-muted-foreground"
-                  ),
-                  children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(FieldTimeInput, { input, form, isSubmitting });
+  }
+};
+var FieldTimeInput = ({ form, input, isSubmitting }) => {
+  const [isValid2, setIsValid] = React3.useState(isValidField(input, form));
+  const groupConfig = input.inputGroupConfig;
+  const autoValidate = groupConfig?.autoValidIcons ?? input.zodType ? true : false;
+  const iconValidState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, { style: { color: "#00bf3e" } });
+  const iconInvalidState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleX, { style: { color: "#ff8080" } });
+  const iconLoadingState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin", style: { color: "#1e90ff" } });
+  const iconsRight = groupConfig?.iconsRight ?? [];
+  groupConfig?.iconsLeft ?? [];
+  groupConfig?.textLeft;
+  const textRight = groupConfig?.textRight;
+  const formField = /* @__PURE__ */ jsxRuntime.jsx(
+    FormField,
+    {
+      control: form.control,
+      name: input.name,
+      render: ({ field }) => {
+        setIsValid(isValidField(input, form));
+        const [date, setDate] = React3__namespace.useState(
+          field.value ? new Date(field.value) : void 0
+        );
+        React3__namespace.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__ */ jsxRuntime.jsxs(FormItem, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(InputGroup, { className: "flex flex-row gap-1", children: /* @__PURE__ */ jsxRuntime.jsxs(
+              Button,
+              {
+                variant: "outline",
+                className: cn(
+                  "w-full justify-start text-left py-0.5 ",
+                  !date && "text-muted-foreground"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 items-center gap-1 justify-start text-left ", children: [
                     /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, {}),
                     date ? format(date, "PPP") : /* @__PURE__ */ jsxRuntime.jsx("span", { children: input.placeHolder ?? "Fecha" })
-                  ]
-                }
-              ) }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-auto p-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-                Calendar,
-                {
-                  mode: "single",
-                  selected: date,
-                  onSelect: handleSelect,
-                  initialFocus: true
-                }
-              ) })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { children: input.description }),
-            /* @__PURE__ */ jsxRuntime.jsx(FormMessage, {})
-          ] });
-        }
-      },
-      input.name
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: formField });
-  }
+                  ] }),
+                  (iconsRight.length > 0 || textRight || autoValidate) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    textRight && /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: textRight }),
+                    iconsRight.map((IconComponent, index) => /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 24, className: "w-6! h-6!" }, index)),
+                    autoValidate && /* @__PURE__ */ jsxRuntime.jsx("div", { children: isSubmitting ? iconLoadingState : isValid2 ? iconValidState : iconInvalidState })
+                  ] })
+                ]
+              }
+            ) }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-auto p-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+              Calendar,
+              {
+                mode: "single",
+                selected: date,
+                onSelect: handleSelect,
+                initialFocus: true
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { children: input.description }),
+          /* @__PURE__ */ jsxRuntime.jsx(FormMessage, {})
+        ] });
+      }
+    },
+    input.name
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: formField });
 };
 var DateTimeInput = class extends BaseInput {
   render() {
@@ -4267,7 +4297,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__ */ jsxRuntime.jsx(lucideReact.CircleCheck, { style: { color: "#00bf3e" } });
   const iconInvalidState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleX, { style: { color: "#ff8080" } });
   const iconLoadingState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin", style: { color: "#1e90ff" } });
@@ -4318,7 +4348,7 @@ var FieldDateTimeInput = ({ form, input, isSubmitting }) => {
             ),
             (iconsRight.length > 0 || textRight || autoValidate) && /* @__PURE__ */ jsxRuntime.jsxs(InputGroupAddon, { align: "inline-end", children: [
               textRight && /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: textRight }),
-              iconsRight.map((IconComponent, index) => /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 20 }, index)),
+              iconsRight.map((IconComponent, index) => /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 24 }, index)),
               autoValidate && /* @__PURE__ */ jsxRuntime.jsx("div", { children: isSubmitting ? iconLoadingState : isValid2 ? iconValidState : iconInvalidState })
             ] })
           ] }) }),
@@ -4696,7 +4726,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__ */ jsxRuntime.jsx(lucideReact.CircleCheck, { style: { color: "#00bf3e" } });
   const iconInvalidState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleX, { style: { color: "#ff8080" } });
   const iconLoadingState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin", style: { color: "#1e90ff" } });
@@ -4704,11 +4734,7 @@ var FieldTextGroup = ({ form, input, isSubmitting }) => {
   const iconsLeft = groupConfig?.iconsLeft ?? [];
   const textLeft = groupConfig?.textLeft;
   const textRight = groupConfig?.textRight;
-  const [isValid2, setIsValid] = React3.useState(() => {
-    const value = form.getValues(input.name);
-    const fieldState = form.getFieldState(input.name);
-    return !fieldState.error && value !== void 0 && value !== "";
-  });
+  const [isValid2, setIsValid] = React3.useState(isValidField(input, form));
   const [showPassword, setShowPassword] = React3.useState(false);
   const isPasswordField = input.keyboardType === "password" /* PASSWORD */;
   const isNumberField = input.keyboardType === "number" /* NUMBER */;
@@ -4718,9 +4744,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__ */ jsxRuntime.jsxs(FormItem, { className: input.className, children: [
           /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
           /* @__PURE__ */ jsxRuntime.jsx(FormControl, { className: "shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsxs(InputGroup, { children: [
@@ -4745,6 +4770,7 @@ var FieldTextGroup = ({ form, input, isSubmitting }) => {
                   }
                   handleOnChage(value, input, field);
                   field.onChange(value);
+                  isValidField(input, form);
                 }
               }
             ),
@@ -5822,10 +5848,10 @@ var FieldText = ({ input, form, isSubmitting }) => {
 var TimeInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
-    return /* @__PURE__ */ jsxRuntime.jsx(FieldTimeInput, { input, form, isSubmitting });
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.CircleCheck, { style: { color: "#00bf3e" } });
@@ -5933,6 +5959,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);
@@ -6113,7 +6140,7 @@ var DynamicForm = ({
   });
   React3.useEffect(() => {
     form.reset(initialValues);
-  }, [initialValues, form]);
+  }, []);
   const handleSubmit = (data) => {
     if (readOnly) return;
     startTransition(() => {
@@ -6585,7 +6612,7 @@ exports.FieldSimpleCheckList = FieldSimpleCheckList;
 exports.FieldSlider = FieldSlider;
 exports.FieldStringValueList = FieldStringValueList;
 exports.FieldTextGroup = FieldTextGroup;
-exports.FieldTimeInput = FieldTimeInput;
+exports.FieldTimeInput = FieldTimeInput2;
 exports.FieldTitle = FieldTitle;
 exports.FileInput = FileInput;
 exports.FileMultiUploadInput = FileMultiUploadInput;
@@ -6683,6 +6710,7 @@ exports.getDynamicSchema = getDynamicSchema;
 exports.getFieldLabel = getFieldLabel;
 exports.handleOnChage = handleOnChage;
 exports.inputFieldComp = inputFieldComp;
+exports.isValidField = isValidField;
 exports.mockFields = mockFields;
 exports.useFormField = useFormField;
 exports.validationMessages = validationMessages;