shadcn-zod-formkit 3.6.0 → 3.7.0

package/dist/index.cjs

@@ -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
           ],