@fumadocs/base-ui 16.7.2 → 16.7.3

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

@@ -6,8 +6,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "../../../components/ui/
 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 { 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, SidebarViewport, 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";
@@ -32,10 +31,13 @@ function SidebarProvider(props) {
 function Sidebar({ footer, banner, collapsible = true, components, ...rest }) {
 	const { menuItems, slots, props: { tabs, nav, tabMode } } = useDocsLayout();
 	const iconLinks = menuItems.filter((item) => item.type === "icon");
-	const viewport = /* @__PURE__ */ jsxs(SidebarViewport, { children: [menuItems.filter((v) => v.type !== "icon").map((item, i, list) => /* @__PURE__ */ jsx(SidebarLinkItem, {
-		item,
-		className: cn(i === list.length - 1 && "mb-4")
-	}, i)), /* @__PURE__ */ jsx(SidebarPageTree, { ...components })] });
+	const viewport = /* @__PURE__ */ jsx(SidebarViewport, { children: /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-0.5",
+		children: [menuItems.filter((v) => v.type !== "icon").map((item, i, list) => /* @__PURE__ */ jsx(SidebarLinkItem, {
+			item,
+			className: cn(i === list.length - 1 && "mb-4")
+		}, i)), /* @__PURE__ */ jsx(SidebarPageTree, { ...components })]
+	}) });
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(SidebarContent, {
 		...rest,
 		children: [
@@ -132,18 +134,6 @@ function SidebarFolder(props) {
 function SidebarCollapseTrigger(props) {
 	return /* @__PURE__ */ jsx(SidebarCollapseTrigger$1, { ...props });
 }
-function SidebarViewport(props) {
-	const { className, ...rest } = props;
-	return /* @__PURE__ */ jsx(ScrollArea, {
-		...rest,
-		className: (state) => cn("min-h-0 flex-1", typeof className === "function" ? className(state) : className),
-		children: /* @__PURE__ */ jsx(ScrollViewport, {
-			className: "*:flex! *:flex-col! *:gap-0.5! p-4 overscroll-contain",
-			style: { maskImage: "linear-gradient(to bottom, transparent, white 12px, white calc(100% - 12px), transparent)" },
-			children: props.children
-		})
-	});
-}
 function SidebarTrigger(props) {
 	return /* @__PURE__ */ jsx(SidebarTrigger$1, { ...props });
 }
@@ -245,7 +235,7 @@ function SidebarFolderLink({ className, style, ...props }) {
 function SidebarFolderContent({ className, children, ...props }) {
 	const depth = useFolderDepth();
 	return /* @__PURE__ */ jsx(SidebarFolderContent$1, {
-		className: (state) => cn("relative flex flex-col gap-0.5 *:first:mt-0.5", depth === 1 && "before:content-[''] before:absolute before:w-px before:inset-y-1 before:bg-fd-border before:start-2.5", typeof className === "function" ? className(state) : className),
+		className: (state) => cn("relative flex flex-col gap-0.5 pt-0.5", depth === 1 && "before:content-[''] before:absolute before:w-px before:inset-y-1 before:bg-fd-border before:start-2.5", typeof className === "function" ? className(state) : className),
 		...props,
 		children
 	});

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

@@ -18,13 +18,13 @@ const { TOCProvider } = toc_exports;
 function TOC({ container, trigger, content, header, footer, style }) {
 	return /* @__PURE__ */ jsxs(PageTOCPopover, {
 		...container,
-		children: [/* @__PURE__ */ jsxs(PageTOCPopoverContent, {
+		children: [/* @__PURE__ */ jsx(PageTOCPopoverContent, {
 			...content,
-			children: [
+			children: /* @__PURE__ */ jsxs("div", { children: [
 				header,
 				/* @__PURE__ */ jsx(TOCScrollArea, { children: style === "clerk" ? /* @__PURE__ */ jsx(TOCItems$1, {}) : /* @__PURE__ */ jsx(TOCItems, {}) }),
 				footer
-			]
+			] })
 		}), /* @__PURE__ */ jsx(PageTOCPopoverTrigger, { ...trigger })]
 	});
 }

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

@@ -1,8 +1,7 @@
 "use client";
 import { cn } from "../../../utils/cn.js";
 import { mergeRefs } from "../../../utils/merge-refs.js";
-import { ScrollArea, ScrollViewport } from "../../../components/ui/scroll-area.js";
-import { 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, base_exports, useFolder, useFolderDepth } from "../../../components/sidebar/base.js";
+import { 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, SidebarViewport, 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 { useFluxLayout } from "../index.js";
@@ -40,17 +39,13 @@ function Sidebar({ footer, banner, components, ...rest }) {
 				className: "flex flex-col gap-3 p-4 pb-2 empty:hidden",
 				children: banner
 			}),
-			/* @__PURE__ */ jsx(ScrollArea, {
-				className: "min-h-0 flex-1",
-				children: /* @__PURE__ */ jsxs(ScrollViewport, {
-					className: "p-4 overscroll-contain",
-					style: { maskImage: "linear-gradient(to bottom, transparent, white 12px, white calc(100% - 12px), transparent)" },
-					children: [menuItems.filter((v) => v.type !== "icon").map((item, i, list) => /* @__PURE__ */ jsx(SidebarLinkItem, {
-						item,
-						className: cn(i === list.length - 1 && "mb-4")
-					}, i)), /* @__PURE__ */ jsx(SidebarPageTree, { ...components })]
-				})
-			}),
+			/* @__PURE__ */ jsx(SidebarViewport, { children: /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col",
+				children: [menuItems.filter((v) => v.type !== "icon").map((item, i, list) => /* @__PURE__ */ jsx(SidebarLinkItem, {
+					item,
+					className: cn(i === list.length - 1 && "mb-4")
+				}, i)), /* @__PURE__ */ jsx(SidebarPageTree, { ...components })]
+			}) }),
 			footer
 		]
 	});

package/dist/layouts/home/index.js

@@ -21,7 +21,7 @@ function HomeLayout(props) {
 	const linkItems = useLinkItems(props);
 	const slots = {
 		...baseSlots,
-		header: defaultSlots?.header ?? Header,
+		header: defaultSlots?.header ?? InlineHeader,
 		container: defaultSlots?.container ?? Container
 	};
 	return /* @__PURE__ */ jsx(LayoutContext, {
@@ -36,5 +36,10 @@ function HomeLayout(props) {
 		})
 	});
 }
+function InlineHeader(props) {
+	const { nav } = useHomeLayout().props;
+	if (nav?.component) return nav.component;
+	return /* @__PURE__ */ jsx(Header, { ...props });
+}
 //#endregion
 export { HomeLayout, useHomeLayout };

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/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?: "icon" | "button" | "main" | 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,
@@ -65,69 +83,73 @@ function Header(props) {
 				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 && /* @__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/page/slots/toc.js

@@ -35,13 +35,13 @@ 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, {
+		children: [/* @__PURE__ */ jsx(PageTOCPopoverTrigger, { ...trigger }), /* @__PURE__ */ jsx(PageTOCPopoverContent, {
 			...content,
-			children: [
+			children: /* @__PURE__ */ jsxs("div", { children: [
 				header,
 				/* @__PURE__ */ jsx(TOCScrollArea, { children: style === "clerk" ? /* @__PURE__ */ jsx(TOCItems$1, {}) : /* @__PURE__ */ jsx(TOCItems, {}) }),
 				footer
-			]
+			] })
 		})]
 	});
 }

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

@@ -5,8 +5,7 @@ import { mergeRefs } from "../../../utils/merge-refs.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../../../components/ui/popover.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 { 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, SidebarViewport, 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 { useNotebookLayout } from "../client.js";
@@ -37,18 +36,6 @@ function SidebarTrigger(props) {
 function SidebarCollapseTrigger(props) {
 	return /* @__PURE__ */ jsx(SidebarCollapseTrigger$1, { ...props });
 }
-function SidebarViewport(props) {
-	const { className, ...rest } = props;
-	return /* @__PURE__ */ jsx(ScrollArea, {
-		...rest,
-		className: (state) => cn("min-h-0 flex-1", typeof className === "function" ? className(state) : className),
-		children: /* @__PURE__ */ jsx(ScrollViewport, {
-			className: "p-4 overscroll-contain",
-			style: { maskImage: "linear-gradient(to bottom, transparent, white 12px, white calc(100% - 12px), transparent)" },
-			children: props.children
-		})
-	});
-}
 function SidebarContent({ ref: refProp, className, children, ...props }) {
 	const { props: { nav } } = useNotebookLayout();
 	const navMode = nav?.mode ?? "auto";
@@ -138,7 +125,7 @@ function SidebarFolderLink({ className, style, ...props }) {
 function SidebarFolderContent({ className, children, ...props }) {
 	const depth = useFolderDepth();
 	return /* @__PURE__ */ jsx(SidebarFolderContent$1, {
-		className: (state) => cn("relative", depth === 1 && "before:content-[''] before:absolute before:w-px before:inset-y-1 before:bg-fd-border before:start-2.5", typeof className === "function" ? className(state) : className),
+		className: (state) => cn("relative flex flex-col gap-0.5 pt-0.5", depth === 1 && "before:content-[''] before:absolute before:w-px before:inset-y-1 before:bg-fd-border before:start-2.5", typeof className === "function" ? className(state) : className),
 		...props,
 		children
 	});
@@ -178,10 +165,13 @@ function Sidebar({ banner, footer, components, collapsible = true, ...rest }) {
 			children: [props.children, footer]
 		});
 	}
-	const viewport = /* @__PURE__ */ jsxs(SidebarViewport, { children: [menuItems.filter((item) => item.type !== "icon").map((item, i, arr) => /* @__PURE__ */ jsx(SidebarLinkItem, {
-		item,
-		className: cn("lg:hidden", i === arr.length - 1 && "mb-4")
-	}, i)), /* @__PURE__ */ jsx(SidebarPageTree, { ...components })] });
+	const viewport = /* @__PURE__ */ jsx(SidebarViewport, { children: /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-0.5",
+		children: [menuItems.filter((item) => item.type !== "icon").map((item, i, arr) => /* @__PURE__ */ jsx(SidebarLinkItem, {
+			item,
+			className: cn("lg:hidden", i === arr.length - 1 && "mb-4")
+		}, i)), /* @__PURE__ */ jsx(SidebarPageTree, { ...components })]
+	}) });
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(SidebarContent, {
 		...rest,
 		children: [