shadcn-zod-formkit 1.31.0 → 1.33.0

package/dist/index.cjs

@@ -4285,6 +4285,7 @@ var DateInput = class extends BaseInput {
 };
 var FieldTimeInput = ({ form, input, isSubmitting }) => {
   const [isValid2, setIsValid] = React3.useState(isValidField(input, form));
+  const infoTooltip = input?.infoTooltip;
   const groupConfig = input.inputGroupConfig;
   const autoValidate = groupConfig?.autoValidIcons ?? input.zodType ? true : false;
   const iconValidState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, { style: { color: "#00bf3e" } });
@@ -4317,27 +4318,34 @@ var FieldTimeInput = ({ form, input, isSubmitting }) => {
         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" })
-                  ] }),
-                  (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(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsxs(InputGroup, { className: "flex flex-row gap-1", children: [
+              infoTooltip && /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { size: 20 }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: infoTooltip }) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                Button,
+                {
+                  variant: "outline",
+                  type: "button",
+                  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" })
+                    ] }),
+                    (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,
               {
@@ -6257,7 +6265,10 @@ var DynamicForm = ({
   withFormWrapper = true,
   btnGroupDirection = "flex-end",
   withSubmitBtn = true,
-  debug = false
+  debug = false,
+  isWrapInWizard = false,
+  totalSteps = 0,
+  currentStep = 1
 }) => {
   const [isPending, startTransition] = React3.useTransition();
   const schema = React3.useMemo(() => {
@@ -6328,11 +6339,11 @@ var DynamicForm = ({
           disabled: isPending,
           onClick: onClick ? handleClick : void 0,
           children: isPending ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-5 w-5 mr-2 animate-spin" }),
-            submitBtnLabelSubmiting
+            submitBtnLabelSubmiting,
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-5 w-5 mr-2 animate-spin" })
           ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { className: "h-5 w-5 mr-2" }),
-            submitBtnLabel
+            submitBtnLabel,
+            (totalSteps == 0 || totalSteps == currentStep) && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { className: "h-5 w-5 mr-2" })
           ] })
         }
       )
@@ -6356,7 +6367,15 @@ var DynamicForm = ({
         fields
       }
     ),
-    withFormWrapper && /* @__PURE__ */ jsxRuntime.jsx(FormWrapper, { form, handleSubmit, children: formBody }),
+    withFormWrapper && /* @__PURE__ */ jsxRuntime.jsx(
+      FormWrapper,
+      {
+        form,
+        isWrapInWizard,
+        handleSubmit,
+        children: formBody
+      }
+    ),
     !withFormWrapper && formBody,
     withErrorsAlert && errorAlertPosition === "down" && /* @__PURE__ */ jsxRuntime.jsx(
       FormErrorsAlert,
@@ -6369,7 +6388,7 @@ var DynamicForm = ({
   if (!withCard) return formContent;
   return /* @__PURE__ */ jsxRuntime.jsx(Card, { children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: formContent }) });
 };
-var FormWrapper = ({ form, handleSubmit, children, readOnly, debug }) => {
+var FormWrapper = ({ form, handleSubmit, children, readOnly, debug, isWrapInWizard }) => {
   const allValues = form.watch();
   return /* @__PURE__ */ jsxRuntime.jsx(Form, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "form",
@@ -6441,7 +6460,10 @@ function Stepper({ steps, currentStep, clickable = false, onStepClick }) {
 var WizardForm = ({
   fields,
   record,
-  onSubmit
+  onSubmit,
+  children,
+  isWrapInWizard = true,
+  skipSteps = false
 }) => {
   const [currentStep, setCurrentStep] = React3.useState(1);
   const flattenFields4 = (list) => list.flatMap((f) => Array.isArray(f) ? flattenFields4(f) : f);
@@ -6452,40 +6474,21 @@ var WizardForm = ({
   );
   const stepFields = allFields.filter((f) => (f.step ?? 1) === currentStep);
   return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "flex flex-col gap-4 px-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Card, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between mb-4 gap-2 px-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Stepper,
-        {
-          steps: Array(totalSteps).fill({}),
-          currentStep,
-          clickable: true,
-          onStepClick: setCurrentStep
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-center space-x-4 gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            variant: "outline",
-            className: "w-32",
-            onClick: () => setCurrentStep((prev) => prev - 1),
-            disabled: currentStep === 1,
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeftIcon, {})
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            variant: "outline",
-            className: "w-32",
-            onClick: () => setCurrentStep((prev) => prev + 1),
-            disabled: currentStep > totalSteps,
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, {})
-          }
-        )
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(Card, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-between mb-4 gap-2 px-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Stepper,
+      {
+        steps: Array(totalSteps).fill({}),
+        currentStep,
+        clickable: skipSteps,
+        onStepClick: setCurrentStep
+      }
+    ) }) }),
+    children ? children({
+      stepFields,
+      currentStep,
+      totalSteps,
+      setCurrentStep
+    }) : /* @__PURE__ */ jsxRuntime.jsx(
       DynamicForm,
       {
         record,
@@ -6494,7 +6497,10 @@ var WizardForm = ({
         withCard: false,
         errorAlertPosition: "down",
         fields: stepFields,
-        onSubmit
+        onSubmit,
+        isWrapInWizard: true,
+        currentStep,
+        totalSteps
       }
     )
   ] });