@vx-oss/docs-react 1.0.3

package/dist/layouts/notebook/page/slots/container.js

@@ -0,0 +1,22 @@
+"use client";
+import { cn } from "../../../../utils/cn.js";
+import { useDocsPage } from "../index.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/layouts/notebook/page/slots/container.tsx
+function Container(props) {
+	const { full } = useDocsPage();
+	return /* @__PURE__ */ jsx("main", {
+		className: "grid [grid-area:main]",
+		"data-layout-main": "",
+		children: /* @__PURE__ */ jsx("article", {
+			id: "nd-page",
+			"data-layout-content": "",
+			"data-full": full,
+			...props,
+			className: cn("flex flex-col min-w-0 px-4 py-6 gap-4 md:px-6 md:pt-8 xl:px-8 xl:pt-14 *:max-w-[900px]", full && "*:max-w-[1285px]", props.className),
+			children: props.children
+		})
+	});
+}
+//#endregion
+export { Container };

package/dist/layouts/notebook/page/slots/footer.d.ts

@@ -0,0 +1,16 @@
+import { ComponentProps } from "react";
+import * as PageTree from "@vx-oss/docs-core/page-tree";
+//#region src/layouts/notebook/page/slots/footer.d.ts
+type Item = Pick<PageTree.Item, 'name' | 'description' | 'url'>;
+interface FooterProps extends ComponentProps<'div'> {
+  /**
+   * Items including information for the next and previous page
+   */
+  items?: {
+    previous?: Item;
+    next?: Item;
+  };
+}
+declare function Footer({ items, children, className, ...props }: FooterProps): import("react").JSX.Element;
+//#endregion
+export { Footer, FooterProps };

package/dist/layouts/notebook/page/slots/footer.js

@@ -0,0 +1,56 @@
+"use client";
+import { cn } from "../../../../utils/cn.js";
+import { isActive } from "../../../../utils/urls.js";
+import { useFooterItems } from "../../../../utils/use-footer-items.js";
+import Link from "@vx-oss/docs-core/link";
+import { usePathname } from "@vx-oss/docs-core/framework";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useMemo } from "react";
+import { useTranslations } from "@fuma-translate/react";
+//#region src/layouts/notebook/page/slots/footer.tsx
+function Footer({ items, children, className, ...props }) {
+	const footerList = useFooterItems();
+	const pathname = usePathname();
+	const { previous, next } = useMemo(() => {
+		if (items) return items;
+		const idx = footerList.findIndex((item) => isActive(item.url, pathname));
+		if (idx === -1) return {};
+		return {
+			previous: footerList[idx - 1],
+			next: footerList[idx + 1]
+		};
+	}, [
+		footerList,
+		items,
+		pathname
+	]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: cn("@container grid gap-4", previous && next ? "grid-cols-2" : "grid-cols-1", className),
+		...props,
+		children: [previous && /* @__PURE__ */ jsx(FooterItem, {
+			item: previous,
+			index: 0
+		}), next && /* @__PURE__ */ jsx(FooterItem, {
+			item: next,
+			index: 1
+		})]
+	}), children] });
+}
+function FooterItem({ item, index }) {
+	const t = useTranslations({ note: "pagination" });
+	const Icon = index === 0 ? ChevronLeft : ChevronRight;
+	return /* @__PURE__ */ jsxs(Link, {
+		href: item.url,
+		className: cn("flex flex-col gap-2 rounded-lg border p-4 text-sm transition-colors hover:bg-fd-accent/80 hover:text-fd-accent-foreground @max-lg:col-span-full", index === 1 && "text-end"),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("inline-flex items-center gap-1.5 font-medium", index === 1 && "flex-row-reverse"),
+			children: [/* @__PURE__ */ jsx(Icon, { className: "-mx-1 size-4 shrink-0 rtl:rotate-180" }), /* @__PURE__ */ jsx("p", { children: item.name })]
+		}), /* @__PURE__ */ jsx("p", {
+			className: "text-fd-muted-foreground truncate",
+			children: item.description ?? (index === 0 ? t("Previous Page") : t("Next Page"))
+		})]
+	});
+}
+//#endregion
+export { Footer };

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

@@ -0,0 +1,47 @@
+import { TOCItemsProps } from "../../../../components/toc/clerk.js";
+import { TOCItemsProps as TOCItemsProps$1 } from "../../../../components/toc/default.js";
+import { TOCProviderProps as TOCProviderProps$1 } from "../../../../components/toc/index.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/layouts/notebook/page/slots/toc.d.ts
+type TOCProviderProps = TOCProviderProps$1;
+declare function TOCProvider(props: TOCProviderProps): import("react").JSX.Element;
+type TOCProps = {
+  container?: ComponentProps<'div'>;
+  /**
+   * Custom content in TOC container, before the main TOC
+   */
+  header?: ReactNode;
+  /**
+   * Custom content in TOC container, after the main TOC
+   */
+  footer?: ReactNode;
+} & ({
+  style?: 'normal';
+  list?: TOCItemsProps$1;
+} | {
+  style: 'clerk';
+  list?: TOCItemsProps;
+});
+declare function TOC({ container, header, footer, style, list }: TOCProps): import("react").JSX.Element;
+type TOCPopoverProps = {
+  container?: ComponentProps<'div'>;
+  trigger?: ComponentProps<'button'>;
+  content?: ComponentProps<'div'>;
+  /**
+   * Custom content in TOC container, before the main TOC
+   */
+  header?: ReactNode;
+  /**
+   * Custom content in TOC container, after the main TOC
+   */
+  footer?: ReactNode;
+} & ({
+  style?: 'normal';
+  list?: TOCItemsProps$1;
+} | {
+  style: 'clerk';
+  list?: TOCItemsProps;
+});
+declare function TOCPopover({ container, trigger, content, header, footer, style, list }: TOCPopoverProps): import("react").JSX.Element;
+//#endregion
+export { TOC, TOCPopover, TOCPopoverProps, TOCProps, TOCProvider, TOCProviderProps };

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

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

package/dist/layouts/notebook/slots/container.d.ts

@@ -0,0 +1,5 @@
+import { ComponentProps } from "react";
+//#region src/layouts/notebook/slots/container.d.ts
+declare function Container(props: ComponentProps<'div'>): import("react").JSX.Element;
+//#endregion
+export { Container };

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

@@ -0,0 +1,38 @@
+"use client";
+import { cn } from "../../../utils/cn.js";
+import { useNotebookLayout } from "../client.js";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+//#region src/layouts/notebook/slots/container.tsx
+function Container(props) {
+	const { props: { nav }, slots } = useNotebookLayout();
+	const pageCol = "calc(var(--fd-layout-width,97rem) - var(--fd-sidebar-col) - var(--fd-toc-width))";
+	const { collapsed } = slots.sidebar?.useSidebar?.() ?? {};
+	const [previousCollapsed, setPreviousCollapsed] = useState(collapsed);
+	const isCollapseChanged = previousCollapsed !== collapsed;
+	useEffect(() => {
+		if (isCollapseChanged) setPreviousCollapsed(collapsed);
+	}, [collapsed, isCollapseChanged]);
+	return /* @__PURE__ */ jsx("div", {
+		id: "nd-notebook-layout",
+		"data-sidebar-collapsed": collapsed,
+		"data-column-changed": isCollapseChanged,
+		...props,
+		style: {
+			gridTemplate: nav?.mode === "top" ? `". header header header ."
+"sidebar sidebar toc-popover toc-popover ."
+"sidebar sidebar main toc ." 1fr / minmax(min-content, 1fr) var(--fd-sidebar-col) minmax(0, ${pageCol}) var(--fd-toc-width) minmax(min-content, 1fr)` : `"sidebar sidebar header header ."
+"sidebar sidebar toc-popover toc-popover ."
+"sidebar sidebar main toc ." 1fr / minmax(min-content, 1fr) var(--fd-sidebar-col) minmax(0, ${pageCol}) var(--fd-toc-width) minmax(min-content, 1fr)`,
+			"--fd-docs-row-1": "var(--fd-banner-height, 0px)",
+			"--fd-docs-row-2": "calc(var(--fd-docs-row-1) + var(--fd-header-height))",
+			"--fd-docs-row-3": "calc(var(--fd-docs-row-2) + var(--fd-toc-popover-height))",
+			"--fd-sidebar-col": collapsed ? "0px" : "var(--fd-sidebar-width)",
+			...props.style
+		},
+		className: cn("grid overflow-x-clip min-h-(--fd-docs-height) auto-cols-auto auto-rows-auto [--fd-docs-height:100dvh] [--fd-header-height:0px] [--fd-toc-popover-height:0px] [--fd-sidebar-width:0px] [--fd-toc-width:0px] data-[column-changed=true]:transition-[grid-template-columns]", props.className),
+		children: props.children
+	});
+}
+//#endregion
+export { Container };

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

@@ -0,0 +1,5 @@
+import { ComponentProps } from "react";
+//#region src/layouts/notebook/slots/header.d.ts
+declare function Header(props: ComponentProps<'header'>): string | number | bigint | true | import("react").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined>;
+//#endregion
+export { Header };

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

@@ -0,0 +1,204 @@
+"use client";
+import { cn } from "../../../utils/cn.js";
+import { buttonVariants } from "../../../components/ui/button.js";
+import { useTabsGroups } from "../../../contexts/tree.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../components/ui/popover.js";
+import { LinkItem } from "../../shared/client.js";
+import { isLayoutTabActive } from "../../shared/index.js";
+import { SidebarTabsDropdown } from "../../../components/sidebar/tabs/dropdown.js";
+import { useNotebookLayout } from "../client.js";
+import Link from "@vx-oss/docs-core/link";
+import { usePathname } from "@vx-oss/docs-core/framework";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, Languages, Sidebar } from "lucide-react";
+import { Fragment as Fragment$1, useMemo, useRef, useState } from "react";
+//#region src/layouts/notebook/slots/header.tsx
+function Header(props) {
+	const { slots, navItems, isNavTransparent, props: { tabMode, nav, tabs, sidebar } } = useNotebookLayout();
+	const { open } = slots.sidebar?.useSidebar?.() ?? {};
+	const navMode = nav?.mode ?? "auto";
+	const sidebarCollapsible = sidebar.collapsible ?? true;
+	const groups = useTabsGroups(tabs);
+	const showLayoutTabs = tabMode === "navbar" && groups.length > 0;
+	if (nav?.component) return nav.component;
+	return /* @__PURE__ */ jsxs("header", {
+		id: "nd-subnav",
+		"data-transparent": isNavTransparent && !open,
+		...props,
+		className: cn("sticky [grid-area:header] flex flex-col top-(--fd-docs-row-1) z-10 backdrop-blur-sm transition-colors data-[transparent=false]:bg-fd-background/80 layout:[--fd-header-height:--spacing(14)]", showLayoutTabs && "lg:layout:[--fd-header-height:--spacing(24)]", props.className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			"data-header-body": "",
+			className: cn("flex border-b px-4 gap-2 h-14", navMode === "top" && "md:px-6"),
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: cn("items-center", navMode === "top" && "flex flex-1", navMode === "auto" && "hidden has-data-[collapsed=true]:md:flex max-md:flex"),
+					children: [
+						sidebarCollapsible && slots.sidebar && navMode === "auto" && /* @__PURE__ */ jsx(slots.sidebar.collapseTrigger, {
+							className: cn(buttonVariants({
+								color: "ghost",
+								size: "icon-sm"
+							}), "-ms-1.5 text-fd-muted-foreground data-[collapsed=false]:hidden max-md:hidden"),
+							children: /* @__PURE__ */ jsx(Sidebar, {})
+						}),
+						slots.navTitle && /* @__PURE__ */ jsx(slots.navTitle, { className: cn("inline-flex items-center gap-2.5 font-semibold", navMode === "auto" && "md:hidden") }),
+						nav?.children
+					]
+				}),
+				slots.searchTrigger && /* @__PURE__ */ jsx(slots.searchTrigger.full, {
+					hideIfDisabled: true,
+					className: cn("w-full my-auto max-md:hidden", navMode === "top" ? "ps-2.5 rounded-xl max-w-sm" : "max-w-[240px]")
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-1 items-center justify-end md:gap-2",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "flex items-center gap-6 empty:hidden max-lg:hidden",
+							children: navItems.filter((item) => item.type !== "icon").map((item, i) => /* @__PURE__ */ jsx(NavbarLinkItem, { item }, i))
+						}),
+						navItems.filter((item) => item.type === "icon").map((item, i) => /* @__PURE__ */ jsx(LinkItem, {
+							item,
+							className: cn(buttonVariants({
+								size: "icon-sm",
+								color: "ghost"
+							}), "text-fd-muted-foreground max-lg:hidden"),
+							"aria-label": item.label,
+							children: item.icon
+						}, i)),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center md:hidden",
+							children: [slots.searchTrigger && /* @__PURE__ */ jsx(slots.searchTrigger.sm, {
+								hideIfDisabled: true,
+								className: "p-2"
+							}), slots.sidebar && /* @__PURE__ */ jsx(slots.sidebar.trigger, {
+								className: cn(buttonVariants({
+									color: "ghost",
+									size: "icon-sm",
+									className: "p-2 -me-1.5"
+								})),
+								children: /* @__PURE__ */ jsx(Sidebar, {})
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2 max-md:hidden",
+							children: [
+								slots.languageSelect && /* @__PURE__ */ jsx(slots.languageSelect.root, { children: /* @__PURE__ */ jsx(Languages, { className: "size-4.5 text-fd-muted-foreground" }) }),
+								slots.themeSwitch && /* @__PURE__ */ jsx(slots.themeSwitch, {}),
+								sidebarCollapsible && slots.sidebar && navMode === "top" && /* @__PURE__ */ jsx(slots.sidebar.collapseTrigger, {
+									className: cn(buttonVariants({
+										color: "secondary",
+										size: "icon-sm"
+									}), "text-fd-muted-foreground rounded-full -me-1.5"),
+									children: /* @__PURE__ */ jsx(Sidebar, {})
+								})
+							]
+						})
+					]
+				})
+			]
+		}), showLayoutTabs && /* @__PURE__ */ jsx(LayoutHeaderTabs, {
+			"data-header-tabs": "",
+			className: "overflow-x-auto border-b px-6 h-10 max-lg:hidden",
+			tabs
+		})]
+	});
+}
+function LayoutHeaderTabs({ tabs: allTabs, className, ...props }) {
+	const pathname = usePathname();
+	const tabs = useTabsGroups(allTabs).findLast((group) => typeof group.active?.root !== "string")?.options;
+	const typedTabs = useMemo(() => {
+		return allTabs.filter((tab) => typeof tab.$folder?.root === "string");
+	}, [allTabs]);
+	const selectedIdx = useMemo(() => {
+		return tabs?.findLastIndex((option) => isLayoutTabActive(option, pathname)) ?? -1;
+	}, [tabs, pathname]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-row items-end gap-6", className),
+		...props,
+		children: [typedTabs.length > 0 && /* @__PURE__ */ jsx(SidebarTabsDropdown, {
+			options: typedTabs,
+			className: "my-auto p-1"
+		}), tabs?.map((option, i) => {
+			const { title, url, unlisted, props: { className, ...rest } = {} } = option;
+			const isSelected = selectedIdx === i;
+			return /* @__PURE__ */ jsx(Link, {
+				href: url,
+				className: cn("inline-flex border-b-2 border-transparent transition-colors items-center pb-1.5 font-medium gap-2 text-fd-muted-foreground text-sm text-nowrap hover:text-fd-accent-foreground", unlisted && !isSelected && "hidden", isSelected && "border-fd-primary text-fd-primary", className),
+				...rest,
+				children: title
+			}, i);
+		})]
+	});
+}
+function NavbarLinkItem({ item, className, ...props }) {
+	if (item.type === "custom") return item.children;
+	if (item.type === "menu") return /* @__PURE__ */ jsx(NavbarLinkItemMenu, {
+		item,
+		className,
+		...props
+	});
+	return /* @__PURE__ */ jsx(LinkItem, {
+		item,
+		className: cn("text-sm text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground data-[active=true]:text-fd-primary", className),
+		...props,
+		children: item.text
+	});
+}
+function NavbarLinkItemMenu({ item, hoverDelay = 50, className, ...props }) {
+	const [open, setOpen] = useState(false);
+	const timeoutRef = useRef(null);
+	const freezeUntil = useRef(null);
+	const delaySetOpen = (value) => {
+		if (timeoutRef.current) {
+			clearTimeout(timeoutRef.current);
+			timeoutRef.current = null;
+		}
+		timeoutRef.current = window.setTimeout(() => {
+			setOpen(value);
+			freezeUntil.current = Date.now() + 300;
+		}, hoverDelay);
+	};
+	const onPointerEnter = (e) => {
+		if (e.pointerType === "touch") return;
+		delaySetOpen(true);
+	};
+	const onPointerLeave = (e) => {
+		if (e.pointerType === "touch") return;
+		delaySetOpen(false);
+	};
+	function isTouchDevice() {
+		return "ontouchstart" in window || navigator.maxTouchPoints > 0;
+	}
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: (value) => {
+			if (freezeUntil.current === null || Date.now() >= freezeUntil.current) setOpen(value);
+		},
+		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+			className: cn("inline-flex items-center gap-1.5 p-1 text-sm text-fd-muted-foreground transition-colors has-data-[active=true]:text-fd-primary data-[state=open]:text-fd-accent-foreground focus-visible:outline-none", className),
+			onPointerEnter,
+			onPointerLeave,
+			...props,
+			children: [item.url ? /* @__PURE__ */ jsx(LinkItem, {
+				item,
+				children: item.text
+			}) : item.text, /* @__PURE__ */ jsx(ChevronDown, { className: "size-3" })]
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			className: "flex flex-col p-1 text-fd-muted-foreground text-start",
+			onPointerEnter,
+			onPointerLeave,
+			children: item.items.map((child, i) => {
+				if (child.type === "custom") return /* @__PURE__ */ jsx(Fragment$1, { children: child.children }, i);
+				return /* @__PURE__ */ jsxs(LinkItem, {
+					item: child,
+					className: "inline-flex items-center gap-2 rounded-md p-2 transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground data-[active=true]:text-fd-primary [&_svg]:size-4",
+					onClick: () => {
+						if (isTouchDevice()) setOpen(false);
+					},
+					children: [child.icon, child.text]
+				}, i);
+			})
+		})]
+	});
+}
+//#endregion
+export { Header };

package/dist/layouts/notebook/slots/sidebar.d.ts

@@ -0,0 +1,23 @@
+import { SidebarProviderProps as SidebarProviderProps$1, useSidebar as useSidebar$1 } from "../../../components/sidebar/base.js";
+import { SidebarPageTreeComponents } from "../../../components/sidebar/page-tree.js";
+import { ComponentProps, FC, ReactNode } from "react";
+//#region src/layouts/notebook/slots/sidebar.d.ts
+interface SidebarProps extends ComponentProps<'aside'> {
+  components?: Partial<SidebarPageTreeComponents>;
+  banner?: ReactNode | FC<ComponentProps<'div'>>;
+  footer?: ReactNode | FC<ComponentProps<'div'>>;
+  /**
+   * Support collapsing the sidebar on desktop mode
+   *
+   * @defaultValue true
+   */
+  collapsible?: boolean;
+}
+type SidebarProviderProps = SidebarProviderProps$1;
+declare const useSidebar: typeof useSidebar$1;
+declare function SidebarProvider(props: SidebarProviderProps): import("react").JSX.Element;
+declare function SidebarTrigger(props: ComponentProps<'button'>): import("react").JSX.Element;
+declare function SidebarCollapseTrigger(props: ComponentProps<'button'>): import("react").JSX.Element;
+declare function Sidebar({ banner, footer, components, collapsible, ...rest }: SidebarProps): import("react").JSX.Element;
+//#endregion
+export { Sidebar, SidebarCollapseTrigger, SidebarProps, SidebarProvider, SidebarProviderProps, SidebarTrigger, useSidebar };