@underverse-ui/underverse 0.1.11 → 0.1.12

package/dist/index.cjs

@@ -71,6 +71,8 @@ __export(index_exports, {
   Input: () => Input_default,
   InteractiveBadge: () => InteractiveBadge,
   Label: () => Label,
+  LanguageSwitcher: () => LanguageSwitcherHeadless,
+  LanguageSwitcherHeadless: () => LanguageSwitcherHeadless,
   LoadingBar: () => LoadingBar,
   LoadingDots: () => LoadingDots,
   LoadingSpinner: () => LoadingSpinner,
@@ -111,6 +113,8 @@ __export(index_exports, {
   Tabs: () => Tabs,
   TagBadge: () => TagBadge,
   Textarea: () => Textarea_default,
+  ThemeToggle: () => ThemeToggleHeadless,
+  ThemeToggleHeadless: () => ThemeToggleHeadless,
   ToastProvider: () => Toast_default,
   Tooltip: () => Tooltip,
   VARIANT_STYLES_ALERT: () => VARIANT_STYLES_ALERT,
@@ -8605,6 +8609,199 @@ function AccessDenied({
   ] }) });
 }
 
+// ../../components/ui/ThemeToggleHeadless.tsx
+var import_lucide_react24 = require("lucide-react");
+var import_react24 = require("react");
+var import_react_dom9 = require("react-dom");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+function ThemeToggleHeadless({
+  theme,
+  onChange,
+  labels,
+  className
+}) {
+  const [isOpen, setIsOpen] = (0, import_react24.useState)(false);
+  const [mounted, setMounted] = (0, import_react24.useState)(false);
+  const triggerRef = (0, import_react24.useRef)(null);
+  const [dropdownPosition, setDropdownPosition] = (0, import_react24.useState)(null);
+  (0, import_react24.useEffect)(() => setMounted(true), []);
+  const themes = [
+    { value: "light", label: labels?.light ?? "Light", icon: import_lucide_react24.Sun },
+    { value: "dark", label: labels?.dark ?? "Dark", icon: import_lucide_react24.Moon },
+    { value: "system", label: labels?.system ?? "System", icon: import_lucide_react24.Monitor }
+  ];
+  const current = mounted ? themes.find((t) => t.value === theme) || themes[2] : themes[2];
+  const CurrentIcon = current.icon;
+  const calculatePosition = () => {
+    const rect = triggerRef.current?.getBoundingClientRect();
+    if (!rect) return null;
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+    const width = 192;
+    const left = rect.right + scrollLeft - width;
+    const top = rect.bottom + scrollTop + 8;
+    return { top, left, width };
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      Button_default,
+      {
+        variant: "ghost",
+        size: "icon",
+        ref: triggerRef,
+        onClick: () => {
+          const next = !isOpen;
+          if (next) {
+            const pos = calculatePosition();
+            if (pos) setDropdownPosition(pos);
+          }
+          setIsOpen(next);
+        },
+        className: "bg-muted hover:bg-accent",
+        "aria-haspopup": "menu",
+        "aria-expanded": isOpen,
+        "aria-label": labels?.heading ?? "Theme",
+        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(CurrentIcon, { className: "h-5 w-5" })
+      }
+    ),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+      typeof window !== "undefined" && (0, import_react_dom9.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "fixed inset-0 z-[9998]", onClick: () => setIsOpen(false) }), document.body),
+      typeof window !== "undefined" && dropdownPosition && (0, import_react_dom9.createPortal)(
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          "div",
+          {
+            className: "z-[9999] bg-card border border-border rounded-lg shadow-lg overflow-hidden",
+            style: { position: "absolute", top: dropdownPosition.top, left: dropdownPosition.left, width: dropdownPosition.width },
+            onMouseDown: (e) => e.stopPropagation(),
+            role: "menu",
+            children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "p-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "px-3 py-2 text-sm font-medium text-muted-foreground border-b border-border mb-2", children: labels?.heading ?? "Theme" }),
+              themes.map((opt) => {
+                const Icon = opt.icon;
+                const active = theme === opt.value;
+                return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                  Button_default,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: () => {
+                      onChange(opt.value);
+                      setIsOpen(false);
+                    },
+                    className: cn(
+                      "w-full justify-start gap-3 h-auto py-2 px-3",
+                      active && "bg-primary/10 text-primary"
+                    ),
+                    role: "menuitemradio",
+                    "aria-checked": active,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icon, { className: "h-4 w-4" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "flex-1 text-left", children: opt.label }),
+                      active && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "w-2 h-2 rounded-full bg-primary" })
+                    ]
+                  },
+                  opt.value
+                );
+              })
+            ] })
+          }
+        ),
+        document.body
+      )
+    ] })
+  ] });
+}
+
+// ../../components/ui/LanguageSwitcherHeadless.tsx
+var import_react25 = require("react");
+var import_react_dom10 = require("react-dom");
+var import_lucide_react25 = require("lucide-react");
+var import_jsx_runtime44 = require("react/jsx-runtime");
+function LanguageSwitcherHeadless({
+  locales,
+  currentLocale,
+  onSwitch,
+  labels,
+  className
+}) {
+  const [isOpen, setIsOpen] = (0, import_react25.useState)(false);
+  const [dropdownPosition, setDropdownPosition] = (0, import_react25.useState)(null);
+  const triggerButtonRef = (0, import_react25.useRef)(null);
+  const currentLanguage = locales.find((l) => l.code === currentLocale) || locales[0];
+  const calculatePosition = () => {
+    const rect = triggerButtonRef.current?.getBoundingClientRect();
+    if (!rect) return null;
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+    const width = 192;
+    const left = rect.right + scrollLeft - width;
+    const top = rect.bottom + scrollTop + 8;
+    return { top, left, width };
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      Button_default,
+      {
+        variant: "ghost",
+        size: "icon",
+        ref: triggerButtonRef,
+        onClick: () => {
+          const next = !isOpen;
+          if (next) {
+            const pos = calculatePosition();
+            if (pos) setDropdownPosition(pos);
+          }
+          setIsOpen(next);
+        },
+        className: "bg-muted hover:bg-accent",
+        "aria-haspopup": "menu",
+        "aria-expanded": isOpen,
+        "aria-label": labels?.heading ?? "Language",
+        title: labels?.heading ?? "Language",
+        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react25.Globe, { className: "h-5 w-5" })
+      }
+    ),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+      typeof window !== "undefined" && (0, import_react_dom10.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "fixed inset-0 z-[9998]", onClick: () => setIsOpen(false) }), document.body),
+      typeof window !== "undefined" && dropdownPosition && (0, import_react_dom10.createPortal)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          "div",
+          {
+            className: "z-[9999] bg-card border border-border rounded-lg shadow-lg overflow-hidden",
+            style: { position: "absolute", top: dropdownPosition.top, left: dropdownPosition.left, width: dropdownPosition.width },
+            onMouseDown: (e) => e.stopPropagation(),
+            role: "menu",
+            children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "p-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "px-3 py-2 text-sm font-medium text-muted-foreground border-b border-border mb-2", children: labels?.heading ?? "Language" }),
+              locales.map((language) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+                Button_default,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: () => {
+                    onSwitch(language.code);
+                    setIsOpen(false);
+                  },
+                  className: cn("w-full justify-start gap-3 h-auto py-2 px-3", currentLocale === language.code && "bg-primary/10 text-primary"),
+                  role: "menuitemradio",
+                  "aria-checked": currentLocale === language.code,
+                  children: [
+                    language.flag && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-lg", children: language.flag }),
+                    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "flex-1 text-left", children: language.name }),
+                    currentLocale === language.code && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "w-2 h-2 rounded-full bg-primary" })
+                  ]
+                },
+                language.code
+              ))
+            ] })
+          }
+        ),
+        document.body
+      )
+    ] })
+  ] });
+}
+
 // locales/en.json
 var en_default = {
   Common: {
@@ -8779,6 +8976,8 @@ function getUnderverseMessages(locale = "en") {
   Input,
   InteractiveBadge,
   Label,
+  LanguageSwitcher,
+  LanguageSwitcherHeadless,
   LoadingBar,
   LoadingDots,
   LoadingSpinner,
@@ -8819,6 +9018,8 @@ function getUnderverseMessages(locale = "en") {
   Tabs,
   TagBadge,
   Textarea,
+  ThemeToggle,
+  ThemeToggleHeadless,
   ToastProvider,
   Tooltip,
   VARIANT_STYLES_ALERT,