@windrun-huaiin/base-ui 4.1.0 → 5.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/base-ui",
-  "version": "4.1.0",
+  "version": "5.0.0",
   "description": "Base UI components for windrun-huaiin projects",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -26,11 +26,6 @@
       "import": "./dist/components/client/index.mjs",
       "require": "./dist/components/client/index.js"
     },
-    "./lib/*": {
-      "types": "./dist/lib/*.d.ts",
-      "import": "./dist/lib/*.mjs",
-      "require": "./dist/lib/*.js"
-    },
     "./src/*": "./src/*",
     "./styles/base-ui.css": "./dist/base-ui.css"
   },
@@ -48,11 +43,11 @@
     "@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.0.0"
   },
   "peerDependencies": {
-    "react": "19.2.0-canary-3fbfb9ba-20250409",
-    "react-dom": "19.2.0-canary-3fbfb9ba-20250409",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
     "next": "15.3.2",
     "next-intl": "^3.26.5",
     "next-themes": "^0.4.6",

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/lib/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/client/index.ts

@@ -12,4 +12,5 @@ export * from '../language-switcher';
 
 // Script Components (All Client-side)
 export * from '../script/google-analytics-script';
-export * from '../script/microsoft-clarity-script'; 
+export * from '../script/microsoft-clarity-script'; 
+

package/src/components/index.ts

@@ -12,6 +12,8 @@
 
 // Main server/universal components
 export * from './global-icon';
+// Icon Configuration  
+export { createSiteIcon } from './site-icon';
 
 // For client components, please use:
 // import { ... } from '@base-ui/components/client' 

package/src/components/site-icon.tsx

@@ -0,0 +1,38 @@
+import { type LucideProps } from 'lucide-react';
+import { cn } from '@lib/utils';
+import { globalLucideIcons } from '@base-ui/components/global-icon';
+import { themeIconColor } from '@base-ui/lib/theme-util';
+
+/**
+ * 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 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} />;
+    }
+  };
+} 

package/src/index.ts

@@ -2,6 +2,4 @@
 // ⚠️ IMPORTANT: Client components are NOT exported here to avoid server component contamination
 // For client components, use: import { ... } from '@base-ui/components/client'
 
-export * from './ui';
-export * from './components'; // Only server/universal components
-export * from './lib'; 
+export * from './components'; // Only server/universal components

package/dist/lib/index.d.mts

@@ -1,24 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ComponentType, ReactNode } from 'react';
-import { LucideProps } from 'lucide-react';
-
-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 { type IconConfig, IconConfigProvider, SiteIcon };

package/dist/lib/index.d.ts

@@ -1,24 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ComponentType, ReactNode } from 'react';
-import { LucideProps } from 'lucide-react';
-
-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 { type IconConfig, IconConfigProvider, SiteIcon };