shadcn-zod-formkit 3.7.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;
@@ -10149,11 +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 });
+      currentInputField.field.onChange(newValue);
     }
     if (!state.activeInput) return state;
     const current = state.inputs[state.activeInput] || "";
@@ -10167,8 +10185,10 @@ 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);
+      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] || "";
@@ -10216,7 +10236,6 @@ var KeyboardQwerty = ({ onKeyPress, onEnter, keyFontSize: keyFontSize3 = "text-2
         onEnter?.();
         return;
       }
-      console.log("\u{1F680} ~ handleKeyDown ~ key:", key);
       if (key === "Backspace") {
         backspace();
         e.preventDefault();
@@ -10263,7 +10282,6 @@ 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);
@@ -13616,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;
@@ -13664,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;
@@ -13734,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 }),
@@ -13804,8 +13927,7 @@ var CustomInputGroup = ({
           },
           children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Keyboard, {})
         }
-      ),
-      autoValidate && /* @__PURE__ */ jsxRuntime.jsx("div", { children: isSubmitting ? iconLoadingState : isValid ? iconValidState : iconInvalidState })
+      )
     ] })
   ] });
 };