@fumadocs/base-ui 16.7.14 → 16.7.15

package/css/generated/shared.css

@@ -24,6 +24,8 @@
 @source inline("--easing");
 @source inline("--fd-animated-height");
 @source inline("--fd-banner-height");
+@source inline("--offset-distance");
+@source inline("--opacity");
 @source inline("--padding-right");
 @source inline("--popup-height");
 @source inline("--popup-width");
@@ -32,6 +34,8 @@
 @source inline("--shiki-light-bg");
 @source inline("--spacing");
 @source inline("--t");
+@source inline("--track-bottom");
+@source inline("--track-top");
 @source inline("--transform-origin");
 @source inline("-circle");
 @source inline("-mb-px");
@@ -65,6 +69,7 @@
 @source inline("[&_svg]:size-5");
 @source inline("[&_svg]:size-full");
 @source inline("[&_svg]:text-fd-muted-foreground");
+@source inline("[offset-distance:var(--offset-distance,0)]");
 @source inline("[scrollbar-width:none]");
 @source inline("a");
 @source inline("about");
@@ -160,7 +165,9 @@
 @source inline("bottom-1.5");
 @source inline("bound");
 @source inline("boundary");
+@source inline("box");
 @source inline("box-border");
+@source inline("boxRef");
 @source inline("breaking");
 @source inline("button");
 @source inline("buttonVariants");
@@ -715,7 +722,6 @@
 @source inline("of");
 @source inline("official");
 @source inline("offset");
-@source inline("offsetDistance");
 @source inline("offsetPath");
 @source inline("offsetTop");
 @source inline("on");
@@ -739,8 +745,10 @@
 @source inline("onSelectCallback");
 @source inline("onTagChange");
 @source inline("onTagChangeCallback");
+@source inline("onUpdate");
 @source inline("onValueChange");
 @source inline("only");
+@source inline("opacity-(--opacity,0)");
 @source inline("opacity-0");
 @source inline("open");
 @source inline("opening");
@@ -853,6 +861,7 @@
 @source inline("rainbowColors");
 @source inline("raw");
 @source inline("rawTree");
+@source inline("re-exported");
 @source inline("react");
 @source inline("react-dom");
 @source inline("react-hooks/exhaustive-deps");
@@ -909,7 +918,6 @@
 @source inline("rtl:rotate-180");
 @source inline("rtl:rotate-90");
 @source inline("s");
-@source inline("scale");
 @source inline("scope");
 @source inline("scroll");
 @source inline("scroll-into-view-if-needed");
@@ -1012,6 +1020,7 @@
 @source inline("supposed");
 @source inline("sure");
 @source inline("svg");
+@source inline("svgRef");
 @source inline("switch");
 @source inline("system");
 @source inline("t");
@@ -1067,6 +1076,7 @@
 @source inline("title");
 @source inline("to");
 @source inline("toc");
+@source inline("tocInfo");
 @source inline("tocNoHeadings");
 @source inline("toolbar");
 @source inline("top");
@@ -1083,7 +1093,7 @@
 @source inline("transition-[clip-path]");
 @source inline("transition-[height,opacity]");
 @source inline("transition-[height]");
-@source inline("transition-[offset-distance]");
+@source inline("transition-[opacity,offset-distance]");
 @source inline("transition-[opacity,transform,translate]");
 @source inline("transition-[opacity,transform,width,height,scale,translate]");
 @source inline("transition-all");

package/dist/components/toc/clerk.js

@@ -105,13 +105,9 @@ function TOCItems({ ref, className, thumbBox = true, ...props }) {
 			observer.unobserve(container);
 		};
 	}, [onPrint]);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [svg && /* @__PURE__ */ jsxs("div", {
-		className: "absolute top-0 inset-s-0",
-		style: {
-			width: svg.width,
-			height: svg.height
-		},
-		children: [/* @__PURE__ */ jsx(ThumbTrack, { computed: svg }), thumbBox && /* @__PURE__ */ jsx(ThumbBox, { computed: svg })]
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [svg && /* @__PURE__ */ jsx(ThumbTrack, {
+		computed: svg,
+		thumbBox
 	}), /* @__PURE__ */ jsx("div", {
 		ref: mergeRefs(containerRef, ref),
 		className: cn("flex flex-col", className),
@@ -125,48 +121,61 @@ function TOCEmpty() {
 		children: text.tocNoHeadings
 	});
 }
-function ThumbTrack({ computed }) {
-	const items = Primitive.useItems();
-	const startIdx = items.findIndex((item) => item.active);
-	if (startIdx === -1) return;
-	const endIdx = items.findLastIndex((item) => item.active);
-	const top = `${computed.positions[startIdx][0]}px`;
-	const bottom = `${computed.positions[endIdx][1]}px`;
-	return /* @__PURE__ */ jsx("svg", {
-		xmlns: "http://www.w3.org/2000/svg",
-		viewBox: `0 0 ${computed.width} ${computed.height}`,
-		className: "absolute transition-[clip-path]",
+function ThumbTrack({ computed, thumbBox }) {
+	const svgRef = useRef(null);
+	const boxRef = useRef(null);
+	const previousRef = useRef(null);
+	const tocInfo = Primitive.useTOC();
+	const onUpdate = useCallback((items) => {
+		const svg = svgRef.current;
+		if (!svg) return;
+		const startIdx = items.findIndex((item) => item.active);
+		if (startIdx === -1) return;
+		const endIdx = items.findLastIndex((item) => item.active);
+		svg.style.setProperty("--track-top", `${computed.positions[startIdx][0]}px`);
+		svg.style.setProperty("--track-bottom", `${computed.positions[endIdx][1]}px`);
+		const box = boxRef.current;
+		if (box) {
+			let isUp = false;
+			if (previousRef.current) {
+				const prev = previousRef.current;
+				isUp = prev.startIdx > startIdx || prev.endIdx > endIdx || prev.startIdx === startIdx && prev.endIdx === endIdx && prev.isUp;
+			}
+			previousRef.current = {
+				startIdx,
+				endIdx,
+				isUp
+			};
+			box.style.setProperty("--offset-distance", isUp ? `${computed.itemLineLengths[startIdx][0]}px` : `${computed.itemLineLengths[endIdx][1]}px`);
+			box.style.setProperty("--opacity", items[isUp ? startIdx : endIdx].original._step !== void 0 ? "0" : "1");
+		}
+	}, [computed]);
+	Primitive.useTOCListener(onUpdate);
+	useEffect(() => {
+		onUpdate(tocInfo.get());
+	}, [onUpdate, tocInfo]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "absolute top-0 inset-s-0",
 		style: {
 			width: computed.width,
-			height: computed.height,
-			clipPath: `polygon(0 ${top}, 100% ${top}, 100% ${bottom}, 0 ${bottom})`
+			height: computed.height
 		},
-		children: computed.content
-	});
-}
-function ThumbBox({ computed }) {
-	const items = Primitive.useItems();
-	const previousRef = useRef(null);
-	const startIdx = items.findIndex((item) => item.active);
-	if (startIdx === -1) return;
-	const endIdx = items.findLastIndex((item) => item.active);
-	let isUp = false;
-	if (previousRef.current) {
-		const prev = previousRef.current;
-		isUp = prev.startIdx > startIdx || prev.endIdx > endIdx || prev.startIdx === startIdx && prev.endIdx === endIdx && prev.isUp;
-	}
-	previousRef.current = {
-		startIdx,
-		endIdx,
-		isUp
-	};
-	return /* @__PURE__ */ jsx("div", {
-		className: "absolute size-1 bg-fd-primary rounded-full transition-[offset-distance]",
-		style: {
-			offsetPath: `path("${computed.d}")`,
-			offsetDistance: isUp ? computed.itemLineLengths[startIdx][0] : computed.itemLineLengths[endIdx][1],
-			scale: items[isUp ? startIdx : endIdx].original._step !== void 0 ? "0" : "1"
-		}
+		children: [/* @__PURE__ */ jsx("svg", {
+			ref: svgRef,
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: `0 0 ${computed.width} ${computed.height}`,
+			className: "absolute transition-[clip-path]",
+			style: {
+				width: computed.width,
+				height: computed.height,
+				clipPath: `polygon(0 var(--track-top,0), 100% var(--track-top,0), 100% var(--track-bottom,0), 0 var(--track-bottom,0))`
+			},
+			children: computed.content
+		}), thumbBox && /* @__PURE__ */ jsx("div", {
+			ref: boxRef,
+			className: "absolute size-1 bg-fd-primary rounded-full [offset-distance:var(--offset-distance,0)] opacity-(--opacity,0) transition-[opacity,offset-distance]",
+			style: { offsetPath: `path("${computed.d}")` }
+		})]
 	});
 }
 const a = 8;

package/dist/components/toc/default.js

@@ -53,15 +53,25 @@ function TOCItems({ ref, className, ...props }) {
 	});
 }
 function TocThumb({ computed }) {
-	const items = Primitive.useItems();
-	const startIdx = items.findIndex((item) => item.active);
-	if (startIdx === -1) return;
-	const endIdx = items.findLastIndex((item) => item.active);
-	const top = `${computed.positions[startIdx][0]}px`;
-	const bottom = `${computed.positions[endIdx][1]}px`;
+	const ref = useRef(null);
+	const tocInfo = Primitive.useTOC();
+	const onUpdate = useCallback((items) => {
+		const element = ref.current;
+		if (!element) return;
+		const startIdx = items.findIndex((item) => item.active);
+		if (startIdx === -1) return;
+		const endIdx = items.findLastIndex((item) => item.active);
+		element.style.setProperty("--track-top", `${computed.positions[startIdx][0]}px`);
+		element.style.setProperty("--track-bottom", `${computed.positions[endIdx][1]}px`);
+	}, [computed]);
+	Primitive.useTOCListener(onUpdate);
+	useEffect(() => {
+		onUpdate(tocInfo.get());
+	}, [onUpdate, tocInfo]);
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		className: "absolute inset-y-0 inset-s-0 bg-fd-primary w-px transition-[clip-path]",
-		style: { clipPath: `polygon(0 ${top}, 100% ${top}, 100% ${bottom}, 0 ${bottom})` }
+		style: { clipPath: `polygon(0 var(--track-top,0), 100% var(--track-top,0), 100% var(--track-bottom,0), 0 var(--track-bottom,0))` }
 	});
 }
 function TOCEmpty() {

package/dist/provider/base.d.ts

@@ -1,9 +1,9 @@
 import { SearchProviderProps } from "../contexts/search.js";
 import { DefaultSearchDialogProps } from "../components/dialog/search-default.js";
 import { I18nProviderProps } from "../contexts/i18n.js";
-import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-import { ThemeProvider } from "next-themes";
+import { ThemeProviderProps, UseThemeProps, useTheme } from "next-themes";
 
 //#region src/provider/base.d.ts
 interface SearchOptions extends Omit<SearchProviderProps, 'children'> {
@@ -15,6 +15,14 @@ interface SearchOptions extends Omit<SearchProviderProps, 'children'> {
    */
   enabled?: boolean;
 }
+interface ThemeOptions extends ThemeProviderProps {
+  /**
+   * Enable `next-themes`
+   *
+   * @defaultValue true
+   */
+  enabled?: boolean;
+}
 interface RootProviderProps {
   /**
    * `dir` option for Base UI
@@ -25,16 +33,9 @@ interface RootProviderProps {
    */
   search?: Partial<SearchOptions>;
   /**
-   * Customise options of `next-themes`
+   * Customise options for `next-themes`
    */
-  theme?: Partial<ComponentPropsWithoutRef<typeof ThemeProvider>> & {
-    /**
-     * Enable `next-themes`
-     *
-     * @defaultValue true
-     */
-    enabled?: boolean;
-  };
+  theme?: ThemeOptions;
   i18n?: Omit<I18nProviderProps, 'children'>;
   children?: ReactNode;
 }
@@ -46,4 +47,4 @@ declare function RootProvider({
   i18n
 }: RootProviderProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { RootProvider, RootProviderProps };
+export { RootProvider, RootProviderProps, type UseThemeProps, useTheme };

package/dist/provider/base.js

@@ -3,7 +3,7 @@ import { I18nProvider } from "../contexts/i18n.js";
 import { SearchProvider } from "../contexts/search.js";
 import { lazy } from "react";
 import { jsx } from "react/jsx-runtime";
-import { ThemeProvider } from "next-themes";
+import { ThemeProvider, useTheme } from "next-themes";
 import { DirectionProvider } from "@base-ui/react/direction-provider";
 //#region src/provider/base.tsx
 const DefaultSearchDialog = lazy(() => import("../components/dialog/search-default.js"));
@@ -32,4 +32,4 @@ function RootProvider({ children, dir = "ltr", theme = {}, search, i18n }) {
 	});
 }
 //#endregion
-export { RootProvider };
+export { RootProvider, useTheme };

package/dist/style.css

@@ -1814,6 +1814,9 @@
   .underline {
     text-decoration-line: underline;
   }
+  .opacity-\(--opacity\,0\) {
+    opacity: var(--opacity,0);
+  }
   .opacity-0 {
     opacity: 0%;
   }
@@ -1885,8 +1888,8 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-\[offset-distance\] {
-    transition-property: offset-distance;
+  .transition-\[opacity\,offset-distance\] {
+    transition-property: opacity,offset-distance;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
@@ -2004,6 +2007,9 @@
   .\[grid-area\:toc\] {
     grid-area: toc;
   }
+  .\[offset-distance\:var\(--offset-distance\,0\)\] {
+    offset-distance: var(--offset-distance,0);
+  }
   .\[scrollbar-width\:none\] {
     scrollbar-width: none;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fumadocs/base-ui",
-  "version": "16.7.14",
+  "version": "16.7.15",
   "description": "The Base UI version of Fumadocs UI",
   "keywords": [
     "Docs",
@@ -124,6 +124,7 @@
     "react-remove-scroll": "^2.7.2",
     "rehype-raw": "^7.0.0",
     "scroll-into-view-if-needed": "^3.1.0",
+    "shiki": "^4.0.2",
     "tailwind-merge": "^3.5.0",
     "unist-util-visit": "^5.1.0",
     "@fumadocs/tailwind": "0.0.5"
@@ -138,12 +139,11 @@
     "@types/react-dom": "^19.2.3",
     "fuma-cli": "^0.0.5",
     "react-medium-image-zoom": "^5.4.3",
-    "shiki": "^4.0.2",
     "tailwindcss": "^4.2.2",
     "tsdown": "0.21.7",
     "unified": "^11.0.5",
     "@fumadocs/cli": "1.3.7",
-    "fumadocs-core": "16.7.14",
+    "fumadocs-core": "16.7.15",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {
@@ -153,13 +153,9 @@
     "next": "16.x.x",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "shiki": "*",
-    "fumadocs-core": "16.7.14"
+    "fumadocs-core": "16.7.15"
   },
   "peerDependenciesMeta": {
-    "shiki": {
-      "optional": true
-    },
     "next": {
       "optional": true
     },