@retinalabsllc/zairusjs 12.0.30 → 12.0.40

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.
package/dist/index.d.mts CHANGED
@@ -213,7 +213,7 @@ interface UniversalTransaction {
213
213
  cardId?: string | null;
214
214
  type: 'CARD_TRANSACTION' | 'WALLET_TRANSACTION';
215
215
  direction: 'CREDIT' | 'DEBIT';
216
- amount: number | string;
216
+ amount: string;
217
217
  currency: string;
218
218
  status: 'PENDING' | 'COMPLETED' | 'FAILED' | 'REVERSED';
219
219
  reference: string;
package/dist/index.d.ts CHANGED
@@ -213,7 +213,7 @@ interface UniversalTransaction {
213
213
  cardId?: string | null;
214
214
  type: 'CARD_TRANSACTION' | 'WALLET_TRANSACTION';
215
215
  direction: 'CREDIT' | 'DEBIT';
216
- amount: number | string;
216
+ amount: string;
217
217
  currency: string;
218
218
  status: 'PENDING' | 'COMPLETED' | 'FAILED' | 'REVERSED';
219
219
  reference: string;
package/dist/index.js CHANGED
@@ -1380,7 +1380,7 @@ var UniversalTransactionPage = ({
1380
1380
  onClick: () => setSelectedTransaction(tx),
1381
1381
  className: "flex items-center justify-between py-4 hover:bg-neutral-50 transition-colors cursor-pointer group min-w-0 px-3 -mx-3 rounded-xl"
1382
1382
  },
1383
- /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: `w-10 h-10 shrink-0 rounded-full flex items-center justify-center bg-neutral-100 text-black` }, /* @__PURE__ */ import_react23.default.createElement(import_react24.HugeiconsIcon, { icon: tx.direction === "CREDIT" ? import_core_free_icons7.ArrowDownRight01Icon : import_core_free_icons7.ArrowUpRight01Icon, size: 18 })), /* @__PURE__ */ import_react23.default.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-1" }, /* @__PURE__ */ import_react23.default.createElement("p", { className: "text-[13px] text-black truncate" }, getDisplayName(tx)), /* @__PURE__ */ import_react23.default.createElement("p", { className: `text-[12px] text-neutral-500 truncate transition-all duration-300 ${hideBalanceAmounts ? "blur-sm opacity-40 select-none" : ""}` }, tx.direction === "CREDIT" ? "+" : "-", tx.amount, " ", tx.currency))),
1383
+ /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: `w-10 h-10 shrink-0 rounded-full flex items-center justify-center bg-neutral-100 text-black` }, /* @__PURE__ */ import_react23.default.createElement(import_react24.HugeiconsIcon, { icon: tx.direction === "CREDIT" ? import_core_free_icons7.ArrowDownRight01Icon : import_core_free_icons7.ArrowUpRight01Icon, size: 18 })), /* @__PURE__ */ import_react23.default.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-1" }, /* @__PURE__ */ import_react23.default.createElement("p", { className: "text-[13px] text-black truncate" }, getDisplayName(tx)), /* @__PURE__ */ import_react23.default.createElement("p", { className: `text-[12px] text-neutral-500 truncate transition-all duration-300 ${hideBalanceAmounts ? "blur-sm opacity-40 select-none" : ""}` }, tx.amount))),
1384
1384
  /* @__PURE__ */ import_react23.default.createElement("div", { className: "shrink-0 flex flex-col items-end gap-1 text-right" }, /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[11px] text-neutral-400" }, formatDate(tx.createdAt)), /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[11px] text-neutral-400 capitalize" }, tx.direction.toLowerCase()))
1385
1385
  ))), !hidePagination && /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex items-center justify-between pt-6 mt-2 " }, /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em]" }, "Page ", currentPage, " of ", totalPages === 0 ? 1 : totalPages), /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react23.default.createElement(
1386
1386
  "button",
@@ -1398,7 +1398,7 @@ var UniversalTransactionPage = ({
1398
1398
  className: "p-2 bg-white border border-neutral-200 rounded-full text-black hover:bg-neutral-50 disabled:opacity-30 disabled:cursor-not-allowed transition-all outline-none"
1399
1399
  },
1400
1400
  /* @__PURE__ */ import_react23.default.createElement(import_react24.HugeiconsIcon, { icon: import_core_free_icons7.ArrowRight01Icon, size: 14 })
1401
- )))))), selectedTransaction && /* @__PURE__ */ import_react23.default.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => setSelectedTransaction(null) }), /* @__PURE__ */ import_react23.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 max-h-[90vh]" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ import_react23.default.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Details"), /* @__PURE__ */ import_react23.default.createElement("button", { onClick: () => setSelectedTransaction(null), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ import_react23.default.createElement(import_react24.HugeiconsIcon, { icon: import_core_free_icons7.CancelCircleIcon, size: 18 }))), /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex flex-col items-center justify-center mb-4" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: `w-12 h-12 rounded-full flex items-center justify-center mb-4 bg-neutral-100 text-black` }, /* @__PURE__ */ import_react23.default.createElement(import_react24.HugeiconsIcon, { icon: selectedTransaction.direction === "CREDIT" ? import_core_free_icons7.ArrowDownRight01Icon : import_core_free_icons7.ArrowUpRight01Icon, size: 20 })), /* @__PURE__ */ import_react23.default.createElement("h2", { className: `text-2xl text-black mb-2 transition-all duration-300 ${hideBalanceAmounts ? "blur-[6px] opacity-40 select-none" : ""}` }, selectedTransaction.direction === "CREDIT" ? "+" : "-", selectedTransaction.amount, " ", selectedTransaction.currency), /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[9px] tracking-widest text-neutral-500 px-4 py-1.5 rounded-full bg-neutral-50" }, selectedTransaction.status)), /* @__PURE__ */ import_react23.default.createElement("div", { className: "grid grid-cols-1 gap-y-8 gap-x-4 mb-10 mt-6" }, /* @__PURE__ */ import_react23.default.createElement("div", null, /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Reference ID"), /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex items-center gap-2 min-w-0" }, /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[13px] text-black truncate min-w-0 block" }, truncateReference(selectedTransaction.reference)), /* @__PURE__ */ import_react23.default.createElement(
1401
+ )))))), selectedTransaction && /* @__PURE__ */ import_react23.default.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => setSelectedTransaction(null) }), /* @__PURE__ */ import_react23.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 max-h-[90vh]" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ import_react23.default.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Details"), /* @__PURE__ */ import_react23.default.createElement("button", { onClick: () => setSelectedTransaction(null), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ import_react23.default.createElement(import_react24.HugeiconsIcon, { icon: import_core_free_icons7.CancelCircleIcon, size: 18 }))), /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex flex-col items-center justify-center mb-4" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: `w-12 h-12 rounded-full flex items-center justify-center mb-4 bg-neutral-100 text-black` }, /* @__PURE__ */ import_react23.default.createElement(import_react24.HugeiconsIcon, { icon: selectedTransaction.direction === "CREDIT" ? import_core_free_icons7.ArrowDownRight01Icon : import_core_free_icons7.ArrowUpRight01Icon, size: 20 })), /* @__PURE__ */ import_react23.default.createElement("p", { className: `text-2xl text-black mb-2 transition-all duration-300 ${hideBalanceAmounts ? "blur-[6px] opacity-40 select-none" : ""}` }, selectedTransaction.amount), /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[9px] tracking-widest text-neutral-500 px-4 py-1.5 rounded-full bg-neutral-50" }, selectedTransaction.status)), /* @__PURE__ */ import_react23.default.createElement("div", { className: "grid grid-cols-1 gap-y-8 gap-x-4 mb-10 mt-6" }, /* @__PURE__ */ import_react23.default.createElement("div", null, /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Reference ID"), /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex items-center gap-2 min-w-0" }, /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[13px] text-black truncate min-w-0 block" }, truncateReference(selectedTransaction.reference)), /* @__PURE__ */ import_react23.default.createElement(
1402
1402
  "button",
1403
1403
  {
1404
1404
  onClick: () => handleCopyReference(selectedTransaction.reference),
@@ -1408,7 +1408,7 @@ var UniversalTransactionPage = ({
1408
1408
  ))), /* @__PURE__ */ import_react23.default.createElement("div", null, /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Date & Time"), /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[13px] text-black" }, formatDate(selectedTransaction.createdAt), " at ", formatTime(selectedTransaction.createdAt))), /* @__PURE__ */ import_react23.default.createElement("div", null, /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Transaction Type"), /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[13px] text-black capitalize" }, selectedTransaction.type.replace("_", " ").toLowerCase())), /* @__PURE__ */ import_react23.default.createElement("div", null, /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Flow Direction"), /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[13px] text-black capitalize" }, selectedTransaction.direction.toLowerCase())), selectedTransaction.metadata?.fromAddress && selectedTransaction.metadata?.toAddress && /* @__PURE__ */ import_react23.default.createElement("div", null, /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Transfer Route"), /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex items-center gap-2 text-[13px] text-black" }, /* @__PURE__ */ import_react23.default.createElement("span", { className: "truncate" }, truncateAddress(String(selectedTransaction.metadata.fromAddress))), /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-neutral-400" }, "\u2192"), /* @__PURE__ */ import_react23.default.createElement("span", { className: "truncate" }, truncateAddress(String(selectedTransaction.metadata.toAddress))))), selectedTransaction.metadata && Object.entries(selectedTransaction.metadata).map(([key, value]) => {
1409
1409
  if (key === "fromAddress" || key === "toAddress") return null;
1410
1410
  if (value === null || value === void 0 || typeof value === "object") return null;
1411
- const formattedKey = key.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase());
1411
+ const formattedKey = key.includes(" ") ? key : key.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase());
1412
1412
  return /* @__PURE__ */ import_react23.default.createElement("div", { key }, /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, formattedKey), /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[13px] text-black break-all" }, String(value)));
1413
1413
  })), /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ import_react23.default.createElement(
1414
1414
  ThreeDActionButton,
@@ -1482,9 +1482,9 @@ var import_react25 = __toESM(require("react"));
1482
1482
  var import_react26 = require("@hugeicons/react");
1483
1483
  var import_core_free_icons8 = require("@hugeicons/core-free-icons");
1484
1484
  var UniversalHomeView = ({
1485
- balanceLabel = "Spendable Balance",
1485
+ balanceLabel = "Available Balance",
1486
1486
  balanceAmount,
1487
- balanceCurrency = "",
1487
+ balanceCurrency = "$",
1488
1488
  primaryAction,
1489
1489
  secondaryAction,
1490
1490
  customContent,
@@ -1523,29 +1523,44 @@ var UniversalHomeView = ({
1523
1523
  requestAnimationFrame(step);
1524
1524
  }, [balanceAmount]);
1525
1525
  const [intPart, decPart] = displayAmount.includes(".") ? displayAmount.split(".") : [displayAmount, ""];
1526
- return /* @__PURE__ */ import_react25.default.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ import_react25.default.createElement("div", { className: "relative flex items-start justify-between w-full pt-4 pb-8" }, /* @__PURE__ */ import_react25.default.createElement("div", { className: "flex flex-col items-start text-left z-10 w-full" }, /* @__PURE__ */ import_react25.default.createElement("div", { className: "flex items-center gap-2 mb-1.5" }, /* @__PURE__ */ import_react25.default.createElement("span", { className: "text-[12px] sm:text-[13px] text-neutral-500" }, balanceLabel), /* @__PURE__ */ import_react25.default.createElement(
1526
+ return /* @__PURE__ */ import_react25.default.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ import_react25.default.createElement("div", { className: "w-full pt-4 pb-6 flex flex-col gap-4" }, /* @__PURE__ */ import_react25.default.createElement("div", { className: "bg-linear-to-tl from-[#4a4a4a] via-[#0b0e14] to-[#03060b] rounded-2xl p-6 relative overflow-hidden flex flex-col justify-center" }, /* @__PURE__ */ import_react25.default.createElement("div", { className: "relative z-10 flex flex-col items-start text-left w-full" }, /* @__PURE__ */ import_react25.default.createElement("div", { className: "flex items-center gap-2 mb-2" }, /* @__PURE__ */ import_react25.default.createElement("span", { className: "text-[12px] text-neutral-300 " }, balanceLabel), /* @__PURE__ */ import_react25.default.createElement(
1527
1527
  "button",
1528
1528
  {
1529
1529
  onClick: () => setIsBalanceHidden(!isBalanceHidden),
1530
- className: "text-neutral-400 hover:text-black transition-colors outline-none"
1530
+ className: "text-neutral-400 hover:text-white transition-colors outline-none"
1531
1531
  },
1532
- /* @__PURE__ */ import_react25.default.createElement(import_react26.HugeiconsIcon, { icon: isBalanceHidden ? import_core_free_icons8.ViewIcon : import_core_free_icons8.ViewOffSlashIcon, size: 14 })
1533
- )), /* @__PURE__ */ import_react25.default.createElement("h1", { className: `text-3xl sm:text-4xl md:text-5xl text-black tracking-tight mb-5 tabular-nums flex items-baseline transition-all duration-300 ${isBalanceHidden ? "blur-sm opacity-40 select-none" : ""}` }, /* @__PURE__ */ import_react25.default.createElement("span", { className: "text-2xl text-neutral-400 mr-1" }, balanceCurrency), intPart, decPart && /* @__PURE__ */ import_react25.default.createElement("span", { className: "text-xl sm:text-2xl text-neutral-400" }, ".", decPart)), /* @__PURE__ */ import_react25.default.createElement("div", { className: "flex items-center gap-3" }, primaryAction && /* @__PURE__ */ import_react25.default.createElement(
1534
- ThreeDActionButton,
1532
+ /* @__PURE__ */ import_react25.default.createElement(import_react26.HugeiconsIcon, { icon: isBalanceHidden ? import_core_free_icons8.ViewIcon : import_core_free_icons8.ViewOffSlashIcon, size: 16 })
1533
+ )), /* @__PURE__ */ import_react25.default.createElement("p", { className: `text-2xl text-white tracking-tight mb-2 tabular-nums flex items-baseline transition-all duration-300 ${isBalanceHidden ? "blur-sm opacity-40 select-none" : ""}` }, /* @__PURE__ */ import_react25.default.createElement("span", { className: "text-lg text-neutral-400 mr-1" }, balanceCurrency), intPart, decPart && /* @__PURE__ */ import_react25.default.createElement("span", { className: "text-lg text-neutral-400" }, ".", decPart)))), /* @__PURE__ */ import_react25.default.createElement("div", { className: "grid grid-cols-2 gap-2" }, /* @__PURE__ */ import_react25.default.createElement(
1534
+ "div",
1535
1535
  {
1536
- onClick: primaryAction.onClick,
1537
- className: "px-6 sm:px-8"
1536
+ onClick: primaryAction?.onClick,
1537
+ className: "bg-[linear-gradient(135deg,rgba(255,255,255,0.96)_0%,#FFD0AE_75%)] rounded-2xl p-5 relative overflow-hidden flex flex-col h-45 sm:h-50 cursor-pointer hover:opacity-90 transition-opacity"
1538
1538
  },
1539
- /* @__PURE__ */ import_react25.default.createElement("span", { className: "flex items-center gap-1.5 text-[13px] tracking-wide " }, primaryAction.label, primaryAction.icon && /* @__PURE__ */ import_react25.default.createElement(import_react26.HugeiconsIcon, { icon: primaryAction.icon, size: 16 }))
1540
- ), secondaryAction && /* @__PURE__ */ import_react25.default.createElement(
1541
- "button",
1539
+ /* @__PURE__ */ import_react25.default.createElement("div", { className: "relative z-10" }, /* @__PURE__ */ import_react25.default.createElement("p", { className: "text-[15px] sm:text-[15px] text-neutral-600 mb-1" }, "Deposit"), /* @__PURE__ */ import_react25.default.createElement("p", { className: "text-[12px] sm:text-[13px] text-neutral-500" }, "Fund Wallet")),
1540
+ /* @__PURE__ */ import_react25.default.createElement(
1541
+ "img",
1542
+ {
1543
+ src: "https://retinalabs.company/assets/images/piggy.avif",
1544
+ alt: "Savings",
1545
+ className: "absolute bottom-6 right-4 translate-x-1/4 translate-y-1/2 w-40 h-auto object-contain z-0 pointer-events-none drop-shadow-md"
1546
+ }
1547
+ )
1548
+ ), /* @__PURE__ */ import_react25.default.createElement(
1549
+ "div",
1542
1550
  {
1543
- onClick: secondaryAction.onClick,
1544
- className: "flex items-center gap-1.5 px-6 py-2.25 sm:px-8 rounded-full border border-neutral-200 text-black hover:bg-neutral-50 transition-colors outline-none"
1551
+ onClick: secondaryAction?.onClick,
1552
+ className: "bg-[linear-gradient(135deg,rgba(255,255,255,0.96)_0%,#C8F7A8_75%)] rounded-2xl p-5 relative overflow-hidden flex flex-col h-45 sm:h-50 cursor-pointer hover:opacity-90 transition-opacity"
1545
1553
  },
1546
- /* @__PURE__ */ import_react25.default.createElement("span", { className: "text-[13px] tracking-wide " }, secondaryAction.label),
1547
- secondaryAction.icon && /* @__PURE__ */ import_react25.default.createElement(import_react26.HugeiconsIcon, { icon: secondaryAction.icon, size: 16 })
1548
- )))), customContent && /* @__PURE__ */ import_react25.default.createElement("div", { className: "w-full" }, customContent), /* @__PURE__ */ import_react25.default.createElement("div", { className: "w-full mt-2" }, /* @__PURE__ */ import_react25.default.createElement(
1554
+ /* @__PURE__ */ import_react25.default.createElement("div", { className: "relative z-10" }, /* @__PURE__ */ import_react25.default.createElement("p", { className: "text-[15px] sm:text-[15px] text-neutral-600 mb-1" }, "Rewards"), /* @__PURE__ */ import_react25.default.createElement("p", { className: "text-[12px] sm:text-[13px] text-neutral-500" }, "Earn Points")),
1555
+ /* @__PURE__ */ import_react25.default.createElement(
1556
+ "img",
1557
+ {
1558
+ src: "https://retinalabs.company/assets/images/gift.avif",
1559
+ alt: "Rewards",
1560
+ className: "absolute bottom-6 right-4 translate-x-1/4 translate-y-1/2 w-40 h-auto object-contain z-0 pointer-events-none drop-shadow-md"
1561
+ }
1562
+ )
1563
+ ))), customContent && /* @__PURE__ */ import_react25.default.createElement("div", { className: "w-full" }, customContent), /* @__PURE__ */ import_react25.default.createElement("div", { className: "w-full mt-2" }, /* @__PURE__ */ import_react25.default.createElement(
1549
1564
  UniversalTransactionPage,
1550
1565
  {
1551
1566
  ...transactionsProps,
package/dist/index.mjs CHANGED
@@ -1333,7 +1333,7 @@ var UniversalTransactionPage = ({
1333
1333
  onClick: () => setSelectedTransaction(tx),
1334
1334
  className: "flex items-center justify-between py-4 hover:bg-neutral-50 transition-colors cursor-pointer group min-w-0 px-3 -mx-3 rounded-xl"
1335
1335
  },
1336
- /* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ React15.createElement("div", { className: `w-10 h-10 shrink-0 rounded-full flex items-center justify-center bg-neutral-100 text-black` }, /* @__PURE__ */ React15.createElement(HugeiconsIcon9, { icon: tx.direction === "CREDIT" ? ArrowDownRight01Icon : ArrowUpRight01Icon, size: 18 })), /* @__PURE__ */ React15.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-1" }, /* @__PURE__ */ React15.createElement("p", { className: "text-[13px] text-black truncate" }, getDisplayName(tx)), /* @__PURE__ */ React15.createElement("p", { className: `text-[12px] text-neutral-500 truncate transition-all duration-300 ${hideBalanceAmounts ? "blur-sm opacity-40 select-none" : ""}` }, tx.direction === "CREDIT" ? "+" : "-", tx.amount, " ", tx.currency))),
1336
+ /* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ React15.createElement("div", { className: `w-10 h-10 shrink-0 rounded-full flex items-center justify-center bg-neutral-100 text-black` }, /* @__PURE__ */ React15.createElement(HugeiconsIcon9, { icon: tx.direction === "CREDIT" ? ArrowDownRight01Icon : ArrowUpRight01Icon, size: 18 })), /* @__PURE__ */ React15.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-1" }, /* @__PURE__ */ React15.createElement("p", { className: "text-[13px] text-black truncate" }, getDisplayName(tx)), /* @__PURE__ */ React15.createElement("p", { className: `text-[12px] text-neutral-500 truncate transition-all duration-300 ${hideBalanceAmounts ? "blur-sm opacity-40 select-none" : ""}` }, tx.amount))),
1337
1337
  /* @__PURE__ */ React15.createElement("div", { className: "shrink-0 flex flex-col items-end gap-1 text-right" }, /* @__PURE__ */ React15.createElement("span", { className: "text-[11px] text-neutral-400" }, formatDate(tx.createdAt)), /* @__PURE__ */ React15.createElement("span", { className: "text-[11px] text-neutral-400 capitalize" }, tx.direction.toLowerCase()))
1338
1338
  ))), !hidePagination && /* @__PURE__ */ React15.createElement("div", { className: "flex items-center justify-between pt-6 mt-2 " }, /* @__PURE__ */ React15.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em]" }, "Page ", currentPage, " of ", totalPages === 0 ? 1 : totalPages), /* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React15.createElement(
1339
1339
  "button",
@@ -1351,7 +1351,7 @@ var UniversalTransactionPage = ({
1351
1351
  className: "p-2 bg-white border border-neutral-200 rounded-full text-black hover:bg-neutral-50 disabled:opacity-30 disabled:cursor-not-allowed transition-all outline-none"
1352
1352
  },
1353
1353
  /* @__PURE__ */ React15.createElement(HugeiconsIcon9, { icon: ArrowRight01Icon, size: 14 })
1354
- )))))), selectedTransaction && /* @__PURE__ */ React15.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React15.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => setSelectedTransaction(null) }), /* @__PURE__ */ React15.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 max-h-[90vh]" }, /* @__PURE__ */ React15.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ React15.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Details"), /* @__PURE__ */ React15.createElement("button", { onClick: () => setSelectedTransaction(null), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ React15.createElement(HugeiconsIcon9, { icon: CancelCircleIcon2, size: 18 }))), /* @__PURE__ */ React15.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6" }, /* @__PURE__ */ React15.createElement("div", { className: "flex flex-col items-center justify-center mb-4" }, /* @__PURE__ */ React15.createElement("div", { className: `w-12 h-12 rounded-full flex items-center justify-center mb-4 bg-neutral-100 text-black` }, /* @__PURE__ */ React15.createElement(HugeiconsIcon9, { icon: selectedTransaction.direction === "CREDIT" ? ArrowDownRight01Icon : ArrowUpRight01Icon, size: 20 })), /* @__PURE__ */ React15.createElement("h2", { className: `text-2xl text-black mb-2 transition-all duration-300 ${hideBalanceAmounts ? "blur-[6px] opacity-40 select-none" : ""}` }, selectedTransaction.direction === "CREDIT" ? "+" : "-", selectedTransaction.amount, " ", selectedTransaction.currency), /* @__PURE__ */ React15.createElement("span", { className: "text-[9px] tracking-widest text-neutral-500 px-4 py-1.5 rounded-full bg-neutral-50" }, selectedTransaction.status)), /* @__PURE__ */ React15.createElement("div", { className: "grid grid-cols-1 gap-y-8 gap-x-4 mb-10 mt-6" }, /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Reference ID"), /* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-2 min-w-0" }, /* @__PURE__ */ React15.createElement("span", { className: "text-[13px] text-black truncate min-w-0 block" }, truncateReference(selectedTransaction.reference)), /* @__PURE__ */ React15.createElement(
1354
+ )))))), selectedTransaction && /* @__PURE__ */ React15.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React15.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => setSelectedTransaction(null) }), /* @__PURE__ */ React15.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 max-h-[90vh]" }, /* @__PURE__ */ React15.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ React15.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Details"), /* @__PURE__ */ React15.createElement("button", { onClick: () => setSelectedTransaction(null), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ React15.createElement(HugeiconsIcon9, { icon: CancelCircleIcon2, size: 18 }))), /* @__PURE__ */ React15.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6" }, /* @__PURE__ */ React15.createElement("div", { className: "flex flex-col items-center justify-center mb-4" }, /* @__PURE__ */ React15.createElement("div", { className: `w-12 h-12 rounded-full flex items-center justify-center mb-4 bg-neutral-100 text-black` }, /* @__PURE__ */ React15.createElement(HugeiconsIcon9, { icon: selectedTransaction.direction === "CREDIT" ? ArrowDownRight01Icon : ArrowUpRight01Icon, size: 20 })), /* @__PURE__ */ React15.createElement("p", { className: `text-2xl text-black mb-2 transition-all duration-300 ${hideBalanceAmounts ? "blur-[6px] opacity-40 select-none" : ""}` }, selectedTransaction.amount), /* @__PURE__ */ React15.createElement("span", { className: "text-[9px] tracking-widest text-neutral-500 px-4 py-1.5 rounded-full bg-neutral-50" }, selectedTransaction.status)), /* @__PURE__ */ React15.createElement("div", { className: "grid grid-cols-1 gap-y-8 gap-x-4 mb-10 mt-6" }, /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Reference ID"), /* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-2 min-w-0" }, /* @__PURE__ */ React15.createElement("span", { className: "text-[13px] text-black truncate min-w-0 block" }, truncateReference(selectedTransaction.reference)), /* @__PURE__ */ React15.createElement(
1355
1355
  "button",
1356
1356
  {
1357
1357
  onClick: () => handleCopyReference(selectedTransaction.reference),
@@ -1361,7 +1361,7 @@ var UniversalTransactionPage = ({
1361
1361
  ))), /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Date & Time"), /* @__PURE__ */ React15.createElement("span", { className: "text-[13px] text-black" }, formatDate(selectedTransaction.createdAt), " at ", formatTime(selectedTransaction.createdAt))), /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Transaction Type"), /* @__PURE__ */ React15.createElement("span", { className: "text-[13px] text-black capitalize" }, selectedTransaction.type.replace("_", " ").toLowerCase())), /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Flow Direction"), /* @__PURE__ */ React15.createElement("span", { className: "text-[13px] text-black capitalize" }, selectedTransaction.direction.toLowerCase())), selectedTransaction.metadata?.fromAddress && selectedTransaction.metadata?.toAddress && /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Transfer Route"), /* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-2 text-[13px] text-black" }, /* @__PURE__ */ React15.createElement("span", { className: "truncate" }, truncateAddress(String(selectedTransaction.metadata.fromAddress))), /* @__PURE__ */ React15.createElement("span", { className: "text-neutral-400" }, "\u2192"), /* @__PURE__ */ React15.createElement("span", { className: "truncate" }, truncateAddress(String(selectedTransaction.metadata.toAddress))))), selectedTransaction.metadata && Object.entries(selectedTransaction.metadata).map(([key, value]) => {
1362
1362
  if (key === "fromAddress" || key === "toAddress") return null;
1363
1363
  if (value === null || value === void 0 || typeof value === "object") return null;
1364
- const formattedKey = key.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase());
1364
+ const formattedKey = key.includes(" ") ? key : key.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase());
1365
1365
  return /* @__PURE__ */ React15.createElement("div", { key }, /* @__PURE__ */ React15.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, formattedKey), /* @__PURE__ */ React15.createElement("span", { className: "text-[13px] text-black break-all" }, String(value)));
1366
1366
  })), /* @__PURE__ */ React15.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React15.createElement(
1367
1367
  ThreeDActionButton,
@@ -1435,9 +1435,9 @@ import React16, { useState as useState9, useEffect as useEffect7 } from "react";
1435
1435
  import { HugeiconsIcon as HugeiconsIcon10 } from "@hugeicons/react";
1436
1436
  import { ViewOffSlashIcon, ViewIcon } from "@hugeicons/core-free-icons";
1437
1437
  var UniversalHomeView = ({
1438
- balanceLabel = "Spendable Balance",
1438
+ balanceLabel = "Available Balance",
1439
1439
  balanceAmount,
1440
- balanceCurrency = "",
1440
+ balanceCurrency = "$",
1441
1441
  primaryAction,
1442
1442
  secondaryAction,
1443
1443
  customContent,
@@ -1476,29 +1476,44 @@ var UniversalHomeView = ({
1476
1476
  requestAnimationFrame(step);
1477
1477
  }, [balanceAmount]);
1478
1478
  const [intPart, decPart] = displayAmount.includes(".") ? displayAmount.split(".") : [displayAmount, ""];
1479
- return /* @__PURE__ */ React16.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ React16.createElement("div", { className: "relative flex items-start justify-between w-full pt-4 pb-8" }, /* @__PURE__ */ React16.createElement("div", { className: "flex flex-col items-start text-left z-10 w-full" }, /* @__PURE__ */ React16.createElement("div", { className: "flex items-center gap-2 mb-1.5" }, /* @__PURE__ */ React16.createElement("span", { className: "text-[12px] sm:text-[13px] text-neutral-500" }, balanceLabel), /* @__PURE__ */ React16.createElement(
1479
+ return /* @__PURE__ */ React16.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ React16.createElement("div", { className: "w-full pt-4 pb-6 flex flex-col gap-4" }, /* @__PURE__ */ React16.createElement("div", { className: "bg-linear-to-tl from-[#4a4a4a] via-[#0b0e14] to-[#03060b] rounded-2xl p-6 relative overflow-hidden flex flex-col justify-center" }, /* @__PURE__ */ React16.createElement("div", { className: "relative z-10 flex flex-col items-start text-left w-full" }, /* @__PURE__ */ React16.createElement("div", { className: "flex items-center gap-2 mb-2" }, /* @__PURE__ */ React16.createElement("span", { className: "text-[12px] text-neutral-300 " }, balanceLabel), /* @__PURE__ */ React16.createElement(
1480
1480
  "button",
1481
1481
  {
1482
1482
  onClick: () => setIsBalanceHidden(!isBalanceHidden),
1483
- className: "text-neutral-400 hover:text-black transition-colors outline-none"
1483
+ className: "text-neutral-400 hover:text-white transition-colors outline-none"
1484
1484
  },
1485
- /* @__PURE__ */ React16.createElement(HugeiconsIcon10, { icon: isBalanceHidden ? ViewIcon : ViewOffSlashIcon, size: 14 })
1486
- )), /* @__PURE__ */ React16.createElement("h1", { className: `text-3xl sm:text-4xl md:text-5xl text-black tracking-tight mb-5 tabular-nums flex items-baseline transition-all duration-300 ${isBalanceHidden ? "blur-sm opacity-40 select-none" : ""}` }, /* @__PURE__ */ React16.createElement("span", { className: "text-2xl text-neutral-400 mr-1" }, balanceCurrency), intPart, decPart && /* @__PURE__ */ React16.createElement("span", { className: "text-xl sm:text-2xl text-neutral-400" }, ".", decPart)), /* @__PURE__ */ React16.createElement("div", { className: "flex items-center gap-3" }, primaryAction && /* @__PURE__ */ React16.createElement(
1487
- ThreeDActionButton,
1485
+ /* @__PURE__ */ React16.createElement(HugeiconsIcon10, { icon: isBalanceHidden ? ViewIcon : ViewOffSlashIcon, size: 16 })
1486
+ )), /* @__PURE__ */ React16.createElement("p", { className: `text-2xl text-white tracking-tight mb-2 tabular-nums flex items-baseline transition-all duration-300 ${isBalanceHidden ? "blur-sm opacity-40 select-none" : ""}` }, /* @__PURE__ */ React16.createElement("span", { className: "text-lg text-neutral-400 mr-1" }, balanceCurrency), intPart, decPart && /* @__PURE__ */ React16.createElement("span", { className: "text-lg text-neutral-400" }, ".", decPart)))), /* @__PURE__ */ React16.createElement("div", { className: "grid grid-cols-2 gap-2" }, /* @__PURE__ */ React16.createElement(
1487
+ "div",
1488
1488
  {
1489
- onClick: primaryAction.onClick,
1490
- className: "px-6 sm:px-8"
1489
+ onClick: primaryAction?.onClick,
1490
+ className: "bg-[linear-gradient(135deg,rgba(255,255,255,0.96)_0%,#FFD0AE_75%)] rounded-2xl p-5 relative overflow-hidden flex flex-col h-45 sm:h-50 cursor-pointer hover:opacity-90 transition-opacity"
1491
1491
  },
1492
- /* @__PURE__ */ React16.createElement("span", { className: "flex items-center gap-1.5 text-[13px] tracking-wide " }, primaryAction.label, primaryAction.icon && /* @__PURE__ */ React16.createElement(HugeiconsIcon10, { icon: primaryAction.icon, size: 16 }))
1493
- ), secondaryAction && /* @__PURE__ */ React16.createElement(
1494
- "button",
1492
+ /* @__PURE__ */ React16.createElement("div", { className: "relative z-10" }, /* @__PURE__ */ React16.createElement("p", { className: "text-[15px] sm:text-[15px] text-neutral-600 mb-1" }, "Deposit"), /* @__PURE__ */ React16.createElement("p", { className: "text-[12px] sm:text-[13px] text-neutral-500" }, "Fund Wallet")),
1493
+ /* @__PURE__ */ React16.createElement(
1494
+ "img",
1495
+ {
1496
+ src: "https://retinalabs.company/assets/images/piggy.avif",
1497
+ alt: "Savings",
1498
+ className: "absolute bottom-6 right-4 translate-x-1/4 translate-y-1/2 w-40 h-auto object-contain z-0 pointer-events-none drop-shadow-md"
1499
+ }
1500
+ )
1501
+ ), /* @__PURE__ */ React16.createElement(
1502
+ "div",
1495
1503
  {
1496
- onClick: secondaryAction.onClick,
1497
- className: "flex items-center gap-1.5 px-6 py-2.25 sm:px-8 rounded-full border border-neutral-200 text-black hover:bg-neutral-50 transition-colors outline-none"
1504
+ onClick: secondaryAction?.onClick,
1505
+ className: "bg-[linear-gradient(135deg,rgba(255,255,255,0.96)_0%,#C8F7A8_75%)] rounded-2xl p-5 relative overflow-hidden flex flex-col h-45 sm:h-50 cursor-pointer hover:opacity-90 transition-opacity"
1498
1506
  },
1499
- /* @__PURE__ */ React16.createElement("span", { className: "text-[13px] tracking-wide " }, secondaryAction.label),
1500
- secondaryAction.icon && /* @__PURE__ */ React16.createElement(HugeiconsIcon10, { icon: secondaryAction.icon, size: 16 })
1501
- )))), customContent && /* @__PURE__ */ React16.createElement("div", { className: "w-full" }, customContent), /* @__PURE__ */ React16.createElement("div", { className: "w-full mt-2" }, /* @__PURE__ */ React16.createElement(
1507
+ /* @__PURE__ */ React16.createElement("div", { className: "relative z-10" }, /* @__PURE__ */ React16.createElement("p", { className: "text-[15px] sm:text-[15px] text-neutral-600 mb-1" }, "Rewards"), /* @__PURE__ */ React16.createElement("p", { className: "text-[12px] sm:text-[13px] text-neutral-500" }, "Earn Points")),
1508
+ /* @__PURE__ */ React16.createElement(
1509
+ "img",
1510
+ {
1511
+ src: "https://retinalabs.company/assets/images/gift.avif",
1512
+ alt: "Rewards",
1513
+ className: "absolute bottom-6 right-4 translate-x-1/4 translate-y-1/2 w-40 h-auto object-contain z-0 pointer-events-none drop-shadow-md"
1514
+ }
1515
+ )
1516
+ ))), customContent && /* @__PURE__ */ React16.createElement("div", { className: "w-full" }, customContent), /* @__PURE__ */ React16.createElement("div", { className: "w-full mt-2" }, /* @__PURE__ */ React16.createElement(
1502
1517
  UniversalTransactionPage,
1503
1518
  {
1504
1519
  ...transactionsProps,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@retinalabsllc/zairusjs",
3
- "version": "12.0.30",
3
+ "version": "12.0.40",
4
4
  "description": "A perceptive, Ai data driven Next.js UI component library.",
5
5
  "author": "Retina Labs Company",
6
6
  "license": "MIT",