@fumadocs/base-ui 16.7.2 → 16.7.4

package/dist/components/toc/clerk.js

@@ -11,29 +11,37 @@ function TOCItems({ ref, className, ...props }) {
 	const containerRef = useRef(null);
 	const items = useTOCItems();
 	const { text } = useI18n();
+	const svgRef = useRef(null);
 	const [svg, setSvg] = useState();
 	useEffect(() => {
 		if (!containerRef.current) return;
 		const container = containerRef.current;
 		function onResize() {
 			if (container.clientHeight === 0) return;
-			let w = 0, h = 0;
-			const d = [];
+			let w = 0, h = 0, b1 = 0, d = "";
 			for (let i = 0; i < items.length; i++) {
 				const element = container.querySelector(`a[href="#${items[i].url.slice(1)}"]`);
 				if (!element) continue;
 				const styles = getComputedStyle(element);
-				const offset = getLineOffset(items[i].depth) + 1, top = element.offsetTop + parseFloat(styles.paddingTop), bottom = element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom);
+				const offset = getLineOffset(items[i].depth) + 1, t2 = element.offsetTop + parseFloat(styles.paddingTop), b2 = element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom);
 				w = Math.max(offset, w);
-				h = Math.max(h, bottom);
-				d.push(`${i === 0 ? "M" : "L"}${offset} ${top}`);
-				d.push(`L${offset} ${bottom}`);
+				h = Math.max(h, b2);
+				if (i === 0) d += ` M${offset} ${t2} L${offset} ${b2}`;
+				else {
+					const pOffset = getLineOffset(items[i - 1].depth) + 1;
+					d += ` C ${pOffset} ${t2 - 4} ${offset} ${b1 + 4} ${offset} ${t2} L${offset} ${b2}`;
+				}
+				b1 = b2;
+			}
+			w += 1;
+			if (!svgRef.current || svgRef.current.d !== d) {
+				svgRef.current = {
+					d,
+					width: w,
+					height: h
+				};
+				setSvg(svgRef.current);
 			}
-			setSvg({
-				path: d.join(" "),
-				width: w + 1,
-				height: h
-			});
 		}
 		const observer = new ResizeObserver(onResize);
 		onResize();
@@ -46,17 +54,29 @@ function TOCItems({ ref, className, ...props }) {
 		className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground",
 		children: text.tocNoHeadings
 	});
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [svg && /* @__PURE__ */ jsx("div", {
-		className: "absolute start-0 top-0 rtl:-scale-x-100",
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [svg && /* @__PURE__ */ jsxs(TocThumb, {
+		containerRef,
+		className: "absolute top-0 inset-s-0",
 		style: {
 			width: svg.width,
-			height: svg.height,
-			maskImage: `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svg.width} ${svg.height}"><path d="${svg.path}" stroke="black" stroke-width="1" fill="none" /></svg>`)}")`
+			height: svg.height
 		},
-		children: /* @__PURE__ */ jsx(TocThumb, {
-			containerRef,
-			className: "absolute w-full top-(--fd-top) h-(--fd-height) bg-fd-primary transition-[top,height]"
-		})
+		children: [/* @__PURE__ */ jsx("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: `0 0 ${svg.width} ${svg.height}`,
+			className: "absolute transition-[clip-path]",
+			style: {
+				width: svg.width,
+				height: svg.height,
+				clipPath: `polygon(0 var(--fd-top), 100% var(--fd-top), 100% calc(var(--fd-top) + var(--fd-height)), 0 calc(var(--fd-top) + var(--fd-height)))`
+			},
+			children: /* @__PURE__ */ jsx("path", {
+				d: svg.d,
+				className: "stroke-fd-primary",
+				strokeWidth: "1",
+				fill: "none"
+			})
+		}), /* @__PURE__ */ jsx(ThumbBox, {})]
 	}), /* @__PURE__ */ jsx("div", {
 		ref: mergeRefs(containerRef, ref),
 		className: cn("flex flex-col", className),
@@ -68,32 +88,48 @@ function TOCItems({ ref, className, ...props }) {
 		}, item.url))
 	})] });
 }
+function ThumbBox() {
+	const items = useTOCItems();
+	const ids = Primitive.useActiveAnchors();
+	const item = items.findLast((item) => ids.includes(item.url.slice(1)));
+	if (!item) return;
+	return /* @__PURE__ */ jsx("div", {
+		className: "absolute size-1 bg-fd-primary rounded-full transition-transform",
+		style: { translate: `calc(${getLineOffset(item.depth)}px - 1.25px) calc(var(--fd-top) + var(--fd-height))` }
+	});
+}
 function getItemOffset(depth) {
 	if (depth <= 2) return 14;
 	if (depth === 3) return 26;
 	return 36;
 }
 function getLineOffset(depth) {
-	return depth >= 3 ? 10 : 0;
+	if (depth <= 2) return 2;
+	if (depth === 3) return 10;
+	return 20;
 }
 function TOCItem({ item, upper = item.depth, lower = item.depth }) {
 	const offset = getLineOffset(item.depth), upperOffset = getLineOffset(upper), lowerOffset = getLineOffset(lower);
 	return /* @__PURE__ */ jsxs(Primitive.TOCItem, {
 		href: item.url,
 		style: { paddingInlineStart: getItemOffset(item.depth) },
-		className: "prose relative py-1.5 text-sm text-fd-muted-foreground hover:text-fd-accent-foreground transition-colors wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary",
+		className: "prose relative py-1.5 text-sm scroll-m-4 text-fd-muted-foreground hover:text-fd-accent-foreground transition-colors wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary",
 		children: [
 			offset !== upperOffset && /* @__PURE__ */ jsx("svg", {
 				xmlns: "http://www.w3.org/2000/svg",
-				viewBox: "0 0 16 16",
-				className: "absolute -top-1.5 start-0 size-4 rtl:-scale-x-100",
-				children: /* @__PURE__ */ jsx("line", {
-					x1: upperOffset,
-					y1: "0",
-					x2: offset,
-					y2: "12",
-					className: "stroke-fd-foreground/10",
-					strokeWidth: "1"
+				viewBox: `${Math.min(offset, upperOffset)} 0 ${Math.abs(upperOffset - offset)} 12`,
+				className: "absolute -top-1.5",
+				style: {
+					width: Math.abs(upperOffset - offset) + 1,
+					height: 12,
+					insetInlineStart: Math.min(offset, upperOffset)
+				},
+				children: /* @__PURE__ */ jsx("path", {
+					d: `M ${upperOffset} 0 C ${upperOffset} 8 ${offset} 4 ${offset} 12`,
+					stroke: "black",
+					strokeWidth: "1",
+					fill: "none",
+					className: "stroke-fd-foreground/10"
 				})
 			}),
 			/* @__PURE__ */ jsx("div", {

package/dist/components/toc/default.js

@@ -17,7 +17,7 @@ function TOCItems({ ref, className, ...props }) {
 	});
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TocThumb, {
 		containerRef,
-		className: "absolute top-(--fd-top) h-(--fd-height) w-0.5 rounded-e-sm bg-fd-primary transition-[top,height] ease-linear"
+		className: "absolute top-(--fd-top) inset-s-0 w-0.5 h-(--fd-height) rounded-e-full bg-fd-primary transition-[top,height]"
 	}), /* @__PURE__ */ jsx("div", {
 		ref: mergeRefs(ref, containerRef),
 		className: cn("flex flex-col border-s border-fd-foreground/10", className),
@@ -28,7 +28,7 @@ function TOCItems({ ref, className, ...props }) {
 function TOCItem({ item }) {
 	return /* @__PURE__ */ jsx(Primitive.TOCItem, {
 		href: item.url,
-		className: cn("prose py-1.5 text-sm text-fd-muted-foreground transition-colors wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary", item.depth <= 2 && "ps-3", item.depth === 3 && "ps-6", item.depth >= 4 && "ps-8"),
+		className: cn("prose py-1.5 text-sm text-fd-muted-foreground scroll-m-4 transition-colors wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary hover:text-fd-accent-foreground", item.depth <= 2 && "ps-3", item.depth === 3 && "ps-6", item.depth >= 4 && "ps-8"),
 		children: item.title
 	});
 }

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

@@ -16,12 +16,14 @@ declare function TOCScrollArea({
   className,
   ...props
 }: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
-interface RefProps {
+interface TocThumbProps extends ComponentProps<'div'> {
   containerRef: RefObject<HTMLElement | null>;
+  align?: 'center' | 'end';
 }
 declare function TocThumb({
   containerRef,
+  align,
   ...props
-}: ComponentProps<'div'> & RefProps): react_jsx_runtime0.JSX.Element;
+}: TocThumbProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TOCProvider, TOCProviderProps, TOCScrollArea, TocThumb, useActiveAnchor, useActiveAnchors, useTOCItems };

package/dist/components/toc/index.js

@@ -42,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;
@@ -64,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,
@@ -72,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, toc_exports, useActiveAnchor, useActiveAnchors, useTOCItems };

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

@@ -5,7 +5,7 @@ import * as class_variance_authority_types0 from "class-variance-authority/types
 declare const buttonVariants: (props?: ({
   variant?: "primary" | "outline" | "ghost" | "secondary" | null | undefined;
   color?: "primary" | "outline" | "ghost" | "secondary" | null | undefined;
-  size?: "sm" | "icon" | "icon-sm" | "icon-xs" | null | undefined;
+  size?: "icon" | "sm" | "icon-sm" | "icon-xs" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 type ButtonProps = VariantProps<typeof buttonVariants>;
 //#endregion

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/page/slots/toc.js

@@ -153,8 +153,10 @@ 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
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col px-4 max-h-[50vh] md:px-6",
+			children: props.children
+		})
 	});
 }
 //#endregion

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
 	});