@fumadocs/base-ui 16.7.1 → 16.7.3

package/dist/layouts/home/navbar.d.ts

@@ -1,11 +1,9 @@
-import { NavigationMenuContentProps, NavigationMenuTriggerProps } from "../../components/ui/navigation-menu.js";
-import * as react from "react";
+import { NavigationMenuContentProps, NavigationMenuItem, NavigationMenuTriggerProps } from "../../components/ui/navigation-menu.js";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { LinkProps } from "fumadocs-core/link";
-import * as _base_ui_react0 from "@base-ui/react";
 
 //#region src/layouts/home/navbar.d.ts
-declare const NavbarMenu: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react0.NavigationMenuItemProps, "ref"> & react.RefAttributes<HTMLLIElement>, "ref"> & react.RefAttributes<HTMLLIElement>>;
+declare const NavbarMenu: typeof NavigationMenuItem;
 declare function NavbarMenuContent(props: NavigationMenuContentProps): react_jsx_runtime0.JSX.Element;
 declare function NavbarMenuTrigger(props: NavigationMenuTriggerProps): react_jsx_runtime0.JSX.Element;
 declare function NavbarMenuLink(props: LinkProps): react_jsx_runtime0.JSX.Element;

package/dist/layouts/home/navbar.js

@@ -10,7 +10,7 @@ function NavbarMenuContent(props) {
 	const { className, ...rest } = props;
 	return /* @__PURE__ */ jsx(NavigationMenuContent, {
 		...rest,
-		className: (state) => cn("grid grid-cols-1 gap-2 p-4 md:grid-cols-2 lg:grid-cols-3", typeof className === "function" ? className(state) : className),
+		className: (state) => cn("grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3", typeof className === "function" ? className(state) : className),
 		children: props.children
 	});
 }
@@ -23,14 +23,11 @@ function NavbarMenuTrigger(props) {
 	});
 }
 function NavbarMenuLink(props) {
-	return /* @__PURE__ */ jsx(NavigationMenuLink, {
-		asChild: true,
-		children: /* @__PURE__ */ jsx(Link, {
-			...props,
-			className: cn("flex flex-col gap-2 rounded-lg border bg-fd-card p-3 transition-colors hover:bg-fd-accent/80 hover:text-fd-accent-foreground", props.className),
-			children: props.children
-		})
-	});
+	return /* @__PURE__ */ jsx(NavigationMenuLink, { render: /* @__PURE__ */ jsx(Link, {
+		...props,
+		className: cn("flex flex-col gap-2 rounded-lg border bg-fd-card p-3 transition-colors hover:bg-fd-accent/80 hover:text-fd-accent-foreground", props.className),
+		children: props.children
+	}) });
 }
 //#endregion
 export { NavbarMenu, NavbarMenuContent, NavbarMenuLink, NavbarMenuTrigger };

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

@@ -1,3 +1,4 @@
+"use client";
 import { cn } from "../../../utils/cn.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/layouts/home/slots/container.tsx

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

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

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

@@ -1,12 +1,14 @@
 "use client";
 import { cn } from "../../../utils/cn.js";
 import { buttonVariants } from "../../../components/ui/button.js";
+import { mergeRefs } from "../../../utils/merge-refs.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../components/ui/collapsible.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 { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport } from "../../../components/ui/navigation-menu.js";
 import { useHomeLayout } from "../index.js";
-import { Fragment, useState } from "react";
+import { Fragment, useEffect, useEffectEvent, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import Link from "fumadocs-core/link";
 import { ChevronDown, Languages } from "lucide-react";
@@ -28,10 +30,26 @@ const navItemVariants = cva("[&_svg]:size-4", {
 });
 function Header(props) {
 	const { navItems, menuItems, slots, props: { nav } } = useHomeLayout();
-	if (nav?.component) return nav.component;
-	return /* @__PURE__ */ jsxs(HeaderNavigationMenu, {
-		transparentMode: nav?.transparentMode,
-		...props,
+	const headerRef = useRef(null);
+	const listRef = useRef(null);
+	const [open, setOpen] = useState(false);
+	const transparentMode = nav?.transparentMode ?? "none";
+	const isTop = useIsScrollTop({ enabled: transparentMode === "top" }) ?? true;
+	const isNavTransparent = transparentMode === "top" ? isTop : transparentMode === "always";
+	const onClick = useEffectEvent((e) => {
+		const element = headerRef.current;
+		if (!open || !element) return;
+		if (element !== e.target && !element.contains(e.target)) setOpen(false);
+	});
+	useEffect(() => {
+		window.addEventListener("click", onClick);
+		return () => {
+			window.removeEventListener("click", onClick);
+		};
+	}, []);
+	const list = /* @__PURE__ */ jsxs(NavigationMenuList, {
+		ref: listRef,
+		className: "flex h-14 w-full mx-auto max-w-(--fd-layout-width) items-center px-4",
 		children: [
 			slots.navTitle && /* @__PURE__ */ jsx(slots.navTitle, { className: "inline-flex items-center gap-2.5 font-semibold" }),
 			nav?.children,
@@ -45,12 +63,12 @@ function Header(props) {
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex flex-row items-center justify-end gap-1.5 flex-1 max-lg:hidden",
 				children: [
-					slots.searchTrigger?.full && /* @__PURE__ */ jsx(slots.searchTrigger.full, {
+					slots.searchTrigger && /* @__PURE__ */ jsx(slots.searchTrigger.full, {
 						hideIfDisabled: true,
 						className: "w-full rounded-full ps-2.5 max-w-[240px]"
 					}),
 					slots.themeSwitch && /* @__PURE__ */ jsx(slots.themeSwitch, {}),
-					slots.languageSelect?.root && /* @__PURE__ */ jsx(slots.languageSelect.root, { children: /* @__PURE__ */ jsx(Languages, { className: "size-5" }) }),
+					slots.languageSelect && /* @__PURE__ */ jsx(slots.languageSelect.root, { children: /* @__PURE__ */ jsx(Languages, { className: "size-5" }) }),
 					/* @__PURE__ */ jsx("ul", {
 						className: "flex flex-row gap-2 items-center empty:hidden",
 						children: navItems.filter(isSecondary).map((item, i) => /* @__PURE__ */ jsx(NavigationMenuLinkItem, {
@@ -62,72 +80,76 @@ function Header(props) {
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex flex-row items-center ms-auto -me-1.5 lg:hidden",
-				children: [slots.searchTrigger?.sm && /* @__PURE__ */ jsx(slots.searchTrigger.sm, {
+				children: [slots.searchTrigger && /* @__PURE__ */ jsx(slots.searchTrigger.sm, {
 					hideIfDisabled: true,
 					className: "p-2"
-				}), /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(NavigationMenuTrigger, {
+				}), /* @__PURE__ */ jsx(CollapsibleTrigger, {
 					"aria-label": "Toggle Menu",
 					className: cn(buttonVariants({
 						size: "icon",
-						color: "ghost",
-						className: "group [&_svg]:size-5.5"
+						color: "ghost"
 					})),
-					onPointerMove: nav?.enableHoverToOpen ? void 0 : (e) => e.preventDefault(),
-					children: /* @__PURE__ */ jsx(ChevronDown, { className: "transition-transform duration-300 group-data-[state=open]:rotate-180" })
-				}), /* @__PURE__ */ jsxs(NavigationMenuContent, {
-					className: "flex flex-col p-4 sm:flex-row sm:items-center sm:justify-end",
-					children: [menuItems.filter((item) => !isSecondary(item)).map((item, i) => /* @__PURE__ */ jsx(MobileNavigationMenuLinkItem, {
-						item,
-						className: "sm:hidden"
-					}, i)), /* @__PURE__ */ jsxs("div", {
-						className: "-ms-1.5 flex flex-row items-center gap-2 max-sm:mt-2",
-						children: [
-							menuItems.filter(isSecondary).map((item, i) => /* @__PURE__ */ jsx(MobileNavigationMenuLinkItem, {
-								item,
-								className: cn(item.type === "icon" && "-mx-1 first:ms-0")
-							}, i)),
-							/* @__PURE__ */ jsx("div", {
-								role: "separator",
-								className: "flex-1"
-							}),
-							slots.languageSelect?.root && /* @__PURE__ */ jsxs(slots.languageSelect.root, { children: [
-								/* @__PURE__ */ jsx(Languages, { className: "size-5" }),
-								slots.languageSelect.text && /* @__PURE__ */ jsx(slots.languageSelect.text, {}),
-								/* @__PURE__ */ jsx(ChevronDown, { className: "size-3 text-fd-muted-foreground" })
-							] }),
-							slots.themeSwitch && /* @__PURE__ */ jsx(slots.themeSwitch, {})
-						]
-					})]
-				})] }) })]
+					onPointerEnter: nav?.enableHoverToOpen ? () => {
+						setOpen(true);
+					} : void 0,
+					children: /* @__PURE__ */ jsx(ChevronDown, { className: cn("transition-transform", open && "rotate-180") })
+				})]
 			})
 		]
 	});
+	return /* @__PURE__ */ jsx(Collapsible, {
+		open,
+		onOpenChange: setOpen,
+		render: /* @__PURE__ */ jsx("header", {
+			id: "nd-nav",
+			...props,
+			ref: mergeRefs(headerRef, props.ref),
+			className: cn("sticky h-14 top-0 z-40", props.className),
+			children: /* @__PURE__ */ jsxs(NavigationMenu, {
+				className: (s) => cn("backdrop-blur-lg border-b transition-[box-shadow,background-color,border-radius]", open && "max-lg:shadow-lg max-lg:rounded-b-2xl", (open || !isNavTransparent || s.open) && "bg-fd-background/80"),
+				children: [
+					list,
+					/* @__PURE__ */ jsx(CollapsibleContent, {
+						className: "mx-auto max-w-(--fd-layout-width) lg:hidden",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col pt-2 p-4 sm:flex-row sm:items-center sm:justify-end",
+							children: [menuItems.filter((item) => !isSecondary(item)).map((item, i) => /* @__PURE__ */ jsx(MobileNavigationMenuLinkItem, {
+								item,
+								className: "sm:hidden"
+							}, i)), /* @__PURE__ */ jsxs("div", {
+								className: "-ms-1.5 flex flex-row items-center gap-2 max-sm:mt-2",
+								children: [
+									menuItems.filter(isSecondary).map((item, i) => /* @__PURE__ */ jsx(MobileNavigationMenuLinkItem, {
+										item,
+										className: cn(item.type === "icon" && "-mx-1 first:ms-0")
+									}, i)),
+									/* @__PURE__ */ jsx("div", {
+										role: "separator",
+										className: "flex-1"
+									}),
+									slots.languageSelect && /* @__PURE__ */ jsxs(slots.languageSelect.root, { children: [
+										/* @__PURE__ */ jsx(Languages, { className: "size-5" }),
+										slots.languageSelect.text && /* @__PURE__ */ jsx(slots.languageSelect.text, {}),
+										/* @__PURE__ */ jsx(ChevronDown, { className: "size-3 text-fd-muted-foreground" })
+									] }),
+									slots.themeSwitch && /* @__PURE__ */ jsx(slots.themeSwitch, {})
+								]
+							})]
+						})
+					}),
+					/* @__PURE__ */ jsx(NavigationMenuViewport, {
+						side: "bottom",
+						anchor: listRef
+					})
+				]
+			})
+		})
+	});
 }
 function isSecondary(item) {
 	if ("secondary" in item && item.secondary != null) return item.secondary;
 	return item.type === "icon";
 }
-function HeaderNavigationMenu({ transparentMode = "none", ...props }) {
-	const [value, setValue] = useState("");
-	const isTop = useIsScrollTop({ enabled: transparentMode === "top" }) ?? true;
-	const isTransparent = transparentMode === "top" ? isTop : transparentMode === "always";
-	return /* @__PURE__ */ jsx("header", {
-		id: "nd-nav",
-		...props,
-		className: cn("sticky h-14 top-0 z-40", props.className),
-		children: /* @__PURE__ */ jsx(NavigationMenuRoot, {
-			value,
-			onValueChange: setValue,
-			children: /* @__PURE__ */ jsxs("div", {
-				className: cn("backdrop-blur-lg border-b transition-colors *:mx-auto *:max-w-(--fd-layout-width)", value.length > 0 && "max-lg:shadow-lg max-lg:rounded-b-2xl", (!isTransparent || value.length > 0) && "bg-fd-background/80"),
-				children: [/* @__PURE__ */ jsx(NavigationMenuList, {
-					className: "flex h-14 w-full items-center px-4",
-					children: props.children
-				}), /* @__PURE__ */ jsx(NavigationMenuViewport, {})]
-			})
-		})
-	});
-}
 function NavigationMenuLinkItem({ item, ...props }) {
 	if (item.type === "custom") return item.children;
 	if (item.type === "menu") {
@@ -137,26 +159,23 @@ function NavigationMenuLinkItem({ item, ...props }) {
 				className: "w-fit rounded-md border bg-fd-muted p-1 [&_svg]:size-4",
 				children: child.icon
 			}) : null, ...rest } = child.menu ?? {};
-			return /* @__PURE__ */ jsx(NavigationMenuLink, {
-				asChild: true,
-				children: /* @__PURE__ */ jsx(Link, {
-					href: child.url,
-					external: child.external,
-					...rest,
-					className: cn("flex flex-col gap-2 rounded-lg border bg-fd-card p-3 transition-colors hover:bg-fd-accent/80 hover:text-fd-accent-foreground", rest.className),
-					children: rest.children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-						banner,
-						/* @__PURE__ */ jsx("p", {
-							className: "text-base font-medium",
-							children: child.text
-						}),
-						/* @__PURE__ */ jsx("p", {
-							className: "text-sm text-fd-muted-foreground empty:hidden",
-							children: child.description
-						})
-					] })
-				})
-			}, `${j}-${child.url}`);
+			return /* @__PURE__ */ jsx(NavigationMenuLink, { render: /* @__PURE__ */ jsx(Link, {
+				href: child.url,
+				external: child.external,
+				...rest,
+				className: cn("flex flex-col gap-2 rounded-lg border bg-fd-card p-3 transition-colors hover:bg-fd-accent/80 hover:text-fd-accent-foreground", rest.className),
+				children: rest.children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					banner,
+					/* @__PURE__ */ jsx("p", {
+						className: "text-base font-medium",
+						children: child.text
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-sm text-fd-muted-foreground empty:hidden",
+						children: child.description
+					})
+				] })
+			}) }, `${j}-${child.url}`);
 		});
 		return /* @__PURE__ */ jsxs(NavigationMenuItem, {
 			...props,
@@ -168,22 +187,19 @@ function NavigationMenuLinkItem({ item, ...props }) {
 					children: item.text
 				}) : item.text
 			}), /* @__PURE__ */ jsx(NavigationMenuContent, {
-				className: "grid grid-cols-1 gap-2 p-4 md:grid-cols-2 lg:grid-cols-3",
+				className: "grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3",
 				children
 			})]
 		});
 	}
 	return /* @__PURE__ */ jsx(NavigationMenuItem, {
 		...props,
-		children: /* @__PURE__ */ jsx(NavigationMenuLink, {
-			asChild: true,
-			children: /* @__PURE__ */ jsx(LinkItem, {
-				item,
-				"aria-label": item.type === "icon" ? item.label : void 0,
-				className: cn(navItemVariants({ variant: item.type })),
-				children: item.type === "icon" ? item.icon : item.text
-			})
-		})
+		children: /* @__PURE__ */ jsx(NavigationMenuLink, { render: /* @__PURE__ */ jsx(LinkItem, {
+			item,
+			"aria-label": item.type === "icon" ? item.label : void 0,
+			className: cn(navItemVariants({ variant: item.type })),
+			children: item.type === "icon" ? item.icon : item.text
+		}) })
 	});
 }
 function MobileNavigationMenuLinkItem({ item, ...props }) {
@@ -197,35 +213,29 @@ function MobileNavigationMenuLinkItem({ item, ...props }) {
 			className: cn("mb-4 flex flex-col", props.className),
 			children: [/* @__PURE__ */ jsx("p", {
 				className: "mb-1 text-sm text-fd-muted-foreground",
-				children: item.url ? /* @__PURE__ */ jsx(NavigationMenuLink, {
-					asChild: true,
-					children: /* @__PURE__ */ jsx(Link, {
-						href: item.url,
-						external: item.external,
-						children: header
-					})
+				children: item.url ? /* @__PURE__ */ jsx(Link, {
+					href: item.url,
+					external: item.external,
+					children: header
 				}) : header
 			}), item.items.map((child, i) => /* @__PURE__ */ jsx(MobileNavigationMenuLinkItem, { item: child }, i))]
 		});
 	}
-	return /* @__PURE__ */ jsx(NavigationMenuLink, {
-		asChild: true,
-		children: /* @__PURE__ */ jsxs(LinkItem, {
-			item,
-			className: cn({
-				main: "inline-flex items-center gap-2 py-1.5 transition-colors hover:text-fd-popover-foreground/50 data-[active=true]:font-medium data-[active=true]:text-fd-primary [&_svg]:size-4",
-				icon: buttonVariants({
-					size: "icon",
-					color: "ghost"
-				}),
-				button: buttonVariants({
-					color: "secondary",
-					className: "gap-1.5 [&_svg]:size-4"
-				})
-			}[item.type ?? "main"], props.className),
-			"aria-label": item.type === "icon" ? item.label : void 0,
-			children: [item.icon, item.type === "icon" ? void 0 : item.text]
-		})
+	return /* @__PURE__ */ jsxs(LinkItem, {
+		item,
+		className: cn({
+			main: "inline-flex items-center gap-2 py-1.5 transition-colors hover:text-fd-popover-foreground/50 data-[active=true]:font-medium data-[active=true]:text-fd-primary [&_svg]:size-4",
+			icon: buttonVariants({
+				size: "icon",
+				color: "ghost"
+			}),
+			button: buttonVariants({
+				color: "secondary",
+				className: "gap-1.5 [&_svg]:size-4"
+			})
+		}[item.type ?? "main"], props.className),
+		"aria-label": item.type === "icon" ? item.label : void 0,
+		children: [item.icon, item.type === "icon" ? void 0 : item.text]
 	});
 }
 //#endregion

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

@@ -5,9 +5,9 @@ import { DocsLayoutProps } from "./index.js";
 import { ComponentProps, FC } from "react";
 //#region src/layouts/notebook/client.d.ts
 interface DocsSlots extends BaseSlots {
-  container?: FC<ComponentProps<'div'>>;
-  header?: FC<ComponentProps<'header'>>;
-  sidebar?: {
+  container: FC<ComponentProps<'div'>>;
+  header: FC<ComponentProps<'header'>>;
+  sidebar: {
     provider: FC<SidebarProviderProps>;
     root: FC<SidebarProps>;
     trigger: FC<ComponentProps<'button'>>;

package/dist/layouts/notebook/client.js

@@ -7,7 +7,7 @@ import { Container } from "./slots/container.js";
 import { Sidebar, SidebarCollapseTrigger, SidebarProvider, SidebarTrigger, useSidebar } from "./slots/sidebar.js";
 import { Header } from "./slots/header.js";
 import { createContext, use } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/layouts/notebook/client.tsx
 const { useProvider } = baseSlots({ useProps() {
 	return useNotebookLayout().props;
@@ -26,7 +26,7 @@ function LayoutBody(props) {
 	const linkItems = useLinkItems(props);
 	const slots = {
 		...baseSlots,
-		header: navEnabled ? defaultSlots?.header ?? Header : void 0,
+		header: defaultSlots?.header ?? Header,
 		container: defaultSlots?.container ?? Container,
 		sidebar: defaultSlots?.sidebar ?? {
 			provider: SidebarProvider,
@@ -36,20 +36,6 @@ function LayoutBody(props) {
 			useSidebar
 		}
 	};
-	let content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		slots.header && /* @__PURE__ */ jsx(slots.header, {}),
-		slots.sidebar && /* @__PURE__ */ jsx(slots.sidebar.root, { ...sidebarProps }),
-		children
-	] });
-	if (slots.container) content = /* @__PURE__ */ jsx(slots.container, {
-		...containerProps,
-		children: content
-	});
-	if (slots.sidebar) content = /* @__PURE__ */ jsx(slots.sidebar.provider, {
-		defaultOpenLevel,
-		prefetch,
-		children: content
-	});
 	return /* @__PURE__ */ jsx(TreeContextProvider, {
 		tree,
 		children: /* @__PURE__ */ jsx(LayoutContext, {
@@ -64,7 +50,18 @@ function LayoutBody(props) {
 				slots,
 				...linkItems
 			},
-			children: content
+			children: /* @__PURE__ */ jsx(slots.sidebar.provider, {
+				defaultOpenLevel,
+				prefetch,
+				children: /* @__PURE__ */ jsxs(slots.container, {
+					...containerProps,
+					children: [
+						navEnabled && /* @__PURE__ */ jsx(slots.header, {}),
+						/* @__PURE__ */ jsx(slots.sidebar.root, { ...sidebarProps }),
+						children
+					]
+				})
+			})
 		})
 	});
 }

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

@@ -13,7 +13,7 @@ interface DocsLayoutProps extends BaseLayoutProps {
   sidebar?: SidebarOptions;
   nav?: Nav;
   containerProps?: HTMLAttributes<HTMLDivElement>;
-  slots?: DocsSlots;
+  slots?: Partial<DocsSlots>;
 }
 interface Nav extends NavOptions {
   mode?: 'top' | 'auto';

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

@@ -1,11 +1,93 @@
 import { MarkdownCopyButton, ViewOptionsPopover } from "../../shared/page-actions.js";
+import { TOCPopoverProps, TOCProps, TOCProviderProps } from "./slots/toc.js";
 import { Footer, FooterProps } from "./slots/footer.js";
 import { Breadcrumb, BreadcrumbProps } from "./slots/breadcrumb.js";
-import { DocsPage, DocsPageProps, DocsPageSlots, PageLastUpdate, useDocsPage } from "./client.js";
-import { ComponentProps } from "react";
+import { ComponentProps, FC, ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { TOCItemType } from "fumadocs-core/toc";
 
 //#region src/layouts/notebook/page/index.d.ts
+interface DocsPageProps extends ComponentProps<'article'> {
+  toc?: TOCItemType[];
+  /**
+   * Extend the page to fill all available space
+   *
+   * @defaultValue false
+   */
+  full?: boolean;
+  slots?: Partial<DocsPageSlots>;
+  footer?: FooterOptions;
+  breadcrumb?: BreadcrumbOptions;
+  tableOfContent?: TableOfContentOptions;
+  tableOfContentPopover?: TableOfContentPopoverOptions;
+}
+interface BreadcrumbOptions extends BreadcrumbProps {
+  enabled?: boolean;
+  /**
+   * @deprecated use `slots.breadcrumb` instead.
+   */
+  component?: ReactNode;
+}
+interface FooterOptions extends FooterProps {
+  enabled?: boolean;
+  /**
+   * @deprecated use `slots.footer` instead.
+   */
+  component?: ReactNode;
+}
+interface TableOfContentOptions extends Pick<TOCProviderProps, 'single'>, TOCProps {
+  enabled?: boolean;
+  /**
+   * @deprecated use `slots.toc` instead.
+   */
+  component?: ReactNode;
+}
+interface TableOfContentPopoverOptions extends TOCPopoverProps {
+  enabled?: boolean;
+  /**
+   * @deprecated use `slots.tocPopover` instead.
+   */
+  component?: ReactNode;
+}
+interface DocsPageSlots {
+  toc: {
+    provider: FC<TOCProviderProps>;
+    main: FC<TOCProps>;
+    popover: FC<TOCPopoverProps>;
+  };
+  container: FC<ComponentProps<'article'>>;
+  footer: FC<FooterProps>;
+  breadcrumb: FC<BreadcrumbProps>;
+}
+type PageSlotsProps = Pick<DocsPageProps, 'full'>;
+declare function useDocsPage(): {
+  props: PageSlotsProps;
+  slots: DocsPageSlots;
+};
+declare function DocsPage({
+  tableOfContent: {
+    enabled: tocEnabled,
+    single,
+    ...tocProps
+  },
+  tableOfContentPopover: {
+    enabled: tocPopoverEnabled,
+    ...tocPopoverProps
+  },
+  breadcrumb: {
+    enabled: breadcrumbEnabled,
+    ...breadcrumb
+  },
+  footer: {
+    enabled: footerEnabled,
+    ...footer
+  },
+  full,
+  toc,
+  slots: defaultSlots,
+  children,
+  ...containerProps
+}: DocsPageProps): react_jsx_runtime0.JSX.Element;
 declare function EditOnGitHub(props: ComponentProps<'a'>): react_jsx_runtime0.JSX.Element;
 /**
  * Add typography styles
@@ -25,5 +107,11 @@ declare function DocsTitle({
   className,
   ...props
 }: ComponentProps<'h1'>): react_jsx_runtime0.JSX.Element;
+declare function PageLastUpdate({
+  date: value,
+  ...props
+}: Omit<ComponentProps<'p'>, 'children'> & {
+  date: Date;
+}): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { type BreadcrumbProps, DocsBody, DocsDescription, DocsPage, type DocsPageProps, type DocsPageSlots, DocsTitle, EditOnGitHub, type FooterProps, MarkdownCopyButton, Breadcrumb as PageBreadcrumb, Footer as PageFooter, PageLastUpdate, ViewOptionsPopover, useDocsPage };
+export { type BreadcrumbProps, DocsBody, DocsDescription, DocsPage, DocsPageProps, DocsTitle, EditOnGitHub, type FooterProps, MarkdownCopyButton, Breadcrumb as PageBreadcrumb, Footer as PageFooter, PageLastUpdate, ViewOptionsPopover, useDocsPage };