fumadocs-ui 16.12.0 → 16.13.0

package/dist/layouts/home/slots/header.d.ts

@@ -1,7 +1,7 @@
 import { ComponentProps } from "react";
 //#region src/layouts/home/slots/header.d.ts
 declare const navItemVariants: (props?: ({
-  variant?: "main" | "icon" | "button" | null | undefined;
+  variant?: "icon" | "main" | "button" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Header(props: ComponentProps<'header'>): string | number | bigint | true | import("react").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined>;
 //#endregion

package/dist/provider/base.d.ts

@@ -18,6 +18,14 @@ interface ThemeOptions extends ThemeProviderProps {
    * @defaultValue true
    */
   enabled?: boolean;
+  /**
+   * Hotkey for toggling between light/dark mode, pass `false` to disable it.
+   *
+   * It is ignored while typing in an editable element (e.g. `<input />`), or when a dialog is opened.
+   *
+   * @defaultValue `d`
+   */
+  hotKey?: string | ((e: KeyboardEvent) => boolean) | false;
 }
 interface RootProviderProps {
   /**

package/dist/provider/base.js

@@ -1,24 +1,65 @@
 "use client";
 import { I18nProvider } from "../contexts/i18n.js";
 import { SearchProvider } from "../contexts/search.js";
-import { jsx } from "react/jsx-runtime";
-import { ThemeProvider, useTheme } from "next-themes";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useEffectEvent } from "react";
+import { ThemeProvider, useTheme, useTheme as useTheme$1 } from "next-themes";
+import { flushSync } from "react-dom";
 import { DirectionProvider } from "@radix-ui/react-direction";
 //#region src/provider/base.tsx
+/**
+* Whether the event should be ignored because the user is interacting with an editable element,
+* or an opened dialog (e.g. the search dialog).
+*/
+function isTypingTarget(target) {
+	if (!(target instanceof HTMLElement)) return false;
+	if (target.isContentEditable) return true;
+	if ([
+		"INPUT",
+		"TEXTAREA",
+		"SELECT"
+	].includes(target.tagName)) return true;
+	return target.closest("[role=\"dialog\"]") !== null;
+}
+/**
+* Toggle between light/dark mode with a hotkey, must be placed under `next-themes` provider.
+*/
+function ThemeHotKey({ hotKey }) {
+	const { setTheme, resolvedTheme } = useTheme$1();
+	const onKeyDown = useEffectEvent((e) => {
+		if (e.defaultPrevented || e.isComposing) return;
+		if (isTypingTarget(e.target)) return;
+		if (!(typeof hotKey === "string" ? !e.metaKey && !e.ctrlKey && !e.altKey && e.key.toLowerCase() === hotKey.toLowerCase() : hotKey(e))) return;
+		e.preventDefault();
+		const next = resolvedTheme === "dark" ? "light" : "dark";
+		if (document?.startViewTransition) document.startViewTransition(() => flushSync(() => setTheme(next)));
+		else setTheme(next);
+	});
+	useEffect(() => {
+		window.addEventListener("keydown", onKeyDown);
+		return () => {
+			window.removeEventListener("keydown", onKeyDown);
+		};
+	}, []);
+	return null;
+}
 function RootProvider({ children, dir = "ltr", theme = {}, search, i18n }) {
 	let body = children;
 	if (search?.enabled !== false) body = /* @__PURE__ */ jsx(SearchProvider, {
 		...search,
 		children: body
 	});
-	if (theme?.enabled !== false) body = /* @__PURE__ */ jsx(ThemeProvider, {
-		attribute: "class",
-		defaultTheme: "system",
-		enableSystem: true,
-		disableTransitionOnChange: true,
-		...theme,
-		children: body
-	});
+	if (theme?.enabled !== false) {
+		const { enabled: _, hotKey = "d", ...themeProps } = theme;
+		body = /* @__PURE__ */ jsxs(ThemeProvider, {
+			attribute: "class",
+			defaultTheme: "system",
+			enableSystem: true,
+			disableTransitionOnChange: true,
+			...themeProps,
+			children: [hotKey !== false && /* @__PURE__ */ jsx(ThemeHotKey, { hotKey }), body]
+		});
+	}
 	if (i18n) body = /* @__PURE__ */ jsx(I18nProvider, {
 		...i18n,
 		children: body

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "16.12.0",
+  "version": "16.13.0",
   "description": "The Radix UI version of Fumadocs UI",
   "keywords": [
     "Docs",
@@ -172,8 +172,8 @@
     "tsdown": "0.22.13",
     "unified": "^11.0.5",
     "@fumadocs/cli": "1.4.1",
-    "fumadocs-core": "16.12.0",
-    "tsconfig": "0.0.0"
+    "tsconfig": "0.0.0",
+    "fumadocs-core": "16.13.0"
   },
   "peerDependencies": {
     "@types/mdx": "*",
@@ -182,7 +182,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "takumi-js": "*",
-    "fumadocs-core": "16.12.0"
+    "fumadocs-core": "16.13.0"
   },
   "peerDependenciesMeta": {
     "next": {