npm - @retinalabsllc/zairusjs - Versions diffs - 14.0.15 → 14.0.20 - Mend

@retinalabsllc/zairusjs 14.0.15 → 14.0.20

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

package/dist/index.d.mts CHANGED Viewed

@@ -874,4 +874,33 @@ interface UniversalReferralPageProps {
 }
 declare const UniversalReferralPage: React.FC<UniversalReferralPageProps>;
-export { AppBento2, type AppBento2Props, type BannerProps, type BentoFeature, type BoardMember, type CompanyDetails, type ConsultantProfile, ConsultantShowcase, type ConsultantShowcaseProps, ContentGridBlock, type ContentGridBlockProps, type DocumentSectionData, type EmailContact, Faq, type FaqItem, type FaqProps, FeatureScroll, type FeatureScrollProps, Footer, type FooterColumn, type FooterLink, type FooterProps, GifFeatureCard, type GifFeatureCardProps, Header, type HeaderLink, type HeaderProps, type AppLogo$1 as HeroAppLogo, HeroSection, type HeroSectionProps, type HomeActionBtn, type LeaderboardItem, ManagedBoardBlock, type ManagedBoardBlockProps, ManagedContactBlock, type ManagedContactBlockProps, ManagedDocument, type ManagedDocumentProps, ManagedNewsletterSplitBlock, type ManagedNewsletterSplitBlockProps, ManagedNotFoundBlock, type ManagedNotFoundBlockProps, ManagedPricingBlock, type ManagedPricingBlockProps, ManagedProjectsBlock, type ManagedProjectsBlockProps, ManagedToaster, MedicalFeatureStatsBlock, MobileNav, type MobileNavItem, type MobileNavProps, type NavItem, type NotificationItem, NumberInput, type NumberInputProps, PageSpinner, type PageSpinnerProps, PipleAuth, type PipleAuthProps, type PlatformFeatureItem, PlatformFeatures, type PlatformFeaturesProps, PortfolioHero, type PortfolioHeroProps, type AppLogo as PricingAppLogo, type PricingFeature, type PricingPlan, type PricingTab, type ProjectItem, type ReferralProfile, type RewardItem, type RewardProfile, type ScrollFeature, type SocialContact, type SocialLink, type StatItem, TextInput, type TextInputProps, ThreeDActionButton, type ThreeDActionButtonProps, ThreeDButton, type ThreeDButtonProps, UniversalCardPage, type UniversalCardPageProps, UniversalErrorView, type UniversalErrorViewProps, UniversalHomeView, type UniversalHomeViewProps, UniversalOrganizationPage, type UniversalOrganizationPageProps, UniversalProfilePage, type UniversalProfilePageProps, UniversalProfileSettings, type UniversalProfileSettingsProps, type UniversalReferralItem, UniversalReferralPage, type UniversalReferralPageProps, UniversalRewardPage, type UniversalRewardPageProps, UniversalSecurityPage, type UniversalSecurityPageProps, UniversalSidebar, type UniversalSidebarProps, type UniversalTransaction, UniversalTransactionPage, type UniversalTransactionPageProps, UniversalVerificationPage, type UniversalVerificationPageProps, type UniversalWallet, UniversalWalletPage, type UniversalWalletPageProps, type VerificationStatus, WaitlistDialog, type WaitlistDialogProps };
+interface PricingFeature2 {
+    name: string;
+    value: boolean | string;
+}
+interface TierOption {
+    tierName: string;
+    priceUSD: number;
+    isYearly: boolean;
+    description: string;
+    features: PricingFeature2[];
+    acceptWaitlist: boolean;
+    acceptPreorder: boolean;
+    isAvailable?: boolean;
+}
+interface UniversalCardActionPageProps {
+    cardId: string;
+    cardType: 'VIRTUAL' | 'PHYSICAL';
+    currentTier: string;
+    hasPreordered: boolean;
+    onWaitlist: boolean;
+    tiers: TierOption[];
+    isLoadingData: boolean;
+    onBack?: () => void;
+    onConfirmAction: (tierName: string, action: 'pre_order' | 'join_waitlist' | 'upgrade') => Promise<{
+        success: boolean;
+    }>;
+}
+declare const UniversalCardActionPage: React.FC<UniversalCardActionPageProps>;
+export { AppBento2, type AppBento2Props, type BannerProps, type BentoFeature, type BoardMember, type CompanyDetails, type ConsultantProfile, ConsultantShowcase, type ConsultantShowcaseProps, ContentGridBlock, type ContentGridBlockProps, type DocumentSectionData, type EmailContact, Faq, type FaqItem, type FaqProps, FeatureScroll, type FeatureScrollProps, Footer, type FooterColumn, type FooterLink, type FooterProps, GifFeatureCard, type GifFeatureCardProps, Header, type HeaderLink, type HeaderProps, type AppLogo$1 as HeroAppLogo, HeroSection, type HeroSectionProps, type HomeActionBtn, type LeaderboardItem, ManagedBoardBlock, type ManagedBoardBlockProps, ManagedContactBlock, type ManagedContactBlockProps, ManagedDocument, type ManagedDocumentProps, ManagedNewsletterSplitBlock, type ManagedNewsletterSplitBlockProps, ManagedNotFoundBlock, type ManagedNotFoundBlockProps, ManagedPricingBlock, type ManagedPricingBlockProps, ManagedProjectsBlock, type ManagedProjectsBlockProps, ManagedToaster, MedicalFeatureStatsBlock, MobileNav, type MobileNavItem, type MobileNavProps, type NavItem, type NotificationItem, NumberInput, type NumberInputProps, PageSpinner, type PageSpinnerProps, PipleAuth, type PipleAuthProps, type PlatformFeatureItem, PlatformFeatures, type PlatformFeaturesProps, PortfolioHero, type PortfolioHeroProps, type AppLogo as PricingAppLogo, type PricingFeature, type PricingFeature2, type PricingPlan, type PricingTab, type ProjectItem, type ReferralProfile, type RewardItem, type RewardProfile, type ScrollFeature, type SocialContact, type SocialLink, type StatItem, TextInput, type TextInputProps, ThreeDActionButton, type ThreeDActionButtonProps, ThreeDButton, type ThreeDButtonProps, type TierOption, UniversalCardActionPage, type UniversalCardActionPageProps, UniversalCardPage, type UniversalCardPageProps, UniversalErrorView, type UniversalErrorViewProps, UniversalHomeView, type UniversalHomeViewProps, UniversalOrganizationPage, type UniversalOrganizationPageProps, UniversalProfilePage, type UniversalProfilePageProps, UniversalProfileSettings, type UniversalProfileSettingsProps, type UniversalReferralItem, UniversalReferralPage, type UniversalReferralPageProps, UniversalRewardPage, type UniversalRewardPageProps, UniversalSecurityPage, type UniversalSecurityPageProps, UniversalSidebar, type UniversalSidebarProps, type UniversalTransaction, UniversalTransactionPage, type UniversalTransactionPageProps, UniversalVerificationPage, type UniversalVerificationPageProps, type UniversalWallet, UniversalWalletPage, type UniversalWalletPageProps, type VerificationStatus, WaitlistDialog, type WaitlistDialogProps };

package/dist/index.d.ts CHANGED Viewed

@@ -874,4 +874,33 @@ interface UniversalReferralPageProps {
 }
 declare const UniversalReferralPage: React.FC<UniversalReferralPageProps>;
-export { AppBento2, type AppBento2Props, type BannerProps, type BentoFeature, type BoardMember, type CompanyDetails, type ConsultantProfile, ConsultantShowcase, type ConsultantShowcaseProps, ContentGridBlock, type ContentGridBlockProps, type DocumentSectionData, type EmailContact, Faq, type FaqItem, type FaqProps, FeatureScroll, type FeatureScrollProps, Footer, type FooterColumn, type FooterLink, type FooterProps, GifFeatureCard, type GifFeatureCardProps, Header, type HeaderLink, type HeaderProps, type AppLogo$1 as HeroAppLogo, HeroSection, type HeroSectionProps, type HomeActionBtn, type LeaderboardItem, ManagedBoardBlock, type ManagedBoardBlockProps, ManagedContactBlock, type ManagedContactBlockProps, ManagedDocument, type ManagedDocumentProps, ManagedNewsletterSplitBlock, type ManagedNewsletterSplitBlockProps, ManagedNotFoundBlock, type ManagedNotFoundBlockProps, ManagedPricingBlock, type ManagedPricingBlockProps, ManagedProjectsBlock, type ManagedProjectsBlockProps, ManagedToaster, MedicalFeatureStatsBlock, MobileNav, type MobileNavItem, type MobileNavProps, type NavItem, type NotificationItem, NumberInput, type NumberInputProps, PageSpinner, type PageSpinnerProps, PipleAuth, type PipleAuthProps, type PlatformFeatureItem, PlatformFeatures, type PlatformFeaturesProps, PortfolioHero, type PortfolioHeroProps, type AppLogo as PricingAppLogo, type PricingFeature, type PricingPlan, type PricingTab, type ProjectItem, type ReferralProfile, type RewardItem, type RewardProfile, type ScrollFeature, type SocialContact, type SocialLink, type StatItem, TextInput, type TextInputProps, ThreeDActionButton, type ThreeDActionButtonProps, ThreeDButton, type ThreeDButtonProps, UniversalCardPage, type UniversalCardPageProps, UniversalErrorView, type UniversalErrorViewProps, UniversalHomeView, type UniversalHomeViewProps, UniversalOrganizationPage, type UniversalOrganizationPageProps, UniversalProfilePage, type UniversalProfilePageProps, UniversalProfileSettings, type UniversalProfileSettingsProps, type UniversalReferralItem, UniversalReferralPage, type UniversalReferralPageProps, UniversalRewardPage, type UniversalRewardPageProps, UniversalSecurityPage, type UniversalSecurityPageProps, UniversalSidebar, type UniversalSidebarProps, type UniversalTransaction, UniversalTransactionPage, type UniversalTransactionPageProps, UniversalVerificationPage, type UniversalVerificationPageProps, type UniversalWallet, UniversalWalletPage, type UniversalWalletPageProps, type VerificationStatus, WaitlistDialog, type WaitlistDialogProps };
+interface PricingFeature2 {
+    name: string;
+    value: boolean | string;
+}
+interface TierOption {
+    tierName: string;
+    priceUSD: number;
+    isYearly: boolean;
+    description: string;
+    features: PricingFeature2[];
+    acceptWaitlist: boolean;
+    acceptPreorder: boolean;
+    isAvailable?: boolean;
+}
+interface UniversalCardActionPageProps {
+    cardId: string;
+    cardType: 'VIRTUAL' | 'PHYSICAL';
+    currentTier: string;
+    hasPreordered: boolean;
+    onWaitlist: boolean;
+    tiers: TierOption[];
+    isLoadingData: boolean;
+    onBack?: () => void;
+    onConfirmAction: (tierName: string, action: 'pre_order' | 'join_waitlist' | 'upgrade') => Promise<{
+        success: boolean;
+    }>;
+}
+declare const UniversalCardActionPage: React.FC<UniversalCardActionPageProps>;
+export { AppBento2, type AppBento2Props, type BannerProps, type BentoFeature, type BoardMember, type CompanyDetails, type ConsultantProfile, ConsultantShowcase, type ConsultantShowcaseProps, ContentGridBlock, type ContentGridBlockProps, type DocumentSectionData, type EmailContact, Faq, type FaqItem, type FaqProps, FeatureScroll, type FeatureScrollProps, Footer, type FooterColumn, type FooterLink, type FooterProps, GifFeatureCard, type GifFeatureCardProps, Header, type HeaderLink, type HeaderProps, type AppLogo$1 as HeroAppLogo, HeroSection, type HeroSectionProps, type HomeActionBtn, type LeaderboardItem, ManagedBoardBlock, type ManagedBoardBlockProps, ManagedContactBlock, type ManagedContactBlockProps, ManagedDocument, type ManagedDocumentProps, ManagedNewsletterSplitBlock, type ManagedNewsletterSplitBlockProps, ManagedNotFoundBlock, type ManagedNotFoundBlockProps, ManagedPricingBlock, type ManagedPricingBlockProps, ManagedProjectsBlock, type ManagedProjectsBlockProps, ManagedToaster, MedicalFeatureStatsBlock, MobileNav, type MobileNavItem, type MobileNavProps, type NavItem, type NotificationItem, NumberInput, type NumberInputProps, PageSpinner, type PageSpinnerProps, PipleAuth, type PipleAuthProps, type PlatformFeatureItem, PlatformFeatures, type PlatformFeaturesProps, PortfolioHero, type PortfolioHeroProps, type AppLogo as PricingAppLogo, type PricingFeature, type PricingFeature2, type PricingPlan, type PricingTab, type ProjectItem, type ReferralProfile, type RewardItem, type RewardProfile, type ScrollFeature, type SocialContact, type SocialLink, type StatItem, TextInput, type TextInputProps, ThreeDActionButton, type ThreeDActionButtonProps, ThreeDButton, type ThreeDButtonProps, type TierOption, UniversalCardActionPage, type UniversalCardActionPageProps, UniversalCardPage, type UniversalCardPageProps, UniversalErrorView, type UniversalErrorViewProps, UniversalHomeView, type UniversalHomeViewProps, UniversalOrganizationPage, type UniversalOrganizationPageProps, UniversalProfilePage, type UniversalProfilePageProps, UniversalProfileSettings, type UniversalProfileSettingsProps, type UniversalReferralItem, UniversalReferralPage, type UniversalReferralPageProps, UniversalRewardPage, type UniversalRewardPageProps, UniversalSecurityPage, type UniversalSecurityPageProps, UniversalSidebar, type UniversalSidebarProps, type UniversalTransaction, UniversalTransactionPage, type UniversalTransactionPageProps, UniversalVerificationPage, type UniversalVerificationPageProps, type UniversalWallet, UniversalWalletPage, type UniversalWalletPageProps, type VerificationStatus, WaitlistDialog, type WaitlistDialogProps };

package/dist/index.js CHANGED Viewed

@@ -58,6 +58,7 @@ __export(index_exports, {
   TextInput: () => TextInput,
   ThreeDActionButton: () => ThreeDActionButton,
   ThreeDButton: () => ThreeDButton,
+  UniversalCardActionPage: () => UniversalCardActionPage,
   UniversalCardPage: () => UniversalCardPage,
   UniversalErrorView: () => UniversalErrorView,
   UniversalHomeView: () => UniversalHomeView,
@@ -1930,7 +1931,7 @@ var ConfirmationDialog = ({
     {
       onClick: onConfirm,
       disabled: isProcessing,
-      className: `flex-1 py-4 text-[13px] transition-colors disabled:opacity-50 flex justify-center items-center outline-none  ${isDestructive ? "text-red-500 hover:bg-red-50" : "text-black hover:bg-neutral-50"}`
+      className: `flex-1 py-4 text-[13px] transition-colors disabled:opacity-50 flex justify-center items-center outline-none  ${isDestructive ? "text-black hover:bg-red-50" : "text-black hover:bg-neutral-50"}`
     },
     isProcessing ? /* @__PURE__ */ import_react29.default.createElement(import_react30.HugeiconsIcon, { icon: import_core_free_icons10.Loading03Icon, className: "animate-spin", size: 18 }) : confirmText
   ))));
@@ -4221,6 +4222,196 @@ var UniversalReferralPage = ({
     /* @__PURE__ */ import_react71.default.createElement(import_react72.HugeiconsIcon, { icon: import_core_free_icons24.ArrowRight01Icon, size: 14 })
   )))))));
 };
+// src/components/UniversalCardActionPage.tsx
+var import_react73 = __toESM(require("react"));
+var import_react_confetti2 = __toESM(require("react-confetti"));
+var import_react_use2 = require("react-use");
+var import_react74 = require("@hugeicons/react");
+var import_core_free_icons25 = require("@hugeicons/core-free-icons");
+var CheckIcon2 = ({ className = "" }) => /* @__PURE__ */ import_react73.default.createElement("svg", { viewBox: "0 0 24 24", fill: "none", className: `w-4 h-4 shrink-0 ${className}`, xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react73.default.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "black" }), /* @__PURE__ */ import_react73.default.createElement("path", { d: "M8 12L11 15L16 9", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
+var CrossIcon2 = ({ className = "" }) => /* @__PURE__ */ import_react73.default.createElement("svg", { viewBox: "0 0 24 24", fill: "none", className: `w-4 h-4 shrink-0 ${className}`, xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react73.default.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "#F5F5F5" }), /* @__PURE__ */ import_react73.default.createElement("path", { d: "M15 9L9 15M9 9l6 6", stroke: "#D4D4D4", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
+var formatTierName = (name) => {
+  if (!name) return "";
+  return name.charAt(0).toUpperCase() + name.slice(1).toLowerCase();
+};
+var getTierGlow = (tier) => {
+  switch (tier.toUpperCase()) {
+    case "PLATINUM":
+      return "from-neutral-300";
+    case "PREMIUM":
+      return "from-purple-200";
+    case "GOLD":
+      return "from-yellow-200";
+    case "SILVER":
+      return "from-slate-300";
+    case "NEO":
+      return "from-cyan-200";
+    case "BASIC":
+      return "from-blue-200";
+    case "ONE":
+      return "from-emerald-200";
+    case "ZERO":
+      return "from-rose-200";
+    default:
+      return "from-neutral-200";
+  }
+};
+var UniversalCardActionPage = ({
+  cardType,
+  currentTier,
+  hasPreordered,
+  onWaitlist,
+  tiers,
+  isLoadingData,
+  onBack,
+  onConfirmAction
+}) => {
+  const onBackHandler = onBack ?? (() => {
+    if (typeof window !== "undefined") window.history.back();
+  });
+  const { width, height } = (0, import_react_use2.useWindowSize)();
+  const [selectedTier, setSelectedTier] = (0, import_react73.useState)(null);
+  const [intendedAction, setIntendedAction] = (0, import_react73.useState)(null);
+  const [isProcessing, setIsProcessing] = (0, import_react73.useState)(false);
+  const [showConfetti, setShowConfetti] = (0, import_react73.useState)(false);
+  const availableTiers = tiers.filter((t) => t.isAvailable || t.acceptPreorder || t.acceptWaitlist);
+  const handleTierClick = (tier, explicitAction) => {
+    setSelectedTier(tier);
+    setIntendedAction(explicitAction);
+  };
+  const processAction = async () => {
+    if (!selectedTier || !intendedAction) return;
+    setIsProcessing(true);
+    try {
+      const result = await onConfirmAction(selectedTier.tierName, intendedAction);
+      if (result.success) {
+        if (intendedAction === "pre_order") {
+          setShowConfetti(true);
+          setTimeout(() => setShowConfetti(false), 6e3);
+        }
+        setSelectedTier(null);
+        setIntendedAction(null);
+      }
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+  const getPrimaryButtonText = (tier) => {
+    const isCurrent = tier.tierName === currentTier;
+    if (isCurrent) {
+      if (hasPreordered) return "Secured (Pre-ordered)";
+      return "Pre-order Now";
+    }
+    if (hasPreordered) return "Unavailable";
+    return `Upgrade to ${formatTierName(tier.tierName)}`;
+  };
+  const getWaitlistButtonText = (tier) => {
+    const isCurrent = tier.tierName === currentTier;
+    if (isCurrent && (onWaitlist || hasPreordered)) return "Joined";
+    return "Join Waitlist";
+  };
+  return /* @__PURE__ */ import_react73.default.createElement("div", { className: "w-full" }, /* @__PURE__ */ import_react73.default.createElement(ManagedToaster, null), showConfetti && /* @__PURE__ */ import_react73.default.createElement("div", { className: "fixed inset-0 z-200 pointer-events-none" }, /* @__PURE__ */ import_react73.default.createElement(import_react_confetti2.default, { width, height, recycle: false, numberOfPieces: 500, gravity: 0.15 })), /* @__PURE__ */ import_react73.default.createElement("div", { className: "mb-6 flex max-w-3xl w-full mx-auto items-center px-1" }, /* @__PURE__ */ import_react73.default.createElement(
+    "button",
+    {
+      onClick: onBackHandler,
+      className: "flex items-center gap-2 text-neutral-500 hover:text-black transition-colors text-[13px] outline-none"
+    },
+    /* @__PURE__ */ import_react73.default.createElement(import_react74.HugeiconsIcon, { icon: import_core_free_icons25.ArrowLeft01Icon, size: 16 }),
+    " Back"
+  )), /* @__PURE__ */ import_react73.default.createElement("div", { className: "flex flex-col animate-in max-w-5xl w-full mx-auto fade-in duration-300" }, /* @__PURE__ */ import_react73.default.createElement("div", { className: "w-full flex flex-col items-center text-center mb-10 px-4" }, /* @__PURE__ */ import_react73.default.createElement("span", { className: "text-[10px] tracking-[0.4em] text-neutral-400 block uppercase mb-3" }, cardType, " CARD ACTIVATION"), /* @__PURE__ */ import_react73.default.createElement("h1", { className: "text-2xl sm:text-3xl text-black tracking-tight mb-2" }, "Select Your Tier"), /* @__PURE__ */ import_react73.default.createElement("p", { className: "text-xs text-neutral-500 max-w-lg" }, hasPreordered ? "You have already secured your card. Upgrades are disabled while your order is pending processing." : "Upgrade your tier or secure your card now. Pre-orders guarantee priority processing when the batch goes live.")), isLoadingData ? /* @__PURE__ */ import_react73.default.createElement("div", { className: "flex justify-center py-20" }, /* @__PURE__ */ import_react73.default.createElement(import_react74.HugeiconsIcon, { icon: import_core_free_icons25.Loading03Icon, size: 32, className: "animate-spin text-neutral-300" })) : /* @__PURE__ */ import_react73.default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-5 w-full max-w-4xl mx-auto px-4" }, availableTiers.map((tier) => {
+    const isCurrent = tier.tierName === currentTier;
+    const isCardDisabled = hasPreordered && !isCurrent;
+    const isHighlighted = hasPreordered && isCurrent;
+    const isThisCardLoading = isProcessing && selectedTier?.tierName === tier.tierName;
+    const isPrimaryDisabled = isCardDisabled || isHighlighted || isThisCardLoading || !tier.acceptPreorder;
+    const isWaitlistDisabled = !isCurrent || isCurrent && (onWaitlist || hasPreordered) || isThisCardLoading || !tier.acceptWaitlist;
+    return /* @__PURE__ */ import_react73.default.createElement(
+      "div",
+      {
+        key: tier.tierName,
+        className: `relative bg-white rounded-3xl p-6 flex flex-col overflow-hidden transition-all duration-300
+                                        ${isCardDisabled ? "opacity-50 grayscale-50 pointer-events-none" : ""}
+                                    `
+      },
+      /* @__PURE__ */ import_react73.default.createElement(
+        "div",
+        {
+          className: `absolute -top-10 -right-10 w-48 h-48 bg-linear-to-bl ${getTierGlow(tier.tierName)} to-transparent opacity-40 blur-2xl rounded-full pointer-events-none`
+        }
+      ),
+      isThisCardLoading && /* @__PURE__ */ import_react73.default.createElement("div", { className: "absolute inset-0 z-50 flex items-center justify-center bg-white/40 backdrop-blur-[1px]" }, /* @__PURE__ */ import_react73.default.createElement(import_react74.HugeiconsIcon, { icon: import_core_free_icons25.Loading03Icon, size: 32, className: "animate-spin text-black" })),
+      /* @__PURE__ */ import_react73.default.createElement("div", { className: "mb-6 relative z-10" }, /* @__PURE__ */ import_react73.default.createElement("div", { className: "flex justify-between items-start mb-1" }, /* @__PURE__ */ import_react73.default.createElement("span", { className: "text-black text-sm tracking-widest " }, formatTierName(tier.tierName)), isCurrent && !hasPreordered && /* @__PURE__ */ import_react73.default.createElement("span", { className: "text-[9px] bg-neutral-100 text-neutral-600 px-2 py-1 rounded-full uppercase tracking-wider" }, "Current")), /* @__PURE__ */ import_react73.default.createElement("div", { className: "flex items-baseline gap-1 mt-2" }, /* @__PURE__ */ import_react73.default.createElement("h3", { className: "text-3xl font-light text-black" }, tier.priceUSD === 0 ? "Free" : `$${tier.priceUSD.toFixed(2)}`), tier.priceUSD > 0 && /* @__PURE__ */ import_react73.default.createElement("span", { className: "text-xs text-neutral-500" }, tier.isYearly ? "/ year" : "one-time")), /* @__PURE__ */ import_react73.default.createElement("p", { className: "text-[13px] text-neutral-500 mt-3 min-h-12 leading-relaxed" }, tier.description)),
+      /* @__PURE__ */ import_react73.default.createElement("div", { className: "flex flex-col gap-2.5 mb-6 relative z-10" }, /* @__PURE__ */ import_react73.default.createElement("div", { className: isPrimaryDisabled ? "opacity-50 pointer-events-none" : "" }, /* @__PURE__ */ import_react73.default.createElement(
+        ThreeDActionButton,
+        {
+          disabled: isPrimaryDisabled,
+          onClick: () => handleTierClick(tier, isCurrent ? "pre_order" : "upgrade"),
+          className: "w-full"
+        },
+        getPrimaryButtonText(tier)
+      )), /* @__PURE__ */ import_react73.default.createElement(
+        "button",
+        {
+          disabled: isWaitlistDisabled,
+          onClick: () => handleTierClick(tier, "join_waitlist"),
+          className: `w-full py-2.5 rounded-full text-xs tracking-wide transition-all outline-none border
+                                                ${isCurrent && (onWaitlist || hasPreordered) ? "bg-neutral-50 border-neutral-100 text-neutral-400 cursor-not-allowed" : "bg-white border-neutral-200 text-black hover:bg-neutral-50"}
+                                                disabled:opacity-40 disabled:cursor-not-allowed
+                                            `
+        },
+        getWaitlistButtonText(tier)
+      )),
+      /* @__PURE__ */ import_react73.default.createElement("div", { className: "flex flex-col gap-3 relative z-10" }, tier.features.map((feature, featureIdx) => {
+        const isAvailable = feature.value !== false;
+        const valueText = typeof feature.value === "string" ? feature.value : "";
+        return /* @__PURE__ */ import_react73.default.createElement("div", { key: featureIdx, className: "flex items-center gap-3" }, isAvailable ? /* @__PURE__ */ import_react73.default.createElement(CheckIcon2, null) : /* @__PURE__ */ import_react73.default.createElement(CrossIcon2, null), /* @__PURE__ */ import_react73.default.createElement("span", { className: `text-[12px] truncate ${isAvailable ? "text-neutral-800" : "text-neutral-400"}` }, feature.name, valueText && /* @__PURE__ */ import_react73.default.createElement("span", { className: "text-neutral-500 ml-1 " }, valueText)));
+      }))
+    );
+  }))), selectedTier && intendedAction !== "join_waitlist" && /* @__PURE__ */ import_react73.default.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react73.default.createElement("div", { className: "absolute inset-0 bg-black/40", onClick: () => !isProcessing && setSelectedTier(null) }), /* @__PURE__ */ import_react73.default.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react73.default.createElement(
+    "div",
+    {
+      className: `absolute -top-10 -right-10 w-40 h-40 bg-linear-to-bl ${getTierGlow(selectedTier.tierName)} to-transparent opacity-40 blur-2xl rounded-full pointer-events-none`
+    }
+  ), /* @__PURE__ */ import_react73.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 relative z-10" }, /* @__PURE__ */ import_react73.default.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Confirm Action"), /* @__PURE__ */ import_react73.default.createElement(
+    "button",
+    {
+      disabled: isProcessing,
+      onClick: () => setSelectedTier(null),
+      className: "text-neutral-400 hover:text-black transition-colors outline-none disabled:opacity-50"
+    },
+    /* @__PURE__ */ import_react73.default.createElement(import_react74.HugeiconsIcon, { icon: import_core_free_icons25.CancelCircleIcon, size: 18 })
+  )), /* @__PURE__ */ import_react73.default.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6 relative z-10" }, /* @__PURE__ */ import_react73.default.createElement("div", { className: "flex flex-col items-center justify-center mb-6" }, /* @__PURE__ */ import_react73.default.createElement("p", { className: "text-2xl text-black mb-1" }, selectedTier.priceUSD === 0 ? "Free" : `$${selectedTier.priceUSD.toFixed(2)}`), /* @__PURE__ */ import_react73.default.createElement("span", { className: `text-[10px] tracking-widest px-4 py-1.5 rounded-full bg-neutral-100 text-black mt-1` }, formatTierName(selectedTier.tierName), " ", formatTierName(cardType))), /* @__PURE__ */ import_react73.default.createElement("div", { className: "grid grid-cols-1 gap-y-6 mb-8 mt-4" }, /* @__PURE__ */ import_react73.default.createElement("div", null, /* @__PURE__ */ import_react73.default.createElement("span", { className: "text-[10px] tracking-[0.2em] text-neutral-400 block mb-1" }, "Action"), /* @__PURE__ */ import_react73.default.createElement("span", { className: "text-[13px] text-black " }, intendedAction === "upgrade" ? `Upgrade to ${formatTierName(selectedTier.tierName)}` : `Pre-order Card`)), intendedAction === "pre_order" && selectedTier.priceUSD > 0 && /* @__PURE__ */ import_react73.default.createElement("div", null, /* @__PURE__ */ import_react73.default.createElement("span", { className: "text-[10px] tracking-[0.2em] text-neutral-400 block mb-1" }, "Payment Notice"), /* @__PURE__ */ import_react73.default.createElement("span", { className: "text-[12px] text-neutral-600 leading-relaxed block" }, "By confirming, $", selectedTier.priceUSD.toFixed(2), " will be securely deducted from your USD asset balance to guarantee your order."))), /* @__PURE__ */ import_react73.default.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ import_react73.default.createElement(
+    ThreeDActionButton,
+    {
+      onClick: processAction,
+      isLoading: isProcessing,
+      className: "w-full"
+    },
+    "Confirm & Proceed"
+  ), /* @__PURE__ */ import_react73.default.createElement(
+    "button",
+    {
+      disabled: isProcessing,
+      onClick: () => setSelectedTier(null),
+      className: "w-full flex items-center justify-center py-2.5 rounded-full border border-neutral-200 text-black hover:bg-neutral-50 transition-colors outline-none text-[13px] mt-1 disabled:opacity-50"
+    },
+    "Cancel"
+  ))))), selectedTier && intendedAction === "join_waitlist" && /* @__PURE__ */ import_react73.default.createElement(
+    ConfirmationDialog,
+    {
+      isOpen: true,
+      title: "Join Waitlist",
+      message: `Are you sure you want to join the waitlist for the ${formatTierName(selectedTier.tierName)} ${formatTierName(cardType)} card? You will be notified via email when it becomes available.`,
+      confirmText: "Join Waitlist",
+      isDestructive: false,
+      isProcessing,
+      onClose: () => setSelectedTier(null),
+      onConfirm: processAction
+    }
+  ));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AppBento2,
@@ -4250,6 +4441,7 @@ var UniversalReferralPage = ({
   TextInput,
   ThreeDActionButton,
   ThreeDButton,
+  UniversalCardActionPage,
   UniversalCardPage,
   UniversalErrorView,
   UniversalHomeView,

package/dist/index.mjs CHANGED Viewed

@@ -1905,7 +1905,7 @@ var ConfirmationDialog = ({
     {
       onClick: onConfirm,
       disabled: isProcessing,
-      className: `flex-1 py-4 text-[13px] transition-colors disabled:opacity-50 flex justify-center items-center outline-none  ${isDestructive ? "text-red-500 hover:bg-red-50" : "text-black hover:bg-neutral-50"}`
+      className: `flex-1 py-4 text-[13px] transition-colors disabled:opacity-50 flex justify-center items-center outline-none  ${isDestructive ? "text-black hover:bg-red-50" : "text-black hover:bg-neutral-50"}`
     },
     isProcessing ? /* @__PURE__ */ React18.createElement(HugeiconsIcon12, { icon: Loading03Icon7, className: "animate-spin", size: 18 }) : confirmText
   ))));
@@ -4235,6 +4235,200 @@ var UniversalReferralPage = ({
     /* @__PURE__ */ React43.createElement(HugeiconsIcon29, { icon: ArrowRight01Icon8, size: 14 })
   )))))));
 };
+// src/components/UniversalCardActionPage.tsx
+import React44, { useState as useState29 } from "react";
+import Confetti2 from "react-confetti";
+import { useWindowSize as useWindowSize2 } from "react-use";
+import { HugeiconsIcon as HugeiconsIcon30 } from "@hugeicons/react";
+import {
+  ArrowLeft01Icon as ArrowLeft01Icon11,
+  CancelCircleIcon as CancelCircleIcon7,
+  Loading03Icon as Loading03Icon19
+} from "@hugeicons/core-free-icons";
+var CheckIcon2 = ({ className = "" }) => /* @__PURE__ */ React44.createElement("svg", { viewBox: "0 0 24 24", fill: "none", className: `w-4 h-4 shrink-0 ${className}`, xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React44.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "black" }), /* @__PURE__ */ React44.createElement("path", { d: "M8 12L11 15L16 9", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
+var CrossIcon2 = ({ className = "" }) => /* @__PURE__ */ React44.createElement("svg", { viewBox: "0 0 24 24", fill: "none", className: `w-4 h-4 shrink-0 ${className}`, xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React44.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "#F5F5F5" }), /* @__PURE__ */ React44.createElement("path", { d: "M15 9L9 15M9 9l6 6", stroke: "#D4D4D4", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
+var formatTierName = (name) => {
+  if (!name) return "";
+  return name.charAt(0).toUpperCase() + name.slice(1).toLowerCase();
+};
+var getTierGlow = (tier) => {
+  switch (tier.toUpperCase()) {
+    case "PLATINUM":
+      return "from-neutral-300";
+    case "PREMIUM":
+      return "from-purple-200";
+    case "GOLD":
+      return "from-yellow-200";
+    case "SILVER":
+      return "from-slate-300";
+    case "NEO":
+      return "from-cyan-200";
+    case "BASIC":
+      return "from-blue-200";
+    case "ONE":
+      return "from-emerald-200";
+    case "ZERO":
+      return "from-rose-200";
+    default:
+      return "from-neutral-200";
+  }
+};
+var UniversalCardActionPage = ({
+  cardType,
+  currentTier,
+  hasPreordered,
+  onWaitlist,
+  tiers,
+  isLoadingData,
+  onBack,
+  onConfirmAction
+}) => {
+  const onBackHandler = onBack ?? (() => {
+    if (typeof window !== "undefined") window.history.back();
+  });
+  const { width, height } = useWindowSize2();
+  const [selectedTier, setSelectedTier] = useState29(null);
+  const [intendedAction, setIntendedAction] = useState29(null);
+  const [isProcessing, setIsProcessing] = useState29(false);
+  const [showConfetti, setShowConfetti] = useState29(false);
+  const availableTiers = tiers.filter((t) => t.isAvailable || t.acceptPreorder || t.acceptWaitlist);
+  const handleTierClick = (tier, explicitAction) => {
+    setSelectedTier(tier);
+    setIntendedAction(explicitAction);
+  };
+  const processAction = async () => {
+    if (!selectedTier || !intendedAction) return;
+    setIsProcessing(true);
+    try {
+      const result = await onConfirmAction(selectedTier.tierName, intendedAction);
+      if (result.success) {
+        if (intendedAction === "pre_order") {
+          setShowConfetti(true);
+          setTimeout(() => setShowConfetti(false), 6e3);
+        }
+        setSelectedTier(null);
+        setIntendedAction(null);
+      }
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+  const getPrimaryButtonText = (tier) => {
+    const isCurrent = tier.tierName === currentTier;
+    if (isCurrent) {
+      if (hasPreordered) return "Secured (Pre-ordered)";
+      return "Pre-order Now";
+    }
+    if (hasPreordered) return "Unavailable";
+    return `Upgrade to ${formatTierName(tier.tierName)}`;
+  };
+  const getWaitlistButtonText = (tier) => {
+    const isCurrent = tier.tierName === currentTier;
+    if (isCurrent && (onWaitlist || hasPreordered)) return "Joined";
+    return "Join Waitlist";
+  };
+  return /* @__PURE__ */ React44.createElement("div", { className: "w-full" }, /* @__PURE__ */ React44.createElement(ManagedToaster, null), showConfetti && /* @__PURE__ */ React44.createElement("div", { className: "fixed inset-0 z-200 pointer-events-none" }, /* @__PURE__ */ React44.createElement(Confetti2, { width, height, recycle: false, numberOfPieces: 500, gravity: 0.15 })), /* @__PURE__ */ React44.createElement("div", { className: "mb-6 flex max-w-3xl w-full mx-auto items-center px-1" }, /* @__PURE__ */ React44.createElement(
+    "button",
+    {
+      onClick: onBackHandler,
+      className: "flex items-center gap-2 text-neutral-500 hover:text-black transition-colors text-[13px] outline-none"
+    },
+    /* @__PURE__ */ React44.createElement(HugeiconsIcon30, { icon: ArrowLeft01Icon11, size: 16 }),
+    " Back"
+  )), /* @__PURE__ */ React44.createElement("div", { className: "flex flex-col animate-in max-w-5xl w-full mx-auto fade-in duration-300" }, /* @__PURE__ */ React44.createElement("div", { className: "w-full flex flex-col items-center text-center mb-10 px-4" }, /* @__PURE__ */ React44.createElement("span", { className: "text-[10px] tracking-[0.4em] text-neutral-400 block uppercase mb-3" }, cardType, " CARD ACTIVATION"), /* @__PURE__ */ React44.createElement("h1", { className: "text-2xl sm:text-3xl text-black tracking-tight mb-2" }, "Select Your Tier"), /* @__PURE__ */ React44.createElement("p", { className: "text-xs text-neutral-500 max-w-lg" }, hasPreordered ? "You have already secured your card. Upgrades are disabled while your order is pending processing." : "Upgrade your tier or secure your card now. Pre-orders guarantee priority processing when the batch goes live.")), isLoadingData ? /* @__PURE__ */ React44.createElement("div", { className: "flex justify-center py-20" }, /* @__PURE__ */ React44.createElement(HugeiconsIcon30, { icon: Loading03Icon19, size: 32, className: "animate-spin text-neutral-300" })) : /* @__PURE__ */ React44.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-5 w-full max-w-4xl mx-auto px-4" }, availableTiers.map((tier) => {
+    const isCurrent = tier.tierName === currentTier;
+    const isCardDisabled = hasPreordered && !isCurrent;
+    const isHighlighted = hasPreordered && isCurrent;
+    const isThisCardLoading = isProcessing && selectedTier?.tierName === tier.tierName;
+    const isPrimaryDisabled = isCardDisabled || isHighlighted || isThisCardLoading || !tier.acceptPreorder;
+    const isWaitlistDisabled = !isCurrent || isCurrent && (onWaitlist || hasPreordered) || isThisCardLoading || !tier.acceptWaitlist;
+    return /* @__PURE__ */ React44.createElement(
+      "div",
+      {
+        key: tier.tierName,
+        className: `relative bg-white rounded-3xl p-6 flex flex-col overflow-hidden transition-all duration-300
+                                        ${isCardDisabled ? "opacity-50 grayscale-50 pointer-events-none" : ""}
+                                    `
+      },
+      /* @__PURE__ */ React44.createElement(
+        "div",
+        {
+          className: `absolute -top-10 -right-10 w-48 h-48 bg-linear-to-bl ${getTierGlow(tier.tierName)} to-transparent opacity-40 blur-2xl rounded-full pointer-events-none`
+        }
+      ),
+      isThisCardLoading && /* @__PURE__ */ React44.createElement("div", { className: "absolute inset-0 z-50 flex items-center justify-center bg-white/40 backdrop-blur-[1px]" }, /* @__PURE__ */ React44.createElement(HugeiconsIcon30, { icon: Loading03Icon19, size: 32, className: "animate-spin text-black" })),
+      /* @__PURE__ */ React44.createElement("div", { className: "mb-6 relative z-10" }, /* @__PURE__ */ React44.createElement("div", { className: "flex justify-between items-start mb-1" }, /* @__PURE__ */ React44.createElement("span", { className: "text-black text-sm tracking-widest " }, formatTierName(tier.tierName)), isCurrent && !hasPreordered && /* @__PURE__ */ React44.createElement("span", { className: "text-[9px] bg-neutral-100 text-neutral-600 px-2 py-1 rounded-full uppercase tracking-wider" }, "Current")), /* @__PURE__ */ React44.createElement("div", { className: "flex items-baseline gap-1 mt-2" }, /* @__PURE__ */ React44.createElement("h3", { className: "text-3xl font-light text-black" }, tier.priceUSD === 0 ? "Free" : `$${tier.priceUSD.toFixed(2)}`), tier.priceUSD > 0 && /* @__PURE__ */ React44.createElement("span", { className: "text-xs text-neutral-500" }, tier.isYearly ? "/ year" : "one-time")), /* @__PURE__ */ React44.createElement("p", { className: "text-[13px] text-neutral-500 mt-3 min-h-12 leading-relaxed" }, tier.description)),
+      /* @__PURE__ */ React44.createElement("div", { className: "flex flex-col gap-2.5 mb-6 relative z-10" }, /* @__PURE__ */ React44.createElement("div", { className: isPrimaryDisabled ? "opacity-50 pointer-events-none" : "" }, /* @__PURE__ */ React44.createElement(
+        ThreeDActionButton,
+        {
+          disabled: isPrimaryDisabled,
+          onClick: () => handleTierClick(tier, isCurrent ? "pre_order" : "upgrade"),
+          className: "w-full"
+        },
+        getPrimaryButtonText(tier)
+      )), /* @__PURE__ */ React44.createElement(
+        "button",
+        {
+          disabled: isWaitlistDisabled,
+          onClick: () => handleTierClick(tier, "join_waitlist"),
+          className: `w-full py-2.5 rounded-full text-xs tracking-wide transition-all outline-none border
+                                                ${isCurrent && (onWaitlist || hasPreordered) ? "bg-neutral-50 border-neutral-100 text-neutral-400 cursor-not-allowed" : "bg-white border-neutral-200 text-black hover:bg-neutral-50"}
+                                                disabled:opacity-40 disabled:cursor-not-allowed
+                                            `
+        },
+        getWaitlistButtonText(tier)
+      )),
+      /* @__PURE__ */ React44.createElement("div", { className: "flex flex-col gap-3 relative z-10" }, tier.features.map((feature, featureIdx) => {
+        const isAvailable = feature.value !== false;
+        const valueText = typeof feature.value === "string" ? feature.value : "";
+        return /* @__PURE__ */ React44.createElement("div", { key: featureIdx, className: "flex items-center gap-3" }, isAvailable ? /* @__PURE__ */ React44.createElement(CheckIcon2, null) : /* @__PURE__ */ React44.createElement(CrossIcon2, null), /* @__PURE__ */ React44.createElement("span", { className: `text-[12px] truncate ${isAvailable ? "text-neutral-800" : "text-neutral-400"}` }, feature.name, valueText && /* @__PURE__ */ React44.createElement("span", { className: "text-neutral-500 ml-1 " }, valueText)));
+      }))
+    );
+  }))), selectedTier && intendedAction !== "join_waitlist" && /* @__PURE__ */ React44.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React44.createElement("div", { className: "absolute inset-0 bg-black/40", onClick: () => !isProcessing && setSelectedTier(null) }), /* @__PURE__ */ React44.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React44.createElement(
+    "div",
+    {
+      className: `absolute -top-10 -right-10 w-40 h-40 bg-linear-to-bl ${getTierGlow(selectedTier.tierName)} to-transparent opacity-40 blur-2xl rounded-full pointer-events-none`
+    }
+  ), /* @__PURE__ */ React44.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 relative z-10" }, /* @__PURE__ */ React44.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Confirm Action"), /* @__PURE__ */ React44.createElement(
+    "button",
+    {
+      disabled: isProcessing,
+      onClick: () => setSelectedTier(null),
+      className: "text-neutral-400 hover:text-black transition-colors outline-none disabled:opacity-50"
+    },
+    /* @__PURE__ */ React44.createElement(HugeiconsIcon30, { icon: CancelCircleIcon7, size: 18 })
+  )), /* @__PURE__ */ React44.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6 relative z-10" }, /* @__PURE__ */ React44.createElement("div", { className: "flex flex-col items-center justify-center mb-6" }, /* @__PURE__ */ React44.createElement("p", { className: "text-2xl text-black mb-1" }, selectedTier.priceUSD === 0 ? "Free" : `$${selectedTier.priceUSD.toFixed(2)}`), /* @__PURE__ */ React44.createElement("span", { className: `text-[10px] tracking-widest px-4 py-1.5 rounded-full bg-neutral-100 text-black mt-1` }, formatTierName(selectedTier.tierName), " ", formatTierName(cardType))), /* @__PURE__ */ React44.createElement("div", { className: "grid grid-cols-1 gap-y-6 mb-8 mt-4" }, /* @__PURE__ */ React44.createElement("div", null, /* @__PURE__ */ React44.createElement("span", { className: "text-[10px] tracking-[0.2em] text-neutral-400 block mb-1" }, "Action"), /* @__PURE__ */ React44.createElement("span", { className: "text-[13px] text-black " }, intendedAction === "upgrade" ? `Upgrade to ${formatTierName(selectedTier.tierName)}` : `Pre-order Card`)), intendedAction === "pre_order" && selectedTier.priceUSD > 0 && /* @__PURE__ */ React44.createElement("div", null, /* @__PURE__ */ React44.createElement("span", { className: "text-[10px] tracking-[0.2em] text-neutral-400 block mb-1" }, "Payment Notice"), /* @__PURE__ */ React44.createElement("span", { className: "text-[12px] text-neutral-600 leading-relaxed block" }, "By confirming, $", selectedTier.priceUSD.toFixed(2), " will be securely deducted from your USD asset balance to guarantee your order."))), /* @__PURE__ */ React44.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React44.createElement(
+    ThreeDActionButton,
+    {
+      onClick: processAction,
+      isLoading: isProcessing,
+      className: "w-full"
+    },
+    "Confirm & Proceed"
+  ), /* @__PURE__ */ React44.createElement(
+    "button",
+    {
+      disabled: isProcessing,
+      onClick: () => setSelectedTier(null),
+      className: "w-full flex items-center justify-center py-2.5 rounded-full border border-neutral-200 text-black hover:bg-neutral-50 transition-colors outline-none text-[13px] mt-1 disabled:opacity-50"
+    },
+    "Cancel"
+  ))))), selectedTier && intendedAction === "join_waitlist" && /* @__PURE__ */ React44.createElement(
+    ConfirmationDialog,
+    {
+      isOpen: true,
+      title: "Join Waitlist",
+      message: `Are you sure you want to join the waitlist for the ${formatTierName(selectedTier.tierName)} ${formatTierName(cardType)} card? You will be notified via email when it becomes available.`,
+      confirmText: "Join Waitlist",
+      isDestructive: false,
+      isProcessing,
+      onClose: () => setSelectedTier(null),
+      onConfirm: processAction
+    }
+  ));
+};
 export {
   AppBento2,
   ConsultantShowcase,
@@ -4263,6 +4457,7 @@ export {
   TextInput,
   ThreeDActionButton,
   ThreeDButton,
+  UniversalCardActionPage,
   UniversalCardPage,
   UniversalErrorView,
   UniversalHomeView,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@retinalabsllc/zairusjs",
-  "version": "14.0.15",
+  "version": "14.0.20",
   "description": "A perceptive, Ai data driven Next.js UI component library.",
   "author": "Retina Labs Company",
   "license": "MIT",
@@ -52,6 +52,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.0.0",
+    "@types/canvas-confetti": "^1.9.0",
     "@types/node": "^20.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",