shadcn-zod-formkit 3.5.4 → 3.7.0

package/dist/index.cjs

@@ -9229,7 +9229,7 @@ var require_leaflet_src = __commonJS({
         // Amount of pixels to pan when pressing an arrow key.
         keyboardPanDelta: 80
       });
-      var Keyboard2 = Handler.extend({
+      var Keyboard3 = Handler.extend({
         keyCodes: {
           left: [37],
           right: [39],
@@ -9347,7 +9347,7 @@ var require_leaflet_src = __commonJS({
           stop(e);
         }
       });
-      Map2.addInitHook("addHandler", "keyboard", Keyboard2);
+      Map2.addInitHook("addHandler", "keyboard", Keyboard3);
       Map2.mergeOptions({
         // @section Mouse wheel options
         // @option scrollWheelZoom: Boolean|String = true
@@ -9565,7 +9565,7 @@ var require_leaflet_src = __commonJS({
       Map2.BoxZoom = BoxZoom;
       Map2.DoubleClickZoom = DoubleClickZoom;
       Map2.Drag = Drag;
-      Map2.Keyboard = Keyboard2;
+      Map2.Keyboard = Keyboard3;
       Map2.ScrollWheelZoom = ScrollWheelZoom;
       Map2.TapHold = TapHold;
       Map2.TouchZoom = TouchZoom;
@@ -10132,11 +10132,10 @@ var useKeyboardStore = zustand.create((set, get) => ({
   currentInputField: null,
   setCurrentInputField(inputField) {
     set({ currentInputField: inputField });
-    console.log("Current Input Field set to:", inputField);
   },
   isOpen: false,
-  setIsOpen() {
-    set({ isOpen: !get().isOpen });
+  setIsOpen(open) {
+    set({ isOpen: open ?? !get().isOpen });
   },
   registerInput: (id, initialValue = "") => set((state) => ({
     inputs: {
@@ -10155,7 +10154,6 @@ var useKeyboardStore = zustand.create((set, get) => ({
     if (currentInputField && currentInputField.field) {
       currentInputField.field.value += char;
       set({ currentInputField });
-      console.log("Updated currentInputField value:", state.currentInputField?.field?.value);
     }
     if (!state.activeInput) return state;
     const current = state.inputs[state.activeInput] || "";
@@ -10167,8 +10165,14 @@ var useKeyboardStore = zustand.create((set, get) => ({
     };
   }),
   backspace: () => set((state) => {
+    let currentInputField = state.currentInputField;
+    if (currentInputField && currentInputField.field) {
+      currentInputField.field.value = currentInputField.field.value.slice(0, -1);
+      set({ currentInputField });
+    }
     if (!state.activeInput) return state;
     const current = state.inputs[state.activeInput] || "";
+    console.log("RUN BACKSPACE - current value:", current);
     return {
       inputs: {
         ...state.inputs,
@@ -10201,8 +10205,54 @@ var KeyboardQwerty = ({ onKeyPress, onEnter, keyFontSize: keyFontSize3 = "text-2
   const [shiftMode, setShiftMode] = React3.useState("off");
   const [mode, setMode] = React3.useState("letters");
   const lastShiftPress = React3.useRef(0);
-  const { currentInputField, write } = useKeyboardStore();
+  const { currentInputField, write, setIsOpen, backspace } = useKeyboardStore();
   const isUpper = shiftMode !== "off";
+  React3.useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (!currentInputField) return;
+      const key = e.key;
+      if (key === "Enter") {
+        e.preventDefault();
+        onEnter?.();
+        return;
+      }
+      console.log("\u{1F680} ~ handleKeyDown ~ key:", key);
+      if (key === "Backspace") {
+        backspace();
+        e.preventDefault();
+        onDelete?.();
+        return;
+      }
+      if (key === " ") {
+        e.preventDefault();
+        handleKey(" ");
+        return;
+      }
+      if (key === "Shift") {
+        handleShift();
+        return;
+      }
+      if (key === "CapsLock") {
+        handleCaps();
+        return;
+      }
+      if (key === "Tab") {
+        e.preventDefault();
+        return;
+      }
+      if (key === "Escape") {
+        setIsOpen(false);
+        return;
+      }
+      if (key.length === 1) {
+        handleKey(key);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [currentInputField, shiftMode]);
   const handleShift = () => {
     const now = Date.now();
     if (now - lastShiftPress.current < 300) {
@@ -10217,15 +10267,18 @@ var KeyboardQwerty = ({ onKeyPress, onEnter, keyFontSize: keyFontSize3 = "text-2
     const output = isUpper ? key.toUpperCase() : key;
     onKeyPress?.(output);
     write(output);
-    if (shiftMode === "once") {
-      setShiftMode("off");
-    }
+    if (shiftMode === "once") setShiftMode("off");
   };
   const handleCaps = () => {
     setShiftMode((prev) => prev === "caps" ? "off" : "caps");
   };
   const shiftLabel = shiftMode === "caps" ? lucideReact.ArrowBigUpDash : lucideReact.ArrowBigUp;
   const shiftActive = shiftMode !== "off";
+  const textField = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: currentInputField && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 h-full min-h-16 flex-1 flex flex-row text-2xl font-bold justify-center text-center items-center gap-2 rounded-xl border-2 transition-all  outline-none border-amber-400 bg-amber-50 ", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+    " ",
+    currentInputField.field?.value,
+    " "
+  ] }) }) });
   if (mode === "symbols") {
     const keys = [
       ["!", "@", "#", "$", "%", "^", "&", "*", "(", ")"],
@@ -10237,32 +10290,31 @@ var KeyboardQwerty = ({ onKeyPress, onEnter, keyFontSize: keyFontSize3 = "text-2
         onClick: () => handleKey(k)
       }))
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      KeyboardBuilder,
-      {
-        className: "w-full h-full",
-        keyFontSize: keyFontSize3,
-        keys: [
-          ...keys,
-          [
-            { label: "ABC", onClick: () => setMode("letters"), className: "flex-[2]" },
-            { label: " ", onClick: () => handleKey(" "), className: "flex-[4]" },
-            { label: "Enter", onClick: onEnter, className: "flex-[2] bg-green-200 " }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full h-full flex flex-col", children: [
+      textField,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        KeyboardBuilder,
+        {
+          className: "w-full h-full",
+          keyFontSize: keyFontSize3,
+          keys: [
+            ...keys,
+            [
+              { label: "ABC", onClick: () => setMode("letters"), className: "flex-[2]" },
+              { label: " ", onClick: () => handleKey(" "), className: "flex-[4]" },
+              { label: "Enter", onClick: onEnter, className: "flex-[2] bg-green-200 " }
+            ]
           ]
-        ]
-      }
-    ) });
+        }
+      )
+    ] });
   }
   const fila1 = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"].map((l) => letter(l, isUpper, handleKey));
   const fila2 = ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"].map((l) => letter(l, isUpper, handleKey));
   const fila3 = ["a", "s", "d", "f", "g", "h", "j", "k", "l"].map((l) => letter(l, isUpper, handleKey));
   const fila4 = ["z", "x", "c", "v", "b", "n", "m"].map((l) => letter(l, isUpper, handleKey));
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full h-full flex flex-col", children: [
-    currentInputField && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 h-full flex-1 flex flex-row text-2xl font-bold justify-center text-center items-center gap-2 rounded-xl border-2 transition-all  outline-none border-amber-400 bg-amber-50 ", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-      " ",
-      currentInputField.field?.value,
-      " "
-    ] }) }),
+    textField,
     /* @__PURE__ */ jsxRuntime.jsx(
       KeyboardBuilder,
       {
@@ -10271,6 +10323,7 @@ var KeyboardQwerty = ({ onKeyPress, onEnter, keyFontSize: keyFontSize3 = "text-2
         keys: [
           [
             { label: "esc", onClick: () => {
+              setIsOpen(false);
             }, className: "bg-red-200" },
             ...fila1
           ],
@@ -13161,64 +13214,28 @@ var CurrencyInput = class extends BaseInput {
   }
 };
 var FieldCurrency = ({ form, input, isSubmitting }) => {
-  const groupConfig = input.inputGroupConfig;
-  input?.infoTooltip;
-  const autoValidate = groupConfig?.autoValidIcons;
+  const setIsOpen = useKeyboardStore((state) => state.setIsOpen);
+  const setCurrentInputField = useKeyboardStore((state) => state.setCurrentInputField);
+  const withKeyboard = input.withKeyboard;
+  const autoValidate = input.inputGroupConfig?.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 [isValid, 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 new Intl.NumberFormat("es-DO", {
+      style: "currency",
+      currency: input?.currencyFormat?.currency ?? "USD",
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    });
+  }, [input?.currencyFormat]);
+  const parseValue = (val) => {
+    const numeric = parseFloat(val.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();
-    }
+  const formatValue = (val) => {
+    if (val === null || val === void 0) return "";
+    return formatter.format(val);
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
     FormField,
@@ -13226,44 +13243,55 @@ var FieldCurrency = ({ form, input, isSubmitting }) => {
       control: form.control,
       name: input.name,
       render: ({ field, fieldState }) => {
-        const validNow = !fieldState.error && field.value !== void 0 && field.value !== "";
-        if (validNow !== isValid) setIsValid(validNow);
-        return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: input.className, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
+        const [displayValue, setDisplayValue] = React3.useState(() => {
+          return field.value ? formatValue(field.value) : "";
+        });
+        const isValid = !fieldState.error && field.value !== void 0 && field.value !== "";
+        return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: `${input.withLateralLabel ? "flex items-center gap-2" : ""} ${input.className}`, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: `${input.withLateralLabel ? "w-32 text-right" : ""}`, 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(InputGroupAddon, { children: /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: "$" }) }),
             /* @__PURE__ */ jsxRuntime.jsx(
               InputGroupInput,
               {
-                ...field,
+                ref: field.ref,
+                name: field.name,
                 disabled: input.disabled || isSubmitting,
-                placeholder: input.placeHolder ?? "0.00",
+                placeholder: "0.00",
                 inputMode: "decimal",
-                value: rawValue,
-                onKeyDown: handleKeyDown,
+                value: displayValue,
+                onFocus: (e) => {
+                  const raw = field.value ? String(field.value) : "";
+                  setDisplayValue(raw);
+                  setCurrentInputField({ input, field });
+                },
                 onChange: (e) => {
-                  const newVal = e.target.value;
-                  setRawValue(newVal);
-                  const parsed = parseValue(newVal);
-                  if (parsed !== null) field.onChange(parsed);
+                  const val = e.target.value;
+                  setDisplayValue(val);
+                  const parsed = parseValue(val);
+                  field.onChange(parsed);
                   handleOnChage(parsed, input, field);
                 },
-                onBlur: (e) => {
-                  const formatted = formatValue(e.target.value);
-                  setRawValue(formatted);
-                },
-                onFocus: (e) => {
-                  const numeric = e.target.value.replace(/[^0-9.-]/g, "");
-                  setRawValue(numeric);
+                onBlur: () => {
+                  const formatted = formatValue(field.value);
+                  setDisplayValue(formatted);
                 }
               }
             ),
             /* @__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 }),
+              /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: input?.currencyFormat?.currency ?? "USD" }),
+              withKeyboard && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "text-2xl",
+                  onClick: () => {
+                    setIsOpen();
+                    setCurrentInputField({ input, field });
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Keyboard, {})
+                }
+              ),
               autoValidate && /* @__PURE__ */ jsxRuntime.jsx("div", { children: isSubmitting ? iconLoadingState : isValid ? iconValidState : iconInvalidState })
             ] })
           ] }) }),
@@ -13603,9 +13631,9 @@ var FieldTextGroup = ({ form, input, isSubmitting }) => {
       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({
+        return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: `${input.withLateralLabel ? "flex items-center gap-2 flex-row" : ""} ${input.className}`, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: `${input.withLateralLabel ? "text-right" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(FormControl, { className: `shadow-lg ${input.withLateralLabel ? " text-right" : ""}`, children: CustomInputGroup({
             input,
             isSubmitting,
             field,
@@ -13646,7 +13674,7 @@ var CustomInputGroup = ({
   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;
+  const showInputGroupAddons = iconsRight.length > 0 || textRight || autoValidate || infoTooltip || isPasswordField || withKeyboard;
   const setIsOpen = useKeyboardStore((state) => state.setIsOpen);
   const setCurrentInputField = useKeyboardStore((state) => state.setCurrentInputField);
   const applyMask = (value2, mask) => {
@@ -13728,6 +13756,7 @@ var CustomInputGroup = ({
             onChange(e);
           }
           let value2 = e.target.value;
+          console.log("Valor raw del input:", value2);
           if (isNumberField) {
             const numConfig = input.inputNumberConfig;
             const cleanValue = value2.replace(/[^\d.-]/g, "");
@@ -14887,12 +14916,12 @@ function FieldTextArea({ form, input, isSubmitting }) {
     {
       control: form.control,
       name: input.name,
-      render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: "shadow-lg", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
+      render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: `shadow-lg ${input.withLateralLabel ? "flex items-center gap-2" : ""} ${input.className}`, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { className: `${input.withLateralLabel ? "w-32 text-right" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
         /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
           Textarea,
           {
-            className: "min-w-[260px] bg-white",
+            className: "min-w-[260px]",
             placeholder: input.placeHolder,
             ...field,
             onChange: (event) => {
@@ -16620,7 +16649,8 @@ var FormFieldsGrid = ({
   isPending,
   readOnly,
   className = "",
-  gap = "gap-2"
+  gap = "gap-2",
+  py = "py-1"
 }) => {
   const values = form.watch();
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full grid grid-cols-1 ${gap} ${className}`, children: fields.map((inputOrGroup, idx) => {
@@ -16632,7 +16662,7 @@ var FormFieldsGrid = ({
       return /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: "w-full flex flex-row items-start gap-4 py-3",
+          className: `w-full flex flex-row items-start gap-4 ${py}`,
           children: visibleFields.map((field, subIdx) => {
             const fieldCopy2 = {
               ...field,
@@ -16933,7 +16963,8 @@ var DynamicForm = ({
         {
           fields,
           form,
-          readOnly
+          readOnly,
+          gap: "gap-1"
         }
       ),
       children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center gap-2 w-full h-full", children })
@@ -16985,7 +17016,7 @@ var DynamicForm = ({
           formSubTitle && /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: formSubTitle })
         ] })
       ] }),
-      childrenHeader && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center gap-2 w-full h-full", children: childrenHeader })
+      childrenHeader && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center gap-1 w-full h-full", children: childrenHeader })
     ] }),
     withErrorsAlert && errorAlertPosition === "up" && /* @__PURE__ */ jsxRuntime.jsx(
       FormErrorsAlert,
@@ -17021,7 +17052,7 @@ var FormWrapper = ({ form, handleSubmit, children, readOnly, debug, isWrapInWiza
     "form",
     {
       onSubmit: form.handleSubmit(handleSubmit),
-      className: `flex flex-col gap-2 ${readOnly ? "opacity-70 pointer-events-none select-none" : ""}`,
+      className: `flex flex-col gap-1 ${readOnly ? "opacity-70 pointer-events-none select-none" : ""}`,
       children: [
         children,
         debug && /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "mt-4 p-3 bg-muted text-xs rounded", children: JSON.stringify(allValues, null, 2) })