shadcn-zod-formkit 1.2.0 → 1.4.0

package/README.md

@@ -115,6 +115,8 @@ const mockFields: Array<FieldProps |FieldProps[]> = [
   | **Input Time**           |  `InputTypes.TIME`                 | 
   | **Upload Multi File**    |  `InputTypes.FILE_MULTI_UPLOAD`    | 
   | **Button Group**         |  `InputTypes.BUTTON_GROUP`         | 
+  | **Input Currency**       |  `InputTypes.CURRENCY`             | 
+  | **Input Key Value**      |  `InputTypes.KEY_VALUE`             | 
 
 
 

package/dist/index.cjs

@@ -263,9 +263,13 @@ var InputTypes = /* @__PURE__ */ ((InputTypes2) => {
   InputTypes2["FILE_MULTI_UPLOAD"] = "file_multi_upload";
   InputTypes2["SLIDER"] = "slider";
   InputTypes2["BUTTON_GROUP"] = "button_group";
+  InputTypes2["CURRENCY"] = "currency";
+  InputTypes2["KEY_VALUE"] = "key_value";
   return InputTypes2;
 })(InputTypes || {});
 var inputFieldComp = [
+  "key_value" /* KEY_VALUE */,
+  "currency" /* CURRENCY */,
   "button_group" /* BUTTON_GROUP */,
   "slider" /* SLIDER */,
   "file_multi_upload" /* FILE_MULTI_UPLOAD */,
@@ -1977,6 +1981,124 @@ var ColorComp = React3__namespace.default.forwardRef(
     ] });
   }
 );
+var CurrencyInput = class extends BaseInput {
+  render() {
+    const { input, form, isSubmitting } = this;
+    return /* @__PURE__ */ jsxRuntime.jsx(FieldCurrency, { input, form, isSubmitting });
+  }
+};
+var FieldCurrency = ({ form, input, isSubmitting }) => {
+  const groupConfig = input.inputGroupConfig;
+  input?.infoTooltip;
+  const autoValidate = groupConfig?.autoValidIcons;
+  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 [isValid2, setIsValid] = React3.useState(() => {
+    const value = form.getValues(input.name);
+    const fieldState = form.getFieldState(input.name);
+    return !fieldState.error && value !== void 0 && value !== "";
+  });
+  const defaultCurrencyFormat = {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  };
+  const mask = input?.mask;
+  const currencyFormat = input?.currencyFormat ?? defaultCurrencyFormat;
+  const [rawValue, setRawValue] = React3.useState(form.getValues(input.name) ?? "");
+  const formatter = React3.useMemo(() => {
+    return new Intl.NumberFormat("es-DO", currencyFormat);
+  }, [currencyFormat]);
+  const parseValue = (formatted) => {
+    const numeric = parseFloat(formatted.replace(/[^0-9.-]/g, ""));
+    return isNaN(numeric) ? null : numeric;
+  };
+  const formatValue = (value) => {
+    if (!value) return "";
+    const numeric = parseFloat(value.replace(/[^0-9.-]/g, ""));
+    if (isNaN(numeric)) return "";
+    if (typeof mask === "string") {
+      return mask.replace(/0+(?:[.,]0+)?/, formatter.format(numeric).replace(/[^\d.,]/g, ""));
+    }
+    if (mask instanceof RegExp) {
+      const valid = mask.test(value);
+      return valid ? value : rawValue;
+    }
+    return formatter.format(numeric);
+  };
+  const handleKeyDown = (e) => {
+    const allowedKeys = [
+      "Backspace",
+      "Delete",
+      "Tab",
+      "ArrowLeft",
+      "ArrowRight",
+      "Home",
+      "End"
+    ];
+    if (allowedKeys.includes(e.key)) return;
+    if (!/^[0-9.]$/.test(e.key)) {
+      e.preventDefault();
+      return;
+    }
+    if (e.key === "." && rawValue.includes(".")) {
+      e.preventDefault();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FormField,
+    {
+      control: form.control,
+      name: input.name,
+      render: ({ field, fieldState }) => {
+        const validNow = !fieldState.error && field.value !== void 0 && field.value !== "";
+        if (validNow !== isValid2) setIsValid(validNow);
+        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, { children: /* @__PURE__ */ jsxRuntime.jsxs(InputGroup, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(InputGroupAddon, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: "$" }),
+              input.inputGroupConfig?.textLeft && /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: input.inputGroupConfig.textLeft })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              InputGroupInput,
+              {
+                ...field,
+                disabled: input.disabled || isSubmitting,
+                placeholder: input.placeHolder ?? "0.00",
+                inputMode: "decimal",
+                value: rawValue,
+                onKeyDown: handleKeyDown,
+                onChange: (e) => {
+                  const newVal = e.target.value;
+                  setRawValue(newVal);
+                  const parsed = parseValue(newVal);
+                  if (parsed !== null) field.onChange(parsed);
+                },
+                onBlur: (e) => {
+                  const formatted = formatValue(e.target.value);
+                  setRawValue(formatted);
+                },
+                onFocus: (e) => {
+                  const numeric = e.target.value.replace(/[^0-9.-]/g, "");
+                  setRawValue(numeric);
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(InputGroupAddon, { align: "inline-end", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: currencyFormat.currency }),
+              input.inputGroupConfig?.textRight && /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: input.inputGroupConfig.textRight }),
+              autoValidate && /* @__PURE__ */ jsxRuntime.jsx("div", { children: isSubmitting ? iconLoadingState : isValid2 ? iconValidState : iconInvalidState })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(FormMessage, {})
+        ] });
+      }
+    }
+  );
+};
 var millisecondsInWeek = 6048e5;
 var millisecondsInDay = 864e5;
 var constructFromSymbol = Symbol.for("constructDateFrom");
@@ -3813,6 +3935,113 @@ var FieldFileMultiUpload = ({ input, form, isSubmitting }) => {
   );
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: formField });
 };
+var KeyValueListInput = class extends BaseInput {
+  render() {
+    const { input, form, isSubmitting } = this;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      FieldKeyValueList,
+      {
+        input,
+        form,
+        isSubmitting
+      }
+    );
+  }
+};
+var FieldKeyValueList = ({ form, input, isSubmitting }) => {
+  const fieldName = input.name;
+  React3.useEffect(() => {
+    const current = form.getValues(fieldName);
+    if (!Array.isArray(current)) {
+      form.setValue(fieldName, []);
+    }
+  }, [form, fieldName]);
+  const handleAddPair = () => {
+    const current = form.getValues(fieldName) || [];
+    form.setValue(fieldName, [...current, { key: "", value: "" }]);
+  };
+  const handleRemovePair = (index) => {
+    const current = form.getValues(fieldName) || [];
+    const updated = current.filter((_, i) => i !== index);
+    form.setValue(fieldName, updated);
+  };
+  const handleChange = (index, fieldType, newValue) => {
+    const current = form.getValues(fieldName) || [];
+    const updated = current.map(
+      (item, i) => i === index ? { ...item, [fieldType]: newValue } : item
+    );
+    form.setValue(fieldName, updated);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FormField,
+    {
+      control: form.control,
+      name: fieldName,
+      render: () => {
+        const pairs = form.watch(fieldName) || [];
+        return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: input.className, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(FormMessage, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 shadow-lg rounded-xl p-3 bg-white", children: [
+            pairs.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "No pairs have been added yet." }),
+            pairs.map((pair, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "flex gap-2 items-center",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Input,
+                    {
+                      placeholder: "Key",
+                      value: pair.key,
+                      disabled: isSubmitting,
+                      onChange: (e) => handleChange(index, "key", e.target.value),
+                      className: "w-1/2"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Input,
+                    {
+                      placeholder: "Value",
+                      value: pair.value,
+                      disabled: isSubmitting,
+                      onChange: (e) => handleChange(index, "value", e.target.value),
+                      className: "w-1/2"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "destructive",
+                      size: "icon",
+                      onClick: () => handleRemovePair(index),
+                      disabled: isSubmitting,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { size: 18 })
+                    }
+                  )
+                ]
+              },
+              index
+            )),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                type: "button",
+                variant: "outline",
+                size: "sm",
+                onClick: handleAddPair,
+                disabled: isSubmitting,
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { size: 18, className: "mr-1" })
+              }
+            ) })
+          ] }) }),
+          input.description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { children: input.description })
+        ] });
+      }
+    }
+  );
+};
 var TextInputGroup = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
@@ -3835,6 +4064,9 @@ var FieldTextGroup = ({ form, input, isSubmitting }) => {
     const fieldState = form.getFieldState(input.name);
     return !fieldState.error && value !== void 0 && value !== "";
   });
+  const [showPassword, setShowPassword] = React3.useState(false);
+  const isPasswordField = input.keyboardType === "password";
+  const showInputGroupAddons = iconsRight.length > 0 || textRight || autoValidate || infoTooltip || isPasswordField;
   const formField = /* @__PURE__ */ jsxRuntime.jsx(
     FormField,
     {
@@ -3856,16 +4088,25 @@ var FieldTextGroup = ({ form, input, isSubmitting }) => {
                 placeholder: input.placeHolder,
                 disabled: input.disabled || isSubmitting,
                 ...field,
-                type: input.keyboardType
+                type: isPasswordField && !showPassword ? "password" : "text"
               }
             ),
-            (iconsRight.length > 0 || textRight || autoValidate || infoTooltip) && /* @__PURE__ */ jsxRuntime.jsxs(InputGroupAddon, { align: "inline-end", children: [
+            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 })
             ] })
           ] }) }),
@@ -4501,6 +4742,8 @@ var inputMap = {
   ["time" /* TIME */]: TimeInput,
   ["file_multi_upload" /* FILE_MULTI_UPLOAD */]: FileMultiUploadInput,
   ["button_group" /* BUTTON_GROUP */]: ButtonGroupInput,
+  ["currency" /* CURRENCY */]: CurrencyInput,
+  ["key_value" /* KEY_VALUE */]: KeyValueListInput,
   //ToDos: ============================================================
   ["slider" /* SLIDER */]: SliderInput,
   //ToDo: // PENDIENTE ... VISUALMENTE NO SE VE BIEN.!!!
@@ -4510,7 +4753,6 @@ var inputMap = {
   // [InputTypes.SWITCH_LIST]: SwitchListInput,
   // [InputTypes.RANGE]: TextInput,
   // [InputTypes.MULTISELECT]: TextInput,
-  // [InputTypes.CURRENCY]: TextInput,
   // [InputTypes.IMAGE_UPLOAD]: TextInput,
   // [InputTypes.AUDIO_UPLOAD]: TextInput,
   // [InputTypes.VIDEO_UPLOAD]: TextInput,