@windrun-huaiin/third-ui 13.0.1 → 13.1.1

package/dist/main/features.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 server$1 = require('@windrun-huaiin/base-ui/components/server');
+var lib = require('@windrun-huaiin/base-ui/lib');
 var utils = require('@windrun-huaiin/lib/utils');
 var richTextExpert = require('./rich-text-expert.js');
 var sectionLayout = require('./section-layout.js');
@@ -24,7 +25,7 @@ function Features(_a) {
                 iconKey: feature.iconKey
             }))
         };
-        return (jsxRuntime.jsxs("section", { id: "features", className: utils.cn(sectionLayout.responsiveSection, sectionClassName), children: [jsxRuntime.jsxs("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-4", children: [data.title, " ", jsxRuntime.jsx("span", { className: "text-purple-500", children: data.eyesOn })] }), 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: "grid grid-cols-1 md:grid-cols-3 gap-8 gap-y-12", children: data.items.map((feature) => {
+        return (jsxRuntime.jsxs("section", { id: "features", className: utils.cn(sectionLayout.responsiveSection, sectionClassName), children: [jsxRuntime.jsxs("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-4", children: [data.title, " ", jsxRuntime.jsx("span", { className: lib.themeIconColor, children: data.eyesOn })] }), 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: "grid grid-cols-1 md:grid-cols-3 gap-8 gap-y-12", children: data.items.map((feature) => {
                         const Icon = server$1.getGlobalIcon(feature.iconKey);
                         return (jsxRuntime.jsxs("div", { "data-feature-id": feature.id, className: "bg-white dark:bg-gray-800/60 p-8 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.jsx("div", { className: "text-4xl mb-4 flex items-center justify-start", children: jsxRuntime.jsx(Icon, { className: "w-8 h-8" }) }), jsxRuntime.jsx("h3", { className: "text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100", children: feature.title }), jsxRuntime.jsx("p", { className: "text-gray-700 dark:text-gray-300", children: feature.description })] }, feature.id));
                     }) })] }));

package/dist/main/features.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 { getGlobalIcon } from '@windrun-huaiin/base-ui/components/server';
+import { themeIconColor } from '@windrun-huaiin/base-ui/lib';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { richText } from './rich-text-expert.mjs';
 import { responsiveSection } from './section-layout.mjs';
@@ -22,7 +23,7 @@ function Features(_a) {
                 iconKey: feature.iconKey
             }))
         };
-        return (jsxs("section", { id: "features", className: cn(responsiveSection, sectionClassName), children: [jsxs("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-4", children: [data.title, " ", jsx("span", { className: "text-purple-500", children: data.eyesOn })] }), 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: "grid grid-cols-1 md:grid-cols-3 gap-8 gap-y-12", children: data.items.map((feature) => {
+        return (jsxs("section", { id: "features", className: cn(responsiveSection, sectionClassName), children: [jsxs("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-4", children: [data.title, " ", jsx("span", { className: themeIconColor, children: data.eyesOn })] }), 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: "grid grid-cols-1 md:grid-cols-3 gap-8 gap-y-12", children: data.items.map((feature) => {
                         const Icon = getGlobalIcon(feature.iconKey);
                         return (jsxs("div", { "data-feature-id": feature.id, className: "bg-white dark:bg-gray-800/60 p-8 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: [jsx("div", { className: "text-4xl mb-4 flex items-center justify-start", children: jsx(Icon, { className: "w-8 h-8" }) }), jsx("h3", { className: "text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100", children: feature.title }), jsx("p", { className: "text-gray-700 dark:text-gray-300", children: feature.description })] }, feature.id));
                     }) })] }));

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], 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/gallery/gallery-server.js

@@ -8,6 +8,7 @@ var sectionLayout = require('../section-layout.js');
 var galleryInteractive = require('./gallery-interactive.js');
 var galleryDesktopGrid = require('./gallery-desktop-grid.js');
 var galleryMobileSwiper = require('./gallery-mobile-swiper.js');
+var lib = require('@windrun-huaiin/base-ui/lib');
 
 function Gallery(_a) {
     return tslib_es6.__awaiter(this, arguments, void 0, function* ({ locale, sectionClassName, button }) {
@@ -26,7 +27,7 @@ function Gallery(_a) {
             defaultImgUrl: t.raw('defaultImgUrl'),
             downloadPrefix: t('downloadPrefix'),
         };
-        return (jsxRuntime.jsxs("section", { id: "gallery", className: utils.cn(sectionLayout.responsiveSection, sectionClassName), children: [jsxRuntime.jsxs("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-6", children: [data.titleL, " ", jsxRuntime.jsx("span", { className: "text-purple-500", children: data.eyesOn }), " ", data.titleR] }), jsxRuntime.jsx("p", { className: "text-center max-w-2xl mx-auto mb-16", children: data.description }), jsxRuntime.jsx(galleryMobileSwiper.GalleryMobileSwiper, { items: data.items }), jsxRuntime.jsx(galleryDesktopGrid.GalleryDesktopGrid, { items: data.items }), button && jsxRuntime.jsx("div", { className: "text-center mx-auto mt-12 max-w-[85vw]", children: button }), jsxRuntime.jsx(galleryInteractive.GalleryInteractive, { data: data })] }));
+        return (jsxRuntime.jsxs("section", { id: "gallery", className: utils.cn(sectionLayout.responsiveSection, sectionClassName), children: [jsxRuntime.jsxs("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-6", children: [data.titleL, " ", jsxRuntime.jsx("span", { className: lib.themeIconColor, children: data.eyesOn }), " ", data.titleR] }), jsxRuntime.jsx("p", { className: "text-center max-w-2xl mx-auto mb-16", children: data.description }), jsxRuntime.jsx(galleryMobileSwiper.GalleryMobileSwiper, { items: data.items }), jsxRuntime.jsx(galleryDesktopGrid.GalleryDesktopGrid, { items: data.items }), button && jsxRuntime.jsx("div", { className: "text-center mx-auto mt-12 max-w-[85vw]", children: button }), jsxRuntime.jsx(galleryInteractive.GalleryInteractive, { data: data })] }));
     });
 }
 

package/dist/main/gallery/gallery-server.mjs

@@ -6,6 +6,7 @@ import { responsiveSection } from '../section-layout.mjs';
 import { GalleryInteractive } from './gallery-interactive.mjs';
 import { GalleryDesktopGrid } from './gallery-desktop-grid.mjs';
 import { GalleryMobileSwiper } from './gallery-mobile-swiper.mjs';
+import { themeIconColor } from '@windrun-huaiin/base-ui/lib';
 
 function Gallery(_a) {
     return __awaiter(this, arguments, void 0, function* ({ locale, sectionClassName, button }) {
@@ -24,7 +25,7 @@ function Gallery(_a) {
             defaultImgUrl: t.raw('defaultImgUrl'),
             downloadPrefix: t('downloadPrefix'),
         };
-        return (jsxs("section", { id: "gallery", className: cn(responsiveSection, sectionClassName), children: [jsxs("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-6", children: [data.titleL, " ", jsx("span", { className: "text-purple-500", children: data.eyesOn }), " ", data.titleR] }), jsx("p", { className: "text-center max-w-2xl mx-auto mb-16", children: data.description }), jsx(GalleryMobileSwiper, { items: data.items }), jsx(GalleryDesktopGrid, { items: data.items }), button && jsx("div", { className: "text-center mx-auto mt-12 max-w-[85vw]", children: button }), jsx(GalleryInteractive, { data: data })] }));
+        return (jsxs("section", { id: "gallery", className: cn(responsiveSection, sectionClassName), children: [jsxs("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-6", children: [data.titleL, " ", jsx("span", { className: themeIconColor, children: data.eyesOn }), " ", data.titleR] }), jsx("p", { className: "text-center max-w-2xl mx-auto mb-16", children: data.description }), jsx(GalleryMobileSwiper, { items: data.items }), jsx(GalleryDesktopGrid, { items: data.items }), button && jsx("div", { className: "text-center mx-auto mt-12 max-w-[85vw]", children: button }), jsx(GalleryInteractive, { data: data })] }));
     });
 }
 

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

@@ -4,6 +4,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var server = require('@windrun-huaiin/base-ui/components/server');
+var lib = require('@windrun-huaiin/base-ui/lib');
 
 function GoToTop() {
     const [isVisible, setIsVisible] = React.useState(false);
@@ -27,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 bg-linear-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 dark:hover:to-pink-700 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(server.globalLucideIcons.ArrowUp, { size: 20, className: "text-white" }) })) }));
 }
 
 exports.GoToTop = GoToTop;

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

@@ -2,6 +2,7 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { globalLucideIcons } from '@windrun-huaiin/base-ui/components/server';
+import { themeButtonGradientClass, themeButtonGradientHoverClass } from '@windrun-huaiin/base-ui/lib';
 
 function GoToTop() {
     const [isVisible, setIsVisible] = useState(false);
@@ -25,7 +26,7 @@ function GoToTop() {
             behavior: 'smooth'
         });
     };
-    return (jsx(Fragment, { children: isVisible && (jsx("button", { onClick: scrollToTop, className: "fixed bottom-6 right-6 p-3 bg-linear-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 dark:hover:to-pink-700 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(globalLucideIcons.ArrowUp, { size: 20, className: "text-white" }) })) }));
 }
 
 export { GoToTop };

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-button.js

@@ -4,6 +4,7 @@
 var tslib_es6 = require('../../node_modules/.pnpm/@rollup_plugin-typescript@12.1.4_rollup@4.46.2_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.js');
 var jsxRuntime = require('react/jsx-runtime');
 var utils = require('@windrun-huaiin/lib/utils');
+var lib = require('@windrun-huaiin/base-ui/lib');
 var moneyPriceTypes = require('./money-price-types.js');
 var React = require('react');
 
@@ -216,8 +217,8 @@ function MoneyPriceButton({ planKey, userContext, billingType, onAuth, onAction,
     });
     const buttonClassName = utils.cn('w-full h-11 md:h-12 px-5 md:px-8 mt-4 md:mt-auto inline-flex items-center justify-center text-white text-sm md:text-base font-bold tracking-wide shadow-md hover:shadow-lg transition-all duration-300 rounded-full', isDisabledByConfigOnly
         ? 'bg-gray-400 cursor-not-allowed'
-        : 'bg-linear-to-r from-purple-400 to-pink-500 dark:from-purple-500 dark:to-pink-600', !isDisabledByConfigOnly && !isBusy &&
-        'hover:from-purple-500 hover:to-pink-600 dark:hover:from-purple-600 dark:hover:to-pink-700', isBusy && !isDisabledByConfigOnly && 'opacity-70 cursor-not-allowed');
+        : lib.themeButtonGradientClass, !isDisabledByConfigOnly && !isBusy &&
+        lib.themeButtonGradientHoverClass, isBusy && !isDisabledByConfigOnly && 'opacity-70 cursor-not-allowed');
     return (jsxRuntime.jsx("button", { className: buttonClassName, disabled: isDisabled, onClick: handleClick, type: "button", "data-plan-button": planKey, children: displayText }));
 }
 

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

@@ -2,6 +2,7 @@
 import { __awaiter } from '../../node_modules/.pnpm/@rollup_plugin-typescript@12.1.4_rollup@4.46.2_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.mjs';
 import { jsx } from 'react/jsx-runtime';
 import { cn } from '@windrun-huaiin/lib/utils';
+import { themeButtonGradientClass, themeButtonGradientHoverClass } from '@windrun-huaiin/base-ui/lib';
 import { UserState } from './money-price-types.mjs';
 import { useState } from 'react';
 
@@ -214,8 +215,8 @@ function MoneyPriceButton({ planKey, userContext, billingType, onAuth, onAction,
     });
     const buttonClassName = cn('w-full h-11 md:h-12 px-5 md:px-8 mt-4 md:mt-auto inline-flex items-center justify-center text-white text-sm md:text-base font-bold tracking-wide shadow-md hover:shadow-lg transition-all duration-300 rounded-full', isDisabledByConfigOnly
         ? 'bg-gray-400 cursor-not-allowed'
-        : 'bg-linear-to-r from-purple-400 to-pink-500 dark:from-purple-500 dark:to-pink-600', !isDisabledByConfigOnly && !isBusy &&
-        'hover:from-purple-500 hover:to-pink-600 dark:hover:from-purple-600 dark:hover:to-pink-700', isBusy && !isDisabledByConfigOnly && 'opacity-70 cursor-not-allowed');
+        : themeButtonGradientClass, !isDisabledByConfigOnly && !isBusy &&
+        themeButtonGradientHoverClass, isBusy && !isDisabledByConfigOnly && 'opacity-70 cursor-not-allowed');
     return (jsx("button", { className: buttonClassName, disabled: isDisabled, onClick: handleClick, type: "button", "data-plan-button": planKey, children: displayText }));
 }
 

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

@@ -11,6 +11,7 @@ var moneyPriceButton = require('./money-price-button.js');
 var moneyPriceConfigUtil = require('./money-price-config-util.js');
 var moneyPriceTypes = require('./money-price-types.js');
 var customerPortal = require('./customer-portal.js');
+var lib = require('@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, }) {
@@ -313,7 +314,7 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "flex justify-center mb-6 max-md:sticky max-md:top-30 max-md:z-30 max-md:py-2 max-md:bg-transparent", children: jsxRuntime.jsx("div", { className: "inline-flex bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-full px-2 py-2 sm:px-3 sm:py-3 max-md:w-full max-md:max-w-[340px] max-md:mx-auto shadow-sm", "data-billing-switch": true, children: billingOptions.map(option => {
                         const isActive = option.key === billingType;
                         const buttonClasses = isActive
-                            ? 'text-white bg-linear-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm'
+                            ? utils.cn('text-white rounded-full shadow-sm', lib.themeButtonGradientClass, lib.themeButtonGradientHoverClass)
                             : 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full';
                         const showBadge = option.key === billingType && !!discountBadgeText;
                         return (jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center mx-1", children: [showBadge && (jsxRuntime.jsx("span", { className: "absolute z-10 left-1/2 -translate-x-1/2 -top-3 sm:-top-4 translate-y-[-50%] px-3 py-0.5  text-[0.625rem] sm:text-xs rounded-md bg-yellow-100 text-yellow-800 font-semibold shadow-sm whitespace-nowrap", children: discountBadgeText })), jsxRuntime.jsx("button", { className: utils.cn('text-sm md:text-base font-medium transition relative text-center z-10 px-2 sm:px-4 py-2 min-w-[100px] sm:min-w-[120px]', buttonClasses), type: "button", "data-billing-button": option.key, onClick: () => setBillingType(option.key), children: option.name })] }, option.key));

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

@@ -9,6 +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';
 
 const PLAN_KEYS = ['F1', 'P2', 'U3'];
 function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal = false, enabledBillingTypes, enableSubscriptionUpgrade = true, initialBillingType, disableAutoDetectBilling = false, initUserContext, }) {
@@ -311,7 +312,7 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
     return (jsxs(Fragment, { children: [jsx("div", { className: "flex justify-center mb-6 max-md:sticky max-md:top-30 max-md:z-30 max-md:py-2 max-md:bg-transparent", children: jsx("div", { className: "inline-flex bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-full px-2 py-2 sm:px-3 sm:py-3 max-md:w-full max-md:max-w-[340px] max-md:mx-auto shadow-sm", "data-billing-switch": true, children: billingOptions.map(option => {
                         const isActive = option.key === billingType;
                         const buttonClasses = isActive
-                            ? 'text-white bg-linear-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm'
+                            ? cn('text-white rounded-full shadow-sm', themeButtonGradientClass, themeButtonGradientHoverClass)
                             : 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full';
                         const showBadge = option.key === billingType && !!discountBadgeText;
                         return (jsxs("div", { className: "relative flex items-center justify-center mx-1", children: [showBadge && (jsx("span", { className: "absolute z-10 left-1/2 -translate-x-1/2 -top-3 sm:-top-4 translate-y-[-50%] px-3 py-0.5  text-[0.625rem] sm:text-xs rounded-md bg-yellow-100 text-yellow-800 font-semibold shadow-sm whitespace-nowrap", children: discountBadgeText })), jsx("button", { className: cn('text-sm md:text-base font-medium transition relative text-center z-10 px-2 sm:px-4 py-2 min-w-[100px] sm:min-w-[120px]', buttonClasses), type: "button", "data-billing-button": option.key, onClick: () => setBillingType(option.key), children: option.name })] }, option.key));

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/dist/main/rich-text-expert.js

@@ -1,6 +1,8 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var utils = require('@windrun-huaiin/lib/utils');
+var lib = require('@windrun-huaiin/base-ui/lib');
 
 // default tag renderers
 const defaultTagRenderers = {
@@ -11,7 +13,7 @@ const defaultTagRenderers = {
     // text Underline
     u: (chunks) => jsxRuntime.jsx("u", { children: chunks }),
     // text Mark
-    mark: (chunks) => jsxRuntime.jsx("mark", { className: "bg-purple-300 dark:bg-purple-500 text-neutral-800 dark:text-neutral-300 px-1 rounded", children: chunks }),
+    mark: (chunks) => jsxRuntime.jsx("mark", { className: utils.cn(lib.themeRichTextMarkClass, "text-neutral-800 dark:text-neutral-300 px-1 rounded"), children: chunks }),
     // text Delete
     del: (chunks) => jsxRuntime.jsx("del", { children: chunks }),
     // text Subscript

package/dist/main/rich-text-expert.mjs

@@ -1,4 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
+import { cn } from '@windrun-huaiin/lib/utils';
+import { themeRichTextMarkClass } from '@windrun-huaiin/base-ui/lib';
 
 // default tag renderers
 const defaultTagRenderers = {
@@ -9,7 +11,7 @@ const defaultTagRenderers = {
     // text Underline
     u: (chunks) => jsx("u", { children: chunks }),
     // text Mark
-    mark: (chunks) => jsx("mark", { className: "bg-purple-300 dark:bg-purple-500 text-neutral-800 dark:text-neutral-300 px-1 rounded", children: chunks }),
+    mark: (chunks) => jsx("mark", { className: cn(themeRichTextMarkClass, "text-neutral-800 dark:text-neutral-300 px-1 rounded"), children: chunks }),
     // text Delete
     del: (chunks) => jsx("del", { children: chunks }),
     // text Subscript

package/dist/main/seo-content.js

@@ -6,6 +6,7 @@ var server = require('next-intl/server');
 var utils = require('@windrun-huaiin/lib/utils');
 var richTextExpert = require('./rich-text-expert.js');
 var sectionLayout = require('./section-layout.js');
+var lib = require('@windrun-huaiin/base-ui/lib');
 
 function SeoContent(_a) {
     return tslib_es6.__awaiter(this, arguments, void 0, function* ({ locale, sectionClassName }) {
@@ -24,7 +25,7 @@ function SeoContent(_a) {
             })),
             conclusion: richTextExpert.richText(t, 'conclusion')
         };
-        return (jsxRuntime.jsxs("section", { id: "seo", className: utils.cn(sectionLayout.responsiveSection, sectionClassName), children: [jsxRuntime.jsxs("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-8", children: [data.title, " ", jsxRuntime.jsx("span", { className: "text-purple-500", children: data.eyesOn })] }), jsxRuntime.jsx("h3", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-lg", children: data.description }), jsxRuntime.jsxs("div", { className: "bg-gray-50 dark:bg-gray-800/60 border border-gray-200 dark:border-gray-700 rounded-2xl p-8 md:p-12 shadow-sm dark:shadow-none", children: [jsxRuntime.jsxs("div", { className: "space-y-10", children: [jsxRuntime.jsx("p", { className: "text-gray-600 dark:text-gray-400 text-lg", children: data.intro }), data.sections.map((section) => (jsxRuntime.jsxs("div", { "data-seo-section": section.id, children: [jsxRuntime.jsx("h2", { className: "text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100 flex items-center", children: section.title }), jsxRuntime.jsx("p", { className: "text-gray-700 dark:text-gray-300", children: section.content })] }, section.id)))] }), jsxRuntime.jsx("p", { className: "mt-10 text-gray-600 dark:text-gray-400 text-lg", children: data.conclusion })] })] }));
+        return (jsxRuntime.jsxs("section", { id: "seo", className: utils.cn(sectionLayout.responsiveSection, sectionClassName), children: [jsxRuntime.jsxs("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-8", children: [data.title, " ", jsxRuntime.jsx("span", { className: lib.themeIconColor, children: data.eyesOn })] }), jsxRuntime.jsx("h3", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-lg", children: data.description }), jsxRuntime.jsxs("div", { className: "bg-gray-50 dark:bg-gray-800/60 border border-gray-200 dark:border-gray-700 rounded-2xl p-8 md:p-12 shadow-sm dark:shadow-none", children: [jsxRuntime.jsxs("div", { className: "space-y-10", children: [jsxRuntime.jsx("p", { className: "text-gray-600 dark:text-gray-400 text-lg", children: data.intro }), data.sections.map((section) => (jsxRuntime.jsxs("div", { "data-seo-section": section.id, children: [jsxRuntime.jsx("h2", { className: "text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100 flex items-center", children: section.title }), jsxRuntime.jsx("p", { className: "text-gray-700 dark:text-gray-300", children: section.content })] }, section.id)))] }), jsxRuntime.jsx("p", { className: "mt-10 text-gray-600 dark:text-gray-400 text-lg", children: data.conclusion })] })] }));
     });
 }
 

package/dist/main/seo-content.mjs

@@ -4,6 +4,7 @@ import { getTranslations } from 'next-intl/server';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { richText } from './rich-text-expert.mjs';
 import { responsiveSection } from './section-layout.mjs';
+import { themeIconColor } from '@windrun-huaiin/base-ui/lib';
 
 function SeoContent(_a) {
     return __awaiter(this, arguments, void 0, function* ({ locale, sectionClassName }) {
@@ -22,7 +23,7 @@ function SeoContent(_a) {
             })),
             conclusion: richText(t, 'conclusion')
         };
-        return (jsxs("section", { id: "seo", className: cn(responsiveSection, sectionClassName), children: [jsxs("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-8", children: [data.title, " ", jsx("span", { className: "text-purple-500", children: data.eyesOn })] }), jsx("h3", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-lg", children: data.description }), jsxs("div", { className: "bg-gray-50 dark:bg-gray-800/60 border border-gray-200 dark:border-gray-700 rounded-2xl p-8 md:p-12 shadow-sm dark:shadow-none", children: [jsxs("div", { className: "space-y-10", children: [jsx("p", { className: "text-gray-600 dark:text-gray-400 text-lg", children: data.intro }), data.sections.map((section) => (jsxs("div", { "data-seo-section": section.id, children: [jsx("h2", { className: "text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100 flex items-center", children: section.title }), jsx("p", { className: "text-gray-700 dark:text-gray-300", children: section.content })] }, section.id)))] }), jsx("p", { className: "mt-10 text-gray-600 dark:text-gray-400 text-lg", children: data.conclusion })] })] }));
+        return (jsxs("section", { id: "seo", className: cn(responsiveSection, sectionClassName), children: [jsxs("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-8", children: [data.title, " ", jsx("span", { className: themeIconColor, children: data.eyesOn })] }), jsx("h3", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-lg", children: data.description }), jsxs("div", { className: "bg-gray-50 dark:bg-gray-800/60 border border-gray-200 dark:border-gray-700 rounded-2xl p-8 md:p-12 shadow-sm dark:shadow-none", children: [jsxs("div", { className: "space-y-10", children: [jsx("p", { className: "text-gray-600 dark:text-gray-400 text-lg", children: data.intro }), data.sections.map((section) => (jsxs("div", { "data-seo-section": section.id, children: [jsx("h2", { className: "text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100 flex items-center", children: section.title }), jsx("p", { className: "text-gray-700 dark:text-gray-300", children: section.content })] }, section.id)))] }), jsx("p", { className: "mt-10 text-gray-600 dark:text-gray-400 text-lg", children: data.conclusion })] })] }));
     });
 }
 

package/dist/main/tips.js

@@ -6,6 +6,7 @@ var server = require('next-intl/server');
 var utils = require('@windrun-huaiin/lib/utils');
 var richTextExpert = require('./rich-text-expert.js');
 var sectionLayout = require('./section-layout.js');
+var lib = require('@windrun-huaiin/base-ui/lib');
 
 function Tips(_a) {
     return tslib_es6.__awaiter(this, arguments, void 0, function* ({ locale, sectionClassName }) {
@@ -26,7 +27,7 @@ function Tips(_a) {
             leftColumn,
             rightColumn
         };
-        return (jsxRuntime.jsxs("section", { id: "tips", className: utils.cn(sectionLayout.responsiveSection, sectionClassName), children: [jsxRuntime.jsxs("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-16", children: [data.title, " ", jsxRuntime.jsx("span", { className: "text-purple-500", children: data.eyesOn })] }), jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-12 bg-gray-50 dark:bg-gray-800/60 border border-gray-200 dark:border-gray-700 rounded-2xl p-8 md:p-12 shadow-sm dark:shadow-none", children: [data.leftColumn, data.rightColumn].map((column, colIndex) => (jsxRuntime.jsx("div", { className: "space-y-8", children: column.map((tip) => (jsxRuntime.jsxs("div", { "data-tip-id": tip.id, className: "space-y-4", children: [jsxRuntime.jsx("h3", { className: "text-2xl font-semibold", children: tip.title }), jsxRuntime.jsx("p", { className: "", children: tip.description })] }, tip.id))) }, colIndex))) })] }));
+        return (jsxRuntime.jsxs("section", { id: "tips", className: utils.cn(sectionLayout.responsiveSection, sectionClassName), children: [jsxRuntime.jsxs("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-16", children: [data.title, " ", jsxRuntime.jsx("span", { className: lib.themeIconColor, children: data.eyesOn })] }), jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-12 bg-gray-50 dark:bg-gray-800/60 border border-gray-200 dark:border-gray-700 rounded-2xl p-8 md:p-12 shadow-sm dark:shadow-none", children: [data.leftColumn, data.rightColumn].map((column, colIndex) => (jsxRuntime.jsx("div", { className: "space-y-8", children: column.map((tip) => (jsxRuntime.jsxs("div", { "data-tip-id": tip.id, className: "space-y-4", children: [jsxRuntime.jsx("h3", { className: "text-2xl font-semibold", children: tip.title }), jsxRuntime.jsx("p", { className: "", children: tip.description })] }, tip.id))) }, colIndex))) })] }));
     });
 }
 

package/dist/main/tips.mjs

@@ -4,6 +4,7 @@ import { getTranslations } from 'next-intl/server';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { richText } from './rich-text-expert.mjs';
 import { responsiveSection } from './section-layout.mjs';
+import { themeIconColor } from '@windrun-huaiin/base-ui/lib';
 
 function Tips(_a) {
     return __awaiter(this, arguments, void 0, function* ({ locale, sectionClassName }) {
@@ -24,7 +25,7 @@ function Tips(_a) {
             leftColumn,
             rightColumn
         };
-        return (jsxs("section", { id: "tips", className: cn(responsiveSection, sectionClassName), children: [jsxs("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-16", children: [data.title, " ", jsx("span", { className: "text-purple-500", children: data.eyesOn })] }), jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-12 bg-gray-50 dark:bg-gray-800/60 border border-gray-200 dark:border-gray-700 rounded-2xl p-8 md:p-12 shadow-sm dark:shadow-none", children: [data.leftColumn, data.rightColumn].map((column, colIndex) => (jsx("div", { className: "space-y-8", children: column.map((tip) => (jsxs("div", { "data-tip-id": tip.id, className: "space-y-4", children: [jsx("h3", { className: "text-2xl font-semibold", children: tip.title }), jsx("p", { className: "", children: tip.description })] }, tip.id))) }, colIndex))) })] }));
+        return (jsxs("section", { id: "tips", className: cn(responsiveSection, sectionClassName), children: [jsxs("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-16", children: [data.title, " ", jsx("span", { className: themeIconColor, children: data.eyesOn })] }), jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-12 bg-gray-50 dark:bg-gray-800/60 border border-gray-200 dark:border-gray-700 rounded-2xl p-8 md:p-12 shadow-sm dark:shadow-none", children: [data.leftColumn, data.rightColumn].map((column, colIndex) => (jsx("div", { className: "space-y-8", children: column.map((tip) => (jsxs("div", { "data-tip-id": tip.id, className: "space-y-4", children: [jsx("h3", { className: "text-2xl font-semibold", children: tip.title }), jsx("p", { className: "", children: tip.description })] }, tip.id))) }, colIndex))) })] }));
     });
 }