@windrun-huaiin/base-ui 30.0.0 → 31.0.0

package/README.md

@@ -1,202 +1,57 @@
 # 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`
 
-- 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/)
-- 404-page: 404 error page component
-- 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, NotFoundPage, LanguageSwitcher } from '@windrun-huaiin/base-ui';
-
-// Use UI components
-<Button variant="default" size="lg">
-  Click me
-</Button>
-
-// Use base components
-<NotFoundPage />
-
-// 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/components/index.d.ts

@@ -1,4 +1,3 @@
-export * from './404-page';
 export * from './language-switcher';
 export * from './script/google-analytics-script';
 export * from './script/microsoft-clarity-script';

package/dist/components/index.js

@@ -1,7 +1,6 @@
 "use client";
 'use strict';
 
-var _404Page = require('./404-page.js');
 var languageSwitcher = require('./language-switcher.js');
 var googleAnalyticsScript = require('./script/google-analytics-script.js');
 var microsoftClarityScript = require('./script/microsoft-clarity-script.js');
@@ -9,7 +8,6 @@ var googleAnalyticsClient = require('./script/google-analytics-client.js');
 
 
 
-exports.NotFoundPage = _404Page.NotFoundPage;
 exports.LanguageSwitcher = languageSwitcher.LanguageSwitcher;
 exports.GoogleAnalyticsScript = googleAnalyticsScript.GoogleAnalyticsScript;
 exports.MicrosoftClarityScript = microsoftClarityScript.MicrosoftClarityScript;

package/dist/components/index.mjs

@@ -1,5 +1,4 @@
 "use client";
-export { NotFoundPage } from './404-page.mjs';
 export { LanguageSwitcher } from './language-switcher.mjs';
 export { GoogleAnalyticsScript } from './script/google-analytics-script.mjs';
 export { MicrosoftClarityScript } from './script/microsoft-clarity-script.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/base-ui",
-  "version": "30.0.0",
+  "version": "31.0.0",
   "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.0"
   },
   "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/components/index.ts

@@ -1,5 +1,4 @@
 "use client"
-export * from './404-page';
 export * from './language-switcher';
 export * from './script/google-analytics-script';
 export * from './script/microsoft-clarity-script';

package/src/components/404-page.tsx

@@ -1,111 +0,0 @@
-'use client';
-
-import { NotFoundIcon } from "@base-ui/components/global-icon";
-import { useEffect, useState, type ReactNode } from "react";
-import { themeBgColor, themeViaColor, themeButtonGradientClass } from "@base-ui/lib";
-import { cn } from "@windrun-huaiin/lib/utils"; 
-
-interface NotFoundPageProps {
-  siteIcon: ReactNode;
-}
-
-export function NotFoundPage({ siteIcon }: NotFoundPageProps) {
-  const [glitchText, setGlitchText] = useState("404");
-
-  // glitch effect
-  useEffect(() => {
-    const glitchChars = ["4", "0", "4", "?", "#", "!", "*", "&", "%", "$"];
-
-    const interval = setInterval(() => {
-      // 80% probability to display "404", 20% probability to display random characters
-      if (Math.random() < 0.5) {
-        setGlitchText("404");
-      } else {
-        const randomChars = Array.from(
-          { length: 3 },
-          () => glitchChars[Math.floor(Math.random() * glitchChars.length)]
-        ).join("");
-        setGlitchText(randomChars);
-      }
-    }, 600); // every 1.5 seconds
-
-    return () => clearInterval(interval);
-  }, []);
-
-  return (
-    <div className="flex min-h-dvh w-full flex-col items-center justify-center px-4 py-8">
-      {/* main content area */}
-      <div className="text-center space-y-8 max-w-2xl">
-        {/* 404 number - glitch effect */}
-        <div className="relative flex justify-center">
-          <h1
-            className={cn("text-8xl md:text-9xl font-bold bg-linear-to-r bg-clip-text text-transparent select-none", themeButtonGradientClass)}
-            style={{
-              fontFamily: "Montserrat, monospace",
-              textShadow: "0 0 30px rgba(172, 98, 253, 0.3)",
-              letterSpacing: "0.1em",
-            }}
-          >
-            {glitchText}
-          </h1>
-          {/* scan line effect */}
-          <div className="absolute inset-0 pointer-events-none">
-            <div className={cn("h-full w-full bg-linear-to-b from-transparent to-transparent animate-pulse", themeViaColor)} />
-          </div>
-        </div>
-
-        {/* error message */}
-        <div className="space-y-4">
-          <h2 className="text-2xl md:text-3xl font-semibold text-foreground">
-            Page Not Found
-          </h2>
-          <p className="text-lg text-muted-foreground max-w-md mx-auto leading-relaxed">
-            The page you&#39;re looking for doesn&#39;t exist
-          </p>
-        </div>
-
-        {/* decorative elements */}
-        <div className="flex justify-center items-center gap-8 pt-8 opacity-60">
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            {siteIcon}
-            <span>Woops!</span>
-          </div>
-          <div className={cn("w-2 h-2 rounded-full animate-ping", themeBgColor)} />
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <NotFoundIcon />
-            <span>Error Code: 404</span>
-          </div>
-        </div>
-      </div>
-
-      {/* background decoration */}
-      <div className="fixed inset-0 pointer-events-none overflow-hidden -z-10">
-        {/* grid background */}
-        <div
-          className="absolute inset-0 opacity-[0.02] dark:opacity-[0.05]"
-          style={{
-            backgroundImage: `
-                linear-gradient(rgba(172, 98, 253, 0.1) 1px, transparent 1px),
-                linear-gradient(90deg, rgba(172, 98, 253, 0.1) 1px, transparent 1px)
-              `,
-            backgroundSize: "50px 50px",
-          }}
-        />
-
-        {/* floating particles */}
-        {Array.from({ length: 6 }).map((_, i) => (
-          <div
-            key={i}
-            className={cn("absolute w-2 h-2 rounded-full animate-bounce", themeBgColor)}
-            style={{
-              left: `${20 + i * 15}%`,
-              top: `${30 + (i % 3) * 20}%`,
-              animationDelay: `${i * 0.5}s`,
-              animationDuration: `${2 + i * 0.3}s`,
-            }}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}