@windrun-huaiin/third-ui 13.1.0 → 13.1.2

package/dist/main/faq-interactive.js

@@ -4,48 +4,35 @@
 var React = require('react');
 
 function FAQInteractive({ data }) {
-    const [openStates, setOpenStates] = React.useState({});
     React.useEffect(() => {
-        // Progressive enhancement: Add interactivity to existing DOM elements
+        const cleanups = [];
         data.items.forEach((item) => {
             const toggleButton = document.querySelector(`[data-faq-toggle="${item.id}"]`);
             const contentDiv = document.querySelector(`[data-faq-content="${item.id}"]`);
             const iconSvg = document.querySelector(`[data-faq-icon="${item.id}"]`);
-            if (toggleButton && contentDiv && iconSvg) {
+            const cardDiv = document.querySelector(`[data-faq-id="${item.id}"]`);
+            if (toggleButton && contentDiv && iconSvg && cardDiv) {
+                const syncOpenState = (isOpen) => {
+                    contentDiv.classList.toggle('hidden', !isOpen);
+                    toggleButton.setAttribute('aria-expanded', String(isOpen));
+                    iconSvg.style.transform = isOpen ? 'rotate(90deg)' : 'rotate(0deg)';
+                    cardDiv.setAttribute('data-faq-open', String(isOpen));
+                };
                 const handleClick = () => {
-                    const isOpen = openStates[item.id] || false;
-                    const newOpenState = !isOpen;
-                    // Update state
-                    setOpenStates(prev => (Object.assign(Object.assign({}, prev), { [item.id]: newOpenState })));
-                    // Update DOM
-                    if (newOpenState) {
-                        contentDiv.classList.remove('hidden');
-                        toggleButton.setAttribute('aria-expanded', 'true');
-                        iconSvg.style.transform = 'rotate(90deg)';
-                    }
-                    else {
-                        contentDiv.classList.add('hidden');
-                        toggleButton.setAttribute('aria-expanded', 'false');
-                        iconSvg.style.transform = 'rotate(0deg)';
-                    }
+                    const isOpen = toggleButton.getAttribute('aria-expanded') === 'true';
+                    syncOpenState(!isOpen);
                 };
+                syncOpenState(toggleButton.getAttribute('aria-expanded') === 'true');
                 toggleButton.addEventListener('click', handleClick);
-                // Cleanup function will be handled by the effect cleanup
+                cleanups.push(() => {
+                    toggleButton.removeEventListener('click', handleClick);
+                });
             }
         });
-        // Cleanup event listeners
         return () => {
-            data.items.forEach((item) => {
-                var _a;
-                const toggleButton = document.querySelector(`[data-faq-toggle="${item.id}"]`);
-                if (toggleButton) {
-                    // Remove all event listeners by cloning the element
-                    const newButton = toggleButton.cloneNode(true);
-                    (_a = toggleButton.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(newButton, toggleButton);
-                }
-            });
+            cleanups.forEach((cleanup) => cleanup());
         };
-    }, [data, openStates]);
+    }, [data.items]);
     return null; // Progressive enhancement - no additional DOM rendering
 }
 

package/dist/main/faq-interactive.mjs

@@ -1,49 +1,36 @@
 "use client";
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
 
 function FAQInteractive({ data }) {
-    const [openStates, setOpenStates] = useState({});
     useEffect(() => {
-        // Progressive enhancement: Add interactivity to existing DOM elements
+        const cleanups = [];
         data.items.forEach((item) => {
             const toggleButton = document.querySelector(`[data-faq-toggle="${item.id}"]`);
             const contentDiv = document.querySelector(`[data-faq-content="${item.id}"]`);
             const iconSvg = document.querySelector(`[data-faq-icon="${item.id}"]`);
-            if (toggleButton && contentDiv && iconSvg) {
+            const cardDiv = document.querySelector(`[data-faq-id="${item.id}"]`);
+            if (toggleButton && contentDiv && iconSvg && cardDiv) {
+                const syncOpenState = (isOpen) => {
+                    contentDiv.classList.toggle('hidden', !isOpen);
+                    toggleButton.setAttribute('aria-expanded', String(isOpen));
+                    iconSvg.style.transform = isOpen ? 'rotate(90deg)' : 'rotate(0deg)';
+                    cardDiv.setAttribute('data-faq-open', String(isOpen));
+                };
                 const handleClick = () => {
-                    const isOpen = openStates[item.id] || false;
-                    const newOpenState = !isOpen;
-                    // Update state
-                    setOpenStates(prev => (Object.assign(Object.assign({}, prev), { [item.id]: newOpenState })));
-                    // Update DOM
-                    if (newOpenState) {
-                        contentDiv.classList.remove('hidden');
-                        toggleButton.setAttribute('aria-expanded', 'true');
-                        iconSvg.style.transform = 'rotate(90deg)';
-                    }
-                    else {
-                        contentDiv.classList.add('hidden');
-                        toggleButton.setAttribute('aria-expanded', 'false');
-                        iconSvg.style.transform = 'rotate(0deg)';
-                    }
+                    const isOpen = toggleButton.getAttribute('aria-expanded') === 'true';
+                    syncOpenState(!isOpen);
                 };
+                syncOpenState(toggleButton.getAttribute('aria-expanded') === 'true');
                 toggleButton.addEventListener('click', handleClick);
-                // Cleanup function will be handled by the effect cleanup
+                cleanups.push(() => {
+                    toggleButton.removeEventListener('click', handleClick);
+                });
             }
         });
-        // Cleanup event listeners
         return () => {
-            data.items.forEach((item) => {
-                var _a;
-                const toggleButton = document.querySelector(`[data-faq-toggle="${item.id}"]`);
-                if (toggleButton) {
-                    // Remove all event listeners by cloning the element
-                    const newButton = toggleButton.cloneNode(true);
-                    (_a = toggleButton.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(newButton, toggleButton);
-                }
-            });
+            cleanups.forEach((cleanup) => cleanup());
         };
-    }, [data, openStates]);
+    }, [data.items]);
     return null; // Progressive enhancement - no additional DOM rendering
 }
 

package/dist/main/faq.js

@@ -4,6 +4,7 @@ var tslib_es6 = require('../node_modules/.pnpm/@rollup_plugin-typescript@12.1.4_
 var jsxRuntime = require('react/jsx-runtime');
 var server = require('next-intl/server');
 var utils = require('@windrun-huaiin/lib/utils');
+var lib = require('@windrun-huaiin/base-ui/lib');
 var richTextExpert = require('./rich-text-expert.js');
 var faqInteractive = require('./faq-interactive.js');
 var sectionLayout = require('./section-layout.js');
@@ -22,7 +23,7 @@ function FAQ(_a) {
                 answer: richTextExpert.richText(t, `items.${index}.answer`)
             }))
         };
-        return (jsxRuntime.jsxs("section", { id: "faq", className: utils.cn(sectionLayout.responsiveSection, sectionClassName), children: [jsxRuntime.jsx("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-4", children: data.title }), jsxRuntime.jsx("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-base sm:text-lg mx-auto max-w-3xl", children: data.description }), jsxRuntime.jsx("div", { className: "space-y-6", children: data.items.map((item) => (jsxRuntime.jsxs("div", { "data-faq-id": item.id, className: "bg-white dark:bg-gray-800/60 p-6 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-purple-300 dark:hover:border-purple-500/50 transition shadow-sm dark:shadow-none", children: [jsxRuntime.jsxs("button", { className: "w-full flex items-center justify-between text-left focus:outline-none", "data-faq-toggle": item.id, "aria-expanded": "false", children: [jsxRuntime.jsx("span", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: item.question }), jsxRuntime.jsx("svg", { className: "w-6 h-6 text-gray-400 ml-2 transition-transform duration-200", "data-faq-icon": item.id, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })] }), jsxRuntime.jsx("div", { className: "mt-4 text-gray-700 dark:text-gray-300 text-base hidden", "data-faq-content": item.id, children: item.answer })] }, item.id))) }), jsxRuntime.jsx(faqInteractive.FAQInteractive, { data: data })] }));
+        return (jsxRuntime.jsxs("section", { id: "faq", className: utils.cn(sectionLayout.responsiveSection, sectionClassName), children: [jsxRuntime.jsx("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-4", children: data.title }), jsxRuntime.jsx("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-base sm:text-lg mx-auto max-w-3xl", children: data.description }), jsxRuntime.jsx("div", { className: "space-y-6", children: data.items.map((item) => (jsxRuntime.jsxs("div", { "data-faq-id": item.id, "data-faq-open": "false", className: utils.cn("bg-white dark:bg-gray-800/60 rounded-xl border border-gray-200 dark:border-gray-700 transition shadow-sm dark:shadow-none hover:border-current focus-within:border-current", lib.themeIconColor), children: [jsxRuntime.jsxs("button", { className: "w-full p-6 flex items-center justify-between text-left focus:outline-none", "data-faq-toggle": item.id, type: "button", "aria-expanded": "false", "aria-controls": `${item.id}-content`, children: [jsxRuntime.jsx("span", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: item.question }), jsxRuntime.jsx("svg", { className: "w-6 h-6 text-gray-400 ml-2 transition-transform duration-200", "data-faq-icon": item.id, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })] }), jsxRuntime.jsx("div", { id: `${item.id}-content`, className: "px-6 pb-6 text-gray-700 dark:text-gray-300 text-base hidden", "data-faq-content": item.id, children: jsxRuntime.jsx("div", { className: "pt-1", children: item.answer }) })] }, item.id))) }), jsxRuntime.jsx(faqInteractive.FAQInteractive, { data: data })] }));
     });
 }
 

package/dist/main/faq.mjs

@@ -2,6 +2,7 @@ import { __awaiter } from '../node_modules/.pnpm/@rollup_plugin-typescript@12.1.
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { getTranslations } from 'next-intl/server';
 import { cn } from '@windrun-huaiin/lib/utils';
+import { themeIconColor } from '@windrun-huaiin/base-ui/lib';
 import { richText } from './rich-text-expert.mjs';
 import { FAQInteractive } from './faq-interactive.mjs';
 import { responsiveSection } from './section-layout.mjs';
@@ -20,7 +21,7 @@ function FAQ(_a) {
                 answer: richText(t, `items.${index}.answer`)
             }))
         };
-        return (jsxs("section", { id: "faq", className: cn(responsiveSection, sectionClassName), children: [jsx("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-4", children: data.title }), jsx("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-base sm:text-lg mx-auto max-w-3xl", children: data.description }), jsx("div", { className: "space-y-6", children: data.items.map((item) => (jsxs("div", { "data-faq-id": item.id, className: "bg-white dark:bg-gray-800/60 p-6 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-purple-300 dark:hover:border-purple-500/50 transition shadow-sm dark:shadow-none", children: [jsxs("button", { className: "w-full flex items-center justify-between text-left focus:outline-none", "data-faq-toggle": item.id, "aria-expanded": "false", children: [jsx("span", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: item.question }), jsx("svg", { className: "w-6 h-6 text-gray-400 ml-2 transition-transform duration-200", "data-faq-icon": item.id, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })] }), jsx("div", { className: "mt-4 text-gray-700 dark:text-gray-300 text-base hidden", "data-faq-content": item.id, children: item.answer })] }, item.id))) }), jsx(FAQInteractive, { data: data })] }));
+        return (jsxs("section", { id: "faq", className: cn(responsiveSection, sectionClassName), children: [jsx("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-4", children: data.title }), jsx("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-base sm:text-lg mx-auto max-w-3xl", children: data.description }), jsx("div", { className: "space-y-6", children: data.items.map((item) => (jsxs("div", { "data-faq-id": item.id, "data-faq-open": "false", className: cn("bg-white dark:bg-gray-800/60 rounded-xl border border-gray-200 dark:border-gray-700 transition shadow-sm dark:shadow-none hover:border-current focus-within:border-current", themeIconColor), children: [jsxs("button", { className: "w-full p-6 flex items-center justify-between text-left focus:outline-none", "data-faq-toggle": item.id, type: "button", "aria-expanded": "false", "aria-controls": `${item.id}-content`, children: [jsx("span", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: item.question }), jsx("svg", { className: "w-6 h-6 text-gray-400 ml-2 transition-transform duration-200", "data-faq-icon": item.id, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })] }), jsx("div", { id: `${item.id}-content`, className: "px-6 pb-6 text-gray-700 dark:text-gray-300 text-base hidden", "data-faq-content": item.id, children: jsx("div", { className: "pt-1", children: item.answer }) })] }, item.id))) }), jsx(FAQInteractive, { data: data })] }));
     });
 }
 

package/dist/main/gallery/gallery-mobile-swiper.js

@@ -5,9 +5,14 @@ var jsxRuntime = require('react/jsx-runtime');
 var swiperReact = require('../../node_modules/.pnpm/swiper@12.1.2/node_modules/swiper/swiper-react.js');
 var pagination = require('../../node_modules/.pnpm/swiper@12.1.2/node_modules/swiper/modules/pagination.js');
 var Image = require('next/image');
+var lib = require('@windrun-huaiin/base-ui/lib');
 
+const swiperThemeStyle = {
+    "--gallery-swiper-bullet-active-color": lib.themeSvgIconColor,
+    "--swiper-theme-color": lib.themeSvgIconColor,
+};
 function GalleryMobileSwiper({ items }) {
-    return (jsxRuntime.jsx("div", { className: "block sm:hidden px-4", children: jsxRuntime.jsx("div", { className: "w-full overflow-hidden", style: { maxWidth: "min(calc(100vw - 48px), 350px)", margin: "0 auto" }, children: jsxRuntime.jsx(swiperReact.Swiper, { modules: [pagination.default], pagination: { clickable: true }, spaceBetween: 12, slidesPerView: 1, loop: true, grabCursor: true, className: "gallery-mobile-swiper rounded-2xl", children: items.map((item) => (jsxRuntime.jsx(swiperReact.SwiperSlide, { children: jsxRuntime.jsxs("div", { className: "relative w-full pb-[100%] bg-gray-100", children: [jsxRuntime.jsx(Image, { src: item.url, alt: item.altMsg, fill: true, sizes: "(max-width: 600px) min(100vw-48px, 350px)", className: "object-cover", "data-gallery-image": item.id }), jsxRuntime.jsx("button", { className: "absolute bottom-4 right-4 p-3 rounded-full bg-black/60 hover:bg-black/80 text-white transition-all z-10", "data-gallery-download": item.id, "aria-label": `Download ${item.altMsg}`, children: jsxRuntime.jsx("svg", { className: "h-5 w-5 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }) })] }) }, item.id))) }) }) }));
+    return (jsxRuntime.jsx("div", { className: "block sm:hidden px-4", children: jsxRuntime.jsx("div", { className: "w-full overflow-hidden", style: { maxWidth: "min(calc(100vw - 48px), 350px)", margin: "0 auto" }, children: jsxRuntime.jsx(swiperReact.Swiper, { modules: [pagination.default], pagination: { clickable: true }, spaceBetween: 12, slidesPerView: 1, loop: true, grabCursor: true, className: "gallery-mobile-swiper rounded-2xl", style: swiperThemeStyle, children: items.map((item) => (jsxRuntime.jsx(swiperReact.SwiperSlide, { children: jsxRuntime.jsxs("div", { className: "relative w-full pb-[100%] bg-gray-100", children: [jsxRuntime.jsx(Image, { src: item.url, alt: item.altMsg, fill: true, sizes: "(max-width: 600px) min(100vw-48px, 350px)", className: "object-cover", "data-gallery-image": item.id }), jsxRuntime.jsx("button", { className: "absolute bottom-4 right-4 p-3 rounded-full bg-black/60 hover:bg-black/80 text-white transition-all z-10", "data-gallery-download": item.id, "aria-label": `Download ${item.altMsg}`, children: jsxRuntime.jsx("svg", { className: "h-5 w-5 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }) })] }) }, item.id))) }) }) }));
 }
 
 exports.GalleryMobileSwiper = GalleryMobileSwiper;

package/dist/main/gallery/gallery-mobile-swiper.mjs

@@ -3,9 +3,14 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { Swiper, SwiperSlide } from '../../node_modules/.pnpm/swiper@12.1.2/node_modules/swiper/swiper-react.mjs';
 import Pagination from '../../node_modules/.pnpm/swiper@12.1.2/node_modules/swiper/modules/pagination.mjs';
 import Image from 'next/image';
+import { themeSvgIconColor } from '@windrun-huaiin/base-ui/lib';
 
+const swiperThemeStyle = {
+    "--gallery-swiper-bullet-active-color": themeSvgIconColor,
+    "--swiper-theme-color": themeSvgIconColor,
+};
 function GalleryMobileSwiper({ items }) {
-    return (jsx("div", { className: "block sm:hidden px-4", children: jsx("div", { className: "w-full overflow-hidden", style: { maxWidth: "min(calc(100vw - 48px), 350px)", margin: "0 auto" }, children: jsx(Swiper, { modules: [Pagination], pagination: { clickable: true }, spaceBetween: 12, slidesPerView: 1, loop: true, grabCursor: true, className: "gallery-mobile-swiper rounded-2xl", children: items.map((item) => (jsx(SwiperSlide, { children: jsxs("div", { className: "relative w-full pb-[100%] bg-gray-100", children: [jsx(Image, { src: item.url, alt: item.altMsg, fill: true, sizes: "(max-width: 600px) min(100vw-48px, 350px)", className: "object-cover", "data-gallery-image": item.id }), jsx("button", { className: "absolute bottom-4 right-4 p-3 rounded-full bg-black/60 hover:bg-black/80 text-white transition-all z-10", "data-gallery-download": item.id, "aria-label": `Download ${item.altMsg}`, children: jsx("svg", { className: "h-5 w-5 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }) })] }) }, item.id))) }) }) }));
+    return (jsx("div", { className: "block sm:hidden px-4", children: jsx("div", { className: "w-full overflow-hidden", style: { maxWidth: "min(calc(100vw - 48px), 350px)", margin: "0 auto" }, children: jsx(Swiper, { modules: [Pagination], pagination: { clickable: true }, spaceBetween: 12, slidesPerView: 1, loop: true, grabCursor: true, className: "gallery-mobile-swiper rounded-2xl", style: swiperThemeStyle, children: items.map((item) => (jsx(SwiperSlide, { children: jsxs("div", { className: "relative w-full pb-[100%] bg-gray-100", children: [jsx(Image, { src: item.url, alt: item.altMsg, fill: true, sizes: "(max-width: 600px) min(100vw-48px, 350px)", className: "object-cover", "data-gallery-image": item.id }), jsx("button", { className: "absolute bottom-4 right-4 p-3 rounded-full bg-black/60 hover:bg-black/80 text-white transition-all z-10", "data-gallery-download": item.id, "aria-label": `Download ${item.altMsg}`, children: jsx("svg", { className: "h-5 w-5 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }) })] }) }, item.id))) }) }) }));
 }
 
 export { GalleryMobileSwiper };

package/dist/main/loading.d.ts

@@ -1 +1,9 @@
-export declare function Loading(): import("react/jsx-runtime").JSX.Element;
+interface LoadingProps {
+    themeColor?: string;
+    compact?: boolean;
+    className?: string;
+    label?: string;
+    labelClassName?: string;
+}
+export declare function Loading({ themeColor, compact, className, label, labelClassName, }?: LoadingProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/main/loading.js

@@ -2,6 +2,8 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var utils = require('@windrun-huaiin/lib/utils');
+var lib = require('@windrun-huaiin/base-ui/lib');
 
 const NUM_ROWS = 15;
 const NUM_COLS = 15;
@@ -9,20 +11,44 @@ const DOT_SIZE = 6; // px, dot diameter
 const SPACING = 12; // px, space between dot centers
 const ANIMATION_DURATION = 1.8; // seconds
 const STAGGER_DELAY_FACTOR = 0.08; // seconds, delay per unit of distance from center
-// Expanded palette for more "dazzling" effect
-const COLORS = [
-    '#AC62FD', // Base Purple
-    '#C364FA',
-    '#DD59F7',
-    '#FF4FF2', // Bright Pink/Magenta
-    '#F067DD',
-    '#E26AF8',
-    '#DA70D6', // Orchid
-    '#BA55D3', // Medium Orchid
-    '#9370DB', // Medium Purple
-    '#8A2BE2' // Blue Violet
-];
-function Loading() {
+function clampChannel(value) {
+    return Math.max(0, Math.min(255, Math.round(value)));
+}
+function hexToRgb(hex) {
+    const normalized = hex.replace('#', '').trim();
+    const fullHex = normalized.length === 3
+        ? normalized.split('').map((char) => `${char}${char}`).join('')
+        : normalized;
+    if (!/^[0-9a-fA-F]{6}$/.test(fullHex)) {
+        return { r: 172, g: 98, b: 253 };
+    }
+    return {
+        r: Number.parseInt(fullHex.slice(0, 2), 16),
+        g: Number.parseInt(fullHex.slice(2, 4), 16),
+        b: Number.parseInt(fullHex.slice(4, 6), 16),
+    };
+}
+function shiftColor(hex, offset) {
+    var _a, _b, _c;
+    const { r, g, b } = hexToRgb(hex);
+    return `rgb(${clampChannel(r + ((_a = offset.r) !== null && _a !== void 0 ? _a : 0))}, ${clampChannel(g + ((_b = offset.g) !== null && _b !== void 0 ? _b : 0))}, ${clampChannel(b + ((_c = offset.b) !== null && _c !== void 0 ? _c : 0))})`;
+}
+function createLoadingPalette(baseHex) {
+    return [
+        shiftColor(baseHex, { r: 0, g: 0, b: 0 }),
+        shiftColor(baseHex, { r: 18, g: -10, b: 22 }),
+        shiftColor(baseHex, { r: 32, g: -18, b: 30 }),
+        shiftColor(baseHex, { r: 54, g: -30, b: 8 }),
+        shiftColor(baseHex, { r: 28, g: 4, b: 10 }),
+        shiftColor(baseHex, { r: 16, g: -6, b: 26 }),
+        shiftColor(baseHex, { r: 6, g: 14, b: -12 }),
+        shiftColor(baseHex, { r: -10, g: 8, b: 16 }),
+        shiftColor(baseHex, { r: -18, g: -6, b: 24 }),
+        shiftColor(baseHex, { r: -24, g: -14, b: 6 }),
+    ];
+}
+function Loading({ themeColor = lib.themeSvgIconColor, compact = false, className, label = 'Loading...', labelClassName, } = {}) {
+    const colors = createLoadingPalette(themeColor);
     const dots = [];
     const centerX = (NUM_COLS - 1) / 2;
     const centerY = (NUM_ROWS - 1) / 2;
@@ -37,14 +63,14 @@ function Loading() {
                 // Animation delay based on distance, creating a ripple effect
                 delay: distance * STAGGER_DELAY_FACTOR,
                 // Color selection based on distance rings
-                color: COLORS[Math.floor(distance) % COLORS.length],
+                color: colors[Math.floor(distance) % colors.length],
             });
         }
     }
     // Calculate the total width and height of the dot container
     const containerWidth = (NUM_COLS - 1) * SPACING + DOT_SIZE;
     const containerHeight = (NUM_ROWS - 1) * SPACING + DOT_SIZE;
-    return (jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center min-h-screen bg-neutral-900", children: jsxRuntime.jsxs("div", { style: {
+    return (jsxRuntime.jsx("div", { className: utils.cn('flex flex-col items-center justify-center bg-neutral-100 dark:bg-neutral-900', compact ? 'min-h-[250px] rounded-[28px] px-4 py-2' : 'min-h-screen', className), children: jsxRuntime.jsxs("div", { style: {
                 width: containerWidth,
                 height: containerHeight,
                 position: 'relative',
@@ -65,7 +91,7 @@ function Loading() {
                         animationDelay: `${dot.delay}s`,
                         opacity: 0,
                         transform: 'scale(0)',
-                    } }, dot.id))), jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center", style: { pointerEvents: 'none' }, children: jsxRuntime.jsx("p", { className: "text-xl font-semibold text-white", children: "Loading..." }) })] }) }));
+                    } }, dot.id))), jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center", style: { pointerEvents: 'none' }, children: jsxRuntime.jsx("p", { className: utils.cn('text-xl font-semibold text-white', labelClassName), children: label }) })] }) }));
 }
 
 exports.Loading = Loading;

package/dist/main/loading.mjs

@@ -1,5 +1,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { cn } from '@windrun-huaiin/lib/utils';
+import { themeSvgIconColor } from '@windrun-huaiin/base-ui/lib';
 
 const NUM_ROWS = 15;
 const NUM_COLS = 15;
@@ -7,20 +9,44 @@ const DOT_SIZE = 6; // px, dot diameter
 const SPACING = 12; // px, space between dot centers
 const ANIMATION_DURATION = 1.8; // seconds
 const STAGGER_DELAY_FACTOR = 0.08; // seconds, delay per unit of distance from center
-// Expanded palette for more "dazzling" effect
-const COLORS = [
-    '#AC62FD', // Base Purple
-    '#C364FA',
-    '#DD59F7',
-    '#FF4FF2', // Bright Pink/Magenta
-    '#F067DD',
-    '#E26AF8',
-    '#DA70D6', // Orchid
-    '#BA55D3', // Medium Orchid
-    '#9370DB', // Medium Purple
-    '#8A2BE2' // Blue Violet
-];
-function Loading() {
+function clampChannel(value) {
+    return Math.max(0, Math.min(255, Math.round(value)));
+}
+function hexToRgb(hex) {
+    const normalized = hex.replace('#', '').trim();
+    const fullHex = normalized.length === 3
+        ? normalized.split('').map((char) => `${char}${char}`).join('')
+        : normalized;
+    if (!/^[0-9a-fA-F]{6}$/.test(fullHex)) {
+        return { r: 172, g: 98, b: 253 };
+    }
+    return {
+        r: Number.parseInt(fullHex.slice(0, 2), 16),
+        g: Number.parseInt(fullHex.slice(2, 4), 16),
+        b: Number.parseInt(fullHex.slice(4, 6), 16),
+    };
+}
+function shiftColor(hex, offset) {
+    var _a, _b, _c;
+    const { r, g, b } = hexToRgb(hex);
+    return `rgb(${clampChannel(r + ((_a = offset.r) !== null && _a !== void 0 ? _a : 0))}, ${clampChannel(g + ((_b = offset.g) !== null && _b !== void 0 ? _b : 0))}, ${clampChannel(b + ((_c = offset.b) !== null && _c !== void 0 ? _c : 0))})`;
+}
+function createLoadingPalette(baseHex) {
+    return [
+        shiftColor(baseHex, { r: 0, g: 0, b: 0 }),
+        shiftColor(baseHex, { r: 18, g: -10, b: 22 }),
+        shiftColor(baseHex, { r: 32, g: -18, b: 30 }),
+        shiftColor(baseHex, { r: 54, g: -30, b: 8 }),
+        shiftColor(baseHex, { r: 28, g: 4, b: 10 }),
+        shiftColor(baseHex, { r: 16, g: -6, b: 26 }),
+        shiftColor(baseHex, { r: 6, g: 14, b: -12 }),
+        shiftColor(baseHex, { r: -10, g: 8, b: 16 }),
+        shiftColor(baseHex, { r: -18, g: -6, b: 24 }),
+        shiftColor(baseHex, { r: -24, g: -14, b: 6 }),
+    ];
+}
+function Loading({ themeColor = themeSvgIconColor, compact = false, className, label = 'Loading...', labelClassName, } = {}) {
+    const colors = createLoadingPalette(themeColor);
     const dots = [];
     const centerX = (NUM_COLS - 1) / 2;
     const centerY = (NUM_ROWS - 1) / 2;
@@ -35,14 +61,14 @@ function Loading() {
                 // Animation delay based on distance, creating a ripple effect
                 delay: distance * STAGGER_DELAY_FACTOR,
                 // Color selection based on distance rings
-                color: COLORS[Math.floor(distance) % COLORS.length],
+                color: colors[Math.floor(distance) % colors.length],
             });
         }
     }
     // Calculate the total width and height of the dot container
     const containerWidth = (NUM_COLS - 1) * SPACING + DOT_SIZE;
     const containerHeight = (NUM_ROWS - 1) * SPACING + DOT_SIZE;
-    return (jsx("div", { className: "flex flex-col items-center justify-center min-h-screen bg-neutral-900", children: jsxs("div", { style: {
+    return (jsx("div", { className: cn('flex flex-col items-center justify-center bg-neutral-100 dark:bg-neutral-900', compact ? 'min-h-[250px] rounded-[28px] px-4 py-2' : 'min-h-screen', className), children: jsxs("div", { style: {
                 width: containerWidth,
                 height: containerHeight,
                 position: 'relative',
@@ -63,7 +89,7 @@ function Loading() {
                         animationDelay: `${dot.delay}s`,
                         opacity: 0,
                         transform: 'scale(0)',
-                    } }, dot.id))), jsx("div", { className: "absolute inset-0 flex items-center justify-center", style: { pointerEvents: 'none' }, children: jsx("p", { className: "text-xl font-semibold text-white", children: "Loading..." }) })] }) }));
+                    } }, dot.id))), jsx("div", { className: "absolute inset-0 flex items-center justify-center", style: { pointerEvents: 'none' }, children: jsx("p", { className: cn('text-xl font-semibold text-white', labelClassName), children: label }) })] }) }));
 }
 
 export { Loading };

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

@@ -328,7 +328,7 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
                         const showBillingSubtitle = plan.showBillingSubTitle !== false;
                         const hasDiscount = !!pricing.discountPercent && !!pricing.originalAmount;
                         // 移动端宽度样式
-                        return (jsxRuntime.jsxs("div", { "data-price-plan": planKey, className: utils.cn('flex flex-col bg-white dark:bg-gray-800/60 rounded-2xl border border-gray-300 dark:border-[#7c3aed40] transition p-5 md:p-8 h-full shadow-sm dark:shadow-none w-[85vw] max-w-[360px]', 'md:w-[clamp(280px,32vw,360px)] md:max-w-[360px] md:shrink-0', 'hover:border-2 hover:border-purple-500', 'focus-within:border-2 focus-within:border-purple-500'), style: { minHeight: maxFeaturesCount * (isTouchDevice ? 86 : 100) }, children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-2", children: [jsxRuntime.jsx("span", { className: "text-lg md:text-xl font-bold text-gray-900 dark:text-gray-100", children: plan.title }), plan.titleTags && plan.titleTags.map((tag, i) => (jsxRuntime.jsx("span", { className: "px-2 py-0.5 text-xs rounded bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200 font-semibold align-middle", children: tag }, i)))] }), jsxRuntime.jsxs("div", { className: "flex flex-col items-start w-full", "data-price-container": planKey, children: [jsxRuntime.jsxs("div", { className: "flex items-end gap-2", children: [jsxRuntime.jsx("span", { className: "text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-gray-100", "data-price-value": planKey, children: pricing.amount === 0 ? 'Free' : `${data.currency}${pricing.amount}` }), pricing.amount > 0 && (jsxRuntime.jsx("span", { className: "text-base md:text-lg text-gray-700 dark:text-gray-300 font-medium mb-1", "data-price-unit": planKey, children: (selectedBillingOption === null || selectedBillingOption === void 0 ? void 0 : selectedBillingOption.unit) || '/month' }))] }), jsxRuntime.jsxs("div", { className: "flex flex-col md:flex-row items-start md:items-center gap-1 md:gap-2 min-h-[28px] mt-1", children: [hasDiscount && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("span", { className: "text-sm md:text-base text-gray-400 line-through", "data-price-original": planKey, children: [data.currency, pricing.originalAmount] }), (selectedBillingOption === null || selectedBillingOption === void 0 ? void 0 : selectedBillingOption.discountText) && (jsxRuntime.jsx("span", { className: "px-2 py-0.5 text-[11px] md:text-xs rounded bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 font-semibold align-middle", "data-price-discount": planKey, children: selectedBillingOption.discountText.replace('{percent}', String(pricing.discountPercent)) }))] })), jsxRuntime.jsx("div", { className: utils.cn('flex items-center gap-2 text-[11px] md:text-xs', !showBillingSubtitle && 'opacity-0 select-none'), "data-price-subtitle": planKey, children: showBillingSubtitle && billingType === 'onetime' ? (
+                        return (jsxRuntime.jsxs("div", { "data-price-plan": planKey, className: utils.cn('flex flex-col bg-white dark:bg-gray-800/60 rounded-2xl border border-gray-300 dark:border-[#7c3aed40] transition p-5 md:p-8 h-full shadow-sm dark:shadow-none w-[85vw] max-w-[360px]', 'md:w-[clamp(280px,32vw,360px)] md:max-w-[360px] md:shrink-0', 'hover:border-2 hover:border-current', 'focus-within:border-2 focus-within:border-current', lib.themeIconColor), style: { minHeight: maxFeaturesCount * (isTouchDevice ? 86 : 100) }, children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-2", children: [jsxRuntime.jsx("span", { className: "text-lg md:text-xl font-bold text-gray-900 dark:text-gray-100", children: plan.title }), plan.titleTags && plan.titleTags.map((tag, i) => (jsxRuntime.jsx("span", { className: "px-2 py-0.5 text-xs rounded bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200 font-semibold align-middle", children: tag }, i)))] }), jsxRuntime.jsxs("div", { className: "flex flex-col items-start w-full", "data-price-container": planKey, children: [jsxRuntime.jsxs("div", { className: "flex items-end gap-2", children: [jsxRuntime.jsx("span", { className: "text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-gray-100", "data-price-value": planKey, children: pricing.amount === 0 ? 'Free' : `${data.currency}${pricing.amount}` }), pricing.amount > 0 && (jsxRuntime.jsx("span", { className: "text-base md:text-lg text-gray-700 dark:text-gray-300 font-medium mb-1", "data-price-unit": planKey, children: (selectedBillingOption === null || selectedBillingOption === void 0 ? void 0 : selectedBillingOption.unit) || '/month' }))] }), jsxRuntime.jsxs("div", { className: "flex flex-col md:flex-row items-start md:items-center gap-1 md:gap-2 min-h-[28px] mt-1", children: [hasDiscount && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("span", { className: "text-sm md:text-base text-gray-400 line-through", "data-price-original": planKey, children: [data.currency, pricing.originalAmount] }), (selectedBillingOption === null || selectedBillingOption === void 0 ? void 0 : selectedBillingOption.discountText) && (jsxRuntime.jsx("span", { className: "px-2 py-0.5 text-[11px] md:text-xs rounded bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 font-semibold align-middle", "data-price-discount": planKey, children: selectedBillingOption.discountText.replace('{percent}', String(pricing.discountPercent)) }))] })), jsxRuntime.jsx("div", { className: utils.cn('flex items-center gap-2 text-[11px] md:text-xs', !showBillingSubtitle && 'opacity-0 select-none'), "data-price-subtitle": planKey, children: showBillingSubtitle && billingType === 'onetime' ? (
                                                     // OneTime 模式下的特殊处理：普通文本 + 带样式的产品副标题
                                                     jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(selectedBillingOption === null || selectedBillingOption === void 0 ? void 0 : selectedBillingOption.subTitle) && (jsxRuntime.jsx("span", { className: "text-[11px] md:text-xs text-gray-700 dark:text-gray-300 font-medium", children: selectedBillingOption.subTitle })), plan.subtitle && (jsxRuntime.jsxs("span", { className: "px-2 py-0.5 text-[11px] md:text-xs rounded bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 font-semibold align-middle", children: ["+", plan.subtitle] }))] })) : (
                                                     // 其他模式下保持原逻辑

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

@@ -9,7 +9,7 @@ import { MoneyPriceButton } from './money-price-button.mjs';
 import { getActiveProviderConfigUtil, getProductPricing } from './money-price-config-util.mjs';
 import { UserState } from './money-price-types.mjs';
 import { redirectToCustomerPortal } from './customer-portal.mjs';
-import { themeButtonGradientClass, themeButtonGradientHoverClass } from '@windrun-huaiin/base-ui/lib';
+import { themeButtonGradientClass, themeButtonGradientHoverClass, themeIconColor } from '@windrun-huaiin/base-ui/lib';
 
 const PLAN_KEYS = ['F1', 'P2', 'U3'];
 function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal = false, enabledBillingTypes, enableSubscriptionUpgrade = true, initialBillingType, disableAutoDetectBilling = false, initUserContext, }) {
@@ -326,7 +326,7 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
                         const showBillingSubtitle = plan.showBillingSubTitle !== false;
                         const hasDiscount = !!pricing.discountPercent && !!pricing.originalAmount;
                         // 移动端宽度样式
-                        return (jsxs("div", { "data-price-plan": planKey, className: cn('flex flex-col bg-white dark:bg-gray-800/60 rounded-2xl border border-gray-300 dark:border-[#7c3aed40] transition p-5 md:p-8 h-full shadow-sm dark:shadow-none w-[85vw] max-w-[360px]', 'md:w-[clamp(280px,32vw,360px)] md:max-w-[360px] md:shrink-0', 'hover:border-2 hover:border-purple-500', 'focus-within:border-2 focus-within:border-purple-500'), style: { minHeight: maxFeaturesCount * (isTouchDevice ? 86 : 100) }, children: [jsxs("div", { className: "flex items-center gap-2 mb-2", children: [jsx("span", { className: "text-lg md:text-xl font-bold text-gray-900 dark:text-gray-100", children: plan.title }), plan.titleTags && plan.titleTags.map((tag, i) => (jsx("span", { className: "px-2 py-0.5 text-xs rounded bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200 font-semibold align-middle", children: tag }, i)))] }), jsxs("div", { className: "flex flex-col items-start w-full", "data-price-container": planKey, children: [jsxs("div", { className: "flex items-end gap-2", children: [jsx("span", { className: "text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-gray-100", "data-price-value": planKey, children: pricing.amount === 0 ? 'Free' : `${data.currency}${pricing.amount}` }), pricing.amount > 0 && (jsx("span", { className: "text-base md:text-lg text-gray-700 dark:text-gray-300 font-medium mb-1", "data-price-unit": planKey, children: (selectedBillingOption === null || selectedBillingOption === void 0 ? void 0 : selectedBillingOption.unit) || '/month' }))] }), jsxs("div", { className: "flex flex-col md:flex-row items-start md:items-center gap-1 md:gap-2 min-h-[28px] mt-1", children: [hasDiscount && (jsxs(Fragment, { children: [jsxs("span", { className: "text-sm md:text-base text-gray-400 line-through", "data-price-original": planKey, children: [data.currency, pricing.originalAmount] }), (selectedBillingOption === null || selectedBillingOption === void 0 ? void 0 : selectedBillingOption.discountText) && (jsx("span", { className: "px-2 py-0.5 text-[11px] md:text-xs rounded bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 font-semibold align-middle", "data-price-discount": planKey, children: selectedBillingOption.discountText.replace('{percent}', String(pricing.discountPercent)) }))] })), jsx("div", { className: cn('flex items-center gap-2 text-[11px] md:text-xs', !showBillingSubtitle && 'opacity-0 select-none'), "data-price-subtitle": planKey, children: showBillingSubtitle && billingType === 'onetime' ? (
+                        return (jsxs("div", { "data-price-plan": planKey, className: cn('flex flex-col bg-white dark:bg-gray-800/60 rounded-2xl border border-gray-300 dark:border-[#7c3aed40] transition p-5 md:p-8 h-full shadow-sm dark:shadow-none w-[85vw] max-w-[360px]', 'md:w-[clamp(280px,32vw,360px)] md:max-w-[360px] md:shrink-0', 'hover:border-2 hover:border-current', 'focus-within:border-2 focus-within:border-current', themeIconColor), style: { minHeight: maxFeaturesCount * (isTouchDevice ? 86 : 100) }, children: [jsxs("div", { className: "flex items-center gap-2 mb-2", children: [jsx("span", { className: "text-lg md:text-xl font-bold text-gray-900 dark:text-gray-100", children: plan.title }), plan.titleTags && plan.titleTags.map((tag, i) => (jsx("span", { className: "px-2 py-0.5 text-xs rounded bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200 font-semibold align-middle", children: tag }, i)))] }), jsxs("div", { className: "flex flex-col items-start w-full", "data-price-container": planKey, children: [jsxs("div", { className: "flex items-end gap-2", children: [jsx("span", { className: "text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-gray-100", "data-price-value": planKey, children: pricing.amount === 0 ? 'Free' : `${data.currency}${pricing.amount}` }), pricing.amount > 0 && (jsx("span", { className: "text-base md:text-lg text-gray-700 dark:text-gray-300 font-medium mb-1", "data-price-unit": planKey, children: (selectedBillingOption === null || selectedBillingOption === void 0 ? void 0 : selectedBillingOption.unit) || '/month' }))] }), jsxs("div", { className: "flex flex-col md:flex-row items-start md:items-center gap-1 md:gap-2 min-h-[28px] mt-1", children: [hasDiscount && (jsxs(Fragment, { children: [jsxs("span", { className: "text-sm md:text-base text-gray-400 line-through", "data-price-original": planKey, children: [data.currency, pricing.originalAmount] }), (selectedBillingOption === null || selectedBillingOption === void 0 ? void 0 : selectedBillingOption.discountText) && (jsx("span", { className: "px-2 py-0.5 text-[11px] md:text-xs rounded bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 font-semibold align-middle", "data-price-discount": planKey, children: selectedBillingOption.discountText.replace('{percent}', String(pricing.discountPercent)) }))] })), jsx("div", { className: cn('flex items-center gap-2 text-[11px] md:text-xs', !showBillingSubtitle && 'opacity-0 select-none'), "data-price-subtitle": planKey, children: showBillingSubtitle && billingType === 'onetime' ? (
                                                     // OneTime 模式下的特殊处理：普通文本 + 带样式的产品副标题
                                                     jsxs(Fragment, { children: [(selectedBillingOption === null || selectedBillingOption === void 0 ? void 0 : selectedBillingOption.subTitle) && (jsx("span", { className: "text-[11px] md:text-xs text-gray-700 dark:text-gray-300 font-medium", children: selectedBillingOption.subTitle })), plan.subtitle && (jsxs("span", { className: "px-2 py-0.5 text-[11px] md:text-xs rounded bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 font-semibold align-middle", children: ["+", plan.subtitle] }))] })) : (
                                                     // 其他模式下保持原逻辑

package/dist/main/nprogress-bar.js

@@ -4,12 +4,16 @@
 var NProgress = require('nprogress');
 var navigation = require('next/navigation');
 var React = require('react');
+var lib = require('@windrun-huaiin/base-ui/lib');
 
 // remove NProgress progress bar spinner circle
 NProgress.configure({ showSpinner: false });
 function NProgressBar() {
     const pathname = navigation.usePathname();
     const previousPath = React.useRef(pathname);
+    React.useEffect(() => {
+        document.documentElement.style.setProperty('--nprogress-bar-color', lib.themeSvgIconColor);
+    }, []);
     React.useEffect(() => {
         if (previousPath.current !== pathname) {
             NProgress.start();

package/dist/main/nprogress-bar.mjs

@@ -2,12 +2,16 @@
 import NProgress from 'nprogress';
 import { usePathname } from 'next/navigation';
 import { useRef, useEffect } from 'react';
+import { themeSvgIconColor } from '@windrun-huaiin/base-ui/lib';
 
 // remove NProgress progress bar spinner circle
 NProgress.configure({ showSpinner: false });
 function NProgressBar() {
     const pathname = usePathname();
     const previousPath = useRef(pathname);
+    useEffect(() => {
+        document.documentElement.style.setProperty('--nprogress-bar-color', themeSvgIconColor);
+    }, []);
     useEffect(() => {
         if (previousPath.current !== pathname) {
             NProgress.start();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "13.1.0",
+  "version": "13.1.2",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -86,8 +86,8 @@
     "react-medium-image-zoom": "^5.4.1",
     "swiper": "^12.1.2",
     "zod": "^4.3.6",
-    "@windrun-huaiin/lib": "^13.0.0",
-    "@windrun-huaiin/base-ui": "^13.1.0"
+    "@windrun-huaiin/base-ui": "^13.1.0",
+    "@windrun-huaiin/lib": "^13.0.0"
   },
   "peerDependencies": {
     "clsx": "^2.1.1",

package/src/main/faq-interactive.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
 
 interface FAQData {
   title: string;
@@ -13,56 +13,40 @@ interface FAQData {
 }
 
 export function FAQInteractive({ data }: { data: FAQData }) {
-  const [openStates, setOpenStates] = useState<Record<string, boolean>>({});
-
   useEffect(() => {
-    // Progressive enhancement: Add interactivity to existing DOM elements
+    const cleanups: Array<() => void> = [];
+
     data.items.forEach((item) => {
       const toggleButton = document.querySelector(`[data-faq-toggle="${item.id}"]`) as HTMLButtonElement;
       const contentDiv = document.querySelector(`[data-faq-content="${item.id}"]`) as HTMLDivElement;
       const iconSvg = document.querySelector(`[data-faq-icon="${item.id}"]`) as SVGElement;
+      const cardDiv = document.querySelector(`[data-faq-id="${item.id}"]`) as HTMLDivElement;
+
+      if (toggleButton && contentDiv && iconSvg && cardDiv) {
+        const syncOpenState = (isOpen: boolean) => {
+          contentDiv.classList.toggle('hidden', !isOpen);
+          toggleButton.setAttribute('aria-expanded', String(isOpen));
+          iconSvg.style.transform = isOpen ? 'rotate(90deg)' : 'rotate(0deg)';
+          cardDiv.setAttribute('data-faq-open', String(isOpen));
+        };
 
-      if (toggleButton && contentDiv && iconSvg) {
         const handleClick = () => {
-          const isOpen = openStates[item.id] || false;
-          const newOpenState = !isOpen;
-
-          // Update state
-          setOpenStates(prev => ({
-            ...prev,
-            [item.id]: newOpenState
-          }));
-
-          // Update DOM
-          if (newOpenState) {
-            contentDiv.classList.remove('hidden');
-            toggleButton.setAttribute('aria-expanded', 'true');
-            iconSvg.style.transform = 'rotate(90deg)';
-          } else {
-            contentDiv.classList.add('hidden');
-            toggleButton.setAttribute('aria-expanded', 'false');
-            iconSvg.style.transform = 'rotate(0deg)';
-          }
+          const isOpen = toggleButton.getAttribute('aria-expanded') === 'true';
+          syncOpenState(!isOpen);
         };
 
+        syncOpenState(toggleButton.getAttribute('aria-expanded') === 'true');
         toggleButton.addEventListener('click', handleClick);
-
-        // Cleanup function will be handled by the effect cleanup
+        cleanups.push(() => {
+          toggleButton.removeEventListener('click', handleClick);
+        });
       }
     });
 
-    // Cleanup event listeners
     return () => {
-      data.items.forEach((item) => {
-        const toggleButton = document.querySelector(`[data-faq-toggle="${item.id}"]`) as HTMLButtonElement;
-        if (toggleButton) {
-          // Remove all event listeners by cloning the element
-          const newButton = toggleButton.cloneNode(true);
-          toggleButton.parentNode?.replaceChild(newButton, toggleButton);
-        }
-      });
+      cleanups.forEach((cleanup) => cleanup());
     };
-  }, [data, openStates]);
+  }, [data.items]);
 
   return null; // Progressive enhancement - no additional DOM rendering
-}
+}

package/src/main/faq.tsx

@@ -1,5 +1,6 @@
 import { getTranslations } from 'next-intl/server';
 import { cn } from '@windrun-huaiin/lib/utils';
+import { themeIconColor } from '@windrun-huaiin/base-ui/lib';
 import { richText } from './rich-text-expert';
 import { FAQInteractive } from './faq-interactive';
 import { responsiveSection } from './section-layout';
@@ -52,12 +53,18 @@ export async function FAQ({
           <div
             key={item.id}
             data-faq-id={item.id}
-            className="bg-white dark:bg-gray-800/60 p-6 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-purple-300 dark:hover:border-purple-500/50 transition shadow-sm dark:shadow-none"
+            data-faq-open="false"
+            className={cn(
+              "bg-white dark:bg-gray-800/60 rounded-xl border border-gray-200 dark:border-gray-700 transition shadow-sm dark:shadow-none hover:border-current focus-within:border-current",
+              themeIconColor
+            )}
           >
             <button
-              className="w-full flex items-center justify-between text-left focus:outline-none"
+              className="w-full p-6 flex items-center justify-between text-left focus:outline-none"
               data-faq-toggle={item.id}
+              type="button"
               aria-expanded="false"
+              aria-controls={`${item.id}-content`}
             >
               <span className="text-lg font-semibold text-gray-900 dark:text-gray-100">{item.question}</span>
               <svg 
@@ -71,10 +78,13 @@ export async function FAQ({
               </svg>
             </button>
             <div 
-              className="mt-4 text-gray-700 dark:text-gray-300 text-base hidden" 
+              id={`${item.id}-content`}
+              className="px-6 pb-6 text-gray-700 dark:text-gray-300 text-base hidden" 
               data-faq-content={item.id}
             >
+              <div className="pt-1">
               {item.answer}
+              </div>
             </div>
           </div>
         ))}

package/src/main/gallery/gallery-mobile-swiper.tsx

@@ -1,19 +1,27 @@
 "use client";
 
+import type { CSSProperties } from "react";
 import { Swiper, SwiperSlide } from "swiper/react";
 import { Pagination } from "swiper/modules";
 import Image from "next/image";
+import { themeSvgIconColor } from "@windrun-huaiin/base-ui/lib";
 import { GalleryItem } from "./gallery-types";
 
 interface Props {
   items: GalleryItem[];
 }
 
+const swiperThemeStyle = {
+  "--gallery-swiper-bullet-active-color": themeSvgIconColor,
+  "--swiper-theme-color": themeSvgIconColor,
+} as CSSProperties;
+
 export function GalleryMobileSwiper({ items }: Props) {
   return (
     <div className="block sm:hidden px-4">
       {/* 外层容器：强制 maxWidth，防止任何溢出 */}
-      <div className="w-full overflow-hidden" 
+      <div
+        className="w-full overflow-hidden"
         style={{ maxWidth: "min(calc(100vw - 48px), 350px)", margin: "0 auto" }}
       >
         <Swiper
@@ -24,6 +32,7 @@ export function GalleryMobileSwiper({ items }: Props) {
           loop={true}
           grabCursor={true}
           className="gallery-mobile-swiper rounded-2xl"
+          style={swiperThemeStyle}
         >
           {items.map((item) => (
             <SwiperSlide key={item.id}>

package/src/main/loading.tsx

@@ -1,5 +1,8 @@
 'use client';
 
+import { cn } from '@windrun-huaiin/lib/utils';
+import { themeSvgIconColor } from '@windrun-huaiin/base-ui/lib';
+
 const NUM_ROWS = 15;
 const NUM_COLS = 15;
 const DOT_SIZE = 6; // px, dot diameter
@@ -7,21 +10,64 @@ const SPACING = 12; // px, space between dot centers
 const ANIMATION_DURATION = 1.8; // seconds
 const STAGGER_DELAY_FACTOR = 0.08; // seconds, delay per unit of distance from center
 
-// Expanded palette for more "dazzling" effect
-const COLORS = [
-  '#AC62FD', // Base Purple
-  '#C364FA', 
-  '#DD59F7',
-  '#FF4FF2', // Bright Pink/Magenta
-  '#F067DD',
-  '#E26AF8',
-  '#DA70D6', // Orchid
-  '#BA55D3', // Medium Orchid
-  '#9370DB', // Medium Purple
-  '#8A2BE2'  // Blue Violet
-];
+function clampChannel(value: number) {
+  return Math.max(0, Math.min(255, Math.round(value)));
+}
+
+function hexToRgb(hex: string) {
+  const normalized = hex.replace('#', '').trim();
+  const fullHex = normalized.length === 3
+    ? normalized.split('').map((char) => `${char}${char}`).join('')
+    : normalized;
+
+  if (!/^[0-9a-fA-F]{6}$/.test(fullHex)) {
+    return { r: 172, g: 98, b: 253 };
+  }
+
+  return {
+    r: Number.parseInt(fullHex.slice(0, 2), 16),
+    g: Number.parseInt(fullHex.slice(2, 4), 16),
+    b: Number.parseInt(fullHex.slice(4, 6), 16),
+  };
+}
+
+function shiftColor(hex: string, offset: { r?: number; g?: number; b?: number }) {
+  const { r, g, b } = hexToRgb(hex);
+
+  return `rgb(${clampChannel(r + (offset.r ?? 0))}, ${clampChannel(g + (offset.g ?? 0))}, ${clampChannel(b + (offset.b ?? 0))})`;
+}
+
+function createLoadingPalette(baseHex: string) {
+  return [
+    shiftColor(baseHex, { r: 0, g: 0, b: 0 }),
+    shiftColor(baseHex, { r: 18, g: -10, b: 22 }),
+    shiftColor(baseHex, { r: 32, g: -18, b: 30 }),
+    shiftColor(baseHex, { r: 54, g: -30, b: 8 }),
+    shiftColor(baseHex, { r: 28, g: 4, b: 10 }),
+    shiftColor(baseHex, { r: 16, g: -6, b: 26 }),
+    shiftColor(baseHex, { r: 6, g: 14, b: -12 }),
+    shiftColor(baseHex, { r: -10, g: 8, b: 16 }),
+    shiftColor(baseHex, { r: -18, g: -6, b: 24 }),
+    shiftColor(baseHex, { r: -24, g: -14, b: 6 }),
+  ];
+}
+
+interface LoadingProps {
+  themeColor?: string;
+  compact?: boolean;
+  className?: string;
+  label?: string;
+  labelClassName?: string;
+}
 
-export function Loading() {
+export function Loading({
+  themeColor = themeSvgIconColor,
+  compact = false,
+  className,
+  label = 'Loading...',
+  labelClassName,
+}: LoadingProps = {}) {
+  const colors = createLoadingPalette(themeColor);
   const dots = [];
   const centerX = (NUM_COLS - 1) / 2;
   const centerY = (NUM_ROWS - 1) / 2;
@@ -37,7 +83,7 @@ export function Loading() {
         // Animation delay based on distance, creating a ripple effect
         delay: distance * STAGGER_DELAY_FACTOR,
         // Color selection based on distance rings
-        color: COLORS[Math.floor(distance) % COLORS.length],
+        color: colors[Math.floor(distance) % colors.length],
       });
     }
   }
@@ -47,7 +93,13 @@ export function Loading() {
   const containerHeight = (NUM_ROWS - 1) * SPACING + DOT_SIZE;
 
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen bg-neutral-900">
+    <div
+      className={cn(
+        'flex flex-col items-center justify-center bg-neutral-100 dark:bg-neutral-900',
+        compact ? 'min-h-[250px] rounded-[28px] px-4 py-2' : 'min-h-screen',
+        className
+      )}
+    >
       <div
         style={{
           width: containerWidth,
@@ -83,11 +135,11 @@ export function Loading() {
           className="absolute inset-0 flex items-center justify-center"
           style={{ pointerEvents: 'none' }} // So text doesn't interfere with potential mouse events on dots if any
         >
-          <p className="text-xl font-semibold text-white">
-            Loading...
+          <p className={cn('text-xl font-semibold text-white', labelClassName)}>
+            {label}
           </p>
         </div>
       </div>
     </div>
   );
-} 
+} 

package/src/main/money-price/money-price-interactive.tsx

@@ -3,7 +3,7 @@
 import { useClerk } from '@clerk/nextjs';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { useRouter } from 'next/navigation';
-import React, {
+import {
   useCallback,
   useEffect,
   useMemo,
@@ -18,7 +18,7 @@ import {
   type UserContext
 } from './money-price-types';
 import { redirectToCustomerPortal } from './customer-portal';
-import { themeButtonGradientClass, themeButtonGradientHoverClass } from '@windrun-huaiin/base-ui/lib';
+import { themeButtonGradientClass, themeButtonGradientHoverClass, themeIconColor } from '@windrun-huaiin/base-ui/lib';
 
 type BillingType = string;
 
@@ -450,8 +450,9 @@ export function MoneyPriceInteractive({
               className={cn(
                 'flex flex-col bg-white dark:bg-gray-800/60 rounded-2xl border border-gray-300 dark:border-[#7c3aed40] transition p-5 md:p-8 h-full shadow-sm dark:shadow-none w-[85vw] max-w-[360px]',
                 'md:w-[clamp(280px,32vw,360px)] md:max-w-[360px] md:shrink-0',
-                'hover:border-2 hover:border-purple-500',
-                'focus-within:border-2 focus-within:border-purple-500'
+                'hover:border-2 hover:border-current', 
+                'focus-within:border-2 focus-within:border-current',
+                themeIconColor
               )}
               style={{ minHeight: maxFeaturesCount * (isTouchDevice ? 86 : 100) }}
             >

package/src/main/nprogress-bar.tsx

@@ -3,6 +3,7 @@
 import NProgress from 'nprogress'
 import { usePathname } from 'next/navigation'
 import { useEffect, useRef } from 'react'
+import { themeSvgIconColor } from '@windrun-huaiin/base-ui/lib';
 
 // remove NProgress progress bar spinner circle
 NProgress.configure({ showSpinner: false })
@@ -11,6 +12,10 @@ export function NProgressBar() {
   const pathname = usePathname()
   const previousPath = useRef(pathname)
 
+  useEffect(() => {
+    document.documentElement.style.setProperty('--nprogress-bar-color', themeSvgIconColor)
+  }, [])
+
   useEffect(() => {
     if (previousPath.current !== pathname) {
       NProgress.start()
@@ -22,4 +27,4 @@ export function NProgressBar() {
   }, [pathname])
 
   return null
-} 
+} 

package/src/styles/third-ui.css

@@ -50,8 +50,9 @@
 
 /* NProgress progress bar style */
 #nprogress .bar {
-  background: #AC62FD !important; /* purple */
-  height: 1px !important;
+  background: var(--nprogress-bar-color, #AC62FD) !important;
+  height: 2px !important;
+  box-shadow: 0 0 10px var(--nprogress-bar-color, #AC62FD) !important;
 }
 
 /* @theme {
@@ -79,7 +80,8 @@ body {
 .gallery-mobile-swiper { overflow: hidden !important; }
 
 .gallery-mobile-swiper {
-  --swiper-theme-color: #AC62FD;
+  --gallery-swiper-bullet-active-color: #AC62FD;
+  --swiper-theme-color: var(--gallery-swiper-bullet-active-color);
 }
 
 .gallery-mobile-swiper .swiper-pagination {
@@ -95,6 +97,6 @@ body {
 }
 
 .gallery-mobile-swiper .swiper-pagination-bullet-active {
-  background: #AC62FD !important;
+  background: var(--gallery-swiper-bullet-active-color, #AC62FD) !important;
   transform: scale(1.5);
 }