@clarify-labs/renderer 0.11.2 → 0.11.4

package/output/{PageActions-BLzCasvB.js → PageActions-BBRz0tJ4.js}

@@ -1,4 +1,4 @@
-import { t as useBuiltInText } from "./i18n-DjRcGSuU.js";
+import { t as useBuiltInText } from "./i18n-LXAq0RIC.js";
 import clsx from "clsx";
 import { Suspense, createContext, forwardRef, lazy, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Link, useLocation } from "react-router-dom";
@@ -503,35 +503,52 @@ function useTheme() {
 }
 //#endregion
 //#region source/theme/ThemeToggle.tsx
+var themeOptions = [
+	{
+		value: "light",
+		label: "theme.light",
+		icon: Sun
+	},
+	{
+		value: "dark",
+		label: "theme.dark",
+		icon: Moon
+	},
+	{
+		value: "system",
+		label: "theme.system",
+		icon: Monitor
+	}
+];
 function ThemeToggle() {
 	const { theme, setTheme } = useTheme();
 	const t = useBuiltInText();
-	const nextTheme = getNextTheme(theme);
-	const label = getThemeLabel(nextTheme, t);
-	return /* @__PURE__ */ jsxs("button", {
-		type: "button",
-		className: "clarify-theme-toggle clarify-ui-control relative flex size-9 items-center justify-center rounded-(--clarify-theme-tokens-radius-md) transition",
-		"aria-label": label,
-		title: label,
-		onClick: () => setTheme(nextTheme),
-		children: [
-			/* @__PURE__ */ jsx("span", { className: "absolute size-11 pointer-fine:hidden" }),
-			theme === "system" ? /* @__PURE__ */ jsx(Monitor, { className: "h-5 w-5 stroke-(--clarify-theme-tokens-colors-foreground)" }) : null,
-			theme === "light" ? /* @__PURE__ */ jsx(Sun, { className: "h-5 w-5 stroke-(--clarify-theme-tokens-colors-foreground)" }) : null,
-			theme === "dark" ? /* @__PURE__ */ jsx(Moon, { className: "h-5 w-5 stroke-white" }) : null
-		]
+	const SelectedIcon = (themeOptions.find((option) => option.value === theme) ?? themeOptions[2]).icon;
+	return /* @__PURE__ */ jsxs(Menu, {
+		as: "div",
+		className: "clarify-theme-toggle relative",
+		children: [/* @__PURE__ */ jsxs(MenuButton, {
+			className: "clarify-theme-toggle-button clarify-ui-control relative flex size-9 items-center justify-center rounded-(--clarify-theme-tokens-radius-md) transition",
+			"aria-label": t("theme.switch"),
+			children: [/* @__PURE__ */ jsx("span", { className: "absolute size-11 pointer-fine:hidden" }), /* @__PURE__ */ jsx(SelectedIcon, { className: "h-5 w-5 stroke-current" })]
+		}), /* @__PURE__ */ jsx(MenuItems, {
+			transition: true,
+			modal: false,
+			className: "clarify-theme-toggle-menu clarify-ui-menu absolute right-0 z-50 mt-2 w-(--clarify-ui-menu-width) rounded-(--clarify-theme-tokens-radius-xl) bg-(--clarify-theme-tokens-colors-surface) p-1 shadow-lg ring-1 shadow-zinc-900/5 ring-(--clarify-theme-tokens-colors-border) transition data-closed:scale-95 data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in dark:bg-zinc-900 dark:ring-white/10",
+			children: themeOptions.map((option) => {
+				const Icon = option.icon;
+				const selected = option.value === theme;
+				return /* @__PURE__ */ jsx(MenuItem, { children: ({ focus }) => /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => setTheme(option.value),
+					className: clsx("clarify-theme-toggle-item clarify-ui-menu-item flex w-full items-center gap-2 rounded-(--clarify-theme-tokens-radius-lg) px-3 py-2 text-left transition", focus && "clarify-ui-menu-item-focus", selected && "clarify-ui-menu-item-active"),
+					"aria-pressed": selected,
+					children: [/* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 stroke-current" }), /* @__PURE__ */ jsx("span", { children: t(option.label) })]
+				}) }, option.value);
+			})
+		})]
 	});
 }
-function getNextTheme(theme) {
-	if (theme === "system") return "light";
-	if (theme === "light") return "dark";
-	return "system";
-}
-function getThemeLabel(theme, t) {
-	if (theme === "dark") return t("theme.switchToDark");
-	if (theme === "light") return t("theme.switchToLight");
-	return t("theme.switchToSystem");
-}
 //#endregion
 //#region source/utils/localized-text.ts
 /**
@@ -1154,7 +1171,7 @@ function useSearchProps() {
 }
 //#endregion
 //#region source/shell/Search.tsx
-var SearchDialog = lazy(() => import("./SearchDialog-DWYp1c6c.js"));
+var SearchDialog = lazy(() => import("./SearchDialog-Df6jknma.js"));
 function getModifierKey() {
 	if (typeof navigator === "undefined") return "Ctrl ";
 	return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? "⌘" : "Ctrl ";
@@ -1645,7 +1662,7 @@ function PageActionsProvider(props) {
 		children
 	});
 }
-function PageTitleActions() {
+function PageActions() {
 	const { route, routePrefix } = useContext(PageActionsContext);
 	return /* @__PURE__ */ jsx(ContentActions, {
 		route,
@@ -1653,6 +1670,6 @@ function PageTitleActions() {
 	});
 }
 //#endregion
-export { isExternalHref as C, copyTextToClipboard as E, themeCookieName as S, prefixHref as T, getStoredThemePreference as _, SectionProvider as a, storeLocalePreference as b, lucideIconRegistry as c, normalizeRoutePath as d, resolveLocalizedText as f, getStoredLocalePreference as g, useTheme as h, Navigation as i, resolveLucideIconName as l, ThemeProvider as m, PageTitleActions as n, useSectionStore as o, ThemeToggle as p, Header as r, remToPx as s, PageActionsProvider as t, isSameRoutePath as u, localeCookieName as v, localizeHref as w, storeThemePreference as x, readLocaleCookie as y };
+export { isExternalHref as C, copyTextToClipboard as E, themeCookieName as S, prefixHref as T, getStoredThemePreference as _, SectionProvider as a, storeLocalePreference as b, lucideIconRegistry as c, normalizeRoutePath as d, resolveLocalizedText as f, getStoredLocalePreference as g, useTheme as h, Navigation as i, resolveLucideIconName as l, ThemeProvider as m, PageActionsProvider as n, useSectionStore as o, ThemeToggle as p, Header as r, remToPx as s, PageActions as t, isSameRoutePath as u, localeCookieName as v, localizeHref as w, storeThemePreference as x, readLocaleCookie as y };
 
-//# sourceMappingURL=PageActions-BLzCasvB.js.map
+//# sourceMappingURL=PageActions-BBRz0tJ4.js.map