shadcn-zod-formkit 1.3.0 → 1.5.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,15 @@ 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";
+  InputTypes2["REPEATER"] = "repeater";
   return InputTypes2;
 })(InputTypes || {});
 var inputFieldComp = [
+  "repeater" /* REPEATER */,
+  "key_value" /* KEY_VALUE */,
+  "currency" /* CURRENCY */,
   "button_group" /* BUTTON_GROUP */,
   "slider" /* SLIDER */,
   "file_multi_upload" /* FILE_MULTI_UPLOAD */,
@@ -1977,6 +1983,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 +3937,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;
@@ -3988,6 +4219,100 @@ var FieldRadioGroup = ({ input, form, isSubmitting }) => {
   );
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: formField });
 };
+var RepeaterInput = class extends BaseInput {
+  render() {
+    const { input, form, isSubmitting } = this;
+    return /* @__PURE__ */ jsxRuntime.jsx(FieldRepeater, { form, input, isSubmitting });
+  }
+};
+var FieldRepeater = ({ form, input, isSubmitting }) => {
+  const { control } = form;
+  const { fields, append, remove } = reactHookForm.useFieldArray({
+    control,
+    name: input.name
+  });
+  const canAdd = !input.maxItems || fields.length < input.maxItems;
+  const canRemove = fields.length > (input.minItems ?? 0);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FormField,
+    {
+      control,
+      name: input.name,
+      render: () => /* @__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("div", { className: "space-y-3", children: [
+          fields.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "border p-3 rounded-md flex flex-col gap-3",
+              children: [
+                input.repeaterFields?.map((fieldGroup, groupIndex) => {
+                  const group = Array.isArray(fieldGroup) ? fieldGroup : [fieldGroup];
+                  const cols = group.length;
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: `grid gap-3 grid-cols-${cols}`,
+                      children: group.map((subField) => /* @__PURE__ */ jsxRuntime.jsx(
+                        FormField,
+                        {
+                          control,
+                          name: `${input.name}.${index}.${subField.name}`,
+                          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,
+                              {
+                                placeholder: subField.placeHolder,
+                                disabled: subField.disabled || isSubmitting,
+                                ...field
+                              }
+                            ) }),
+                            /* @__PURE__ */ jsxRuntime.jsx(FormMessage, { children: fieldState.error?.message })
+                          ] })
+                        },
+                        `${input.name}.${index}.${subField.name}`
+                      ))
+                    },
+                    groupIndex
+                  );
+                }),
+                canRemove && /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "destructive",
+                    size: "icon",
+                    onClick: () => remove(index),
+                    className: "self-end",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { size: 18 })
+                  }
+                )
+              ]
+            },
+            item.id
+          )),
+          canAdd && /* @__PURE__ */ jsxRuntime.jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "secondary",
+              onClick: () => append({}),
+              disabled: isSubmitting,
+              className: "w-full",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { size: 16, className: "mr-2" }),
+                "Agregar"
+              ]
+            }
+          )
+        ] }) }),
+        input.description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { children: input.description }),
+        /* @__PURE__ */ jsxRuntime.jsx(FormMessage, {})
+      ] })
+    }
+  );
+};
 var SelectInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
@@ -4513,6 +4838,9 @@ 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,
+  ["repeater" /* REPEATER */]: RepeaterInput,
   //ToDos: ============================================================
   ["slider" /* SLIDER */]: SliderInput,
   //ToDo: // PENDIENTE ... VISUALMENTE NO SE VE BIEN.!!!
@@ -4522,7 +4850,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,
@@ -4605,6 +4932,11 @@ var getFieldLabel = (fieldErrorKey, fields) => {
   const findedField = fields.find((field) => field.name == fieldErrorKey);
   return findedField?.label ?? fieldErrorKey;
 };
+var FormFieldsGrid = ({ fields, form, isPending, className = "", gap = "gap-2" }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fields.map(
+    (input, idx) => Array.isArray(input) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-full  flex flex-row justify-between py-3", children: input.map((field, subIdx) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full px-2", children: InputFactory.create(field, form, isPending) }, subIdx)) }, `field-group-${idx}`) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex flex-col justify-between py-3 w-full px-2", children: InputFactory.create(input, form, isPending) }, `field-group-${idx}`)
+  ) });
+};
 var DynamicForm = ({
   formTitle,
   formSubTitle,
@@ -4647,9 +4979,7 @@ var DynamicForm = ({
     ] }),
     withErrorsAlert && errorAlertPosition == "up" && /* @__PURE__ */ jsxRuntime.jsx(FormErrorsAlert, { formState: form.formState, fields }),
     /* @__PURE__ */ jsxRuntime.jsx(Form, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: form.handleSubmit(handleSubmit), className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full grid grid-cols-1", children: fields.map(
-        (input, idx) => Array.isArray(input) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-full  flex flex-row justify-between py-3", children: input.map((field, subIdx) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full px-2", children: InputFactory.create(field, form, isPending) }, subIdx)) }, `field-group-${idx}`) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex flex-col justify-between py-3 w-full px-2", children: InputFactory.create(input, form, isPending) }, `field-group-${idx}`)
-      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full grid grid-cols-1", children: /* @__PURE__ */ jsxRuntime.jsx(FormFieldsGrid, { fields, form }) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row gap-2 justify-end items-end justify-items-end", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", size: "lg", className: submitBtnClass, disabled: isPending, children: isPending ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
         submitBtnLabel ?? "Saving..."