@retinalabsllc/zairusjs 15.0.3 → 15.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +31 -51
  2. package/dist/index.mjs +32 -52
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1561,7 +1561,7 @@ var UniversalHomeView = ({
1561
1561
  const [isAvatarLoaded, setIsAvatarLoaded] = (0, import_react25.useState)(false);
1562
1562
  const [showNotifDialog, setShowNotifDialog] = (0, import_react25.useState)(false);
1563
1563
  const [selectedNotif, setSelectedNotif] = (0, import_react25.useState)(null);
1564
- const fallbackAvatarUrl = `/api/avatar/?name=${encodeURIComponent(fullName || " ")}&background=ceff8a&color=000000&size=200&font-size=0.33`;
1564
+ const fallbackAvatarUrl = `/api/avatar/?name=${encodeURIComponent(fullName || " ")}&background=ffffff&color=000000&size=200&font-size=0.33`;
1565
1565
  const finalAvatarSrc = avatarSrc || fallbackAvatarUrl;
1566
1566
  const hasUnreadNotifs = notifications.some((n) => !n.isRead);
1567
1567
  (0, import_react25.useEffect)(() => {
@@ -1728,7 +1728,7 @@ var ConfirmationDialog = ({
1728
1728
  {
1729
1729
  onClick: onConfirm,
1730
1730
  disabled: isProcessing,
1731
- 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"}`
1731
+ 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"}`
1732
1732
  },
1733
1733
  isProcessing ? /* @__PURE__ */ import_react27.default.createElement(import_react28.HugeiconsIcon, { icon: import_core_free_icons9.Loading03Icon, className: "animate-spin", size: 18 }) : confirmText
1734
1734
  ))));
@@ -2094,14 +2094,10 @@ var UniversalCardPage = ({
2094
2094
  ), isFrozen && /* @__PURE__ */ import_react31.default.createElement(
2095
2095
  "button",
2096
2096
  {
2097
- onClick: (e) => {
2098
- e.stopPropagation();
2099
- handleOverlayUnfreeze();
2100
- },
2101
2097
  disabled: isOverlayActionLoading,
2102
2098
  className: `px-6 py-2.5 text-[12px] rounded-full transition-all outline-none active:scale-95 flex items-center gap-2 disabled:opacity-80 ${buttonClasses}`
2103
2099
  },
2104
- isOverlayActionLoading ? /* @__PURE__ */ import_react31.default.createElement(import_react32.HugeiconsIcon, { icon: import_core_free_icons11.Loading03Icon, size: 16, className: `animate-spin ${activeCard.contentDark ? "text-black" : "text-white"}` }) : "Unfreeze Card"
2100
+ isOverlayActionLoading ? /* @__PURE__ */ import_react31.default.createElement(import_react32.HugeiconsIcon, { icon: import_core_free_icons11.Loading03Icon, size: 16, className: `animate-spin ${activeCard.contentDark ? "text-black" : "text-white"}` }) : "Card Frozen"
2105
2101
  )),
2106
2102
  /* @__PURE__ */ import_react31.default.createElement("div", { className: `absolute inset-0 w-full h-full rounded-2xl overflow-hidden transition-all duration-700 ${isBgLoaded ? "opacity-100 scale-100" : "opacity-0 scale-105"}` }, /* @__PURE__ */ import_react31.default.createElement(
2107
2103
  "div",
@@ -2189,7 +2185,7 @@ var UniversalCardPage = ({
2189
2185
  {
2190
2186
  isOpen: showDeleteDialog,
2191
2187
  title: "Delete Card",
2192
- message: "Are you sure? The card will be permanently deleted from your account.",
2188
+ message: "Please ensure you spend all funds on this card before deleting. Once deleted, any remaining funds will be permanently lost and cannot be recovered.",
2193
2189
  confirmText: "Delete",
2194
2190
  isDestructive: true,
2195
2191
  isProcessing: isDeleting,
@@ -2214,7 +2210,7 @@ var MenuRow = ({
2214
2210
  "div",
2215
2211
  {
2216
2212
  onClick: disabled ? void 0 : onClick,
2217
- 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"}`
2213
+ className: `flex items-center p-3 transition-colors ${!isLast ? "" : ""} ${disabled ? "opacity-40 cursor-not-allowed" : "cursor-pointer hover:bg-neutral-50"}`
2218
2214
  },
2219
2215
  /* @__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 })),
2220
2216
  /* @__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 +3953,7 @@ var formatWeb3Name = (name) => {
3957
3953
  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" }));
3958
3954
  var AvatarLogo = ({ src, alt, name, sizeClass = "w-12 h-12" }) => {
3959
3955
  const [isLoaded, setIsLoaded] = (0, import_react67.useState)(false);
3960
- const fallbackUrl = `/api/avatar/?name=${encodeURIComponent(name || " ")}&background=ceff8a&color=000000&size=200&font-size=0.33`;
3956
+ const fallbackUrl = `/api/avatar/?name=${encodeURIComponent(name || " ")}&background=ffffff&color=000000&size=200&font-size=0.33`;
3961
3957
  const finalSrc = src || fallbackUrl;
3962
3958
  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"}` }));
3963
3959
  };
@@ -4089,7 +4085,7 @@ var UniversalReferralPage = ({
4089
4085
  };
4090
4086
  const AvatarLogo2 = ({ src, alt, name, sizeClass = "w-10 h-10" }) => {
4091
4087
  const [isLoaded, setIsLoaded] = (0, import_react69.useState)(false);
4092
- const fallbackUrl = `/api/avatar/?name=${encodeURIComponent(name || " ")}&background=ceff8a&color=000000&size=200&font-size=0.33`;
4088
+ const fallbackUrl = `/api/avatar/?name=${encodeURIComponent(name || " ")}&background=ffffff&color=000000&size=200&font-size=0.33`;
4093
4089
  const finalSrc = src || fallbackUrl;
4094
4090
  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"}` }));
4095
4091
  };
@@ -4464,19 +4460,10 @@ var PinDialerBottomSheet = ({
4464
4460
  (0, import_react75.useEffect)(() => {
4465
4461
  setPin("");
4466
4462
  }, [isOpen]);
4467
- const handlePinPress = (value) => {
4468
- if (isVerifying) return;
4469
- if (value === "del") {
4470
- setPin((prev) => prev.slice(0, -1));
4471
- return;
4472
- }
4473
- if (pin.length < 4) {
4474
- const newPin = pin + value;
4475
- setPin(newPin);
4476
- if (newPin.length === 4) {
4477
- onComplete(newPin);
4478
- }
4479
- }
4463
+ const handleSubmit = (e) => {
4464
+ e.preventDefault();
4465
+ if (isVerifying || pin.length !== 4) return;
4466
+ onComplete(pin);
4480
4467
  };
4481
4468
  if (!isOpen) return null;
4482
4469
  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 +4474,37 @@ var PinDialerBottomSheet = ({
4487
4474
  if (!isVerifying) onClose();
4488
4475
  }
4489
4476
  }
4490
- ), /* @__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(
4477
+ ), /* @__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(
4491
4478
  "button",
4492
4479
  {
4493
4480
  onClick: () => {
4494
4481
  if (!isVerifying) onClose();
4495
4482
  },
4496
- className: "text-neutral-400 hover:text-black transition-colors outline-none"
4483
+ disabled: isVerifying,
4484
+ className: "text-neutral-400 hover:text-black transition-colors outline-none disabled:opacity-50"
4497
4485
  },
4498
4486
  /* @__PURE__ */ import_react75.default.createElement(import_react76.HugeiconsIcon, { icon: import_core_free_icons26.CancelCircleIcon, size: 20 })
4499
- )), /* @__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(
4500
- "div",
4487
+ )), /* @__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(
4488
+ TextInput,
4501
4489
  {
4502
- key: i,
4503
- className: `w-2 h-2 rounded-full transition-colors duration-200 ${pin.length > i ? "bg-black" : "bg-neutral-200"}`
4490
+ type: "password",
4491
+ label: "Enter 4-Digit PIN",
4492
+ maxLength: 4,
4493
+ disabled: isVerifying,
4494
+ value: pin,
4495
+ onChange: (val) => setPin(val.replace(/\D/g, "").substring(0, 4)),
4496
+ placeholder: "\u2022\u2022\u2022\u2022"
4504
4497
  }
4505
- ))), 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(
4506
- "button",
4507
- {
4508
- key: num,
4509
- onClick: () => handlePinPress(num),
4510
- 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"
4511
- },
4512
- num
4513
- )), /* @__PURE__ */ import_react75.default.createElement("div", null), " ", /* @__PURE__ */ import_react75.default.createElement(
4514
- "button",
4515
- {
4516
- onClick: () => handlePinPress(0),
4517
- 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"
4518
- },
4519
- "0"
4520
- ), /* @__PURE__ */ import_react75.default.createElement(
4521
- "button",
4498
+ ), /* @__PURE__ */ import_react75.default.createElement("div", { className: "pt-2" }, /* @__PURE__ */ import_react75.default.createElement(
4499
+ ThreeDActionButton,
4522
4500
  {
4523
- onClick: () => handlePinPress("del"),
4524
- 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"
4501
+ type: "submit",
4502
+ disabled: isVerifying || pin.length !== 4,
4503
+ isLoading: isVerifying,
4504
+ className: "w-full"
4525
4505
  },
4526
- /* @__PURE__ */ import_react75.default.createElement(import_react76.HugeiconsIcon, { icon: import_core_free_icons26.LessThanIcon, size: 20 })
4527
- )))));
4506
+ "Confirm Action"
4507
+ ))))));
4528
4508
  };
4529
4509
  // Annotate the CommonJS export names for ESM import in node:
4530
4510
  0 && (module.exports = {
package/dist/index.mjs CHANGED
@@ -1516,7 +1516,7 @@ var UniversalHomeView = ({
1516
1516
  const [isAvatarLoaded, setIsAvatarLoaded] = useState9(false);
1517
1517
  const [showNotifDialog, setShowNotifDialog] = useState9(false);
1518
1518
  const [selectedNotif, setSelectedNotif] = useState9(null);
1519
- const fallbackAvatarUrl = `/api/avatar/?name=${encodeURIComponent(fullName || " ")}&background=ceff8a&color=000000&size=200&font-size=0.33`;
1519
+ const fallbackAvatarUrl = `/api/avatar/?name=${encodeURIComponent(fullName || " ")}&background=ffffff&color=000000&size=200&font-size=0.33`;
1520
1520
  const finalAvatarSrc = avatarSrc || fallbackAvatarUrl;
1521
1521
  const hasUnreadNotifs = notifications.some((n) => !n.isRead);
1522
1522
  useEffect7(() => {
@@ -1693,7 +1693,7 @@ var ConfirmationDialog = ({
1693
1693
  {
1694
1694
  onClick: onConfirm,
1695
1695
  disabled: isProcessing,
1696
- 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"}`
1696
+ 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"}`
1697
1697
  },
1698
1698
  isProcessing ? /* @__PURE__ */ React17.createElement(HugeiconsIcon11, { icon: Loading03Icon6, className: "animate-spin", size: 18 }) : confirmText
1699
1699
  ))));
@@ -2067,14 +2067,10 @@ var UniversalCardPage = ({
2067
2067
  ), isFrozen && /* @__PURE__ */ React19.createElement(
2068
2068
  "button",
2069
2069
  {
2070
- onClick: (e) => {
2071
- e.stopPropagation();
2072
- handleOverlayUnfreeze();
2073
- },
2074
2070
  disabled: isOverlayActionLoading,
2075
2071
  className: `px-6 py-2.5 text-[12px] rounded-full transition-all outline-none active:scale-95 flex items-center gap-2 disabled:opacity-80 ${buttonClasses}`
2076
2072
  },
2077
- isOverlayActionLoading ? /* @__PURE__ */ React19.createElement(HugeiconsIcon13, { icon: Loading03Icon8, size: 16, className: `animate-spin ${activeCard.contentDark ? "text-black" : "text-white"}` }) : "Unfreeze Card"
2073
+ isOverlayActionLoading ? /* @__PURE__ */ React19.createElement(HugeiconsIcon13, { icon: Loading03Icon8, size: 16, className: `animate-spin ${activeCard.contentDark ? "text-black" : "text-white"}` }) : "Card Frozen"
2078
2074
  )),
2079
2075
  /* @__PURE__ */ React19.createElement("div", { className: `absolute inset-0 w-full h-full rounded-2xl overflow-hidden transition-all duration-700 ${isBgLoaded ? "opacity-100 scale-100" : "opacity-0 scale-105"}` }, /* @__PURE__ */ React19.createElement(
2080
2076
  "div",
@@ -2162,7 +2158,7 @@ var UniversalCardPage = ({
2162
2158
  {
2163
2159
  isOpen: showDeleteDialog,
2164
2160
  title: "Delete Card",
2165
- message: "Are you sure? The card will be permanently deleted from your account.",
2161
+ message: "Please ensure you spend all funds on this card before deleting. Once deleted, any remaining funds will be permanently lost and cannot be recovered.",
2166
2162
  confirmText: "Delete",
2167
2163
  isDestructive: true,
2168
2164
  isProcessing: isDeleting,
@@ -2187,7 +2183,7 @@ var MenuRow = ({
2187
2183
  "div",
2188
2184
  {
2189
2185
  onClick: disabled ? void 0 : onClick,
2190
- 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"}`
2186
+ className: `flex items-center p-3 transition-colors ${!isLast ? "" : ""} ${disabled ? "opacity-40 cursor-not-allowed" : "cursor-pointer hover:bg-neutral-50"}`
2191
2187
  },
2192
2188
  /* @__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 })),
2193
2189
  /* @__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 +3960,7 @@ var formatWeb3Name = (name) => {
3964
3960
  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" }));
3965
3961
  var AvatarLogo = ({ src, alt, name, sizeClass = "w-12 h-12" }) => {
3966
3962
  const [isLoaded, setIsLoaded] = useState26(false);
3967
- const fallbackUrl = `/api/avatar/?name=${encodeURIComponent(name || " ")}&background=ceff8a&color=000000&size=200&font-size=0.33`;
3963
+ const fallbackUrl = `/api/avatar/?name=${encodeURIComponent(name || " ")}&background=ffffff&color=000000&size=200&font-size=0.33`;
3968
3964
  const finalSrc = src || fallbackUrl;
3969
3965
  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"}` }));
3970
3966
  };
@@ -4101,7 +4097,7 @@ var UniversalReferralPage = ({
4101
4097
  };
4102
4098
  const AvatarLogo2 = ({ src, alt, name, sizeClass = "w-10 h-10" }) => {
4103
4099
  const [isLoaded, setIsLoaded] = useState27(false);
4104
- const fallbackUrl = `/api/avatar/?name=${encodeURIComponent(name || " ")}&background=ceff8a&color=000000&size=200&font-size=0.33`;
4100
+ const fallbackUrl = `/api/avatar/?name=${encodeURIComponent(name || " ")}&background=ffffff&color=000000&size=200&font-size=0.33`;
4105
4101
  const finalSrc = src || fallbackUrl;
4106
4102
  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"}` }));
4107
4103
  };
@@ -4468,7 +4464,7 @@ var CardCreationDialog = ({ isOpen, onClose, onSuccess }) => {
4468
4464
  // src/components/PinDialerBottomSheet.tsx
4469
4465
  import React45, { useState as useState30, useEffect as useEffect17 } from "react";
4470
4466
  import { HugeiconsIcon as HugeiconsIcon31 } from "@hugeicons/react";
4471
- import { Loading03Icon as Loading03Icon19, CancelCircleIcon as CancelCircleIcon8, LessThanIcon } from "@hugeicons/core-free-icons";
4467
+ import { CancelCircleIcon as CancelCircleIcon8 } from "@hugeicons/core-free-icons";
4472
4468
  var PinDialerBottomSheet = ({
4473
4469
  isOpen,
4474
4470
  title = "Action Required",
@@ -4480,19 +4476,10 @@ var PinDialerBottomSheet = ({
4480
4476
  useEffect17(() => {
4481
4477
  setPin("");
4482
4478
  }, [isOpen]);
4483
- const handlePinPress = (value) => {
4484
- if (isVerifying) return;
4485
- if (value === "del") {
4486
- setPin((prev) => prev.slice(0, -1));
4487
- return;
4488
- }
4489
- if (pin.length < 4) {
4490
- const newPin = pin + value;
4491
- setPin(newPin);
4492
- if (newPin.length === 4) {
4493
- onComplete(newPin);
4494
- }
4495
- }
4479
+ const handleSubmit = (e) => {
4480
+ e.preventDefault();
4481
+ if (isVerifying || pin.length !== 4) return;
4482
+ onComplete(pin);
4496
4483
  };
4497
4484
  if (!isOpen) return null;
4498
4485
  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 +4490,37 @@ var PinDialerBottomSheet = ({
4503
4490
  if (!isVerifying) onClose();
4504
4491
  }
4505
4492
  }
4506
- ), /* @__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(
4493
+ ), /* @__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(
4507
4494
  "button",
4508
4495
  {
4509
4496
  onClick: () => {
4510
4497
  if (!isVerifying) onClose();
4511
4498
  },
4512
- className: "text-neutral-400 hover:text-black transition-colors outline-none"
4499
+ disabled: isVerifying,
4500
+ className: "text-neutral-400 hover:text-black transition-colors outline-none disabled:opacity-50"
4513
4501
  },
4514
4502
  /* @__PURE__ */ React45.createElement(HugeiconsIcon31, { icon: CancelCircleIcon8, size: 20 })
4515
- )), /* @__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(
4516
- "div",
4503
+ )), /* @__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(
4504
+ TextInput,
4517
4505
  {
4518
- key: i,
4519
- className: `w-2 h-2 rounded-full transition-colors duration-200 ${pin.length > i ? "bg-black" : "bg-neutral-200"}`
4506
+ type: "password",
4507
+ label: "Enter 4-Digit PIN",
4508
+ maxLength: 4,
4509
+ disabled: isVerifying,
4510
+ value: pin,
4511
+ onChange: (val) => setPin(val.replace(/\D/g, "").substring(0, 4)),
4512
+ placeholder: "\u2022\u2022\u2022\u2022"
4520
4513
  }
4521
- ))), 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(
4522
- "button",
4523
- {
4524
- key: num,
4525
- onClick: () => handlePinPress(num),
4526
- 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"
4527
- },
4528
- num
4529
- )), /* @__PURE__ */ React45.createElement("div", null), " ", /* @__PURE__ */ React45.createElement(
4530
- "button",
4531
- {
4532
- onClick: () => handlePinPress(0),
4533
- 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"
4534
- },
4535
- "0"
4536
- ), /* @__PURE__ */ React45.createElement(
4537
- "button",
4514
+ ), /* @__PURE__ */ React45.createElement("div", { className: "pt-2" }, /* @__PURE__ */ React45.createElement(
4515
+ ThreeDActionButton,
4538
4516
  {
4539
- onClick: () => handlePinPress("del"),
4540
- 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"
4517
+ type: "submit",
4518
+ disabled: isVerifying || pin.length !== 4,
4519
+ isLoading: isVerifying,
4520
+ className: "w-full"
4541
4521
  },
4542
- /* @__PURE__ */ React45.createElement(HugeiconsIcon31, { icon: LessThanIcon, size: 20 })
4543
- )))));
4522
+ "Confirm Action"
4523
+ ))))));
4544
4524
  };
4545
4525
  export {
4546
4526
  AppBento2,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@retinalabsllc/zairusjs",
3
- "version": "15.0.3",
3
+ "version": "15.0.10",
4
4
  "description": "A perceptive, Ai data driven Next.js UI component library.",
5
5
  "author": "Retina Labs Company",
6
6
  "license": "MIT",