@retinalabsllc/zairusjs 15.0.2 → 15.0.5

package/dist/index.js

@@ -1561,7 +1561,7 @@ var UniversalHomeView = ({
   const [isAvatarLoaded, setIsAvatarLoaded] = (0, import_react25.useState)(false);
   const [showNotifDialog, setShowNotifDialog] = (0, import_react25.useState)(false);
   const [selectedNotif, setSelectedNotif] = (0, import_react25.useState)(null);
-  const fallbackAvatarUrl = `/api/avatar/?name=${encodeURIComponent(fullName || " ")}&background=ffffff&color=000000&size=200&font-size=0.33`;
+  const fallbackAvatarUrl = `/api/avatar/?name=${encodeURIComponent(fullName || " ")}&background=ceff8a&color=000000&size=200&font-size=0.33`;
   const finalAvatarSrc = avatarSrc || fallbackAvatarUrl;
   const hasUnreadNotifs = notifications.some((n) => !n.isRead);
   (0, import_react25.useEffect)(() => {
@@ -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)),
@@ -3957,7 +3957,7 @@ var formatWeb3Name = (name) => {
 var PageSpinner4 = () => /* @__PURE__ */ import_react67.default.createElement("div", { className: "flex justify-center items-center py-12 w-full" }, /* @__PURE__ */ import_react67.default.createElement(import_react68.HugeiconsIcon, { icon: import_core_free_icons22.Loading03Icon, size: 32, className: "animate-spin mb-4 text-black" }));
 var AvatarLogo = ({ src, alt, name, sizeClass = "w-12 h-12" }) => {
   const [isLoaded, setIsLoaded] = (0, import_react67.useState)(false);
-  const fallbackUrl = `/api/avatar/?name=${encodeURIComponent(name || " ")}&background=ffffff&color=000000&size=200&font-size=0.33`;
+  const fallbackUrl = `/api/avatar/?name=${encodeURIComponent(name || " ")}&background=ceff8a&color=000000&size=200&font-size=0.33`;
   const finalSrc = src || fallbackUrl;
   return /* @__PURE__ */ import_react67.default.createElement("div", { className: `relative shrink-0 rounded-full bg-neutral-100 flex items-center justify-center overflow-hidden border-[3px] border-white  ${sizeClass}` }, !isLoaded && /* @__PURE__ */ import_react67.default.createElement(import_react68.HugeiconsIcon, { icon: import_core_free_icons22.Loading03Icon, size: 16, className: "animate-spin text-neutral-400 absolute" }), /* @__PURE__ */ import_react67.default.createElement("img", { src: finalSrc, alt, onLoad: () => setIsLoaded(true), className: `w-full h-full object-cover transition-opacity duration-300 ${isLoaded ? "opacity-100" : "opacity-0"}` }));
 };
@@ -4089,7 +4089,7 @@ var UniversalReferralPage = ({
   };
   const AvatarLogo2 = ({ src, alt, name, sizeClass = "w-10 h-10" }) => {
     const [isLoaded, setIsLoaded] = (0, import_react69.useState)(false);
-    const fallbackUrl = `/api/avatar/?name=${encodeURIComponent(name || " ")}&background=ffffff&color=000000&size=200&font-size=0.33`;
+    const fallbackUrl = `/api/avatar/?name=${encodeURIComponent(name || " ")}&background=ceff8a&color=000000&size=200&font-size=0.33`;
     const finalSrc = src || fallbackUrl;
     return /* @__PURE__ */ import_react69.default.createElement("div", { className: `relative shrink-0 rounded-full bg-neutral-100 flex items-center justify-center overflow-hidden border-2 border-white ${sizeClass}` }, !isLoaded && /* @__PURE__ */ import_react69.default.createElement(import_react70.HugeiconsIcon, { icon: import_core_free_icons23.Loading03Icon, size: 16, className: "animate-spin text-neutral-400 absolute" }), /* @__PURE__ */ import_react69.default.createElement("img", { src: finalSrc, alt, onLoad: () => setIsLoaded(true), className: `w-full h-full object-cover transition-opacity duration-300 ${isLoaded ? "opacity-100" : "opacity-0"}` }));
   };
@@ -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

@@ -1516,7 +1516,7 @@ var UniversalHomeView = ({
   const [isAvatarLoaded, setIsAvatarLoaded] = useState9(false);
   const [showNotifDialog, setShowNotifDialog] = useState9(false);
   const [selectedNotif, setSelectedNotif] = useState9(null);
-  const fallbackAvatarUrl = `/api/avatar/?name=${encodeURIComponent(fullName || " ")}&background=ffffff&color=000000&size=200&font-size=0.33`;
+  const fallbackAvatarUrl = `/api/avatar/?name=${encodeURIComponent(fullName || " ")}&background=ceff8a&color=000000&size=200&font-size=0.33`;
   const finalAvatarSrc = avatarSrc || fallbackAvatarUrl;
   const hasUnreadNotifs = notifications.some((n) => !n.isRead);
   useEffect7(() => {
@@ -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)),
@@ -3964,7 +3964,7 @@ var formatWeb3Name = (name) => {
 var PageSpinner4 = () => /* @__PURE__ */ React41.createElement("div", { className: "flex justify-center items-center py-12 w-full" }, /* @__PURE__ */ React41.createElement(HugeiconsIcon27, { icon: Loading03Icon16, size: 32, className: "animate-spin mb-4 text-black" }));
 var AvatarLogo = ({ src, alt, name, sizeClass = "w-12 h-12" }) => {
   const [isLoaded, setIsLoaded] = useState26(false);
-  const fallbackUrl = `/api/avatar/?name=${encodeURIComponent(name || " ")}&background=ffffff&color=000000&size=200&font-size=0.33`;
+  const fallbackUrl = `/api/avatar/?name=${encodeURIComponent(name || " ")}&background=ceff8a&color=000000&size=200&font-size=0.33`;
   const finalSrc = src || fallbackUrl;
   return /* @__PURE__ */ React41.createElement("div", { className: `relative shrink-0 rounded-full bg-neutral-100 flex items-center justify-center overflow-hidden border-[3px] border-white  ${sizeClass}` }, !isLoaded && /* @__PURE__ */ React41.createElement(HugeiconsIcon27, { icon: Loading03Icon16, size: 16, className: "animate-spin text-neutral-400 absolute" }), /* @__PURE__ */ React41.createElement("img", { src: finalSrc, alt, onLoad: () => setIsLoaded(true), className: `w-full h-full object-cover transition-opacity duration-300 ${isLoaded ? "opacity-100" : "opacity-0"}` }));
 };
@@ -4101,7 +4101,7 @@ var UniversalReferralPage = ({
   };
   const AvatarLogo2 = ({ src, alt, name, sizeClass = "w-10 h-10" }) => {
     const [isLoaded, setIsLoaded] = useState27(false);
-    const fallbackUrl = `/api/avatar/?name=${encodeURIComponent(name || " ")}&background=ffffff&color=000000&size=200&font-size=0.33`;
+    const fallbackUrl = `/api/avatar/?name=${encodeURIComponent(name || " ")}&background=ceff8a&color=000000&size=200&font-size=0.33`;
     const finalSrc = src || fallbackUrl;
     return /* @__PURE__ */ React42.createElement("div", { className: `relative shrink-0 rounded-full bg-neutral-100 flex items-center justify-center overflow-hidden border-2 border-white ${sizeClass}` }, !isLoaded && /* @__PURE__ */ React42.createElement(HugeiconsIcon28, { icon: Loading03Icon17, size: 16, className: "animate-spin text-neutral-400 absolute" }), /* @__PURE__ */ React42.createElement("img", { src: finalSrc, alt, onLoad: () => setIsLoaded(true), className: `w-full h-full object-cover transition-opacity duration-300 ${isLoaded ? "opacity-100" : "opacity-0"}` }));
   };
@@ -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.2",
+  "version": "15.0.5",
   "description": "A perceptive, Ai data driven Next.js UI component library.",
   "author": "Retina Labs Company",
   "license": "MIT",