@fumadocs/base-ui 16.7.0 → 16.7.1

package/css/generated/docs.css

@@ -328,6 +328,7 @@
 @source inline("pe-4");
 @source inline("placeholder");
 @source inline("pointer-events-none");
+@source inline("popover");
 @source inline("prefetch");
 @source inline("previous");
 @source inline("previousPage");
@@ -428,7 +429,6 @@
 @source inline("tocPopoverEnabled");
 @source inline("tocPopoverProps");
 @source inline("tocProps");
-@source inline("tocProvider");
 @source inline("top");
 @source inline("top-(--fd-docs-row-1)");
 @source inline("top-(--fd-docs-row-2)");
@@ -456,7 +456,6 @@
 @source inline("unlisted");
 @source inline("url");
 @source inline("use");
-@source inline("useActiveAnchor");
 @source inline("useDocsLayout");
 @source inline("useDocsPage");
 @source inline("useFooterItems");
@@ -468,7 +467,6 @@
 @source inline("useRef");
 @source inline("useSidebar");
 @source inline("useState");
-@source inline("useTOCItems");
 @source inline("useTreeContext");
 @source inline("useTreePath");
 @source inline("value");

package/css/generated/notebook.css

@@ -357,6 +357,7 @@
 @source inline("placeholder");
 @source inline("pointer-events-none");
 @source inline("pointerType");
+@source inline("popover");
 @source inline("prefetch");
 @source inline("previous");
 @source inline("previousPage");
@@ -462,7 +463,6 @@
 @source inline("tocPopoverEnabled");
 @source inline("tocPopoverProps");
 @source inline("tocProps");
-@source inline("tocProvider");
 @source inline("top");
 @source inline("top-(--fd-docs-row-1)");
 @source inline("top-(--fd-docs-row-2)");
@@ -491,7 +491,6 @@
 @source inline("unlisted");
 @source inline("url");
 @source inline("use");
-@source inline("useActiveAnchor");
 @source inline("useDocsPage");
 @source inline("useFooterItems");
 @source inline("useI18n");
@@ -502,7 +501,6 @@
 @source inline("useProvider");
 @source inline("useRef");
 @source inline("useSidebar");
-@source inline("useTOCItems");
 @source inline("useTreePath");
 @source inline("value");
 @source inline("variant");

package/css/generated/shared.css

@@ -129,7 +129,6 @@
 @source inline("bg-fd-secondary/50");
 @source inline("bg-transparent");
 @source inline("bind");
-@source inline("binded");
 @source inline("black");
 @source inline("block");
 @source inline("blocks");
@@ -146,6 +145,7 @@
 @source inline("bottom");
 @source inline("bottom-0");
 @source inline("bottom-1.5");
+@source inline("bound");
 @source inline("boundary");
 @source inline("breaking");
 @source inline("button");
@@ -1054,6 +1054,7 @@
 @source inline("urls");
 @source inline("usage");
 @source inline("use");
+@source inline("useActiveAnchors");
 @source inline("useCopyButton");
 @source inline("useDocsSearch");
 @source inline("useI18n");

package/dist/components/accordion.js

@@ -6,7 +6,7 @@ import { mergeRefs } from "../utils/merge-refs.js";
 import { Accordion as Accordion$1, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger } from "./ui/accordion.js";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Check, Link } from "lucide-react";
+import { Check, LinkIcon } from "lucide-react";
 //#region src/components/accordion.tsx
 function Accordions({ ref, className, defaultValue, ...props }) {
 	const rootRef = useRef(null);
@@ -60,7 +60,7 @@ function CopyButton({ id }) {
 			className: "text-fd-muted-foreground me-2"
 		})),
 		onClick,
-		children: checked ? /* @__PURE__ */ jsx(Check, { className: "size-3.5" }) : /* @__PURE__ */ jsx(Link, { className: "size-3.5" })
+		children: checked ? /* @__PURE__ */ jsx(Check, { className: "size-3.5" }) : /* @__PURE__ */ jsx(LinkIcon, { className: "size-3.5" })
 	});
 }
 //#endregion

package/dist/components/dialog/search.js

@@ -5,7 +5,7 @@ import { buttonVariants } from "../ui/button.js";
 import { Fragment, createContext, use, useCallback, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
 import { useRouter } from "fumadocs-core/framework";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { ChevronRight, Hash, Search } from "lucide-react";
+import { ChevronRight, Hash, SearchIcon } from "lucide-react";
 import { cva } from "class-variance-authority";
 import { useOnChange } from "fumadocs-core/utils/use-on-change";
 import scrollIntoView from "scroll-into-view-if-needed";
@@ -291,7 +291,7 @@ function SearchDialogListItem({ item, className, children, renderMarkdown = (s)
 }
 function SearchDialogIcon(props) {
 	const { isLoading } = useSearch();
-	return /* @__PURE__ */ jsx(Search, {
+	return /* @__PURE__ */ jsx(SearchIcon, {
 		...props,
 		className: cn("size-5 text-fd-muted-foreground", isLoading && "animate-pulse duration-400", props.className)
 	});

package/dist/components/files.js

@@ -3,7 +3,7 @@ import { cn } from "../utils/cn.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { File as File$1, Folder as Folder$1, FolderOpen } from "lucide-react";
+import { FileIcon, FolderIcon, FolderOpen } from "lucide-react";
 import { cva } from "class-variance-authority";
 //#region src/components/files.tsx
 const itemVariants = cva("flex flex-row items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-fd-accent hover:text-fd-accent-foreground [&_svg]:size-4");
@@ -14,7 +14,7 @@ function Files({ className, ...props }) {
 		children: props.children
 	});
 }
-function File({ name, icon = /* @__PURE__ */ jsx(File$1, {}), className, ...rest }) {
+function File({ name, icon = /* @__PURE__ */ jsx(FileIcon, {}), className, ...rest }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn(itemVariants({ className })),
 		...rest,
@@ -29,7 +29,7 @@ function Folder({ name, defaultOpen = false, ...props }) {
 		...props,
 		children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
 			className: cn(itemVariants({ className: "w-full" })),
-			children: [open ? /* @__PURE__ */ jsx(FolderOpen, {}) : /* @__PURE__ */ jsx(Folder$1, {}), name]
+			children: [open ? /* @__PURE__ */ jsx(FolderOpen, {}) : /* @__PURE__ */ jsx(FolderIcon, {}), name]
 		}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", {
 			className: "ms-2 flex flex-col border-l ps-2",
 			children: props.children

package/dist/components/heading.js

@@ -1,6 +1,6 @@
 import { cn } from "../utils/cn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Link } from "lucide-react";
+import { LinkIcon } from "lucide-react";
 //#region src/components/heading.tsx
 function Heading({ as, className, ...props }) {
 	const As = as ?? "h1";
@@ -16,7 +16,7 @@ function Heading({ as, className, ...props }) {
 			href: `#${props.id}`,
 			className: "peer",
 			children: props.children
-		}), /* @__PURE__ */ jsx(Link, {
+		}), /* @__PURE__ */ jsx(LinkIcon, {
 			"aria-hidden": true,
 			className: "size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100"
 		})]

package/dist/components/sidebar/tabs/dropdown.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../../../utils/cn.js";
-import { useSidebar } from "../base.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover.js";
 import { isLayoutTabActive } from "../../../layouts/shared/index.js";
+import { useSidebar } from "../base.js";
 import { useMemo, useState } from "react";
 import { usePathname } from "fumadocs-core/framework";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

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

@@ -4,7 +4,8 @@ import * as Primitive from "fumadocs-core/toc";
 
 //#region src/components/toc/index.d.ts
 declare function useTOCItems(): Primitive.TOCItemType[];
-type TOCProviderProps = ComponentProps<typeof Primitive.AnchorProvider>;
+type TOCProviderProps = Primitive.AnchorProviderProps;
+declare const useActiveAnchor: typeof Primitive.useActiveAnchor, useActiveAnchors: typeof Primitive.useActiveAnchors;
 declare function TOCProvider({
   toc,
   children,
@@ -23,4 +24,4 @@ declare function TocThumb({
   ...props
 }: ComponentProps<'div'> & RefProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { TOCProvider, TOCProviderProps, TOCScrollArea, TocThumb, useTOCItems };
+export { TOCProvider, TOCProviderProps, TOCScrollArea, TocThumb, useActiveAnchor, useActiveAnchors, useTOCItems };

package/dist/components/toc/index.js

@@ -10,6 +10,7 @@ const TOCContext = createContext([]);
 function useTOCItems() {
 	return use(TOCContext);
 }
+const { useActiveAnchor, useActiveAnchors } = Primitive;
 function TOCProvider({ toc, children, ...props }) {
 	return /* @__PURE__ */ jsx(TOCContext, {
 		value: toc,
@@ -34,7 +35,7 @@ function TOCScrollArea({ ref, className, ...props }) {
 }
 function TocThumb({ containerRef, ...props }) {
 	const thumbRef = useRef(null);
-	const active = Primitive.useActiveAnchors();
+	const active = useActiveAnchors();
 	function update(info) {
 		const element = thumbRef.current;
 		if (!element) return;
@@ -75,4 +76,4 @@ function calc(container, active) {
 	return [upper, lower - upper];
 }
 //#endregion
-export { TOCProvider, TOCScrollArea, TocThumb, useTOCItems };
+export { TOCProvider, TOCScrollArea, TocThumb, useActiveAnchor, useActiveAnchors, useTOCItems };

package/dist/layouts/docs/client.js

@@ -1,9 +1,9 @@
 "use client";
 import { cn } from "../../utils/cn.js";
 import { TreeContextProvider } from "../../contexts/tree.js";
-import { useIsScrollTop } from "../../utils/use-is-scroll-top.js";
 import { baseSlots } from "../shared/client.js";
 import { isLayoutTabActive, useLinkItems } from "../shared/index.js";
+import { useIsScrollTop } from "../../utils/use-is-scroll-top.js";
 import { Sidebar, SidebarProvider, SidebarTrigger, useSidebar } from "./slots/sidebar.js";
 import { Header } from "./slots/header.js";
 import { Container } from "./slots/container.js";

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

@@ -1,6 +1,4 @@
-import { TOCProviderProps } from "../../../components/toc/index.js";
-import { TOCProps } from "./slots/toc.js";
-import { TOCPopoverProps } from "./slots/toc-popover.js";
+import { TOCPopoverProps, TOCProps, TOCProviderProps } from "./slots/toc.js";
 import { FooterProps } from "./slots/footer.js";
 import { BreadcrumbProps } from "./slots/breadcrumb.js";
 import { ComponentProps, FC, ReactNode } from "react";
@@ -51,10 +49,12 @@ interface TableOfContentPopoverOptions extends TOCPopoverProps {
   component?: ReactNode;
 }
 interface DocsPageSlots {
-  toc?: FC<TOCProps>;
+  toc?: {
+    provider: FC<TOCProviderProps>;
+    main?: FC<TOCProps>;
+    popover?: FC<TOCPopoverProps>;
+  };
   container?: FC<ComponentProps<'article'>>;
-  tocPopover?: FC<TOCPopoverProps>;
-  tocProvider?: FC<TOCProviderProps>;
   footer?: FC<FooterProps>;
   breadcrumb?: FC<BreadcrumbProps>;
 }

package/dist/layouts/docs/page/client.js

@@ -1,9 +1,7 @@
 "use client";
 import { useI18n } from "../../../contexts/i18n.js";
 import { cn } from "../../../utils/cn.js";
-import { TOCProvider } from "../../../components/toc/index.js";
-import { TOC } from "./slots/toc.js";
-import { TOCPopover } from "./slots/toc-popover.js";
+import { TOC, TOCPopover, TOCProvider } from "./slots/toc.js";
 import { Footer } from "./slots/footer.js";
 import { Breadcrumb } from "./slots/breadcrumb.js";
 import { Container } from "./slots/container.js";
@@ -16,19 +14,21 @@ function useDocsPage() {
 	if (!context) throw new Error("Please use page components under <DocsPage /> (`fumadocs-ui/layouts/docs/page`).");
 	return context;
 }
-function DocsPage({ tableOfContent: { enabled: tocEnabled, single = false, ...tocProps } = {}, tableOfContentPopover: { enabled: tocPopoverEnabled, ...tocPopoverProps } = {}, footer = {}, breadcrumb = {}, full = false, toc = [], slots: defaultSlots = {}, children, ...containerProps }) {
+function DocsPage({ tableOfContent: { enabled: tocEnabled, single, ...tocProps } = {}, tableOfContentPopover: { enabled: tocPopoverEnabled, ...tocPopoverProps } = {}, footer = {}, breadcrumb = {}, full = false, toc = [], slots: defaultSlots = {}, children, ...containerProps }) {
 	tocEnabled ??= Boolean(!full && (toc.length > 0 || tocProps.footer || tocProps.header));
 	tocPopoverEnabled ??= Boolean(toc.length > 0 || tocPopoverProps.header || tocPopoverProps.footer);
 	const slots = {
 		breadcrumb: breadcrumb.enabled !== false ? defaultSlots.breadcrumb ?? InlineBreadcrumb : void 0,
 		footer: footer.enabled !== false ? defaultSlots.footer ?? InlineFooter : void 0,
-		toc: tocEnabled ? defaultSlots.toc ?? InlineTOC : void 0,
-		tocPopover: tocPopoverEnabled ? defaultSlots.tocPopover ?? InlineTOCPopover : void 0,
-		tocProvider: defaultSlots.tocProvider ?? TOCProvider,
+		toc: defaultSlots.toc ?? {
+			provider: TOCProvider,
+			main: tocEnabled ? InlineTOC : void 0,
+			popover: tocPopoverEnabled ? InlineTOCPopover : void 0
+		},
 		container: defaultSlots.container ?? Container
 	};
 	let content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		slots.tocPopover && /* @__PURE__ */ jsx(slots.tocPopover, {}),
+		slots.toc?.popover && /* @__PURE__ */ jsx(slots.toc.popover, {}),
 		slots.container && /* @__PURE__ */ jsxs(slots.container, {
 			...containerProps,
 			children: [
@@ -37,9 +37,9 @@ function DocsPage({ tableOfContent: { enabled: tocEnabled, single = false, ...to
 				slots.footer && /* @__PURE__ */ jsx(slots.footer, {})
 			]
 		}),
-		slots.toc && /* @__PURE__ */ jsx(slots.toc, {})
+		slots.toc?.main && /* @__PURE__ */ jsx(slots.toc.main, {})
 	] });
-	if (slots.tocProvider) content = /* @__PURE__ */ jsx(slots.tocProvider, {
+	if (slots.toc) content = /* @__PURE__ */ jsx(slots.toc.provider, {
 		single,
 		toc: tocEnabled || tocPopoverEnabled ? toc : [],
 		children: content

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

@@ -2,7 +2,8 @@ import { cn } from "../../../../utils/cn.js";
 import { useTreeContext, useTreePath } from "../../../../contexts/tree.js";
 import { Fragment, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronRight, Link } from "lucide-react";
+import Link from "fumadocs-core/link";
+import { ChevronRight } from "lucide-react";
 import { getBreadcrumbItemsFromPath } from "fumadocs-core/breadcrumb";
 //#region src/layouts/docs/page/slots/breadcrumb.tsx
 function Breadcrumb({ includeRoot, includeSeparator, includePage, ...props }) {

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

@@ -1,7 +1,10 @@
+import { TOCProviderProps as TOCProviderProps$1 } from "../../../../components/toc/index.js";
 import { ComponentProps, ReactNode } from "react";
 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 {
   container?: ComponentProps<'div'>;
   /**
@@ -23,5 +26,30 @@ declare function TOC({
   footer,
   style
 }: TOCProps): react_jsx_runtime0.JSX.Element;
+interface TOCPopoverProps {
+  container?: ComponentProps<'div'>;
+  trigger?: ComponentProps<'button'>;
+  content?: ComponentProps<'div'>;
+  /**
+   * Custom content in TOC container, before the main TOC
+   */
+  header?: ReactNode;
+  /**
+   * Custom content in TOC container, after the main TOC
+   */
+  footer?: ReactNode;
+  /**
+   * @defaultValue 'normal'
+   */
+  style?: 'normal' | 'clerk';
+}
+declare function TOCPopover({
+  container,
+  trigger,
+  content,
+  header,
+  footer,
+  style
+}: TOCPopoverProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { TOC, TOCProps };
+export { TOC, TOCPopover, TOCPopoverProps, TOCProps, TOCProvider, TOCProviderProps };

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

@@ -1,12 +1,20 @@
 "use client";
-import { I18nLabel } from "../../../../contexts/i18n.js";
+import { I18nLabel, useI18n } from "../../../../contexts/i18n.js";
 import { cn } from "../../../../utils/cn.js";
-import { TOCScrollArea } from "../../../../components/toc/index.js";
+import { TOCProvider as TOCProvider$1, TOCScrollArea, useActiveAnchor, useTOCItems } from "../../../../components/toc/index.js";
 import { TOCItems } from "../../../../components/toc/default.js";
 import { TOCItems as TOCItems$1 } from "../../../../components/toc/clerk.js";
+import { useTreePath } from "../../../../contexts/tree.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../../components/ui/collapsible.js";
+import { useDocsLayout } from "../../client.js";
+import "../../index.js";
+import { createContext, use, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Text } from "lucide-react";
+import { ChevronDown, Text } from "lucide-react";
 //#region src/layouts/docs/page/slots/toc.tsx
+function TOCProvider(props) {
+	return /* @__PURE__ */ jsx(TOCProvider$1, { ...props });
+}
 function TOC({ container, header, footer, style }) {
 	return /* @__PURE__ */ jsxs("div", {
 		id: "nd-toc",
@@ -24,5 +32,130 @@ function TOC({ container, header, footer, style }) {
 		]
 	});
 }
+const TocPopoverContext = createContext(null);
+function TOCPopover({ container, trigger, content, header, footer, style }) {
+	return /* @__PURE__ */ jsxs(PageTOCPopover, {
+		...container,
+		children: [/* @__PURE__ */ jsx(PageTOCPopoverTrigger, { ...trigger }), /* @__PURE__ */ jsxs(PageTOCPopoverContent, {
+			...content,
+			children: [
+				header,
+				/* @__PURE__ */ jsx(TOCScrollArea, { children: style === "clerk" ? /* @__PURE__ */ jsx(TOCItems$1, {}) : /* @__PURE__ */ jsx(TOCItems, {}) }),
+				footer
+			]
+		})]
+	});
+}
+function PageTOCPopover({ className, children, ...rest }) {
+	const ref = useRef(null);
+	const [open, setOpen] = useState(false);
+	const { isNavTransparent } = useDocsLayout();
+	const onClick = useEffectEvent((e) => {
+		if (!open) return;
+		if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+	});
+	useEffect(() => {
+		window.addEventListener("click", onClick);
+		return () => {
+			window.removeEventListener("click", onClick);
+		};
+	}, []);
+	return /* @__PURE__ */ jsx(TocPopoverContext, {
+		value: useMemo(() => ({
+			open,
+			setOpen
+		}), [setOpen, open]),
+		children: /* @__PURE__ */ jsx(Collapsible, {
+			open,
+			onOpenChange: setOpen,
+			"data-toc-popover": "",
+			className: cn("sticky top-(--fd-docs-row-2) z-10 [grid-area:toc-popover] h-(--fd-toc-popover-height) xl:hidden max-xl:layout:[--fd-toc-popover-height:--spacing(10)]", className),
+			...rest,
+			children: /* @__PURE__ */ jsx("header", {
+				ref,
+				className: cn("border-b backdrop-blur-sm transition-colors", (!isNavTransparent || open) && "bg-fd-background/80", open && "shadow-lg"),
+				children
+			})
+		})
+	});
+}
+function PageTOCPopoverTrigger({ className, ...props }) {
+	const { text } = useI18n();
+	const { open } = use(TocPopoverContext);
+	const items = useTOCItems();
+	const active = useActiveAnchor();
+	const selected = useMemo(() => items.findIndex((item) => active === item.url.slice(1)), [items, active]);
+	const path = useTreePath().at(-1);
+	const showItem = selected !== -1 && !open;
+	return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
+		className: cn("flex w-full h-10 items-center text-sm text-fd-muted-foreground gap-2.5 px-4 py-2.5 text-start focus-visible:outline-none [&_svg]:size-4 md:px-6", className),
+		"data-toc-popover-trigger": "",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(ProgressCircle, {
+				value: (selected + 1) / Math.max(1, items.length),
+				max: 1,
+				className: cn("shrink-0", open && "text-fd-primary")
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "grid flex-1 *:my-auto *:row-start-1 *:col-start-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn("truncate transition-[opacity,translate,color]", open && "text-fd-foreground", showItem && "opacity-0 -translate-y-full pointer-events-none"),
+					children: path?.name ?? text.toc
+				}), /* @__PURE__ */ jsx("span", {
+					className: cn("truncate transition-[opacity,translate]", !showItem && "opacity-0 translate-y-full pointer-events-none"),
+					children: items[selected]?.title
+				})]
+			}),
+			/* @__PURE__ */ jsx(ChevronDown, { className: cn("shrink-0 transition-transform mx-0.5", open && "rotate-180") })
+		]
+	});
+}
+function clamp(input, min, max) {
+	if (input < min) return min;
+	if (input > max) return max;
+	return input;
+}
+function ProgressCircle({ value, strokeWidth = 2, size = 24, min = 0, max = 100, ...restSvgProps }) {
+	const normalizedValue = clamp(value, min, max);
+	const radius = (size - strokeWidth) / 2;
+	const circumference = 2 * Math.PI * radius;
+	const progress = normalizedValue / max * circumference;
+	const circleProps = {
+		cx: size / 2,
+		cy: size / 2,
+		r: radius,
+		fill: "none",
+		strokeWidth
+	};
+	return /* @__PURE__ */ jsxs("svg", {
+		role: "progressbar",
+		viewBox: `0 0 ${size} ${size}`,
+		"aria-valuenow": normalizedValue,
+		"aria-valuemin": min,
+		"aria-valuemax": max,
+		...restSvgProps,
+		children: [/* @__PURE__ */ jsx("circle", {
+			...circleProps,
+			className: "stroke-current/25"
+		}), /* @__PURE__ */ jsx("circle", {
+			...circleProps,
+			stroke: "currentColor",
+			strokeDasharray: circumference,
+			strokeDashoffset: circumference - progress,
+			strokeLinecap: "round",
+			transform: `rotate(-90 ${size / 2} ${size / 2})`,
+			className: "transition-all"
+		})]
+	});
+}
+function PageTOCPopoverContent(props) {
+	return /* @__PURE__ */ jsx(CollapsibleContent, {
+		"data-toc-popover-content": "",
+		...props,
+		className: cn("flex flex-col px-4 max-h-[50vh] md:px-6", props.className),
+		children: props.children
+	});
+}
 //#endregion
-export { TOC };
+export { TOC, TOCPopover, TOCProvider };

package/dist/layouts/docs/slots/container.js

@@ -1,6 +1,6 @@
 import { cn } from "../../../utils/cn.js";
-import "../index.js";
 import { useDocsLayout } from "../client.js";
+import "../index.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/layouts/docs/slots/container.tsx
 function Container(props) {

package/dist/layouts/docs/slots/sidebar.js

@@ -2,20 +2,20 @@
 import { cn } from "../../../utils/cn.js";
 import { buttonVariants } from "../../../components/ui/button.js";
 import { mergeRefs } from "../../../utils/merge-refs.js";
-import { ScrollArea, ScrollViewport } from "../../../components/ui/scroll-area.js";
-import { SidebarCollapseTrigger as SidebarCollapseTrigger$1, SidebarContent as SidebarContent$1, SidebarDrawerContent, SidebarDrawerOverlay, SidebarFolder as SidebarFolder$1, SidebarFolderContent as SidebarFolderContent$1, SidebarFolderLink as SidebarFolderLink$1, SidebarFolderTrigger as SidebarFolderTrigger$1, SidebarItem as SidebarItem$1, SidebarProvider as SidebarProvider$1, SidebarSeparator as SidebarSeparator$1, SidebarTrigger as SidebarTrigger$1, base_exports, useFolder, useFolderDepth } from "../../../components/sidebar/base.js";
-import { createPageTreeRenderer } from "../../../components/sidebar/page-tree.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../../../components/ui/popover.js";
 import { SearchTrigger } from "../../shared/slots/search-trigger.js";
 import { LinkItem } from "../../shared/client.js";
 import { isLayoutTabActive } from "../../shared/index.js";
+import { ScrollArea, ScrollViewport } from "../../../components/ui/scroll-area.js";
+import { SidebarCollapseTrigger as SidebarCollapseTrigger$1, SidebarContent as SidebarContent$1, SidebarDrawerContent, SidebarDrawerOverlay, SidebarFolder as SidebarFolder$1, SidebarFolderContent as SidebarFolderContent$1, SidebarFolderLink as SidebarFolderLink$1, SidebarFolderTrigger as SidebarFolderTrigger$1, SidebarItem as SidebarItem$1, SidebarProvider as SidebarProvider$1, SidebarSeparator as SidebarSeparator$1, SidebarTrigger as SidebarTrigger$1, base_exports, useFolder, useFolderDepth } from "../../../components/sidebar/base.js";
+import { createPageTreeRenderer } from "../../../components/sidebar/page-tree.js";
 import { createLinkItemRenderer } from "../../../components/sidebar/link-item.js";
 import { useDocsLayout } from "../client.js";
 import { useMemo, useRef, useState } from "react";
 import { usePathname } from "fumadocs-core/framework";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import Link from "fumadocs-core/link";
-import { Check, ChevronsUpDown, Languages, Sidebar as Sidebar$1 } from "lucide-react";
+import { Check, ChevronsUpDown, Languages, SidebarIcon } from "lucide-react";
 import { cva } from "class-variance-authority";
 //#region src/layouts/docs/slots/sidebar.tsx
 const itemVariants = cva("relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0", { variants: {
@@ -53,7 +53,7 @@ function Sidebar({ footer, banner, collapsible = true, components, ...rest }) {
 									size: "icon-sm",
 									className: "mb-auto text-fd-muted-foreground"
 								})),
-								children: /* @__PURE__ */ jsx(Sidebar$1, {})
+								children: /* @__PURE__ */ jsx(SidebarIcon, {})
 							})
 						]
 					}),
@@ -111,7 +111,7 @@ function Sidebar({ footer, banner, collapsible = true, components, ...rest }) {
 								size: "icon-sm",
 								className: "p-2"
 							})),
-							children: /* @__PURE__ */ jsx(Sidebar$1, {})
+							children: /* @__PURE__ */ jsx(SidebarIcon, {})
 						})
 					]
 				}),
@@ -174,7 +174,7 @@ function SidebarContent({ ref: refProp, className, children, ...props }) {
 				size: "icon-sm",
 				className: "rounded-lg"
 			})),
-			children: /* @__PURE__ */ jsx(Sidebar$1, {})
+			children: /* @__PURE__ */ jsx(SidebarIcon, {})
 		}), /* @__PURE__ */ jsx(SearchTrigger, {
 			className: "rounded-lg",
 			hideIfDisabled: true

package/dist/layouts/home/slots/header.js

@@ -1,9 +1,9 @@
 "use client";
 import { cn } from "../../../utils/cn.js";
 import { buttonVariants } from "../../../components/ui/button.js";
-import { useIsScrollTop } from "../../../utils/use-is-scroll-top.js";
 import { LinkItem } from "../../shared/client.js";
 import "../../shared/index.js";
+import { useIsScrollTop } from "../../../utils/use-is-scroll-top.js";
 import { NavigationMenu as NavigationMenuRoot, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport } from "../../../components/ui/navigation-menu.js";
 import { useHomeLayout } from "../index.js";
 import { Fragment, useState } from "react";

package/dist/layouts/notebook/client.js

@@ -1,8 +1,8 @@
 "use client";
 import { TreeContextProvider } from "../../contexts/tree.js";
-import { useIsScrollTop } from "../../utils/use-is-scroll-top.js";
 import { baseSlots } from "../shared/client.js";
 import { useLinkItems } from "../shared/index.js";
+import { useIsScrollTop } from "../../utils/use-is-scroll-top.js";
 import { Container } from "./slots/container.js";
 import { Sidebar, SidebarCollapseTrigger, SidebarProvider, SidebarTrigger, useSidebar } from "./slots/sidebar.js";
 import { Header } from "./slots/header.js";

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

@@ -1,6 +1,4 @@
-import { TOCProviderProps } from "../../../components/toc/index.js";
-import { TOCProps } from "./slots/toc.js";
-import { TOCPopoverProps } from "./slots/toc-popover.js";
+import { TOCPopoverProps, TOCProps, TOCProviderProps } from "./slots/toc.js";
 import { FooterProps } from "./slots/footer.js";
 import { BreadcrumbProps } from "./slots/breadcrumb.js";
 import { ComponentProps, FC, ReactNode } from "react";
@@ -9,10 +7,12 @@ import { TOCItemType } from "fumadocs-core/toc";
 
 //#region src/layouts/notebook/page/client.d.ts
 interface DocsPageSlots {
-  toc?: FC<TOCProps>;
+  toc?: {
+    provider: FC<TOCProviderProps>;
+    main?: FC<TOCProps>;
+    popover?: FC<TOCPopoverProps>;
+  };
   container?: FC<ComponentProps<'article'>>;
-  tocPopover?: FC<TOCPopoverProps>;
-  tocProvider?: FC<TOCProviderProps>;
   footer?: FC<FooterProps>;
   breadcrumb?: FC<BreadcrumbProps>;
 }