shadcn-zod-formkit 3.6.0 → 3.8.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 Keyboard3 = Handler.extend({
+      var Keyboard4 = Handler.extend({
         keyCodes: {
           left: [37],
           right: [39],
@@ -9347,7 +9347,7 @@ var require_leaflet_src = __commonJS({
           stop(e);
         }
       });
-      Map2.addInitHook("addHandler", "keyboard", Keyboard3);
+      Map2.addInitHook("addHandler", "keyboard", Keyboard4);
       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 = Keyboard3;
+      Map2.Keyboard = Keyboard4;
       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: {
@@ -10150,12 +10149,29 @@ var useKeyboardStore = zustand.create((set, get) => ({
     return { inputs: newInputs };
   }),
   focusInput: (id) => set({ activeInput: id }),
+  // write: (char) =>
+  //   set((state) => {
+  //     const current = state.currentInputField;
+  //     if (!current?.field) return state;
+  //     const newValue = (current.field.value ?? "") + char;
+  //     current.field.onChange(newValue); // 🔥 RHF update
+  //     return {
+  //       currentInputField: {
+  //         ...current,
+  //         field: {
+  //           ...current.field,
+  //           value: newValue
+  //         }
+  //       }
+  //     };
+  // }),
   write: (char) => set((state) => {
     let currentInputField = state.currentInputField;
     if (currentInputField && currentInputField.field) {
       currentInputField.field.value += char;
+      const newValue = currentInputField.field.value;
       set({ currentInputField });
-      console.log("Updated currentInputField value:", state.currentInputField?.field?.value);
+      currentInputField.field.onChange(newValue);
     }
     if (!state.activeInput) return state;
     const current = state.inputs[state.activeInput] || "";
@@ -10167,8 +10183,16 @@ var useKeyboardStore = zustand.create((set, get) => ({
     };
   }),
   backspace: () => set((state) => {
+    let currentInputField = state.currentInputField;
+    if (currentInputField && currentInputField.field) {
+      const newValue = currentInputField.field.value.slice(0, -1);
+      currentInputField.field.value = newValue;
+      set({ currentInputField });
+      currentInputField.field.onChange(newValue);
+    }
     if (!state.activeInput) return state;
     const current = state.inputs[state.activeInput] || "";
+    console.log("RUN BACKSPACE - current value:", current);
     return {
       inputs: {
         ...state.inputs,
@@ -10201,8 +10225,53 @@ 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;
+      }
+      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) {
@@ -10213,19 +10282,21 @@ var KeyboardQwerty = ({ onKeyPress, onEnter, keyFontSize: keyFontSize3 = "text-2
     lastShiftPress.current = now;
   };
   const handleKey = (key) => {
-    console.log("Key pressed:", key);
     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 +10308,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 +10341,7 @@ var KeyboardQwerty = ({ onKeyPress, onEnter, keyFontSize: keyFontSize3 = "text-2
         keys: [
           [
             { label: "esc", onClick: () => {
+              setIsOpen(false);
             }, className: "bg-red-200" },
             ...fila1
           ],
@@ -13563,6 +13634,104 @@ var FieldFileMultiUpload = ({ input, form, isSubmitting }) => {
   );
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: formField });
 };
+var FakeInput = ({ input, field, form, isValid, isSubmitting }) => {
+  const ref = React3.useRef(null);
+  const {
+    setCurrentInputField,
+    write,
+    backspace,
+    setIsOpen,
+    currentInputField
+  } = useKeyboardStore();
+  const [isFocused, setIsFocused] = React3.useState(false);
+  const [showPassword, setShowPassword] = React3.useState(false);
+  const isPasswordField = input.keyboardType === "password" /* PASSWORD */ || input.inputType == "password" /* PASSWORD */;
+  input.zodType ? true : false;
+  const value = input?.value ?? field?.value ?? "";
+  const handleFocus = () => {
+    setIsFocused(true);
+    setCurrentInputField({
+      input,
+      field
+    });
+  };
+  const handleBlur = () => {
+    setIsFocused(false);
+  };
+  React3.useEffect(() => {
+    if (!isFocused) return;
+    const handleKeyDown = (e) => {
+      e.preventDefault();
+      if (e.key === "Backspace") {
+        backspace?.();
+        return;
+      }
+      if (e.key === "Enter") {
+        return;
+      }
+      if (e.key === "Escape") {
+        setIsOpen(false);
+        return;
+      }
+      if (e.key.length === 1) {
+        write(e.key);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isFocused]);
+  React3.useEffect(() => {
+    if (!field) return;
+    field.onChange(field.value);
+  }, [currentInputField]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      tabIndex: 0,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onClick: () => ref.current?.focus(),
+      className: `
+        p-3 min-h-16 w-full flex justify-items-center justify-between flex-row
+        text-2xl font-bold rounded-xl border-2
+        outline-none transition-all
+        ${isFocused ? "border-blue-500 bg-blue-50" : "border-amber-400 bg-amber-50"}
+      `,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-left self-center", children: input && (isPasswordField && !showPassword) ? "\u2022".repeat(value.toString().length) : value || "" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-2 self-center", children: [
+          isPasswordField && /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "ghost",
+              type: "button",
+              onClick: () => setShowPassword(!showPassword),
+              children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { size: 20 })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "ghost",
+              type: "button",
+              className: "text-2xl",
+              onClick: (e) => {
+                e.stopPropagation();
+                handleFocus();
+                setCurrentInputField({ input, field });
+                setIsOpen(true);
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Keyboard, { size: 20 })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
 var TextInputGroup = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
@@ -13611,9 +13780,6 @@ var CustomInputGroup = ({
   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;
@@ -13681,6 +13847,16 @@ var CustomInputGroup = ({
         return value2;
     }
   };
+  if (input.isFakeInput) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      FakeInput,
+      {
+        input,
+        field,
+        form
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(InputGroup, { className: input.classNameGroupInput ?? "h-10", children: [
     (iconsLeft.length > 0 || textLeft) && /* @__PURE__ */ jsxRuntime.jsxs(InputGroupAddon, { children: [
       textLeft && /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: textLeft }),
@@ -13751,8 +13927,7 @@ var CustomInputGroup = ({
           },
           children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Keyboard, {})
         }
-      ),
-      autoValidate && /* @__PURE__ */ jsxRuntime.jsx("div", { children: isSubmitting ? iconLoadingState : isValid ? iconValidState : iconInvalidState })
+      )
     ] })
   ] });
 };