@windrun-huaiin/base-ui 4.1.1 → 5.0.0

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/components/icon-context.tsx

@@ -1,57 +0,0 @@
-'use client';
-
-import { createContext, useContext, type ComponentType, type ReactNode } from 'react';
-
-export interface IconConfig {
-  siteIcon?: ComponentType | string;
-}
-
-// icon config context, directly store the config value
-const IconConfigContext = createContext<IconConfig | null>(null);
-
-interface IconConfigProviderProps {
-  config: IconConfig;
-  children: ReactNode;
-}
-
-/**
- * IconConfigProvider - icon config provider based on React Context
- * directly store the config value, without depending on module state
- */
-export function IconConfigProvider({ config, children }: IconConfigProviderProps) {
-  return (
-    <IconConfigContext.Provider value={config}>
-      {children}
-    </IconConfigContext.Provider>
-  );
-}
-
-/**
- * internal hook: get icon config
- * not exposed, only used by base-ui internal components
- */
-function useIconConfig(): IconConfig {
-  const config = useContext(IconConfigContext);
-  
-  if (config === null) {
-    throw new Error(
-      '[SiteIcon] IconConfigProvider not found. Please wrap your app with <IconConfigProvider config={{ siteIcon: "YourIcon" }}>.'
-    );
-  }
-  
-  return config;
-}
-
-/**
- * internal hook: safe get specific icon config
- * not exposed, only used by base-ui internal components
- */
-export function useIconConfigSafe(iconKey: keyof IconConfig): ComponentType | string | undefined {
-  try {
-    const config = useIconConfig();
-    return config[iconKey];
-  } catch {
-    // if there is no provider, return undefined, let the caller handle it
-    return undefined;
-  }
-}