@windrun-huaiin/third-ui 15.1.0 → 16.0.0

package/dist/fuma/mdx/zia-file.mjs

@@ -1,6 +1,6 @@
 import { __rest } from 'tslib';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { globalLucideIcons } from '@windrun-huaiin/base-ui/components/server';
+import { FileIcon, FolderOpenIcon, FolderIcon } from '@windrun-huaiin/base-ui/icons';
 import { useState } from 'react';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from 'fumadocs-ui/components/ui/collapsible';
@@ -9,7 +9,7 @@ import Link from 'next/link';
 const itemVariants = 'flex flex-row items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-fd-accent hover:text-fd-accent-foreground [&_svg]:size-4';
 const anotionClass = 'ms-2 px-2 py-0.5 rounded text-xs font-semibold bg-fd-accent/80 text-fd-accent-foreground dark:bg-white/20 dark:text-white';
 function ZiaFile(_a) {
-    var { name, icon = jsx(globalLucideIcons.File, {}), className, anotion, href } = _a, rest = __rest(_a, ["name", "icon", "className", "anotion", "href"]);
+    var { name, icon = jsx(FileIcon, {}), className, anotion, href } = _a, rest = __rest(_a, ["name", "icon", "className", "anotion", "href"]);
     const validHref = typeof href === 'string' && href.trim() !== '';
     const validAnotion = typeof anotion === 'string' && anotion.trim() !== '';
     if (validHref) {
@@ -21,7 +21,7 @@ function ZiaFolder(_a) {
     var { name, anotion, defaultOpen = false, className, children } = _a, props = __rest(_a, ["name", "anotion", "defaultOpen", "className", "children"]);
     const [open, setOpen] = useState(defaultOpen);
     const validAnotion = typeof anotion === 'string' && anotion.trim() !== '';
-    return (jsxs(Collapsible, Object.assign({ open: open, onOpenChange: setOpen }, props, { children: [jsxs(CollapsibleTrigger, { className: cn(itemVariants, className, 'w-full'), children: [open ? jsx(globalLucideIcons.FolderOpen, {}) : jsx(globalLucideIcons.Folder, {}), jsx("span", { children: name }), validAnotion && (jsx("span", { className: anotionClass, children: anotion }))] }), jsx(CollapsibleContent, { children: jsx("div", { className: "ms-2 flex flex-col border-l ps-2", children: children }) })] })));
+    return (jsxs(Collapsible, Object.assign({ open: open, onOpenChange: setOpen }, props, { children: [jsxs(CollapsibleTrigger, { className: cn(itemVariants, className, 'w-full'), children: [open ? jsx(FolderOpenIcon, {}) : jsx(FolderIcon, {}), jsx("span", { children: name }), validAnotion && (jsx("span", { className: anotionClass, children: anotion }))] }), jsx(CollapsibleContent, { children: jsx("div", { className: "ms-2 flex flex-col border-l ps-2", children: children }) })] })));
 }
 
 export { ZiaFile, ZiaFolder };

package/dist/main/ads-alert-dialog.js

@@ -4,12 +4,12 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var Image = require('next/image');
-var server = require('@windrun-huaiin/base-ui/components/server');
+var icons = require('@windrun-huaiin/base-ui/icons');
 var ui = require('@windrun-huaiin/base-ui/ui');
 
 function AdsAlertDialog({ open, onOpenChange, title, description, imgSrc, imgHref, cancelText, onCancel, confirmText, onConfirm, }) {
     const [imgError, setImgError] = React.useState(false);
-    return (jsxRuntime.jsx(ui.AlertDialog, { open: open, onOpenChange: onOpenChange, children: jsxRuntime.jsxs(ui.AlertDialogContent, { className: "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl border border-neutral-200 dark:border-neutral-700 max-w-md w-full min-w-[320px] p-4 flex flex-col items-stretch", children: [jsxRuntime.jsxs("div", { className: "flex flex-row items-center justify-between mb-2", children: [jsxRuntime.jsx(ui.AlertDialogTitle, { asChild: true, children: jsxRuntime.jsxs("div", { className: "flex flex-row items-center gap-1 min-w-0 text-xl font-semibold", children: [jsxRuntime.jsx(server.globalLucideIcons.Info, { className: "w-5 h-5" }), jsxRuntime.jsx("span", { className: "truncate", children: title })] }) }), jsxRuntime.jsx("button", { className: "text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 text-xl ml-4", onClick: () => onOpenChange(false), "aria-label": "Close", tabIndex: 0, children: jsxRuntime.jsx(server.globalLucideIcons.X, { className: "w-5 h-5" }) })] }), jsxRuntime.jsx(ui.AlertDialogDescription, { className: "text-base font-medium text-neutral-800 dark:text-neutral-100 mb-2", children: description }), imgSrc && (jsxRuntime.jsx("div", { className: "w-full max-w-[400px] h-[220px] relative flex items-center justify-center mb-2", children: imgError ? (jsxRuntime.jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center bg-gray-100 dark:bg-neutral-800 border border-dashed border-neutral-300 dark:border-neutral-700 rounded-lg text-neutral-400 text-sm", children: [jsxRuntime.jsx(server.globalLucideIcons.ImageOff, { className: "w-12 h-12 mb-2" }), jsxRuntime.jsx("span", { children: "Image loading failed" })] })) : imgHref ? (jsxRuntime.jsx("a", { href: imgHref, target: "_blank", rel: "noopener noreferrer", className: "block w-full h-full", children: jsxRuntime.jsx(Image, { src: imgSrc, alt: "image", fill: true, className: "object-contain rounded-lg", priority: false, placeholder: "empty", unoptimized: true, onError: () => setImgError(true), sizes: "(max-width: 400px) 100vw, 400px" }) })) : (jsxRuntime.jsx(Image, { src: imgSrc, alt: "image", fill: true, className: "object-contain rounded-lg", priority: false, placeholder: "empty", unoptimized: true, onError: () => setImgError(true), sizes: "(max-width: 400px) 100vw, 400px" })) })), (cancelText || confirmText) && (jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 mt-2", children: [cancelText && (jsxRuntime.jsx("button", { onClick: () => {
+    return (jsxRuntime.jsx(ui.AlertDialog, { open: open, onOpenChange: onOpenChange, children: jsxRuntime.jsxs(ui.AlertDialogContent, { className: "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl border border-neutral-200 dark:border-neutral-700 max-w-md w-full min-w-[320px] p-4 flex flex-col items-stretch", children: [jsxRuntime.jsxs("div", { className: "flex flex-row items-center justify-between mb-2", children: [jsxRuntime.jsx(ui.AlertDialogTitle, { asChild: true, children: jsxRuntime.jsxs("div", { className: "flex flex-row items-center gap-1 min-w-0 text-xl font-semibold", children: [jsxRuntime.jsx(icons.InfoIcon, { className: "w-5 h-5" }), jsxRuntime.jsx("span", { className: "truncate", children: title })] }) }), jsxRuntime.jsx("button", { className: "text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 text-xl ml-4", onClick: () => onOpenChange(false), "aria-label": "Close", tabIndex: 0, children: jsxRuntime.jsx(icons.XIcon, { className: "w-5 h-5" }) })] }), jsxRuntime.jsx(ui.AlertDialogDescription, { className: "text-base font-medium text-neutral-800 dark:text-neutral-100 mb-2", children: description }), imgSrc && (jsxRuntime.jsx("div", { className: "w-full max-w-[400px] h-[220px] relative flex items-center justify-center mb-2", children: imgError ? (jsxRuntime.jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center bg-gray-100 dark:bg-neutral-800 border border-dashed border-neutral-300 dark:border-neutral-700 rounded-lg text-neutral-400 text-sm", children: [jsxRuntime.jsx(icons.ImageOffIcon, { className: "w-12 h-12 mb-2" }), jsxRuntime.jsx("span", { children: "Image loading failed" })] })) : imgHref ? (jsxRuntime.jsx("a", { href: imgHref, target: "_blank", rel: "noopener noreferrer", className: "block w-full h-full", children: jsxRuntime.jsx(Image, { src: imgSrc, alt: "image", fill: true, className: "object-contain rounded-lg", priority: false, placeholder: "empty", unoptimized: true, onError: () => setImgError(true), sizes: "(max-width: 400px) 100vw, 400px" }) })) : (jsxRuntime.jsx(Image, { src: imgSrc, alt: "image", fill: true, className: "object-contain rounded-lg", priority: false, placeholder: "empty", unoptimized: true, onError: () => setImgError(true), sizes: "(max-width: 400px) 100vw, 400px" })) })), (cancelText || confirmText) && (jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 mt-2", children: [cancelText && (jsxRuntime.jsx("button", { onClick: () => {
                                 onOpenChange(false);
                                 onCancel === null || onCancel === void 0 ? void 0 : onCancel();
                             }, className: "px-6 py-2 rounded-lg border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-700 dark:text-neutral-200 font-semibold hover:bg-neutral-100 dark:hover:bg-neutral-700 transition", children: cancelText })), confirmText && (jsxRuntime.jsx(ui.AlertDialogAction, { onClick: () => {

package/dist/main/ads-alert-dialog.mjs

@@ -2,12 +2,12 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState } from 'react';
 import Image from 'next/image';
-import { globalLucideIcons } from '@windrun-huaiin/base-ui/components/server';
+import { InfoIcon, XIcon, ImageOffIcon } from '@windrun-huaiin/base-ui/icons';
 import { AlertDialog, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogAction } from '@windrun-huaiin/base-ui/ui';
 
 function AdsAlertDialog({ open, onOpenChange, title, description, imgSrc, imgHref, cancelText, onCancel, confirmText, onConfirm, }) {
     const [imgError, setImgError] = useState(false);
-    return (jsx(AlertDialog, { open: open, onOpenChange: onOpenChange, children: jsxs(AlertDialogContent, { className: "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl border border-neutral-200 dark:border-neutral-700 max-w-md w-full min-w-[320px] p-4 flex flex-col items-stretch", children: [jsxs("div", { className: "flex flex-row items-center justify-between mb-2", children: [jsx(AlertDialogTitle, { asChild: true, children: jsxs("div", { className: "flex flex-row items-center gap-1 min-w-0 text-xl font-semibold", children: [jsx(globalLucideIcons.Info, { className: "w-5 h-5" }), jsx("span", { className: "truncate", children: title })] }) }), jsx("button", { className: "text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 text-xl ml-4", onClick: () => onOpenChange(false), "aria-label": "Close", tabIndex: 0, children: jsx(globalLucideIcons.X, { className: "w-5 h-5" }) })] }), jsx(AlertDialogDescription, { className: "text-base font-medium text-neutral-800 dark:text-neutral-100 mb-2", children: description }), imgSrc && (jsx("div", { className: "w-full max-w-[400px] h-[220px] relative flex items-center justify-center mb-2", children: imgError ? (jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center bg-gray-100 dark:bg-neutral-800 border border-dashed border-neutral-300 dark:border-neutral-700 rounded-lg text-neutral-400 text-sm", children: [jsx(globalLucideIcons.ImageOff, { className: "w-12 h-12 mb-2" }), jsx("span", { children: "Image loading failed" })] })) : imgHref ? (jsx("a", { href: imgHref, target: "_blank", rel: "noopener noreferrer", className: "block w-full h-full", children: jsx(Image, { src: imgSrc, alt: "image", fill: true, className: "object-contain rounded-lg", priority: false, placeholder: "empty", unoptimized: true, onError: () => setImgError(true), sizes: "(max-width: 400px) 100vw, 400px" }) })) : (jsx(Image, { src: imgSrc, alt: "image", fill: true, className: "object-contain rounded-lg", priority: false, placeholder: "empty", unoptimized: true, onError: () => setImgError(true), sizes: "(max-width: 400px) 100vw, 400px" })) })), (cancelText || confirmText) && (jsxs("div", { className: "flex justify-end gap-2 mt-2", children: [cancelText && (jsx("button", { onClick: () => {
+    return (jsx(AlertDialog, { open: open, onOpenChange: onOpenChange, children: jsxs(AlertDialogContent, { className: "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl border border-neutral-200 dark:border-neutral-700 max-w-md w-full min-w-[320px] p-4 flex flex-col items-stretch", children: [jsxs("div", { className: "flex flex-row items-center justify-between mb-2", children: [jsx(AlertDialogTitle, { asChild: true, children: jsxs("div", { className: "flex flex-row items-center gap-1 min-w-0 text-xl font-semibold", children: [jsx(InfoIcon, { className: "w-5 h-5" }), jsx("span", { className: "truncate", children: title })] }) }), jsx("button", { className: "text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 text-xl ml-4", onClick: () => onOpenChange(false), "aria-label": "Close", tabIndex: 0, children: jsx(XIcon, { className: "w-5 h-5" }) })] }), jsx(AlertDialogDescription, { className: "text-base font-medium text-neutral-800 dark:text-neutral-100 mb-2", children: description }), imgSrc && (jsx("div", { className: "w-full max-w-[400px] h-[220px] relative flex items-center justify-center mb-2", children: imgError ? (jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center bg-gray-100 dark:bg-neutral-800 border border-dashed border-neutral-300 dark:border-neutral-700 rounded-lg text-neutral-400 text-sm", children: [jsx(ImageOffIcon, { className: "w-12 h-12 mb-2" }), jsx("span", { children: "Image loading failed" })] })) : imgHref ? (jsx("a", { href: imgHref, target: "_blank", rel: "noopener noreferrer", className: "block w-full h-full", children: jsx(Image, { src: imgSrc, alt: "image", fill: true, className: "object-contain rounded-lg", priority: false, placeholder: "empty", unoptimized: true, onError: () => setImgError(true), sizes: "(max-width: 400px) 100vw, 400px" }) })) : (jsx(Image, { src: imgSrc, alt: "image", fill: true, className: "object-contain rounded-lg", priority: false, placeholder: "empty", unoptimized: true, onError: () => setImgError(true), sizes: "(max-width: 400px) 100vw, 400px" })) })), (cancelText || confirmText) && (jsxs("div", { className: "flex justify-end gap-2 mt-2", children: [cancelText && (jsx("button", { onClick: () => {
                                 onOpenChange(false);
                                 onCancel === null || onCancel === void 0 ? void 0 : onCancel();
                             }, className: "px-6 py-2 rounded-lg border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-700 dark:text-neutral-200 font-semibold hover:bg-neutral-100 dark:hover:bg-neutral-700 transition", children: cancelText })), confirmText && (jsx(AlertDialogAction, { onClick: () => {

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

@@ -3,7 +3,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var utils = require('@windrun-huaiin/lib/utils');
-var server = require('@windrun-huaiin/base-ui/components/server');
+var icons = require('@windrun-huaiin/base-ui/icons');
 var ui = require('@windrun-huaiin/base-ui/ui');
 var React = require('react');
 var moneyPriceInteractive = require('../money-price/money-price-interactive.js');
@@ -106,7 +106,7 @@ function CreditNavButton({ locale, totalBalance, totalLabel, children, }) {
         closePricingModal,
     }), [closeMenu, isMobile, openPricingModal, closePricingModal]);
     const isOnetimeModal = pricingModal.mode === 'onetime';
-    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(server.globalLucideIcons.Gem, { 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: "mt-5 sm:mt-6 md:mt-10 lg:mt-15 w-[95vw] max-w-[1200px] overflow-hidden border border-slate-200 bg-white p-0 shadow-[0_32px_90px_rgba(15,23,42,0.25)] ring-1 ring-black/5 dark:border-white/12 dark:bg-[#0f1222] dark:shadow-[0_40px_120px_rgba(0,0,0,0.6)] dark:ring-white/10", 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(server.globalLucideIcons.X, { 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: isOnetimeModal ? 'onetime' : undefined, disableAutoDetectBilling: isOnetimeModal, initUserContext: pricingModal.pricingContext.initUserContext }, pricingModal.mode) }) })] }) })) : null] }));
+    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: "mt-5 sm:mt-6 md:mt-10 lg:mt-15 w-[95vw] max-w-[1200px] overflow-hidden border border-slate-200 bg-white p-0 shadow-[0_32px_90px_rgba(15,23,42,0.25)] ring-1 ring-black/5 dark:border-white/12 dark:bg-[#0f1222] dark:shadow-[0_40px_120px_rgba(0,0,0,0.6)] dark:ring-white/10", 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: isOnetimeModal ? 'onetime' : undefined, disableAutoDetectBilling: isOnetimeModal, initUserContext: pricingModal.pricingContext.initUserContext }, pricingModal.mode) }) })] }) })) : null] }));
 }
 const CreditNavPopoverContext = React.createContext(null);
 function useCreditNavPopover() {

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { cn } from '@windrun-huaiin/lib/utils';
-import { globalLucideIcons } from '@windrun-huaiin/base-ui/components/server';
+import { GemIcon, XIcon } from '@windrun-huaiin/base-ui/icons';
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle } 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';
@@ -104,7 +104,7 @@ function CreditNavButton({ locale, totalBalance, totalLabel, children, }) {
         closePricingModal,
     }), [closeMenu, isMobile, openPricingModal, closePricingModal]);
     const isOnetimeModal = pricingModal.mode === 'onetime';
-    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(globalLucideIcons.Gem, { 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: "mt-5 sm:mt-6 md:mt-10 lg:mt-15 w-[95vw] max-w-[1200px] overflow-hidden border border-slate-200 bg-white p-0 shadow-[0_32px_90px_rgba(15,23,42,0.25)] ring-1 ring-black/5 dark:border-white/12 dark:bg-[#0f1222] dark:shadow-[0_40px_120px_rgba(0,0,0,0.6)] dark:ring-white/10", 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(globalLucideIcons.X, { 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: isOnetimeModal ? 'onetime' : undefined, 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(AlertDialog, { open: pricingModal.open, onOpenChange: (open) => setPricingModal((prev) => (Object.assign(Object.assign({}, prev), { open }))), children: jsxs(AlertDialogContent, { className: "mt-5 sm:mt-6 md:mt-10 lg:mt-15 w-[95vw] max-w-[1200px] overflow-hidden border border-slate-200 bg-white p-0 shadow-[0_32px_90px_rgba(15,23,42,0.25)] ring-1 ring-black/5 dark:border-white/12 dark:bg-[#0f1222] dark:shadow-[0_40px_120px_rgba(0,0,0,0.6)] dark:ring-white/10", 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: isOnetimeModal ? 'onetime' : undefined, disableAutoDetectBilling: isOnetimeModal, initUserContext: pricingModal.pricingContext.initUserContext }, pricingModal.mode) }) })] }) })) : null] }));
 }
 const CreditNavPopoverContext = createContext(null);
 function useCreditNavPopover() {

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

@@ -5,7 +5,7 @@ var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var nextjs = require('@clerk/nextjs');
 var gradientButton = require('../../fuma/mdx/gradient-button.js');
-var server = require('@windrun-huaiin/base-ui/components/server');
+var icons = require('@windrun-huaiin/base-ui/icons');
 var utils = require('@windrun-huaiin/lib/utils');
 var React = require('react');
 var customerPortal = require('../money-price/customer-portal.js');
@@ -231,10 +231,10 @@ function CreditOverviewClient({ data, locale, translations, className, expiringS
         userToggledRef.current = true;
         setBucketExpanded(true);
     }, []);
-    return (jsxRuntime.jsxs("section", { className: utils.cn("flex flex-col gap-2 p-2 shadow-inner rounded-xl bg-white dark:bg-slate-900", className), children: [jsxRuntime.jsxs("header", { className: "relative rounded-2xl bg-linear-to-bl from-indigo-200/60 via-indigo-400/90 to-purple-200/50 p-4 shadow-inner dark:from-indigo-300/20 dark:via-slate-400 dark:to-slate-500/50 sm:p-6", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 sm:gap-3", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-start rounded-full ", children: [jsxRuntime.jsx(server.globalLucideIcons.Gem, { "aria-hidden": true, className: "mr-2 h-6 w-6 sm:h-8 sm:w-8" }), jsxRuntime.jsx("span", { className: "text-base sm:text-lg", children: translations.totalLabel })] }), jsxRuntime.jsx("div", { className: "flex justify-center text-3xl font-semibold leading-tight sm:text-4xl", children: formatNumber(locale, data.totalBalance) }), jsxRuntime.jsxs("div", { className: "flex-1 flex-col gap-1", children: [jsxRuntime.jsx("p", { className: "text-xs text-gray-700 dark:text-slate-100 sm:text-sm", children: translations.subscriptionPeriodLabel }), jsxRuntime.jsx("h4", { className: "text-xl font-semibold sm:text-2xl", children: subscription ? subscription.planName : translations.subscriptionInactive })] }), jsxRuntime.jsx("div", { className: "pt-2 sm:pt-0", children: jsxRuntime.jsx(gradientButton.GradientButton, { title: subscription ? translations.subscriptionManage : translations.subscribePay, align: "center", icon: subscription ? jsxRuntime.jsx(server.globalLucideIcons.Settings2, {}) : jsxRuntime.jsx(server.globalLucideIcons.Bell, {}), openInNewTab: false, className: "w-full", onClick: subscription ? handleManageAction : handleSubscribeAction }) })] }), jsxRuntime.jsx("div", { className: "absolute right-3 top-3 sm:right-6 sm:top-6", children: jsxRuntime.jsx(HoverInfo, { label: translations.totalLabel, description: translations.summaryDescription }) })] }), jsxRuntime.jsxs("section", { className: "relative flex flex-col gap-3 rounded-2xl border p-4 shadow-inner sm:gap-2 sm:p-5", children: [jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [jsxRuntime.jsx("h3", { className: "text-base text-gray-500 dark:text-slate-100 sm:text-lg", children: translations.bucketsTitle }), hasBuckets ? (jsxRuntime.jsx("button", { type: "button", "aria-expanded": bucketExpanded, "aria-label": bucketExpanded ? translations.hiddenDetail : translations.expandDetail, onClick: toggleBucketExpanded, className: "flex h-7 w-7 items-center justify-center rounded-full border border-transparent bg-white text-purple-600 shadow-[0_6px_20px_rgba(99,102,241,0.25)] transition-colors hover:text-purple-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-purple-500 dark:bg-[#1b1541] dark:text-purple-100 dark:hover:text-purple-50 dark:shadow-[0_6px_22px_rgba(112,86,255,0.35)]", children: bucketExpanded ? (jsxRuntime.jsx(server.globalLucideIcons.ChevronUp, { className: "h-4 w-4" })) : (jsxRuntime.jsx(server.globalLucideIcons.ChevronDown, { className: "h-4 w-4" })) })) : null] }), hasBuckets ? (bucketExpanded ? (jsxRuntime.jsx("ul", { className: "flex flex-col gap-2", children: buckets.map((bucket) => {
+    return (jsxRuntime.jsxs("section", { className: utils.cn("flex flex-col gap-2 p-2 shadow-inner rounded-xl bg-white dark:bg-slate-900", className), children: [jsxRuntime.jsxs("header", { className: "relative rounded-2xl bg-linear-to-bl from-indigo-200/60 via-indigo-400/90 to-purple-200/50 p-4 shadow-inner dark:from-indigo-300/20 dark:via-slate-400 dark:to-slate-500/50 sm:p-6", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 sm:gap-3", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-start rounded-full ", children: [jsxRuntime.jsx(icons.GemIcon, { "aria-hidden": true, className: "mr-2 h-6 w-6 sm:h-8 sm:w-8" }), jsxRuntime.jsx("span", { className: "text-base sm:text-lg", children: translations.totalLabel })] }), jsxRuntime.jsx("div", { className: "flex justify-center text-3xl font-semibold leading-tight sm:text-4xl", children: formatNumber(locale, data.totalBalance) }), jsxRuntime.jsxs("div", { className: "flex-1 flex-col gap-1", children: [jsxRuntime.jsx("p", { className: "text-xs text-gray-700 dark:text-slate-100 sm:text-sm", children: translations.subscriptionPeriodLabel }), jsxRuntime.jsx("h4", { className: "text-xl font-semibold sm:text-2xl", children: subscription ? subscription.planName : translations.subscriptionInactive })] }), jsxRuntime.jsx("div", { className: "pt-2 sm:pt-0", children: jsxRuntime.jsx(gradientButton.GradientButton, { title: subscription ? translations.subscriptionManage : translations.subscribePay, align: "center", icon: subscription ? jsxRuntime.jsx(icons.Settings2Icon, {}) : jsxRuntime.jsx(icons.BellIcon, {}), openInNewTab: false, className: "w-full", onClick: subscription ? handleManageAction : handleSubscribeAction }) })] }), jsxRuntime.jsx("div", { className: "absolute right-3 top-3 sm:right-6 sm:top-6", children: jsxRuntime.jsx(HoverInfo, { label: translations.totalLabel, description: translations.summaryDescription }) })] }), jsxRuntime.jsxs("section", { className: "relative flex flex-col gap-3 rounded-2xl border p-4 shadow-inner sm:gap-2 sm:p-5", children: [jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [jsxRuntime.jsx("h3", { className: "text-base text-gray-500 dark:text-slate-100 sm:text-lg", children: translations.bucketsTitle }), hasBuckets ? (jsxRuntime.jsx("button", { type: "button", "aria-expanded": bucketExpanded, "aria-label": bucketExpanded ? translations.hiddenDetail : translations.expandDetail, onClick: toggleBucketExpanded, className: "flex h-7 w-7 items-center justify-center rounded-full border border-transparent bg-white text-purple-600 shadow-[0_6px_20px_rgba(99,102,241,0.25)] transition-colors hover:text-purple-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-purple-500 dark:bg-[#1b1541] dark:text-purple-100 dark:hover:text-purple-50 dark:shadow-[0_6px_22px_rgba(112,86,255,0.35)]", children: bucketExpanded ? (jsxRuntime.jsx(icons.ChevronUpIcon, { className: "h-4 w-4" })) : (jsxRuntime.jsx(icons.ChevronDownIcon, { className: "h-4 w-4" })) })) : null] }), hasBuckets ? (bucketExpanded ? (jsxRuntime.jsx("ul", { className: "flex flex-col gap-2", children: buckets.map((bucket) => {
                             const balanceDisplay = formatNumber(locale, bucket.balance);
                             return (jsxRuntime.jsxs("li", { "data-credit-kind": bucket.kind, className: "rounded-2xl border border-slate-200/70 bg-white/85 px-3 py-3 text-sm shadow-sm transition-transform hover:-translate-y-0.5 hover:shadow-md dark:border-slate-800/60 dark:bg-slate-900/60 sm:px-4", children: [jsxRuntime.jsxs("div", { className: "grid grid-cols-[1fr_auto] items-center gap-3 text-xs sm:text-sm", children: [jsxRuntime.jsx("span", { className: "flex min-w-0 items-center gap-2", children: jsxRuntime.jsx("span", { className: "max-w-full truncate rounded-full bg-purple-50 px-2 py-1 text-xs text-purple-600 shadow-sm dark:bg-purple-500/20 dark:text-purple-100 sm:text-sm", children: bucket.computedLabel }) }), jsxRuntime.jsx("span", { className: "flex min-w-0 justify-end", children: jsxRuntime.jsx("span", { className: "text-right text-base font-semibold leading-tight text-gray-500 dark:text-slate-100 sm:text-lg", title: balanceDisplay, children: balanceDisplay }) })] }), jsxRuntime.jsx("div", { className: "mt-3 flex justify-end gap-2", children: jsxRuntime.jsxs("span", { className: "text-[11px] text-gray-500 dark:text-slate-100 sm:text-xs", children: [translations.expiredAtLabel, ": ", bucket.expiresAt] }) })] }, bucket.kind));
-                        }) })) : (jsxRuntime.jsx("button", { type: "button", onClick: expandBuckets, className: "w-full rounded-2xl border border-slate-200/70 bg-white/85 p-6 sm:px-4 text-sm shadow-sm transition-transform hover:-translate-y-0.5 hover:shadow-md dark:border-slate-800/60 dark:bg-slate-900/60 hover:text-purple-500", children: translations.expandDetail }))) : (jsxRuntime.jsx("div", { className: "w-full rounded-2xl border border-slate-200/70 bg-white/85 p-6 sm:px-4 text-sm shadow-sm transition-transform dark:border-slate-800/60 dark:bg-slate-900/60 text-center", children: translations.bucketsEmpty })), jsxRuntime.jsx(gradientButton.GradientButton, { title: translations.onetimeBuy, icon: jsxRuntime.jsx(server.globalLucideIcons.ShoppingCart, {}), align: "center", className: "w-full text-sm sm:text-base", onClick: handleOnetimeAction })] })] }));
+                        }) })) : (jsxRuntime.jsx("button", { type: "button", onClick: expandBuckets, className: "w-full rounded-2xl border border-slate-200/70 bg-white/85 p-6 sm:px-4 text-sm shadow-sm transition-transform hover:-translate-y-0.5 hover:shadow-md dark:border-slate-800/60 dark:bg-slate-900/60 hover:text-purple-500", children: translations.expandDetail }))) : (jsxRuntime.jsx("div", { className: "w-full rounded-2xl border border-slate-200/70 bg-white/85 p-6 sm:px-4 text-sm shadow-sm transition-transform dark:border-slate-800/60 dark:bg-slate-900/60 text-center", children: translations.bucketsEmpty })), jsxRuntime.jsx(gradientButton.GradientButton, { title: translations.onetimeBuy, icon: jsxRuntime.jsx(icons.ShoppingCartIcon, {}), align: "center", className: "w-full text-sm sm:text-base", onClick: handleOnetimeAction })] })] }));
 }
 function deriveStatus(expiresAt, thresholdDays = 7) {
     if (!expiresAt) {
@@ -263,7 +263,7 @@ function HoverInfo({ description, variant = 'default' }) {
     }
     return (jsxRuntime.jsxs("span", { className: "group relative inline-flex shrink-0", children: [jsxRuntime.jsx("button", { type: "button", "aria-label": description, className: utils.cn('flex h-7 w-7 items-center justify-center rounded-full border text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-purple-500', variant === 'muted'
                     ? 'border-transparent bg-slate-100 text-slate-500 hover:text-slate-700 dark:bg-slate-800/70 dark:text-slate-100 dark:hover:text-slate-100'
-                    : 'border-transparent bg-white text-purple-600 shadow-[0_6px_20px_rgba(99,102,241,0.25)] hover:text-purple-700 dark:bg-[#1b1541] dark:text-purple-100 dark:hover:text-purple-50 dark:shadow-[0_6px_22px_rgba(112,86,255,0.35)]'), children: jsxRuntime.jsx(server.globalLucideIcons.CircleQuestionMark, { className: "h-3.5 w-3.5" }) }), jsxRuntime.jsx("span", { role: "tooltip", className: "pointer-events-none absolute top-full right-full z-50 mt-3 w-max max-w-[260px] translate-x-4 rounded-xl border border-slate-200/70 bg-slate-900/95 px-3 py-2 text-xs leading-relaxed text-white opacity-0 shadow-xl ring-1 ring-black/30 transition-all duration-150 ease-out group-hover:-translate-y-1 group-hover:opacity-100 group-focus-within:-translate-y-1 group-focus-within:opacity-100 dark:border-slate-700/60 dark:bg-slate-800/95", children: jsxRuntime.jsx("span", { className: "mt-1 block text-white dark:text-slate-100", children: description }) })] }));
+                    : 'border-transparent bg-white text-purple-600 shadow-[0_6px_20px_rgba(99,102,241,0.25)] hover:text-purple-700 dark:bg-[#1b1541] dark:text-purple-100 dark:hover:text-purple-50 dark:shadow-[0_6px_22px_rgba(112,86,255,0.35)]'), children: jsxRuntime.jsx(icons.CircleQuestionMarkIcon, { className: "h-3.5 w-3.5" }) }), jsxRuntime.jsx("span", { role: "tooltip", className: "pointer-events-none absolute top-full right-full z-50 mt-3 w-max max-w-[260px] translate-x-4 rounded-xl border border-slate-200/70 bg-slate-900/95 px-3 py-2 text-xs leading-relaxed text-white opacity-0 shadow-xl ring-1 ring-black/30 transition-all duration-150 ease-out group-hover:-translate-y-1 group-hover:opacity-100 group-focus-within:-translate-y-1 group-focus-within:opacity-100 dark:border-slate-700/60 dark:bg-slate-800/95", children: jsxRuntime.jsx("span", { className: "mt-1 block text-white dark:text-slate-100", children: description }) })] }));
 }
 
 exports.CreditOverviewClient = CreditOverviewClient;

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

@@ -3,7 +3,7 @@ import { __awaiter } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useClerk } from '@clerk/nextjs';
 import { GradientButton } from '../../fuma/mdx/gradient-button.mjs';
-import { globalLucideIcons } from '@windrun-huaiin/base-ui/components/server';
+import { GemIcon, Settings2Icon, BellIcon, ChevronUpIcon, ChevronDownIcon, ShoppingCartIcon, CircleQuestionMarkIcon } from '@windrun-huaiin/base-ui/icons';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { useState, useRef, useCallback, useMemo, useLayoutEffect } from 'react';
 import { redirectToCustomerPortal } from '../money-price/customer-portal.mjs';
@@ -229,10 +229,10 @@ function CreditOverviewClient({ data, locale, translations, className, expiringS
         userToggledRef.current = true;
         setBucketExpanded(true);
     }, []);
-    return (jsxs("section", { className: cn("flex flex-col gap-2 p-2 shadow-inner rounded-xl bg-white dark:bg-slate-900", className), children: [jsxs("header", { className: "relative rounded-2xl bg-linear-to-bl from-indigo-200/60 via-indigo-400/90 to-purple-200/50 p-4 shadow-inner dark:from-indigo-300/20 dark:via-slate-400 dark:to-slate-500/50 sm:p-6", children: [jsxs("div", { className: "flex flex-col gap-2 sm:gap-3", children: [jsxs("div", { className: "flex items-center justify-start rounded-full ", children: [jsx(globalLucideIcons.Gem, { "aria-hidden": true, className: "mr-2 h-6 w-6 sm:h-8 sm:w-8" }), jsx("span", { className: "text-base sm:text-lg", children: translations.totalLabel })] }), jsx("div", { className: "flex justify-center text-3xl font-semibold leading-tight sm:text-4xl", children: formatNumber(locale, data.totalBalance) }), jsxs("div", { className: "flex-1 flex-col gap-1", children: [jsx("p", { className: "text-xs text-gray-700 dark:text-slate-100 sm:text-sm", children: translations.subscriptionPeriodLabel }), jsx("h4", { className: "text-xl font-semibold sm:text-2xl", children: subscription ? subscription.planName : translations.subscriptionInactive })] }), jsx("div", { className: "pt-2 sm:pt-0", children: jsx(GradientButton, { title: subscription ? translations.subscriptionManage : translations.subscribePay, align: "center", icon: subscription ? jsx(globalLucideIcons.Settings2, {}) : jsx(globalLucideIcons.Bell, {}), openInNewTab: false, className: "w-full", onClick: subscription ? handleManageAction : handleSubscribeAction }) })] }), jsx("div", { className: "absolute right-3 top-3 sm:right-6 sm:top-6", children: jsx(HoverInfo, { label: translations.totalLabel, description: translations.summaryDescription }) })] }), jsxs("section", { className: "relative flex flex-col gap-3 rounded-2xl border p-4 shadow-inner sm:gap-2 sm:p-5", children: [jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [jsx("h3", { className: "text-base text-gray-500 dark:text-slate-100 sm:text-lg", children: translations.bucketsTitle }), hasBuckets ? (jsx("button", { type: "button", "aria-expanded": bucketExpanded, "aria-label": bucketExpanded ? translations.hiddenDetail : translations.expandDetail, onClick: toggleBucketExpanded, className: "flex h-7 w-7 items-center justify-center rounded-full border border-transparent bg-white text-purple-600 shadow-[0_6px_20px_rgba(99,102,241,0.25)] transition-colors hover:text-purple-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-purple-500 dark:bg-[#1b1541] dark:text-purple-100 dark:hover:text-purple-50 dark:shadow-[0_6px_22px_rgba(112,86,255,0.35)]", children: bucketExpanded ? (jsx(globalLucideIcons.ChevronUp, { className: "h-4 w-4" })) : (jsx(globalLucideIcons.ChevronDown, { className: "h-4 w-4" })) })) : null] }), hasBuckets ? (bucketExpanded ? (jsx("ul", { className: "flex flex-col gap-2", children: buckets.map((bucket) => {
+    return (jsxs("section", { className: cn("flex flex-col gap-2 p-2 shadow-inner rounded-xl bg-white dark:bg-slate-900", className), children: [jsxs("header", { className: "relative rounded-2xl bg-linear-to-bl from-indigo-200/60 via-indigo-400/90 to-purple-200/50 p-4 shadow-inner dark:from-indigo-300/20 dark:via-slate-400 dark:to-slate-500/50 sm:p-6", children: [jsxs("div", { className: "flex flex-col gap-2 sm:gap-3", children: [jsxs("div", { className: "flex items-center justify-start rounded-full ", children: [jsx(GemIcon, { "aria-hidden": true, className: "mr-2 h-6 w-6 sm:h-8 sm:w-8" }), jsx("span", { className: "text-base sm:text-lg", children: translations.totalLabel })] }), jsx("div", { className: "flex justify-center text-3xl font-semibold leading-tight sm:text-4xl", children: formatNumber(locale, data.totalBalance) }), jsxs("div", { className: "flex-1 flex-col gap-1", children: [jsx("p", { className: "text-xs text-gray-700 dark:text-slate-100 sm:text-sm", children: translations.subscriptionPeriodLabel }), jsx("h4", { className: "text-xl font-semibold sm:text-2xl", children: subscription ? subscription.planName : translations.subscriptionInactive })] }), jsx("div", { className: "pt-2 sm:pt-0", children: jsx(GradientButton, { title: subscription ? translations.subscriptionManage : translations.subscribePay, align: "center", icon: subscription ? jsx(Settings2Icon, {}) : jsx(BellIcon, {}), openInNewTab: false, className: "w-full", onClick: subscription ? handleManageAction : handleSubscribeAction }) })] }), jsx("div", { className: "absolute right-3 top-3 sm:right-6 sm:top-6", children: jsx(HoverInfo, { label: translations.totalLabel, description: translations.summaryDescription }) })] }), jsxs("section", { className: "relative flex flex-col gap-3 rounded-2xl border p-4 shadow-inner sm:gap-2 sm:p-5", children: [jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [jsx("h3", { className: "text-base text-gray-500 dark:text-slate-100 sm:text-lg", children: translations.bucketsTitle }), hasBuckets ? (jsx("button", { type: "button", "aria-expanded": bucketExpanded, "aria-label": bucketExpanded ? translations.hiddenDetail : translations.expandDetail, onClick: toggleBucketExpanded, className: "flex h-7 w-7 items-center justify-center rounded-full border border-transparent bg-white text-purple-600 shadow-[0_6px_20px_rgba(99,102,241,0.25)] transition-colors hover:text-purple-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-purple-500 dark:bg-[#1b1541] dark:text-purple-100 dark:hover:text-purple-50 dark:shadow-[0_6px_22px_rgba(112,86,255,0.35)]", children: bucketExpanded ? (jsx(ChevronUpIcon, { className: "h-4 w-4" })) : (jsx(ChevronDownIcon, { className: "h-4 w-4" })) })) : null] }), hasBuckets ? (bucketExpanded ? (jsx("ul", { className: "flex flex-col gap-2", children: buckets.map((bucket) => {
                             const balanceDisplay = formatNumber(locale, bucket.balance);
                             return (jsxs("li", { "data-credit-kind": bucket.kind, className: "rounded-2xl border border-slate-200/70 bg-white/85 px-3 py-3 text-sm shadow-sm transition-transform hover:-translate-y-0.5 hover:shadow-md dark:border-slate-800/60 dark:bg-slate-900/60 sm:px-4", children: [jsxs("div", { className: "grid grid-cols-[1fr_auto] items-center gap-3 text-xs sm:text-sm", children: [jsx("span", { className: "flex min-w-0 items-center gap-2", children: jsx("span", { className: "max-w-full truncate rounded-full bg-purple-50 px-2 py-1 text-xs text-purple-600 shadow-sm dark:bg-purple-500/20 dark:text-purple-100 sm:text-sm", children: bucket.computedLabel }) }), jsx("span", { className: "flex min-w-0 justify-end", children: jsx("span", { className: "text-right text-base font-semibold leading-tight text-gray-500 dark:text-slate-100 sm:text-lg", title: balanceDisplay, children: balanceDisplay }) })] }), jsx("div", { className: "mt-3 flex justify-end gap-2", children: jsxs("span", { className: "text-[11px] text-gray-500 dark:text-slate-100 sm:text-xs", children: [translations.expiredAtLabel, ": ", bucket.expiresAt] }) })] }, bucket.kind));
-                        }) })) : (jsx("button", { type: "button", onClick: expandBuckets, className: "w-full rounded-2xl border border-slate-200/70 bg-white/85 p-6 sm:px-4 text-sm shadow-sm transition-transform hover:-translate-y-0.5 hover:shadow-md dark:border-slate-800/60 dark:bg-slate-900/60 hover:text-purple-500", children: translations.expandDetail }))) : (jsx("div", { className: "w-full rounded-2xl border border-slate-200/70 bg-white/85 p-6 sm:px-4 text-sm shadow-sm transition-transform dark:border-slate-800/60 dark:bg-slate-900/60 text-center", children: translations.bucketsEmpty })), jsx(GradientButton, { title: translations.onetimeBuy, icon: jsx(globalLucideIcons.ShoppingCart, {}), align: "center", className: "w-full text-sm sm:text-base", onClick: handleOnetimeAction })] })] }));
+                        }) })) : (jsx("button", { type: "button", onClick: expandBuckets, className: "w-full rounded-2xl border border-slate-200/70 bg-white/85 p-6 sm:px-4 text-sm shadow-sm transition-transform hover:-translate-y-0.5 hover:shadow-md dark:border-slate-800/60 dark:bg-slate-900/60 hover:text-purple-500", children: translations.expandDetail }))) : (jsx("div", { className: "w-full rounded-2xl border border-slate-200/70 bg-white/85 p-6 sm:px-4 text-sm shadow-sm transition-transform dark:border-slate-800/60 dark:bg-slate-900/60 text-center", children: translations.bucketsEmpty })), jsx(GradientButton, { title: translations.onetimeBuy, icon: jsx(ShoppingCartIcon, {}), align: "center", className: "w-full text-sm sm:text-base", onClick: handleOnetimeAction })] })] }));
 }
 function deriveStatus(expiresAt, thresholdDays = 7) {
     if (!expiresAt) {
@@ -261,7 +261,7 @@ function HoverInfo({ description, variant = 'default' }) {
     }
     return (jsxs("span", { className: "group relative inline-flex shrink-0", children: [jsx("button", { type: "button", "aria-label": description, className: cn('flex h-7 w-7 items-center justify-center rounded-full border text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-purple-500', variant === 'muted'
                     ? 'border-transparent bg-slate-100 text-slate-500 hover:text-slate-700 dark:bg-slate-800/70 dark:text-slate-100 dark:hover:text-slate-100'
-                    : 'border-transparent bg-white text-purple-600 shadow-[0_6px_20px_rgba(99,102,241,0.25)] hover:text-purple-700 dark:bg-[#1b1541] dark:text-purple-100 dark:hover:text-purple-50 dark:shadow-[0_6px_22px_rgba(112,86,255,0.35)]'), children: jsx(globalLucideIcons.CircleQuestionMark, { className: "h-3.5 w-3.5" }) }), jsx("span", { role: "tooltip", className: "pointer-events-none absolute top-full right-full z-50 mt-3 w-max max-w-[260px] translate-x-4 rounded-xl border border-slate-200/70 bg-slate-900/95 px-3 py-2 text-xs leading-relaxed text-white opacity-0 shadow-xl ring-1 ring-black/30 transition-all duration-150 ease-out group-hover:-translate-y-1 group-hover:opacity-100 group-focus-within:-translate-y-1 group-focus-within:opacity-100 dark:border-slate-700/60 dark:bg-slate-800/95", children: jsx("span", { className: "mt-1 block text-white dark:text-slate-100", children: description }) })] }));
+                    : 'border-transparent bg-white text-purple-600 shadow-[0_6px_20px_rgba(99,102,241,0.25)] hover:text-purple-700 dark:bg-[#1b1541] dark:text-purple-100 dark:hover:text-purple-50 dark:shadow-[0_6px_22px_rgba(112,86,255,0.35)]'), children: jsx(CircleQuestionMarkIcon, { className: "h-3.5 w-3.5" }) }), jsx("span", { role: "tooltip", className: "pointer-events-none absolute top-full right-full z-50 mt-3 w-max max-w-[260px] translate-x-4 rounded-xl border border-slate-200/70 bg-slate-900/95 px-3 py-2 text-xs leading-relaxed text-white opacity-0 shadow-xl ring-1 ring-black/30 transition-all duration-150 ease-out group-hover:-translate-y-1 group-hover:opacity-100 group-focus-within:-translate-y-1 group-focus-within:opacity-100 dark:border-slate-700/60 dark:bg-slate-800/95", children: jsx("span", { className: "mt-1 block text-white dark:text-slate-100", children: description }) })] }));
 }
 
 export { CreditOverviewClient };

package/dist/main/footer.js

@@ -3,7 +3,7 @@
 var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var server = require('next-intl/server');
-var server$1 = require('@windrun-huaiin/base-ui/components/server');
+var icons = require('@windrun-huaiin/base-ui/icons');
 var Link = require('next/link');
 var footerEmail = require('./footer-email.js');
 var tIntl = require('../lib/t-intl.js');
@@ -23,7 +23,7 @@ function Footer(_a) {
             clickToCopyText: tIntl.safeT(tFooter, 'clickToCopy', 'Click to copy'),
             copiedText: tIntl.safeT(tFooter, 'copied', 'Copied!'),
         };
-        return (jsxRuntime.jsxs("div", { className: "mb-10 w-full mx-auto", children: [jsxRuntime.jsx("div", { className: lib.cn("w-full border-current border-t", lib$1.themeIconColor) }), jsxRuntime.jsx("footer", { children: jsxRuntime.jsxs("div", { className: "w-full flex flex-col items-center justify-center px-4 py-8 space-y-3", children: [jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-x-2 gap-y-2 text-xs sm:text-sm sm:gap-x-6", children: [jsxRuntime.jsxs(Link, { href: lib.getAsNeededLocalizedUrl(locale, "/legal/terms", localePrefixAsNeeded, defaultLocale), className: "flex items-center space-x-1 hover:underline", children: [jsxRuntime.jsx(server$1.globalLucideIcons.ReceiptText, { className: "h-3.5 w-3.5" }), jsxRuntime.jsx("span", { children: data.terms })] }), jsxRuntime.jsxs(Link, { href: lib.getAsNeededLocalizedUrl(locale, "/legal/privacy", localePrefixAsNeeded, defaultLocale), className: "flex items-center space-x-1 hover:underline", children: [jsxRuntime.jsx(server$1.globalLucideIcons.ShieldUser, { className: "h-3.5 w-3.5" }), jsxRuntime.jsx("span", { children: data.privacy })] }), jsxRuntime.jsxs(footerEmail.FooterEmail, { email: data.email, clickToCopyText: data.clickToCopyText, copiedText: data.copiedText, children: [jsxRuntime.jsx(server$1.globalLucideIcons.Mail, { className: "h-3.5 w-3.5" }), jsxRuntime.jsx("span", { children: data.contactUs })] })] }), jsxRuntime.jsx("div", { className: "text-xs sm:text-sm text-center", children: jsxRuntime.jsx("span", { children: data.copyright }) })] }) })] }));
+        return (jsxRuntime.jsxs("div", { className: "mb-10 w-full mx-auto", children: [jsxRuntime.jsx("div", { className: lib.cn("w-full border-current border-t", lib$1.themeIconColor) }), jsxRuntime.jsx("footer", { children: jsxRuntime.jsxs("div", { className: "w-full flex flex-col items-center justify-center px-4 py-8 space-y-3", children: [jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-x-2 gap-y-2 text-xs sm:text-sm sm:gap-x-6", children: [jsxRuntime.jsxs(Link, { href: lib.getAsNeededLocalizedUrl(locale, "/legal/terms", localePrefixAsNeeded, defaultLocale), className: "flex items-center space-x-1 hover:underline", children: [jsxRuntime.jsx(icons.ReceiptTextIcon, { className: "h-3.5 w-3.5" }), jsxRuntime.jsx("span", { children: data.terms })] }), jsxRuntime.jsxs(Link, { href: lib.getAsNeededLocalizedUrl(locale, "/legal/privacy", localePrefixAsNeeded, defaultLocale), className: "flex items-center space-x-1 hover:underline", children: [jsxRuntime.jsx(icons.ShieldUserIcon, { className: "h-3.5 w-3.5" }), jsxRuntime.jsx("span", { children: data.privacy })] }), jsxRuntime.jsxs(footerEmail.FooterEmail, { email: data.email, clickToCopyText: data.clickToCopyText, copiedText: data.copiedText, children: [jsxRuntime.jsx(icons.MailIcon, { className: "h-3.5 w-3.5" }), jsxRuntime.jsx("span", { children: data.contactUs })] })] }), jsxRuntime.jsx("div", { className: "text-xs sm:text-sm text-center", children: jsxRuntime.jsx("span", { children: data.copyright }) })] }) })] }));
     });
 }
 

package/dist/main/footer.mjs

@@ -1,7 +1,7 @@
 import { __awaiter } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { getTranslations } from 'next-intl/server';
-import { globalLucideIcons } from '@windrun-huaiin/base-ui/components/server';
+import { ReceiptTextIcon, ShieldUserIcon, MailIcon } from '@windrun-huaiin/base-ui/icons';
 import Link from 'next/link';
 import { FooterEmail } from './footer-email.mjs';
 import { safeT } from '../lib/t-intl.mjs';
@@ -21,7 +21,7 @@ function Footer(_a) {
             clickToCopyText: safeT(tFooter, 'clickToCopy', 'Click to copy'),
             copiedText: safeT(tFooter, 'copied', 'Copied!'),
         };
-        return (jsxs("div", { className: "mb-10 w-full mx-auto", children: [jsx("div", { className: cn("w-full border-current border-t", themeIconColor) }), jsx("footer", { children: jsxs("div", { className: "w-full flex flex-col items-center justify-center px-4 py-8 space-y-3", children: [jsxs("div", { className: "flex flex-wrap items-center justify-center gap-x-2 gap-y-2 text-xs sm:text-sm sm:gap-x-6", children: [jsxs(Link, { href: getAsNeededLocalizedUrl(locale, "/legal/terms", localePrefixAsNeeded, defaultLocale), className: "flex items-center space-x-1 hover:underline", children: [jsx(globalLucideIcons.ReceiptText, { className: "h-3.5 w-3.5" }), jsx("span", { children: data.terms })] }), jsxs(Link, { href: getAsNeededLocalizedUrl(locale, "/legal/privacy", localePrefixAsNeeded, defaultLocale), className: "flex items-center space-x-1 hover:underline", children: [jsx(globalLucideIcons.ShieldUser, { className: "h-3.5 w-3.5" }), jsx("span", { children: data.privacy })] }), jsxs(FooterEmail, { email: data.email, clickToCopyText: data.clickToCopyText, copiedText: data.copiedText, children: [jsx(globalLucideIcons.Mail, { className: "h-3.5 w-3.5" }), jsx("span", { children: data.contactUs })] })] }), jsx("div", { className: "text-xs sm:text-sm text-center", children: jsx("span", { children: data.copyright }) })] }) })] }));
+        return (jsxs("div", { className: "mb-10 w-full mx-auto", children: [jsx("div", { className: cn("w-full border-current border-t", themeIconColor) }), jsx("footer", { children: jsxs("div", { className: "w-full flex flex-col items-center justify-center px-4 py-8 space-y-3", children: [jsxs("div", { className: "flex flex-wrap items-center justify-center gap-x-2 gap-y-2 text-xs sm:text-sm sm:gap-x-6", children: [jsxs(Link, { href: getAsNeededLocalizedUrl(locale, "/legal/terms", localePrefixAsNeeded, defaultLocale), className: "flex items-center space-x-1 hover:underline", children: [jsx(ReceiptTextIcon, { className: "h-3.5 w-3.5" }), jsx("span", { children: data.terms })] }), jsxs(Link, { href: getAsNeededLocalizedUrl(locale, "/legal/privacy", localePrefixAsNeeded, defaultLocale), className: "flex items-center space-x-1 hover:underline", children: [jsx(ShieldUserIcon, { className: "h-3.5 w-3.5" }), jsx("span", { children: data.privacy })] }), jsxs(FooterEmail, { email: data.email, clickToCopyText: data.clickToCopyText, copiedText: data.copiedText, children: [jsx(MailIcon, { className: "h-3.5 w-3.5" }), jsx("span", { children: data.contactUs })] })] }), jsx("div", { className: "text-xs sm:text-sm text-center", children: jsx("span", { children: data.copyright }) })] }) })] }));
     });
 }
 

package/dist/main/go-to-top.js

@@ -3,7 +3,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var server = require('@windrun-huaiin/base-ui/components/server');
+var icons = require('@windrun-huaiin/base-ui/icons');
 var lib = require('@windrun-huaiin/base-ui/lib');
 
 function GoToTop() {
@@ -28,7 +28,7 @@ function GoToTop() {
             behavior: 'smooth'
         });
     };
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isVisible && (jsxRuntime.jsx("button", { onClick: scrollToTop, className: `fixed bottom-6 right-6 p-3 ${lib.themeButtonGradientClass} ${lib.themeButtonGradientHoverClass} text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300 z-50`, "aria-label": "Go to top", children: jsxRuntime.jsx(server.globalLucideIcons.ArrowUp, { size: 20, className: "text-white" }) })) }));
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isVisible && (jsxRuntime.jsx("button", { onClick: scrollToTop, className: `fixed bottom-6 right-6 p-3 ${lib.themeButtonGradientClass} ${lib.themeButtonGradientHoverClass} text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300 z-50`, "aria-label": "Go to top", children: jsxRuntime.jsx(icons.ArrowUpIcon, { size: 20, className: "text-white" }) })) }));
 }
 
 exports.GoToTop = GoToTop;

package/dist/main/go-to-top.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
-import { globalLucideIcons } from '@windrun-huaiin/base-ui/components/server';
+import { ArrowUpIcon } from '@windrun-huaiin/base-ui/icons';
 import { themeButtonGradientClass, themeButtonGradientHoverClass } from '@windrun-huaiin/base-ui/lib';
 
 function GoToTop() {
@@ -26,7 +26,7 @@ function GoToTop() {
             behavior: 'smooth'
         });
     };
-    return (jsx(Fragment, { children: isVisible && (jsx("button", { onClick: scrollToTop, className: `fixed bottom-6 right-6 p-3 ${themeButtonGradientClass} ${themeButtonGradientHoverClass} text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300 z-50`, "aria-label": "Go to top", children: jsx(globalLucideIcons.ArrowUp, { size: 20, className: "text-white" }) })) }));
+    return (jsx(Fragment, { children: isVisible && (jsx("button", { onClick: scrollToTop, className: `fixed bottom-6 right-6 p-3 ${themeButtonGradientClass} ${themeButtonGradientHoverClass} text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300 z-50`, "aria-label": "Go to top", children: jsx(ArrowUpIcon, { size: 20, className: "text-white" }) })) }));
 }
 
 export { GoToTop };

package/dist/main/hero-media.d.ts

@@ -0,0 +1,14 @@
+interface HeroMediaProps {
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+    sizes?: string;
+    maxWidthClassName?: string;
+    wrapperClassName?: string;
+    imageClassName?: string;
+    placeholderClassName?: string;
+    preload?: boolean;
+}
+export declare function HeroMedia({ src, alt, width, height, sizes, maxWidthClassName, wrapperClassName, imageClassName, placeholderClassName, preload, }: HeroMediaProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/main/hero-media.js

@@ -0,0 +1,12 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var delayedImg = require('./delayed-img.js');
+var utils = require('@windrun-huaiin/lib/utils');
+
+function HeroMedia({ src, alt, width, height, sizes = "(max-width: 768px) 90vw, (max-width: 1200px) 45vw, 35vw", maxWidthClassName = "max-w-[500px]", wrapperClassName, imageClassName, placeholderClassName, preload = true, }) {
+    return (jsxRuntime.jsx("div", { className: utils.cn("w-full", maxWidthClassName), children: jsxRuntime.jsx("div", { className: utils.cn("group relative overflow-hidden rounded-lg shadow-purple-500/20", wrapperClassName), style: { aspectRatio: `${width} / ${height}` }, children: jsxRuntime.jsx(delayedImg.DelayedImg, { src: src, alt: alt, fill: true, preload: preload, sizes: sizes, className: utils.cn("rounded-lg object-cover group-hover:scale-105", imageClassName), wrapperClassName: "h-full w-full", placeholderClassName: utils.cn("rounded-lg", placeholderClassName) }) }) }));
+}
+
+exports.HeroMedia = HeroMedia;

package/dist/main/hero-media.mjs

@@ -0,0 +1,10 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { DelayedImg } from './delayed-img.mjs';
+import { cn } from '@windrun-huaiin/lib/utils';
+
+function HeroMedia({ src, alt, width, height, sizes = "(max-width: 768px) 90vw, (max-width: 1200px) 45vw, 35vw", maxWidthClassName = "max-w-[500px]", wrapperClassName, imageClassName, placeholderClassName, preload = true, }) {
+    return (jsx("div", { className: cn("w-full", maxWidthClassName), children: jsx("div", { className: cn("group relative overflow-hidden rounded-lg shadow-purple-500/20", wrapperClassName), style: { aspectRatio: `${width} / ${height}` }, children: jsx(DelayedImg, { src: src, alt: alt, fill: true, preload: preload, sizes: sizes, className: cn("rounded-lg object-cover group-hover:scale-105", imageClassName), wrapperClassName: "h-full w-full", placeholderClassName: cn("rounded-lg", placeholderClassName) }) }) }));
+}
+
+export { HeroMedia };

package/dist/main/hero-section.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+interface HeroSectionProps {
+    content: ReactNode;
+    media: ReactNode;
+    className?: string;
+    contentClassName?: string;
+    mediaClassName?: string;
+}
+export declare function HeroSection({ content, media, className, contentClassName, mediaClassName, }: HeroSectionProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/main/hero-section.js

@@ -0,0 +1,11 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var utils = require('@windrun-huaiin/lib/utils');
+
+function HeroSection({ content, media, className, contentClassName, mediaClassName, }) {
+    return (jsxRuntime.jsxs("section", { className: utils.cn("mx-auto mt-12 flex max-w-6xl flex-col gap-10 px-6 py-8 md:min-w-[calc(100vw-22rem)] md:px-4 md:flex-row md:items-center md:gap-12", className), children: [jsxRuntime.jsx("div", { className: utils.cn("flex-1 space-y-6", contentClassName), children: content }), jsxRuntime.jsx("div", { className: utils.cn("relative flex flex-1 justify-center md:justify-end", mediaClassName), children: media })] }));
+}
+
+exports.HeroSection = HeroSection;

package/dist/main/hero-section.mjs

@@ -0,0 +1,9 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from '@windrun-huaiin/lib/utils';
+
+function HeroSection({ content, media, className, contentClassName, mediaClassName, }) {
+    return (jsxs("section", { className: cn("mx-auto mt-12 flex max-w-6xl flex-col gap-10 px-6 py-8 md:min-w-[calc(100vw-22rem)] md:px-4 md:flex-row md:items-center md:gap-12", className), children: [jsx("div", { className: cn("flex-1 space-y-6", contentClassName), children: content }), jsx("div", { className: cn("relative flex flex-1 justify-center md:justify-end", mediaClassName), children: media })] }));
+}
+
+export { HeroSection };

package/dist/main/index.d.ts

@@ -16,3 +16,6 @@ export { MoneyPriceInteractive } from './money-price/money-price-interactive';
 export { MoneyPriceButton } from './money-price/money-price-button';
 export { CreditOverviewClient } from './credit/credit-overview-client';
 export { CreditNavButton } from './credit/credit-nav-button';
+export { HeroMedia } from './hero-media';
+export { HeroSection } from './hero-section';
+export { InfoTooltip } from './info-tooltip';

package/dist/main/index.js

@@ -22,6 +22,9 @@ var moneyPriceInteractive = require('./money-price/money-price-interactive.js');
 var moneyPriceButton = require('./money-price/money-price-button.js');
 var creditOverviewClient = require('./credit/credit-overview-client.js');
 var creditNavButton = require('./credit/credit-nav-button.js');
+var heroMedia = require('./hero-media.js');
+var heroSection = require('./hero-section.js');
+var infoTooltip = require('./info-tooltip.js');
 
 
 
@@ -49,3 +52,6 @@ exports.MoneyPriceInteractive = moneyPriceInteractive.MoneyPriceInteractive;
 exports.MoneyPriceButton = moneyPriceButton.MoneyPriceButton;
 exports.CreditOverviewClient = creditOverviewClient.CreditOverviewClient;
 exports.CreditNavButton = creditNavButton.CreditNavButton;
+exports.HeroMedia = heroMedia.HeroMedia;
+exports.HeroSection = heroSection.HeroSection;
+exports.InfoTooltip = infoTooltip.InfoTooltip;

package/dist/main/index.mjs

@@ -20,3 +20,6 @@ export { MoneyPriceInteractive } from './money-price/money-price-interactive.mjs
 export { MoneyPriceButton } from './money-price/money-price-button.mjs';
 export { CreditOverviewClient } from './credit/credit-overview-client.mjs';
 export { CreditNavButton } from './credit/credit-nav-button.mjs';
+export { HeroMedia } from './hero-media.mjs';
+export { HeroSection } from './hero-section.mjs';
+export { InfoTooltip } from './info-tooltip.mjs';

package/dist/main/info-tooltip.d.ts

@@ -0,0 +1,8 @@
+type InfoTooltipProps = {
+    content: string;
+    className?: string;
+    align?: 'start' | 'end';
+    desktopSide?: 'right' | 'bottom';
+};
+export declare function InfoTooltip({ content, className, align, desktopSide, }: InfoTooltipProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/main/info-tooltip.js

@@ -0,0 +1,48 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var icons = require('@windrun-huaiin/base-ui/icons');
+var lib = require('@windrun-huaiin/base-ui/lib');
+var utils = require('@windrun-huaiin/lib/utils');
+
+function InfoTooltip({ content, className, align = 'end', desktopSide = 'right', }) {
+    const normalizedContent = content.trim();
+    const containerRef = React.useRef(null);
+    const [open, setOpen] = React.useState(false);
+    React.useEffect(() => {
+        function handlePointerDown(event) {
+            if (!containerRef.current) {
+                return;
+            }
+            const target = event.target;
+            if (target instanceof Node && !containerRef.current.contains(target)) {
+                setOpen(false);
+            }
+        }
+        document.addEventListener('mousedown', handlePointerDown);
+        document.addEventListener('touchstart', handlePointerDown);
+        return () => {
+            document.removeEventListener('mousedown', handlePointerDown);
+            document.removeEventListener('touchstart', handlePointerDown);
+        };
+    }, []);
+    if (!normalizedContent) {
+        return null;
+    }
+    return (jsxRuntime.jsxs("span", { ref: containerRef, className: utils.cn('relative inline-flex h-5 w-5 shrink-0 align-middle', className), onMouseLeave: () => setOpen(false), children: [jsxRuntime.jsx("button", { type: "button", onMouseEnter: () => setOpen(true), onPointerDown: (event) => {
+                    event.stopPropagation();
+                }, onClick: (event) => {
+                    event.stopPropagation();
+                    setOpen((value) => !value);
+                }, className: utils.cn('inline-flex h-5 w-5 items-center justify-center rounded-full text-slate-400 transition', 'hover:bg-black/5 hover:dark:bg-white/5', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 dark:focus-visible:ring-offset-slate-950', 'hover:text-slate-700 dark:hover:text-white focus-visible:text-slate-700 dark:focus-visible:text-white', lib.themeIconColor, lib.themeRingColor), "aria-label": normalizedContent, "aria-expanded": open, children: jsxRuntime.jsx(icons.CircleQuestionMarkIcon, { className: "h-4 w-4" }) }), jsxRuntime.jsx("span", { className: utils.cn('pointer-events-none absolute top-full z-50 mt-2 w-[min(18rem,calc(100vw-2rem))] rounded-2xl border bg-white/95 px-3 py-2 text-xs leading-5 text-slate-600 shadow-xl backdrop-blur-sm dark:bg-slate-950/95 dark:text-slate-300', align === 'start' ? 'left-0 right-auto' : 'right-0 left-auto', desktopSide === 'right'
+                    ? align === 'start'
+                        ? 'sm:left-0 sm:right-auto md:left-full md:right-auto md:top-1/2 md:mt-0 md:ml-2 md:-translate-y-1/2'
+                        : 'sm:right-0 sm:left-auto md:left-full md:right-auto md:top-1/2 md:mt-0 md:ml-2 md:-translate-y-1/2'
+                    : align === 'start'
+                        ? 'md:left-0 md:right-auto md:top-full md:mt-2 md:ml-0 md:translate-y-0'
+                        : 'md:right-0 md:left-auto md:top-full md:mt-2 md:ml-0 md:translate-y-0', open ? 'block' : 'hidden', lib.themeBorderColor), role: "tooltip", children: normalizedContent })] }));
+}
+
+exports.InfoTooltip = InfoTooltip;

package/dist/main/info-tooltip.mjs

@@ -0,0 +1,46 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import { CircleQuestionMarkIcon } from '@windrun-huaiin/base-ui/icons';
+import { themeIconColor, themeRingColor, themeBorderColor } from '@windrun-huaiin/base-ui/lib';
+import { cn } from '@windrun-huaiin/lib/utils';
+
+function InfoTooltip({ content, className, align = 'end', desktopSide = 'right', }) {
+    const normalizedContent = content.trim();
+    const containerRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    useEffect(() => {
+        function handlePointerDown(event) {
+            if (!containerRef.current) {
+                return;
+            }
+            const target = event.target;
+            if (target instanceof Node && !containerRef.current.contains(target)) {
+                setOpen(false);
+            }
+        }
+        document.addEventListener('mousedown', handlePointerDown);
+        document.addEventListener('touchstart', handlePointerDown);
+        return () => {
+            document.removeEventListener('mousedown', handlePointerDown);
+            document.removeEventListener('touchstart', handlePointerDown);
+        };
+    }, []);
+    if (!normalizedContent) {
+        return null;
+    }
+    return (jsxs("span", { ref: containerRef, className: cn('relative inline-flex h-5 w-5 shrink-0 align-middle', className), onMouseLeave: () => setOpen(false), children: [jsx("button", { type: "button", onMouseEnter: () => setOpen(true), onPointerDown: (event) => {
+                    event.stopPropagation();
+                }, onClick: (event) => {
+                    event.stopPropagation();
+                    setOpen((value) => !value);
+                }, className: cn('inline-flex h-5 w-5 items-center justify-center rounded-full text-slate-400 transition', 'hover:bg-black/5 hover:dark:bg-white/5', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 dark:focus-visible:ring-offset-slate-950', 'hover:text-slate-700 dark:hover:text-white focus-visible:text-slate-700 dark:focus-visible:text-white', themeIconColor, themeRingColor), "aria-label": normalizedContent, "aria-expanded": open, children: jsx(CircleQuestionMarkIcon, { className: "h-4 w-4" }) }), jsx("span", { className: cn('pointer-events-none absolute top-full z-50 mt-2 w-[min(18rem,calc(100vw-2rem))] rounded-2xl border bg-white/95 px-3 py-2 text-xs leading-5 text-slate-600 shadow-xl backdrop-blur-sm dark:bg-slate-950/95 dark:text-slate-300', align === 'start' ? 'left-0 right-auto' : 'right-0 left-auto', desktopSide === 'right'
+                    ? align === 'start'
+                        ? 'sm:left-0 sm:right-auto md:left-full md:right-auto md:top-1/2 md:mt-0 md:ml-2 md:-translate-y-1/2'
+                        : 'sm:right-0 sm:left-auto md:left-full md:right-auto md:top-1/2 md:mt-0 md:ml-2 md:-translate-y-1/2'
+                    : align === 'start'
+                        ? 'md:left-0 md:right-auto md:top-full md:mt-2 md:ml-0 md:translate-y-0'
+                        : 'md:right-0 md:left-auto md:top-full md:mt-2 md:ml-0 md:translate-y-0', open ? 'block' : 'hidden', themeBorderColor), role: "tooltip", children: normalizedContent })] }));
+}
+
+export { InfoTooltip };