@windrun-huaiin/base-ui 3.2.1 → 3.2.3

package/dist/components/index.d.mts

@@ -130,6 +130,34 @@ declare function getIconElement(icon: string | undefined): React__default.ReactE
 declare const DefaultSiteIcon: () => react_jsx_runtime.JSX.Element;
 declare const NotFoundIcon: () => 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;
@@ -141,4 +169,6 @@ declare global {
     }
 }
 
-export { DefaultSiteIcon, GoogleAnalyticsScript, NotFoundIcon, NotFoundPage, getGlobalIcon, getIconElement, globalLucideIcons, useGoogleAnalytics };
+declare function MicrosoftClarityScript(): react_jsx_runtime.JSX.Element | null;
+
+export { DefaultSiteIcon, GoogleAnalyticsScript, LanguageDetector, LanguageSwitcher, MicrosoftClarityScript, NotFoundIcon, NotFoundPage, getGlobalIcon, getIconElement, globalLucideIcons, useGoogleAnalytics };

package/dist/components/index.d.ts

@@ -130,6 +130,34 @@ declare function getIconElement(icon: string | undefined): React__default.ReactE
 declare const DefaultSiteIcon: () => react_jsx_runtime.JSX.Element;
 declare const NotFoundIcon: () => 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;
@@ -141,4 +169,6 @@ declare global {
     }
 }
 
-export { DefaultSiteIcon, GoogleAnalyticsScript, NotFoundIcon, NotFoundPage, getGlobalIcon, getIconElement, globalLucideIcons, useGoogleAnalytics };
+declare function MicrosoftClarityScript(): react_jsx_runtime.JSX.Element | null;
+
+export { DefaultSiteIcon, GoogleAnalyticsScript, LanguageDetector, LanguageSwitcher, MicrosoftClarityScript, NotFoundIcon, NotFoundPage, getGlobalIcon, getIconElement, globalLucideIcons, useGoogleAnalytics };

package/dist/components/index.js

@@ -62,6 +62,9 @@ var components_exports = {};
 __export(components_exports, {
   DefaultSiteIcon: () => DefaultSiteIcon,
   GoogleAnalyticsScript: () => GoogleAnalyticsScript,
+  LanguageDetector: () => LanguageDetector,
+  LanguageSwitcher: () => LanguageSwitcher,
+  MicrosoftClarityScript: () => MicrosoftClarityScript,
   NotFoundIcon: () => NotFoundIcon,
   NotFoundPage: () => NotFoundPage,
   getGlobalIcon: () => getGlobalIcon,
@@ -1444,6 +1447,106 @@ var import_next_intl = require("next-intl");
 var import_navigation = require("next/navigation");
 var import_react33 = require("react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
+function LanguageDetector({ i18nConfig }) {
+  const [show, setShow] = (0, import_react33.useState)(false);
+  const [detectedLocale, setDetectedLocale] = (0, import_react33.useState)(null);
+  const currentLocale = (0, import_next_intl.useLocale)();
+  const router = (0, import_navigation.useRouter)();
+  const t = (0, import_next_intl.useTranslations)("languageDetection");
+  const LANGUAGE_PREFERENCE_KEY = `${i18nConfig.detector.storagePrefix}-${i18nConfig.detector.storageKey}`;
+  (0, import_react33.useEffect)(() => {
+    const browserLang = navigator.language.split("-")[0];
+    const savedPreference = localStorage.getItem(LANGUAGE_PREFERENCE_KEY);
+    const preference = savedPreference ? JSON.parse(savedPreference) : null;
+    const shouldShowDetector = () => {
+      if (!preference) return true;
+      if (preference.locale === currentLocale) return false;
+      if (preference.status === "rejected" && preference.locale === browserLang) return false;
+      if (preference.status === "accepted" && preference.locale === currentLocale) return false;
+      const expirationMs = i18nConfig.detector.expirationDays * 24 * 60 * 60 * 1e3;
+      if (Date.now() - preference.timestamp < expirationMs) return false;
+      return true;
+    };
+    if (i18nConfig.locales.includes(browserLang) && browserLang !== currentLocale && shouldShowDetector()) {
+      setDetectedLocale(browserLang);
+      setShow(true);
+      const timer = setTimeout(() => {
+        console.log("[LanguageDetector] Auto closing after timeout");
+        setShow(false);
+        savePreference(browserLang, "rejected");
+      }, i18nConfig.detector.autoCloseTimeout);
+      return () => clearTimeout(timer);
+    }
+  }, [currentLocale]);
+  const savePreference = (locale, status) => {
+    const preference = {
+      locale,
+      status,
+      timestamp: Date.now()
+    };
+    localStorage.setItem(LANGUAGE_PREFERENCE_KEY, JSON.stringify(preference));
+  };
+  const handleLanguageChange = () => {
+    if (detectedLocale) {
+      savePreference(detectedLocale, "accepted");
+      const pathname = window.location.pathname;
+      const newPathname = pathname.replace(`/${currentLocale}`, `/${detectedLocale}`);
+      router.push(newPathname);
+      setShow(false);
+    }
+  };
+  const handleClose = () => {
+    if (detectedLocale) {
+      savePreference(detectedLocale, "rejected");
+    }
+    setShow(false);
+  };
+  if (!detectedLocale || !show) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "fixed top-16 right-4 z-40 w-[420px]", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("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`, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "relative px-6 py-4 overflow-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "relative z-10 flex flex-col gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-start justify-between gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h3", { className: "text-lg font-semibold text-gray-900", children: t("title") }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("p", { className: "text-base text-gray-600", children: [
+            t("description"),
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-purple-500 font-semibold", children: detectedLocale === "zh" ? "\u4E2D\u6587" : "English" }),
+            "?"
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          "button",
+          {
+            onClick: handleClose,
+            className: "text-gray-500 hover:text-gray-700",
+            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(globalLucideIcons.X, { className: "h-5 w-5" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          "button",
+          {
+            onClick: handleClose,
+            className: "flex-1 px-4 py-2 text-base bg-gray-100 text-gray-600 rounded-md hover:bg-gray-200",
+            children: t("close")
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          "button",
+          {
+            onClick: handleLanguageChange,
+            className: "flex-1 px-4 py-2 text-base bg-purple-500 text-white rounded-md hover:bg-purple-600",
+            children: t("changeAction")
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "absolute inset-0 bg-linear-to-r from-transparent via-purple-200/30 to-transparent animate-shimmer" })
+  ] }) }) });
+}
 
 // src/components/language-switcher.tsx
 var import_navigation2 = require("next/navigation");
@@ -1453,6 +1556,8 @@ var import_next_intl2 = require("next-intl");
 var React30 = __toESM(require("react"));
 var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"));
 var import_jsx_runtime35 = require("react/jsx-runtime");
+var DropdownMenu = DropdownMenuPrimitive.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 var DropdownMenuSubTrigger = React30.forwardRef((_a, ref) => {
   var _b = _a, { className, inset, children } = _b, props = __objRest(_b, ["className", "inset", "children"]);
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
@@ -1627,6 +1732,49 @@ LanguageButton.displayName = "Button";
 
 // src/components/language-switcher.tsx
 var import_jsx_runtime37 = require("react/jsx-runtime");
+function LanguageSwitcher({ locales, localeLabels }) {
+  const locale = (0, import_next_intl2.useLocale)();
+  const router = (0, import_navigation2.useRouter)();
+  const pathname = (0, import_navigation2.usePathname)();
+  const handleLocaleChange = (newLocale) => {
+    const newPathname = pathname.replace(`/${locale}`, `/${newLocale}`);
+    router.push(newPathname);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(DropdownMenu, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      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",
+        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(globalLucideIcons.Globe, { className: "h-5 w-5" })
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      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]",
+        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "grid grid-cols-2 gap-1", children: locales.map((loc) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          DropdownMenuItem,
+          {
+            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),
+            children: localeLabels[loc]
+          },
+          loc
+        )) })
+      }
+    )
+  ] });
+}
 
 // src/components/script/google-analytics-script.tsx
 var import_script = __toESM(require("next/script"));
@@ -1677,10 +1825,25 @@ function useGoogleAnalytics() {
 var import_script2 = __toESM(require("next/script"));
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var microsoftClarityId = process.env.NEXT_PUBLIC_MICROSOFT_CLARITY_ID;
+function MicrosoftClarityScript() {
+  if (process.env.NODE_ENV !== "production") {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_script2.default, { id: "microsoft-clarity", strategy: "afterInteractive", children: `
+        (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}");
+      ` });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DefaultSiteIcon,
   GoogleAnalyticsScript,
+  LanguageDetector,
+  LanguageSwitcher,
+  MicrosoftClarityScript,
   NotFoundIcon,
   NotFoundPage,
   getGlobalIcon,