@windrun-huaiin/base-ui 3.1.0

package/src/components/go-to-top.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { globalLucideIcons as icons } from '@base-ui/components/global-icon';
+export default function GoToTop() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  // 监听滚动事件
+  useEffect(() => {
+    const toggleVisibility = () => {
+      if (window.scrollY > 300) {
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    };
+
+    window.addEventListener('scroll', toggleVisibility);
+    return () => window.removeEventListener('scroll', toggleVisibility);
+  }, []);
+
+  // 回到顶部
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    });
+  };
+
+  return (
+    <>
+      {isVisible && (
+        <button
+          onClick={scrollToTop}
+          className="fixed bottom-6 right-6 p-3 bg-neutral-800 text-neutral-100 hover:bg-neutral-700 dark:bg-neutral-300 dark:text-neutral-900 dark:hover:bg-neutral-400 rounded-full shadow-lg transition-all z-50"
+          aria-label="Go to top"
+        >
+          <icons.ArrowUp size={20} />
+        </button>
+      )}
+    </>
+  );
+} 

package/src/components/index.ts

@@ -0,0 +1,10 @@
+// Base Components
+export * from './404-page';
+export * from './global-icon';
+export * from './go-to-top';
+export * from './language-detector';
+export * from './language-switcher';
+
+// Script Components
+export * from './script/google-analytics-script';
+export * from './script/microsoft-clarity-script'; 

package/src/components/language-detector.tsx

@@ -0,0 +1,175 @@
+/**
+ * @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.
+ */
+'use client'
+
+import { globalLucideIcons as icons } from "@base-ui/components/global-icon"
+import { useLocale, useTranslations } from 'next-intl'
+import { useRouter } from 'next/navigation'
+import { useEffect, useState } from 'react'
+
+type I18nConfig = {
+  locales: readonly string[];
+  detector: {
+    storagePrefix: string;
+    storageKey: string;
+    autoCloseTimeout: number;
+    expirationDays: number;
+  };
+};
+
+interface LanguageDetectorProps {
+  i18nConfig: I18nConfig;
+}
+
+type Locale = string;
+
+interface LanguagePreference {
+  locale: string;
+  status: 'accepted' | 'rejected';
+  timestamp: number;
+}
+
+export default function LanguageDetector({ i18nConfig }: LanguageDetectorProps) {
+  const [show, setShow] = useState(false)
+  const [detectedLocale, setDetectedLocale] = useState<Locale | null>(null)
+  const currentLocale = useLocale()
+  const router = useRouter()
+  const t = useTranslations('languageDetection')
+
+  // Get the storage key from the configuration
+  const LANGUAGE_PREFERENCE_KEY = `${i18nConfig.detector.storagePrefix}-${i18nConfig.detector.storageKey}`
+
+  useEffect(() => {
+    // Get the browser language
+    const browserLang = navigator.language.split('-')[0] as Locale
+
+    // Get the language preference from localStorage
+    const savedPreference = localStorage.getItem(LANGUAGE_PREFERENCE_KEY)
+    const preference: LanguagePreference | null = savedPreference
+      ? JSON.parse(savedPreference)
+      : null
+
+    // Check if the language detection box should be displayed
+    const shouldShowDetector = () => {
+      if (!preference) return true;
+
+      // If the stored language is the same as the current language, do not display the detection box
+      if (preference.locale === currentLocale) return false;
+
+      // If the user has previously rejected switching to this language, do not display the detection box
+      if (preference.status === 'rejected' && preference.locale === browserLang) return false;
+
+      // If the user has previously accepted switching to this language, do not display the detection box
+      if (preference.status === 'accepted' && preference.locale === currentLocale) return false;
+
+      // Use the expiration time from the configuration
+      const expirationMs = i18nConfig.detector.expirationDays * 24 * 60 * 60 * 1000;
+      if (Date.now() - preference.timestamp < expirationMs) return false;
+
+      return true;
+    }
+
+    // Check if the browser language is in the supported language list and needs to display the detection box
+    if ((i18nConfig.locales as string[]).includes(browserLang) &&
+      browserLang !== currentLocale &&
+      shouldShowDetector()) {
+      setDetectedLocale(browserLang)
+      setShow(true)
+
+      // Use the automatic closing time from the configuration
+      const timer = setTimeout(() => {
+        console.log('[LanguageDetector] Auto closing after timeout')
+        setShow(false)
+        // Save the rejected state when the automatic closing occurs
+        savePreference(browserLang, 'rejected')
+      }, i18nConfig.detector.autoCloseTimeout)
+
+      return () => clearTimeout(timer)
+    }
+  }, [currentLocale])
+
+  // Save the language preference to localStorage
+  const savePreference = (locale: string, status: 'accepted' | 'rejected') => {
+    const preference: LanguagePreference = {
+      locale,
+      status,
+      timestamp: Date.now()
+    }
+    localStorage.setItem(LANGUAGE_PREFERENCE_KEY, JSON.stringify(preference))
+  }
+
+  const handleLanguageChange = () => {
+    if (detectedLocale) {
+      // Save the accepted state
+      savePreference(detectedLocale, 'accepted')
+
+      // Get the current path
+      const pathname = window.location.pathname
+      // Replace the language part
+      const newPathname = pathname.replace(`/${currentLocale}`, `/${detectedLocale}`)
+      // Redirect to the new path
+      router.push(newPathname)
+      setShow(false)
+    }
+  }
+
+  const handleClose = () => {
+    if (detectedLocale) {
+      // Save the rejected state
+      savePreference(detectedLocale, 'rejected')
+    }
+    setShow(false)
+  }
+
+  if (!detectedLocale || !show) return null
+
+  return (
+    <div className="fixed top-16 right-4 z-40 w-[420px]">
+      <div className={`shadow-lg rounded-lg transition-all duration-300 ${show ? 'translate-x-0 opacity-100' : 'translate-x-full opacity-0'} 
+        bg-linear-to-r from-purple-100/95 via-white/95 to-purple-100/95 backdrop-blur-xs
+        animate-gradient-x`}>
+        <div className="relative px-6 py-4 overflow-hidden">
+          <div className="relative z-10 flex flex-col gap-3">
+            <div className="flex items-start justify-between gap-4">
+              <div className="flex flex-col gap-1.5">
+                <h3 className="text-lg font-semibold text-gray-900">
+                  {t('title')}
+                </h3>
+                <p className="text-base text-gray-600">
+                  {t('description')} <span className="text-purple-500 font-semibold">{detectedLocale === 'zh' ? '中文' : 'English'}</span>?
+                </p>
+              </div>
+              <button
+                onClick={handleClose}
+                className="text-gray-500 hover:text-gray-700"
+              >
+                <icons.X className="h-5 w-5" />
+              </button>
+            </div>
+            <div className="flex items-center gap-3">
+              <button
+                onClick={handleClose}
+                className="flex-1 px-4 py-2 text-base bg-gray-100 text-gray-600 rounded-md hover:bg-gray-200"
+              >
+                {t('close')}
+              </button>
+              <button
+                onClick={handleLanguageChange}
+                className="flex-1 px-4 py-2 text-base bg-purple-500 text-white rounded-md hover:bg-purple-600"
+              >
+                {t('changeAction')}
+              </button>
+            </div>
+          </div>
+          <div className="absolute inset-0 bg-linear-to-r from-transparent via-purple-200/30 to-transparent animate-shimmer" />
+        </div>
+      </div>
+    </div>
+  )
+} 

package/src/components/language-switcher.tsx

@@ -0,0 +1,77 @@
+/**
+ * @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.
+ */
+
+'use client'
+
+import { usePathname, useRouter } from 'next/navigation'
+import { useLocale } from 'next-intl'
+import { globalLucideIcons as icons } from "@base-ui/components/global-icon"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@base-ui/ui/dropdown-menu'
+import { LanguageButton } from '@base-ui/ui/language-button'
+
+interface LanguageSwitcherProps {
+  locales: readonly string[];
+  localeLabels: Record<string, string>;
+}
+
+export default function LanguageSwitcher({ locales, localeLabels }: LanguageSwitcherProps) {
+  const locale = useLocale()
+  const router = useRouter()
+  const pathname = usePathname()
+
+  const handleLocaleChange = (newLocale: string) => {
+    const newPathname = pathname.replace(`/${locale}`, `/${newLocale}`)
+    router.push(newPathname)
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <LanguageButton
+          variant="ghost"
+          size="icon"
+          className="bg-linear-to-r from-purple-400 to-pink-600 hover:from-purple-500 hover:to-pink-700 text-white transform hover:scale-110 transition-all duration-300"
+        >
+          <icons.Globe className="h-5 w-5" />
+        </LanguageButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="end"
+        sideOffset={5}
+        className="bg-white/90 dark:bg-gray-800/90 border-purple-100 dark:border-purple-800 w-[200px] p-2 backdrop-blur-xs translate-x-[50px]"
+      >
+        <div className="grid grid-cols-2 gap-1">
+          {locales.map((loc) => (
+            <DropdownMenuItem
+              key={loc}
+              className={`
+                          px-2 py-2 text-sm cursor-pointer text-center justify-center
+                          transition-all duration-300 ease-in-out
+                          hover:scale-105 hover:shadow-md
+                          rounded-md whitespace-nowrap
+                          ${locale === loc
+                  ? 'bg-linear-to-r from-purple-400 to-pink-600 text-white font-medium shadow-lg scale-105'
+                  : 'hover:bg-linear-to-r hover:from-purple-400/10 hover:to-pink-600/10 hover:text-transparent hover:bg-clip-text'
+                }
+                            `}
+              onClick={() => handleLocaleChange(loc)}
+            >
+              {localeLabels[loc]}
+            </DropdownMenuItem>
+          ))}
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/src/components/script/google-analytics-script.tsx

@@ -0,0 +1,56 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+"use client";
+
+import Script from "next/script";
+
+const googleAnalyticsId = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID!;
+
+export function GoogleAnalyticsScript() {
+  // 只在生产环境中加载 Microsoft Clarity
+  if (process.env.NODE_ENV !== 'production') {
+    return null
+  }
+  
+  return (
+    <>
+      <Script
+        strategy="afterInteractive"
+        src={`https://www.googletagmanager.com/gtag/js?id=${googleAnalyticsId}`}
+      />
+      <Script
+        id="google-analytics"
+        strategy="afterInteractive"
+        dangerouslySetInnerHTML={{
+          __html: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${googleAnalyticsId}');
+          `,
+        }}
+      />
+    </>
+  );
+}
+
+export function useGoogleAnalytics() {
+  const trackEvent = (event: string, data?: Record<string, unknown>) => {
+    if (typeof window === "undefined" || !window.gtag) {
+      return;
+    }
+
+    window.gtag("event", event, data);
+  };
+
+  return {
+    trackEvent,
+  };
+}
+
+// 为 window 添加 gtag 类型定义
+declare global {
+  interface Window {
+    dataLayer: any[];
+    gtag: (...args: any[]) => void;
+  }
+}

package/src/components/script/microsoft-clarity-script.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import Script from 'next/script'
+
+const microsoftClarityId = process.env.NEXT_PUBLIC_MICROSOFT_CLARITY_ID!;
+
+export default function MicrosoftClarityScript() {
+  // 只在生产环境中加载 Microsoft Clarity
+  if (process.env.NODE_ENV !== 'production') {
+    return null
+  }
+
+  return (
+    <Script id="microsoft-clarity" strategy="afterInteractive">
+      {`
+        (function(c,l,a,r,i,t,y){
+          c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+          t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+          y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+        })(window, document, "clarity", "script", "${microsoftClarityId}");
+      `}
+    </Script>
+  )
+} 

package/src/index.ts

@@ -0,0 +1,4 @@
+// Re-export everything from sub-modules for convenience
+export * from './ui';
+export * from './components';
+export * from './lib'; 

package/src/lib/icon-context.tsx

@@ -0,0 +1,57 @@
+'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;
+  }
+} 

package/src/lib/index.ts

@@ -0,0 +1,3 @@
+// Icon Configuration  
+export { IconConfigProvider, type IconConfig } from './icon-context';
+export { SiteIcon } from './site-icon';

package/src/lib/site-icon.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { type LucideProps } from 'lucide-react';
+import { cn } from '@lib/utils';
+import { useIconConfigSafe } from '@base-ui/lib/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
+ */
+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.`);
+    }
+    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/lib/theme-util.ts

@@ -0,0 +1,7 @@
+
+// Attention: This icon color will be used in the entire project, and it depends on the ENV variable NEXT_PUBLIC_STYLE_ICON_COLOR
+export const themeIconColor = process.env.NEXT_PUBLIC_STYLE_ICON_COLOR || "text-purple-500";
+
+// Attention: This icon color will be used in the entire project, and it depends on the ENV variable NEXT_PUBLIC_STYLE_SVG_ICON_COLOR
+export const themeSvgIconColor = process.env.NEXT_PUBLIC_STYLE_SVG_ICON_COLOR || "#AC62FD";
+export const themeSvgIconSize = process.env.NEXT_PUBLIC_STYLE_SVG_ICON_SIZE || 18

package/src/styles/base-ui.css

@@ -0,0 +1,2 @@
+
+ 

package/src/ui/accordion.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { globalLucideIcons as icons } from "@base-ui/components/global-icon"
+
+import { cn } from "@lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <icons.ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }