shadcn-zod-formkit 1.30.0 → 1.31.0

package/dist/index.cjs

@@ -2221,6 +2221,8 @@ var ColorInput = class extends BaseInput {
   }
 };
 var PRESET_COLORS = [
+  "#9A275A",
+  // QuinaMagenta
   "#800000",
   // Maroon
   "#ef4444",
@@ -2231,6 +2233,8 @@ var PRESET_COLORS = [
   // yellow
   "#22c55e",
   // green
+  "#99EDCC",
+  // Aquamarine
   "#00FF00",
   // lime
   "#00FFFF",
@@ -2249,10 +2253,12 @@ var PRESET_COLORS = [
   // pink
   "#64748b",
   // slate
+  "#000000",
+  // black
   "#808080",
   // Gray
-  "#000000"
-  // black
+  "#FFFFFF"
+  // White
 ];
 var FieldColor = ({ form, input, isSubmitting }) => {
   const [ColorCmp, _setColorCmp] = React3.useState(ColorComp);
@@ -2305,13 +2311,13 @@ var ColorComp = React3__namespace.default.forwardRef(
       }
     };
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2 p-2", children: PRESET_COLORS.map((presetColor) => /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row gap-2 p-2", children: PRESET_COLORS.map((presetColor) => /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
           disabled,
           className: cn(
-            "size-6 rounded-md border-2 transition-all hover:scale-110 disabled:opacity-50 disabled:cursor-not-allowed",
+            "flex-1 size-4 shadow-lg rounded-md border-2 border-black transition-all hover:scale-110 disabled:opacity-50 disabled:cursor-not-allowed",
             color.hex === presetColor ? "border-foreground ring-2 ring-foreground/20" : "border-border hover:border-foreground/50"
           ),
           style: { backgroundColor: presetColor },
@@ -4752,7 +4758,7 @@ var FieldKeyValueList = ({ form, input, isSubmitting }) => {
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsxs(ButtonGroup, { className: "w-full", children: [
                     /* @__PURE__ */ jsxRuntime.jsx(ButtonGroupText, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(LabelPrimitive.Label, { htmlFor: "value", children: "Value" }) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(InputGroup, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                    /* @__PURE__ */ jsxRuntime.jsx(
                       CustomInputGroup,
                       {
                         autoValidate: true,
@@ -4763,7 +4769,7 @@ var FieldKeyValueList = ({ form, input, isSubmitting }) => {
                         onChange: (e) => handleChange(index, "value", e.target.value),
                         form
                       }
-                    ) })
+                    )
                   ] }),
                   input.isRemovebleOption && /* @__PURE__ */ jsxRuntime.jsx(
                     Button,
@@ -5763,7 +5769,7 @@ var FieldSwitch = ({ input, form, isSubmitting }) => {
             onCheckedChange: (event) => {
               handleOnChage(event, input, field);
             },
-            disabled: false
+            disabled: input.disabled || isSubmitting
           }
         ) })
       ] }) })
@@ -6160,6 +6166,16 @@ var getFieldLabel = (fieldErrorKey, fields) => {
   return foundField?.label ?? fieldErrorKey;
 };
 var isRenderableChild = (c) => c !== void 0 && c !== null && typeof c !== "function";
+var shouldShowField = (field, values) => {
+  if (typeof field.showWhen === "function") {
+    try {
+      return !!field.showWhen(values);
+    } catch {
+      return true;
+    }
+  }
+  return true;
+};
 var FormFieldsGrid = ({
   fields,
   form,
@@ -6168,47 +6184,54 @@ var FormFieldsGrid = ({
   className = "",
   gap = "gap-2"
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full grid grid-cols-1 ${gap} ${className}`, children: fields.map(
-    (inputOrGroup, idx) => Array.isArray(inputOrGroup) ? /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: "w-full flex flex-row items-start gap-4 py-3",
-        children: inputOrGroup.map((field, subIdx) => {
-          const fieldCopy = {
-            ...field,
-            disabled: readOnly ? true : field.disabled
-          };
-          const renderInlineChild = fieldCopy.childrenPosition !== "down" && isRenderableChild(fieldCopy.children);
-          const renderInlineChildDown = fieldCopy.childrenPosition === "down" && isRenderableChild(fieldCopy.children);
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full px-2", children: [
-            renderInlineChild && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fieldCopy.children }),
-            InputFactory.create(fieldCopy, form, isPending),
-            renderInlineChildDown && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fieldCopy.children })
-          ] }, `field-${idx}-${subIdx}`);
-        })
-      },
-      `field-group-${idx}`
-    ) : /* @__PURE__ */ jsxRuntime.jsx(
+  const values = form.watch();
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full grid grid-cols-1 ${gap} ${className}`, children: fields.map((inputOrGroup, idx) => {
+    if (Array.isArray(inputOrGroup)) {
+      const visibleFields = inputOrGroup.filter(
+        (f) => shouldShowField(f, values)
+      );
+      if (visibleFields.length === 0) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "w-full flex flex-row items-start gap-4 py-3",
+          children: visibleFields.map((field, subIdx) => {
+            const fieldCopy2 = {
+              ...field,
+              disabled: readOnly ? true : field.disabled
+            };
+            const renderUp2 = fieldCopy2.childrenPosition !== "down" && isRenderableChild(fieldCopy2.children);
+            const renderDown2 = fieldCopy2.childrenPosition === "down" && isRenderableChild(fieldCopy2.children);
+            return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full px-2", children: [
+              renderUp2 && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fieldCopy2.children }),
+              InputFactory.create(fieldCopy2, form, isPending),
+              renderDown2 && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fieldCopy2.children })
+            ] }, `field-${idx}-${subIdx}`);
+          })
+        },
+        `field-group-${idx}`
+      );
+    }
+    if (!shouldShowField(inputOrGroup, values)) return null;
+    const fieldCopy = {
+      ...inputOrGroup,
+      disabled: readOnly ? true : inputOrGroup.disabled
+    };
+    const renderUp = fieldCopy.childrenPosition !== "down" && isRenderableChild(fieldCopy.children);
+    const renderDown = fieldCopy.childrenPosition === "down" && isRenderableChild(fieldCopy.children);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         className: "flex flex-col justify-between py-3 w-full px-2",
-        children: (() => {
-          const fieldCopy = {
-            ...inputOrGroup,
-            disabled: readOnly ? true : inputOrGroup.disabled
-          };
-          const renderUp = fieldCopy.childrenPosition !== "down" && isRenderableChild(fieldCopy.children);
-          const renderDown = fieldCopy.childrenPosition === "down" && isRenderableChild(fieldCopy.children);
-          return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            renderUp && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fieldCopy.children }),
-            InputFactory.create(fieldCopy, form, isPending),
-            renderDown && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fieldCopy.children })
-          ] });
-        })()
+        children: [
+          renderUp && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fieldCopy.children }),
+          InputFactory.create(fieldCopy, form, isPending),
+          renderDown && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fieldCopy.children })
+        ]
       },
       `field-single-${idx}`
-    )
-  ) });
+    );
+  }) });
 };
 var DynamicForm = ({
   formTitle,
@@ -6233,7 +6256,8 @@ var DynamicForm = ({
   submitBtnLabelSubmiting = "Guardando...",
   withFormWrapper = true,
   btnGroupDirection = "flex-end",
-  withSubmitBtn = true
+  withSubmitBtn = true,
+  debug = false
 }) => {
   const [isPending, startTransition] = React3.useTransition();
   const schema = React3.useMemo(() => {
@@ -6260,7 +6284,7 @@ var DynamicForm = ({
     if (!onClick) return;
     const isValid2 = await form.trigger();
     if (!isValid2) return;
-    const data = form.getValues();
+    const data = form.watch();
     const resp = { data, form };
     onClick(resp);
   };
@@ -6345,16 +6369,136 @@ var DynamicForm = ({
   if (!withCard) return formContent;
   return /* @__PURE__ */ jsxRuntime.jsx(Card, { children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: formContent }) });
 };
-var FormWrapper = ({ form, handleSubmit, children, readOnly }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Form, { ...form, children: /* @__PURE__ */ jsxRuntime.jsx(
+var FormWrapper = ({ form, handleSubmit, children, readOnly, debug }) => {
+  const allValues = form.watch();
+  return /* @__PURE__ */ jsxRuntime.jsx(Form, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "form",
     {
       onSubmit: form.handleSubmit(handleSubmit),
       className: `flex flex-col gap-2 ${readOnly ? "opacity-70 pointer-events-none select-none" : ""}`,
-      children
+      children: [
+        children,
+        debug && /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "mt-4 p-3 bg-muted text-xs rounded", children: JSON.stringify(allValues, null, 2) })
+      ]
     }
   ) });
 };
+function Stepper({ steps, currentStep, clickable = false, onStepClick }) {
+  const handleStepClick = (stepNumber) => {
+    if (clickable && onStepClick) {
+      onStepClick(stepNumber);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row gap-4 items-center justify-around", children: steps.map((step, index) => {
+    const stepNumber = index + 1;
+    const isCompleted = stepNumber < currentStep;
+    const isCurrent = stepNumber === currentStep;
+    const isUpcoming = stepNumber > currentStep;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            onClick: () => handleStepClick(stepNumber),
+            className: cn(
+              "flex size-10 items-center shadow-lg  justify-center rounded-full border-2 transition-all duration-300",
+              isCompleted && "border-primary bg-primary text-primary-foreground",
+              isCurrent && "border-primary bg-background text-primary scale-110",
+              isUpcoming && "border-muted-foreground/60 bg-background border-b text-muted-foreground",
+              clickable && "cursor-pointer hover:scale-125 hover:shadow-xl",
+              !clickable && "cursor-default"
+            ),
+            children: isCompleted ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-5" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: stepNumber })
+          }
+        ),
+        step.title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 text-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "text-sm font-medium transition-colors",
+                (isCompleted || isCurrent) && "text-foreground",
+                isUpcoming && "text-muted-foreground"
+              ),
+              children: step.title
+            }
+          ),
+          step.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-muted-foreground max-w-[120px]", children: step.description })
+        ] })
+      ] }),
+      index < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-2 flex-1 mb-8", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "h-0.5 w-full transition-all duration-300",
+            stepNumber < currentStep ? "bg-primary" : "bg-muted-foreground/30"
+          )
+        }
+      ) })
+    ] }, index);
+  }) }) });
+}
+var WizardForm = ({
+  fields,
+  record,
+  onSubmit
+}) => {
+  const [currentStep, setCurrentStep] = React3.useState(1);
+  const flattenFields4 = (list) => list.flatMap((f) => Array.isArray(f) ? flattenFields4(f) : f);
+  const allFields = flattenFields4(fields);
+  const totalSteps = allFields.reduce(
+    (max, f) => Math.max(max, f.step ?? 1),
+    1
+  );
+  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(
+      DynamicForm,
+      {
+        record,
+        formSubTitle: "This is a subtitle",
+        formTitle: "Wizard Form Example",
+        withCard: false,
+        errorAlertPosition: "down",
+        fields: stepFields,
+        onSubmit
+      }
+    )
+  ] });
+};
 var DynamicFormExample = () => {
   const record = {
     username: "John Doe ",
@@ -6805,6 +6949,7 @@ exports.Tooltip = Tooltip;
 exports.TooltipContent = TooltipContent;
 exports.TooltipProvider = TooltipProvider;
 exports.TooltipTrigger = TooltipTrigger;
+exports.WizardForm = WizardForm;
 exports.badgeVariants = badgeVariants;
 exports.buttonGroupVariants = buttonGroupVariants;
 exports.buttonVariants = buttonVariants;