shadcn-zod-formkit 3.10.1 → 3.11.0

package/dist/index.cjs

@@ -12094,6 +12094,13 @@ var useKeyboardStore = zustand.create((set, get) => ({
   isOpenDynamic: false,
   value: "",
   onEnter: void 0,
+  isPassword: false,
+  inputPlaceholder: void 0,
+  infoTooltip: void 0,
+  inputLabel: void 0,
+  classNameTextField: "items-center justify-center",
+  iconsLeft: [],
+  iconsRight: [],
   setChildren(children) {
     set({ children });
   },
@@ -12220,7 +12227,28 @@ var useKeyboardStore = zustand.create((set, get) => ({
       ...state.inputs,
       [id]: value
     }
-  }))
+  })),
+  setPlaceholder: (placeholder) => {
+    set({ inputPlaceholder: placeholder });
+  },
+  setIsPassword: (isPass) => {
+    set({ isPassword: isPass });
+  },
+  setInfoToolTip: (tooltip) => {
+    set({ infoTooltip: tooltip });
+  },
+  setIconsLeft: (icons) => {
+    set({ iconsLeft: icons });
+  },
+  setIconsRight: (icons) => {
+    set({ iconsRight: icons });
+  },
+  setInputLabel: (label) => {
+    set({ inputLabel: label });
+  },
+  setClassNameTextField: (className) => {
+    set({ classNameTextField: className });
+  }
 }));
 var CustomSheet = ({ title = "", children, childrenHeader, isOpen, className, side = "bottom", isDynamic }) => {
   const setIsOpen = useKeyboardStore((state) => state.setIsOpen);
@@ -12537,7 +12565,7 @@ var Key = ({
         "active:scale-95",
         fontSize,
         // Estados base (soft UI)
-        "border border-(--color-border)",
+        "border-2 border-(--color-border)",
         "bg-(--color-secondary-soft) text-(--color-foreground)",
         // Hover
         "hover:bg-(--color-accent-soft)",
@@ -12926,7 +12954,8 @@ var TextField = ({
   placeholder = "",
   className,
   activeColor = "amber" /* amber */,
-  inputType = "default" /* DEFAULT */
+  inputType = "default" /* DEFAULT */,
+  isPassword = false
 }) => {
   React3.useEffect(() => {
     if (!isActive || disabled) return;
@@ -12964,33 +12993,40 @@ var TextField = ({
     {
       tabIndex: 0,
       onClick: handleClick,
+      style: { gridTemplateColumns: "15fr 70fr 15fr" },
       className: cn(
-        "flex flex-row items-center gap-3 rounded-xl border-2 transition-all min-h-16 outline-none",
+        "grid items-center gap-3 rounded-xl border-2 transition-all min-h-16 outline-none w-full",
         sizeClasses[size],
         isActive ? activeColorClasses[activeColor] : "border-zinc-700/40 hover:border-zinc-600",
         disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
         className
       ),
       children: [
-        prefix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-zinc-400 text-xs font-mono font-bold", children: prefix }),
-        (iconsLeft.length > 0 || textLeft) && /* @__PURE__ */ jsxRuntime.jsxs(InputGroupAddon, { children: [
-          textLeft && /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: typeof textLeft === "string" ? textLeft : "" }),
-          iconsLeft.map((IconComponent, index) => /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 20, className: "text-zinc-400" }, index))
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full items-start", children: [
+          prefix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-zinc-400 text-xs font-mono font-bold", children: prefix }),
+          (iconsLeft.length > 0 || textLeft) && /* @__PURE__ */ jsxRuntime.jsxs(InputGroupAddon, { children: [
+            textLeft && /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: typeof textLeft === "string" ? textLeft : "" }),
+            iconsLeft.map((IconComponent, index) => /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 20, className: "text-zinc-400" }, index))
+          ] })
         ] }),
-        placeholder && displayValue.toString().length == 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono font-bold text-zinc-500/20", style: { color: "#8080807d" }, children: placeholder }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-          "font-mono font-bold tracking-widest",
-          !displayValue && "text-zinc-500"
-        ), children: inputType !== "password" /* PASSWORD */ ? displayValue : "\u2022".repeat(displayValue.toString().length) }),
-        suffix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-zinc-400 text-sm", children: suffix }),
-        (iconsRight.length > 0 || textRight) && /* @__PURE__ */ jsxRuntime.jsxs(InputGroupAddon, { className: "ml-auto", children: [
-          textRight && /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: textRight }),
-          iconsRight.map((IconComponent, index) => /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 20, className: "text-zinc-400" }, index))
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex h-full ", className), children: [
+          placeholder && displayValue.toString().length == 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono font-bold text-zinc-500/20", style: { color: "#8080807d" }, children: placeholder }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+            "font-mono font-bold tracking-widest",
+            !displayValue && "text-zinc-500"
+          ), children: inputType == "password" /* PASSWORD */ || isPassword ? "\u2022".repeat(displayValue.toString().length) : displayValue })
         ] }),
-        infoTooltip && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-auto text-[10px] uppercase tracking-widest", children: /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipPrimitive.Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { size: 20, className: "text-zinc-400 hover:text-zinc-200" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive.TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: infoTooltip }) })
-        ] }) }) })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full h-full items-center justify-end", children: [
+          (suffix || name) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-zinc-400 text-sm w-full text-right", children: suffix ?? name }),
+          (iconsRight.length > 0 || textRight) && /* @__PURE__ */ jsxRuntime.jsxs(InputGroupAddon, { className: "ml-auto", children: [
+            textRight && /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: textRight }),
+            iconsRight.map((IconComponent, index) => /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 20, className: "text-zinc-400" }, index))
+          ] }),
+          infoTooltip && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-auto text-[10px] uppercase tracking-widest", children: /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipPrimitive.Tooltip, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { size: 20, className: "text-zinc-400 hover:text-zinc-200" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive.TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: infoTooltip }) })
+          ] }) }) })
+        ] })
       ]
     }
   );
@@ -13005,9 +13041,24 @@ var KeyboardQwerty = ({ onKeyPress, onEnter, keyFontSize = "text-2xl", onDelete,
   const [shiftMode, setShiftMode] = React3.useState("off");
   const [mode, setMode] = React3.useState("letters");
   const lastShiftPress = React3.useRef(0);
-  const { currentInputField, write, setIsOpen, backspace, isInputRequired, value } = useKeyboardStore();
   const storeOnEnter = useKeyboardStore((state) => state.onEnter);
   const isUpper = shiftMode !== "off";
+  const {
+    currentInputField,
+    write,
+    setIsOpen,
+    setIsOpenDynamic,
+    backspace,
+    isInputRequired,
+    value,
+    inputPlaceholder,
+    isPassword,
+    infoTooltip,
+    iconsLeft,
+    iconsRight,
+    inputLabel,
+    classNameTextField
+  } = useKeyboardStore();
   React3.useEffect(() => {
     const handleKeyDown = (e) => {
       const active = document.activeElement;
@@ -13095,10 +13146,15 @@ var KeyboardQwerty = ({ onKeyPress, onEnter, keyFontSize = "text-2xl", onDelete,
     !currentInputField && /* @__PURE__ */ jsxRuntime.jsx(
       TextField,
       {
-        name: "",
+        name: inputLabel ?? "",
         value,
+        isPassword,
+        placeholder: !inputPlaceholder || inputPlaceholder?.length == 0 ? "" : inputPlaceholder,
         isActive: true,
-        className: "justify-center"
+        infoTooltip,
+        iconsLeft: iconsLeft && iconsLeft.length == 0 ? isPassword ? [lucideReact.LockIcon] : [lucideReact.Pencil] : iconsLeft,
+        iconsRight: iconsRight && iconsRight.length == 0 ? [] : iconsRight,
+        className: classNameTextField ?? isPassword ? "justify-center" : ""
       }
     )
   ] });
@@ -13107,8 +13163,12 @@ var KeyboardQwerty = ({ onKeyPress, onEnter, keyFontSize = "text-2xl", onDelete,
   }, className: "bg-red-200 text-xs", style: { backgroundColor: "#faba005e" } };
   const btnEsc = { label: "esc", onClick: () => {
     setIsOpen(false);
+    setIsOpenDynamic(false);
   }, className: "", style: { backgroundColor: "#ffc0c05e" } };
-  const btnEnter = { label: "Enter", onClick: onEnter, className: "flex-[2] bg-green-200", style: { backgroundColor: "#008f003d" } };
+  const btnEnter = { label: "Enter", onClick: () => {
+    onEnter?.() ?? storeOnEnter?.();
+    console.log("btnEnter");
+  }, className: "flex-[2] bg-green-200", style: { backgroundColor: "#008f003d" } };
   if (mode === "symbols") {
     const keys = [
       ["esc", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")"],