@retinalabsllc/zairusjs 14.0.35 → 14.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.
Files changed (5) hide show
  1. package/dist/index.d.mts +3 -12
  2. package/dist/index.d.ts +3 -12
  3. package/dist/index.js +57 -72
  4. package/dist/index.mjs +57 -72
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -123,19 +123,12 @@ interface MobileNavProps {
123
123
  declare const MobileNav: React.FC<MobileNavProps>;
124
124
 
125
125
  interface BannerProps {
126
- /** The heading text of the banner */
127
126
  title: string;
128
- /** The main message content */
129
127
  message: string;
130
- /** The type of banner, determines colors and default icon */
131
128
  type: 'success' | 'warning' | 'alert';
132
- /** Optional custom icon to override the default */
133
129
  icon?: any;
134
- /** Whether the banner can be dismissed by the user */
135
130
  isDismissible?: boolean;
136
- /** Optional callback when the banner is dismissed */
137
131
  onDismiss?: () => void;
138
- /** Optional custom action button */
139
132
  action?: React.ReactNode;
140
133
  }
141
134
 
@@ -319,13 +312,11 @@ interface CardData {
319
312
  tier: string;
320
313
  currency: string;
321
314
  cardHolderName: string;
322
- cardNumber: string;
323
- expiry: string;
324
- cvv: string;
325
315
  cardBgSrc: string;
326
- backgroundOverlay?: string;
327
- companyLogoSrc: string;
328
316
  networkLogoSrc: string;
317
+ preOrder?: boolean;
318
+ contentDark?: boolean;
319
+ bannerProps?: BannerProps;
329
320
  }
330
321
  interface UniversalCardPageProps {
331
322
  cards: CardData[];
package/dist/index.d.ts CHANGED
@@ -123,19 +123,12 @@ interface MobileNavProps {
123
123
  declare const MobileNav: React.FC<MobileNavProps>;
124
124
 
125
125
  interface BannerProps {
126
- /** The heading text of the banner */
127
126
  title: string;
128
- /** The main message content */
129
127
  message: string;
130
- /** The type of banner, determines colors and default icon */
131
128
  type: 'success' | 'warning' | 'alert';
132
- /** Optional custom icon to override the default */
133
129
  icon?: any;
134
- /** Whether the banner can be dismissed by the user */
135
130
  isDismissible?: boolean;
136
- /** Optional callback when the banner is dismissed */
137
131
  onDismiss?: () => void;
138
- /** Optional custom action button */
139
132
  action?: React.ReactNode;
140
133
  }
141
134
 
@@ -319,13 +312,11 @@ interface CardData {
319
312
  tier: string;
320
313
  currency: string;
321
314
  cardHolderName: string;
322
- cardNumber: string;
323
- expiry: string;
324
- cvv: string;
325
315
  cardBgSrc: string;
326
- backgroundOverlay?: string;
327
- companyLogoSrc: string;
328
316
  networkLogoSrc: string;
317
+ preOrder?: boolean;
318
+ contentDark?: boolean;
319
+ bannerProps?: BannerProps;
329
320
  }
330
321
  interface UniversalCardPageProps {
331
322
  cards: CardData[];
package/dist/index.js CHANGED
@@ -790,33 +790,32 @@ var Banner = ({
790
790
  };
791
791
  const config = {
792
792
  success: {
793
- bg: "bg-neutral-50",
794
- iconColor: "text-neutral-600",
795
- titleColor: "text-neutral-900",
796
- msgColor: "text-neutral-700",
793
+ bg: "bg-[#ceff8a22]",
794
+ iconColor: "text-[#143731]",
795
+ titleColor: "text-[#143731]",
796
+ msgColor: "text-[#143731]",
797
797
  defaultIcon: import_core_free_icons2.CheckmarkBadge01Icon,
798
798
  closeHover: "hover:bg-neutral-100 text-neutral-500"
799
799
  },
800
800
  warning: {
801
- bg: "bg-neutral-50",
802
- iconColor: "text-neutral-600",
803
- titleColor: "text-neutral-900",
804
- msgColor: "text-neutral-700",
801
+ bg: "bg-[#ceff8a22]",
802
+ iconColor: "text-[#143731]",
803
+ titleColor: "text-[#143731]",
804
+ msgColor: "text-[#143731]",
805
805
  defaultIcon: import_core_free_icons2.InformationCircleIcon,
806
806
  closeHover: "hover:bg-neutral-100 text-neutral-500"
807
807
  },
808
808
  alert: {
809
- bg: "bg-neutral-50",
810
- iconColor: "text-neutral-600",
811
- titleColor: "text-neutral-900",
812
- msgColor: "text-neutral-700",
809
+ bg: "bg-[#ff6b6b22]",
810
+ iconColor: "text-[#143731]",
811
+ titleColor: "text-[#143731]",
812
+ msgColor: "text-[#143731]",
813
813
  defaultIcon: import_core_free_icons2.Alert02Icon,
814
814
  closeHover: "hover:bg-neutral-100 text-neutral-500"
815
815
  }
816
816
  };
817
817
  const currentConfig = config[type];
818
- const IconToUse = icon || currentConfig.defaultIcon;
819
- return /* @__PURE__ */ import_react13.default.createElement("div", { className: `relative w-full rounded-2xl p-4 flex items-start gap-4 transition-all duration-300 animate-in fade-in slide-in-from-top-2 ${currentConfig.bg}` }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "flex-1 flex flex-col min-w-0" }, /* @__PURE__ */ import_react13.default.createElement("h4", { className: `text-xs tracking-tight mb-1 ${currentConfig.titleColor}` }, title), /* @__PURE__ */ import_react13.default.createElement("p", { className: `text-xs leading-relaxed ${currentConfig.msgColor}` }, message), action && /* @__PURE__ */ import_react13.default.createElement("div", { className: "mt-3" }, action)), isDismissible && /* @__PURE__ */ import_react13.default.createElement(
818
+ return /* @__PURE__ */ import_react13.default.createElement("div", { className: `relative w-full rounded-2xl p-4 flex items-start gap-4 transition-all duration-300 animate-in fade-in slide-in-from-top-2 ${currentConfig.bg}` }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "flex-1 flex flex-col min-w-0" }, /* @__PURE__ */ import_react13.default.createElement("h4", { className: `text-[10px] uppercase tracking-tight mb-1 ${currentConfig.titleColor}` }, title), /* @__PURE__ */ import_react13.default.createElement("p", { className: `text-xs leading-relaxed ${currentConfig.msgColor}` }, message), action && /* @__PURE__ */ import_react13.default.createElement("div", { className: "mt-3" }, action)), isDismissible && /* @__PURE__ */ import_react13.default.createElement(
820
819
  "button",
821
820
  {
822
821
  onClick: handleDismiss,
@@ -2025,13 +2024,18 @@ var UniversalCardPage = ({
2025
2024
  onDelete
2026
2025
  }) => {
2027
2026
  const router = (0, import_navigation4.useRouter)();
2027
+ const sortedCards = import_react33.default.useMemo(() => {
2028
+ return [...cards].sort((a, b) => {
2029
+ if (a.type === "VIRTUAL" && b.type !== "VIRTUAL") return -1;
2030
+ if (b.type === "VIRTUAL" && a.type !== "VIRTUAL") return 1;
2031
+ return 0;
2032
+ });
2033
+ }, [cards]);
2028
2034
  const [activeTabIndex, setActiveTabIndex] = (0, import_react33.useState)(0);
2029
- const activeCard = cards[activeTabIndex];
2035
+ const activeCard = sortedCards[activeTabIndex];
2030
2036
  (0, import_react33.useEffect)(() => {
2031
- setIsFlipped(false);
2032
2037
  setIsRevealed(false);
2033
2038
  }, [activeTabIndex]);
2034
- const [isFlipped, setIsFlipped] = (0, import_react33.useState)(false);
2035
2039
  const [isBgLoaded, setIsBgLoaded] = (0, import_react33.useState)(false);
2036
2040
  const [isRevealed, setIsRevealed] = (0, import_react33.useState)(false);
2037
2041
  const [isRevealing, setIsRevealing] = (0, import_react33.useState)(false);
@@ -2054,10 +2058,13 @@ var UniversalCardPage = ({
2054
2058
  const isFrozen = activeCard.status === "FROZEN";
2055
2059
  const isUnactivated = activeCard.status === "UNACTIVATED";
2056
2060
  const isDead = ["BLOCKED", "EXPIRED", "DELETED"].includes(activeCard.status);
2057
- const canFlip = isBgLoaded && isActivated;
2061
+ const isPreordered = activeCard.preOrder === true;
2058
2062
  const actionsDisabled = !isActivated && !isFrozen;
2059
2063
  const revealDisabled = !isActivated;
2060
2064
  const freezeDisabled = isUnactivated || isDead;
2065
+ const showActionOverlay = !isActivated && isBgLoaded && !isPreordered || isFrozen;
2066
+ const overlayClasses = activeCard.contentDark ? "bg-white/20 backdrop-blur-[3px]" : "bg-black/10 backdrop-blur-[2px]";
2067
+ const buttonClasses = activeCard.contentDark ? "bg-black/10 text-black hover:bg-black/20 font-medium" : "bg-white/25 text-white hover:bg-white/35";
2061
2068
  const handleToggleReveal = () => {
2062
2069
  if (revealDisabled || isRevealing) return;
2063
2070
  if (isRevealed) {
@@ -2108,42 +2115,32 @@ var UniversalCardPage = ({
2108
2115
  const capitalized = type.charAt(0).toUpperCase() + type.slice(1).toLowerCase();
2109
2116
  return `${capitalized} Card`;
2110
2117
  };
2111
- const displayCardNumber = isRevealed ? activeCard.cardNumber : `XXXX XXXX XXXX ${activeCard.cardNumber.slice(-4)}`;
2112
- const displayExpiry = isRevealed ? activeCard.expiry : "XX/XX";
2113
- const displayCvv = isRevealed ? activeCard.cvv : "XXX";
2114
- return /* @__PURE__ */ import_react33.default.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, cards.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 " }, cards.map((tab, idx) => {
2118
+ 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) => {
2115
2119
  const isActive = activeTabIndex === idx;
2116
2120
  return /* @__PURE__ */ import_react33.default.createElement(
2117
2121
  "button",
2118
2122
  {
2119
2123
  key: tab.id,
2120
2124
  onClick: () => setActiveTabIndex(idx),
2121
- className: `px-4 py-1.5 rounded-full text-[11px] transition-all duration-200 outline-none whitespace-nowrap shrink-0 ${isActive ? "bg-neutral-100 text-black" : "text-neutral-500 hover:text-black hover:bg-neutral-50/50"}`
2125
+ className: `px-4 py-1.5 rounded-full text-[11px] transition-all duration-200 outline-none whitespace-nowrap shrink-0 ${isActive ? "bg-neutral-100 text-black" : "text-neutral-500 hover:text-black hover:bg-neutral-50/50"}`
2122
2126
  },
2123
2127
  formatTabLabel(tab.type)
2124
2128
  );
2125
- }))), /* @__PURE__ */ import_react33.default.createElement("div", { className: "w-full pt-2 pb-2 flex justify-center", style: { perspective: "1000px" } }, /* @__PURE__ */ import_react33.default.createElement(
2129
+ }))), /* @__PURE__ */ import_react33.default.createElement("div", { className: "w-full pt-2 pb-2 flex justify-center" }, /* @__PURE__ */ import_react33.default.createElement(
2126
2130
  "div",
2127
2131
  {
2128
- onClick: () => {
2129
- if (canFlip) setIsFlipped(!isFlipped);
2130
- },
2131
- className: `relative w-full max-w-85 transition-transform duration-700 ${!isBgLoaded ? "cursor-wait" : canFlip ? "cursor-pointer" : "cursor-default"}`,
2132
- style: {
2133
- height: 180,
2134
- transformStyle: "preserve-3d",
2135
- transform: isFlipped ? "rotateY(180deg)" : "rotateY(0deg)"
2136
- }
2132
+ className: "relative w-full max-w-85",
2133
+ style: { height: 180 }
2137
2134
  },
2138
- !isBgLoaded && /* @__PURE__ */ import_react33.default.createElement("div", { className: "absolute inset-0 w-full h-full bg-white rounded-2xl flex items-center justify-center z-50 " }, /* @__PURE__ */ import_react33.default.createElement(import_react34.HugeiconsIcon, { icon: import_core_free_icons12.Loading03Icon, size: 28, className: "animate-spin text-black" })),
2139
- !isActivated && isBgLoaded && /* @__PURE__ */ import_react33.default.createElement("div", { className: "absolute inset-0 z-40 w-full h-full rounded-2xl backdrop-blur-[2px] flex flex-col items-center justify-center ", style: { transform: "translateZ(1px)" } }, isUnactivated && /* @__PURE__ */ import_react33.default.createElement(
2135
+ !isBgLoaded && /* @__PURE__ */ import_react33.default.createElement("div", { className: "absolute inset-0 w-full h-full bg-white rounded-2xl flex items-center justify-center z-50" }, /* @__PURE__ */ import_react33.default.createElement(import_react34.HugeiconsIcon, { icon: import_core_free_icons12.Loading03Icon, size: 28, className: "animate-spin text-black" })),
2136
+ showActionOverlay && /* @__PURE__ */ import_react33.default.createElement("div", { className: `absolute inset-0 z-40 w-full h-full rounded-2xl flex flex-col items-center justify-center transition-all ${overlayClasses}` }, isUnactivated && /* @__PURE__ */ import_react33.default.createElement(
2140
2137
  "button",
2141
2138
  {
2142
2139
  onClick: (e) => {
2143
2140
  e.stopPropagation();
2144
2141
  router.push(`${actionPath}${activeCard.id}`);
2145
2142
  },
2146
- className: "px-6 py-2 bg-white/25 text-white text-[11px] rounded-full transition-all outline-none active:scale-95"
2143
+ className: `px-6 py-2 text-[11px] rounded-full transition-all outline-none active:scale-95 ${buttonClasses}`
2147
2144
  },
2148
2145
  "Activate Card"
2149
2146
  ), isDead && /* @__PURE__ */ import_react33.default.createElement(
@@ -2153,7 +2150,7 @@ var UniversalCardPage = ({
2153
2150
  e.stopPropagation();
2154
2151
  router.push(`${actionPath}${activeCard.id}`);
2155
2152
  },
2156
- className: "px-6 py-2 bg-white/25 text-white text-[11px] rounded-full transition-all outline-none active:scale-95"
2153
+ className: `px-6 py-2 text-[11px] rounded-full transition-all outline-none active:scale-95 ${buttonClasses}`
2157
2154
  },
2158
2155
  "Create Card"
2159
2156
  ), isFrozen && /* @__PURE__ */ import_react33.default.createElement(
@@ -2164,50 +2161,38 @@ var UniversalCardPage = ({
2164
2161
  handleOverlayUnfreeze();
2165
2162
  },
2166
2163
  disabled: isOverlayActionLoading,
2167
- className: "px-6 py-2.5 bg-white/35 text-white text-[12px] rounded-full transition-all outline-none active:scale-95 flex items-center gap-2 disabled:opacity-80"
2164
+ 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}`
2168
2165
  },
2169
- isOverlayActionLoading ? /* @__PURE__ */ import_react33.default.createElement(import_react34.HugeiconsIcon, { icon: import_core_free_icons12.Loading03Icon, size: 16, className: "animate-spin" }) : "Unfreeze Card"
2166
+ isOverlayActionLoading ? /* @__PURE__ */ import_react33.default.createElement(import_react34.HugeiconsIcon, { icon: import_core_free_icons12.Loading03Icon, size: 16, className: `animate-spin ${activeCard.contentDark ? "text-black" : "text-white"}` }) : "Unfreeze Card"
2170
2167
  )),
2171
- /* @__PURE__ */ import_react33.default.createElement(
2168
+ /* @__PURE__ */ import_react33.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_react33.default.createElement(
2172
2169
  "div",
2173
2170
  {
2174
- 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"}`,
2175
- style: { backfaceVisibility: "hidden" }
2176
- },
2177
- /* @__PURE__ */ import_react33.default.createElement(
2178
- "div",
2179
- {
2180
- className: "absolute inset-0 bg-cover bg-center",
2181
- style: { backgroundImage: `url(${activeCard.cardBgSrc}), linear-gradient(to bottom right, #111, #333)` }
2182
- }
2183
- ),
2184
- /* @__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" }, activeCard.companyLogoSrc && /* @__PURE__ */ import_react33.default.createElement("img", { src: activeCard.companyLogoSrc, alt: "Company Logo", className: "h-10 w-auto max-w-30 object-contain opacity-90" })), /* @__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] text-white/60 tracking-widest " }, "Card Number"), /* @__PURE__ */ import_react33.default.createElement("span", { className: "text-[12px] text-white tracking-widest font-light" }, displayCardNumber)), activeCard.networkLogoSrc && /* @__PURE__ */ import_react33.default.createElement("img", { src: activeCard.networkLogoSrc, alt: "Network Logo", className: "h-10 w-auto max-w-20 object-contain opacity-90" })))
2185
- ),
2186
- /* @__PURE__ */ import_react33.default.createElement(
2187
- "div",
2171
+ className: "absolute inset-0 bg-cover bg-center",
2172
+ style: { backgroundImage: `url(${activeCard.cardBgSrc})` }
2173
+ }
2174
+ ), /* @__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(
2175
+ "img",
2188
2176
  {
2189
- 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"}`,
2190
- style: {
2191
- backfaceVisibility: "hidden",
2192
- transform: "rotateY(180deg)"
2193
- }
2194
- },
2195
- /* @__PURE__ */ import_react33.default.createElement(
2196
- "div",
2197
- {
2198
- className: "absolute inset-0 bg-cover bg-center",
2199
- style: { backgroundImage: `url(${activeCard.cardBgSrc}), linear-gradient(to bottom right, #111, #333)` }
2200
- }
2201
- ),
2202
- /* @__PURE__ */ import_react33.default.createElement("div", { className: "absolute top-6 left-0 right-0 h-10 bg-black/80 w-full" }),
2203
- /* @__PURE__ */ import_react33.default.createElement("div", { className: "relative z-10 w-full h-full p-5 flex flex-col justify-end" }, /* @__PURE__ */ import_react33.default.createElement("div", { className: "w-full text-center mb-6" }, /* @__PURE__ */ import_react33.default.createElement("span", { className: "text-white text-3xl italic tracking-wide opacity-90", style: { fontFamily: "'Whisper', cursive" } }, activeCard.cardHolderName)), /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex justify-between w-full max-w-[80%]" }, /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ import_react33.default.createElement("span", { className: "text-[9px] text-white/60 tracking-widest " }, "Expiry"), /* @__PURE__ */ import_react33.default.createElement("span", { className: "text-[12px] text-white font-light" }, displayExpiry)), /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ import_react33.default.createElement("span", { className: "text-[9px] text-white/60 tracking-widest " }, "CVV"), /* @__PURE__ */ import_react33.default.createElement("span", { className: "text-[12px] text-white font-light" }, displayCvv))))
2204
- )
2205
- )), /* @__PURE__ */ import_react33.default.createElement("p", { className: "w-full text-center text-xs text-neutral-400 mb-6 mt-1" }, isActivated ? "Tap to flip card" : "Action Required"), /* @__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(
2177
+ src: activeCard.networkLogoSrc,
2178
+ alt: "Network Logo",
2179
+ className: "h-10 w-auto max-w-20 object-contain opacity-90"
2180
+ }
2181
+ ))))
2182
+ )), 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(
2183
+ Banner,
2184
+ {
2185
+ type: "success",
2186
+ title: "Order Secured",
2187
+ message: `Your ${activeCard.tier} ${activeCard.type.toLowerCase()} card has been pre-ordered successfully and is pending batch processing.`,
2188
+ isDismissible: false
2189
+ }
2190
+ )) : 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(
2206
2191
  MenuRow,
2207
2192
  {
2208
2193
  icon: import_core_free_icons12.ViewOffSlashIcon,
2209
2194
  title: "Reveal Information",
2210
- subtitle: "Show card informations",
2195
+ subtitle: "Show secure card details",
2211
2196
  onClick: handleToggleReveal,
2212
2197
  isToggle: true,
2213
2198
  toggleState: isRevealed,
package/dist/index.mjs CHANGED
@@ -719,33 +719,32 @@ var Banner = ({
719
719
  };
720
720
  const config = {
721
721
  success: {
722
- bg: "bg-neutral-50",
723
- iconColor: "text-neutral-600",
724
- titleColor: "text-neutral-900",
725
- msgColor: "text-neutral-700",
722
+ bg: "bg-[#ceff8a22]",
723
+ iconColor: "text-[#143731]",
724
+ titleColor: "text-[#143731]",
725
+ msgColor: "text-[#143731]",
726
726
  defaultIcon: CheckmarkBadge01Icon,
727
727
  closeHover: "hover:bg-neutral-100 text-neutral-500"
728
728
  },
729
729
  warning: {
730
- bg: "bg-neutral-50",
731
- iconColor: "text-neutral-600",
732
- titleColor: "text-neutral-900",
733
- msgColor: "text-neutral-700",
730
+ bg: "bg-[#ceff8a22]",
731
+ iconColor: "text-[#143731]",
732
+ titleColor: "text-[#143731]",
733
+ msgColor: "text-[#143731]",
734
734
  defaultIcon: InformationCircleIcon,
735
735
  closeHover: "hover:bg-neutral-100 text-neutral-500"
736
736
  },
737
737
  alert: {
738
- bg: "bg-neutral-50",
739
- iconColor: "text-neutral-600",
740
- titleColor: "text-neutral-900",
741
- msgColor: "text-neutral-700",
738
+ bg: "bg-[#ff6b6b22]",
739
+ iconColor: "text-[#143731]",
740
+ titleColor: "text-[#143731]",
741
+ msgColor: "text-[#143731]",
742
742
  defaultIcon: Alert02Icon,
743
743
  closeHover: "hover:bg-neutral-100 text-neutral-500"
744
744
  }
745
745
  };
746
746
  const currentConfig = config[type];
747
- const IconToUse = icon || currentConfig.defaultIcon;
748
- return /* @__PURE__ */ React10.createElement("div", { className: `relative w-full rounded-2xl p-4 flex items-start gap-4 transition-all duration-300 animate-in fade-in slide-in-from-top-2 ${currentConfig.bg}` }, /* @__PURE__ */ React10.createElement("div", { className: "flex-1 flex flex-col min-w-0" }, /* @__PURE__ */ React10.createElement("h4", { className: `text-xs tracking-tight mb-1 ${currentConfig.titleColor}` }, title), /* @__PURE__ */ React10.createElement("p", { className: `text-xs leading-relaxed ${currentConfig.msgColor}` }, message), action && /* @__PURE__ */ React10.createElement("div", { className: "mt-3" }, action)), isDismissible && /* @__PURE__ */ React10.createElement(
747
+ return /* @__PURE__ */ React10.createElement("div", { className: `relative w-full rounded-2xl p-4 flex items-start gap-4 transition-all duration-300 animate-in fade-in slide-in-from-top-2 ${currentConfig.bg}` }, /* @__PURE__ */ React10.createElement("div", { className: "flex-1 flex flex-col min-w-0" }, /* @__PURE__ */ React10.createElement("h4", { className: `text-[10px] uppercase tracking-tight mb-1 ${currentConfig.titleColor}` }, title), /* @__PURE__ */ React10.createElement("p", { className: `text-xs leading-relaxed ${currentConfig.msgColor}` }, message), action && /* @__PURE__ */ React10.createElement("div", { className: "mt-3" }, action)), isDismissible && /* @__PURE__ */ React10.createElement(
749
748
  "button",
750
749
  {
751
750
  onClick: handleDismiss,
@@ -1999,13 +1998,18 @@ var UniversalCardPage = ({
1999
1998
  onDelete
2000
1999
  }) => {
2001
2000
  const router = useRouter();
2001
+ const sortedCards = React20.useMemo(() => {
2002
+ return [...cards].sort((a, b) => {
2003
+ if (a.type === "VIRTUAL" && b.type !== "VIRTUAL") return -1;
2004
+ if (b.type === "VIRTUAL" && a.type !== "VIRTUAL") return 1;
2005
+ return 0;
2006
+ });
2007
+ }, [cards]);
2002
2008
  const [activeTabIndex, setActiveTabIndex] = useState12(0);
2003
- const activeCard = cards[activeTabIndex];
2009
+ const activeCard = sortedCards[activeTabIndex];
2004
2010
  useEffect9(() => {
2005
- setIsFlipped(false);
2006
2011
  setIsRevealed(false);
2007
2012
  }, [activeTabIndex]);
2008
- const [isFlipped, setIsFlipped] = useState12(false);
2009
2013
  const [isBgLoaded, setIsBgLoaded] = useState12(false);
2010
2014
  const [isRevealed, setIsRevealed] = useState12(false);
2011
2015
  const [isRevealing, setIsRevealing] = useState12(false);
@@ -2028,10 +2032,13 @@ var UniversalCardPage = ({
2028
2032
  const isFrozen = activeCard.status === "FROZEN";
2029
2033
  const isUnactivated = activeCard.status === "UNACTIVATED";
2030
2034
  const isDead = ["BLOCKED", "EXPIRED", "DELETED"].includes(activeCard.status);
2031
- const canFlip = isBgLoaded && isActivated;
2035
+ const isPreordered = activeCard.preOrder === true;
2032
2036
  const actionsDisabled = !isActivated && !isFrozen;
2033
2037
  const revealDisabled = !isActivated;
2034
2038
  const freezeDisabled = isUnactivated || isDead;
2039
+ const showActionOverlay = !isActivated && isBgLoaded && !isPreordered || isFrozen;
2040
+ const overlayClasses = activeCard.contentDark ? "bg-white/20 backdrop-blur-[3px]" : "bg-black/10 backdrop-blur-[2px]";
2041
+ const buttonClasses = activeCard.contentDark ? "bg-black/10 text-black hover:bg-black/20 font-medium" : "bg-white/25 text-white hover:bg-white/35";
2035
2042
  const handleToggleReveal = () => {
2036
2043
  if (revealDisabled || isRevealing) return;
2037
2044
  if (isRevealed) {
@@ -2082,42 +2089,32 @@ var UniversalCardPage = ({
2082
2089
  const capitalized = type.charAt(0).toUpperCase() + type.slice(1).toLowerCase();
2083
2090
  return `${capitalized} Card`;
2084
2091
  };
2085
- const displayCardNumber = isRevealed ? activeCard.cardNumber : `XXXX XXXX XXXX ${activeCard.cardNumber.slice(-4)}`;
2086
- const displayExpiry = isRevealed ? activeCard.expiry : "XX/XX";
2087
- const displayCvv = isRevealed ? activeCard.cvv : "XXX";
2088
- return /* @__PURE__ */ React20.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, cards.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 " }, cards.map((tab, idx) => {
2092
+ 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) => {
2089
2093
  const isActive = activeTabIndex === idx;
2090
2094
  return /* @__PURE__ */ React20.createElement(
2091
2095
  "button",
2092
2096
  {
2093
2097
  key: tab.id,
2094
2098
  onClick: () => setActiveTabIndex(idx),
2095
- className: `px-4 py-1.5 rounded-full text-[11px] transition-all duration-200 outline-none whitespace-nowrap shrink-0 ${isActive ? "bg-neutral-100 text-black" : "text-neutral-500 hover:text-black hover:bg-neutral-50/50"}`
2099
+ className: `px-4 py-1.5 rounded-full text-[11px] transition-all duration-200 outline-none whitespace-nowrap shrink-0 ${isActive ? "bg-neutral-100 text-black" : "text-neutral-500 hover:text-black hover:bg-neutral-50/50"}`
2096
2100
  },
2097
2101
  formatTabLabel(tab.type)
2098
2102
  );
2099
- }))), /* @__PURE__ */ React20.createElement("div", { className: "w-full pt-2 pb-2 flex justify-center", style: { perspective: "1000px" } }, /* @__PURE__ */ React20.createElement(
2103
+ }))), /* @__PURE__ */ React20.createElement("div", { className: "w-full pt-2 pb-2 flex justify-center" }, /* @__PURE__ */ React20.createElement(
2100
2104
  "div",
2101
2105
  {
2102
- onClick: () => {
2103
- if (canFlip) setIsFlipped(!isFlipped);
2104
- },
2105
- className: `relative w-full max-w-85 transition-transform duration-700 ${!isBgLoaded ? "cursor-wait" : canFlip ? "cursor-pointer" : "cursor-default"}`,
2106
- style: {
2107
- height: 180,
2108
- transformStyle: "preserve-3d",
2109
- transform: isFlipped ? "rotateY(180deg)" : "rotateY(0deg)"
2110
- }
2106
+ className: "relative w-full max-w-85",
2107
+ style: { height: 180 }
2111
2108
  },
2112
- !isBgLoaded && /* @__PURE__ */ React20.createElement("div", { className: "absolute inset-0 w-full h-full bg-white rounded-2xl flex items-center justify-center z-50 " }, /* @__PURE__ */ React20.createElement(HugeiconsIcon14, { icon: Loading03Icon9, size: 28, className: "animate-spin text-black" })),
2113
- !isActivated && isBgLoaded && /* @__PURE__ */ React20.createElement("div", { className: "absolute inset-0 z-40 w-full h-full rounded-2xl backdrop-blur-[2px] flex flex-col items-center justify-center ", style: { transform: "translateZ(1px)" } }, isUnactivated && /* @__PURE__ */ React20.createElement(
2109
+ !isBgLoaded && /* @__PURE__ */ React20.createElement("div", { className: "absolute inset-0 w-full h-full bg-white rounded-2xl flex items-center justify-center z-50" }, /* @__PURE__ */ React20.createElement(HugeiconsIcon14, { icon: Loading03Icon9, size: 28, className: "animate-spin text-black" })),
2110
+ showActionOverlay && /* @__PURE__ */ React20.createElement("div", { className: `absolute inset-0 z-40 w-full h-full rounded-2xl flex flex-col items-center justify-center transition-all ${overlayClasses}` }, isUnactivated && /* @__PURE__ */ React20.createElement(
2114
2111
  "button",
2115
2112
  {
2116
2113
  onClick: (e) => {
2117
2114
  e.stopPropagation();
2118
2115
  router.push(`${actionPath}${activeCard.id}`);
2119
2116
  },
2120
- className: "px-6 py-2 bg-white/25 text-white text-[11px] rounded-full transition-all outline-none active:scale-95"
2117
+ className: `px-6 py-2 text-[11px] rounded-full transition-all outline-none active:scale-95 ${buttonClasses}`
2121
2118
  },
2122
2119
  "Activate Card"
2123
2120
  ), isDead && /* @__PURE__ */ React20.createElement(
@@ -2127,7 +2124,7 @@ var UniversalCardPage = ({
2127
2124
  e.stopPropagation();
2128
2125
  router.push(`${actionPath}${activeCard.id}`);
2129
2126
  },
2130
- className: "px-6 py-2 bg-white/25 text-white text-[11px] rounded-full transition-all outline-none active:scale-95"
2127
+ className: `px-6 py-2 text-[11px] rounded-full transition-all outline-none active:scale-95 ${buttonClasses}`
2131
2128
  },
2132
2129
  "Create Card"
2133
2130
  ), isFrozen && /* @__PURE__ */ React20.createElement(
@@ -2138,50 +2135,38 @@ var UniversalCardPage = ({
2138
2135
  handleOverlayUnfreeze();
2139
2136
  },
2140
2137
  disabled: isOverlayActionLoading,
2141
- className: "px-6 py-2.5 bg-white/35 text-white text-[12px] rounded-full transition-all outline-none active:scale-95 flex items-center gap-2 disabled:opacity-80"
2138
+ 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}`
2142
2139
  },
2143
- isOverlayActionLoading ? /* @__PURE__ */ React20.createElement(HugeiconsIcon14, { icon: Loading03Icon9, size: 16, className: "animate-spin" }) : "Unfreeze Card"
2140
+ isOverlayActionLoading ? /* @__PURE__ */ React20.createElement(HugeiconsIcon14, { icon: Loading03Icon9, size: 16, className: `animate-spin ${activeCard.contentDark ? "text-black" : "text-white"}` }) : "Unfreeze Card"
2144
2141
  )),
2145
- /* @__PURE__ */ React20.createElement(
2142
+ /* @__PURE__ */ React20.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__ */ React20.createElement(
2146
2143
  "div",
2147
2144
  {
2148
- 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"}`,
2149
- style: { backfaceVisibility: "hidden" }
2150
- },
2151
- /* @__PURE__ */ React20.createElement(
2152
- "div",
2153
- {
2154
- className: "absolute inset-0 bg-cover bg-center",
2155
- style: { backgroundImage: `url(${activeCard.cardBgSrc}), linear-gradient(to bottom right, #111, #333)` }
2156
- }
2157
- ),
2158
- /* @__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" }, activeCard.companyLogoSrc && /* @__PURE__ */ React20.createElement("img", { src: activeCard.companyLogoSrc, alt: "Company Logo", className: "h-10 w-auto max-w-30 object-contain opacity-90" })), /* @__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] text-white/60 tracking-widest " }, "Card Number"), /* @__PURE__ */ React20.createElement("span", { className: "text-[12px] text-white tracking-widest font-light" }, displayCardNumber)), activeCard.networkLogoSrc && /* @__PURE__ */ React20.createElement("img", { src: activeCard.networkLogoSrc, alt: "Network Logo", className: "h-10 w-auto max-w-20 object-contain opacity-90" })))
2159
- ),
2160
- /* @__PURE__ */ React20.createElement(
2161
- "div",
2145
+ className: "absolute inset-0 bg-cover bg-center",
2146
+ style: { backgroundImage: `url(${activeCard.cardBgSrc})` }
2147
+ }
2148
+ ), /* @__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(
2149
+ "img",
2162
2150
  {
2163
- 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"}`,
2164
- style: {
2165
- backfaceVisibility: "hidden",
2166
- transform: "rotateY(180deg)"
2167
- }
2168
- },
2169
- /* @__PURE__ */ React20.createElement(
2170
- "div",
2171
- {
2172
- className: "absolute inset-0 bg-cover bg-center",
2173
- style: { backgroundImage: `url(${activeCard.cardBgSrc}), linear-gradient(to bottom right, #111, #333)` }
2174
- }
2175
- ),
2176
- /* @__PURE__ */ React20.createElement("div", { className: "absolute top-6 left-0 right-0 h-10 bg-black/80 w-full" }),
2177
- /* @__PURE__ */ React20.createElement("div", { className: "relative z-10 w-full h-full p-5 flex flex-col justify-end" }, /* @__PURE__ */ React20.createElement("div", { className: "w-full text-center mb-6" }, /* @__PURE__ */ React20.createElement("span", { className: "text-white text-3xl italic tracking-wide opacity-90", style: { fontFamily: "'Whisper', cursive" } }, activeCard.cardHolderName)), /* @__PURE__ */ React20.createElement("div", { className: "flex justify-between w-full max-w-[80%]" }, /* @__PURE__ */ React20.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React20.createElement("span", { className: "text-[9px] text-white/60 tracking-widest " }, "Expiry"), /* @__PURE__ */ React20.createElement("span", { className: "text-[12px] text-white font-light" }, displayExpiry)), /* @__PURE__ */ React20.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React20.createElement("span", { className: "text-[9px] text-white/60 tracking-widest " }, "CVV"), /* @__PURE__ */ React20.createElement("span", { className: "text-[12px] text-white font-light" }, displayCvv))))
2178
- )
2179
- )), /* @__PURE__ */ React20.createElement("p", { className: "w-full text-center text-xs text-neutral-400 mb-6 mt-1" }, isActivated ? "Tap to flip card" : "Action Required"), /* @__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(
2151
+ src: activeCard.networkLogoSrc,
2152
+ alt: "Network Logo",
2153
+ className: "h-10 w-auto max-w-20 object-contain opacity-90"
2154
+ }
2155
+ ))))
2156
+ )), 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(
2157
+ Banner,
2158
+ {
2159
+ type: "success",
2160
+ title: "Order Secured",
2161
+ message: `Your ${activeCard.tier} ${activeCard.type.toLowerCase()} card has been pre-ordered successfully and is pending batch processing.`,
2162
+ isDismissible: false
2163
+ }
2164
+ )) : 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(
2180
2165
  MenuRow,
2181
2166
  {
2182
2167
  icon: ViewOffSlashIcon2,
2183
2168
  title: "Reveal Information",
2184
- subtitle: "Show card informations",
2169
+ subtitle: "Show secure card details",
2185
2170
  onClick: handleToggleReveal,
2186
2171
  isToggle: true,
2187
2172
  toggleState: isRevealed,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@retinalabsllc/zairusjs",
3
- "version": "14.0.35",
3
+ "version": "14.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",