@windrun-huaiin/base-ui 4.1.1 → 5.1.0

package/package.json

@@ -1,30 +1,23 @@
 {
   "name": "@windrun-huaiin/base-ui",
-  "version": "4.1.1",
+  "version": "5.1.0",
   "description": "Base UI components for windrun-huaiin projects",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
+  "type": "module",
   "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
-    },
-    "./ui/*": {
-      "types": "./dist/ui/*.d.ts",
-      "import": "./dist/ui/*.mjs",
-      "require": "./dist/ui/*.js"
+    "./ui": {
+      "types": "./dist/ui/index.d.ts",
+      "import": "./dist/ui/index.mjs",
+      "require": "./dist/ui/index.js"
     },
     "./components": {
       "types": "./dist/components/index.d.ts",
       "import": "./dist/components/index.mjs",
       "require": "./dist/components/index.js"
     },
-    "./components/client": {
-      "types": "./dist/components/client/index.d.ts",
-      "import": "./dist/components/client/index.mjs",
-      "require": "./dist/components/client/index.js"
+    "./components/server": {
+      "types": "./dist/components/server.d.ts",
+      "import": "./dist/components/server.mjs",
+      "require": "./dist/components/server.js"
     },
     "./src/*": "./src/*",
     "./styles/base-ui.css": "./dist/base-ui.css"
@@ -43,15 +36,15 @@
     "@radix-ui/react-slot": "^1.2.2",
     "class-variance-authority": "^0.7.1",
     "lucide-react": "^0.511.0",
-    "@windrun-huaiin/lib": "^4.0.0"
+    "@windrun-huaiin/lib": "^5.1.0"
   },
   "peerDependencies": {
-    "react": "19.2.0-canary-3fbfb9ba-20250409",
-    "react-dom": "19.2.0-canary-3fbfb9ba-20250409",
+    "clsx": "^2.0.0",
     "next": "15.3.2",
     "next-intl": "^3.26.5",
     "next-themes": "^0.4.6",
-    "clsx": "^2.0.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
     "tailwind-merge": "^3.0.0",
     "tailwindcss": "^4.1.7"
   },

package/src/components/404-page.tsx

@@ -1,10 +1,13 @@
 'use client';
 
 import { NotFoundIcon } from "@base-ui/components/global-icon";
-import { SiteIcon } from "@base-ui/components/site-icon";
-import { useEffect, useState } from "react";
+import { useEffect, useState, type ReactNode } from "react";
 
-export function NotFoundPage() {
+interface NotFoundPageProps {
+  siteIcon: ReactNode;
+}
+
+export function NotFoundPage({ siteIcon }: NotFoundPageProps) {
   const [glitchText, setGlitchText] = useState("404");
 
   // glitch effect
@@ -62,7 +65,7 @@ export function NotFoundPage() {
         {/* 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 />
+            {siteIcon}
             <span>Woops!</span>
           </div>
           <div className="w-1 h-1 bg-purple-500 rounded-full animate-ping" />

package/src/components/index.ts

@@ -1,17 +1,10 @@
-// Server Components and Universal Components
-// ⚠️ IMPORTANT: To avoid client/server component mixing issues in Next.js bundling,
-// client components with 'use client' directive are exported separately.
-//
-// Usage:
-// - Server components: import from '@base-ui/components' (this file)
-// - Client components: import from '@base-ui/components/client'
-//
-// Example:
-// import { globalLucideIcons, getGlobalIcon } from '@base-ui/components'
-// import { NotFoundPage, GoToTop } from '@base-ui/components/client'
+"use client"
+export * from './404-page';
+export * from './go-to-top';
+export * from './language-detector';
+export * from './language-switcher';
 
-// Main server/universal components
-export * from './global-icon';
+// Script Components (All Client-side)
+export * from './script/google-analytics-script';
+export * from './script/microsoft-clarity-script'; 
 
-// For client components, please use:
-// import { ... } from '@base-ui/components/client' 

package/src/components/server.ts

@@ -0,0 +1,4 @@
+// Main server/universal components
+export * from './global-icon';
+// Icon Configuration  
+export { createSiteIcon } from './site-icon';

package/src/components/site-icon.tsx

@@ -1,46 +1,38 @@
-'use client';
-
 import { type LucideProps } from 'lucide-react';
 import { cn } from '@lib/utils';
-import { useIconConfigSafe } from '@base-ui/components/icon-context';
 import { globalLucideIcons } from '@base-ui/components/global-icon';
 import { themeIconColor } from '@base-ui/lib/theme-util';
 
 /**
- * site icon component - client component
- * based on React Context to get the config, solve the problem of cross-package module instance isolation
+ * Create a SiteIcon component with specific configuration
+ * This function helps avoid React multi-instance issues by creating the icon component
+ * at the application level with explicit configuration
  */
-export function SiteIcon({ 
-  size = 24, 
-  className,
-  ...props 
-}: Omit<LucideProps, 'children'>) {
-  const configuredIcon = useIconConfigSafe('siteIcon');
-  
-  if (configuredIcon === undefined) {
-    throw new Error(
-      '[SiteIcon] Site icon is not configured. Please use <IconConfigProvider config={{ siteIcon: YourCustomIcon }}> or <IconConfigProvider config={{ siteIcon: "IconKeyName" }}> to set a custom site icon to avoid legal risks.'
-    );
-  }
-
-  // render the icon, pass in the config value and attributes
-  if (typeof configuredIcon === 'string') {
-    // string type: the key name of globalLucideIcons
-    if (configuredIcon === '') {
-      // empty string use default icon
-      const DefaultIcon = globalLucideIcons['Download' as keyof typeof globalLucideIcons];
-      return <DefaultIcon size={size} className={cn(themeIconColor, className)} {...props} />;
-    }
-    const IconComponent = globalLucideIcons[configuredIcon as keyof typeof globalLucideIcons];
-    if (!IconComponent) {
-      throw new Error(`[SiteIcon] Icon key "${configuredIcon}" not found in globalLucideIcons.`);
+export function createSiteIcon(iconConfig: string | React.ComponentType<LucideProps>) {
+  return function CreatedSiteIcon({ 
+    size = 24, 
+    className,
+    ...props 
+  }: Omit<LucideProps, 'children'>) {
+    // render the icon, pass in the config value and attributes
+    if (typeof iconConfig === 'string') {
+      // string type: the key name of globalLucideIcons
+      if (iconConfig === '') {
+        // empty string use default icon
+        const DefaultIcon = globalLucideIcons['Download' as keyof typeof globalLucideIcons];
+        return <DefaultIcon size={size} className={cn(themeIconColor, className)} {...props} />;
+      }
+      const IconComponent = globalLucideIcons[iconConfig as keyof typeof globalLucideIcons];
+      if (!IconComponent) {
+        throw new Error(`[CreatedSiteIcon] Icon key "${iconConfig}" not found in globalLucideIcons.`);
+      }
+      return <IconComponent size={size} className={cn(themeIconColor, className)} {...props} />;
+    } else {
+      // React component type: custom icon component
+      const CustomIcon = iconConfig as React.ComponentType<LucideProps>;
+      const hasColorClass = className && /text-\w+/.test(className);
+      const finalClassName = hasColorClass ? className : cn(themeIconColor, className);
+      return <CustomIcon size={size} className={finalClassName} {...props} />;
     }
-    return <IconComponent size={size} className={cn(themeIconColor, className)} {...props} />;
-  } else {
-    // React component type: custom icon component
-    const CustomIcon = configuredIcon as React.ComponentType<LucideProps>;
-    const hasColorClass = className && /text-\w+/.test(className);
-    const finalClassName = hasColorClass ? className : cn(themeIconColor, className);
-    return <CustomIcon size={size} className={finalClassName} {...props} />;
-  }
+  };
 } 

package/src/ui/index.ts

@@ -1,4 +1,4 @@
-// UI Components - Only actively used components
+"use client";
 export * from './alert-dialog';
 export { Button, buttonVariants, type ButtonProps } from './button';
 export * from './dropdown-menu';

package/dist/components/client/index.d.ts

@@ -1,67 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ComponentType, ReactNode } from 'react';
-import { LucideProps } from 'lucide-react';
-
-declare function NotFoundPage(): react_jsx_runtime.JSX.Element;
-
-type I18nConfig = {
-    locales: readonly string[];
-    detector: {
-        storagePrefix: string;
-        storageKey: string;
-        autoCloseTimeout: number;
-        expirationDays: number;
-    };
-};
-interface LanguageDetectorProps {
-    i18nConfig: I18nConfig;
-}
-declare function LanguageDetector({ i18nConfig }: LanguageDetectorProps): react_jsx_runtime.JSX.Element | null;
-
-/**
- * @license
- * MIT License
- * Copyright (c) 2025 D8ger
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-interface LanguageSwitcherProps {
-    locales: readonly string[];
-    localeLabels: Record<string, string>;
-}
-declare function LanguageSwitcher({ locales, localeLabels }: LanguageSwitcherProps): react_jsx_runtime.JSX.Element;
-
-declare function GoogleAnalyticsScript(): react_jsx_runtime.JSX.Element | null;
-declare function useGoogleAnalytics(): {
-    trackEvent: (event: string, data?: Record<string, unknown>) => void;
-};
-declare global {
-    interface Window {
-        dataLayer: any[];
-        gtag: (...args: any[]) => void;
-    }
-}
-
-declare function MicrosoftClarityScript(): react_jsx_runtime.JSX.Element | null;
-
-interface IconConfig {
-    siteIcon?: ComponentType | string;
-}
-interface IconConfigProviderProps {
-    config: IconConfig;
-    children: ReactNode;
-}
-/**
- * IconConfigProvider - icon config provider based on React Context
- * directly store the config value, without depending on module state
- */
-declare function IconConfigProvider({ config, children }: IconConfigProviderProps): react_jsx_runtime.JSX.Element;
-
-/**
- * site icon component - client component
- * based on React Context to get the config, solve the problem of cross-package module instance isolation
- */
-declare function SiteIcon({ size, className, ...props }: Omit<LucideProps, 'children'>): react_jsx_runtime.JSX.Element;
-
-export { GoogleAnalyticsScript, type IconConfig, IconConfigProvider, LanguageDetector, LanguageSwitcher, MicrosoftClarityScript, NotFoundPage, SiteIcon, useGoogleAnalytics };