shadcn-zod-formkit 1.29.0 → 1.30.1

package/dist/index.cjs

@@ -2221,6 +2221,10 @@ var ColorInput = class extends BaseInput {
   }
 };
 var PRESET_COLORS = [
+  "#9A275A",
+  // QuinaMagenta
+  "#800000",
+  // Maroon
   "#ef4444",
   // red
   "#f97316",
@@ -2229,18 +2233,32 @@ var PRESET_COLORS = [
   // yellow
   "#22c55e",
   // green
+  "#99EDCC",
+  // Aquamarine
+  "#00FF00",
+  // lime
+  "#00FFFF",
+  // Aqua
   "#06b6d4",
   // cyan
   "#3b82f6",
   // blue
   "#8b5cf6",
   // purple
+  "#800080",
+  // purple
+  "#FF00FF",
+  // Fuchsia
   "#ec4899",
   // pink
   "#64748b",
   // slate
-  "#000000"
+  "#000000",
   // black
+  "#808080",
+  // Gray
+  "#FFFFFF"
+  // White
 ];
 var FieldColor = ({ form, input, isSubmitting }) => {
   const [ColorCmp, _setColorCmp] = React3.useState(ColorComp);
@@ -2293,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 },
@@ -4564,6 +4582,111 @@ var FieldFileMultiUpload = ({ input, form, isSubmitting }) => {
   );
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: formField });
 };
+var TextInputGroup = class extends BaseInput {
+  render() {
+    const { input, form, isSubmitting } = this;
+    return /* @__PURE__ */ jsxRuntime.jsx(FieldTextGroup, { input, form, isSubmitting });
+  }
+};
+var FieldTextGroup = ({ form, input, isSubmitting }) => {
+  const [isValid2, setIsValid] = React3.useState(isValidField(input, form));
+  const formField = /* @__PURE__ */ jsxRuntime.jsx(
+    FormField,
+    {
+      control: form.control,
+      name: input.name,
+      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: CustomInputGroup({
+            input,
+            isSubmitting,
+            field,
+            form,
+            isValid: isValid2
+          }) }),
+          input.description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { children: input.description }),
+          /* @__PURE__ */ jsxRuntime.jsx(FormMessage, {})
+        ] });
+      }
+    },
+    input.name
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: formField });
+};
+var CustomInputGroup = ({
+  value,
+  input,
+  field,
+  form,
+  isSubmitting,
+  onChange,
+  isValid: isValid2
+}) => {
+  const groupConfig = input.inputGroupConfig;
+  const infoTooltip = input?.infoTooltip;
+  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 ?? [];
+  const iconsLeft = groupConfig?.iconsLeft ?? [];
+  const textLeft = groupConfig?.textLeft;
+  const textRight = groupConfig?.textRight;
+  const [showPassword, setShowPassword] = React3.useState(false);
+  const isPasswordField = input.keyboardType === "password" /* PASSWORD */;
+  const isNumberField = input.keyboardType === "number" /* NUMBER */;
+  const showInputGroupAddons = iconsRight.length > 0 || textRight || autoValidate || infoTooltip || isPasswordField;
+  return /* @__PURE__ */ jsxRuntime.jsxs(InputGroup, { children: [
+    (iconsLeft.length > 0 || textLeft) && /* @__PURE__ */ jsxRuntime.jsxs(InputGroupAddon, { children: [
+      textLeft && /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: textLeft }),
+      iconsLeft.map((IconComponent, index) => /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 20 }, index))
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      InputGroupInput,
+      {
+        placeholder: input.placeHolder,
+        disabled: input.disabled || isSubmitting,
+        onBlur: field?.onBlur,
+        name: field?.name,
+        ref: field?.ref,
+        type: isPasswordField && !showPassword ? "password" : isNumberField ? "number" : "text",
+        value: field?.value ?? value ?? "",
+        onChange: (e) => {
+          if (onChange) {
+            onChange(e);
+          }
+          let value2 = e.target.value;
+          if (isNumberField) {
+            value2 = e.target.value === "" ? "" : Number(e.target.value);
+          }
+          field?.onChange(value2);
+          isValidField(input, form);
+          handleOnChage(value2, input, field);
+        }
+      }
+    ),
+    showInputGroupAddons && /* @__PURE__ */ jsxRuntime.jsxs(InputGroupAddon, { align: "inline-end", 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 }) })
+      ] }),
+      textRight && /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: textRight }),
+      iconsRight.map((IconComponent, index) => /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 20 }, index)),
+      isPasswordField && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowPassword(!showPassword),
+          className: "p-1",
+          children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { size: 20 })
+        }
+      ),
+      autoValidate && /* @__PURE__ */ jsxRuntime.jsx("div", { children: isSubmitting ? iconLoadingState : isValid2 ? iconValidState : iconInvalidState })
+    ] })
+  ] });
+};
 var KeyValueListInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
@@ -4620,29 +4743,33 @@ var FieldKeyValueList = ({ form, input, isSubmitting }) => {
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsxs(ButtonGroup, { className: "w-full", children: [
                     /* @__PURE__ */ jsxRuntime.jsx(ButtonGroupText, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(LabelPrimitive.Label, { htmlFor: "key", children: "Key" }) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(InputGroup, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                      InputGroupInput,
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      CustomInputGroup,
                       {
-                        placeholder: "Key",
+                        autoValidate: true,
                         value: pair.key,
-                        disabled: isSubmitting,
+                        input,
+                        isValid: pair.key.trim() != "",
+                        isSubmitting,
                         onChange: (e) => handleChange(index, "key", e.target.value),
-                        className: "flex-1"
+                        form
                       }
-                    ) })
+                    )
                   ] }),
                   /* @__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(
-                      InputGroupInput,
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      CustomInputGroup,
                       {
-                        placeholder: "Value",
+                        autoValidate: true,
                         value: pair.value,
-                        disabled: isSubmitting,
+                        input,
+                        isValid: pair.value.trim() != "",
+                        isSubmitting,
                         onChange: (e) => handleChange(index, "value", e.target.value),
-                        className: "flex-1"
+                        form
                       }
-                    ) })
+                    )
                   ] }),
                   input.isRemovebleOption && /* @__PURE__ */ jsxRuntime.jsx(
                     Button,
@@ -4773,111 +4900,6 @@ var FieldMultiSelect = ({ form, input, isSubmitting }) => {
     input.name
   );
 };
-var TextInputGroup = class extends BaseInput {
-  render() {
-    const { input, form, isSubmitting } = this;
-    return /* @__PURE__ */ jsxRuntime.jsx(FieldTextGroup, { input, form, isSubmitting });
-  }
-};
-var FieldTextGroup = ({ form, input, isSubmitting }) => {
-  const [isValid2, setIsValid] = React3.useState(isValidField(input, form));
-  const formField = /* @__PURE__ */ jsxRuntime.jsx(
-    FormField,
-    {
-      control: form.control,
-      name: input.name,
-      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: CustomInputGroup({
-            input,
-            isSubmitting,
-            field,
-            form,
-            isValid: isValid2
-          }) }),
-          input.description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { children: input.description }),
-          /* @__PURE__ */ jsxRuntime.jsx(FormMessage, {})
-        ] });
-      }
-    },
-    input.name
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: formField });
-};
-var CustomInputGroup = ({
-  value,
-  input,
-  field,
-  form,
-  isSubmitting,
-  onChange,
-  isValid: isValid2
-}) => {
-  const groupConfig = input.inputGroupConfig;
-  const infoTooltip = input?.infoTooltip;
-  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 ?? [];
-  const iconsLeft = groupConfig?.iconsLeft ?? [];
-  const textLeft = groupConfig?.textLeft;
-  const textRight = groupConfig?.textRight;
-  const [showPassword, setShowPassword] = React3.useState(false);
-  const isPasswordField = input.keyboardType === "password" /* PASSWORD */;
-  const isNumberField = input.keyboardType === "number" /* NUMBER */;
-  const showInputGroupAddons = iconsRight.length > 0 || textRight || autoValidate || infoTooltip || isPasswordField;
-  return /* @__PURE__ */ jsxRuntime.jsxs(InputGroup, { children: [
-    (iconsLeft.length > 0 || textLeft) && /* @__PURE__ */ jsxRuntime.jsxs(InputGroupAddon, { children: [
-      textLeft && /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: textLeft }),
-      iconsLeft.map((IconComponent, index) => /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 20 }, index))
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      InputGroupInput,
-      {
-        placeholder: input.placeHolder,
-        disabled: input.disabled || isSubmitting,
-        onBlur: field?.onBlur,
-        name: field?.name,
-        ref: field?.ref,
-        type: isPasswordField && !showPassword ? "password" : isNumberField ? "number" : "text",
-        value: field?.value ?? value ?? "",
-        onChange: (e) => {
-          if (onChange) {
-            onChange(e);
-          }
-          let value2 = e.target.value;
-          if (isNumberField) {
-            value2 = e.target.value === "" ? "" : Number(e.target.value);
-          }
-          field?.onChange(value2);
-          isValidField(input, form);
-          handleOnChage(value2, input, field);
-        }
-      }
-    ),
-    showInputGroupAddons && /* @__PURE__ */ jsxRuntime.jsxs(InputGroupAddon, { align: "inline-end", 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 }) })
-      ] }),
-      textRight && /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: textRight }),
-      iconsRight.map((IconComponent, index) => /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 20 }, index)),
-      isPasswordField && /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => setShowPassword(!showPassword),
-          className: "p-1",
-          children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { size: 20 })
-        }
-      ),
-      autoValidate && /* @__PURE__ */ jsxRuntime.jsx("div", { children: isSubmitting ? iconLoadingState : isValid2 ? iconValidState : iconInvalidState })
-    ] })
-  ] });
-};
 var NumberInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
@@ -4990,6 +5012,10 @@ var FieldRepeater = ({ form, input, isSubmitting }) => {
   });
   const canAdd = !input.maxItems || fields.length < input.maxItems;
   const canRemove = fields.length > (input.minItems ?? 0);
+  const [isValid2, setIsValid] = React3.useState(isValidField(input, form));
+  React3.useEffect(() => {
+    setIsValid(isValidField(input, form));
+  }, [input]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     FormField,
     {
@@ -5009,7 +5035,7 @@ var FieldRepeater = ({ form, input, isSubmitting }) => {
                   return /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
-                      className: `grid gap-3 grid-cols-${cols}`,
+                      className: `grid gap-1 grid-cols-${cols}`,
                       children: group.map((subField) => /* @__PURE__ */ jsxRuntime.jsx(
                         FormField,
                         {
@@ -5018,11 +5044,14 @@ var FieldRepeater = ({ form, input, isSubmitting }) => {
                           render: ({ field, fieldState }) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: "flex-1", children: [
                             /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { children: subField.label }),
                             /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                              Input,
+                              CustomInputGroup,
                               {
-                                placeholder: subField.placeHolder,
-                                disabled: subField.disabled || isSubmitting,
-                                ...field
+                                autoValidate: true,
+                                value: field.value,
+                                input: subField,
+                                isValid: isValid2,
+                                field,
+                                form
                               }
                             ) }),
                             /* @__PURE__ */ jsxRuntime.jsx(FormMessage, { children: fieldState.error?.message })
@@ -5740,7 +5769,7 @@ var FieldSwitch = ({ input, form, isSubmitting }) => {
             onCheckedChange: (event) => {
               handleOnChage(event, input, field);
             },
-            disabled: false
+            disabled: input.disabled || isSubmitting
           }
         ) })
       ] }) })
@@ -6332,6 +6361,122 @@ var FormWrapper = ({ form, handleSubmit, children, readOnly }) => {
     }
   ) });
 };
+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 ",
@@ -6782,6 +6927,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;