@windrun-huaiin/base-ui 30.1.0 → 31.0.1

package/README.md

@@ -1,198 +1,60 @@
 # Base UI Components
 
-A comprehensive set of UI components built with React, TypeScript, and Tailwind CSS.
+A shared React UI package built with TypeScript and Tailwind CSS. It provides reusable base components, theme-adaptive utilities, common icons, global icon handling, and analytics script components for Windrun Huaiin applications.
 
-## 🚀 Features
+The package focuses on consistent theme adaptation and responsive compatibility across desktop, tablet, and mobile experiences.
 
-- **Built-in Icon System**: 28 commonly used icons are built-in as React components
-- **TypeScript Support**: Full type safety and IntelliSense
-- **Tailwind CSS**: Utility-first CSS framework integration
-- **Radix UI**: Accessible and unstyled UI primitives
-- **Tree Shaking**: Only import what you need
+## Core Features
 
-## 📦 Installation
+### Theme Utilities
 
-```bash
-pnpm add @windrun-huaiin/base-ui
-```
+Theme utility classes and helpers for consistent visual styling across applications.
 
-## TailwindCSS 4.x Config
+The theme system is designed to let components, icons, accents, and interaction states adapt to the selected palette without duplicating style logic in each application.
 
-- Assume you have a project structure like this:
+Supported theme palettes:
 
-```txt
-Your-project/
-├── src/
-│   └── app/
-│       └── globals.css
-├── node_modules/
-│   ├── @windrun-huaiin/
-│   │   ├── third-ui/
-│   │   │   └── src/        # This is third-ui src
-│   │   └── base-ui/
-│   │       └── src/        # This is base-ui src
-└── package.json
-```
+- `purple`: `#AC62FD`
+- `orange`: `#F97316`
+- `indigo`: `#6366F1`
+- `emerald`: `#48C892`
+- `rose`: `#F43F5E`
+- `clue`: `#1D9BF0`
+- `hose`: `#F91980`
+- `pika`: `#FFD400`
 
-- Then, in your `globals.css` file, you have to configure Tailwind CSS 4.x like this:
+Core module:
 
-```css
-@import 'tailwindcss';
+- `theme-util`
 
-@source "../node_modules/@windrun-huaiin/third-ui/src/**/*.{js,ts,jsx,tsx}";
-@source "../node_modules/@windrun-huaiin/base-ui/src/**/*.{js,ts,jsx,tsx}";
-@source "./src/**/*.{js,ts,jsx,tsx}";
+### Common Icons
 
-/* Import styles */
-@import '@windrun-huaiin/third-ui/styles/base-ui.css';
-```
+A unified icon set based on `lucide-icons` and commonly used SVG assets.
 
-## 🎨 Built-in Icons
+The icons are designed to work with the supported theme palettes, making it easier to keep product UI, navigation, actions, and status indicators visually consistent across different themes and screen sizes.
 
-This package includes 28 built-in icons as React components. All icons are accessible through the `globalLucideIcons` object.
+### Responsive Multi-Device Compatibility
 
-### Available Icons
+Base components are intended for responsive layouts across common application surfaces, including desktop, tablet, and mobile screens.
 
-**Development Tools:**
-- GitHub, D8, Clerk, Iterm
+The package helps keep spacing, sizing, icons, and interaction patterns predictable across multiple viewport sizes, so shared UI remains consistent when reused by different applications.
 
-**File Types:** 
-- Markdown, MDX, Html, Json, XML, Yaml, CSV, Txt, Java, SQL, Log
+### Global Site Icon Handler
 
-**Technologies:**
-- MAC, BTC, CSS, Mermaid
+A global handler for site icons, intended to centralize favicon and related icon metadata handling across applications.
 
-**Documentation:**
-- LastUpdated, Snippets, Test, Diff
+This keeps browser tab icons, app icons, and shared site icon behavior consistent without repeating setup in every application.
 
-**Business/Legal:**
-- DPA, SubP, T3P
+### Analytics Script Components
 
-**Network:**
-- Http, Scheme
+Reusable script components for integrating common analytics providers.
 
-## Usage
+Supported providers:
 
-### 1. Direct Icon Usage
-```tsx
-import { GitHubIcon,  BTCIcon, MmdIcon} from '@windrun-huaiin/base-ui';
+- Google
+- Microsoft
 
-// Use any built-in icon
-<GitHubIcon className="h-6 w-6" />
-<BTCIcon className="h-4 w-4" />
-<MmdIcon className="h-4 w-4" /> // Auto 16x16 size for Mermaid
-```
-
-### 2. Dynamic Icon Loading
-```tsx
-import { getGlobalIcon } from '@windrun-huaiin/base-ui';
-
-// Get icon component
-const GitHubIcon = getGlobalIcon('GitHub');
-<GitHubIcon className="h-6 w-6" />
-
-// Get icon element (for fumadocs)
-const iconElement = getGlobalIcon('GitHub', true);
-```
-
-### 3. Utility Components
-```tsx
-import { SiteIcon, NotFoundIcon } from '@windrun-huaiin/base-ui';
-
-// Pre-configured site icon
-<SiteIcon />
-
-// Pre-configured 404 icon  
-<NotFoundIcon />
-```
-
-## Benefits
-
-- ✅ **Zero Configuration**: No need to copy SVG files to your project
-- ✅ **Self-contained**: All icons are bundled as React components
-- ✅ **Consistent Styling**: Global icon color configuration
-- ✅ **Type Safety**: Full TypeScript support with auto-completion
-- ✅ **Performance**: No network requests for icon files
-- ✅ **Special Sizing**: Mermaid icon has optimized 16x16 default size
-
-## Environment Variables
-
-```bash
-# Optional: Set global icon color (defaults to text-purple-500)
-NEXT_PUBLIC_STYLE_ICON_COLOR=text-blue-600
-```
+These components provide a consistent way to add analytics scripts to applications while keeping script setup centralized in the shared UI package.
 
 ## License
-
-MIT
-
-## Included Components
-
-### UI Components (ui/)
-- Radix UI base components
-- Unified styles and themes
-- Full TypeScript support
-
-### Base Components (components/)
-- cta: Call-to-Action component
-- features: Feature showcase component
-- footer: Footer component
-- gallery: Image gallery component
-- global-icon: Global icon management
-- go-to-top: Go to top button
-- LanguageDetector: Language detection component
-- LanguageSwitcher: Language switcher component
-- seo-content: SEO content component
-- tips: Tip component
-
-### Script Components (script/)
-- GoogleAnalyticsScript: Google Analytics script
-- MicrosoftClarityScript: Microsoft Clarity script
-
-## Usage Example
-
-```tsx
-import { Button, LanguageSwitcher } from '@windrun-huaiin/base-ui';
-
-// Use UI components
-<Button variant="default" size="lg">
-  Click me
-</Button>
-
-// Use language switcher component (need to pass in configuration)
-<LanguageSwitcher 
-  locales={['en', 'zh']}
-  localeLabels={{ en: 'English', zh: '中文' }}
-/>
-```
-
-## Dependencies
-
-- React 18+
-- Next.js 15+
-- TypeScript
-
-## Development
-
-```bash
-# Build
-pnpm build
-
-# Development mode
-pnpm dev
-
-# Type check
-pnpm type-check
-``` 
-
-
-## Showcase
-
-- [Free Trivia Game](https://freetrivia.info/)
-- [Music Poster](https://musicposter.org/en)
-- [Image Narration](https://imagenarration.com/en)
-- [Describe Yourself](https://describeyourself.org/en)
-- [Newspaper Template](https://newspaper-template.org/en)
-- [breathing exercise](https://breathingexercise.net/en)
-- [ai directory list](https://aidirectorylist.com/en)
-- [reve image directory](https://reveimage.directory/en)
+MIT License

package/dist/lib/theme-util.d.ts

@@ -6,65 +6,21 @@
  * 2. Single config: NEXT_PUBLIC_STYLE_ICON_COLOR (simple theme name only)
  * 3. Premium/elegant color system (uppercase hex values)
  */
-declare const THEME_COLOR_META_MAP: Readonly<{
-    readonly purple: {
-        readonly label: "典雅紫·清";
-        readonly textColor: "text-purple-500";
-        readonly bgColor: "bg-purple-500/20";
-        readonly viaColor: "via-purple-500/20";
-        readonly ringColor: "ring-purple-500/20";
-        readonly borderColor: "border-purple-500";
-        readonly hex: "#AC62FD";
-    };
-    readonly orange: {
-        readonly label: "轻奢橙·暖";
-        readonly textColor: "text-orange-500";
-        readonly bgColor: "bg-orange-500/20";
-        readonly viaColor: "via-orange-500/20";
-        readonly ringColor: "ring-orange-500/20";
-        readonly borderColor: "border-orange-500";
-        readonly hex: "#F97316";
-    };
-    readonly indigo: {
-        readonly label: "沉稳蓝·冷";
-        readonly textColor: "text-indigo-500";
-        readonly bgColor: "bg-indigo-500/20";
-        readonly viaColor: "via-indigo-500/20";
-        readonly ringColor: "ring-indigo-500/20";
-        readonly borderColor: "border-indigo-500";
-        readonly hex: "#6366F1";
-    };
-    readonly emerald: {
-        readonly label: "温润绿·愈";
-        readonly textColor: "text-emerald-500";
-        readonly bgColor: "bg-emerald-500/20";
-        readonly viaColor: "via-emerald-500/20";
-        readonly ringColor: "ring-emerald-500/20";
-        readonly borderColor: "border-emerald-500";
-        readonly hex: "#10B981";
-    };
-    readonly rose: {
-        readonly label: "玫瑰红·柔";
-        readonly textColor: "text-rose-500";
-        readonly bgColor: "bg-rose-500/20";
-        readonly viaColor: "via-rose-500/20";
-        readonly ringColor: "ring-rose-500/20";
-        readonly borderColor: "border-rose-500";
-        readonly hex: "#F43F5E";
-    };
-}>;
-export type SupportedThemeName = keyof typeof THEME_COLOR_META_MAP;
-export type SupportedThemeColor = (typeof THEME_COLOR_META_MAP)[SupportedThemeName]["textColor"];
-export type SupportedThemeBgColor = (typeof THEME_COLOR_META_MAP)[SupportedThemeName]["bgColor"];
-export type SupportedThemeViaColor = (typeof THEME_COLOR_META_MAP)[SupportedThemeName]["viaColor"];
-export type SupportedThemeRingColor = (typeof THEME_COLOR_META_MAP)[SupportedThemeName]["ringColor"];
-export type SupportedThemeBorderColor = (typeof THEME_COLOR_META_MAP)[SupportedThemeName]["borderColor"];
+export type SupportedThemeName = keyof typeof THEME_COLOR_NAME_TO_CLASS_MAP;
+export type SupportedThemeColor = (typeof THEME_COLOR_NAME_TO_CLASS_MAP)[SupportedThemeName];
+export type SupportedThemeBgColor = (typeof THEME_COLOR_NAME_TO_BG_CLASS_MAP)[SupportedThemeName];
+export type SupportedThemeViaColor = (typeof THEME_COLOR_NAME_TO_VIA_CLASS_MAP)[SupportedThemeName];
+export type SupportedThemeRingColor = (typeof THEME_COLOR_NAME_TO_RING_CLASS_MAP)[SupportedThemeName];
+export type SupportedThemeBorderColor = (typeof THEME_COLOR_NAME_TO_BORDER_CLASS_MAP)[SupportedThemeName];
 export declare const __SUPPORTED_THEME_COLORS: Readonly<{
     readonly "text-purple-500": "典雅紫·清";
     readonly "text-orange-500": "轻奢橙·暖";
     readonly "text-indigo-500": "沉稳蓝·冷";
     readonly "text-emerald-500": "温润绿·愈";
     readonly "text-rose-500": "玫瑰红·柔";
+    readonly "text-clue-500": "天空蓝·X";
+    readonly "text-hose-500": "睡莲红·X";
+    readonly "text-pika-500": "皮卡黄·X";
 }>;
 export declare const THEME_COLOR_HEX_MAP: Readonly<{
     readonly "text-purple-500": "#AC62FD";
@@ -72,6 +28,9 @@ export declare const THEME_COLOR_HEX_MAP: Readonly<{
     readonly "text-indigo-500": "#6366F1";
     readonly "text-emerald-500": "#10B981";
     readonly "text-rose-500": "#F43F5E";
+    readonly "text-clue-500": "#1D9BF0";
+    readonly "text-hose-500": "#F91980";
+    readonly "text-pika-500": "#FFD400";
 }>;
 export declare const THEME_COLOR_NAME_TO_CLASS_MAP: Readonly<{
     readonly purple: "text-purple-500";
@@ -79,6 +38,9 @@ export declare const THEME_COLOR_NAME_TO_CLASS_MAP: Readonly<{
     readonly indigo: "text-indigo-500";
     readonly emerald: "text-emerald-500";
     readonly rose: "text-rose-500";
+    readonly clue: "text-clue-500";
+    readonly hose: "text-hose-500";
+    readonly pika: "text-pika-500";
 }>;
 export declare const THEME_COLOR_NAME_TO_BG_CLASS_MAP: Readonly<{
     readonly purple: "bg-purple-500/20";
@@ -86,6 +48,9 @@ export declare const THEME_COLOR_NAME_TO_BG_CLASS_MAP: Readonly<{
     readonly indigo: "bg-indigo-500/20";
     readonly emerald: "bg-emerald-500/20";
     readonly rose: "bg-rose-500/20";
+    readonly clue: "bg-clue-500/20";
+    readonly hose: "bg-hose-500/20";
+    readonly pika: "bg-pika-500/20";
 }>;
 export declare const THEME_COLOR_NAME_TO_VIA_CLASS_MAP: Readonly<{
     readonly purple: "via-purple-500/20";
@@ -93,6 +58,9 @@ export declare const THEME_COLOR_NAME_TO_VIA_CLASS_MAP: Readonly<{
     readonly indigo: "via-indigo-500/20";
     readonly emerald: "via-emerald-500/20";
     readonly rose: "via-rose-500/20";
+    readonly clue: "via-clue-500/20";
+    readonly hose: "via-hose-500/20";
+    readonly pika: "via-pika-500/20";
 }>;
 export declare const THEME_COLOR_NAME_TO_RING_CLASS_MAP: Readonly<{
     readonly purple: "ring-purple-500/20";
@@ -100,6 +68,9 @@ export declare const THEME_COLOR_NAME_TO_RING_CLASS_MAP: Readonly<{
     readonly indigo: "ring-indigo-500/20";
     readonly emerald: "ring-emerald-500/20";
     readonly rose: "ring-rose-500/20";
+    readonly clue: "ring-clue-500/20";
+    readonly hose: "ring-hose-500/20";
+    readonly pika: "ring-pika-500/20";
 }>;
 export declare const THEME_COLOR_NAME_TO_BORDER_CLASS_MAP: Readonly<{
     readonly purple: "border-purple-500";
@@ -107,6 +78,9 @@ export declare const THEME_COLOR_NAME_TO_BORDER_CLASS_MAP: Readonly<{
     readonly indigo: "border-indigo-500";
     readonly emerald: "border-emerald-500";
     readonly rose: "border-rose-500";
+    readonly clue: "border-clue-500";
+    readonly hose: "border-hose-500";
+    readonly pika: "border-pika-500";
 }>;
 export declare const validateThemeColor: (colorClass: string) => colorClass is SupportedThemeColor;
 export declare const validateThemeName: (colorName: string) => colorName is SupportedThemeName;
@@ -117,7 +91,7 @@ export declare const themeViaColor: SupportedThemeViaColor;
 export declare const themeRingColor: SupportedThemeRingColor;
 export declare const themeBorderColor: SupportedThemeBorderColor;
 export declare const themeMainBgColor = "bg-neutral-100 dark:bg-neutral-900";
-export declare const themeSvgIconColor: "#AC62FD" | "#F97316" | "#6366F1" | "#10B981" | "#F43F5E";
+export declare const themeSvgIconColor: "#AC62FD" | "#F97316" | "#6366F1" | "#10B981" | "#F43F5E" | "#1D9BF0" | "#F91980" | "#FFD400";
 export declare const themeSvgIconSize: string | number;
 export declare const THEME_BUTTON_GRADIENT_CLASS_MAP: Readonly<{
     readonly "text-purple-500": "bg-linear-to-r from-purple-400 to-pink-500 dark:from-purple-500 dark:to-pink-600";
@@ -125,6 +99,9 @@ export declare const THEME_BUTTON_GRADIENT_CLASS_MAP: Readonly<{
     readonly "text-indigo-500": "bg-linear-to-r from-indigo-400 to-blue-500 dark:from-indigo-500 dark:to-blue-600";
     readonly "text-emerald-500": "bg-linear-to-r from-emerald-400 to-teal-500 dark:from-emerald-500 dark:to-teal-600";
     readonly "text-rose-500": "bg-linear-to-r from-rose-400 to-pink-500 dark:from-rose-500 dark:to-pink-600";
+    readonly "text-clue-500": "bg-linear-to-r from-sky-400 to-clue-500 dark:from-clue-500 dark:to-cyan-500";
+    readonly "text-hose-500": "bg-linear-to-r from-hose-500 to-pink-500 dark:from-hose-500 dark:to-pink-600";
+    readonly "text-pika-500": "bg-linear-to-r from-pika-500 to-amber-500 dark:from-pika-500 dark:to-amber-500";
 }>;
 export declare const THEME_BUTTON_GRADIENT_HOVER_CLASS_MAP: Readonly<{
     readonly "text-purple-500": "hover:from-purple-500 hover:to-pink-600 dark:hover:from-purple-600 dark:hover:to-pink-700";
@@ -132,23 +109,31 @@ export declare const THEME_BUTTON_GRADIENT_HOVER_CLASS_MAP: Readonly<{
     readonly "text-indigo-500": "hover:from-indigo-500 hover:to-blue-600 dark:hover:from-indigo-600 dark:hover:to-blue-700";
     readonly "text-emerald-500": "hover:from-emerald-500 hover:to-teal-600 dark:hover:from-emerald-600 dark:hover:to-teal-700";
     readonly "text-rose-500": "hover:from-rose-500 hover:to-pink-600 dark:hover:from-rose-600 dark:hover:to-pink-700";
+    readonly "text-clue-500": "hover:from-clue-500 hover:to-cyan-600 dark:hover:from-clue-500 dark:hover:to-cyan-600";
+    readonly "text-hose-500": "hover:from-hose-500 hover:to-pink-600 dark:hover:from-hose-500 dark:hover:to-pink-700";
+    readonly "text-pika-500": "hover:from-pika-500 hover:to-amber-600 dark:hover:from-pika-500 dark:hover:to-amber-600";
 }>;
-export declare const themeButtonGradientClass: "bg-linear-to-r from-purple-400 to-pink-500 dark:from-purple-500 dark:to-pink-600" | "bg-linear-to-r from-orange-500 to-orange-600 dark:from-orange-500 dark:to-orange-700" | "bg-linear-to-r from-indigo-400 to-blue-500 dark:from-indigo-500 dark:to-blue-600" | "bg-linear-to-r from-emerald-400 to-teal-500 dark:from-emerald-500 dark:to-teal-600" | "bg-linear-to-r from-rose-400 to-pink-500 dark:from-rose-500 dark:to-pink-600";
-export declare const themeButtonGradientHoverClass: "hover:from-purple-500 hover:to-pink-600 dark:hover:from-purple-600 dark:hover:to-pink-700" | "hover:from-orange-500 hover:to-amber-600 dark:hover:from-orange-600 dark:hover:to-amber-700" | "hover:from-indigo-500 hover:to-blue-600 dark:hover:from-indigo-600 dark:hover:to-blue-700" | "hover:from-emerald-500 hover:to-teal-600 dark:hover:from-emerald-600 dark:hover:to-teal-700" | "hover:from-rose-500 hover:to-pink-600 dark:hover:from-rose-600 dark:hover:to-pink-700";
+export declare const themeButtonGradientClass: "bg-linear-to-r from-purple-400 to-pink-500 dark:from-purple-500 dark:to-pink-600" | "bg-linear-to-r from-orange-500 to-orange-600 dark:from-orange-500 dark:to-orange-700" | "bg-linear-to-r from-indigo-400 to-blue-500 dark:from-indigo-500 dark:to-blue-600" | "bg-linear-to-r from-emerald-400 to-teal-500 dark:from-emerald-500 dark:to-teal-600" | "bg-linear-to-r from-rose-400 to-pink-500 dark:from-rose-500 dark:to-pink-600" | "bg-linear-to-r from-sky-400 to-clue-500 dark:from-clue-500 dark:to-cyan-500" | "bg-linear-to-r from-hose-500 to-pink-500 dark:from-hose-500 dark:to-pink-600" | "bg-linear-to-r from-pika-500 to-amber-500 dark:from-pika-500 dark:to-amber-500";
+export declare const themeButtonGradientHoverClass: "hover:from-purple-500 hover:to-pink-600 dark:hover:from-purple-600 dark:hover:to-pink-700" | "hover:from-orange-500 hover:to-amber-600 dark:hover:from-orange-600 dark:hover:to-amber-700" | "hover:from-indigo-500 hover:to-blue-600 dark:hover:from-indigo-600 dark:hover:to-blue-700" | "hover:from-emerald-500 hover:to-teal-600 dark:hover:from-emerald-600 dark:hover:to-teal-700" | "hover:from-rose-500 hover:to-pink-600 dark:hover:from-rose-600 dark:hover:to-pink-700" | "hover:from-clue-500 hover:to-cyan-600 dark:hover:from-clue-500 dark:hover:to-cyan-600" | "hover:from-hose-500 hover:to-pink-600 dark:hover:from-hose-500 dark:hover:to-pink-700" | "hover:from-pika-500 hover:to-amber-600 dark:hover:from-pika-500 dark:hover:to-amber-600";
 export declare const THEME_HERO_EYES_ON_CLASS_MAP: Readonly<{
     readonly "text-purple-500": "bg-linear-to-r from-purple-400 to-pink-600";
     readonly "text-orange-500": "bg-linear-to-r from-orange-500 to-red-500";
     readonly "text-indigo-500": "bg-linear-to-r from-indigo-400 to-blue-600";
     readonly "text-emerald-500": "bg-linear-to-r from-emerald-400 to-teal-600";
     readonly "text-rose-500": "bg-linear-to-r from-rose-400 to-pink-600";
+    readonly "text-clue-500": "bg-linear-to-r from-sky-400 to-clue-500";
+    readonly "text-hose-500": "bg-linear-to-r from-hose-500 to-pink-600";
+    readonly "text-pika-500": "bg-linear-to-r from-pika-500 to-amber-600";
 }>;
-export declare const themeHeroEyesOnClass: "bg-linear-to-r from-purple-400 to-pink-600" | "bg-linear-to-r from-orange-500 to-red-500" | "bg-linear-to-r from-indigo-400 to-blue-600" | "bg-linear-to-r from-emerald-400 to-teal-600" | "bg-linear-to-r from-rose-400 to-pink-600";
+export declare const themeHeroEyesOnClass: "bg-linear-to-r from-purple-400 to-pink-600" | "bg-linear-to-r from-orange-500 to-red-500" | "bg-linear-to-r from-indigo-400 to-blue-600" | "bg-linear-to-r from-emerald-400 to-teal-600" | "bg-linear-to-r from-rose-400 to-pink-600" | "bg-linear-to-r from-sky-400 to-clue-500" | "bg-linear-to-r from-hose-500 to-pink-600" | "bg-linear-to-r from-pika-500 to-amber-600";
 export declare const THEME_RICH_TEXT_MARK_CLASS_MAP: Readonly<{
     readonly "text-purple-500": "bg-purple-300 dark:bg-purple-600";
     readonly "text-orange-500": "bg-orange-300 dark:bg-orange-600";
     readonly "text-indigo-500": "bg-indigo-300 dark:bg-indigo-600";
     readonly "text-emerald-500": "bg-emerald-300 dark:bg-emerald-600";
     readonly "text-rose-500": "bg-rose-300 dark:bg-rose-600";
+    readonly "text-clue-500": "bg-clue-500/30 dark:bg-clue-500/60";
+    readonly "text-hose-500": "bg-hose-500/30 dark:bg-hose-500/60";
+    readonly "text-pika-500": "bg-pika-500/40 dark:bg-pika-500/70";
 }>;
-export declare const themeRichTextMarkClass: "bg-purple-300 dark:bg-purple-600" | "bg-orange-300 dark:bg-orange-600" | "bg-indigo-300 dark:bg-indigo-600" | "bg-emerald-300 dark:bg-emerald-600" | "bg-rose-300 dark:bg-rose-600";
-export {};
+export declare const themeRichTextMarkClass: "bg-purple-300 dark:bg-purple-600" | "bg-orange-300 dark:bg-orange-600" | "bg-indigo-300 dark:bg-indigo-600" | "bg-emerald-300 dark:bg-emerald-600" | "bg-rose-300 dark:bg-rose-600" | "bg-clue-500/30 dark:bg-clue-500/60" | "bg-hose-500/30 dark:bg-hose-500/60" | "bg-pika-500/40 dark:bg-pika-500/70";

package/dist/lib/theme-util.js

@@ -54,6 +54,33 @@ const THEME_COLOR_META_MAP = Object.freeze({
         borderColor: "border-rose-500",
         hex: "#F43F5E",
     },
+    clue: {
+        label: "天空蓝·X",
+        textColor: "text-clue-500",
+        bgColor: "bg-clue-500/20",
+        viaColor: "via-clue-500/20",
+        ringColor: "ring-clue-500/20",
+        borderColor: "border-clue-500",
+        hex: "#1D9BF0",
+    },
+    hose: {
+        label: "睡莲红·X",
+        textColor: "text-hose-500",
+        bgColor: "bg-hose-500/20",
+        viaColor: "via-hose-500/20",
+        ringColor: "ring-hose-500/20",
+        borderColor: "border-hose-500",
+        hex: "#F91980",
+    },
+    pika: {
+        label: "皮卡黄·X",
+        textColor: "text-pika-500",
+        bgColor: "bg-pika-500/20",
+        viaColor: "via-pika-500/20",
+        ringColor: "ring-pika-500/20",
+        borderColor: "border-pika-500",
+        hex: "#FFD400",
+    },
 });
 // Supported theme color classes (static for Tailwind scan)
 const __SUPPORTED_THEME_COLORS = Object.freeze({
@@ -62,6 +89,9 @@ const __SUPPORTED_THEME_COLORS = Object.freeze({
     "text-indigo-500": THEME_COLOR_META_MAP.indigo.label,
     "text-emerald-500": THEME_COLOR_META_MAP.emerald.label,
     "text-rose-500": THEME_COLOR_META_MAP.rose.label,
+    "text-clue-500": THEME_COLOR_META_MAP.clue.label,
+    "text-hose-500": THEME_COLOR_META_MAP.hose.label,
+    "text-pika-500": THEME_COLOR_META_MAP.pika.label,
 });
 // Hex color map (uppercase, match Tailwind classes)
 const THEME_COLOR_HEX_MAP = Object.freeze({
@@ -70,6 +100,9 @@ const THEME_COLOR_HEX_MAP = Object.freeze({
     "text-indigo-500": THEME_COLOR_META_MAP.indigo.hex,
     "text-emerald-500": THEME_COLOR_META_MAP.emerald.hex,
     "text-rose-500": THEME_COLOR_META_MAP.rose.hex,
+    "text-clue-500": THEME_COLOR_META_MAP.clue.hex,
+    "text-hose-500": THEME_COLOR_META_MAP.hose.hex,
+    "text-pika-500": THEME_COLOR_META_MAP.pika.hex,
 });
 // Short theme names for env configuration
 const THEME_COLOR_NAME_TO_CLASS_MAP = Object.freeze({
@@ -78,6 +111,9 @@ const THEME_COLOR_NAME_TO_CLASS_MAP = Object.freeze({
     indigo: THEME_COLOR_META_MAP.indigo.textColor,
     emerald: THEME_COLOR_META_MAP.emerald.textColor,
     rose: THEME_COLOR_META_MAP.rose.textColor,
+    clue: THEME_COLOR_META_MAP.clue.textColor,
+    hose: THEME_COLOR_META_MAP.hose.textColor,
+    pika: THEME_COLOR_META_MAP.pika.textColor,
 });
 const THEME_COLOR_NAME_TO_BG_CLASS_MAP = Object.freeze({
     purple: THEME_COLOR_META_MAP.purple.bgColor,
@@ -85,6 +121,9 @@ const THEME_COLOR_NAME_TO_BG_CLASS_MAP = Object.freeze({
     indigo: THEME_COLOR_META_MAP.indigo.bgColor,
     emerald: THEME_COLOR_META_MAP.emerald.bgColor,
     rose: THEME_COLOR_META_MAP.rose.bgColor,
+    clue: THEME_COLOR_META_MAP.clue.bgColor,
+    hose: THEME_COLOR_META_MAP.hose.bgColor,
+    pika: THEME_COLOR_META_MAP.pika.bgColor,
 });
 const THEME_COLOR_NAME_TO_VIA_CLASS_MAP = Object.freeze({
     purple: THEME_COLOR_META_MAP.purple.viaColor,
@@ -92,6 +131,9 @@ const THEME_COLOR_NAME_TO_VIA_CLASS_MAP = Object.freeze({
     indigo: THEME_COLOR_META_MAP.indigo.viaColor,
     emerald: THEME_COLOR_META_MAP.emerald.viaColor,
     rose: THEME_COLOR_META_MAP.rose.viaColor,
+    clue: THEME_COLOR_META_MAP.clue.viaColor,
+    hose: THEME_COLOR_META_MAP.hose.viaColor,
+    pika: THEME_COLOR_META_MAP.pika.viaColor,
 });
 const THEME_COLOR_NAME_TO_RING_CLASS_MAP = Object.freeze({
     purple: THEME_COLOR_META_MAP.purple.ringColor,
@@ -99,6 +141,9 @@ const THEME_COLOR_NAME_TO_RING_CLASS_MAP = Object.freeze({
     indigo: THEME_COLOR_META_MAP.indigo.ringColor,
     emerald: THEME_COLOR_META_MAP.emerald.ringColor,
     rose: THEME_COLOR_META_MAP.rose.ringColor,
+    clue: THEME_COLOR_META_MAP.clue.ringColor,
+    hose: THEME_COLOR_META_MAP.hose.ringColor,
+    pika: THEME_COLOR_META_MAP.pika.ringColor,
 });
 const THEME_COLOR_NAME_TO_BORDER_CLASS_MAP = Object.freeze({
     purple: THEME_COLOR_META_MAP.purple.borderColor,
@@ -106,6 +151,9 @@ const THEME_COLOR_NAME_TO_BORDER_CLASS_MAP = Object.freeze({
     indigo: THEME_COLOR_META_MAP.indigo.borderColor,
     emerald: THEME_COLOR_META_MAP.emerald.borderColor,
     rose: THEME_COLOR_META_MAP.rose.borderColor,
+    clue: THEME_COLOR_META_MAP.clue.borderColor,
+    hose: THEME_COLOR_META_MAP.hose.borderColor,
+    pika: THEME_COLOR_META_MAP.pika.borderColor,
 });
 // Validate theme color class (type guard)
 const validateThemeColor = (colorClass) => {
@@ -145,6 +193,9 @@ const THEME_BUTTON_GRADIENT_CLASS_MAP = Object.freeze({
     "text-indigo-500": "bg-linear-to-r from-indigo-400 to-blue-500 dark:from-indigo-500 dark:to-blue-600",
     "text-emerald-500": "bg-linear-to-r from-emerald-400 to-teal-500 dark:from-emerald-500 dark:to-teal-600",
     "text-rose-500": "bg-linear-to-r from-rose-400 to-pink-500 dark:from-rose-500 dark:to-pink-600",
+    "text-clue-500": "bg-linear-to-r from-sky-400 to-clue-500 dark:from-clue-500 dark:to-cyan-500",
+    "text-hose-500": "bg-linear-to-r from-hose-500 to-pink-500 dark:from-hose-500 dark:to-pink-600",
+    "text-pika-500": "bg-linear-to-r from-pika-500 to-amber-500 dark:from-pika-500 dark:to-amber-500",
 });
 // Theme button hover gradient classes (static for Tailwind scan)
 const THEME_BUTTON_GRADIENT_HOVER_CLASS_MAP = Object.freeze({
@@ -153,6 +204,9 @@ const THEME_BUTTON_GRADIENT_HOVER_CLASS_MAP = Object.freeze({
     "text-indigo-500": "hover:from-indigo-500 hover:to-blue-600 dark:hover:from-indigo-600 dark:hover:to-blue-700",
     "text-emerald-500": "hover:from-emerald-500 hover:to-teal-600 dark:hover:from-emerald-600 dark:hover:to-teal-700",
     "text-rose-500": "hover:from-rose-500 hover:to-pink-600 dark:hover:from-rose-600 dark:hover:to-pink-700",
+    "text-clue-500": "hover:from-clue-500 hover:to-cyan-600 dark:hover:from-clue-500 dark:hover:to-cyan-600",
+    "text-hose-500": "hover:from-hose-500 hover:to-pink-600 dark:hover:from-hose-500 dark:hover:to-pink-700",
+    "text-pika-500": "hover:from-pika-500 hover:to-amber-600 dark:hover:from-pika-500 dark:hover:to-amber-600",
 });
 // Global button gradient classes (type-safe, follows themeIconColor)
 const themeButtonGradientClass = THEME_BUTTON_GRADIENT_CLASS_MAP[themeIconColor];
@@ -164,6 +218,9 @@ const THEME_HERO_EYES_ON_CLASS_MAP = Object.freeze({
     "text-indigo-500": "bg-linear-to-r from-indigo-400 to-blue-600",
     "text-emerald-500": "bg-linear-to-r from-emerald-400 to-teal-600",
     "text-rose-500": "bg-linear-to-r from-rose-400 to-pink-600",
+    "text-clue-500": "bg-linear-to-r from-sky-400 to-clue-500",
+    "text-hose-500": "bg-linear-to-r from-hose-500 to-pink-600",
+    "text-pika-500": "bg-linear-to-r from-pika-500 to-amber-600",
 });
 const themeHeroEyesOnClass = THEME_HERO_EYES_ON_CLASS_MAP[themeIconColor];
 // Theme rich-text <mark> highlight background classes (darker emphasis, readable)
@@ -173,6 +230,9 @@ const THEME_RICH_TEXT_MARK_CLASS_MAP = Object.freeze({
     "text-indigo-500": "bg-indigo-300 dark:bg-indigo-600",
     "text-emerald-500": "bg-emerald-300 dark:bg-emerald-600",
     "text-rose-500": "bg-rose-300 dark:bg-rose-600",
+    "text-clue-500": "bg-clue-500/30 dark:bg-clue-500/60",
+    "text-hose-500": "bg-hose-500/30 dark:bg-hose-500/60",
+    "text-pika-500": "bg-pika-500/40 dark:bg-pika-500/70",
 });
 const themeRichTextMarkClass = THEME_RICH_TEXT_MARK_CLASS_MAP[themeIconColor];
 

package/dist/lib/theme-util.mjs

@@ -52,6 +52,33 @@ const THEME_COLOR_META_MAP = Object.freeze({
         borderColor: "border-rose-500",
         hex: "#F43F5E",
     },
+    clue: {
+        label: "天空蓝·X",
+        textColor: "text-clue-500",
+        bgColor: "bg-clue-500/20",
+        viaColor: "via-clue-500/20",
+        ringColor: "ring-clue-500/20",
+        borderColor: "border-clue-500",
+        hex: "#1D9BF0",
+    },
+    hose: {
+        label: "睡莲红·X",
+        textColor: "text-hose-500",
+        bgColor: "bg-hose-500/20",
+        viaColor: "via-hose-500/20",
+        ringColor: "ring-hose-500/20",
+        borderColor: "border-hose-500",
+        hex: "#F91980",
+    },
+    pika: {
+        label: "皮卡黄·X",
+        textColor: "text-pika-500",
+        bgColor: "bg-pika-500/20",
+        viaColor: "via-pika-500/20",
+        ringColor: "ring-pika-500/20",
+        borderColor: "border-pika-500",
+        hex: "#FFD400",
+    },
 });
 // Supported theme color classes (static for Tailwind scan)
 const __SUPPORTED_THEME_COLORS = Object.freeze({
@@ -60,6 +87,9 @@ const __SUPPORTED_THEME_COLORS = Object.freeze({
     "text-indigo-500": THEME_COLOR_META_MAP.indigo.label,
     "text-emerald-500": THEME_COLOR_META_MAP.emerald.label,
     "text-rose-500": THEME_COLOR_META_MAP.rose.label,
+    "text-clue-500": THEME_COLOR_META_MAP.clue.label,
+    "text-hose-500": THEME_COLOR_META_MAP.hose.label,
+    "text-pika-500": THEME_COLOR_META_MAP.pika.label,
 });
 // Hex color map (uppercase, match Tailwind classes)
 const THEME_COLOR_HEX_MAP = Object.freeze({
@@ -68,6 +98,9 @@ const THEME_COLOR_HEX_MAP = Object.freeze({
     "text-indigo-500": THEME_COLOR_META_MAP.indigo.hex,
     "text-emerald-500": THEME_COLOR_META_MAP.emerald.hex,
     "text-rose-500": THEME_COLOR_META_MAP.rose.hex,
+    "text-clue-500": THEME_COLOR_META_MAP.clue.hex,
+    "text-hose-500": THEME_COLOR_META_MAP.hose.hex,
+    "text-pika-500": THEME_COLOR_META_MAP.pika.hex,
 });
 // Short theme names for env configuration
 const THEME_COLOR_NAME_TO_CLASS_MAP = Object.freeze({
@@ -76,6 +109,9 @@ const THEME_COLOR_NAME_TO_CLASS_MAP = Object.freeze({
     indigo: THEME_COLOR_META_MAP.indigo.textColor,
     emerald: THEME_COLOR_META_MAP.emerald.textColor,
     rose: THEME_COLOR_META_MAP.rose.textColor,
+    clue: THEME_COLOR_META_MAP.clue.textColor,
+    hose: THEME_COLOR_META_MAP.hose.textColor,
+    pika: THEME_COLOR_META_MAP.pika.textColor,
 });
 const THEME_COLOR_NAME_TO_BG_CLASS_MAP = Object.freeze({
     purple: THEME_COLOR_META_MAP.purple.bgColor,
@@ -83,6 +119,9 @@ const THEME_COLOR_NAME_TO_BG_CLASS_MAP = Object.freeze({
     indigo: THEME_COLOR_META_MAP.indigo.bgColor,
     emerald: THEME_COLOR_META_MAP.emerald.bgColor,
     rose: THEME_COLOR_META_MAP.rose.bgColor,
+    clue: THEME_COLOR_META_MAP.clue.bgColor,
+    hose: THEME_COLOR_META_MAP.hose.bgColor,
+    pika: THEME_COLOR_META_MAP.pika.bgColor,
 });
 const THEME_COLOR_NAME_TO_VIA_CLASS_MAP = Object.freeze({
     purple: THEME_COLOR_META_MAP.purple.viaColor,
@@ -90,6 +129,9 @@ const THEME_COLOR_NAME_TO_VIA_CLASS_MAP = Object.freeze({
     indigo: THEME_COLOR_META_MAP.indigo.viaColor,
     emerald: THEME_COLOR_META_MAP.emerald.viaColor,
     rose: THEME_COLOR_META_MAP.rose.viaColor,
+    clue: THEME_COLOR_META_MAP.clue.viaColor,
+    hose: THEME_COLOR_META_MAP.hose.viaColor,
+    pika: THEME_COLOR_META_MAP.pika.viaColor,
 });
 const THEME_COLOR_NAME_TO_RING_CLASS_MAP = Object.freeze({
     purple: THEME_COLOR_META_MAP.purple.ringColor,
@@ -97,6 +139,9 @@ const THEME_COLOR_NAME_TO_RING_CLASS_MAP = Object.freeze({
     indigo: THEME_COLOR_META_MAP.indigo.ringColor,
     emerald: THEME_COLOR_META_MAP.emerald.ringColor,
     rose: THEME_COLOR_META_MAP.rose.ringColor,
+    clue: THEME_COLOR_META_MAP.clue.ringColor,
+    hose: THEME_COLOR_META_MAP.hose.ringColor,
+    pika: THEME_COLOR_META_MAP.pika.ringColor,
 });
 const THEME_COLOR_NAME_TO_BORDER_CLASS_MAP = Object.freeze({
     purple: THEME_COLOR_META_MAP.purple.borderColor,
@@ -104,6 +149,9 @@ const THEME_COLOR_NAME_TO_BORDER_CLASS_MAP = Object.freeze({
     indigo: THEME_COLOR_META_MAP.indigo.borderColor,
     emerald: THEME_COLOR_META_MAP.emerald.borderColor,
     rose: THEME_COLOR_META_MAP.rose.borderColor,
+    clue: THEME_COLOR_META_MAP.clue.borderColor,
+    hose: THEME_COLOR_META_MAP.hose.borderColor,
+    pika: THEME_COLOR_META_MAP.pika.borderColor,
 });
 // Validate theme color class (type guard)
 const validateThemeColor = (colorClass) => {
@@ -143,6 +191,9 @@ const THEME_BUTTON_GRADIENT_CLASS_MAP = Object.freeze({
     "text-indigo-500": "bg-linear-to-r from-indigo-400 to-blue-500 dark:from-indigo-500 dark:to-blue-600",
     "text-emerald-500": "bg-linear-to-r from-emerald-400 to-teal-500 dark:from-emerald-500 dark:to-teal-600",
     "text-rose-500": "bg-linear-to-r from-rose-400 to-pink-500 dark:from-rose-500 dark:to-pink-600",
+    "text-clue-500": "bg-linear-to-r from-sky-400 to-clue-500 dark:from-clue-500 dark:to-cyan-500",
+    "text-hose-500": "bg-linear-to-r from-hose-500 to-pink-500 dark:from-hose-500 dark:to-pink-600",
+    "text-pika-500": "bg-linear-to-r from-pika-500 to-amber-500 dark:from-pika-500 dark:to-amber-500",
 });
 // Theme button hover gradient classes (static for Tailwind scan)
 const THEME_BUTTON_GRADIENT_HOVER_CLASS_MAP = Object.freeze({
@@ -151,6 +202,9 @@ const THEME_BUTTON_GRADIENT_HOVER_CLASS_MAP = Object.freeze({
     "text-indigo-500": "hover:from-indigo-500 hover:to-blue-600 dark:hover:from-indigo-600 dark:hover:to-blue-700",
     "text-emerald-500": "hover:from-emerald-500 hover:to-teal-600 dark:hover:from-emerald-600 dark:hover:to-teal-700",
     "text-rose-500": "hover:from-rose-500 hover:to-pink-600 dark:hover:from-rose-600 dark:hover:to-pink-700",
+    "text-clue-500": "hover:from-clue-500 hover:to-cyan-600 dark:hover:from-clue-500 dark:hover:to-cyan-600",
+    "text-hose-500": "hover:from-hose-500 hover:to-pink-600 dark:hover:from-hose-500 dark:hover:to-pink-700",
+    "text-pika-500": "hover:from-pika-500 hover:to-amber-600 dark:hover:from-pika-500 dark:hover:to-amber-600",
 });
 // Global button gradient classes (type-safe, follows themeIconColor)
 const themeButtonGradientClass = THEME_BUTTON_GRADIENT_CLASS_MAP[themeIconColor];
@@ -162,6 +216,9 @@ const THEME_HERO_EYES_ON_CLASS_MAP = Object.freeze({
     "text-indigo-500": "bg-linear-to-r from-indigo-400 to-blue-600",
     "text-emerald-500": "bg-linear-to-r from-emerald-400 to-teal-600",
     "text-rose-500": "bg-linear-to-r from-rose-400 to-pink-600",
+    "text-clue-500": "bg-linear-to-r from-sky-400 to-clue-500",
+    "text-hose-500": "bg-linear-to-r from-hose-500 to-pink-600",
+    "text-pika-500": "bg-linear-to-r from-pika-500 to-amber-600",
 });
 const themeHeroEyesOnClass = THEME_HERO_EYES_ON_CLASS_MAP[themeIconColor];
 // Theme rich-text <mark> highlight background classes (darker emphasis, readable)
@@ -171,6 +228,9 @@ const THEME_RICH_TEXT_MARK_CLASS_MAP = Object.freeze({
     "text-indigo-500": "bg-indigo-300 dark:bg-indigo-600",
     "text-emerald-500": "bg-emerald-300 dark:bg-emerald-600",
     "text-rose-500": "bg-rose-300 dark:bg-rose-600",
+    "text-clue-500": "bg-clue-500/30 dark:bg-clue-500/60",
+    "text-hose-500": "bg-hose-500/30 dark:bg-hose-500/60",
+    "text-pika-500": "bg-pika-500/40 dark:bg-pika-500/70",
 });
 const themeRichTextMarkClass = THEME_RICH_TEXT_MARK_CLASS_MAP[themeIconColor];
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/base-ui",
-  "version": "30.1.0",
+  "version": "31.0.1",
   "description": "Base UI components for windrun-huaiin projects",
   "type": "module",
   "exports": {
@@ -59,7 +59,7 @@
     "class-variance-authority": "^0.7.1",
     "lucide-react": "^0.577.0",
     "tslib": "^2.8.1",
-    "@windrun-huaiin/lib": "^30.0.0"
+    "@windrun-huaiin/lib": "^31.0.3"
   },
   "peerDependencies": {
     "clsx": "^2.1.1",
@@ -90,6 +90,12 @@
   "publishConfig": {
     "access": "public"
   },
+  "homepage": "https://d8ger.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/caofanCPU/next-ai-build.git",
+    "directory": "packages/base-ui"
+  },
   "scripts": {
     "build": "rollup -c rollup.config.mjs",
     "build:prod": "rollup -c rollup.config.mjs",

package/src/lib/theme-util.ts

@@ -53,14 +53,41 @@ const THEME_COLOR_META_MAP = Object.freeze({
     borderColor: "border-rose-500",
     hex: "#F43F5E",
   },
+  clue: {
+    label: "天空蓝·X",
+    textColor: "text-clue-500",
+    bgColor: "bg-clue-500/20",
+    viaColor: "via-clue-500/20",
+    ringColor: "ring-clue-500/20",
+    borderColor: "border-clue-500",
+    hex: "#1D9BF0",
+  },
+  hose: {
+    label: "睡莲红·X",
+    textColor: "text-hose-500",
+    bgColor: "bg-hose-500/20",
+    viaColor: "via-hose-500/20",
+    ringColor: "ring-hose-500/20",
+    borderColor: "border-hose-500",
+    hex: "#F91980",
+  },
+  pika: {
+    label: "皮卡黄·X",
+    textColor: "text-pika-500",
+    bgColor: "bg-pika-500/20",
+    viaColor: "via-pika-500/20",
+    ringColor: "ring-pika-500/20",
+    borderColor: "border-pika-500",
+    hex: "#FFD400",
+  },
 } as const);
 
-export type SupportedThemeName = keyof typeof THEME_COLOR_META_MAP;
-export type SupportedThemeColor = (typeof THEME_COLOR_META_MAP)[SupportedThemeName]["textColor"];
-export type SupportedThemeBgColor = (typeof THEME_COLOR_META_MAP)[SupportedThemeName]["bgColor"];
-export type SupportedThemeViaColor = (typeof THEME_COLOR_META_MAP)[SupportedThemeName]["viaColor"];
-export type SupportedThemeRingColor = (typeof THEME_COLOR_META_MAP)[SupportedThemeName]["ringColor"];
-export type SupportedThemeBorderColor = (typeof THEME_COLOR_META_MAP)[SupportedThemeName]["borderColor"];
+export type SupportedThemeName = keyof typeof THEME_COLOR_NAME_TO_CLASS_MAP;
+export type SupportedThemeColor = (typeof THEME_COLOR_NAME_TO_CLASS_MAP)[SupportedThemeName];
+export type SupportedThemeBgColor = (typeof THEME_COLOR_NAME_TO_BG_CLASS_MAP)[SupportedThemeName];
+export type SupportedThemeViaColor = (typeof THEME_COLOR_NAME_TO_VIA_CLASS_MAP)[SupportedThemeName];
+export type SupportedThemeRingColor = (typeof THEME_COLOR_NAME_TO_RING_CLASS_MAP)[SupportedThemeName];
+export type SupportedThemeBorderColor = (typeof THEME_COLOR_NAME_TO_BORDER_CLASS_MAP)[SupportedThemeName];
 
 // Supported theme color classes (static for Tailwind scan)
 export const __SUPPORTED_THEME_COLORS = Object.freeze({
@@ -69,6 +96,9 @@ export const __SUPPORTED_THEME_COLORS = Object.freeze({
   "text-indigo-500": THEME_COLOR_META_MAP.indigo.label,
   "text-emerald-500": THEME_COLOR_META_MAP.emerald.label,
   "text-rose-500": THEME_COLOR_META_MAP.rose.label,
+  "text-clue-500": THEME_COLOR_META_MAP.clue.label,
+  "text-hose-500": THEME_COLOR_META_MAP.hose.label,
+  "text-pika-500": THEME_COLOR_META_MAP.pika.label,
 } as const);
 
 // Hex color map (uppercase, match Tailwind classes)
@@ -78,6 +108,9 @@ export const THEME_COLOR_HEX_MAP = Object.freeze({
   "text-indigo-500": THEME_COLOR_META_MAP.indigo.hex,
   "text-emerald-500": THEME_COLOR_META_MAP.emerald.hex,
   "text-rose-500": THEME_COLOR_META_MAP.rose.hex,
+  "text-clue-500": THEME_COLOR_META_MAP.clue.hex,
+  "text-hose-500": THEME_COLOR_META_MAP.hose.hex,
+  "text-pika-500": THEME_COLOR_META_MAP.pika.hex,
 } as const);
 
 // Short theme names for env configuration
@@ -87,6 +120,9 @@ export const THEME_COLOR_NAME_TO_CLASS_MAP = Object.freeze({
   indigo: THEME_COLOR_META_MAP.indigo.textColor,
   emerald: THEME_COLOR_META_MAP.emerald.textColor,
   rose: THEME_COLOR_META_MAP.rose.textColor,
+  clue: THEME_COLOR_META_MAP.clue.textColor,
+  hose: THEME_COLOR_META_MAP.hose.textColor,
+  pika: THEME_COLOR_META_MAP.pika.textColor,
 } as const);
 
 export const THEME_COLOR_NAME_TO_BG_CLASS_MAP = Object.freeze({
@@ -95,6 +131,9 @@ export const THEME_COLOR_NAME_TO_BG_CLASS_MAP = Object.freeze({
   indigo: THEME_COLOR_META_MAP.indigo.bgColor,
   emerald: THEME_COLOR_META_MAP.emerald.bgColor,
   rose: THEME_COLOR_META_MAP.rose.bgColor,
+  clue: THEME_COLOR_META_MAP.clue.bgColor,
+  hose: THEME_COLOR_META_MAP.hose.bgColor,
+  pika: THEME_COLOR_META_MAP.pika.bgColor,
 } as const);
 
 export const THEME_COLOR_NAME_TO_VIA_CLASS_MAP = Object.freeze({
@@ -103,6 +142,9 @@ export const THEME_COLOR_NAME_TO_VIA_CLASS_MAP = Object.freeze({
   indigo: THEME_COLOR_META_MAP.indigo.viaColor,
   emerald: THEME_COLOR_META_MAP.emerald.viaColor,
   rose: THEME_COLOR_META_MAP.rose.viaColor,
+  clue: THEME_COLOR_META_MAP.clue.viaColor,
+  hose: THEME_COLOR_META_MAP.hose.viaColor,
+  pika: THEME_COLOR_META_MAP.pika.viaColor,
 } as const);
 
 export const THEME_COLOR_NAME_TO_RING_CLASS_MAP = Object.freeze({
@@ -111,6 +153,9 @@ export const THEME_COLOR_NAME_TO_RING_CLASS_MAP = Object.freeze({
   indigo: THEME_COLOR_META_MAP.indigo.ringColor,
   emerald: THEME_COLOR_META_MAP.emerald.ringColor,
   rose: THEME_COLOR_META_MAP.rose.ringColor,
+  clue: THEME_COLOR_META_MAP.clue.ringColor,
+  hose: THEME_COLOR_META_MAP.hose.ringColor,
+  pika: THEME_COLOR_META_MAP.pika.ringColor,
 } as const);
 
 export const THEME_COLOR_NAME_TO_BORDER_CLASS_MAP = Object.freeze({
@@ -119,6 +164,9 @@ export const THEME_COLOR_NAME_TO_BORDER_CLASS_MAP = Object.freeze({
   indigo: THEME_COLOR_META_MAP.indigo.borderColor,
   emerald: THEME_COLOR_META_MAP.emerald.borderColor,
   rose: THEME_COLOR_META_MAP.rose.borderColor,
+  clue: THEME_COLOR_META_MAP.clue.borderColor,
+  hose: THEME_COLOR_META_MAP.hose.borderColor,
+  pika: THEME_COLOR_META_MAP.pika.borderColor,
 } as const);
 
 // Validate theme color class (type guard)
@@ -169,6 +217,9 @@ export const THEME_BUTTON_GRADIENT_CLASS_MAP = Object.freeze({
   "text-indigo-500": "bg-linear-to-r from-indigo-400 to-blue-500 dark:from-indigo-500 dark:to-blue-600",
   "text-emerald-500": "bg-linear-to-r from-emerald-400 to-teal-500 dark:from-emerald-500 dark:to-teal-600",
   "text-rose-500": "bg-linear-to-r from-rose-400 to-pink-500 dark:from-rose-500 dark:to-pink-600",
+  "text-clue-500": "bg-linear-to-r from-sky-400 to-clue-500 dark:from-clue-500 dark:to-cyan-500",
+  "text-hose-500": "bg-linear-to-r from-hose-500 to-pink-500 dark:from-hose-500 dark:to-pink-600",
+  "text-pika-500": "bg-linear-to-r from-pika-500 to-amber-500 dark:from-pika-500 dark:to-amber-500",
 } as const);
 
 // Theme button hover gradient classes (static for Tailwind scan)
@@ -178,6 +229,9 @@ export const THEME_BUTTON_GRADIENT_HOVER_CLASS_MAP = Object.freeze({
   "text-indigo-500": "hover:from-indigo-500 hover:to-blue-600 dark:hover:from-indigo-600 dark:hover:to-blue-700",
   "text-emerald-500": "hover:from-emerald-500 hover:to-teal-600 dark:hover:from-emerald-600 dark:hover:to-teal-700",
   "text-rose-500": "hover:from-rose-500 hover:to-pink-600 dark:hover:from-rose-600 dark:hover:to-pink-700",
+  "text-clue-500": "hover:from-clue-500 hover:to-cyan-600 dark:hover:from-clue-500 dark:hover:to-cyan-600",
+  "text-hose-500": "hover:from-hose-500 hover:to-pink-600 dark:hover:from-hose-500 dark:hover:to-pink-700",
+  "text-pika-500": "hover:from-pika-500 hover:to-amber-600 dark:hover:from-pika-500 dark:hover:to-amber-600",
 } as const);
 
 // Global button gradient classes (type-safe, follows themeIconColor)
@@ -191,6 +245,9 @@ export const THEME_HERO_EYES_ON_CLASS_MAP = Object.freeze({
   "text-indigo-500": "bg-linear-to-r from-indigo-400 to-blue-600",
   "text-emerald-500": "bg-linear-to-r from-emerald-400 to-teal-600",
   "text-rose-500": "bg-linear-to-r from-rose-400 to-pink-600",
+  "text-clue-500": "bg-linear-to-r from-sky-400 to-clue-500",
+  "text-hose-500": "bg-linear-to-r from-hose-500 to-pink-600",
+  "text-pika-500": "bg-linear-to-r from-pika-500 to-amber-600",
 } as const);
 
 export const themeHeroEyesOnClass = THEME_HERO_EYES_ON_CLASS_MAP[themeIconColor];
@@ -202,6 +259,9 @@ export const THEME_RICH_TEXT_MARK_CLASS_MAP = Object.freeze({
   "text-indigo-500": "bg-indigo-300 dark:bg-indigo-600",
   "text-emerald-500": "bg-emerald-300 dark:bg-emerald-600",
   "text-rose-500": "bg-rose-300 dark:bg-rose-600",
+  "text-clue-500": "bg-clue-500/30 dark:bg-clue-500/60",
+  "text-hose-500": "bg-hose-500/30 dark:bg-hose-500/60",
+  "text-pika-500": "bg-pika-500/40 dark:bg-pika-500/70",
 } as const);
 
 export const themeRichTextMarkClass = THEME_RICH_TEXT_MARK_CLASS_MAP[themeIconColor];

package/src/styles/base-ui.css

@@ -1,2 +1,7 @@
 
- 
+ 
+@theme {
+  --color-clue-500: #1D9BF0;
+  --color-hose-500: #F91980;
+  --color-pika-500: #FFD400;
+}