@windrun-huaiin/third-ui 31.3.7 → 31.4.0

package/dist/main/credit/credit-nav-button.d.ts

@@ -1,12 +1,13 @@
 import type { MoneyPriceData } from '../money-price/money-price-types';
-import type { CreditPricingContext, PricingModalMode } from './types';
+import type { CreditPricingContext, MobileBillingSwitchBehavior, PricingModalMode } from './types';
 interface CreditNavButtonProps {
     locale: string;
     totalBalance: number;
     totalLabel: string;
+    mobileBillingSwitchBehavior?: MobileBillingSwitchBehavior;
     children: React.ReactNode;
 }
-export declare function CreditNavButton({ locale, totalBalance, totalLabel, children, }: CreditNavButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function CreditNavButton({ locale, totalBalance, totalLabel, mobileBillingSwitchBehavior, children, }: CreditNavButtonProps): import("react/jsx-runtime").JSX.Element;
 interface CreditNavPopoverContextValue {
     close: () => void;
     isMobile: boolean;

package/dist/main/credit/credit-nav-button.js

@@ -4,20 +4,18 @@
 var jsxRuntime = require('react/jsx-runtime');
 var utils = require('@windrun-huaiin/lib/utils');
 var icons = require('@windrun-huaiin/base-ui/icons');
-var lib = require('@windrun-huaiin/base-ui/lib');
 var ui = require('@windrun-huaiin/base-ui/ui');
 var React = require('react');
-var moneyPriceInteractive = require('../money-price/money-price-interactive.js');
 var moneyPriceConfigUtil = require('../money-price/money-price-config-util.js');
-var dialogStyles = require('../alert-dialog/dialog-styles.js');
+var pricingModal = require('../money-price/pricing-modal.js');
 
-function CreditNavButton({ locale, totalBalance, totalLabel, children, }) {
+function CreditNavButton({ locale, totalBalance, totalLabel, mobileBillingSwitchBehavior, children, }) {
     const [open, setOpen] = React.useState(false);
     const [isMobile, setIsMobile] = React.useState(false);
     const triggerRef = React.useRef(null);
     const contentRef = React.useRef(null);
     const closeMenu = React.useCallback(() => setOpen(false), []);
-    const [pricingModal, setPricingModal] = React.useState({
+    const [pricingModal$1, setPricingModal] = React.useState({
         open: false,
         mode: 'subscription',
     });
@@ -108,13 +106,13 @@ function CreditNavButton({ locale, totalBalance, totalLabel, children, }) {
         openPricingModal,
         closePricingModal,
     }), [closeMenu, isMobile, openPricingModal, closePricingModal]);
-    const isOnetimeModal = pricingModal.mode === 'onetime';
+    const isOnetimeModal = pricingModal$1.mode === 'onetime';
     const modalInitialBillingType = React.useMemo(() => {
         var _a, _b;
         if (isOnetimeModal) {
             return 'onetime';
         }
-        const pricingContext = pricingModal.pricingContext;
+        const pricingContext = pricingModal$1.pricingContext;
         const priceId = (_b = (_a = pricingContext === null || pricingContext === void 0 ? void 0 : pricingContext.initUserContext) === null || _a === void 0 ? void 0 : _a.xSubscription) === null || _b === void 0 ? void 0 : _b.priceId;
         if (!pricingContext || !priceId) {
             return undefined;
@@ -129,8 +127,8 @@ function CreditNavButton({ locale, totalBalance, totalLabel, children, }) {
             }
         }
         return undefined;
-    }, [isOnetimeModal, pricingModal.pricingContext]);
-    return (jsxRuntime.jsxs(CreditNavPopoverContext.Provider, { value: contextValue, children: [jsxRuntime.jsxs(ui.DropdownMenu, { modal: false, open: open, onOpenChange: setOpen, children: [jsxRuntime.jsx(ui.DropdownMenuTrigger, { asChild: true, children: jsxRuntime.jsxs("button", { type: "button", "aria-label": `${formattedBalance} ${totalLabel}`, className: utils.cn('group relative mx-2 sm:mx-1 inline-flex items-center gap-2 overflow-hidden rounded-full border border-slate-200 bg-white pl-2 pr-4 py-1.5 text-sm font-semibold text-slate-700 shadow-sm transition-all duration-200 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100', 'hover:-translate-y-0.5 hover:scale-[1.02] hover:border-transparent hover:text-white hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-slate-400 dark:focus-visible:ring-slate-500'), ref: triggerRef, children: [jsxRuntime.jsx("span", { className: "pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-visible:opacity-100 bg-linear-to-bl from-indigo-200/60 via-indigo-400/90 to-purple-200/50 dark:from-indigo-300/20 dark:via-slate-400 dark:to-slate-500/50", "aria-hidden": "true" }), jsxRuntime.jsx("span", { className: "relative z-10 flex h-6 w-6 items-center justify-center rounded-full bg-slate-100 text-slate-600 transition-transform duration-200 group-hover:scale-110 group-hover:bg-white/20 group-hover:text-white dark:bg-slate-800 dark:text-slate-200 dark:group-hover:bg-white/20 dark:group-hover:text-white", children: jsxRuntime.jsx(icons.GemIcon, { className: "h-3.5 w-3.5" }) }), jsxRuntime.jsxs("span", { className: "relative z-10 flex items-center", children: [jsxRuntime.jsx("span", { className: "text-base font-semibold leading-none", children: formattedBalance }), jsxRuntime.jsx("span", { className: "sr-only", children: ` ${totalLabel}` })] })] }) }), jsxRuntime.jsx(ui.DropdownMenuContent, { forceMount: true, sideOffset: 12, align: "end", className: "z-50 border-0 bg-transparent p-0 shadow-none mx-4 sm:mx-2 md:mx-1", children: jsxRuntime.jsx("div", { className: "w-[90vw] max-w-[90vw] max-h-[80vh] overflow-y-auto overflow-x-hidden rounded-3xl bg-transparent sm:w-[410px] sm:max-h-[90vh] sm:max-w-[95vw]", ref: contentRef, children: children }) })] }), pricingModal.modalMoneyPriceData && pricingModal.pricingContext ? (jsxRuntime.jsx(ui.AlertDialog, { open: pricingModal.open, onOpenChange: (open) => setPricingModal((prev) => (Object.assign(Object.assign({}, prev), { open }))), children: jsxRuntime.jsxs(ui.AlertDialogContent, { className: utils.cn('mt-5 sm:mt-6 md:mt-10 lg:mt-15 w-[95vw] max-w-[1200px] overflow-hidden border border-slate-200 p-0 shadow-[0_32px_90px_rgba(15,23,42,0.25)] ring-1 ring-black/5 dark:border-white/12 dark:shadow-[0_40px_120px_rgba(0,0,0,0.6)] dark:ring-white/10', lib.themeMainBgColor), overlayClassName: dialogStyles.dialogThemedOverlayClass, children: [jsxRuntime.jsxs(ui.AlertDialogHeader, { className: "flex flex-row items-center justify-between border-b border-slate-200 px-6 pt-4 pb-1 dark:border-slate-800", children: [jsxRuntime.jsx(ui.AlertDialogTitle, { asChild: true, children: jsxRuntime.jsxs("div", { className: "flex flex-wrap items-baseline gap-3 text-slate-900 dark:text-white", children: [jsxRuntime.jsx("span", { className: "text-2xl font-semibold leading-tight", children: pricingModal.modalMoneyPriceData.title }), pricingModal.modalMoneyPriceData.subtitle ? (jsxRuntime.jsx("span", { className: "text-sm font-medium text-slate-500 dark:text-slate-300", children: pricingModal.modalMoneyPriceData.subtitle })) : null] }) }), jsxRuntime.jsx("button", { type: "button", className: "rounded-full p-2 text-gray-400 transition hover:bg-gray-400 hover:text-gray-400 dark:text-white/80 dark:hover:bg-white/80 dark:hover:text-white/80", onClick: closePricingModal, children: jsxRuntime.jsx(icons.XIcon, { className: "h-6 w-6" }) })] }), jsxRuntime.jsx("div", { className: "max-h-[60vh] sm:max-h-[80vh] overflow-y-auto px-4 pt-2 pb-6", children: jsxRuntime.jsx("div", { className: "mx-auto w-full", children: jsxRuntime.jsx(moneyPriceInteractive.MoneyPriceInteractive, { data: pricingModal.modalMoneyPriceData, config: pricingModal.pricingContext.moneyPriceConfig, checkoutApiEndpoint: pricingModal.pricingContext.checkoutApiEndpoint, customerPortalApiEndpoint: pricingModal.pricingContext.customerPortalApiEndpoint, enableSubscriptionUpgrade: pricingModal.pricingContext.enableSubscriptionUpgrade, initialBillingType: modalInitialBillingType, disableAutoDetectBilling: isOnetimeModal, initUserContext: pricingModal.pricingContext.initUserContext }, pricingModal.mode) }) })] }) })) : null] }));
+    }, [isOnetimeModal, pricingModal$1.pricingContext]);
+    return (jsxRuntime.jsxs(CreditNavPopoverContext.Provider, { value: contextValue, children: [jsxRuntime.jsxs(ui.DropdownMenu, { modal: false, open: open, onOpenChange: setOpen, children: [jsxRuntime.jsx(ui.DropdownMenuTrigger, { asChild: true, children: jsxRuntime.jsxs("button", { type: "button", "aria-label": `${formattedBalance} ${totalLabel}`, className: utils.cn('group relative mx-2 sm:mx-1 inline-flex items-center gap-2 overflow-hidden rounded-full border border-slate-200 bg-white pl-2 pr-4 py-1.5 text-sm font-semibold text-slate-700 shadow-sm transition-all duration-200 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100', 'hover:-translate-y-0.5 hover:scale-[1.02] hover:border-transparent hover:text-white hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-slate-400 dark:focus-visible:ring-slate-500'), ref: triggerRef, children: [jsxRuntime.jsx("span", { className: "pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-visible:opacity-100 bg-linear-to-bl from-indigo-200/60 via-indigo-400/90 to-purple-200/50 dark:from-indigo-300/20 dark:via-slate-400 dark:to-slate-500/50", "aria-hidden": "true" }), jsxRuntime.jsx("span", { className: "relative z-10 flex h-6 w-6 items-center justify-center rounded-full bg-slate-100 text-slate-600 transition-transform duration-200 group-hover:scale-110 group-hover:bg-white/20 group-hover:text-white dark:bg-slate-800 dark:text-slate-200 dark:group-hover:bg-white/20 dark:group-hover:text-white", children: jsxRuntime.jsx(icons.GemIcon, { className: "h-3.5 w-3.5" }) }), jsxRuntime.jsxs("span", { className: "relative z-10 flex items-center", children: [jsxRuntime.jsx("span", { className: "text-base font-semibold leading-none", children: formattedBalance }), jsxRuntime.jsx("span", { className: "sr-only", children: ` ${totalLabel}` })] })] }) }), jsxRuntime.jsx(ui.DropdownMenuContent, { forceMount: true, sideOffset: 12, align: "end", className: "z-50 border-0 bg-transparent p-0 shadow-none mx-4 sm:mx-2 md:mx-1", children: jsxRuntime.jsx("div", { className: "w-[90vw] max-w-[90vw] max-h-[80vh] overflow-y-auto overflow-x-hidden rounded-3xl bg-transparent sm:w-[410px] sm:max-h-[90vh] sm:max-w-[95vw]", ref: contentRef, children: children }) })] }), pricingModal$1.modalMoneyPriceData && pricingModal$1.pricingContext ? (jsxRuntime.jsx(pricingModal.PricingModal, { open: pricingModal$1.open, onOpenChange: (open) => setPricingModal((prev) => (Object.assign(Object.assign({}, prev), { open }))), data: pricingModal$1.modalMoneyPriceData, config: pricingModal$1.pricingContext.moneyPriceConfig, checkoutApiEndpoint: pricingModal$1.pricingContext.checkoutApiEndpoint, customerPortalApiEndpoint: pricingModal$1.pricingContext.customerPortalApiEndpoint, mobileBillingSwitchBehavior: mobileBillingSwitchBehavior, enableSubscriptionUpgrade: pricingModal$1.pricingContext.enableSubscriptionUpgrade, billingType: modalInitialBillingType, initUserContext: pricingModal$1.pricingContext.initUserContext })) : null] }));
 }
 const CreditNavPopoverContext = React.createContext(null);
 function useCreditNavPopover() {

package/dist/main/credit/credit-nav-button.mjs

@@ -1,15 +1,13 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { cn } from '@windrun-huaiin/lib/utils';
-import { GemIcon, XIcon } from '@windrun-huaiin/base-ui/icons';
-import { themeMainBgColor } from '@windrun-huaiin/base-ui/lib';
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle } from '@windrun-huaiin/base-ui/ui';
+import { GemIcon } from '@windrun-huaiin/base-ui/icons';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent } from '@windrun-huaiin/base-ui/ui';
 import { createContext, useState, useRef, useCallback, useMemo, useEffect, useContext } from 'react';
-import { MoneyPriceInteractive } from '../money-price/money-price-interactive.mjs';
 import { getActiveProviderConfigUtil } from '../money-price/money-price-config-util.mjs';
-import { dialogThemedOverlayClass } from '../alert-dialog/dialog-styles.mjs';
+import { PricingModal } from '../money-price/pricing-modal.mjs';
 
-function CreditNavButton({ locale, totalBalance, totalLabel, children, }) {
+function CreditNavButton({ locale, totalBalance, totalLabel, mobileBillingSwitchBehavior, children, }) {
     const [open, setOpen] = useState(false);
     const [isMobile, setIsMobile] = useState(false);
     const triggerRef = useRef(null);
@@ -128,7 +126,7 @@ function CreditNavButton({ locale, totalBalance, totalLabel, children, }) {
         }
         return undefined;
     }, [isOnetimeModal, pricingModal.pricingContext]);
-    return (jsxs(CreditNavPopoverContext.Provider, { value: contextValue, children: [jsxs(DropdownMenu, { modal: false, open: open, onOpenChange: setOpen, children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsxs("button", { type: "button", "aria-label": `${formattedBalance} ${totalLabel}`, className: cn('group relative mx-2 sm:mx-1 inline-flex items-center gap-2 overflow-hidden rounded-full border border-slate-200 bg-white pl-2 pr-4 py-1.5 text-sm font-semibold text-slate-700 shadow-sm transition-all duration-200 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100', 'hover:-translate-y-0.5 hover:scale-[1.02] hover:border-transparent hover:text-white hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-slate-400 dark:focus-visible:ring-slate-500'), ref: triggerRef, children: [jsx("span", { className: "pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-visible:opacity-100 bg-linear-to-bl from-indigo-200/60 via-indigo-400/90 to-purple-200/50 dark:from-indigo-300/20 dark:via-slate-400 dark:to-slate-500/50", "aria-hidden": "true" }), jsx("span", { className: "relative z-10 flex h-6 w-6 items-center justify-center rounded-full bg-slate-100 text-slate-600 transition-transform duration-200 group-hover:scale-110 group-hover:bg-white/20 group-hover:text-white dark:bg-slate-800 dark:text-slate-200 dark:group-hover:bg-white/20 dark:group-hover:text-white", children: jsx(GemIcon, { className: "h-3.5 w-3.5" }) }), jsxs("span", { className: "relative z-10 flex items-center", children: [jsx("span", { className: "text-base font-semibold leading-none", children: formattedBalance }), jsx("span", { className: "sr-only", children: ` ${totalLabel}` })] })] }) }), jsx(DropdownMenuContent, { forceMount: true, sideOffset: 12, align: "end", className: "z-50 border-0 bg-transparent p-0 shadow-none mx-4 sm:mx-2 md:mx-1", children: jsx("div", { className: "w-[90vw] max-w-[90vw] max-h-[80vh] overflow-y-auto overflow-x-hidden rounded-3xl bg-transparent sm:w-[410px] sm:max-h-[90vh] sm:max-w-[95vw]", ref: contentRef, children: children }) })] }), pricingModal.modalMoneyPriceData && pricingModal.pricingContext ? (jsx(AlertDialog, { open: pricingModal.open, onOpenChange: (open) => setPricingModal((prev) => (Object.assign(Object.assign({}, prev), { open }))), children: jsxs(AlertDialogContent, { className: cn('mt-5 sm:mt-6 md:mt-10 lg:mt-15 w-[95vw] max-w-[1200px] overflow-hidden border border-slate-200 p-0 shadow-[0_32px_90px_rgba(15,23,42,0.25)] ring-1 ring-black/5 dark:border-white/12 dark:shadow-[0_40px_120px_rgba(0,0,0,0.6)] dark:ring-white/10', themeMainBgColor), overlayClassName: dialogThemedOverlayClass, children: [jsxs(AlertDialogHeader, { className: "flex flex-row items-center justify-between border-b border-slate-200 px-6 pt-4 pb-1 dark:border-slate-800", children: [jsx(AlertDialogTitle, { asChild: true, children: jsxs("div", { className: "flex flex-wrap items-baseline gap-3 text-slate-900 dark:text-white", children: [jsx("span", { className: "text-2xl font-semibold leading-tight", children: pricingModal.modalMoneyPriceData.title }), pricingModal.modalMoneyPriceData.subtitle ? (jsx("span", { className: "text-sm font-medium text-slate-500 dark:text-slate-300", children: pricingModal.modalMoneyPriceData.subtitle })) : null] }) }), jsx("button", { type: "button", className: "rounded-full p-2 text-gray-400 transition hover:bg-gray-400 hover:text-gray-400 dark:text-white/80 dark:hover:bg-white/80 dark:hover:text-white/80", onClick: closePricingModal, children: jsx(XIcon, { className: "h-6 w-6" }) })] }), jsx("div", { className: "max-h-[60vh] sm:max-h-[80vh] overflow-y-auto px-4 pt-2 pb-6", children: jsx("div", { className: "mx-auto w-full", children: jsx(MoneyPriceInteractive, { data: pricingModal.modalMoneyPriceData, config: pricingModal.pricingContext.moneyPriceConfig, checkoutApiEndpoint: pricingModal.pricingContext.checkoutApiEndpoint, customerPortalApiEndpoint: pricingModal.pricingContext.customerPortalApiEndpoint, enableSubscriptionUpgrade: pricingModal.pricingContext.enableSubscriptionUpgrade, initialBillingType: modalInitialBillingType, disableAutoDetectBilling: isOnetimeModal, initUserContext: pricingModal.pricingContext.initUserContext }, pricingModal.mode) }) })] }) })) : null] }));
+    return (jsxs(CreditNavPopoverContext.Provider, { value: contextValue, children: [jsxs(DropdownMenu, { modal: false, open: open, onOpenChange: setOpen, children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsxs("button", { type: "button", "aria-label": `${formattedBalance} ${totalLabel}`, className: cn('group relative mx-2 sm:mx-1 inline-flex items-center gap-2 overflow-hidden rounded-full border border-slate-200 bg-white pl-2 pr-4 py-1.5 text-sm font-semibold text-slate-700 shadow-sm transition-all duration-200 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100', 'hover:-translate-y-0.5 hover:scale-[1.02] hover:border-transparent hover:text-white hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-slate-400 dark:focus-visible:ring-slate-500'), ref: triggerRef, children: [jsx("span", { className: "pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-visible:opacity-100 bg-linear-to-bl from-indigo-200/60 via-indigo-400/90 to-purple-200/50 dark:from-indigo-300/20 dark:via-slate-400 dark:to-slate-500/50", "aria-hidden": "true" }), jsx("span", { className: "relative z-10 flex h-6 w-6 items-center justify-center rounded-full bg-slate-100 text-slate-600 transition-transform duration-200 group-hover:scale-110 group-hover:bg-white/20 group-hover:text-white dark:bg-slate-800 dark:text-slate-200 dark:group-hover:bg-white/20 dark:group-hover:text-white", children: jsx(GemIcon, { className: "h-3.5 w-3.5" }) }), jsxs("span", { className: "relative z-10 flex items-center", children: [jsx("span", { className: "text-base font-semibold leading-none", children: formattedBalance }), jsx("span", { className: "sr-only", children: ` ${totalLabel}` })] })] }) }), jsx(DropdownMenuContent, { forceMount: true, sideOffset: 12, align: "end", className: "z-50 border-0 bg-transparent p-0 shadow-none mx-4 sm:mx-2 md:mx-1", children: jsx("div", { className: "w-[90vw] max-w-[90vw] max-h-[80vh] overflow-y-auto overflow-x-hidden rounded-3xl bg-transparent sm:w-[410px] sm:max-h-[90vh] sm:max-w-[95vw]", ref: contentRef, children: children }) })] }), pricingModal.modalMoneyPriceData && pricingModal.pricingContext ? (jsx(PricingModal, { open: pricingModal.open, onOpenChange: (open) => setPricingModal((prev) => (Object.assign(Object.assign({}, prev), { open }))), data: pricingModal.modalMoneyPriceData, config: pricingModal.pricingContext.moneyPriceConfig, checkoutApiEndpoint: pricingModal.pricingContext.checkoutApiEndpoint, customerPortalApiEndpoint: pricingModal.pricingContext.customerPortalApiEndpoint, mobileBillingSwitchBehavior: mobileBillingSwitchBehavior, enableSubscriptionUpgrade: pricingModal.pricingContext.enableSubscriptionUpgrade, billingType: modalInitialBillingType, initUserContext: pricingModal.pricingContext.initUserContext })) : null] }));
 }
 const CreditNavPopoverContext = createContext(null);
 function useCreditNavPopover() {

package/dist/main/credit/credit-overview-nav-client.d.ts

@@ -1,5 +1,5 @@
 import { type CreditOverviewTranslations } from './credit-overview-client';
-import type { CreditOverviewData } from './types';
+import type { CreditOverviewData, MobileBillingSwitchBehavior } from './types';
 export declare const DEFAULT_CREDIT_OVERVIEW_REFRESH_EVENT = "windrun-huaiin:credit-overview:refresh";
 export interface CreditOverviewPayload {
     data: CreditOverviewData;
@@ -14,6 +14,11 @@ export interface CreditOverviewNavClientProps {
      * Defaults are handled by the API/payload builder when omitted.
      */
     enabledBillingTypes?: string[];
+    /**
+     * Mobile behavior for the pricing modal billing switch.
+     * Default: 'sticky'.
+     */
+    mobileBillingSwitchBehavior?: MobileBillingSwitchBehavior;
     /**
      * Browser event names that should trigger credit overview reload.
      * Business apps can dispatch these events after credit balance changes.
@@ -29,4 +34,4 @@ export interface CreditOverviewNavClientProps {
     refreshDebounceMs?: number;
 }
 export declare function dispatchCreditOverviewRefresh(eventName?: string): void;
-export declare function CreditOverviewNavClient({ locale, endpoint, enabledBillingTypes, refreshEvents, refreshDebounceMs, }: CreditOverviewNavClientProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function CreditOverviewNavClient({ locale, endpoint, enabledBillingTypes, mobileBillingSwitchBehavior, refreshEvents, refreshDebounceMs, }: CreditOverviewNavClientProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/main/credit/credit-overview-nav-client.js

@@ -43,7 +43,7 @@ function dispatchCreditOverviewRefresh(eventName = DEFAULT_CREDIT_OVERVIEW_REFRE
     }
     window.dispatchEvent(new CustomEvent(eventName));
 }
-function CreditOverviewNavClient({ locale, endpoint, enabledBillingTypes, refreshEvents, refreshDebounceMs = 300, }) {
+function CreditOverviewNavClient({ locale, endpoint, enabledBillingTypes, mobileBillingSwitchBehavior, refreshEvents, refreshDebounceMs = 300, }) {
     const { isLoaded, isSignedIn, userId } = nextjs.useAuth();
     const [payload, setPayload] = React.useState(null);
     const abortControllerRef = React.useRef(null);
@@ -135,7 +135,7 @@ function CreditOverviewNavClient({ locale, endpoint, enabledBillingTypes, refres
     if (!payload) {
         return null;
     }
-    return (jsxRuntime.jsx(creditNavButton.CreditNavButton, { locale: locale, totalBalance: payload.data.totalBalance, totalLabel: payload.totalLabel, children: jsxRuntime.jsx(creditOverviewClient.CreditOverviewClient, { locale: locale, data: payload.data, translations: payload.translations }) }));
+    return (jsxRuntime.jsx(creditNavButton.CreditNavButton, { locale: locale, totalBalance: payload.data.totalBalance, totalLabel: payload.totalLabel, mobileBillingSwitchBehavior: mobileBillingSwitchBehavior, children: jsxRuntime.jsx(creditOverviewClient.CreditOverviewClient, { locale: locale, data: payload.data, translations: payload.translations }) }));
 }
 
 exports.CreditOverviewNavClient = CreditOverviewNavClient;

package/dist/main/credit/credit-overview-nav-client.mjs

@@ -41,7 +41,7 @@ function dispatchCreditOverviewRefresh(eventName = DEFAULT_CREDIT_OVERVIEW_REFRE
     }
     window.dispatchEvent(new CustomEvent(eventName));
 }
-function CreditOverviewNavClient({ locale, endpoint, enabledBillingTypes, refreshEvents, refreshDebounceMs = 300, }) {
+function CreditOverviewNavClient({ locale, endpoint, enabledBillingTypes, mobileBillingSwitchBehavior, refreshEvents, refreshDebounceMs = 300, }) {
     const { isLoaded, isSignedIn, userId } = useAuth();
     const [payload, setPayload] = useState(null);
     const abortControllerRef = useRef(null);
@@ -133,7 +133,7 @@ function CreditOverviewNavClient({ locale, endpoint, enabledBillingTypes, refres
     if (!payload) {
         return null;
     }
-    return (jsx(CreditNavButton, { locale: locale, totalBalance: payload.data.totalBalance, totalLabel: payload.totalLabel, children: jsx(CreditOverviewClient, { locale: locale, data: payload.data, translations: payload.translations }) }));
+    return (jsx(CreditNavButton, { locale: locale, totalBalance: payload.data.totalBalance, totalLabel: payload.totalLabel, mobileBillingSwitchBehavior: mobileBillingSwitchBehavior, children: jsx(CreditOverviewClient, { locale: locale, data: payload.data, translations: payload.translations }) }));
 }
 
 export { CreditOverviewNavClient, DEFAULT_CREDIT_OVERVIEW_REFRESH_EVENT, dispatchCreditOverviewRefresh };

package/dist/main/credit/index.d.ts

@@ -3,4 +3,4 @@ export { CreditOverviewNavClient, DEFAULT_CREDIT_OVERVIEW_REFRESH_EVENT, dispatc
 export { CreditNavButton } from './credit-nav-button';
 export type { CreditOverviewTranslations } from './credit-overview-client';
 export type { CreditOverviewNavClientProps, CreditOverviewPayload, } from './credit-overview-nav-client';
-export type { CreditOverviewData, CreditBucket, CreditBucketStatus, SubscriptionInfo, } from './types';
+export type { CreditOverviewData, CreditBucket, CreditBucketStatus, MobileBillingSwitchBehavior, SubscriptionInfo, } from './types';

package/dist/main/credit/types.d.ts

@@ -1,5 +1,6 @@
 import type { InitUserContext, MoneyPriceConfig, MoneyPriceData } from '../money-price/money-price-types';
 export type PricingModalMode = 'subscription' | 'onetime';
+export type MobileBillingSwitchBehavior = 'sticky' | 'static';
 export type CreditActionConfig = CreditModalAction | CreditRedirectAction | CreditAuthAction | CreditCustomAction;
 export interface CreditModalAction {
     kind: 'modal';

package/dist/main/money-price/index.d.ts

@@ -1,4 +1,6 @@
 export { MoneyPriceInteractive } from './money-price-interactive';
 export { MoneyPriceButton } from './money-price-button';
+export { PricingModal, PricingModalProvider, usePricingModal, } from './pricing-modal';
 export type { MoneyPriceConfig, MoneyPriceData, MoneyPriceAnimeTone, MoneyPriceStrictDiffAnime, InitUserContext, MoneyPriceInteractiveProps, MoneyPriceButtonProps, PaymentProvider, PaymentProviderConfig, EnhancePricePlan, SubscriptionProductConfig, CreditPackProductConfig, UserContext, } from './money-price-types';
+export type { OpenPricingModalOptions, PricingModalProps, PricingModalProviderProps, } from './pricing-modal';
 export { UserState } from './money-price-types';

package/dist/main/money-price/index.js

@@ -3,12 +3,16 @@
 
 var moneyPriceInteractive = require('./money-price-interactive.js');
 var moneyPriceButton = require('./money-price-button.js');
+var pricingModal = require('./pricing-modal.js');
 var moneyPriceTypes = require('./money-price-types.js');
 
 
 
 exports.MoneyPriceInteractive = moneyPriceInteractive.MoneyPriceInteractive;
 exports.MoneyPriceButton = moneyPriceButton.MoneyPriceButton;
+exports.PricingModal = pricingModal.PricingModal;
+exports.PricingModalProvider = pricingModal.PricingModalProvider;
+exports.usePricingModal = pricingModal.usePricingModal;
 Object.defineProperty(exports, "UserState", {
 	enumerable: true,
 	get: function () { return moneyPriceTypes.UserState; }

package/dist/main/money-price/index.mjs

@@ -1,4 +1,5 @@
 "use client";
 export { MoneyPriceInteractive } from './money-price-interactive.mjs';
 export { MoneyPriceButton } from './money-price-button.mjs';
+export { PricingModal, PricingModalProvider, usePricingModal } from './pricing-modal.mjs';
 export { UserState } from './money-price-types.mjs';

package/dist/main/money-price/money-price-interactive.d.ts

@@ -1,2 +1,2 @@
 import { type MoneyPriceInteractiveProps } from './money-price-types';
-export declare function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal, enabledBillingTypes, enableSubscriptionUpgrade, initialBillingType, disableAutoDetectBilling, initUserContext, isInitLoading, }: MoneyPriceInteractiveProps): import("react/jsx-runtime").JSX.Element;
+export declare function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal, enabledBillingTypes, mobileBillingSwitchBehavior, enableSubscriptionUpgrade, initialBillingType, disableAutoDetectBilling, initUserContext, isInitLoading, }: MoneyPriceInteractiveProps): import("react/jsx-runtime").JSX.Element;

package/dist/main/money-price/money-price-interactive.js

@@ -17,7 +17,7 @@ require('animejs');
 require('../anime/anime-404-page.js');
 
 const PLAN_KEYS = ['F1', 'P2', 'U3'];
-function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal = false, enabledBillingTypes, enableSubscriptionUpgrade = true, initialBillingType, disableAutoDetectBilling = false, initUserContext, isInitLoading = false, }) {
+function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal = false, enabledBillingTypes, mobileBillingSwitchBehavior = 'static', enableSubscriptionUpgrade = true, initialBillingType, disableAutoDetectBilling = false, initUserContext, isInitLoading = false, }) {
     var _a, _b, _c, _d, _e, _f;
     const { redirectToSignIn, redirectToSignUp, user: clerkUser, openSignUp } = nextjs.useClerk();
     const router = navigation.useRouter();
@@ -37,6 +37,7 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
             return acc;
         }, {});
     }, [billingOptions]);
+    const showBillingSwitch = billingOptions.length > 1;
     const defaultBilling = React.useMemo(() => {
         var _a;
         const defaultKey = data.billingSwitch.defaultKey;
@@ -309,15 +310,16 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
             return null;
         return selectedBillingOption.discountText.replace('{percent}', String(discountPercent));
     }, [selectedBillingOption, providerConfig, billingType]);
-    // Configure the mobile floating style for BillingTypeButton.
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "flex justify-center mb-6 max-md:sticky max-md:top-30 max-md:z-30 max-md:py-2 max-md:bg-transparent", children: jsxRuntime.jsx("div", { className: "inline-flex bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-full px-2 py-2 sm:px-3 sm:py-3 max-md:w-full max-md:max-w-[340px] max-md:mx-auto shadow-sm", "data-billing-switch": true, children: billingOptions.map(option => {
+    // Configure the mobile behavior for BillingTypeButton.
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showBillingSwitch ? (jsxRuntime.jsx("div", { className: utils.cn('mb-6 flex justify-center', mobileBillingSwitchBehavior === 'sticky' &&
+                    'max-md:sticky max-md:top-2 max-md:z-30 max-md:py-2 max-md:bg-transparent'), children: jsxRuntime.jsx("div", { className: "inline-flex max-w-[calc(100vw-2rem)] bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-full px-2 py-2 sm:px-3 sm:py-3 shadow-sm", "data-billing-switch": true, children: billingOptions.map(option => {
                         const isActive = option.key === billingType;
                         const buttonClasses = isActive
                             ? utils.cn('text-white rounded-full shadow-sm', lib.themeButtonGradientClass, lib.themeButtonGradientHoverClass)
                             : 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full';
                         const showBadge = option.key === billingType && !!discountBadgeText;
-                        return (jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center mx-1", children: [showBadge && (jsxRuntime.jsx("span", { className: "absolute z-10 left-1/2 -translate-x-1/2 -top-3 sm:-top-4 translate-y-[-50%] px-3 py-0.5  text-[0.625rem] sm:text-xs rounded-md bg-yellow-100 text-yellow-800 font-semibold shadow-sm whitespace-nowrap", children: discountBadgeText })), jsxRuntime.jsx("button", { className: utils.cn('text-sm md:text-base font-medium transition relative text-center z-10 px-2 sm:px-4 py-2 min-w-[100px] sm:min-w-[120px]', buttonClasses), type: "button", "data-billing-button": option.key, onClick: () => setUserSelectedBillingType(option.key), children: option.name })] }, option.key));
-                    }) }) }), jsxRuntime.jsx("div", { className: "w-full", children: jsxRuntime.jsx("div", { className: "flex flex-wrap justify-center gap-5 md:gap-6 xl:gap-8 w-full max-w-6xl mx-auto", children: currentPlans.map((plan) => {
+                        return (jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center mx-1", children: [showBadge && (jsxRuntime.jsx("span", { className: "absolute z-10 left-1/2 -translate-x-1/2 -top-3 sm:-top-4 translate-y-[-50%] px-3 py-0.5  text-[0.625rem] sm:text-xs rounded-md bg-yellow-100 text-yellow-800 font-semibold shadow-sm whitespace-nowrap", children: discountBadgeText })), jsxRuntime.jsx("button", { className: utils.cn('text-sm md:text-base font-medium transition relative text-center z-10 px-2 sm:px-4 py-2 min-w-[88px] min-[360px]:min-w-[100px] sm:min-w-[120px]', buttonClasses), type: "button", "data-billing-button": option.key, onClick: () => setUserSelectedBillingType(option.key), children: option.name })] }, option.key));
+                    }) }) })) : null, jsxRuntime.jsx("div", { className: "w-full", children: jsxRuntime.jsx("div", { className: "flex flex-wrap justify-center gap-5 md:gap-6 xl:gap-8 w-full max-w-6xl mx-auto", children: currentPlans.map((plan) => {
                         var _a, _b;
                         const planKey = plan.key;
                         if (!PLAN_KEYS.includes(planKey)) {

package/dist/main/money-price/money-price-interactive.mjs

@@ -15,7 +15,7 @@ import 'animejs';
 import '../anime/anime-404-page.mjs';
 
 const PLAN_KEYS = ['F1', 'P2', 'U3'];
-function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal = false, enabledBillingTypes, enableSubscriptionUpgrade = true, initialBillingType, disableAutoDetectBilling = false, initUserContext, isInitLoading = false, }) {
+function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal = false, enabledBillingTypes, mobileBillingSwitchBehavior = 'static', enableSubscriptionUpgrade = true, initialBillingType, disableAutoDetectBilling = false, initUserContext, isInitLoading = false, }) {
     var _a, _b, _c, _d, _e, _f;
     const { redirectToSignIn, redirectToSignUp, user: clerkUser, openSignUp } = useClerk();
     const router = useRouter();
@@ -35,6 +35,7 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
             return acc;
         }, {});
     }, [billingOptions]);
+    const showBillingSwitch = billingOptions.length > 1;
     const defaultBilling = useMemo(() => {
         var _a;
         const defaultKey = data.billingSwitch.defaultKey;
@@ -307,15 +308,16 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
             return null;
         return selectedBillingOption.discountText.replace('{percent}', String(discountPercent));
     }, [selectedBillingOption, providerConfig, billingType]);
-    // Configure the mobile floating style for BillingTypeButton.
-    return (jsxs(Fragment, { children: [jsx("div", { className: "flex justify-center mb-6 max-md:sticky max-md:top-30 max-md:z-30 max-md:py-2 max-md:bg-transparent", children: jsx("div", { className: "inline-flex bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-full px-2 py-2 sm:px-3 sm:py-3 max-md:w-full max-md:max-w-[340px] max-md:mx-auto shadow-sm", "data-billing-switch": true, children: billingOptions.map(option => {
+    // Configure the mobile behavior for BillingTypeButton.
+    return (jsxs(Fragment, { children: [showBillingSwitch ? (jsx("div", { className: cn('mb-6 flex justify-center', mobileBillingSwitchBehavior === 'sticky' &&
+                    'max-md:sticky max-md:top-2 max-md:z-30 max-md:py-2 max-md:bg-transparent'), children: jsx("div", { className: "inline-flex max-w-[calc(100vw-2rem)] bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-full px-2 py-2 sm:px-3 sm:py-3 shadow-sm", "data-billing-switch": true, children: billingOptions.map(option => {
                         const isActive = option.key === billingType;
                         const buttonClasses = isActive
                             ? cn('text-white rounded-full shadow-sm', themeButtonGradientClass, themeButtonGradientHoverClass)
                             : 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full';
                         const showBadge = option.key === billingType && !!discountBadgeText;
-                        return (jsxs("div", { className: "relative flex items-center justify-center mx-1", children: [showBadge && (jsx("span", { className: "absolute z-10 left-1/2 -translate-x-1/2 -top-3 sm:-top-4 translate-y-[-50%] px-3 py-0.5  text-[0.625rem] sm:text-xs rounded-md bg-yellow-100 text-yellow-800 font-semibold shadow-sm whitespace-nowrap", children: discountBadgeText })), jsx("button", { className: cn('text-sm md:text-base font-medium transition relative text-center z-10 px-2 sm:px-4 py-2 min-w-[100px] sm:min-w-[120px]', buttonClasses), type: "button", "data-billing-button": option.key, onClick: () => setUserSelectedBillingType(option.key), children: option.name })] }, option.key));
-                    }) }) }), jsx("div", { className: "w-full", children: jsx("div", { className: "flex flex-wrap justify-center gap-5 md:gap-6 xl:gap-8 w-full max-w-6xl mx-auto", children: currentPlans.map((plan) => {
+                        return (jsxs("div", { className: "relative flex items-center justify-center mx-1", children: [showBadge && (jsx("span", { className: "absolute z-10 left-1/2 -translate-x-1/2 -top-3 sm:-top-4 translate-y-[-50%] px-3 py-0.5  text-[0.625rem] sm:text-xs rounded-md bg-yellow-100 text-yellow-800 font-semibold shadow-sm whitespace-nowrap", children: discountBadgeText })), jsx("button", { className: cn('text-sm md:text-base font-medium transition relative text-center z-10 px-2 sm:px-4 py-2 min-w-[88px] min-[360px]:min-w-[100px] sm:min-w-[120px]', buttonClasses), type: "button", "data-billing-button": option.key, onClick: () => setUserSelectedBillingType(option.key), children: option.name })] }, option.key));
+                    }) }) })) : null, jsx("div", { className: "w-full", children: jsx("div", { className: "flex flex-wrap justify-center gap-5 md:gap-6 xl:gap-8 w-full max-w-6xl mx-auto", children: currentPlans.map((plan) => {
                         var _a, _b;
                         const planKey = plan.key;
                         if (!PLAN_KEYS.includes(planKey)) {

package/dist/main/money-price/money-price-types.d.ts

@@ -81,6 +81,7 @@ export interface MoneyPriceProps {
     enableClerkModal?: boolean;
     sectionClassName?: string;
     enabledBillingTypes?: string[];
+    mobileBillingSwitchBehavior?: 'sticky' | 'static';
     enableSubscriptionUpgrade?: boolean;
     initUserContext?: InitUserContext;
     initialBillingType?: string;
@@ -92,6 +93,7 @@ export interface MoneyPriceInteractiveProps {
     customerPortalApiEndpoint?: string;
     enableClerkModal?: boolean;
     enabledBillingTypes?: string[];
+    mobileBillingSwitchBehavior?: 'sticky' | 'static';
     enableSubscriptionUpgrade?: boolean;
     initialBillingType?: string;
     disableAutoDetectBilling?: boolean;

package/dist/main/money-price/money-price.d.ts

@@ -1,2 +1,2 @@
 import type { MoneyPriceProps } from './money-price-types';
-export declare function MoneyPrice({ locale, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal, sectionClassName, enabledBillingTypes, enableSubscriptionUpgrade, initUserContext, initialBillingType, }: MoneyPriceProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export declare function MoneyPrice({ locale, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal, sectionClassName, enabledBillingTypes, mobileBillingSwitchBehavior, enableSubscriptionUpgrade, initUserContext, initialBillingType, }: MoneyPriceProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/main/money-price/money-price.js

@@ -7,13 +7,13 @@ var moneyPriceInteractive = require('./money-price-interactive.js');
 var moneyPriceData = require('./money-price-data.js');
 
 function MoneyPrice(_a) {
-    return tslib.__awaiter(this, arguments, void 0, function* ({ locale, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal = false, sectionClassName, enabledBillingTypes, enableSubscriptionUpgrade = true, initUserContext, initialBillingType, }) {
+    return tslib.__awaiter(this, arguments, void 0, function* ({ locale, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal = false, sectionClassName, enabledBillingTypes, mobileBillingSwitchBehavior, enableSubscriptionUpgrade = true, initUserContext, initialBillingType, }) {
         const data = yield moneyPriceData.buildMoneyPriceData({
             locale,
             currency: config.display.currency,
             enabledBillingTypes,
         });
-        return (jsxRuntime.jsxs("section", { id: "money-pricing", className: utils.cn("px-4 py-4 md:px-16 md:py-8 mx-auto max-w-7xl scroll-mt-10", sectionClassName), children: [jsxRuntime.jsx("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-3", children: data.title }), jsxRuntime.jsx("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-4 text-base md:text-lg mx-auto", children: data.subtitle }), jsxRuntime.jsx(moneyPriceInteractive.MoneyPriceInteractive, { data: data, config: config, checkoutApiEndpoint: checkoutApiEndpoint, customerPortalApiEndpoint: customerPortalApiEndpoint, enableClerkModal: enableClerkModal, enabledBillingTypes: enabledBillingTypes, enableSubscriptionUpgrade: enableSubscriptionUpgrade, initUserContext: initUserContext, initialBillingType: initialBillingType })] }));
+        return (jsxRuntime.jsxs("section", { id: "money-pricing", className: utils.cn("px-4 py-4 md:px-16 md:py-8 mx-auto max-w-7xl scroll-mt-10", sectionClassName), children: [jsxRuntime.jsx("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-3", children: data.title }), jsxRuntime.jsx("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-4 text-base md:text-lg mx-auto", children: data.subtitle }), jsxRuntime.jsx(moneyPriceInteractive.MoneyPriceInteractive, { data: data, config: config, checkoutApiEndpoint: checkoutApiEndpoint, customerPortalApiEndpoint: customerPortalApiEndpoint, enableClerkModal: enableClerkModal, enabledBillingTypes: enabledBillingTypes, mobileBillingSwitchBehavior: mobileBillingSwitchBehavior, enableSubscriptionUpgrade: enableSubscriptionUpgrade, initUserContext: initUserContext, initialBillingType: initialBillingType })] }));
     });
 }
 

package/dist/main/money-price/money-price.mjs

@@ -5,13 +5,13 @@ import { MoneyPriceInteractive } from './money-price-interactive.mjs';
 import { buildMoneyPriceData } from './money-price-data.mjs';
 
 function MoneyPrice(_a) {
-    return __awaiter(this, arguments, void 0, function* ({ locale, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal = false, sectionClassName, enabledBillingTypes, enableSubscriptionUpgrade = true, initUserContext, initialBillingType, }) {
+    return __awaiter(this, arguments, void 0, function* ({ locale, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal = false, sectionClassName, enabledBillingTypes, mobileBillingSwitchBehavior, enableSubscriptionUpgrade = true, initUserContext, initialBillingType, }) {
         const data = yield buildMoneyPriceData({
             locale,
             currency: config.display.currency,
             enabledBillingTypes,
         });
-        return (jsxs("section", { id: "money-pricing", className: cn("px-4 py-4 md:px-16 md:py-8 mx-auto max-w-7xl scroll-mt-10", sectionClassName), children: [jsx("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-3", children: data.title }), jsx("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-4 text-base md:text-lg mx-auto", children: data.subtitle }), jsx(MoneyPriceInteractive, { data: data, config: config, checkoutApiEndpoint: checkoutApiEndpoint, customerPortalApiEndpoint: customerPortalApiEndpoint, enableClerkModal: enableClerkModal, enabledBillingTypes: enabledBillingTypes, enableSubscriptionUpgrade: enableSubscriptionUpgrade, initUserContext: initUserContext, initialBillingType: initialBillingType })] }));
+        return (jsxs("section", { id: "money-pricing", className: cn("px-4 py-4 md:px-16 md:py-8 mx-auto max-w-7xl scroll-mt-10", sectionClassName), children: [jsx("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-3", children: data.title }), jsx("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-4 text-base md:text-lg mx-auto", children: data.subtitle }), jsx(MoneyPriceInteractive, { data: data, config: config, checkoutApiEndpoint: checkoutApiEndpoint, customerPortalApiEndpoint: customerPortalApiEndpoint, enableClerkModal: enableClerkModal, enabledBillingTypes: enabledBillingTypes, mobileBillingSwitchBehavior: mobileBillingSwitchBehavior, enableSubscriptionUpgrade: enableSubscriptionUpgrade, initUserContext: initUserContext, initialBillingType: initialBillingType })] }));
     });
 }
 

package/dist/main/money-price/pricing-modal.d.ts

@@ -0,0 +1,33 @@
+import { type ReactNode } from 'react';
+import type { InitUserContext, MoneyPriceConfig, MoneyPriceData } from './money-price-types';
+export interface OpenPricingModalOptions {
+    billingType?: string;
+}
+export interface PricingModalProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    data: MoneyPriceData;
+    config: MoneyPriceConfig;
+    billingType?: string;
+    checkoutApiEndpoint?: string;
+    customerPortalApiEndpoint?: string;
+    enableClerkModal?: boolean;
+    enabledBillingTypes?: string[];
+    mobileBillingSwitchBehavior?: 'sticky' | 'static';
+    enableSubscriptionUpgrade?: boolean;
+    initUserContext?: InitUserContext;
+    isInitLoading?: boolean;
+}
+export interface PricingModalProviderProps extends Omit<PricingModalProps, 'open' | 'onOpenChange' | 'billingType'> {
+    children: ReactNode;
+    pricingContextEndpoint?: string;
+}
+interface PricingModalContextValue {
+    openPricingModal: (options?: OpenPricingModalOptions) => void;
+    closePricingModal: () => void;
+    isPricingModalOpen: boolean;
+}
+export declare function PricingModal({ open, onOpenChange, data, config, billingType, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal, enabledBillingTypes, mobileBillingSwitchBehavior, enableSubscriptionUpgrade, initUserContext, isInitLoading, }: PricingModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function PricingModalProvider({ children, pricingContextEndpoint, initUserContext: initUserContextProp, isInitLoading: isInitLoadingProp, ...modalProps }: PricingModalProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function usePricingModal(): PricingModalContextValue;
+export {};

package/dist/main/money-price/pricing-modal.js

@@ -0,0 +1,109 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var icons = require('@windrun-huaiin/base-ui/icons');
+var lib = require('@windrun-huaiin/base-ui/lib');
+var ui = require('@windrun-huaiin/base-ui/ui');
+var utils = require('@windrun-huaiin/lib/utils');
+var React = require('react');
+var dialogStyles = require('../alert-dialog/dialog-styles.js');
+var moneyPriceInteractive = require('./money-price-interactive.js');
+
+const emptyInitUserContext = {
+    fingerprintId: null,
+    xUser: null,
+    xCredit: null,
+    xSubscription: null,
+    isClerkAuthenticated: false,
+};
+const PricingModalContext = React.createContext(null);
+function normalizeEnabledBillingTypes(data, enabledBillingTypes) {
+    const availableKeys = data.billingSwitch.options.map((option) => option.key);
+    const configuredKeys = (enabledBillingTypes === null || enabledBillingTypes === void 0 ? void 0 : enabledBillingTypes.length) ? enabledBillingTypes : availableKeys;
+    return Array.from(new Set(configuredKeys
+        .map((billingType) => billingType.trim())
+        .filter((billingType) => availableKeys.includes(billingType))));
+}
+function resolveBillingType({ data, enabledBillingTypes, requestedBillingType, }) {
+    var _a, _b;
+    const enabledKeys = normalizeEnabledBillingTypes(data, enabledBillingTypes);
+    if (requestedBillingType && enabledKeys.includes(requestedBillingType)) {
+        return requestedBillingType;
+    }
+    if (enabledKeys.includes(data.billingSwitch.defaultKey)) {
+        return data.billingSwitch.defaultKey;
+    }
+    return (_a = enabledKeys[0]) !== null && _a !== void 0 ? _a : (_b = data.billingSwitch.options[0]) === null || _b === void 0 ? void 0 : _b.key;
+}
+function PricingModal({ open, onOpenChange, data, config, billingType, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal = false, enabledBillingTypes, mobileBillingSwitchBehavior, enableSubscriptionUpgrade = true, initUserContext, isInitLoading = false, }) {
+    const resolvedBillingType = React.useMemo(() => resolveBillingType({
+        data,
+        enabledBillingTypes,
+        requestedBillingType: billingType,
+    }), [billingType, data, enabledBillingTypes]);
+    return (jsxRuntime.jsx(ui.AlertDialog, { open: open, onOpenChange: onOpenChange, children: open ? (jsxRuntime.jsxs(ui.AlertDialogContent, { className: utils.cn('mt-5 sm:mt-6 md:mt-10 lg:mt-15 w-[95vw] max-w-[1200px] overflow-hidden border border-slate-200 p-0 shadow-[0_32px_90px_rgba(15,23,42,0.25)] ring-1 ring-black/5 dark:border-white/12 dark:shadow-[0_40px_120px_rgba(0,0,0,0.6)] dark:ring-white/10', lib.themeMainBgColor), overlayClassName: dialogStyles.dialogThemedOverlayClass, children: [jsxRuntime.jsxs(ui.AlertDialogHeader, { className: "flex flex-row items-center justify-between border-b border-slate-200 px-6 pt-4 pb-1 dark:border-slate-800", children: [jsxRuntime.jsx(ui.AlertDialogTitle, { asChild: true, children: jsxRuntime.jsxs("div", { className: "flex flex-wrap items-baseline gap-3 text-slate-900 dark:text-white", children: [jsxRuntime.jsx("span", { className: "text-2xl font-semibold leading-tight", children: data.title }), data.subtitle ? (jsxRuntime.jsx("span", { className: "text-sm font-medium text-slate-500 dark:text-slate-300", children: data.subtitle })) : null] }) }), jsxRuntime.jsx("button", { type: "button", className: "rounded-full p-2 text-gray-400 transition hover:bg-gray-400 hover:text-gray-400 dark:text-white/80 dark:hover:bg-white/80 dark:hover:text-white/80", onClick: () => onOpenChange(false), children: jsxRuntime.jsx(icons.XIcon, { className: "h-6 w-6" }) })] }), jsxRuntime.jsx("div", { className: "max-h-[60vh] overflow-y-auto px-4 pt-2 pb-6 sm:max-h-[80vh]", children: jsxRuntime.jsx("div", { className: "mx-auto w-full", children: jsxRuntime.jsx(moneyPriceInteractive.MoneyPriceInteractive, { data: data, config: config, checkoutApiEndpoint: checkoutApiEndpoint, customerPortalApiEndpoint: customerPortalApiEndpoint, enableClerkModal: enableClerkModal, enabledBillingTypes: enabledBillingTypes, mobileBillingSwitchBehavior: mobileBillingSwitchBehavior, enableSubscriptionUpgrade: enableSubscriptionUpgrade, initialBillingType: resolvedBillingType, disableAutoDetectBilling: resolvedBillingType === 'onetime', initUserContext: initUserContext, isInitLoading: isInitLoading }, resolvedBillingType !== null && resolvedBillingType !== void 0 ? resolvedBillingType : 'default') }) })] })) : null }));
+}
+function PricingModalProvider(_a) {
+    var { children, pricingContextEndpoint, initUserContext: initUserContextProp, isInitLoading: isInitLoadingProp = false } = _a, modalProps = tslib.__rest(_a, ["children", "pricingContextEndpoint", "initUserContext", "isInitLoading"]);
+    const [open, setOpen] = React.useState(false);
+    const [requestedBillingType, setRequestedBillingType] = React.useState();
+    const [loadedInitUserContext, setLoadedInitUserContext] = React.useState(initUserContextProp !== null && initUserContextProp !== void 0 ? initUserContextProp : emptyInitUserContext);
+    const [isContextLoading, setIsContextLoading] = React.useState(false);
+    const loadedContextRef = React.useRef(!!initUserContextProp);
+    React.useEffect(() => {
+        if (initUserContextProp) {
+            loadedContextRef.current = true;
+            setLoadedInitUserContext(initUserContextProp);
+        }
+    }, [initUserContextProp]);
+    const loadPricingContext = React.useCallback(() => tslib.__awaiter(this, void 0, void 0, function* () {
+        if (!pricingContextEndpoint || loadedContextRef.current) {
+            return;
+        }
+        setIsContextLoading(true);
+        try {
+            const response = yield fetch(pricingContextEndpoint, {
+                credentials: 'same-origin',
+            });
+            if (!response.ok) {
+                return;
+            }
+            const nextContext = (yield response.json());
+            loadedContextRef.current = true;
+            setLoadedInitUserContext(nextContext);
+        }
+        catch (error) {
+            console.warn('[PricingModalProvider] Failed to load pricing context', error);
+        }
+        finally {
+            setIsContextLoading(false);
+        }
+    }), [pricingContextEndpoint]);
+    const openPricingModal = React.useCallback((options) => {
+        setRequestedBillingType(options === null || options === void 0 ? void 0 : options.billingType);
+        setOpen(true);
+        void loadPricingContext();
+    }, [loadPricingContext]);
+    const closePricingModal = React.useCallback(() => {
+        setOpen(false);
+    }, []);
+    const contextValue = React.useMemo(() => ({
+        openPricingModal,
+        closePricingModal,
+        isPricingModalOpen: open,
+    }), [closePricingModal, open, openPricingModal]);
+    return (jsxRuntime.jsxs(PricingModalContext.Provider, { value: contextValue, children: [children, jsxRuntime.jsx(PricingModal, Object.assign({}, modalProps, { open: open, onOpenChange: setOpen, billingType: requestedBillingType, initUserContext: initUserContextProp !== null && initUserContextProp !== void 0 ? initUserContextProp : loadedInitUserContext, isInitLoading: isInitLoadingProp || isContextLoading }))] }));
+}
+function usePricingModal() {
+    const context = React.useContext(PricingModalContext);
+    if (!context) {
+        throw new Error('usePricingModal must be used within PricingModalProvider.');
+    }
+    return context;
+}
+
+exports.PricingModal = PricingModal;
+exports.PricingModalProvider = PricingModalProvider;
+exports.usePricingModal = usePricingModal;