shadcn-zod-formkit 3.4.0 → 3.6.0

package/dist/index.cjs

@@ -6,9 +6,11 @@ var lucideReact = require('lucide-react');
 var reactIcons = require('@radix-ui/react-icons');
 var classVarianceAuthority = require('class-variance-authority');
 var tailwindMerge = require('tailwind-merge');
+var reactSlot = require('@radix-ui/react-slot');
+var zustand = require('zustand');
 var reactHookForm = require('react-hook-form');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
-var reactSlot = require('@radix-ui/react-slot');
+var radixUi = require('radix-ui');
 var SeparatorPrimitive = require('@radix-ui/react-separator');
 var reactDayPicker = require('react-day-picker');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
@@ -23,7 +25,6 @@ var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var ResizablePrimitive = require('react-resizable-panels');
 var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 var SelectPrimitive = require('@radix-ui/react-select');
-var radixUi = require('radix-ui');
 var SliderPrimitive = require('@radix-ui/react-slider');
 var nextThemes = require('next-themes');
 var sonner = require('sonner');
@@ -31,7 +32,6 @@ var SwitchPrimitive = require('@radix-ui/react-switch');
 var TabsPrimitive = require('@radix-ui/react-tabs');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var dateFns = require('date-fns');
-var zustand = require('zustand');
 var core = require('@dnd-kit/core');
 var sortable = require('@dnd-kit/sortable');
 var utilities = require('@dnd-kit/utilities');
@@ -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;
@@ -9868,6 +9868,486 @@ var CustomAlert = ({
     }
   );
 };
+var buttonVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? reactSlot.Slot : "button";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+function normalizeBorder(border, defaultWidth = 4) {
+  if (!border) return null;
+  if (typeof border === "string") {
+    return { width: defaultWidth, color: border };
+  }
+  return { width: border.width ?? defaultWidth, color: border.color };
+}
+function generateBorderShadows(borders) {
+  if (!borders) return "none";
+  const shadows = [];
+  const allBorder = normalizeBorder(borders.all);
+  const left = normalizeBorder(borders.left) ?? allBorder;
+  const right = normalizeBorder(borders.right) ?? allBorder;
+  const top = normalizeBorder(borders.top) ?? allBorder;
+  const bottom = normalizeBorder(borders.bottom) ?? allBorder;
+  if (left?.color) {
+    shadows.push(`inset ${left.width}px 0 0 0 ${left.color}`);
+  }
+  if (right?.color) {
+    shadows.push(`inset -${right.width}px 0 0 0 ${right.color}`);
+  }
+  if (top?.color) {
+    shadows.push(`inset 0 ${top.width}px 0 0 ${top.color}`);
+  }
+  if (bottom?.color) {
+    shadows.push(`inset 0 -${bottom.width}px 0 0 ${bottom.color}`);
+  }
+  return shadows.length > 0 ? shadows.join(", ") : "none";
+}
+var Key = ({
+  label,
+  onClick,
+  onDoubleClick,
+  style,
+  disabled = false,
+  className,
+  shortcut,
+  children,
+  withLabel = true,
+  isActive = false,
+  fontSize = "text-sm",
+  icons,
+  borders,
+  // iconSize = 72,
+  iconClassName = "w-8 h-8"
+}) => {
+  let content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    withLabel && label,
+    shortcut && ` (${shortcut})`
+  ] });
+  if (children) content = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  const borderShadow = generateBorderShadows(borders);
+  const hasBorders = borders && borderShadow !== "none";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button,
+    {
+      disabled,
+      onDoubleClick,
+      onClick: (e) => onClick?.(label ?? e.currentTarget.textContent ?? ""),
+      style: {
+        ...style,
+        ...hasBorders && { boxShadow: borderShadow }
+      },
+      className: cn(
+        // Base
+        "shadow-md shadow-black/20",
+        "flex flex-1 items-center justify-center rounded-lg h-full w-full",
+        "font-mono font-bold transition-all duration-100",
+        "active:scale-95",
+        fontSize,
+        // Estados base (soft UI)
+        "border border-(--color-border)",
+        "bg-(--color-secondary-soft) text-(--color-foreground)",
+        // Hover
+        "hover:bg-(--color-accent-soft)",
+        // Active click (presionado)
+        "active:bg-(--color-primary) active:text-(--color-primary-foreground)",
+        // Estado activo (seleccionado)
+        isActive && "bg-(--color-primary) text-(--color-primary-foreground) border-(--color-primary)",
+        // Backspace especial
+        // label === '⌫' &&
+        //   'bg-(--color-destructive) text-white hover:opacity-90',
+        // Overflow hidden para que los bordes respeten el border-radius
+        "overflow-hidden",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center items-center", children: [
+        icons && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row justify-center text-3xl", children: icons.map((IconComponent, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          IconComponent,
+          {
+            className: iconClassName
+          },
+          index
+        )) }),
+        content
+      ] })
+    }
+  );
+};
+var applyCase = (label, upper) => {
+  if (!label || label.length !== 1 || !/[a-z]/.test(label)) return label;
+  return upper ? label.toUpperCase() : label;
+};
+var letter = (l, isUpper, handleKey) => ({
+  label: applyCase(l, isUpper),
+  onClick: handleKey,
+  className: "flex-1"
+});
+
+// src/components/custom/keyboard/keyboard-base.tsx
+var BaseKeyboard = class {
+  constructor() {
+  }
+};
+var KeyboardBuilder = ({
+  keys,
+  withCard = false,
+  className,
+  keyFontSize: keyFontSize3
+}) => {
+  const keyMap = React3.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    keys?.forEach((row) => {
+      row.forEach((k) => {
+        if (k.shortcut) {
+          map.set(k.shortcut.toLowerCase(), k);
+        }
+      });
+    });
+    return map;
+  }, [keys]);
+  const triggerKey = React3.useCallback((pressedKey) => {
+    const key = keyMap.get(pressedKey.toLowerCase());
+    if (key && !key.disabled) {
+      key.onClick?.(pressedKey);
+      const keyboardEvent = new KeyboardEvent("keydown", {
+        key: pressedKey,
+        bubbles: true
+      });
+      window.dispatchEvent(keyboardEvent);
+    }
+  }, [keyMap]);
+  React3.useEffect(() => {
+    const handleKeyDown = (event) => {
+      const active = document.activeElement;
+      if (active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement || active && active.getAttribute("contenteditable") === "true") {
+        console.log("\u{1F680} ~ Ignorando tecla porque el foco est\xE1 en un input:", event.key);
+        return;
+      }
+      triggerKey(event.key);
+      event.preventDefault();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [triggerKey]);
+  const content = /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        `flex-1 grid grid-rows-${keys?.length} h-full`,
+        className
+      ),
+      children: keys?.map((row, ri) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row gap-2 p-1 h-full", children: row.map((key, indx) => {
+        const handleClick = () => {
+          triggerKey(key.label ?? "");
+          key.onClick?.(key.label ?? "");
+          if (!key.shortcut) return;
+          triggerKey(key.shortcut);
+        };
+        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          key.label == "" && !key.icons?.length && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${key.className}` }, indx),
+          (key.label != "" || key.icons?.length) && /* @__PURE__ */ jsxRuntime.jsx(
+            Key,
+            {
+              borders: {
+                left: key.disabled ? "grey" : "",
+                bottom: key.disabled ? "grey" : ""
+              },
+              label: key.label,
+              onClick: handleClick,
+              shortcut: key.shortcut,
+              icons: key.icons,
+              className: `${key.className} ${key.disabled ? "bg-muted-foreground h-full" : "h-full"}`,
+              iconClassName: key.iconClassName,
+              iconSize: key.iconSize,
+              fontSize: keyFontSize3,
+              isActive: key.isActive,
+              disabled: key.disabled,
+              children: key.children
+            },
+            indx
+          )
+        ] });
+      }) }, ri))
+    }
+  );
+  if (!withCard) return content;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full h-full m-0.5 p-1", className), children: content });
+};
+
+// 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;
+})(KeyboardTypes || {});
+
+// src/components/custom/keyboard/providers/keyboard.store.ts
+var useKeyboardStore = zustand.create((set, get) => ({
+  activeInput: null,
+  inputs: {},
+  type: "qwerty" /* QWERTY */,
+  currentInputField: null,
+  setCurrentInputField(inputField) {
+    set({ currentInputField: inputField });
+    console.log("Current Input Field set to:", inputField);
+  },
+  isOpen: false,
+  setIsOpen() {
+    set({ isOpen: !get().isOpen });
+  },
+  registerInput: (id, initialValue = "") => set((state) => ({
+    inputs: {
+      ...state.inputs,
+      [id]: initialValue
+    }
+  })),
+  unregisterInput: (id) => set((state) => {
+    const newInputs = { ...state.inputs };
+    delete newInputs[id];
+    return { inputs: newInputs };
+  }),
+  focusInput: (id) => set({ activeInput: id }),
+  write: (char) => set((state) => {
+    let currentInputField = state.currentInputField;
+    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] || "";
+    return {
+      inputs: {
+        ...state.inputs,
+        [state.activeInput]: current + char
+      }
+    };
+  }),
+  backspace: () => set((state) => {
+    if (!state.activeInput) return state;
+    const current = state.inputs[state.activeInput] || "";
+    return {
+      inputs: {
+        ...state.inputs,
+        [state.activeInput]: current.slice(0, -1)
+      }
+    };
+  }),
+  clear: () => set((state) => {
+    if (!state.activeInput) return state;
+    return {
+      inputs: {
+        ...state.inputs,
+        [state.activeInput]: ""
+      }
+    };
+  }),
+  setValue: (id, value) => set((state) => ({
+    inputs: {
+      ...state.inputs,
+      [id]: value
+    }
+  }))
+}));
+var QwertyKeyboard = class extends BaseKeyboard {
+  render() {
+    return /* @__PURE__ */ jsxRuntime.jsx(KeyboardQwerty, {});
+  }
+};
+var KeyboardQwerty = ({ onKeyPress, onEnter, keyFontSize: keyFontSize3 = "text-2xl", onDelete }) => {
+  const [shiftMode, setShiftMode] = React3.useState("off");
+  const [mode, setMode] = React3.useState("letters");
+  const lastShiftPress = React3.useRef(0);
+  const { currentInputField, write } = useKeyboardStore();
+  const isUpper = shiftMode !== "off";
+  const handleShift = () => {
+    const now = Date.now();
+    if (now - lastShiftPress.current < 300) {
+      setShiftMode((prev) => prev === "caps" ? "off" : "caps");
+    } else {
+      setShiftMode((prev) => prev === "once" ? "off" : "once");
+    }
+    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");
+    }
+  };
+  const handleCaps = () => {
+    setShiftMode((prev) => prev === "caps" ? "off" : "caps");
+  };
+  const shiftLabel = shiftMode === "caps" ? lucideReact.ArrowBigUpDash : lucideReact.ArrowBigUp;
+  const shiftActive = shiftMode !== "off";
+  if (mode === "symbols") {
+    const keys = [
+      ["!", "@", "#", "$", "%", "^", "&", "*", "(", ")"],
+      ["~", "`", "|", "\\", "/", "{", "}", "[", "]"],
+      ["+", "=", "<", ">", "?", "'", '"', ":", ";"]
+    ].map(
+      (row) => row.map((k) => ({
+        label: k,
+        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 " }
+          ]
+        ]
+      }
+    ) });
+  }
+  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,
+      " "
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      KeyboardBuilder,
+      {
+        className: "w-full h-full flex-3",
+        keyFontSize: keyFontSize3,
+        keys: [
+          [
+            { label: "esc", onClick: () => {
+            }, className: "bg-red-200" },
+            ...fila1
+          ],
+          [
+            { label: "tab", onClick: () => {
+            } },
+            ...fila2
+            // { icons:[Delete], onClick: backspace, className: 'text-xs' },
+          ],
+          [
+            { label: "caps", onClick: handleCaps },
+            ...fila3
+          ],
+          [
+            {
+              label: "",
+              icons: [shiftLabel],
+              onClick: handleShift,
+              className: "flex-1",
+              isActive: shiftActive
+            },
+            ...fila4,
+            { label: ".", onClick: () => handleKey(".") },
+            { label: "-", onClick: () => handleKey("-") },
+            { label: "_", onClick: () => handleKey("_") }
+          ],
+          [
+            { label: "?123", onClick: () => setMode("symbols"), className: "flex-[2]" },
+            { label: " ", onClick: () => handleKey(" "), className: "flex-[4]" },
+            { label: "Enter", onClick: onEnter, className: "flex-[2] bg-green-200" }
+          ]
+        ]
+      }
+    )
+  ] });
+};
+
+// src/components/custom/form/inputs/base/definitions.ts
+var flattenFields = (fields, onAnyFieldChange) => {
+  const result = [];
+  for (const field of fields) {
+    if (Array.isArray(field)) {
+      result.push(...flattenFields(field));
+    } else if (field.fields) {
+      result.push(...flattenFields(field.fields));
+    } else {
+      if (onAnyFieldChange) field.onAnyFieldChange = (data) => onAnyFieldChange(data);
+      result.push(field);
+    }
+  }
+  return result;
+};
+var TextInputType = /* @__PURE__ */ ((TextInputType2) => {
+  TextInputType2["DEFAULT"] = "default";
+  TextInputType2["NUMBER"] = "number";
+  TextInputType2["EMAIL"] = "email";
+  TextInputType2["PHONE"] = "phone";
+  TextInputType2["PASSWORD"] = "password";
+  return TextInputType2;
+})(TextInputType || {});
+var keyboardMap = {
+  ["qwerty" /* QWERTY */]: QwertyKeyboard,
+  ["qwerty_not_chars" /* QWERTY_NOT_CHARS */]: QwertyKeyboard,
+  ["number" /* NUMBER */]: QwertyKeyboard
+};
+var KeyboardFactory = class {
+  static create(typeKeyboard, input) {
+    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();
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: instance.render() });
+  }
+};
 
 // src/components/custom/form/input-errors.ts
 var validationMessages = {
@@ -9938,30 +10418,6 @@ var isValidField = (input, form, defaultValue) => {
   return !fieldState.error && value !== void 0 && value !== "";
 };
 
-// src/components/custom/form/inputs/base/definitions.ts
-var flattenFields = (fields, onAnyFieldChange) => {
-  const result = [];
-  for (const field of fields) {
-    if (Array.isArray(field)) {
-      result.push(...flattenFields(field));
-    } else if (field.fields) {
-      result.push(...flattenFields(field.fields));
-    } else {
-      if (onAnyFieldChange) field.onAnyFieldChange = (data) => onAnyFieldChange(data);
-      result.push(field);
-    }
-  }
-  return result;
-};
-var TextInputType = /* @__PURE__ */ ((TextInputType2) => {
-  TextInputType2["DEFAULT"] = "default";
-  TextInputType2["NUMBER"] = "number";
-  TextInputType2["EMAIL"] = "email";
-  TextInputType2["PHONE"] = "phone";
-  TextInputType2["PASSWORD"] = "password";
-  return TextInputType2;
-})(TextInputType || {});
-
 // src/components/custom/form/inputs/base/input-types.ts
 var InputTypes = /* @__PURE__ */ ((InputTypes2) => {
   InputTypes2["HIDDEN"] = "hidden";
@@ -10108,7 +10564,166 @@ function AccordionContent({
     }
   );
 }
-var badgeVariants = classVarianceAuthority.cva(
+function AlertDialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.AlertDialog.Root, { "data-slot": "alert-dialog", ...props });
+}
+function AlertDialogTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.AlertDialog.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
+}
+function AlertDialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.AlertDialog.Portal, { "data-slot": "alert-dialog-portal", ...props });
+}
+function AlertDialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.AlertDialog.Overlay,
+    {
+      "data-slot": "alert-dialog-overlay",
+      className: cn(
+        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogPortal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(AlertDialogOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      radixUi.AlertDialog.Content,
+      {
+        "data-slot": "alert-dialog-content",
+        "data-size": size,
+        className: cn(
+          "group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=default]:sm:max-w-lg",
+          className
+        ),
+        ...props
+      }
+    )
+  ] });
+}
+function AlertDialogHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "alert-dialog-header",
+      className: cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDialogFooter({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "alert-dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.AlertDialog.Title,
+    {
+      "data-slot": "alert-dialog-title",
+      className: cn(
+        "text-lg font-semibold sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.AlertDialog.Description,
+    {
+      "data-slot": "alert-dialog-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function AlertDialogMedia({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "alert-dialog-media",
+      className: cn(
+        "mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDialogAction({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Button, { variant, size, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.AlertDialog.Action,
+    {
+      "data-slot": "alert-dialog-action",
+      className: cn(className),
+      ...props
+    }
+  ) });
+}
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Button, { variant, size, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.AlertDialog.Cancel,
+    {
+      "data-slot": "alert-dialog-cancel",
+      className: cn(className),
+      ...props
+    }
+  ) });
+}
+var badgeVariants = classVarianceAuthority.cva(
   "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
     variants: {
@@ -10225,52 +10840,6 @@ function ButtonGroupSeparator({
     }
   );
 }
-var buttonVariants = classVarianceAuthority.cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
-}) {
-  const Comp = asChild ? reactSlot.Slot : "button";
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Comp,
-    {
-      "data-slot": "button",
-      "data-variant": variant,
-      "data-size": size,
-      className: cn(buttonVariants({ variant, size, className })),
-      ...props
-    }
-  );
-}
 function Calendar({
   className,
   classNames,
@@ -11748,7 +12317,7 @@ function SheetOverlay({
     {
       "data-slot": "sheet-overlay",
       className: cn(
-        "fixed inset-0 z-50 bg-black/10 duration-100  data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
         className
       ),
       ...props
@@ -11768,29 +12337,21 @@ function SheetContent({
       radixUi.Dialog.Content,
       {
         "data-slot": "sheet-content",
-        "data-side": side,
         className: cn(
-          "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
+          "fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
+          side === "right" && "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+          side === "left" && "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+          side === "top" && "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+          side === "bottom" && "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
           className
         ),
         ...props,
         children: [
           children,
-          showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Close, { "data-slot": "sheet-close", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
-            Button,
-            {
-              variant: "ghost",
-              className: "absolute top-3 right-3",
-              size: "icon-sm",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  lucideReact.XIcon,
-                  {}
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
-              ]
-            }
-          ) })
+          showCloseButton && /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Dialog.Close, { className: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "size-4" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+          ] })
         ]
       }
     )
@@ -11801,7 +12362,7 @@ function SheetHeader({ className, ...props }) {
     "div",
     {
       "data-slot": "sheet-header",
-      className: cn("flex flex-col gap-0.5 p-4", className),
+      className: cn("flex flex-col gap-1.5 p-4", className),
       ...props
     }
   );
@@ -11824,10 +12385,7 @@ function SheetTitle({
     radixUi.Dialog.Title,
     {
       "data-slot": "sheet-title",
-      className: cn(
-        "font-heading text-base font-medium text-foreground",
-        className
-      ),
+      className: cn("font-semibold text-foreground", className),
       ...props
     }
   );
@@ -12603,64 +13161,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,
@@ -12668,44 +13190,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 })
             ] })
           ] }) }),
@@ -13030,61 +13563,6 @@ var FieldFileMultiUpload = ({ input, form, isSubmitting }) => {
   );
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: formField });
 };
-var useKeyboardStore = zustand.create((set, get) => ({
-  activeInput: null,
-  inputs: {},
-  isOpen: false,
-  setIsOpen() {
-    set({ isOpen: !get().isOpen });
-  },
-  registerInput: (id, initialValue = "") => set((state) => ({
-    inputs: {
-      ...state.inputs,
-      [id]: initialValue
-    }
-  })),
-  unregisterInput: (id) => set((state) => {
-    const newInputs = { ...state.inputs };
-    delete newInputs[id];
-    return { inputs: newInputs };
-  }),
-  focusInput: (id) => set({ activeInput: id }),
-  write: (char) => set((state) => {
-    if (!state.activeInput) return state;
-    const current = state.inputs[state.activeInput] || "";
-    return {
-      inputs: {
-        ...state.inputs,
-        [state.activeInput]: current + char
-      }
-    };
-  }),
-  backspace: () => set((state) => {
-    if (!state.activeInput) return state;
-    const current = state.inputs[state.activeInput] || "";
-    return {
-      inputs: {
-        ...state.inputs,
-        [state.activeInput]: current.slice(0, -1)
-      }
-    };
-  }),
-  clear: () => set((state) => {
-    if (!state.activeInput) return state;
-    return {
-      inputs: {
-        ...state.inputs,
-        [state.activeInput]: ""
-      }
-    };
-  }),
-  setValue: (id, value) => set((state) => ({
-    inputs: {
-      ...state.inputs,
-      [id]: value
-    }
-  }))
-}));
 var TextInputGroup = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
@@ -13100,9 +13578,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,
@@ -13143,8 +13621,9 @@ 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) => {
     if (!mask) return value2;
     if (typeof mask === "string") {
@@ -13214,6 +13693,7 @@ var CustomInputGroup = ({
         placeholder: input.placeHolder,
         disabled: input.disabled || isSubmitting,
         onBlur: field?.onBlur,
+        onFocus: () => setCurrentInputField({ input, field }),
         name: field?.name,
         ref: field?.ref,
         type: isPasswordField && !showPassword ? "password" : isNumberField ? "number" : "text",
@@ -13223,6 +13703,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, "");
@@ -13259,7 +13740,18 @@ var CustomInputGroup = ({
           children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { size: 20 })
         }
       ),
-      withKeyboard && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "text-2xl", onClick: setIsOpen, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Keyboard, {}) }),
+      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 })
     ] })
   ] });
@@ -14371,12 +14863,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) => {
@@ -16104,7 +16596,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) => {
@@ -16116,7 +16609,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,
@@ -16155,6 +16648,167 @@ 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?",
+  description = "This action cannot be undone.",
+  cancelText = "Cancel",
+  actionText = "Confirmar",
+  className = "bg-red-600 text-white font-bold",
+  variant = "info",
+  onAction,
+  children,
+  listBtnConfig = [],
+  btnGroupDirection = "flex-end",
+  submitBtnClass = "h-16",
+  iconSize = "w-16 h-16",
+  btnHeightClass = "h-16",
+  showActionBtn = true
+}) => {
+  const getVariantStyles = () => {
+    switch (variant) {
+      case "info":
+        return {
+          container: "!bg-blue-100 !text-blue-800 dark:!bg-blue-900 dark:!text-blue-200",
+          border: "!border-blue-500/30 dark:!border-blue-300/30",
+          media: "bg-blue-500/10 dark:bg-blue-300/10",
+          action: "text-blue-200 bg-blue-500 dark:bg-blue-300",
+          icon: "text-blue-500 dark:text-blue-300",
+          iconNode: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageCircleWarning, { className: iconSize })
+        };
+      case "warning":
+        return {
+          container: "!bg-yellow-100 !text-yellow-800 dark:!bg-yellow-900 dark:!text-yellow-200",
+          border: "!border-yellow-500/30 dark:!border-yellow-300/30",
+          media: "bg-yellow-500/10 dark:bg-yellow-300/10",
+          action: "text-yellow-200 bg-yellow-500 dark:bg-yellow-300",
+          icon: "text-yellow-500 dark:text-yellow-300",
+          iconNode: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TriangleAlert, { className: iconSize })
+        };
+      case "error":
+      case "delete":
+        return {
+          container: "!bg-red-100 !text-red-800 dark:!bg-red-900 dark:!text-red-200",
+          border: "!border-red-500/30 dark:!border-red-300/30",
+          media: "bg-red-500/10 dark:bg-red-300/10",
+          action: "text-red-200 bg-red-500 dark:bg-red-300",
+          icon: "text-red-500 dark:text-red-300",
+          iconNode: variant === "delete" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2Icon, { className: iconSize }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.OctagonX, { className: iconSize })
+        };
+      case "success":
+        return {
+          container: "!bg-green-100 !text-green-800 dark:!bg-green-900 dark:!text-green-200",
+          border: "!border-green-500/30 dark:!border-green-300/30",
+          media: "bg-green-500/10 dark:bg-green-300/10",
+          action: "text-green-200 bg-green-500 dark:bg-green-300",
+          icon: "text-green-500 dark:text-green-300",
+          iconNode: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, { className: iconSize })
+        };
+      case "confirm":
+        return {
+          container: "!bg-purple-100 !text-purple-800 dark:!bg-purple-900 dark:!text-purple-200",
+          border: "!border-purple-500/30 dark:!border-purple-300/30",
+          media: "bg-purple-500/10 dark:bg-purple-300/10",
+          action: "text-purple-200 bg-purple-500 dark:bg-purple-300",
+          icon: "text-purple-500 dark:text-purple-300",
+          iconNode: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleQuestionMark, { className: iconSize })
+        };
+    }
+  };
+  const styles = getVariantStyles();
+  console.log("onAction", onAction);
+  return /* @__PURE__ */ jsxRuntime.jsxs(AlertDialog, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(AlertDialogTrigger, { asChild: true, children: trigger || /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", children: "Show Dialog" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      AlertDialogContent,
+      {
+        className: cn(
+          "w-50 h-fit font-mono border-x-8",
+          styles.container,
+          styles.border
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogHeader, { className: "justify-center w-full text-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+              AlertDialogMedia,
+              {
+                className: cn(
+                  styles.media,
+                  "rounded-full flex items-center justify-center",
+                  iconSize
+                  // 🔥 ahora controla también el contenedor
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.icon, children: styles.iconNode })
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center w-full", children: /* @__PURE__ */ jsxRuntime.jsx(AlertDialogTitle, { className: "text-2xl", children: title }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(AlertDialogDescription, { className: "text-xl text-center", children: description })
+          ] }),
+          children,
+          /* @__PURE__ */ jsxRuntime.jsx(AlertDialogFooter, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+            ButtonGroup,
+            {
+              className: "flex w-full",
+              style: {
+                justifyContent: btnGroupDirection,
+                alignItems: "center"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(AlertDialogCancel, { className: cn("flex-1", btnHeightClass), children: cancelText }),
+                listBtnConfig.map((btn, key) => /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    type: btn.btnType,
+                    size: "lg",
+                    className: cn(btnHeightClass, submitBtnClass),
+                    variant: btn.variant,
+                    onClick: btn.onClick,
+                    disabled: btn.disabled,
+                    children: btn.label
+                  },
+                  key
+                )),
+                onAction && showActionBtn && /* @__PURE__ */ jsxRuntime.jsx(
+                  AlertDialogAction,
+                  {
+                    onClick: (e) => {
+                      e.preventDefault();
+                      if (onAction) {
+                        onAction();
+                      }
+                    },
+                    className: cn(
+                      "flex-1",
+                      btnHeightClass,
+                      className,
+                      styles.action
+                    ),
+                    children: actionText
+                  }
+                )
+              ]
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+};
 var DynamicForm = ({
   formTitle,
   formSubTitle,
@@ -16183,9 +16837,13 @@ var DynamicForm = ({
   isWrapInWizard = false,
   totalSteps = 0,
   currentStep = 1,
-  submitBtnIcon = lucideReact.Save
+  submitBtnIcon = lucideReact.Save,
+  dialogTitle = "\xBFEst\xE1s seguro?",
+  dialogDescription = "Esta acci\xF3n no se puede deshacer. \xBFDeseas continuar?",
+  withConfirmDialog = false
 }) => {
   const [isPending, startTransition] = React3.useTransition();
+  const currentInputField = useKeyboardStore((state) => state.currentInputField);
   const schema = React3.useMemo(() => {
     const allFields = flattenFields(fields, onAnyFieldChange);
     return getDynamicSchema(allFields, extraValidations);
@@ -16214,14 +16872,46 @@ var DynamicForm = ({
     const resp = { data, form };
     onClick(resp);
   };
+  const withConfirm = /* @__PURE__ */ jsxRuntime.jsx(
+    DynamicDialog,
+    {
+      trigger: /* @__PURE__ */ jsxRuntime.jsxs(
+        Button,
+        {
+          variant: "secondary",
+          size: "lg",
+          type: "button",
+          disabled: isPending,
+          className: "flex items-center gap-3 w-full h-16 px-4 py-3 text-sm  hover:bg-zinc-700 transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
+          children: [
+            submitBtnLabel,
+            (totalSteps == 0 || totalSteps == currentStep) && submitBtnIcon && React3__namespace.default.createElement(submitBtnIcon, { className: "h-5 w-5 mr-2" })
+          ]
+        }
+      ),
+      title: dialogTitle,
+      description: dialogDescription,
+      cancelText: "Cancelar",
+      actionText: submitBtnLabel ?? "Procesar",
+      variant: "warning",
+      onAction: onClick ? handleClick : void 0
+    }
+  );
   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.jsxs("div", { className: "w-full grid grid-cols-1", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         FormFieldsGrid,
         {
           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 })
@@ -16245,7 +16935,7 @@ var DynamicForm = ({
         },
         key
       )),
-      !readOnly && withSubmitBtn && /* @__PURE__ */ jsxRuntime.jsx(
+      !readOnly && withSubmitBtn && (withConfirmDialog ? withConfirm : /* @__PURE__ */ jsxRuntime.jsx(
         Button,
         {
           type: onClick ? "button" : "submit",
@@ -16261,7 +16951,7 @@ var DynamicForm = ({
             (totalSteps == 0 || totalSteps == currentStep) && submitBtnIcon && React3__namespace.default.createElement(submitBtnIcon, { className: "h-5 w-5 mr-2" })
           ] })
         }
-      )
+      ))
     ] })
   ] });
   const formContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -16273,7 +16963,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,
@@ -16309,7 +16999,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) })
@@ -16539,18 +17229,6 @@ 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, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(SheetHeader, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: title }),
-      /* @__PURE__ */ jsxRuntime.jsx(SheetDescription, { children: childrenHeader })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(SheetFooter, { children })
-  ] }) });
-};
 var GenericFilter = ({
   filters = [],
   pagination,
@@ -16777,6 +17455,7 @@ exports.AlertDescription = AlertDescription;
 exports.AlertTitle = AlertTitle;
 exports.Badge = Badge;
 exports.BaseInput = BaseInput;
+exports.BaseKeyboard = BaseKeyboard;
 exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
 exports.ButtonGroupInput = ButtonGroupInput;
@@ -16873,7 +17552,12 @@ exports.InputOTPGroup = InputOTPGroup;
 exports.InputOTPSeparator = InputOTPSeparator;
 exports.InputOTPSlot = InputOTPSlot;
 exports.InputTypes = InputTypes;
+exports.Key = Key;
 exports.KeyValueListInput = KeyValueListInput;
+exports.KeyboardBuilder = KeyboardBuilder;
+exports.KeyboardFactory = KeyboardFactory;
+exports.KeyboardQwerty = KeyboardQwerty;
+exports.KeyboardTypes = KeyboardTypes;
 exports.Label = Label;
 exports.MultiSelectInput = MultiSelectInput;
 exports.NumberInput = NumberInput;
@@ -16882,6 +17566,7 @@ exports.Popover = Popover;
 exports.PopoverAnchor = PopoverAnchor;
 exports.PopoverContent = PopoverContent;
 exports.PopoverTrigger = PopoverTrigger;
+exports.QwertyKeyboard = QwertyKeyboard;
 exports.RadioGroup = RadioGroup;
 exports.RadioGroupInput = RadioGroupInput;
 exports.RadioGroupItem = RadioGroupItem;
@@ -16928,6 +17613,7 @@ exports.TooltipContent = TooltipContent;
 exports.TooltipProvider = TooltipProvider;
 exports.TooltipTrigger = TooltipTrigger;
 exports.WizardForm = WizardForm;
+exports.applyCase = applyCase;
 exports.badgeVariants = badgeVariants;
 exports.buttonGroupVariants = buttonGroupVariants;
 exports.buttonVariants = buttonVariants;
@@ -16943,10 +17629,12 @@ exports.getFieldLabel = getFieldLabel;
 exports.handleOnChage = handleOnChage;
 exports.inputFieldComp = inputFieldComp;
 exports.isValidField = isValidField;
+exports.letter = letter;
 exports.mockFields = mockFields;
 exports.useDynamicForm = useDynamicForm;
 exports.useFormField = useFormField;
 exports.useFormPersist = useFormPersist;
+exports.useKeyboardStore = useKeyboardStore;
 exports.validationMessages = validationMessages;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map