shadcn-zod-formkit 3.8.1 → 3.9.0

package/dist/index.cjs

@@ -10025,7 +10025,9 @@ var letter = (l, isUpper, handleKey) => ({
 
 // src/components/custom/keyboard/keyboard-base.tsx
 var BaseKeyboard = class {
-  constructor() {
+  constructor(input, children) {
+    this.input = input;
+    this.children = children;
   }
 };
 var KeyboardBuilder = ({
@@ -10117,25 +10119,58 @@ var KeyboardBuilder = ({
 };
 
 // src/components/custom/keyboard/keyboard-types.ts
-var KeyboardTypes = /* @__PURE__ */ ((KeyboardTypes2) => {
-  KeyboardTypes2["QWERTY"] = "qwerty";
-  KeyboardTypes2["NUMBER"] = "number";
-  KeyboardTypes2["QWERTY_NOT_CHARS"] = "qwerty_not_chars";
-  return KeyboardTypes2;
+var KeyboardTypes = /* @__PURE__ */ ((KeyboardTypes3) => {
+  KeyboardTypes3["QWERTY"] = "qwerty";
+  KeyboardTypes3["NUMBER"] = "number";
+  KeyboardTypes3["QWERTY_NOT_CHARS"] = "qwerty_not_chars";
+  return KeyboardTypes3;
 })(KeyboardTypes || {});
 
 // src/components/custom/keyboard/providers/keyboard.store.ts
 var useKeyboardStore = zustand.create((set, get) => ({
+  isInputRequired: false,
   activeInput: null,
   inputs: {},
   type: "qwerty" /* QWERTY */,
   currentInputField: null,
+  children: void 0,
+  isOpen: false,
+  isOpenDynamic: false,
+  value: "",
+  onEnter: void 0,
+  setChildren(children) {
+    set({ children });
+  },
+  setOnEnter(onEnter) {
+    set({ onEnter });
+  },
   setCurrentInputField(inputField) {
-    set({ currentInputField: inputField });
+    set({ currentInputField: inputField, isInputRequired: true });
   },
-  isOpen: false,
   setIsOpen(open) {
-    set({ isOpen: open ?? !get().isOpen });
+    if (!open) set({ value: "" });
+    set({ isOpen: open ?? !get().isOpen, children: void 0 });
+    if (!get().isOpen) {
+      set({
+        children: void 0,
+        value: "",
+        currentInputField: null,
+        isInputRequired: false,
+        onEnter: void 0
+      });
+    }
+  },
+  setIsOpenDynamic(open) {
+    if (!open) set({ value: "" });
+    set({ isOpenDynamic: open ?? !get().isOpenDynamic });
+    if (!get().isOpenDynamic) {
+      set({
+        children: void 0,
+        value: "",
+        currentInputField: null,
+        isInputRequired: false
+      });
+    }
   },
   registerInput: (id, initialValue = "") => set((state) => ({
     inputs: {
@@ -10166,6 +10201,12 @@ var useKeyboardStore = zustand.create((set, get) => ({
   //     };
   // }),
   write: (char) => set((state) => {
+    if (!state.isInputRequired) {
+      const newValue = get().value + char;
+      set({ value: newValue });
+      state.value = newValue;
+      return state;
+    }
     let currentInputField = state.currentInputField;
     if (currentInputField && currentInputField.field) {
       currentInputField.field.value += char;
@@ -10183,6 +10224,10 @@ var useKeyboardStore = zustand.create((set, get) => ({
     };
   }),
   backspace: () => set((state) => {
+    if (!state.isInputRequired) {
+      set({ value: state.value.slice(0, -1) });
+      state.value = state.value.slice(0, -1);
+    }
     let currentInputField = state.currentInputField;
     if (currentInputField && currentInputField.field) {
       const newValue = currentInputField.field.value.slice(0, -1);
@@ -10201,6 +10246,10 @@ var useKeyboardStore = zustand.create((set, get) => ({
     };
   }),
   clear: () => set((state) => {
+    if (!state.isInputRequired) {
+      set({ value: "" });
+      state.value = "";
+    }
     if (!state.activeInput) return state;
     return {
       inputs: {
@@ -10241,23 +10290,26 @@ var TextInputType = /* @__PURE__ */ ((TextInputType3) => {
   return TextInputType3;
 })(TextInputType || {});
 var QwertyKeyboard = class extends BaseKeyboard {
-  render(input) {
-    return /* @__PURE__ */ jsxRuntime.jsx(KeyboardQwerty, {});
+  render() {
+    const { input, children } = this;
+    return /* @__PURE__ */ jsxRuntime.jsx(KeyboardQwerty, { children, input });
   }
 };
-var KeyboardQwerty = ({ onKeyPress, onEnter, keyFontSize: keyFontSize3 = "text-2xl", onDelete, input }) => {
+var KeyboardQwerty = ({ onKeyPress, onEnter, keyFontSize: keyFontSize3 = "text-2xl", onDelete, input, children }) => {
   const [shiftMode, setShiftMode] = React3.useState("off");
   const [mode, setMode] = React3.useState("letters");
   const lastShiftPress = React3.useRef(0);
-  const { currentInputField, write, setIsOpen, backspace } = useKeyboardStore();
+  const { currentInputField, write, setIsOpen, backspace, isInputRequired } = useKeyboardStore();
+  const storeonEnter = useKeyboardStore((state) => state.onEnter);
   const isUpper = shiftMode !== "off";
   React3.useEffect(() => {
     const handleKeyDown = (e) => {
-      if (!currentInputField) return;
+      if (isInputRequired && !currentInputField) return;
       const key = e.key;
       if (key === "Enter") {
         e.preventDefault();
         onEnter?.();
+        storeonEnter?.();
         return;
       }
       if (key === "Backspace") {
@@ -10316,17 +10368,25 @@ var KeyboardQwerty = ({ onKeyPress, onEnter, keyFontSize: keyFontSize3 = "text-2
   };
   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.jsx("span", { children: currentInputField.input && currentInputField.input.keyboardType == "password" /* PASSWORD */ ? "\u2022".repeat(currentInputField.field?.value.toString().length) : currentInputField.field?.value || "" }) }) });
+  const textField = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    children && children,
+    !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.jsx("span", { children: currentInputField.input && currentInputField.input.keyboardType == "password" /* PASSWORD */ ? "\u2022".repeat(currentInputField.field?.value.toString().length) : currentInputField.field?.value || "" }) })
+  ] });
+  const btnDelete = { label: "delete", icons: [lucideReact.DeleteIcon], onClick: () => {
+    backspace();
+  }, className: "bg-red-200 text-xs" };
   if (mode === "symbols") {
     const keys = [
       ["!", "@", "#", "$", "%", "^", "&", "*", "(", ")"],
       ["~", "`", "|", "\\", "/", "{", "}", "[", "]"],
       ["+", "=", "<", ">", "?", "'", '"', ":", ";"]
     ].map(
-      (row) => row.map((k) => ({
-        label: k,
-        onClick: () => handleKey(k)
-      }))
+      (row, index) => row.map(
+        (k, idx) => {
+          if (index == 0 && idx == row.length - 1) return btnDelete;
+          return { label: k, onClick: () => handleKey(k) };
+        }
+      )
     );
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full h-full flex flex-col", children: [
       textField,
@@ -10407,14 +10467,14 @@ var keyboardMap = {
   ["number" /* NUMBER */]: QwertyKeyboard
 };
 var KeyboardFactory = class {
-  static create(typeKeyboard, input) {
+  static create(typeKeyboard, input, children) {
     const inputKbType = input?.keyboardType;
     let keyboardType = typeKeyboard ?? "qwerty" /* QWERTY */;
     if (inputKbType) {
       if (inputKbType == "number" /* NUMBER */) keyboardType = "number" /* NUMBER */;
     }
     const keyboardClass = keyboardMap[keyboardType] ?? QwertyKeyboard;
-    const instance = new keyboardClass();
+    const instance = new keyboardClass(input, children);
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: instance.render() });
   }
 };
@@ -13862,8 +13922,6 @@ var CustomInputGroup = ({
           value: field?.value ?? value ?? "",
           onChange: (e) => {
             let value2 = e.target.value;
-            console.log("\u{1F680} ~ CustomInputGroup ~ value:", value2);
-            console.log("Valor raw del input:", value2);
             if (isNumberField) {
               const numConfig = input.inputNumberConfig;
               const cleanValue = value2.replace(/[^\d.-]/g, "");
@@ -16863,21 +16921,6 @@ var FormFieldsGrid = ({
     );
   }) });
 };
-var CustomSheet = ({ title = "", children, childrenHeader, isOpen, className, side = "bottom" }) => {
-  const setIsOpen = useKeyboardStore((state) => state.setIsOpen);
-  const storeIsOpen = useKeyboardStore((state) => state.isOpen);
-  const controlledIsOpen = typeof isOpen === "boolean" ? isOpen : storeIsOpen;
-  return /* @__PURE__ */ jsxRuntime.jsx(Sheet, { open: controlledIsOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(SheetHeader, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: title }),
-      /* @__PURE__ */ jsxRuntime.jsxs(SheetDescription, { children: [
-        childrenHeader,
-        children
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(SheetFooter, {})
-  ] }) });
-};
 var DynamicDialog = ({
   trigger,
   title = "Are you absolutely sure?",
@@ -17024,6 +17067,22 @@ var DynamicDialog = ({
     )
   ] });
 };
+var DynamicSheetKeyboard = ({ currentInputField, children, input }) => {
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    " ",
+    KeyboardFactory.create(currentInputField?.input.keyboard ?? "qwerty" /* QWERTY */, input, children),
+    " "
+  ] });
+  const [container, setContainer] = React3.useState(content);
+  React3.useEffect(() => {
+    setContainer(/* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      " ",
+      KeyboardFactory.create(currentInputField?.input.keyboard ?? "qwerty" /* QWERTY */, input, children),
+      " "
+    ] }));
+  }, [children]);
+  return /* @__PURE__ */ jsxRuntime.jsx(CustomSheet, { children: container });
+};
 var DynamicForm = ({
   formTitle,
   formSubTitle,
@@ -17113,12 +17172,7 @@ var DynamicForm = ({
     }
   );
   const formBody = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      CustomSheet,
-      {
-        children: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: KeyboardFactory.create(currentInputField?.input.keyboard ?? "qwerty" /* QWERTY */) })
-      }
-    ),
+    /* @__PURE__ */ jsxRuntime.jsx(DynamicSheetKeyboard, { currentInputField }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full grid grid-cols-1", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         FormFieldsGrid,
@@ -17444,6 +17498,21 @@ var InputList = ({ handleAddInput, inputsTypes }) => {
     );
   }) });
 };
+var CustomSheet = ({ title = "", children, childrenHeader, isOpen, className, side = "bottom" }) => {
+  const setIsOpen = useKeyboardStore((state) => state.setIsOpen);
+  const storeIsOpen = useKeyboardStore((state) => state.isOpen);
+  const controlledIsOpen = typeof isOpen === "boolean" ? isOpen : storeIsOpen;
+  return /* @__PURE__ */ jsxRuntime.jsx(Sheet, { open: controlledIsOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side, className, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(SheetHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: title }),
+      /* @__PURE__ */ jsxRuntime.jsxs(SheetDescription, { children: [
+        childrenHeader,
+        children
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(SheetFooter, {})
+  ] }) });
+};
 var GenericFilter = ({
   filters = [],
   pagination,
@@ -17718,6 +17787,7 @@ exports.DialogTitle = DialogTitle;
 exports.DialogTrigger = DialogTrigger;
 exports.DynamicForm = DynamicForm;
 exports.DynamicFormExample = DynamicFormExample;
+exports.DynamicSheetKeyboard = DynamicSheetKeyboard;
 exports.Field = Field;
 exports.FieldButtonGroup = FieldButtonGroup;
 exports.FieldContent = FieldContent;