@fumadocs/base-ui 16.7.10 → 16.7.12

package/css/generated/docs.css

@@ -255,6 +255,7 @@
 @source inline("length");
 @source inline("link");
 @source inline("linkItems");
+@source inline("list");
 @source inline("lucide-react");
 @source inline("main");
 @source inline("max");

package/css/generated/notebook.css

@@ -273,6 +273,7 @@
 @source inline("lg:layout:[--fd-header-height:--spacing(24)]");
 @source inline("link");
 @source inline("linkItems");
+@source inline("list");
 @source inline("lucide-react");
 @source inline("main");
 @source inline("max");

package/css/generated/shared.css

@@ -212,6 +212,7 @@
 @source inline("component");
 @source inline("components");
 @source inline("composedRef");
+@source inline("computed");
 @source inline("config");
 @source inline("const");
 @source inline("container");
@@ -551,6 +552,7 @@
 @source inline("isWindows");
 @source inline("it");
 @source inline("item");
+@source inline("itemLineLengths");
 @source inline("itemVariants");
 @source inline("items");
 @source inline("items-center");
@@ -563,6 +565,7 @@
 @source inline("key");
 @source inline("keydown");
 @source inline("keyof");
+@source inline("l");
 @source inline("label");
 @source inline("lang");
 @source inline("language");
@@ -715,12 +718,15 @@
 @source inline("of");
 @source inline("official");
 @source inline("offset");
+@source inline("offsetDistance");
+@source inline("offsetPath");
 @source inline("offsetTop");
 @source inline("on");
 @source inline("onAnimationEnd");
 @source inline("onChange");
 @source inline("onChangeRef");
 @source inline("onClick");
+@source inline("onContainerResize");
 @source inline("onCopy");
 @source inline("onKey");
 @source inline("onKeyDown");
@@ -795,6 +801,7 @@
 @source inline("placeholder:text-fd-muted-foreground");
 @source inline("please");
 @source inline("pointerType");
+@source inline("positions");
 @source inline("possible");
 @source inline("powered");
 @source inline("pre");
@@ -1055,6 +1062,7 @@
 @source inline("themes");
 @source inline("this");
 @source inline("throw");
+@source inline("thumbBox");
 @source inline("thumbRef");
 @source inline("tier");
 @source inline("timeoutRef");
@@ -1073,18 +1081,19 @@
 @source inline("top-2.5");
 @source inline("top-4");
 @source inline("top-[calc(50%-var(--t,0px)+var(--b,0px))]");
+@source inline("topL");
 @source inline("touch");
 @source inline("transform");
 @source inline("transition-[clip-path]");
 @source inline("transition-[height,opacity]");
 @source inline("transition-[height]");
+@source inline("transition-[offset-distance]");
 @source inline("transition-[opacity,transform,translate]");
 @source inline("transition-[opacity,transform,width,height,scale,translate]");
 @source inline("transition-all");
 @source inline("transition-colors");
 @source inline("transition-opacity");
 @source inline("transition-transform");
-@source inline("translate");
 @source inline("translations");
 @source inline("transparent");
 @source inline("tree");
@@ -1110,7 +1119,6 @@
 @source inline("updated");
 @source inline("updates");
 @source inline("upper");
-@source inline("upperBottom");
 @source inline("upperOffset");
 @source inline("upperX");
 @source inline("url");
@@ -1176,6 +1184,7 @@
 @source inline("when");
 @source inline("where");
 @source inline("whether");
+@source inline("while");
 @source inline("white");
 @source inline("whitespace-nowrap");
 @source inline("whitespaces");
@@ -1191,6 +1200,7 @@
 @source inline("wrapped");
 @source inline("x");
 @source inline("xmlns");
+@source inline("y");
 @source inline("you");
 @source inline("your");
 @source inline("z-2");

package/dist/components/toc/clerk.d.ts

@@ -3,11 +3,15 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as Primitive from "fumadocs-core/toc";
 
 //#region src/components/toc/clerk.d.ts
+interface TOCItemsProps extends ComponentProps<'div'> {
+  thumbBox?: boolean;
+}
 declare function TOCItems({
   ref,
   className,
+  thumbBox,
   ...props
-}: ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
+}: TOCItemsProps): _$react_jsx_runtime0.JSX.Element;
 declare function TOCEmpty(): _$react_jsx_runtime0.JSX.Element;
 declare function TOCItem({
   item,
@@ -16,4 +20,4 @@ declare function TOCItem({
   item: Primitive.TOCItemType;
 }): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { TOCEmpty, TOCItem, TOCItems };
+export { TOCEmpty, TOCItem, TOCItems, TOCItemsProps };

package/dist/components/toc/clerk.js

@@ -4,7 +4,7 @@ import { useI18n } from "../../contexts/i18n.js";
 import { cn } from "../../utils/cn.js";
 import { mergeRefs } from "../../utils/merge-refs.js";
 import { TocThumb, useTOCItems } from "./index.js";
-import { useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import * as Primitive from "fumadocs-core/toc";
 //#region src/components/toc/clerk.tsx
@@ -13,29 +13,41 @@ var clerk_exports = /* @__PURE__ */ __exportAll({
 	TOCItem: () => TOCItem,
 	TOCItems: () => TOCItems
 });
-function TOCItems({ ref, className, ...props }) {
+function TOCItems({ ref, className, thumbBox = true, ...props }) {
 	const containerRef = useRef(null);
 	const items = useTOCItems();
-	const [svg, setSvg] = useState();
-	const onResize = useEffectEvent(() => {
+	const [svg, setSvg] = useState(null);
+	const onPrint = useCallback(() => {
 		const container = containerRef.current;
 		if (!container || container.clientHeight === 0) return;
+		if (items.length === 0) {
+			setSvg(null);
+			return;
+		}
 		let w = 0;
 		let h = 0;
-		let upperBottom = 0;
-		let upperX = 0;
 		let d = "";
+		const positions = [];
 		const output = [];
 		for (let i = 0; i < items.length; i++) {
 			const item = items[i];
 			const element = container.querySelector(`a[href="#${item.url.slice(1)}"]`);
 			if (!element) continue;
 			const styles = getComputedStyle(element);
-			const x = getLineOffset(item.depth) + .5, top = element.offsetTop + parseFloat(styles.paddingTop), bottom = element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom);
+			const x = getLineOffset(item.depth) + .5;
+			const top = element.offsetTop + parseFloat(styles.paddingTop);
+			const bottom = element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom);
 			w = Math.max(x + 8, w);
 			h = Math.max(h, bottom);
 			if (i === 0) d += ` M${x} ${top} L${x} ${bottom}`;
-			else d += ` C ${upperX} ${top - 4} ${x} ${upperBottom + 4} ${x} ${top} L${x} ${bottom}`;
+			else {
+				const [, upperBottom, upperX] = i > 0 ? positions[i - 1] : [
+					0,
+					0,
+					0
+				];
+				d += ` C ${upperX} ${top - 4} ${x} ${upperBottom + 4} ${x} ${top} L${x} ${bottom}`;
+			}
 			if (item._step !== void 0) output.push(/* @__PURE__ */ jsx("circle", {
 				cx: x,
 				cy: (top + bottom) / 2,
@@ -50,8 +62,11 @@ function TOCItems({ ref, className, ...props }) {
 				className: "fill-fd-primary-foreground font-medium text-xs leading-none font-mono",
 				children: item._step
 			}, `${i}-text`));
-			upperX = x;
-			upperBottom = bottom;
+			positions.push([
+				top,
+				bottom,
+				x
+			]);
 		}
 		output.unshift(/* @__PURE__ */ jsx("path", {
 			d,
@@ -59,23 +74,32 @@ function TOCItems({ ref, className, ...props }) {
 			strokeWidth: "1",
 			fill: "none"
 		}, "path"));
+		const itemLineLengths = [];
+		if (thumbBox) {
+			const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+			path.setAttribute("d", d);
+			let l = 0;
+			for (const [top, bottom] of positions) {
+				while (path.getPointAtLength(l).y < top) l++;
+				const topL = l;
+				while (path.getPointAtLength(l).y < bottom) l++;
+				itemLineLengths.push([topL, l]);
+			}
+		}
 		setSvg({
 			content: output,
 			width: w,
-			height: h
+			height: h,
+			d,
+			itemLineLengths
 		});
-	});
+	}, [items, thumbBox]);
 	useEffect(() => {
-		if (!containerRef.current) return;
-		const observer = new ResizeObserver(onResize);
-		onResize();
-		observer.observe(containerRef.current);
-		return () => {
-			observer.disconnect();
-		};
-	}, []);
+		onPrint();
+	}, [onPrint]);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [svg && /* @__PURE__ */ jsxs(TocThumb, {
 		containerRef,
+		onContainerResize: onPrint,
 		className: "absolute top-0 inset-s-0",
 		style: {
 			width: svg.width,
@@ -91,7 +115,7 @@ function TOCItems({ ref, className, ...props }) {
 				clipPath: `polygon(0 var(--fd-top), 100% var(--fd-top), 100% calc(var(--fd-top) + var(--fd-height)), 0 calc(var(--fd-top) + var(--fd-height)))`
 			},
 			children: svg.content
-		}), /* @__PURE__ */ jsx(ThumbBox, {})]
+		}), thumbBox && /* @__PURE__ */ jsx(ThumbBox, { computed: svg })]
 	}), /* @__PURE__ */ jsx("div", {
 		ref: mergeRefs(containerRef, ref),
 		className: cn("flex flex-col", className),
@@ -105,12 +129,12 @@ function TOCEmpty() {
 		children: text.tocNoHeadings
 	});
 }
-function ThumbBox() {
+function ThumbBox({ computed }) {
 	const items = Primitive.useItems();
 	const previousRef = useRef(null);
 	const startIdx = items.findIndex((item) => item.active);
-	const endIdx = items.findLastIndex((item) => item.active);
 	if (startIdx === -1) return;
+	const endIdx = items.findLastIndex((item) => item.active);
 	let isUp = false;
 	if (previousRef.current) {
 		const prev = previousRef.current;
@@ -121,12 +145,12 @@ function ThumbBox() {
 		endIdx,
 		isUp
 	};
-	const original = items[isUp ? startIdx : endIdx].original;
 	return /* @__PURE__ */ jsx("div", {
-		className: "absolute size-1 bg-fd-primary rounded-full transition-transform",
+		className: "absolute size-1 bg-fd-primary rounded-full transition-[offset-distance]",
 		style: {
-			translate: `${getLineOffset(original.depth) - 1.5}px calc(${isUp ? "var(--fd-top)" : "var(--fd-top) + var(--fd-height)"} - 1.5px)`,
-			scale: original._step !== void 0 ? "0" : "1"
+			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"
 		}
 	});
 }

package/dist/components/toc/default.d.ts

@@ -3,11 +3,12 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as Primitive from "fumadocs-core/toc";
 
 //#region src/components/toc/default.d.ts
+type TOCItemsProps = ComponentProps<'div'>;
 declare function TOCItems({
   ref,
   className,
   ...props
-}: ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
+}: TOCItemsProps): _$react_jsx_runtime0.JSX.Element;
 declare function TOCEmpty(): _$react_jsx_runtime0.JSX.Element;
 declare function TOCItem({
   item,
@@ -16,4 +17,4 @@ declare function TOCItem({
   item: Primitive.TOCItemType;
 }): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { TOCEmpty, TOCItem, TOCItems };
+export { TOCEmpty, TOCItem, TOCItems, TOCItemsProps };

package/dist/components/toc/index.d.ts

@@ -18,9 +18,11 @@ declare function TOCScrollArea({
 }: ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
 interface TocThumbProps extends ComponentProps<'div'> {
   containerRef: RefObject<HTMLElement | null>;
+  onContainerResize?: () => void;
 }
 declare function TocThumb({
   containerRef,
+  onContainerResize,
   ...props
 }: TocThumbProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion

package/dist/components/toc/index.js

@@ -43,7 +43,7 @@ function TOCScrollArea({ ref, className, ...props }) {
 		})
 	});
 }
-function TocThumb({ containerRef, ...props }) {
+function TocThumb({ containerRef, onContainerResize, ...props }) {
 	const thumbRef = useRef(null);
 	const active = useActiveAnchors();
 	function update(info) {
@@ -74,14 +74,15 @@ function TocThumb({ containerRef, ...props }) {
 			height: lower - upper
 		};
 	}
-	const onPrint = useEffectEvent(() => {
+	const onResize = useEffectEvent(() => {
 		const result = calc(active);
 		if (result) update(result);
+		onContainerResize?.();
 	});
 	useEffect(() => {
 		if (!containerRef.current) return;
 		const container = containerRef.current;
-		const observer = new ResizeObserver(onPrint);
+		const observer = new ResizeObserver(onResize);
 		observer.observe(container);
 		return () => {
 			observer.disconnect();

package/dist/layouts/docs/page/index.d.ts

@@ -35,20 +35,20 @@ interface FooterOptions extends FooterProps {
    */
   component?: ReactNode;
 }
-interface TableOfContentOptions extends Pick<TOCProviderProps, 'single'>, TOCProps {
+type TableOfContentOptions = Pick<TOCProviderProps, 'single'> & TOCProps & {
   enabled?: boolean;
   /**
    * @deprecated use `slots.toc` instead.
    */
   component?: ReactNode;
-}
-interface TableOfContentPopoverOptions extends TOCPopoverProps {
+};
+type TableOfContentPopoverOptions = TOCPopoverProps & {
   enabled?: boolean;
   /**
    * @deprecated use `slots.tocPopover` instead.
    */
   component?: ReactNode;
-}
+};
 interface DocsPageSlots {
   toc: {
     provider: FC<TOCProviderProps>;

package/dist/layouts/docs/page/slots/toc.d.ts

@@ -1,3 +1,5 @@
+import { TOCItemsProps } from "../../../../components/toc/clerk.js";
+import { TOCItemsProps as TOCItemsProps$1 } from "../../../../components/toc/default.js";
 import { TOCProviderProps as TOCProviderProps$1 } from "../../../../components/toc/index.js";
 import { ComponentProps, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -5,7 +7,7 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 //#region src/layouts/docs/page/slots/toc.d.ts
 type TOCProviderProps = TOCProviderProps$1;
 declare function TOCProvider(props: TOCProviderProps): _$react_jsx_runtime0.JSX.Element;
-interface TOCProps {
+type TOCProps = {
   container?: ComponentProps<'div'>;
   /**
    * Custom content in TOC container, before the main TOC
@@ -15,18 +17,21 @@ interface TOCProps {
    * Custom content in TOC container, after the main TOC
    */
   footer?: ReactNode;
-  /**
-   * @defaultValue 'normal'
-   */
-  style?: 'normal' | 'clerk';
-}
+} & ({
+  style?: 'normal';
+  list?: TOCItemsProps$1;
+} | {
+  style: 'clerk';
+  list?: TOCItemsProps;
+});
 declare function TOC({
   container,
   header,
   footer,
-  style
+  style,
+  list
 }: TOCProps): _$react_jsx_runtime0.JSX.Element;
-interface TOCPopoverProps {
+type TOCPopoverProps = {
   container?: ComponentProps<'div'>;
   trigger?: ComponentProps<'button'>;
   content?: ComponentProps<'div'>;
@@ -38,18 +43,21 @@ interface TOCPopoverProps {
    * Custom content in TOC container, after the main TOC
    */
   footer?: ReactNode;
-  /**
-   * @defaultValue 'normal'
-   */
-  style?: 'normal' | 'clerk';
-}
+} & ({
+  style?: 'normal';
+  list?: TOCItemsProps$1;
+} | {
+  style: 'clerk';
+  list?: TOCItemsProps;
+});
 declare function TOCPopover({
   container,
   trigger,
   content,
   header,
   footer,
-  style
+  style,
+  list
 }: TOCPopoverProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TOC, TOCPopover, TOCPopoverProps, TOCProps, TOCProvider, TOCProviderProps };

package/dist/layouts/docs/page/slots/toc.js

@@ -15,7 +15,7 @@ import { ChevronDown, Text } from "lucide-react";
 function TOCProvider(props) {
 	return /* @__PURE__ */ jsx(TOCProvider$1, { ...props });
 }
-function TOC({ container, header, footer, style = "normal" }) {
+function TOC({ container, header, footer, style = "normal", list }) {
 	const items = useTOCItems();
 	const { TOCItems, TOCEmpty, TOCItem } = style === "clerk" ? clerk_exports : default_exports;
 	return /* @__PURE__ */ jsxs("div", {
@@ -29,13 +29,16 @@ function TOC({ container, header, footer, style = "normal" }) {
 				className: "inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground",
 				children: [/* @__PURE__ */ jsx(Text, { className: "size-4" }), /* @__PURE__ */ jsx(I18nLabel, { label: "toc" })]
 			}),
-			/* @__PURE__ */ jsx(TOCScrollArea, { children: /* @__PURE__ */ jsxs(TOCItems, { children: [items.length === 0 && /* @__PURE__ */ jsx(TOCEmpty, {}), items.map((item) => /* @__PURE__ */ jsx(TOCItem, { item }, item.url))] }) }),
+			/* @__PURE__ */ jsx(TOCScrollArea, { children: /* @__PURE__ */ jsxs(TOCItems, {
+				...list,
+				children: [items.length === 0 && /* @__PURE__ */ jsx(TOCEmpty, {}), items.map((item) => /* @__PURE__ */ jsx(TOCItem, { item }, item.url))]
+			}) }),
 			footer
 		]
 	});
 }
 const TocPopoverContext = createContext(null);
-function TOCPopover({ container, trigger, content, header, footer, style = "normal" }) {
+function TOCPopover({ container, trigger, content, header, footer, style = "normal", list }) {
 	const items = useTOCItems();
 	const ref = useRef(null);
 	const [open, setOpen] = useState(false);
@@ -72,10 +75,13 @@ function TOCPopover({ container, trigger, content, header, footer, style = "norm
 					...content,
 					children: [
 						header,
-						/* @__PURE__ */ jsx(TOCScrollArea, { children: /* @__PURE__ */ jsxs(TOCItems, { children: [items.length === 0 && /* @__PURE__ */ jsx(TOCEmpty, {}), items.map((item) => /* @__PURE__ */ jsx(TOCItem, {
-							item,
-							onClick: onClickItem
-						}, item.url))] }) }),
+						/* @__PURE__ */ jsx(TOCScrollArea, { children: /* @__PURE__ */ jsxs(TOCItems, {
+							...list,
+							children: [items.length === 0 && /* @__PURE__ */ jsx(TOCEmpty, {}), items.map((item) => /* @__PURE__ */ jsx(TOCItem, {
+								item,
+								onClick: onClickItem
+							}, item.url))]
+						}) }),
 						footer
 					]
 				})]

package/dist/layouts/flux/page/index.d.ts

@@ -15,19 +15,18 @@ interface DocsPageProps extends ComponentProps<'article'> {
    * @defaultValue false
    */
   full?: boolean;
-  children?: ReactNode;
   slots?: Partial<DocsPageSlots>;
   footer?: FooterOptions;
   breadcrumb?: BreadcrumbOptions;
   tableOfContent?: TableOfContentOptions;
 }
-interface TableOfContentOptions extends Pick<TOCProviderProps, 'single'>, TOCProps {
+type TableOfContentOptions = Pick<TOCProviderProps, 'single'> & TOCProps & {
   enabled?: boolean;
   /**
    * @deprecated use `slots.toc` instead.
    */
   component?: ReactNode;
-}
+};
 interface BreadcrumbOptions extends BreadcrumbProps {
   enabled?: boolean;
   /**

package/dist/layouts/flux/page/slots/toc.d.ts

@@ -1,3 +1,5 @@
+import { TOCItemsProps } from "../../../../components/toc/clerk.js";
+import { TOCItemsProps as TOCItemsProps$1 } from "../../../../components/toc/default.js";
 import { TOCProvider as TOCProvider$1, TOCProviderProps as TOCProviderProps$1 } from "../../../../components/toc/index.js";
 import { ComponentProps, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -5,7 +7,7 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 //#region src/layouts/flux/page/slots/toc.d.ts
 type TOCProviderProps = TOCProviderProps$1;
 declare const TOCProvider: typeof TOCProvider$1;
-interface TOCProps {
+type TOCProps = {
   container?: ComponentProps<'div'>;
   trigger?: ComponentProps<'button'>;
   content?: ComponentProps<'div'>;
@@ -17,18 +19,21 @@ interface TOCProps {
    * Custom content in TOC container, after the main TOC
    */
   footer?: ReactNode;
-  /**
-   * @defaultValue 'normal'
-   */
-  style?: 'normal' | 'clerk';
-}
+} & ({
+  style?: 'normal';
+  list?: TOCItemsProps$1;
+} | {
+  style: 'clerk';
+  list?: TOCItemsProps;
+});
 declare function TOC({
   container,
   trigger,
   content,
   header,
   footer,
-  style
+  style,
+  list
 }: TOCProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TOC, TOCProps, TOCProvider, TOCProviderProps };

package/dist/layouts/flux/page/slots/toc.js

@@ -14,7 +14,7 @@ import { AnimatePresence, motion } from "motion/react";
 //#region src/layouts/flux/page/slots/toc.tsx
 const TocPopoverContext = createContext(null);
 const { TOCProvider } = toc_exports;
-function TOC({ container, trigger, content, header, footer, style = "normal" }) {
+function TOC({ container, trigger, content, header, footer, style = "normal", list }) {
 	const items = useTOCItems();
 	const { TOCItems, TOCEmpty, TOCItem } = style === "clerk" ? clerk_exports : default_exports;
 	return /* @__PURE__ */ jsxs(PageTOCPopover, {
@@ -23,7 +23,10 @@ function TOC({ container, trigger, content, header, footer, style = "normal" })
 			...content,
 			children: [
 				header,
-				/* @__PURE__ */ jsx(TOCScrollArea, { children: /* @__PURE__ */ jsxs(TOCItems, { children: [items.length === 0 && /* @__PURE__ */ jsx(TOCEmpty, {}), items.map((item) => /* @__PURE__ */ jsx(TOCItem, { item }, item.url))] }) }),
+				/* @__PURE__ */ jsx(TOCScrollArea, { children: /* @__PURE__ */ jsxs(TOCItems, {
+					...list,
+					children: [items.length === 0 && /* @__PURE__ */ jsx(TOCEmpty, {}), items.map((item) => /* @__PURE__ */ jsx(TOCItem, { item }, item.url))]
+				}) }),
 				footer
 			]
 		}), /* @__PURE__ */ jsx(PageTOCPopoverTrigger, { ...trigger })]

package/dist/layouts/notebook/page/index.d.ts

@@ -35,20 +35,20 @@ interface FooterOptions extends FooterProps {
    */
   component?: ReactNode;
 }
-interface TableOfContentOptions extends Pick<TOCProviderProps, 'single'>, TOCProps {
+type TableOfContentOptions = Pick<TOCProviderProps, 'single'> & TOCProps & {
   enabled?: boolean;
   /**
    * @deprecated use `slots.toc` instead.
    */
   component?: ReactNode;
-}
-interface TableOfContentPopoverOptions extends TOCPopoverProps {
+};
+type TableOfContentPopoverOptions = TOCPopoverProps & {
   enabled?: boolean;
   /**
    * @deprecated use `slots.tocPopover` instead.
    */
   component?: ReactNode;
-}
+};
 interface DocsPageSlots {
   toc: {
     provider: FC<TOCProviderProps>;

package/dist/layouts/notebook/page/slots/toc.d.ts

@@ -1,3 +1,5 @@
+import { TOCItemsProps } from "../../../../components/toc/clerk.js";
+import { TOCItemsProps as TOCItemsProps$1 } from "../../../../components/toc/default.js";
 import { TOCProviderProps as TOCProviderProps$1 } from "../../../../components/toc/index.js";
 import { ComponentProps, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -5,7 +7,7 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 //#region src/layouts/notebook/page/slots/toc.d.ts
 type TOCProviderProps = TOCProviderProps$1;
 declare function TOCProvider(props: TOCProviderProps): _$react_jsx_runtime0.JSX.Element;
-interface TOCProps {
+type TOCProps = {
   container?: ComponentProps<'div'>;
   /**
    * Custom content in TOC container, before the main TOC
@@ -15,18 +17,21 @@ interface TOCProps {
    * Custom content in TOC container, after the main TOC
    */
   footer?: ReactNode;
-  /**
-   * @defaultValue 'normal'
-   */
-  style?: 'normal' | 'clerk';
-}
+} & ({
+  style?: 'normal';
+  list?: TOCItemsProps$1;
+} | {
+  style: 'clerk';
+  list?: TOCItemsProps;
+});
 declare function TOC({
   container,
   header,
   footer,
-  style
+  style,
+  list
 }: TOCProps): _$react_jsx_runtime0.JSX.Element;
-interface TOCPopoverProps {
+type TOCPopoverProps = {
   container?: ComponentProps<'div'>;
   trigger?: ComponentProps<'button'>;
   content?: ComponentProps<'div'>;
@@ -38,18 +43,21 @@ interface TOCPopoverProps {
    * Custom content in TOC container, after the main TOC
    */
   footer?: ReactNode;
-  /**
-   * @defaultValue 'normal'
-   */
-  style?: 'normal' | 'clerk';
-}
+} & ({
+  style?: 'normal';
+  list?: TOCItemsProps$1;
+} | {
+  style: 'clerk';
+  list?: TOCItemsProps;
+});
 declare function TOCPopover({
   container,
   trigger,
   content,
   header,
   footer,
-  style
+  style,
+  list
 }: TOCPopoverProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TOC, TOCPopover, TOCPopoverProps, TOCProps, TOCProvider, TOCProviderProps };

package/dist/layouts/notebook/page/slots/toc.js

@@ -14,7 +14,7 @@ import { ChevronDown, Text } from "lucide-react";
 function TOCProvider(props) {
 	return /* @__PURE__ */ jsx(TOCProvider$1, { ...props });
 }
-function TOC({ container, header, footer, style = "normal" }) {
+function TOC({ container, header, footer, style = "normal", list }) {
 	const items = useTOCItems();
 	const { TOCItems, TOCEmpty, TOCItem } = style === "clerk" ? clerk_exports : default_exports;
 	return /* @__PURE__ */ jsxs("div", {
@@ -28,13 +28,16 @@ function TOC({ container, header, footer, style = "normal" }) {
 				className: "inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground",
 				children: [/* @__PURE__ */ jsx(Text, { className: "size-4" }), /* @__PURE__ */ jsx(I18nLabel, { label: "toc" })]
 			}),
-			/* @__PURE__ */ jsx(TOCScrollArea, { children: /* @__PURE__ */ jsxs(TOCItems, { children: [items.length === 0 && /* @__PURE__ */ jsx(TOCEmpty, {}), items.map((item) => /* @__PURE__ */ jsx(TOCItem, { item }, item.url))] }) }),
+			/* @__PURE__ */ jsx(TOCScrollArea, { children: /* @__PURE__ */ jsxs(TOCItems, {
+				...list,
+				children: [items.length === 0 && /* @__PURE__ */ jsx(TOCEmpty, {}), items.map((item) => /* @__PURE__ */ jsx(TOCItem, { item }, item.url))]
+			}) }),
 			footer
 		]
 	});
 }
 const TocPopoverContext = createContext(null);
-function TOCPopover({ container, trigger, content, header, footer, style = "normal" }) {
+function TOCPopover({ container, trigger, content, header, footer, style = "normal", list }) {
 	const items = useTOCItems();
 	const ref = useRef(null);
 	const [open, setOpen] = useState(false);
@@ -71,10 +74,13 @@ function TOCPopover({ container, trigger, content, header, footer, style = "norm
 					...content,
 					children: [
 						header,
-						/* @__PURE__ */ jsx(TOCScrollArea, { children: /* @__PURE__ */ jsxs(TOCItems, { children: [items.length === 0 && /* @__PURE__ */ jsx(TOCEmpty, {}), items.map((item) => /* @__PURE__ */ jsx(TOCItem, {
-							item,
-							onClick: onClickItem
-						}, item.url))] }) }),
+						/* @__PURE__ */ jsx(TOCScrollArea, { children: /* @__PURE__ */ jsxs(TOCItems, {
+							...list,
+							children: [items.length === 0 && /* @__PURE__ */ jsx(TOCEmpty, {}), items.map((item) => /* @__PURE__ */ jsx(TOCItem, {
+								item,
+								onClick: onClickItem
+							}, item.url))]
+						}) }),
 						footer
 					]
 				})]

package/dist/style.css

@@ -1885,6 +1885,11 @@
     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-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[opacity\,transform\,translate\] {
     transition-property: opacity,transform,translate;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fumadocs/base-ui",
-  "version": "16.7.10",
+  "version": "16.7.12",
   "description": "The Base UI version of Fumadocs UI",
   "keywords": [
     "Docs",
@@ -118,10 +118,11 @@
   "dependencies": {
     "@base-ui/react": "^1.3.0",
     "class-variance-authority": "^0.7.1",
+    "fuma-cli": "^0.0.3",
     "lucide-react": "^1.7.0",
     "motion": "^12.38.0",
     "next-themes": "^0.4.6",
-    "react-medium-image-zoom": "^5.4.1",
+    "react-medium-image-zoom": "^5.4.3",
     "react-remove-scroll": "^2.7.2",
     "rehype-raw": "^7.0.0",
     "scroll-into-view-if-needed": "^3.1.0",
@@ -134,15 +135,15 @@
     "@tsdown/css": "^0.21.6",
     "@types/hast": "^3.0.4",
     "@types/mdx": "^2.0.13",
-    "@types/node": "^25.5.0",
+    "@types/node": "^25.5.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "shiki": "^4.0.2",
     "tailwindcss": "^4.2.2",
-    "tsdown": "0.21.6",
+    "tsdown": "0.21.7",
     "unified": "^11.0.5",
-    "@fumadocs/cli": "1.3.4",
-    "fumadocs-core": "16.7.10",
+    "@fumadocs/cli": "1.3.5",
+    "fumadocs-core": "16.7.12",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {
@@ -153,7 +154,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "shiki": "*",
-    "fumadocs-core": "16.7.10"
+    "fumadocs-core": "16.7.12"
   },
   "peerDependenciesMeta": {
     "shiki": {