@clarify-labs/renderer 0.11.2 → 0.11.4

package/output/{PageActions-Bw9SAHLl.cjs → PageActions-ypH6U0Vc.cjs}

@@ -1,5 +1,5 @@
 const require_rolldown_runtime = require("./rolldown-runtime-DakpK96I.cjs");
-const require_i18n = require("./i18n-L1XX-y6M.cjs");
+const require_i18n = require("./i18n-Ds-f-qlT.cjs");
 let clsx = require("clsx");
 clsx = require_rolldown_runtime.__toESM(clsx, 1);
 let react = require("react");
@@ -505,35 +505,52 @@ function useTheme() {
 }
 //#endregion
 //#region source/theme/ThemeToggle.tsx
+var themeOptions = [
+	{
+		value: "light",
+		label: "theme.light",
+		icon: lucide_react.Sun
+	},
+	{
+		value: "dark",
+		label: "theme.dark",
+		icon: lucide_react.Moon
+	},
+	{
+		value: "system",
+		label: "theme.system",
+		icon: lucide_react.Monitor
+	}
+];
 function ThemeToggle() {
 	const { theme, setTheme } = useTheme();
 	const t = require_i18n.useBuiltInText();
-	const nextTheme = getNextTheme(theme);
-	const label = getThemeLabel(nextTheme, t);
-	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute size-11 pointer-fine:hidden" }),
-			theme === "system" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Monitor, { className: "h-5 w-5 stroke-(--clarify-theme-tokens-colors-foreground)" }) : null,
-			theme === "light" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Sun, { className: "h-5 w-5 stroke-(--clarify-theme-tokens-colors-foreground)" }) : null,
-			theme === "dark" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Moon, { className: "h-5 w-5 stroke-white" }) : null
-		]
+	const SelectedIcon = (themeOptions.find((option) => option.value === theme) ?? themeOptions[2]).icon;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.Menu, {
+		as: "div",
+		className: "clarify-theme-toggle relative",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.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__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute size-11 pointer-fine:hidden" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectedIcon, { className: "h-5 w-5 stroke-current" })]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.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__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItem, { children: ({ focus }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					onClick: () => setTheme(option.value),
+					className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "h-4 w-4 stroke-current" }), /* @__PURE__ */ (0, react_jsx_runtime.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
 /**
@@ -1156,7 +1173,7 @@ function useSearchProps() {
 }
 //#endregion
 //#region source/shell/Search.tsx
-var SearchDialog = (0, react.lazy)(() => Promise.resolve().then(() => require("./SearchDialog-j_4Y9WY_.cjs")));
+var SearchDialog = (0, react.lazy)(() => Promise.resolve().then(() => require("./SearchDialog-DCGBhNnW.cjs")));
 function getModifierKey() {
 	if (typeof navigator === "undefined") return "Ctrl ";
 	return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? "⌘" : "Ctrl ";
@@ -1647,7 +1664,7 @@ function PageActionsProvider(props) {
 		children
 	});
 }
-function PageTitleActions() {
+function PageActions() {
 	const { route, routePrefix } = (0, react.useContext)(PageActionsContext);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContentActions, {
 		route,
@@ -1667,16 +1684,16 @@ Object.defineProperty(exports, "Navigation", {
 		return Navigation;
 	}
 });
-Object.defineProperty(exports, "PageActionsProvider", {
+Object.defineProperty(exports, "PageActions", {
 	enumerable: true,
 	get: function() {
-		return PageActionsProvider;
+		return PageActions;
 	}
 });
-Object.defineProperty(exports, "PageTitleActions", {
+Object.defineProperty(exports, "PageActionsProvider", {
 	enumerable: true,
 	get: function() {
-		return PageTitleActions;
+		return PageActionsProvider;
 	}
 });
 Object.defineProperty(exports, "SectionProvider", {
@@ -1812,4 +1829,4 @@ Object.defineProperty(exports, "useTheme", {
 	}
 });
 
-//# sourceMappingURL=PageActions-Bw9SAHLl.cjs.map
+//# sourceMappingURL=PageActions-ypH6U0Vc.cjs.map