@windrun-huaiin/base-ui 3.2.2 → 3.2.4

package/dist/index.mjs

@@ -5507,11 +5507,154 @@ import { useLocale, useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
 import { useEffect as useEffect7, useState as useState7 } from "react";
 import { jsx as jsx81, jsxs as jsxs29 } from "react/jsx-runtime";
+function LanguageDetector({ i18nConfig }) {
+  const [show, setShow] = useState7(false);
+  const [detectedLocale, setDetectedLocale] = useState7(null);
+  const currentLocale = useLocale();
+  const router = useRouter();
+  const t = useTranslations("languageDetection");
+  const LANGUAGE_PREFERENCE_KEY = `${i18nConfig.detector.storagePrefix}-${i18nConfig.detector.storageKey}`;
+  useEffect7(() => {
+    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__ */ jsx81("div", { className: "fixed top-16 right-4 z-40 w-[420px]", children: /* @__PURE__ */ jsx81("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__ */ jsxs29("div", { className: "relative px-6 py-4 overflow-hidden", children: [
+    /* @__PURE__ */ jsxs29("div", { className: "relative z-10 flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsxs29("div", { className: "flex items-start justify-between gap-4", children: [
+        /* @__PURE__ */ jsxs29("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsx81("h3", { className: "text-lg font-semibold text-gray-900", children: t("title") }),
+          /* @__PURE__ */ jsxs29("p", { className: "text-base text-gray-600", children: [
+            t("description"),
+            " ",
+            /* @__PURE__ */ jsx81("span", { className: "text-purple-500 font-semibold", children: detectedLocale === "zh" ? "\u4E2D\u6587" : "English" }),
+            "?"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx81(
+          "button",
+          {
+            onClick: handleClose,
+            className: "text-gray-500 hover:text-gray-700",
+            children: /* @__PURE__ */ jsx81(globalLucideIcons.X, { className: "h-5 w-5" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx81(
+          "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__ */ jsx81(
+          "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__ */ jsx81("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";
 import { useLocale as useLocale2 } from "next-intl";
 import { jsx as jsx82, jsxs as jsxs30 } 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__ */ jsxs30(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx82(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx82(
+      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__ */ jsx82(globalLucideIcons.Globe, { className: "h-5 w-5" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx82(
+      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__ */ jsx82("div", { className: "grid grid-cols-2 gap-1", children: locales.map((loc) => /* @__PURE__ */ jsx82(
+          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";
@@ -5707,6 +5850,8 @@ export {
   InputOTPSlot,
   Label3 as Label,
   LanguageButton,
+  LanguageDetector,
+  LanguageSwitcher,
   Menubar,
   MenubarCheckboxItem,
   MenubarContent,