@retinalabsllc/zairusjs 15.0.3 → 15.0.5

package/dist/index.js

@@ -1728,7 +1728,7 @@ var ConfirmationDialog = ({
     {
       onClick: onConfirm,
       disabled: isProcessing,
-      className: `flex-1 py-4 text-[13px] transition-colors disabled:opacity-50 flex justify-center items-center outline-none  ${isDestructive ? "text-black hover:bg-red-50" : "text-black hover:bg-neutral-50"}`
+      className: `flex-1 py-4 text-[13px] transition-colors disabled:opacity-50 flex justify-center items-center outline-none  ${isDestructive ? "text-black hover:bg-neutral-50" : "text-black hover:bg-neutral-50"}`
     },
     isProcessing ? /* @__PURE__ */ import_react27.default.createElement(import_react28.HugeiconsIcon, { icon: import_core_free_icons9.Loading03Icon, className: "animate-spin", size: 18 }) : confirmText
   ))));
@@ -2214,7 +2214,7 @@ var MenuRow = ({
   "div",
   {
     onClick: disabled ? void 0 : onClick,
-    className: `flex items-center p-3 transition-colors ${!isLast ? "border-b border-neutral-100" : ""} ${disabled ? "opacity-40 cursor-not-allowed" : "cursor-pointer hover:bg-neutral-50"}`
+    className: `flex items-center p-3 transition-colors ${!isLast ? "" : ""} ${disabled ? "opacity-40 cursor-not-allowed" : "cursor-pointer hover:bg-neutral-50"}`
   },
   /* @__PURE__ */ import_react31.default.createElement("div", { className: "w-9 h-9 rounded-full border border-neutral-200 flex items-center justify-center shrink-0 mr-4" }, /* @__PURE__ */ import_react31.default.createElement(import_react32.HugeiconsIcon, { icon, size: 16, className: iconColor })),
   /* @__PURE__ */ import_react31.default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ import_react31.default.createElement("p", { className: `text-[13px] truncate ${titleColor}` }, title), /* @__PURE__ */ import_react31.default.createElement("p", { className: "text-[11px] text-neutral-500 truncate" }, subtitle)),
@@ -4464,19 +4464,10 @@ var PinDialerBottomSheet = ({
   (0, import_react75.useEffect)(() => {
     setPin("");
   }, [isOpen]);
-  const handlePinPress = (value) => {
-    if (isVerifying) return;
-    if (value === "del") {
-      setPin((prev) => prev.slice(0, -1));
-      return;
-    }
-    if (pin.length < 4) {
-      const newPin = pin + value;
-      setPin(newPin);
-      if (newPin.length === 4) {
-        onComplete(newPin);
-      }
-    }
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (isVerifying || pin.length !== 4) return;
+    onComplete(pin);
   };
   if (!isOpen) return null;
   return /* @__PURE__ */ import_react75.default.createElement("div", { className: "fixed inset-0 z-150 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react75.default.createElement(
@@ -4487,44 +4478,37 @@ var PinDialerBottomSheet = ({
         if (!isVerifying) onClose();
       }
     }
-  ), /* @__PURE__ */ import_react75.default.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0" }, /* @__PURE__ */ import_react75.default.createElement("h3", { className: "text-[16px] text-black  tracking-tight" }, title), /* @__PURE__ */ import_react75.default.createElement(
+  ), /* @__PURE__ */ import_react75.default.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0" }, /* @__PURE__ */ import_react75.default.createElement("h3", { className: "text-[16px] text-black tracking-tight" }, title), /* @__PURE__ */ import_react75.default.createElement(
     "button",
     {
       onClick: () => {
         if (!isVerifying) onClose();
       },
-      className: "text-neutral-400 hover:text-black transition-colors outline-none"
+      disabled: isVerifying,
+      className: "text-neutral-400 hover:text-black transition-colors outline-none disabled:opacity-50"
     },
     /* @__PURE__ */ import_react75.default.createElement(import_react76.HugeiconsIcon, { icon: import_core_free_icons26.CancelCircleIcon, size: 20 })
-  )), /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex flex-col px-6 pb-8 pt-2 relative" }, /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex justify-center gap-4 mb-8" }, [0, 1, 2, 3].map((i) => /* @__PURE__ */ import_react75.default.createElement(
-    "div",
+  )), /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex flex-col px-6 pb-6 pt-2 relative" }, /* @__PURE__ */ import_react75.default.createElement("form", { onSubmit: handleSubmit, className: "flex flex-col gap-6" }, /* @__PURE__ */ import_react75.default.createElement(
+    TextInput,
     {
-      key: i,
-      className: `w-2 h-2 rounded-full transition-colors duration-200 ${pin.length > i ? "bg-black" : "bg-neutral-200"}`
+      type: "password",
+      label: "Enter 4-Digit PIN",
+      maxLength: 4,
+      disabled: isVerifying,
+      value: pin,
+      onChange: (val) => setPin(val.replace(/\D/g, "").substring(0, 4)),
+      placeholder: "\u2022\u2022\u2022\u2022"
     }
-  ))), isVerifying && /* @__PURE__ */ import_react75.default.createElement("div", { className: "absolute inset-0 bg-white/80 backdrop-blur-sm z-10 flex items-center justify-center rounded-b-2xl" }, /* @__PURE__ */ import_react75.default.createElement(import_react76.HugeiconsIcon, { icon: import_core_free_icons26.Loading03Icon, size: 28, className: "animate-spin text-black" })), /* @__PURE__ */ import_react75.default.createElement("div", { className: "grid grid-cols-3 gap-y-4 gap-x-6 max-w-60 mx-auto" }, [1, 2, 3, 4, 5, 6, 7, 8, 9].map((num) => /* @__PURE__ */ import_react75.default.createElement(
-    "button",
-    {
-      key: num,
-      onClick: () => handlePinPress(num),
-      className: "w-14 h-14 rounded-full flex bg-neutral-50 items-center justify-center text-sm text-black hover:bg-neutral-50 transition-colors mx-auto outline-none active:scale-95"
-    },
-    num
-  )), /* @__PURE__ */ import_react75.default.createElement("div", null), " ", /* @__PURE__ */ import_react75.default.createElement(
-    "button",
-    {
-      onClick: () => handlePinPress(0),
-      className: "w-14 h-14 rounded-full flex bg-neutral-50 items-center justify-center text-sm text-black hover:bg-neutral-50 transition-colors mx-auto outline-none active:scale-95"
-    },
-    "0"
-  ), /* @__PURE__ */ import_react75.default.createElement(
-    "button",
+  ), /* @__PURE__ */ import_react75.default.createElement("div", { className: "pt-2" }, /* @__PURE__ */ import_react75.default.createElement(
+    ThreeDActionButton,
     {
-      onClick: () => handlePinPress("del"),
-      className: "w-14 h-14 rounded-full flex items-center justify-center text-neutral-400 hover:text-black hover:bg-neutral-50 transition-colors mx-auto outline-none active:scale-95"
+      type: "submit",
+      disabled: isVerifying || pin.length !== 4,
+      isLoading: isVerifying,
+      className: "w-full"
     },
-    /* @__PURE__ */ import_react75.default.createElement(import_react76.HugeiconsIcon, { icon: import_core_free_icons26.LessThanIcon, size: 20 })
-  )))));
+    "Confirm Action"
+  ))))));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -1693,7 +1693,7 @@ var ConfirmationDialog = ({
     {
       onClick: onConfirm,
       disabled: isProcessing,
-      className: `flex-1 py-4 text-[13px] transition-colors disabled:opacity-50 flex justify-center items-center outline-none  ${isDestructive ? "text-black hover:bg-red-50" : "text-black hover:bg-neutral-50"}`
+      className: `flex-1 py-4 text-[13px] transition-colors disabled:opacity-50 flex justify-center items-center outline-none  ${isDestructive ? "text-black hover:bg-neutral-50" : "text-black hover:bg-neutral-50"}`
     },
     isProcessing ? /* @__PURE__ */ React17.createElement(HugeiconsIcon11, { icon: Loading03Icon6, className: "animate-spin", size: 18 }) : confirmText
   ))));
@@ -2187,7 +2187,7 @@ var MenuRow = ({
   "div",
   {
     onClick: disabled ? void 0 : onClick,
-    className: `flex items-center p-3 transition-colors ${!isLast ? "border-b border-neutral-100" : ""} ${disabled ? "opacity-40 cursor-not-allowed" : "cursor-pointer hover:bg-neutral-50"}`
+    className: `flex items-center p-3 transition-colors ${!isLast ? "" : ""} ${disabled ? "opacity-40 cursor-not-allowed" : "cursor-pointer hover:bg-neutral-50"}`
   },
   /* @__PURE__ */ React19.createElement("div", { className: "w-9 h-9 rounded-full border border-neutral-200 flex items-center justify-center shrink-0 mr-4" }, /* @__PURE__ */ React19.createElement(HugeiconsIcon13, { icon, size: 16, className: iconColor })),
   /* @__PURE__ */ React19.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React19.createElement("p", { className: `text-[13px] truncate ${titleColor}` }, title), /* @__PURE__ */ React19.createElement("p", { className: "text-[11px] text-neutral-500 truncate" }, subtitle)),
@@ -4468,7 +4468,7 @@ var CardCreationDialog = ({ isOpen, onClose, onSuccess }) => {
 // src/components/PinDialerBottomSheet.tsx
 import React45, { useState as useState30, useEffect as useEffect17 } from "react";
 import { HugeiconsIcon as HugeiconsIcon31 } from "@hugeicons/react";
-import { Loading03Icon as Loading03Icon19, CancelCircleIcon as CancelCircleIcon8, LessThanIcon } from "@hugeicons/core-free-icons";
+import { CancelCircleIcon as CancelCircleIcon8 } from "@hugeicons/core-free-icons";
 var PinDialerBottomSheet = ({
   isOpen,
   title = "Action Required",
@@ -4480,19 +4480,10 @@ var PinDialerBottomSheet = ({
   useEffect17(() => {
     setPin("");
   }, [isOpen]);
-  const handlePinPress = (value) => {
-    if (isVerifying) return;
-    if (value === "del") {
-      setPin((prev) => prev.slice(0, -1));
-      return;
-    }
-    if (pin.length < 4) {
-      const newPin = pin + value;
-      setPin(newPin);
-      if (newPin.length === 4) {
-        onComplete(newPin);
-      }
-    }
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (isVerifying || pin.length !== 4) return;
+    onComplete(pin);
   };
   if (!isOpen) return null;
   return /* @__PURE__ */ React45.createElement("div", { className: "fixed inset-0 z-150 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React45.createElement(
@@ -4503,44 +4494,37 @@ var PinDialerBottomSheet = ({
         if (!isVerifying) onClose();
       }
     }
-  ), /* @__PURE__ */ React45.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React45.createElement("div", { className: "flex items-center justify-between p-5 shrink-0" }, /* @__PURE__ */ React45.createElement("h3", { className: "text-[16px] text-black  tracking-tight" }, title), /* @__PURE__ */ React45.createElement(
+  ), /* @__PURE__ */ React45.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React45.createElement("div", { className: "flex items-center justify-between p-5 shrink-0" }, /* @__PURE__ */ React45.createElement("h3", { className: "text-[16px] text-black tracking-tight" }, title), /* @__PURE__ */ React45.createElement(
     "button",
     {
       onClick: () => {
         if (!isVerifying) onClose();
       },
-      className: "text-neutral-400 hover:text-black transition-colors outline-none"
+      disabled: isVerifying,
+      className: "text-neutral-400 hover:text-black transition-colors outline-none disabled:opacity-50"
     },
     /* @__PURE__ */ React45.createElement(HugeiconsIcon31, { icon: CancelCircleIcon8, size: 20 })
-  )), /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col px-6 pb-8 pt-2 relative" }, /* @__PURE__ */ React45.createElement("div", { className: "flex justify-center gap-4 mb-8" }, [0, 1, 2, 3].map((i) => /* @__PURE__ */ React45.createElement(
-    "div",
+  )), /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col px-6 pb-6 pt-2 relative" }, /* @__PURE__ */ React45.createElement("form", { onSubmit: handleSubmit, className: "flex flex-col gap-6" }, /* @__PURE__ */ React45.createElement(
+    TextInput,
     {
-      key: i,
-      className: `w-2 h-2 rounded-full transition-colors duration-200 ${pin.length > i ? "bg-black" : "bg-neutral-200"}`
+      type: "password",
+      label: "Enter 4-Digit PIN",
+      maxLength: 4,
+      disabled: isVerifying,
+      value: pin,
+      onChange: (val) => setPin(val.replace(/\D/g, "").substring(0, 4)),
+      placeholder: "\u2022\u2022\u2022\u2022"
     }
-  ))), isVerifying && /* @__PURE__ */ React45.createElement("div", { className: "absolute inset-0 bg-white/80 backdrop-blur-sm z-10 flex items-center justify-center rounded-b-2xl" }, /* @__PURE__ */ React45.createElement(HugeiconsIcon31, { icon: Loading03Icon19, size: 28, className: "animate-spin text-black" })), /* @__PURE__ */ React45.createElement("div", { className: "grid grid-cols-3 gap-y-4 gap-x-6 max-w-60 mx-auto" }, [1, 2, 3, 4, 5, 6, 7, 8, 9].map((num) => /* @__PURE__ */ React45.createElement(
-    "button",
-    {
-      key: num,
-      onClick: () => handlePinPress(num),
-      className: "w-14 h-14 rounded-full flex bg-neutral-50 items-center justify-center text-sm text-black hover:bg-neutral-50 transition-colors mx-auto outline-none active:scale-95"
-    },
-    num
-  )), /* @__PURE__ */ React45.createElement("div", null), " ", /* @__PURE__ */ React45.createElement(
-    "button",
-    {
-      onClick: () => handlePinPress(0),
-      className: "w-14 h-14 rounded-full flex bg-neutral-50 items-center justify-center text-sm text-black hover:bg-neutral-50 transition-colors mx-auto outline-none active:scale-95"
-    },
-    "0"
-  ), /* @__PURE__ */ React45.createElement(
-    "button",
+  ), /* @__PURE__ */ React45.createElement("div", { className: "pt-2" }, /* @__PURE__ */ React45.createElement(
+    ThreeDActionButton,
     {
-      onClick: () => handlePinPress("del"),
-      className: "w-14 h-14 rounded-full flex items-center justify-center text-neutral-400 hover:text-black hover:bg-neutral-50 transition-colors mx-auto outline-none active:scale-95"
+      type: "submit",
+      disabled: isVerifying || pin.length !== 4,
+      isLoading: isVerifying,
+      className: "w-full"
     },
-    /* @__PURE__ */ React45.createElement(HugeiconsIcon31, { icon: LessThanIcon, size: 20 })
-  )))));
+    "Confirm Action"
+  ))))));
 };
 export {
   AppBento2,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retinalabsllc/zairusjs",
-  "version": "15.0.3",
+  "version": "15.0.5",
   "description": "A perceptive, Ai data driven Next.js UI component library.",
   "author": "Retina Labs Company",
   "license": "MIT",