@windrun-huaiin/base-ui 3.2.1 → 3.2.3

package/dist/components/index.mjs

@@ -1487,6 +1487,106 @@ import { useLocale, useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
 import { useEffect as useEffect3, useState as useState3 } from "react";
 import { jsx as jsx34, jsxs as jsxs8 } from "react/jsx-runtime";
+function LanguageDetector({ i18nConfig }) {
+  const [show, setShow] = useState3(false);
+  const [detectedLocale, setDetectedLocale] = useState3(null);
+  const currentLocale = useLocale();
+  const router = useRouter();
+  const t = useTranslations("languageDetection");
+  const LANGUAGE_PREFERENCE_KEY = `${i18nConfig.detector.storagePrefix}-${i18nConfig.detector.storageKey}`;
+  useEffect3(() => {
+    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__ */ jsx34("div", { className: "fixed top-16 right-4 z-40 w-[420px]", children: /* @__PURE__ */ jsx34("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__ */ jsxs8("div", { className: "relative px-6 py-4 overflow-hidden", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "relative z-10 flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "flex items-start justify-between gap-4", children: [
+        /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsx34("h3", { className: "text-lg font-semibold text-gray-900", children: t("title") }),
+          /* @__PURE__ */ jsxs8("p", { className: "text-base text-gray-600", children: [
+            t("description"),
+            " ",
+            /* @__PURE__ */ jsx34("span", { className: "text-purple-500 font-semibold", children: detectedLocale === "zh" ? "\u4E2D\u6587" : "English" }),
+            "?"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx34(
+          "button",
+          {
+            onClick: handleClose,
+            className: "text-gray-500 hover:text-gray-700",
+            children: /* @__PURE__ */ jsx34(globalLucideIcons.X, { className: "h-5 w-5" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx34(
+          "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__ */ jsx34(
+          "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__ */ jsx34("div", { className: "absolute inset-0 bg-linear-to-r from-transparent via-purple-200/30 to-transparent animate-shimmer" })
+  ] }) }) });
+}
 
 // src/components/language-switcher.tsx
 import { usePathname, useRouter as useRouter2 } from "next/navigation";
@@ -1496,6 +1596,8 @@ import { useLocale as useLocale2 } from "next-intl";
 import * as React30 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { jsx as jsx35, jsxs as jsxs9 } from "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__ */ jsxs9(
@@ -1670,6 +1772,49 @@ LanguageButton.displayName = "Button";
 
 // src/components/language-switcher.tsx
 import { jsx as jsx37, jsxs as jsxs10 } from "react/jsx-runtime";
+function LanguageSwitcher({ locales, localeLabels }) {
+  const locale = useLocale2();
+  const router = useRouter2();
+  const pathname = usePathname();
+  const handleLocaleChange = (newLocale) => {
+    const newPathname = pathname.replace(`/${locale}`, `/${newLocale}`);
+    router.push(newPathname);
+  };
+  return /* @__PURE__ */ jsxs10(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx37(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx37(
+      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__ */ jsx37(globalLucideIcons.Globe, { className: "h-5 w-5" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx37(
+      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__ */ jsx37("div", { className: "grid grid-cols-2 gap-1", children: locales.map((loc) => /* @__PURE__ */ jsx37(
+          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
 import Script from "next/script";
@@ -1720,9 +1865,24 @@ function useGoogleAnalytics() {
 import Script2 from "next/script";
 import { jsx as jsx39 } from "react/jsx-runtime";
 var microsoftClarityId = process.env.NEXT_PUBLIC_MICROSOFT_CLARITY_ID;
+function MicrosoftClarityScript() {
+  if (process.env.NODE_ENV !== "production") {
+    return null;
+  }
+  return /* @__PURE__ */ jsx39(Script2, { 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}");
+      ` });
+}
 export {
   DefaultSiteIcon,
   GoogleAnalyticsScript,
+  LanguageDetector,
+  LanguageSwitcher,
+  MicrosoftClarityScript,
   NotFoundIcon,
   NotFoundPage,
   getGlobalIcon,