@windrun-huaiin/third-ui 13.0.1 → 13.1.1

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/gallery/gallery-server.tsx

@@ -5,6 +5,7 @@ import { GalleryInteractive } from './gallery-interactive';
 import { GalleryDesktopGrid } from './gallery-desktop-grid';
 import { GalleryMobileSwiper } from './gallery-mobile-swiper';
 import type { GalleryProps, GalleryData } from './gallery-types';
+import { themeIconColor } from '@windrun-huaiin/base-ui/lib';
 
 export async function Gallery({ locale, sectionClassName, button }: GalleryProps) {
   const t = await getTranslations({ locale, namespace: 'gallery' });
@@ -28,7 +29,7 @@ export async function Gallery({ locale, sectionClassName, button }: GalleryProps
   return (
     <section id="gallery" className={cn(responsiveSection, sectionClassName)}>
       <h2 className="text-3xl md:text-4xl font-bold text-center mb-6">
-        {data.titleL} <span className="text-purple-500">{data.eyesOn}</span> {data.titleR}
+        {data.titleL} <span className={themeIconColor}>{data.eyesOn}</span> {data.titleR}
       </h2>
       <p className="text-center max-w-2xl mx-auto mb-16">{data.description}</p>
 

package/src/main/go-to-top.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import { globalLucideIcons as icons } from '@windrun-huaiin/base-ui/components/server';
+import { themeButtonGradientClass, themeButtonGradientHoverClass } from '@windrun-huaiin/base-ui/lib';
 
 export function GoToTop() {
   const [isVisible, setIsVisible] = useState(false);
@@ -33,7 +34,7 @@ export function GoToTop() {
       {isVisible && (
         <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"
+          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"
         >
           <icons.ArrowUp size={20} className="text-white" />
@@ -41,4 +42,4 @@ export function GoToTop() {
       )}
     </>
   );
-} 
+} 

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

@@ -1,6 +1,7 @@
 'use client';
 
 import { cn } from '@windrun-huaiin/lib/utils';
+import { themeButtonGradientClass, themeButtonGradientHoverClass } from '@windrun-huaiin/base-ui/lib';
 import { UserState, type MoneyPriceButtonProps } from './money-price-types';
 import React, { useState } from 'react';
 
@@ -263,9 +264,9 @@ export function MoneyPriceButton({
     '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',
+      : themeButtonGradientClass,
     !isDisabledByConfigOnly && !isBusy &&
-      'hover:from-purple-500 hover:to-pink-600 dark:hover:from-purple-600 dark:hover:to-pink-700',
+      themeButtonGradientHoverClass,
     isBusy && !isDisabledByConfigOnly && 'opacity-70 cursor-not-allowed'
   );
 

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

@@ -18,6 +18,7 @@ import {
   type UserContext
 } from './money-price-types';
 import { redirectToCustomerPortal } from './customer-portal';
+import { themeButtonGradientClass, themeButtonGradientHoverClass } from '@windrun-huaiin/base-ui/lib';
 
 type BillingType = string;
 
@@ -400,7 +401,7 @@ export function MoneyPriceInteractive({
           {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;
 

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

@@ -1,4 +1,6 @@
 import React from 'react';
+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: React.ReactNode) => <u>{chunks}</u>,
   // text Mark
-  mark: (chunks: React.ReactNode) => <mark className="bg-purple-300 dark:bg-purple-500 text-neutral-800 dark:text-neutral-300 px-1 rounded">{chunks}</mark>,
+  mark: (chunks: React.ReactNode) => <mark className={cn(themeRichTextMarkClass, "text-neutral-800 dark:text-neutral-300 px-1 rounded")}>{chunks}</mark>,
   // text Delete
   del: (chunks: React.ReactNode) => <del>{chunks}</del>,
   // text Subscript
@@ -32,4 +34,4 @@ export function createRichTextRenderer(customRenderers?: TagRenderers) {
 }
 
 // default rich text renderer
-export const richText = createRichTextRenderer();
+export const richText = createRichTextRenderer();

package/src/main/seo-content.tsx

@@ -3,6 +3,7 @@ import { getTranslations } from 'next-intl/server';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { richText } from './rich-text-expert';
 import { responsiveSection } from './section-layout';
+import { themeIconColor } from '@windrun-huaiin/base-ui/lib';
 
 interface SeoSection {
   id: string;
@@ -50,7 +51,7 @@ export async function SeoContent({
   return (
     <section id="seo" className={cn(responsiveSection, sectionClassName)}>
       <h2 className="text-3xl md:text-4xl font-bold text-center mb-8">
-        {data.title} <span className="text-purple-500">{data.eyesOn}</span>
+        {data.title} <span className={themeIconColor}>{data.eyesOn}</span>
       </h2>
       <h3 className="text-center text-gray-600 dark:text-gray-400 mb-12 text-lg">
         {data.description}

package/src/main/tips.tsx

@@ -2,6 +2,7 @@ import { getTranslations } from 'next-intl/server';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { richText } from './rich-text-expert';
 import { responsiveSection } from './section-layout';
+import { themeIconColor } from '@windrun-huaiin/base-ui/lib';
 
 interface TipSection {
   id: string;
@@ -51,7 +52,7 @@ export async function Tips({
   return (
     <section id="tips" className={cn(responsiveSection, sectionClassName)}>
       <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">
-        {data.title} <span className="text-purple-500">{data.eyesOn}</span>
+        {data.title} <span className={themeIconColor}>{data.eyesOn}</span>
       </h2>
       <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">
         {[data.leftColumn, data.rightColumn].map((column: TipSection[], colIndex) => (

package/src/main/usage.tsx

@@ -1,6 +1,7 @@
 import { getTranslations } from 'next-intl/server';
 import { cn } from '@windrun-huaiin/lib/utils';
-import { globalLucideIcons as icons, getGlobalIcon } from '@windrun-huaiin/base-ui/components/server'
+import { globalLucideIcons as icons, getGlobalIcon } from '@windrun-huaiin/base-ui/components/server';
+import { themeIconColor } from '@windrun-huaiin/base-ui/lib';
 import { richText } from './rich-text-expert';
 import { responsiveSection } from './section-layout';
 
@@ -49,7 +50,7 @@ export async function Usage({
   return (
     <section id="usage" className={cn(responsiveSection, sectionClassName)}>
       <h2 className="text-3xl md:text-4xl font-bold text-center mb-4">
-        {data.title} <span className="text-purple-500">{data.eyesOn}</span>
+        {data.title} <span className={themeIconColor}>{data.eyesOn}</span>
       </h2>
       <p className="text-center text-gray-600 dark:text-gray-400 mb-12 text-base sm:text-lg mx-auto max-w-3xl">
         {data.description}
@@ -61,7 +62,7 @@ export async function Usage({
             return (
               <div key={step.id} data-usage-step={step.id} className="flex items-start">
                 <div className="shrink-0 mr-4">
-                  <Icon className="w-8 h-8 text-purple-500" />
+                  <Icon className="w-8 h-8" />
                 </div>
                 <div>
                   <h3 className="text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100 flex items-center">

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);
 }