@retinalabsllc/zairusjs 14.0.70 → 14.0.85

package/dist/index.d.mts

@@ -319,6 +319,8 @@ interface CardData {
     preOrder?: boolean;
     contentDark?: boolean;
     bannerProps?: BannerProps;
+    prepaid?: boolean;
+    balance?: string;
 }
 interface UniversalCardPageProps {
     cards: CardData[];
@@ -327,6 +329,8 @@ interface UniversalCardPageProps {
     onFreeze?: (cardId: string) => void | Promise<void>;
     onSetLimits?: (cardId: string) => void;
     onDelete?: (cardId: string) => void | Promise<void>;
+    onFundCard?: (cardId: string) => void;
+    onCreateCard?: () => void;
 }
 declare const UniversalCardPage: React.FC<UniversalCardPageProps>;
 

package/dist/index.d.ts

@@ -319,6 +319,8 @@ interface CardData {
     preOrder?: boolean;
     contentDark?: boolean;
     bannerProps?: BannerProps;
+    prepaid?: boolean;
+    balance?: string;
 }
 interface UniversalCardPageProps {
     cards: CardData[];
@@ -327,6 +329,8 @@ interface UniversalCardPageProps {
     onFreeze?: (cardId: string) => void | Promise<void>;
     onSetLimits?: (cardId: string) => void;
     onDelete?: (cardId: string) => void | Promise<void>;
+    onFundCard?: (cardId: string) => void;
+    onCreateCard?: () => void;
 }
 declare const UniversalCardPage: React.FC<UniversalCardPageProps>;
 

package/dist/index.js

@@ -232,8 +232,7 @@ var ThreeDActionButton = ({
   disabled = false,
   isLoading = false,
   children,
-  className = "",
-  ariaLabel
+  className = ""
 }) => {
   const isInteractionDisabled = disabled || isLoading;
   const baseShadow = `
@@ -1120,7 +1119,6 @@ var UniversalProfileSettings = ({
     {
       type: "button",
       onClick: () => setIsPinModalOpen(true),
-      "aria-label": "PIN Settings",
       className: "w-9 h-9 flex items-center justify-center border border-neutral-200 rounded-full text-black hover:bg-neutral-50 transition-colors outline-none"
     },
     /* @__PURE__ */ import_react17.default.createElement(import_react18.HugeiconsIcon, { icon: import_core_free_icons4.LockKeyIcon, size: 17, className: "text-black" })
@@ -2054,7 +2052,9 @@ var UniversalCardPage = ({
   onReveal,
   onFreeze,
   onSetLimits,
-  onDelete
+  onDelete,
+  onFundCard,
+  onCreateCard
 }) => {
   const router = (0, import_navigation4.useRouter)();
   const sortedCards = import_react33.default.useMemo(() => {
@@ -2148,7 +2148,7 @@ var UniversalCardPage = ({
     const capitalized = type.charAt(0).toUpperCase() + type.slice(1).toLowerCase();
     return `${capitalized} Card`;
   };
-  return /* @__PURE__ */ import_react33.default.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, sortedCards.length > 1 && /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex items-center justify-center mb-6 w-full px-2" }, /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex items-center bg-white rounded-full p-1 sm:p-1.5 max-w-full overflow-x-auto custom-scrollbar" }, sortedCards.map((tab, idx) => {
+  return /* @__PURE__ */ import_react33.default.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex items-center justify-center mb-6 w-full px-2 gap-3" }, sortedCards.length > 0 && /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex items-center bg-white rounded-full p-1 sm:p-1.5 max-w-full overflow-x-auto custom-scrollbar" }, sortedCards.map((tab, idx) => {
     const isActive = activeTabIndex === idx;
     return /* @__PURE__ */ import_react33.default.createElement(
       "button",
@@ -2159,7 +2159,16 @@ var UniversalCardPage = ({
       },
       formatTabLabel(tab.type)
     );
-  }))), /* @__PURE__ */ import_react33.default.createElement("div", { className: "w-full pt-2 pb-2 flex justify-center" }, /* @__PURE__ */ import_react33.default.createElement(
+  })), /* @__PURE__ */ import_react33.default.createElement(
+    "button",
+    {
+      onClick: () => {
+        if (onCreateCard) onCreateCard();
+      },
+      className: "w-10 h-10 rounded-full bg-white flex items-center justify-center text-neutral-500 hover:text-black transition-colors shrink-0 outline-none"
+    },
+    /* @__PURE__ */ import_react33.default.createElement(import_react34.HugeiconsIcon, { icon: import_core_free_icons12.PlusSignIcon, size: 18 })
+  )), /* @__PURE__ */ import_react33.default.createElement("div", { className: "w-full pt-2 pb-2 flex justify-center" }, /* @__PURE__ */ import_react33.default.createElement(
     "div",
     {
       className: "relative w-full max-w-85",
@@ -2204,7 +2213,7 @@ var UniversalCardPage = ({
         className: "absolute inset-0 bg-cover bg-center",
         style: { backgroundImage: `url(${activeCard.cardBgSrc})` }
       }
-    ), /* @__PURE__ */ import_react33.default.createElement("div", { className: "relative z-10 w-full h-full p-5 flex flex-col justify-between" }, /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex items-start w-full gap-4" }), /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex justify-between items-end w-full" }, /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ import_react33.default.createElement("span", { className: `text-[9px] tracking-widest ${activeCard.contentDark ? "text-black/60" : "text-white/60"}` }, "Card Tier"), /* @__PURE__ */ import_react33.default.createElement("span", { className: `text-[12px] tracking-widest font-medium uppercase ${activeCard.contentDark ? "text-black" : "text-white"}` }, activeCard.tier)), activeCard.networkLogoSrc && /* @__PURE__ */ import_react33.default.createElement(
+    ), /* @__PURE__ */ import_react33.default.createElement("div", { className: "relative z-10 w-full h-full p-5 flex flex-col justify-between" }, /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex items-start justify-end w-full gap-4" }, activeCard.prepaid && /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex flex-col items-end gap-1 text-right" }, /* @__PURE__ */ import_react33.default.createElement("span", { className: `text-[9px] tracking-widest ${activeCard.contentDark ? "text-black/60" : "text-white/60"}` }, "Card Tier"), /* @__PURE__ */ import_react33.default.createElement("span", { className: `text-[12px] tracking-widest font-medium  ${activeCard.contentDark ? "text-black" : "text-white"}` }, activeCard.tier))), /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex justify-between items-end w-full" }, /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ import_react33.default.createElement("span", { className: `text-[9px] tracking-widest ${activeCard.contentDark ? "text-black/60" : "text-white/60"}` }, activeCard.prepaid ? "Card Balance" : "Card Tier"), /* @__PURE__ */ import_react33.default.createElement("span", { className: `text-[12px] tracking-widest font-medium  ${activeCard.contentDark ? "text-black" : "text-white"}` }, activeCard.prepaid ? activeCard.balance || "$0.00" : activeCard.tier)), activeCard.networkLogoSrc && /* @__PURE__ */ import_react33.default.createElement(
       "img",
       {
         src: activeCard.networkLogoSrc,
@@ -2212,7 +2221,7 @@ var UniversalCardPage = ({
         className: "h-10 w-auto max-w-20 object-contain opacity-90"
       }
     ))))
-  )), activeCard.bannerProps ? /* @__PURE__ */ import_react33.default.createElement("div", { className: "mb-6 w-full" }, /* @__PURE__ */ import_react33.default.createElement(Banner, { ...activeCard.bannerProps })) : isPreordered ? /* @__PURE__ */ import_react33.default.createElement("div", { className: "mb-6 w-full" }, /* @__PURE__ */ import_react33.default.createElement(
+  )), activeCard.bannerProps ? /* @__PURE__ */ import_react33.default.createElement("div", { className: "mb-6 w-full mt-2" }, /* @__PURE__ */ import_react33.default.createElement(Banner, { ...activeCard.bannerProps })) : isPreordered ? /* @__PURE__ */ import_react33.default.createElement("div", { className: "mb-6 w-full mt-2" }, /* @__PURE__ */ import_react33.default.createElement(
     Banner,
     {
       type: "success",
@@ -2220,7 +2229,18 @@ var UniversalCardPage = ({
       message: `Your ${activeCard.tier} ${activeCard.type.toLowerCase()} card has been pre-ordered successfully and is pending batch processing.`,
       isDismissible: false
     }
-  )) : null, /* @__PURE__ */ import_react33.default.createElement("div", { className: "w-full flex flex-col gap-4" }, /* @__PURE__ */ import_react33.default.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, /* @__PURE__ */ import_react33.default.createElement(
+  )) : null, /* @__PURE__ */ import_react33.default.createElement("div", { className: "w-full flex flex-col gap-4 mt-1" }, /* @__PURE__ */ import_react33.default.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, activeCard.prepaid && /* @__PURE__ */ import_react33.default.createElement(
+    MenuRow,
+    {
+      icon: import_core_free_icons12.PlusSignIcon,
+      title: "Fund Card",
+      subtitle: "Add money to card",
+      onClick: () => {
+        if (!actionsDisabled && onFundCard) onFundCard(activeCard.id);
+      },
+      disabled: actionsDisabled
+    }
+  ), /* @__PURE__ */ import_react33.default.createElement(
     MenuRow,
     {
       icon: import_core_free_icons12.ViewOffSlashIcon,

package/dist/index.mjs

@@ -156,8 +156,7 @@ var ThreeDActionButton = ({
   disabled = false,
   isLoading = false,
   children,
-  className = "",
-  ariaLabel
+  className = ""
 }) => {
   const isInteractionDisabled = disabled || isLoading;
   const baseShadow = `
@@ -1058,7 +1057,6 @@ var UniversalProfileSettings = ({
     {
       type: "button",
       onClick: () => setIsPinModalOpen(true),
-      "aria-label": "PIN Settings",
       className: "w-9 h-9 flex items-center justify-center border border-neutral-200 rounded-full text-black hover:bg-neutral-50 transition-colors outline-none"
     },
     /* @__PURE__ */ React12.createElement(HugeiconsIcon6, { icon: LockKeyIcon, size: 17, className: "text-black" })
@@ -1940,7 +1938,8 @@ import {
   ArrowRight01Icon as ArrowRight01Icon3,
   SlidersHorizontalIcon,
   ViewOffSlashIcon as ViewOffSlashIcon2,
-  Loading03Icon as Loading03Icon9
+  Loading03Icon as Loading03Icon9,
+  PlusSignIcon as PlusSignIcon2
 } from "@hugeicons/core-free-icons";
 
 // src/components/PinDialerBottomSheet.tsx
@@ -2028,7 +2027,9 @@ var UniversalCardPage = ({
   onReveal,
   onFreeze,
   onSetLimits,
-  onDelete
+  onDelete,
+  onFundCard,
+  onCreateCard
 }) => {
   const router = useRouter();
   const sortedCards = React20.useMemo(() => {
@@ -2122,7 +2123,7 @@ var UniversalCardPage = ({
     const capitalized = type.charAt(0).toUpperCase() + type.slice(1).toLowerCase();
     return `${capitalized} Card`;
   };
-  return /* @__PURE__ */ React20.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, sortedCards.length > 1 && /* @__PURE__ */ React20.createElement("div", { className: "flex items-center justify-center mb-6 w-full px-2" }, /* @__PURE__ */ React20.createElement("div", { className: "flex items-center bg-white rounded-full p-1 sm:p-1.5 max-w-full overflow-x-auto custom-scrollbar" }, sortedCards.map((tab, idx) => {
+  return /* @__PURE__ */ React20.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ React20.createElement("div", { className: "flex items-center justify-center mb-6 w-full px-2 gap-3" }, sortedCards.length > 0 && /* @__PURE__ */ React20.createElement("div", { className: "flex items-center bg-white rounded-full p-1 sm:p-1.5 max-w-full overflow-x-auto custom-scrollbar" }, sortedCards.map((tab, idx) => {
     const isActive = activeTabIndex === idx;
     return /* @__PURE__ */ React20.createElement(
       "button",
@@ -2133,7 +2134,16 @@ var UniversalCardPage = ({
       },
       formatTabLabel(tab.type)
     );
-  }))), /* @__PURE__ */ React20.createElement("div", { className: "w-full pt-2 pb-2 flex justify-center" }, /* @__PURE__ */ React20.createElement(
+  })), /* @__PURE__ */ React20.createElement(
+    "button",
+    {
+      onClick: () => {
+        if (onCreateCard) onCreateCard();
+      },
+      className: "w-10 h-10 rounded-full bg-white flex items-center justify-center text-neutral-500 hover:text-black transition-colors shrink-0 outline-none"
+    },
+    /* @__PURE__ */ React20.createElement(HugeiconsIcon14, { icon: PlusSignIcon2, size: 18 })
+  )), /* @__PURE__ */ React20.createElement("div", { className: "w-full pt-2 pb-2 flex justify-center" }, /* @__PURE__ */ React20.createElement(
     "div",
     {
       className: "relative w-full max-w-85",
@@ -2178,7 +2188,7 @@ var UniversalCardPage = ({
         className: "absolute inset-0 bg-cover bg-center",
         style: { backgroundImage: `url(${activeCard.cardBgSrc})` }
       }
-    ), /* @__PURE__ */ React20.createElement("div", { className: "relative z-10 w-full h-full p-5 flex flex-col justify-between" }, /* @__PURE__ */ React20.createElement("div", { className: "flex items-start w-full gap-4" }), /* @__PURE__ */ React20.createElement("div", { className: "flex justify-between items-end w-full" }, /* @__PURE__ */ React20.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React20.createElement("span", { className: `text-[9px] tracking-widest ${activeCard.contentDark ? "text-black/60" : "text-white/60"}` }, "Card Tier"), /* @__PURE__ */ React20.createElement("span", { className: `text-[12px] tracking-widest font-medium uppercase ${activeCard.contentDark ? "text-black" : "text-white"}` }, activeCard.tier)), activeCard.networkLogoSrc && /* @__PURE__ */ React20.createElement(
+    ), /* @__PURE__ */ React20.createElement("div", { className: "relative z-10 w-full h-full p-5 flex flex-col justify-between" }, /* @__PURE__ */ React20.createElement("div", { className: "flex items-start justify-end w-full gap-4" }, activeCard.prepaid && /* @__PURE__ */ React20.createElement("div", { className: "flex flex-col items-end gap-1 text-right" }, /* @__PURE__ */ React20.createElement("span", { className: `text-[9px] tracking-widest ${activeCard.contentDark ? "text-black/60" : "text-white/60"}` }, "Card Tier"), /* @__PURE__ */ React20.createElement("span", { className: `text-[12px] tracking-widest font-medium  ${activeCard.contentDark ? "text-black" : "text-white"}` }, activeCard.tier))), /* @__PURE__ */ React20.createElement("div", { className: "flex justify-between items-end w-full" }, /* @__PURE__ */ React20.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React20.createElement("span", { className: `text-[9px] tracking-widest ${activeCard.contentDark ? "text-black/60" : "text-white/60"}` }, activeCard.prepaid ? "Card Balance" : "Card Tier"), /* @__PURE__ */ React20.createElement("span", { className: `text-[12px] tracking-widest font-medium  ${activeCard.contentDark ? "text-black" : "text-white"}` }, activeCard.prepaid ? activeCard.balance || "$0.00" : activeCard.tier)), activeCard.networkLogoSrc && /* @__PURE__ */ React20.createElement(
       "img",
       {
         src: activeCard.networkLogoSrc,
@@ -2186,7 +2196,7 @@ var UniversalCardPage = ({
         className: "h-10 w-auto max-w-20 object-contain opacity-90"
       }
     ))))
-  )), activeCard.bannerProps ? /* @__PURE__ */ React20.createElement("div", { className: "mb-6 w-full" }, /* @__PURE__ */ React20.createElement(Banner, { ...activeCard.bannerProps })) : isPreordered ? /* @__PURE__ */ React20.createElement("div", { className: "mb-6 w-full" }, /* @__PURE__ */ React20.createElement(
+  )), activeCard.bannerProps ? /* @__PURE__ */ React20.createElement("div", { className: "mb-6 w-full mt-2" }, /* @__PURE__ */ React20.createElement(Banner, { ...activeCard.bannerProps })) : isPreordered ? /* @__PURE__ */ React20.createElement("div", { className: "mb-6 w-full mt-2" }, /* @__PURE__ */ React20.createElement(
     Banner,
     {
       type: "success",
@@ -2194,7 +2204,18 @@ var UniversalCardPage = ({
       message: `Your ${activeCard.tier} ${activeCard.type.toLowerCase()} card has been pre-ordered successfully and is pending batch processing.`,
       isDismissible: false
     }
-  )) : null, /* @__PURE__ */ React20.createElement("div", { className: "w-full flex flex-col gap-4" }, /* @__PURE__ */ React20.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, /* @__PURE__ */ React20.createElement(
+  )) : null, /* @__PURE__ */ React20.createElement("div", { className: "w-full flex flex-col gap-4 mt-1" }, /* @__PURE__ */ React20.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, activeCard.prepaid && /* @__PURE__ */ React20.createElement(
+    MenuRow,
+    {
+      icon: PlusSignIcon2,
+      title: "Fund Card",
+      subtitle: "Add money to card",
+      onClick: () => {
+        if (!actionsDisabled && onFundCard) onFundCard(activeCard.id);
+      },
+      disabled: actionsDisabled
+    }
+  ), /* @__PURE__ */ React20.createElement(
     MenuRow,
     {
       icon: ViewOffSlashIcon2,

package/package.json

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