@vx-oss/docs-react 1.0.4 → 1.0.5

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

@@ -1,181 +1 @@
-"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 };
+export * from '@vx-oss/docs-vezham-ui/layouts/notebook/page/slots/toc';

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

@@ -1,38 +1 @@
-"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 };
+export * from '@vx-oss/docs-vezham-ui/layouts/notebook/slots/container';

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

@@ -1,204 +1 @@
-"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 };
+export * from '@vx-oss/docs-vezham-ui/layouts/notebook/slots/header';

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

@@ -1,240 +1 @@
-"use client";
-import { cn } from "../../../utils/cn.js";
-import { buttonVariants } from "../../../components/ui/button.js";
-import { mergeRefs } from "../../../utils/merge-refs.js";
-import { LinkItem } from "../../shared/client.js";
-import "../../shared/index.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 { SidebarTabsDropdown } from "../../../components/sidebar/tabs/dropdown.js";
-import { useNotebookLayout } from "../client.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Languages, SidebarIcon, X } from "lucide-react";
-import { cva } from "class-variance-authority";
-import { createElement, useRef } from "react";
-//#region src/layouts/notebook/slots/sidebar.tsx
-const itemVariants = cva("relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0", { variants: {
-	variant: {
-		link: "transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors",
-		button: "transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none"
-	},
-	highlight: { true: "data-[active=true]:before:content-[''] data-[active=true]:before:bg-fd-primary data-[active=true]:before:absolute data-[active=true]:before:w-px data-[active=true]:before:inset-y-2.5 data-[active=true]:before:inset-s-2.5" }
-} });
-function getItemOffset(depth) {
-	return `calc(${2 + 3 * depth} * var(--spacing))`;
-}
-const { useSidebar } = base_exports;
-function SidebarProvider(props) {
-	return /* @__PURE__ */ jsx(SidebarProvider$1, { ...props });
-}
-function SidebarTrigger(props) {
-	return /* @__PURE__ */ jsx(SidebarTrigger$1, { ...props });
-}
-function SidebarCollapseTrigger(props) {
-	return /* @__PURE__ */ jsx(SidebarCollapseTrigger$1, { ...props });
-}
-function SidebarContent({ ref: refProp, className, children, ...props }) {
-	const { props: { nav } } = useNotebookLayout();
-	const navMode = nav?.mode ?? "auto";
-	const ref = useRef(null);
-	return /* @__PURE__ */ jsx(SidebarContent$1, { children: ({ collapsed, hovered, ref: asideRef, ...rest }) => /* @__PURE__ */ jsxs("div", {
-		"data-sidebar-placeholder": "",
-		className: cn("sticky z-20 [grid-area:sidebar] pointer-events-none *:pointer-events-auto md:layout:[--fd-sidebar-width:268px] max-md:hidden", navMode === "auto" ? "top-(--fd-docs-row-1) h-[calc(var(--fd-docs-height)-var(--fd-docs-row-1))]" : "top-(--fd-docs-row-2) h-[calc(var(--fd-docs-height)-var(--fd-docs-row-2))]"),
-		children: [collapsed && /* @__PURE__ */ jsx("div", {
-			className: "absolute inset-s-0 inset-y-0 w-4",
-			...rest
-		}), /* @__PURE__ */ jsx("aside", {
-			id: "nd-sidebar",
-			ref: mergeRefs(ref, refProp, asideRef),
-			"data-collapsed": collapsed,
-			"data-hovered": collapsed && hovered,
-			className: cn("absolute flex flex-col w-full inset-s-0 inset-y-0 items-end text-sm duration-250 *:w-(--fd-sidebar-width)", navMode === "auto" && "bg-fd-card border-e", collapsed && ["inset-y-2 rounded-xl bg-fd-card transition-transform border w-(--fd-sidebar-width)", hovered ? "shadow-lg translate-x-2 rtl:-translate-x-2" : "-translate-x-(--fd-sidebar-width) rtl:translate-x-full"], ref.current && ref.current.getAttribute("data-collapsed") === "true" !== collapsed && "transition-[width,inset-block,translate,background-color]", className),
-			...props,
-			...rest,
-			children
-		})]
-	}) });
-}
-function SidebarDrawer({ children, className, ...props }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SidebarDrawerOverlay, { className: "fixed z-40 inset-0 backdrop-blur-xs data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out" }), /* @__PURE__ */ jsx(SidebarDrawerContent, {
-		className: cn("fixed text-[0.9375rem] flex flex-col shadow-lg border-s inset-e-0 inset-y-0 w-[85%] max-w-[380px] z-40 bg-fd-background data-[state=open]:animate-fd-sidebar-in data-[state=closed]:animate-fd-sidebar-out", className),
-		...props,
-		children
-	})] });
-}
-function SidebarFolder(props) {
-	return /* @__PURE__ */ jsx(SidebarFolder$1, { ...props });
-}
-function SidebarSeparator({ className, style, children, ...props }) {
-	const depth = useFolderDepth();
-	return /* @__PURE__ */ jsx(SidebarSeparator$1, {
-		className: cn("inline-flex items-center gap-2 mb-1.5 px-2 mt-6 empty:mb-0 [&_svg]:size-4 [&_svg]:shrink-0", depth === 0 && "first:mt-0", className),
-		style: {
-			paddingInlineStart: getItemOffset(depth),
-			...style
-		},
-		...props,
-		children
-	});
-}
-function SidebarItem({ className, style, children, ...props }) {
-	const depth = useFolderDepth();
-	return /* @__PURE__ */ jsx(SidebarItem$1, {
-		className: cn(itemVariants({
-			variant: "link",
-			highlight: depth >= 1
-		}), className),
-		style: {
-			paddingInlineStart: getItemOffset(depth),
-			...style
-		},
-		...props,
-		children
-	});
-}
-function SidebarFolderTrigger({ className, style, ...props }) {
-	const { depth, collapsible } = useFolder();
-	return /* @__PURE__ */ jsx(SidebarFolderTrigger$1, {
-		className: cn(itemVariants({ variant: collapsible ? "button" : null }), "w-full", className),
-		style: {
-			paddingInlineStart: getItemOffset(depth - 1),
-			...style
-		},
-		...props,
-		children: props.children
-	});
-}
-function SidebarFolderLink({ className, style, ...props }) {
-	const depth = useFolderDepth();
-	return /* @__PURE__ */ jsx(SidebarFolderLink$1, {
-		className: cn(itemVariants({
-			variant: "link",
-			highlight: depth > 1
-		}), "w-full", className),
-		style: {
-			paddingInlineStart: getItemOffset(depth - 1),
-			...style
-		},
-		...props,
-		children: props.children
-	});
-}
-function SidebarFolderContent({ className, children, ...props }) {
-	const depth = useFolderDepth();
-	return /* @__PURE__ */ jsx(SidebarFolderContent$1, {
-		className: cn("relative", depth === 1 && "before:content-[''] before:absolute before:w-px before:inset-y-1 before:bg-fd-border before:inset-s-2.5", className),
-		...props,
-		children: /* @__PURE__ */ jsx("div", {
-			className: "flex flex-col gap-0.5 pt-0.5",
-			children
-		})
-	});
-}
-const SidebarPageTree = createPageTreeRenderer({
-	SidebarFolder,
-	SidebarFolderContent,
-	SidebarFolderLink,
-	SidebarFolderTrigger,
-	SidebarItem,
-	SidebarSeparator
-});
-const SidebarLinkItem = createLinkItemRenderer({
-	SidebarFolder,
-	SidebarFolderContent,
-	SidebarFolderLink,
-	SidebarFolderTrigger,
-	SidebarItem
-});
-function Sidebar({ banner, footer, components, collapsible = true, ...rest }) {
-	const { menuItems, slots, props: { nav, tabs, tabMode } } = useNotebookLayout();
-	const navMode = nav?.mode ?? "auto";
-	const iconLinks = menuItems.filter((item) => item.type === "icon");
-	function renderHeader(props) {
-		if (typeof banner === "function") return createElement(banner, props);
-		return /* @__PURE__ */ jsxs("div", {
-			...props,
-			className: cn("flex flex-col gap-3 p-4 pb-2 empty:hidden", props.className),
-			children: [props.children, banner]
-		});
-	}
-	function renderFooter(props) {
-		if (typeof footer === "function") return createElement(footer, props);
-		return /* @__PURE__ */ jsxs("div", {
-			...props,
-			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-3")
-	}, i)), /* @__PURE__ */ jsx(SidebarPageTree, { ...components })] });
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(SidebarContent, {
-		...rest,
-		children: [
-			renderHeader({ children: /* @__PURE__ */ jsxs(Fragment, { children: [navMode === "auto" && /* @__PURE__ */ jsxs("div", {
-				className: "flex justify-between",
-				children: [
-					slots.navTitle && /* @__PURE__ */ jsx(slots.navTitle, { className: "inline-flex items-center gap-2.5 font-medium" }),
-					nav?.children,
-					collapsible && /* @__PURE__ */ jsx(SidebarCollapseTrigger, {
-						className: cn(buttonVariants({
-							color: "ghost",
-							size: "icon-sm",
-							className: "mt-px mb-auto text-fd-muted-foreground"
-						})),
-						children: /* @__PURE__ */ jsx(SidebarIcon, {})
-					})
-				]
-			}), tabs.length > 0 && /* @__PURE__ */ jsx(SidebarTabsDropdown, {
-				options: tabs,
-				className: cn(tabMode === "navbar" && "lg:hidden")
-			})] }) }),
-			viewport,
-			renderFooter({
-				className: cn("hidden flex-row text-fd-muted-foreground items-center border-t px-4 py-2.5", iconLinks.length > 0 && "max-lg:flex"),
-				children: iconLinks.map((item, i) => /* @__PURE__ */ jsx(LinkItem, {
-					item,
-					className: cn(buttonVariants({
-						size: "icon-sm",
-						color: "ghost",
-						className: "lg:hidden"
-					})),
-					"aria-label": item.label,
-					children: item.icon
-				}, i))
-			})
-		]
-	}), /* @__PURE__ */ jsxs(SidebarDrawer, {
-		...rest,
-		children: [
-			renderHeader({ children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SidebarTrigger, {
-				className: cn(buttonVariants({
-					size: "icon-sm",
-					color: "ghost",
-					className: "ms-auto text-fd-muted-foreground"
-				})),
-				children: /* @__PURE__ */ jsx(X, {})
-			}), tabs.length > 0 && /* @__PURE__ */ jsx(SidebarTabsDropdown, { options: tabs })] }) }),
-			viewport,
-			renderFooter({
-				className: cn("hidden flex-row text-fd-muted-foreground items-center border-t p-4 pt-2 justify-end", (slots.languageSelect || slots.themeSwitch) && "flex", iconLinks.length > 0 && "max-lg:flex"),
-				children: /* @__PURE__ */ jsxs(Fragment, { children: [
-					iconLinks.map((item, i) => /* @__PURE__ */ jsx(LinkItem, {
-						item,
-						className: cn(buttonVariants({
-							size: "icon-sm",
-							color: "ghost"
-						}), "text-fd-muted-foreground lg:hidden", i === iconLinks.length - 1 && "me-auto"),
-						"aria-label": item.label,
-						children: item.icon
-					}, i)),
-					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, {})
-				] })
-			})
-		]
-	})] });
-}
-//#endregion
-export { Sidebar, SidebarCollapseTrigger, SidebarProvider, SidebarTrigger, useSidebar };
+export * from '@vx-oss/docs-vezham-ui/layouts/notebook/slots/sidebar';