@fumadocs/base-ui 16.7.1 → 16.7.3

package/dist/components/toc/index.js

@@ -1,4 +1,5 @@
 "use client";
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
 import { cn } from "../../utils/cn.js";
 import { mergeRefs } from "../../utils/merge-refs.js";
 import { createContext, use, useEffect, useEffectEvent, useRef } from "react";
@@ -6,6 +7,14 @@ import { jsx } from "react/jsx-runtime";
 import * as Primitive from "fumadocs-core/toc";
 import { useOnChange } from "fumadocs-core/utils/use-on-change";
 //#region src/components/toc/index.tsx
+var toc_exports = /* @__PURE__ */ __exportAll({
+	TOCProvider: () => TOCProvider,
+	TOCScrollArea: () => TOCScrollArea,
+	TocThumb: () => TocThumb,
+	useActiveAnchor: () => useActiveAnchor,
+	useActiveAnchors: () => useActiveAnchors,
+	useTOCItems: () => useTOCItems
+});
 const TOCContext = createContext([]);
 function useTOCItems() {
 	return use(TOCContext);
@@ -33,17 +42,46 @@ function TOCScrollArea({ ref, className, ...props }) {
 		})
 	});
 }
-function TocThumb({ containerRef, ...props }) {
+function TocThumb({ containerRef, align = "end", ...props }) {
 	const thumbRef = useRef(null);
 	const active = useActiveAnchors();
 	function update(info) {
 		const element = thumbRef.current;
-		if (!element) return;
-		element.style.setProperty("--fd-top", `${info[0]}px`);
-		element.style.setProperty("--fd-height", `${info[1]}px`);
+		const container = containerRef.current;
+		if (!element || !container) return;
+		element.style.setProperty("--fd-top", `${info.top}px`);
+		element.style.setProperty("--fd-height", `${info.height}px`);
+	}
+	function calc(active) {
+		const container = containerRef.current;
+		if (!container || container.clientHeight === 0) return null;
+		if (active.length === 0) return {
+			height: 0,
+			top: 0
+		};
+		let upper = Number.MAX_VALUE;
+		let lower = 0;
+		for (const item of active) {
+			const element = container.querySelector(`a[href="#${item}"]`);
+			if (!element) continue;
+			if (align === "center") {
+				const y = element.offsetTop + element.clientHeight / 2;
+				upper = Math.min(upper, y);
+				lower = Math.max(lower, y);
+			} else {
+				const styles = getComputedStyle(element);
+				upper = Math.min(upper, element.offsetTop + parseFloat(styles.paddingTop));
+				lower = Math.max(lower, element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom));
+			}
+		}
+		return {
+			top: upper,
+			height: lower - upper
+		};
 	}
 	const onPrint = useEffectEvent(() => {
-		if (containerRef.current) update(calc(containerRef.current, active));
+		const result = calc(active);
+		if (result) update(result);
 	});
 	useEffect(() => {
 		if (!containerRef.current) return;
@@ -55,7 +93,8 @@ function TocThumb({ containerRef, ...props }) {
 		};
 	}, [containerRef]);
 	useOnChange(active, () => {
-		if (containerRef.current) update(calc(containerRef.current, active));
+		const result = calc(active);
+		if (result) update(result);
 	});
 	return /* @__PURE__ */ jsx("div", {
 		ref: thumbRef,
@@ -63,17 +102,5 @@ function TocThumb({ containerRef, ...props }) {
 		...props
 	});
 }
-function calc(container, active) {
-	if (active.length === 0 || container.clientHeight === 0) return [0, 0];
-	let upper = Number.MAX_VALUE, lower = 0;
-	for (const item of active) {
-		const element = container.querySelector(`a[href="#${item}"]`);
-		if (!element) continue;
-		const styles = getComputedStyle(element);
-		upper = Math.min(upper, element.offsetTop + parseFloat(styles.paddingTop));
-		lower = Math.max(lower, element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom));
-	}
-	return [upper, lower - upper];
-}
 //#endregion
-export { TOCProvider, TOCScrollArea, TocThumb, useActiveAnchor, useActiveAnchors, useTOCItems };
+export { TOCProvider, TOCScrollArea, TocThumb, toc_exports, useActiveAnchor, useActiveAnchors, useTOCItems };

package/dist/components/ui/collapsible.js

@@ -8,7 +8,7 @@ const CollapsibleTrigger = Collapsible$1.Trigger;
 function CollapsibleContent({ children, className, ...props }) {
 	return /* @__PURE__ */ jsx(Collapsible$1.Panel, {
 		...props,
-		className: (s) => cn("overflow-hidden [&[hidden]:not([hidden='until-found'])]:hidden h-(--collapsible-panel-height) transition-[height] data-[starting-style]:h-0 data-[ending-style]:h-0", typeof className === "function" ? className(s) : className),
+		className: (s) => cn("overflow-hidden [&[hidden]:not([hidden='until-found'])]:hidden h-(--collapsible-panel-height) transition-[height,opacity] data-starting-style:opacity-0 data-starting-style:h-0 data-ending-style:h-0 data-ending-style:opacity-0", typeof className === "function" ? className(s) : className),
 		children
 	});
 }

package/dist/components/ui/navigation-menu.d.ts

@@ -1,18 +1,30 @@
 import * as React$1 from "react";
-import { NavigationMenu } from "@base-ui/react/navigation-menu";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react/navigation-menu";
 import * as _base_ui_react0 from "@base-ui/react";
 
 //#region src/components/ui/navigation-menu.d.ts
-type NavigationMenuContentProps = NavigationMenu.Content.Props;
-type NavigationMenuTriggerProps = NavigationMenu.Trigger.Props;
-declare const NavigationMenuRoot: React$1.ForwardRefExoticComponent<Omit<_base_ui_react0.NavigationMenuRootProps, "ref"> & React$1.RefAttributes<HTMLElement>>;
+type NavigationMenuContentProps = NavigationMenu$1.Content.Props;
+type NavigationMenuTriggerProps = NavigationMenu$1.Trigger.Props;
+declare const NavigationMenu: React$1.ForwardRefExoticComponent<Omit<_base_ui_react0.NavigationMenuRootProps, "ref"> & React$1.RefAttributes<HTMLElement>>;
 declare const NavigationMenuList: React$1.ForwardRefExoticComponent<Omit<_base_ui_react0.NavigationMenuListProps, "ref"> & React$1.RefAttributes<HTMLUListElement>>;
-declare const NavigationMenuItem: React$1.ForwardRefExoticComponent<Omit<Omit<_base_ui_react0.NavigationMenuItemProps, "ref"> & React$1.RefAttributes<HTMLLIElement>, "ref"> & React$1.RefAttributes<HTMLLIElement>>;
-declare const NavigationMenuTrigger: React$1.ForwardRefExoticComponent<Omit<Omit<_base_ui_react0.NavigationMenuTriggerProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
-declare const NavigationMenuContent: React$1.ForwardRefExoticComponent<Omit<Omit<_base_ui_react0.NavigationMenuContentProps, "ref"> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-declare const NavigationMenuLink: React$1.ForwardRefExoticComponent<Omit<Omit<_base_ui_react0.NavigationMenuLinkProps, "ref"> & React$1.RefAttributes<HTMLAnchorElement>, "ref"> & {
-  asChild?: boolean;
-} & React$1.RefAttributes<HTMLAnchorElement>>;
-declare function NavigationMenuViewport(): null;
+declare function NavigationMenuItem({
+  className,
+  children,
+  ...props
+}: React$1.ComponentPropsWithRef<typeof NavigationMenu$1.Item>): react_jsx_runtime0.JSX.Element;
+declare function NavigationMenuTrigger({
+  children,
+  ...props
+}: React$1.ComponentPropsWithRef<typeof NavigationMenu$1.Trigger>): react_jsx_runtime0.JSX.Element;
+declare function NavigationMenuContent({
+  className,
+  ...props
+}: React$1.ComponentPropsWithRef<typeof NavigationMenu$1.Content>): react_jsx_runtime0.JSX.Element;
+declare function NavigationMenuLink({
+  children,
+  ...props
+}: React$1.ComponentPropsWithRef<typeof NavigationMenu$1.Link>): react_jsx_runtime0.JSX.Element;
+declare function NavigationMenuViewport(props: NavigationMenu$1.Positioner.Props): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { NavigationMenuRoot as NavigationMenu, NavigationMenuRoot, NavigationMenuContent, NavigationMenuContentProps, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuTriggerProps, NavigationMenuViewport };
+export { NavigationMenu, NavigationMenuContent, NavigationMenuContentProps, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuTriggerProps, NavigationMenuViewport };

package/dist/components/ui/navigation-menu.js

@@ -1,41 +1,56 @@
 "use client";
 import { cn } from "../../utils/cn.js";
-import * as React$1 from "react";
+import "react";
 import { jsx } from "react/jsx-runtime";
-import { NavigationMenu } from "@base-ui/react/navigation-menu";
+import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react/navigation-menu";
 //#region src/components/ui/navigation-menu.tsx
-const NavigationMenuRoot = NavigationMenu.Root;
-const NavigationMenuList = NavigationMenu.List;
-const NavigationMenuItem = React$1.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(NavigationMenu.Item, {
-	ref,
-	className: (s) => cn("list-none", typeof className === "function" ? className(s) : className),
-	...props,
-	children
-}));
-NavigationMenuItem.displayName = NavigationMenu.Item.displayName;
-const NavigationMenuTrigger = React$1.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx(NavigationMenu.Trigger, {
-	ref,
-	...props,
-	children
-}));
-NavigationMenuTrigger.displayName = NavigationMenu.Trigger.displayName;
-const NavigationMenuContent = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(NavigationMenu.Content, {
-	ref,
-	className: (s) => cn("size-full p-4", "transition-[opacity,transform,translate] duration-(--duration) ease-(--easing)", "data-starting-style:opacity-0 data-ending-style:opacity-0", "data-starting-style:data-[activation-direction=left]:-translate-x-1/2", "data-starting-style:data-[activation-direction=right]:translate-x-1/2", "data-ending-style:data-[activation-direction=left]:translate-x-1/2", "data-ending-style:data-[activation-direction=right]:-translate-x-1/2", typeof className === "function" ? className(s) : className),
-	...props
-}));
-NavigationMenuContent.displayName = NavigationMenu.Content.displayName;
-const NavigationMenuLink = React$1.forwardRef(({ asChild, children, ...props }, ref) => {
-	if (asChild) return children;
-	return /* @__PURE__ */ jsx(NavigationMenu.Link, {
-		ref,
+const NavigationMenu = NavigationMenu$1.Root;
+const NavigationMenuList = NavigationMenu$1.List;
+function NavigationMenuItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Item, {
+		className: (s) => cn("list-none", typeof className === "function" ? className(s) : className),
 		...props,
 		children
 	});
-});
-NavigationMenuLink.displayName = NavigationMenu.Link.displayName;
-function NavigationMenuViewport() {
-	return null;
+}
+function NavigationMenuTrigger({ children, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Trigger, {
+		...props,
+		children
+	});
+}
+function NavigationMenuContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Content, {
+		className: (s) => cn("size-full p-3", "transition-[opacity,transform,translate] duration-(--duration) ease-(--easing)", "data-starting-style:opacity-0 data-ending-style:opacity-0", "data-starting-style:data-[activation-direction=left]:-translate-x-1/2", "data-starting-style:data-[activation-direction=right]:translate-x-1/2", "data-ending-style:data-[activation-direction=left]:translate-x-1/2", "data-ending-style:data-[activation-direction=right]:-translate-x-1/2", typeof className === "function" ? className(s) : className),
+		...props
+	});
+}
+function NavigationMenuLink({ children, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Link, {
+		...props,
+		children
+	});
+}
+function NavigationMenuViewport(props) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Portal, { children: /* @__PURE__ */ jsx(NavigationMenu$1.Positioner, {
+		collisionPadding: {
+			top: 5,
+			bottom: 5,
+			left: 20,
+			right: 20
+		},
+		...props,
+		className: (s) => cn("box-border h-(--positioner-height) w-(--anchor-width) max-w-(--available-width) duration-(--duration) ease-(--easing) before:absolute before:content-[''] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5", typeof props.className === "function" ? props.className(s) : props.className),
+		style: {
+			["--duration"]: "0.35s",
+			["--easing"]: "cubic-bezier(0.22, 1, 0.36, 1)",
+			...props.style
+		},
+		children: /* @__PURE__ */ jsx(NavigationMenu$1.Popup, {
+			className: "data-[ending-style]:easing-[ease] relative border h-(--popup-height) origin-(--transform-origin) rounded-xl bg-fd-popover/80 text-fd-popover-foreground backdrop-blur-md shadow-lg transition-[opacity,transform,width,height,scale,translate] duration-(--duration) ease-(--easing) data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0 w-(--popup-width)",
+			children: /* @__PURE__ */ jsx(NavigationMenu$1.Viewport, { className: "relative size-full overflow-hidden" })
+		})
+	}) });
 }
 //#endregion
-export { NavigationMenuRoot as NavigationMenu, NavigationMenuRoot, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport };
+export { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport };

package/dist/components/ui/popover.d.ts

@@ -1,11 +1,17 @@
 import * as React$1 from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { Popover as Popover$1 } from "@base-ui/react/popover";
 import * as _base_ui_react0 from "@base-ui/react";
 
 //#region src/components/ui/popover.d.ts
 declare const Popover: typeof Popover$1.Root;
 declare const PopoverTrigger: Popover$1.Trigger;
-declare const PopoverContent: React$1.ForwardRefExoticComponent<Omit<Omit<_base_ui_react0.PopoverPopupProps, "ref"> & React$1.RefAttributes<HTMLDivElement>, "ref"> & Pick<_base_ui_react0.PopoverPositionerProps, "sideOffset" | "align"> & React$1.RefAttributes<HTMLDivElement>>;
+declare function PopoverContent({
+  className,
+  align,
+  sideOffset,
+  ...props
+}: React$1.ComponentPropsWithRef<typeof Popover$1.Popup> & Pick<Popover$1.Positioner.Props, 'sideOffset' | 'align'>): react_jsx_runtime0.JSX.Element;
 declare const PopoverClose: React$1.ForwardRefExoticComponent<Omit<_base_ui_react0.PopoverCloseProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { Popover, PopoverClose, PopoverContent, PopoverTrigger };

package/dist/components/ui/popover.js

@@ -1,23 +1,23 @@
 "use client";
 import { cn } from "../../utils/cn.js";
-import * as React$1 from "react";
+import "react";
 import { jsx } from "react/jsx-runtime";
 import { Popover as Popover$1 } from "@base-ui/react/popover";
 //#region src/components/ui/popover.tsx
 const Popover = Popover$1.Root;
 const PopoverTrigger = Popover$1.Trigger;
-const PopoverContent = React$1.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, {
-	align,
-	side: "bottom",
-	sideOffset,
-	className: "z-50",
-	children: /* @__PURE__ */ jsx(Popover$1.Popup, {
-		ref,
-		className: (s) => cn("z-50 origin-(--transform-origin) overflow-y-auto max-h-(--available-height) min-w-[240px] max-w-[98vw] rounded-xl border bg-fd-popover/60 backdrop-blur-lg p-2 text-sm text-fd-popover-foreground shadow-lg focus-visible:outline-none data-[closed]:animate-fd-popover-out data-[open]:animate-fd-popover-in", typeof className === "function" ? className(s) : className),
-		...props
-	})
-}) }));
-PopoverContent.displayName = Popover$1.Popup.displayName;
+function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
+	return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, {
+		align,
+		side: "bottom",
+		sideOffset,
+		className: "z-50",
+		children: /* @__PURE__ */ jsx(Popover$1.Popup, {
+			className: (s) => cn("z-50 origin-(--transform-origin) overflow-y-auto max-h-(--available-height) min-w-[240px] max-w-[98vw] rounded-xl border bg-fd-popover/60 backdrop-blur-lg p-2 text-sm text-fd-popover-foreground shadow-lg focus-visible:outline-none data-[closed]:animate-fd-popover-out data-[open]:animate-fd-popover-in", typeof className === "function" ? className(s) : className),
+			...props
+		})
+	}) });
+}
 const PopoverClose = Popover$1.Close;
 //#endregion
 export { Popover, PopoverClose, PopoverContent, PopoverTrigger };

package/dist/components/ui/scroll-area.d.ts

@@ -1,11 +1,22 @@
 import * as React$1 from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
-import * as _base_ui_react0 from "@base-ui/react";
 
 //#region src/components/ui/scroll-area.d.ts
-declare const ScrollArea: React$1.ForwardRefExoticComponent<Omit<Omit<_base_ui_react0.ScrollAreaRootProps, "ref"> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-declare const ScrollViewport: React$1.ForwardRefExoticComponent<Omit<Omit<_base_ui_react0.ScrollAreaViewportProps, "ref"> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-declare const ScrollBar: React$1.ForwardRefExoticComponent<Omit<Omit<_base_ui_react0.ScrollAreaScrollbarProps, "ref"> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare function ScrollArea({
+  children,
+  ...props
+}: React$1.ComponentPropsWithRef<typeof ScrollArea$1.Root>): react_jsx_runtime0.JSX.Element;
+declare function ScrollViewport({
+  className,
+  children,
+  ...props
+}: React$1.ComponentPropsWithRef<typeof ScrollArea$1.Viewport>): react_jsx_runtime0.JSX.Element;
+declare function ScrollBar({
+  className,
+  orientation,
+  ...props
+}: React$1.ComponentPropsWithRef<typeof ScrollArea$1.Scrollbar>): react_jsx_runtime0.JSX.Element;
 type ScrollAreaProps = ScrollArea$1.Root.Props;
 //#endregion
 export { ScrollArea, ScrollAreaProps, ScrollBar, ScrollViewport };

package/dist/components/ui/scroll-area.js

@@ -1,33 +1,32 @@
 import { cn } from "../../utils/cn.js";
-import * as React$1 from "react";
+import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
 //#region src/components/ui/scroll-area.tsx
-const ScrollArea = React$1.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(ScrollArea$1.Root, {
-	ref,
-	className: (s) => cn("overflow-hidden", typeof className === "function" ? className(s) : className),
-	...props,
-	children: [
-		children,
-		/* @__PURE__ */ jsx(ScrollArea$1.Corner, {}),
-		/* @__PURE__ */ jsx(ScrollBar, { orientation: "vertical" })
-	]
-}));
-ScrollArea.displayName = ScrollArea$1.Root.displayName;
-const ScrollViewport = React$1.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(ScrollArea$1.Viewport, {
-	ref,
-	className: (s) => cn("size-full rounded-[inherit]", typeof className === "function" ? className(s) : className),
-	...props,
-	children
-}));
-ScrollViewport.displayName = ScrollArea$1.Viewport.displayName;
-const ScrollBar = React$1.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(ScrollArea$1.Scrollbar, {
-	ref,
-	orientation,
-	className: (s) => cn("flex select-none transition-opacity", !s.hovering && "opacity-0", orientation === "vertical" && "h-full w-1.5", orientation === "horizontal" && "h-1.5 flex-col", typeof className === "function" ? className(s) : className),
-	...props,
-	children: /* @__PURE__ */ jsx(ScrollArea$1.Thumb, { className: "relative flex-1 rounded-full bg-fd-border" })
-}));
-ScrollBar.displayName = ScrollArea$1.Scrollbar.displayName;
+function ScrollArea({ children, ...props }) {
+	return /* @__PURE__ */ jsxs(ScrollArea$1.Root, {
+		...props,
+		children: [
+			children,
+			/* @__PURE__ */ jsx(ScrollArea$1.Corner, {}),
+			/* @__PURE__ */ jsx(ScrollBar, { orientation: "vertical" })
+		]
+	});
+}
+function ScrollViewport({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(ScrollArea$1.Viewport, {
+		className: (s) => cn("size-full rounded-[inherit]", typeof className === "function" ? className(s) : className),
+		...props,
+		children
+	});
+}
+function ScrollBar({ className, orientation = "vertical", ...props }) {
+	return /* @__PURE__ */ jsx(ScrollArea$1.Scrollbar, {
+		orientation,
+		className: (s) => cn("flex select-none transition-opacity", !s.hovering && "opacity-0", orientation === "vertical" && "h-full w-1.5", orientation === "horizontal" && "h-1.5 flex-col", typeof className === "function" ? className(s) : className),
+		...props,
+		children: /* @__PURE__ */ jsx(ScrollArea$1.Thumb, { className: "relative flex-1 rounded-full bg-fd-border" })
+	});
+}
 //#endregion
 export { ScrollArea, ScrollBar, ScrollViewport };

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

@@ -5,8 +5,9 @@ import { DocsLayoutProps } from "./index.js";
 import { ComponentProps, FC } from "react";
 //#region src/layouts/docs/client.d.ts
 interface DocsSlots extends BaseSlots {
-  container?: FC<ComponentProps<'div'>>;
-  sidebar?: {
+  container: FC<ComponentProps<'div'>>;
+  header: FC<ComponentProps<'header'>>;
+  sidebar: {
     provider: FC<SidebarProviderProps>;
     root: FC<SidebarProps>;
     trigger: FC<ComponentProps<'button'>>;
@@ -16,7 +17,6 @@ interface DocsSlots extends BaseSlots {
       setOpen: (v: boolean) => void;
     };
   };
-  header?: FC<ComponentProps<'header'>>;
 }
 interface SlotsProps extends BaseSlotsProps<DocsLayoutProps> {
   tabs: LayoutTab[];

package/dist/layouts/docs/client.js

@@ -9,7 +9,7 @@ import { Header } from "./slots/header.js";
 import { Container } from "./slots/container.js";
 import { createContext, use, useMemo } from "react";
 import { usePathname } from "fumadocs-core/framework";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import Link from "fumadocs-core/link";
 //#region src/layouts/docs/client.tsx
 const { useProvider } = baseSlots({ useProps() {
@@ -25,14 +25,14 @@ function useDocsLayout() {
 	return context;
 }
 function LayoutBody(props) {
-	const { nav: { enabled: navEnabled = true, transparentMode: navTransparentMode = "none" } = {}, sidebar: { defaultOpenLevel, prefetch, ...sidebarProps } = {}, slots: defaultSlots, tabs, tabMode = "auto", tree, containerProps, children } = props;
+	const { nav: { enabled: navEnabled = true, transparentMode: navTransparentMode = "none" } = {}, sidebar: { enabled: sidebarEnabled = true, defaultOpenLevel, prefetch, ...sidebarProps } = {}, slots: defaultSlots, tabs, tabMode = "auto", tree, containerProps, children } = props;
 	const isTop = useIsScrollTop({ enabled: navTransparentMode === "top" }) ?? true;
 	const isNavTransparent = navTransparentMode === "top" ? isTop : navTransparentMode === "always";
 	const { baseSlots, baseProps } = useProvider(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,
@@ -41,24 +41,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 }),
-		tabMode === "top" && tabs.length > 0 && /* @__PURE__ */ jsx(LayoutTabs, {
-			tabs,
-			className: "z-10 bg-fd-background border-b px-6 pt-3 xl:px-8 max-md:hidden"
-		}),
-		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, {
@@ -72,7 +54,22 @@ 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, {}),
+						sidebarEnabled && /* @__PURE__ */ jsx(slots.sidebar.root, { ...sidebarProps }),
+						tabMode === "top" && tabs.length > 0 && /* @__PURE__ */ jsx(LayoutTabs, {
+							tabs,
+							className: "z-10 bg-fd-background border-b px-6 pt-3 xl:px-8 max-md:hidden"
+						}),
+						children
+					]
+				})
+			})
 		})
 	});
 }

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

@@ -12,7 +12,7 @@ interface DocsLayoutProps extends BaseLayoutProps {
   tabMode?: 'top' | 'auto';
   tabs?: LayoutTab[] | GetLayoutTabsOptions | false;
   containerProps?: HTMLAttributes<HTMLDivElement>;
-  slots?: DocsSlots;
+  slots?: Partial<DocsSlots>;
 }
 interface SidebarOptions extends SidebarProps, SidebarProviderProps {
   enabled?: boolean;

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

@@ -1,11 +1,93 @@
+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 { MarkdownCopyButton, ViewOptionsPopover } from "../../shared/page-actions.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/docs/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 };