@vx-oss/docs-react 1.0.3

package/dist/layouts/flux/slots/tab-dropdown.js

@@ -0,0 +1,88 @@
+"use client";
+import { cn } from "../../../utils/cn.js";
+import { useTabsGroups } from "../../../contexts/tree.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../components/ui/popover.js";
+import { isLayoutTabActive } from "../../shared/index.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 { Check, ChevronsUpDown } from "lucide-react";
+import { useMemo, useState } from "react";
+import { AnimatePresence, motion } from "motion/react";
+//#region src/layouts/flux/slots/tab-dropdown.tsx
+function TabDropdown({ tabs: allTabs, placeholder, className, ...props }) {
+	const [open, setOpen] = useState(false);
+	const pathname = usePathname();
+	const tabs = useTabsGroups(allTabs).findLast((group) => typeof group.active?.root !== "string")?.options;
+	const selectedIdx = useMemo(() => {
+		return tabs?.findLastIndex((item) => isLayoutTabActive(item, pathname)) ?? -1;
+	}, [tabs, pathname]);
+	if (!tabs) return;
+	const selected = selectedIdx !== -1 ? tabs[selectedIdx] : void 0;
+	const onClick = () => {
+		setOpen(false);
+	};
+	const item = selected ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		className: "size-4.5 shrink-0 empty:hidden",
+		children: selected.icon
+	}), /* @__PURE__ */ jsx("p", {
+		className: "font-medium",
+		children: selected.title
+	})] }) : placeholder;
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [item && /* @__PURE__ */ jsxs(PopoverTrigger, {
+			className: cn("flex items-center gap-2 rounded-xl overflow-hidden p-1.5 border shadow-sm text-sm text-start transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground data-[state=open]:bg-fd-accent data-[state=open]:text-fd-accent-foreground", className),
+			...props,
+			children: [/* @__PURE__ */ jsx(AnimatePresence, {
+				mode: "popLayout",
+				children: /* @__PURE__ */ jsx(motion.span, {
+					className: "flex w-full min-w-0 overflow-hidden items-center text-nowrap gap-1.5",
+					initial: {
+						opacity: 0,
+						y: "100%"
+					},
+					animate: {
+						opacity: 1,
+						y: 0
+					},
+					exit: {
+						opacity: 0,
+						y: "-100%"
+					},
+					children: item
+				}, selectedIdx)
+			}), /* @__PURE__ */ jsx(ChevronsUpDown, { className: "shrink-0 ms-auto size-4 text-fd-muted-foreground" })]
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			align: "start",
+			className: "flex flex-col gap-1 max-w-svw p-1 fd-scroll-container",
+			children: tabs.map((item, i) => {
+				const isActive = i === selectedIdx;
+				if (!isActive && item.unlisted) return;
+				return /* @__PURE__ */ jsxs(Link, {
+					href: item.url,
+					onClick,
+					...item.props,
+					className: cn("flex items-center gap-1.5 rounded-lg p-1.5 hover:bg-fd-accent hover:text-fd-accent-foreground", item.props?.className),
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "shrink-0 mb-auto size-4.5 empty:hidden",
+							children: item.icon
+						}),
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+							className: "text-sm font-medium leading-none",
+							children: item.title
+						}), /* @__PURE__ */ jsx("p", {
+							className: "text-[0.8125rem] text-fd-muted-foreground mt-1 empty:hidden",
+							children: item.description
+						})] }),
+						/* @__PURE__ */ jsx(Check, { className: cn("shrink-0 ms-auto size-3.5 text-fd-primary", !isActive && "invisible") })
+					]
+				}, item.url);
+			})
+		})]
+	});
+}
+//#endregion
+export { TabDropdown };

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

@@ -0,0 +1,39 @@
+import { BaseSlots, BaseSlotsProps } from "../shared/client.js";
+import { BaseLayoutProps, GetLayoutTabsOptions, LayoutTab, LinkItemType } from "../shared/index.js";
+import { SidebarDrawerProps, SidebarProps, SidebarProviderProps, useSidebar } from "./slots/sidebar.js";
+import { HeaderProps } from "./slots/header.js";
+import { FC } from "react";
+import * as PageTree from "@vx-oss/docs-core/page-tree";
+//#region src/layouts/glass/index.d.ts
+interface GlassSlots extends BaseSlots {
+  header: FC<HeaderProps>;
+  sidebar: {
+    main: FC<SidebarProps>;
+    provider: FC<SidebarProviderProps>;
+    use: typeof useSidebar;
+    drawer: FC<SidebarDrawerProps>;
+  };
+}
+interface GlassLayoutProps extends BaseLayoutProps {
+  tree: PageTree.Root;
+  tabs?: LayoutTab[] | GetLayoutTabsOptions | false;
+  aiChat?: {
+    open: boolean;
+    onOpenChange: (v: boolean) => void;
+  };
+  slots?: Partial<GlassSlots>;
+  sidebar?: Omit<SidebarProviderProps, 'children'>;
+}
+interface SlotsProps extends BaseSlotsProps<GlassLayoutProps> {
+  tabs: LayoutTab[];
+  aiChat?: GlassLayoutProps['aiChat'];
+}
+declare function useGlassLayout(): {
+  props: SlotsProps;
+  navItems: LinkItemType[];
+  menuItems: LinkItemType[];
+  slots: GlassSlots;
+};
+declare function GlassLayout(props: GlassLayoutProps): import("react").JSX.Element;
+//#endregion
+export { GlassLayout, GlassLayoutProps, GlassSlots, useGlassLayout };

package/dist/layouts/glass/index.js

@@ -0,0 +1,70 @@
+"use client";
+import { TreeContextProvider } from "../../contexts/tree.js";
+import { baseSlots } from "../shared/client.js";
+import { getLayoutTabs, useLinkItems } from "../shared/index.js";
+import { Sidebar, SidebarDrawer, SidebarProvider, useSidebar } from "./slots/sidebar.js";
+import { Header } from "./slots/header.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use, useMemo } from "react";
+//#region src/layouts/glass/index.tsx
+const LayoutContext = createContext(null);
+function useGlassLayout() {
+	const context = use(LayoutContext);
+	if (!context) throw new Error("Please use Glass layout components under <GlassLayout /> (`@vx-oss/docs-react/layouts/glass`).");
+	return context;
+}
+const { useBaseSlots } = baseSlots({ useProps() {
+	return useGlassLayout().props;
+} });
+function GlassLayout(props) {
+	const { tree, tabs: defaultTabs, aiChat, children, slots: defaultSlots = {} } = props;
+	const linkItems = useLinkItems(props);
+	const { baseSlots, baseProps } = useBaseSlots(props);
+	const tabs = useMemo(() => {
+		if (Array.isArray(defaultTabs)) return defaultTabs;
+		if (typeof defaultTabs === "object") return getLayoutTabs(tree, defaultTabs);
+		if (defaultTabs !== false) return getLayoutTabs(tree);
+		return [];
+	}, [tree, defaultTabs]);
+	const slots = {
+		...baseSlots,
+		header: defaultSlots.header ?? Header,
+		sidebar: defaultSlots.sidebar ?? {
+			drawer: SidebarDrawer,
+			main: Sidebar,
+			provider: SidebarProvider,
+			use: useSidebar
+		}
+	};
+	const leftSpace = "calc(50% - var(--fd-main-width)/2 - var(--fd-left-width))";
+	return /* @__PURE__ */ jsx(LayoutContext, {
+		value: {
+			props: {
+				tabs,
+				aiChat,
+				...baseProps
+			},
+			slots,
+			...linkItems
+		},
+		children: /* @__PURE__ */ jsx(slots.sidebar.provider, {
+			...props.sidebar,
+			children: /* @__PURE__ */ jsx(TreeContextProvider, {
+				tree,
+				children: /* @__PURE__ */ jsxs("div", {
+					id: "fd-glass-layout",
+					className: "grid overflow-x-clip min-h-dvh [--fd-main-width:900px] [--fd-left-width:0px] [--fd-right-width:0px]",
+					style: { gridTemplate: `"left left-margin main right-margin right" 1fr / var(--fd-left-width) ${leftSpace} 1fr calc(50% - var(--fd-main-width)/2 - var(--fd-right-width) + min(${leftSpace}, 0px)) var(--fd-right-width)` },
+					children: [
+						/* @__PURE__ */ jsx(slots.sidebar.drawer, {}),
+						/* @__PURE__ */ jsx(slots.sidebar.main, {}),
+						/* @__PURE__ */ jsx(slots.header, {}),
+						children
+					]
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { GlassLayout, useGlassLayout };

package/dist/layouts/glass/layout-tabs.js

@@ -0,0 +1,54 @@
+import { cn } from "../../utils/cn.js";
+import { useTabsGroups } from "../../contexts/tree.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../components/ui/popover.js";
+import { isLayoutTabActive } from "../shared/index.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 { ChevronsUpDown } from "lucide-react";
+import { useState } from "react";
+import { useTranslations } from "@fuma-translate/react";
+//#region src/layouts/glass/layout-tabs.tsx
+function LayoutTabsDropdown({ tabs: allTabs, className, size = "default", ...props }) {
+	const pathname = usePathname();
+	const t = useTranslations();
+	const tabs = useTabsGroups(allTabs).findLast((group) => typeof group.active?.root !== "string")?.options ?? [];
+	const selected = tabs.findLast((t) => isLayoutTabActive(t, pathname));
+	const [open, setOpen] = useState(false);
+	if (tabs.length === 0) return;
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+			className: cn("inline-flex items-center gap-2 text-sm font-medium rounded-full transition-colors hover:bg-fd-accent data-[state=open]:bg-fd-accent", size === "lg" && "text-[0.9375rem]", className),
+			...props,
+			children: [selected ? /* @__PURE__ */ jsxs(Fragment, { children: [selected.icon, /* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: selected.title
+			})] }) : /* @__PURE__ */ jsx("span", {
+				className: "text-fd-muted-foreground truncate",
+				children: t("Layout Tab", { note: "layout tab trigger" })
+			}), /* @__PURE__ */ jsx(ChevronsUpDown, { className: cn("ms-auto shrink-0 text-fd-muted-foreground", size === "default" && "size-3.5!", size === "lg" && "size-4!") })]
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			className: "flex flex-col p-1 rounded-xl w-(--radix-popover-trigger-width)",
+			align: "start",
+			children: tabs.map((t, i) => {
+				if (t.unlisted && t !== selected) return;
+				return /* @__PURE__ */ jsxs(Link, {
+					href: t.url,
+					className: cn("text-sm px-2 py-1.5 rounded-lg", selected === t ? "bg-fd-primary/10 text-fd-primary" : "hover:bg-fd-accent hover:text-fd-accent-foreground"),
+					onClick: () => setOpen(false),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "font-medium inline-flex items-center gap-2 [&_svg]:size-4",
+						children: [t.icon, t.title]
+					}), /* @__PURE__ */ jsx("p", {
+						className: cn("mt-1 text-xs text-fd-muted-foreground empty:hidden", selected === t && "text-fd-primary/80"),
+						children: t.description
+					})]
+				}, i);
+			})
+		})]
+	});
+}
+//#endregion
+export { LayoutTabsDropdown };

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

@@ -0,0 +1,31 @@
+import { MarkdownCopyButton, ViewOptionsPopover } from "../../shared/page-actions.js";
+import { TOCProps } from "./slots/toc.js";
+import { ComponentProps } from "react";
+import { TOCItemType } from "@vx-oss/docs-core/toc";
+//#region src/layouts/glass/page/index.d.ts
+interface DocsPageProps extends ComponentProps<'article'> {
+  toc?: TOCItemType[];
+  /**
+   * Extend the page to fill all available space
+   *
+   * @defaultValue false
+   */
+  full?: boolean | undefined;
+  tableOfContent?: TOCProps;
+}
+declare function useDocsPage(): {
+  full: boolean;
+};
+declare function DocsPage({ full, toc, tableOfContent, children }: DocsPageProps): import("react").JSX.Element;
+declare function EditOnGitHub(props: ComponentProps<'a'>): import("react").JSX.Element;
+/**
+ * Add typography styles
+ */
+declare function DocsBody({ children, className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+declare function DocsDescription({ children, className, ...props }: ComponentProps<'p'>): import("react").JSX.Element | null;
+declare function DocsTitle({ children, className, ...props }: ComponentProps<'h1'>): import("react").JSX.Element;
+declare function PageLastUpdate({ date: value, ...props }: Omit<ComponentProps<'p'>, 'children'> & {
+  date: Date;
+}): import("react").JSX.Element;
+//#endregion
+export { DocsBody, DocsDescription, DocsPage, DocsPageProps, DocsTitle, EditOnGitHub, MarkdownCopyButton, PageLastUpdate, ViewOptionsPopover, useDocsPage };

package/dist/layouts/glass/page/index.js

@@ -0,0 +1,92 @@
+"use client";
+import { cn } from "../../../utils/cn.js";
+import { buttonVariants } from "../../../components/ui/button.js";
+import { MarkdownCopyButton, ViewOptionsPopover } from "../../shared/page-actions.js";
+import { Footer } from "./slots/footer.js";
+import { Breadcrumb } from "./slots/breadcrumb.js";
+import { TOC, TOCProvider } from "./slots/toc.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Edit } from "lucide-react";
+import { createContext, use, useEffect, useState } from "react";
+import { useTranslations } from "@fuma-translate/react";
+//#region src/layouts/glass/page/index.tsx
+const PageContext = createContext(null);
+function useDocsPage() {
+	const context = use(PageContext);
+	if (!context) throw new Error("Please use page components under <DocsPage /> (`@vx-oss/docs-react/layouts/glass/page`).");
+	return context;
+}
+const Empty = [];
+function DocsPage({ full = false, toc = Empty, tableOfContent, children }) {
+	return /* @__PURE__ */ jsx(PageContext, {
+		value: { full },
+		children: /* @__PURE__ */ jsxs(TOCProvider, {
+			toc,
+			children: [/* @__PURE__ */ jsxs("div", {
+				"data-fd-full": full,
+				className: cn("flex flex-col gap-2 p-6 pb-16 min-w-0 [grid-area:main] md:pt-16 md:pb-8", full && "layout:[--fd-main-width:1200px]"),
+				children: [
+					/* @__PURE__ */ jsx(Breadcrumb, {}),
+					children,
+					/* @__PURE__ */ jsx(Footer, {})
+				]
+			}), /* @__PURE__ */ jsx(TOC, { ...tableOfContent })]
+		})
+	});
+}
+function EditOnGitHub(props) {
+	const t = useTranslations({ note: "edit page" });
+	return /* @__PURE__ */ jsx("a", {
+		target: "_blank",
+		rel: "noreferrer noopener",
+		...props,
+		className: cn(buttonVariants({
+			color: "secondary",
+			size: "sm"
+		}), "gap-1.5 not-prose", props.className),
+		children: props.children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Edit, { className: "size-3.5" }), t("Edit on GitHub")] })
+	});
+}
+/**
+* Add typography styles
+*/
+function DocsBody({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("prose flex-1", className),
+		children
+	});
+}
+function DocsDescription({ children, className, ...props }) {
+	if (children === void 0) return null;
+	return /* @__PURE__ */ jsx("p", {
+		...props,
+		className: cn("mb-8 text-lg text-fd-muted-foreground", className),
+		children
+	});
+}
+function DocsTitle({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("h1", {
+		...props,
+		className: cn("text-[1.75em] font-semibold", className),
+		children
+	});
+}
+function PageLastUpdate({ date: value, ...props }) {
+	const t = useTranslations({ note: "page footer" });
+	const [date, setDate] = useState("");
+	useEffect(() => {
+		setDate(value.toLocaleDateString());
+	}, [value]);
+	return /* @__PURE__ */ jsxs("p", {
+		...props,
+		className: cn("text-sm text-fd-muted-foreground", props.className),
+		children: [
+			t("Last updated on"),
+			" ",
+			date
+		]
+	});
+}
+//#endregion
+export { DocsBody, DocsDescription, DocsPage, DocsTitle, EditOnGitHub, MarkdownCopyButton, PageLastUpdate, ViewOptionsPopover, useDocsPage };

package/dist/layouts/glass/page/slots/breadcrumb.d.ts

@@ -0,0 +1,7 @@
+import { ComponentProps } from "react";
+import { BreadcrumbOptions } from "@vx-oss/docs-core/breadcrumb";
+//#region src/layouts/glass/page/slots/breadcrumb.d.ts
+type BreadcrumbProps = BreadcrumbOptions & ComponentProps<'div'>;
+declare function Breadcrumb({ includeRoot, includeSeparator, includePage, ...props }: BreadcrumbProps): import("react").JSX.Element | null;
+//#endregion
+export { Breadcrumb, BreadcrumbProps };

package/dist/layouts/glass/page/slots/breadcrumb.js

@@ -0,0 +1,44 @@
+"use client";
+import { cn } from "../../../../utils/cn.js";
+import { useTreeContext, useTreePath } from "../../../../contexts/tree.js";
+import Link from "@vx-oss/docs-core/link";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import { Fragment as Fragment$1, useMemo } from "react";
+import { getBreadcrumbItemsFromPath } from "@vx-oss/docs-core/breadcrumb";
+//#region src/layouts/glass/page/slots/breadcrumb.tsx
+function Breadcrumb({ includeRoot, includeSeparator, includePage, ...props }) {
+	const path = useTreePath();
+	const { root } = useTreeContext();
+	const items = useMemo(() => {
+		return getBreadcrumbItemsFromPath(root, path, {
+			includePage,
+			includeSeparator,
+			includeRoot
+		});
+	}, [
+		includePage,
+		includeRoot,
+		includeSeparator,
+		path,
+		root
+	]);
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("flex items-center gap-1.5 text-sm text-fd-muted-foreground", props.className),
+		children: items.map((item, i) => {
+			const className = cn("truncate", i === items.length - 1 && "text-fd-primary font-medium");
+			return /* @__PURE__ */ jsxs(Fragment$1, { children: [i !== 0 && /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5 shrink-0" }), item.url ? /* @__PURE__ */ jsx(Link, {
+				href: item.url,
+				className: cn(className, "transition-opacity hover:opacity-80"),
+				children: item.name
+			}) : /* @__PURE__ */ jsx("span", {
+				className,
+				children: item.name
+			})] }, i);
+		})
+	});
+}
+//#endregion
+export { Breadcrumb };

package/dist/layouts/glass/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/glass/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/glass/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/glass/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/glass/page/slots/toc.d.ts

@@ -0,0 +1,19 @@
+import { TOCProviderProps as TOCProviderProps$1 } from "../../../../components/toc/index.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/layouts/glass/page/slots/toc.d.ts
+type TOCProviderProps = TOCProviderProps$1;
+declare function TOCProvider(props: TOCProviderProps): import("react").JSX.Element;
+interface 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;
+}
+declare function TOC({ container, header, footer }: TOCProps): import("react").JSX.Element | undefined;
+//#endregion
+export { TOC, TOCProps, TOCProvider, TOCProviderProps };

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

@@ -0,0 +1,108 @@
+"use client";
+import { cn } from "../../../../utils/cn.js";
+import { TOCProvider as TOCProvider$1, TOCScrollArea, useTOCItems } from "../../../../components/toc/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Text } from "lucide-react";
+import { createContext, use, useMemo, useRef, useState } from "react";
+import { useTranslations } from "@fuma-translate/react";
+import { TOCItem } from "@vx-oss/docs-core/toc";
+import { useOnChange } from "@vx-oss/docs-core/utils/use-on-change";
+//#region src/layouts/glass/page/slots/toc.tsx
+const Context = createContext(null);
+function TOCProvider(props) {
+	return /* @__PURE__ */ jsx(TOCProvider$1, { ...props });
+}
+function useContext$1() {
+	return use(Context);
+}
+function TOC({ container, header, footer }) {
+	const t = useTranslations({ note: "table of contents" });
+	const items = useTOCItems();
+	const [hover, setHover] = useState(false);
+	const [mobileOpen, setMobileOpen] = useState(false);
+	const [inAnimation, setInAnimation] = useState(false);
+	const exitTimerRef = useRef(null);
+	const transitionTimerRef = useRef(null);
+	const open = hover || mobileOpen;
+	useOnChange(open, () => {
+		setInAnimation(true);
+		if (transitionTimerRef.current) window.clearTimeout(transitionTimerRef.current);
+		transitionTimerRef.current = window.setTimeout(() => {
+			setInAnimation(false);
+		}, 300);
+	});
+	const ctx = useMemo(() => ({
+		open,
+		setMobileOpen,
+		inAnimation
+	}), [open, inAnimation]);
+	if (items.length === 0 && !footer && !header) return;
+	return /* @__PURE__ */ jsxs(Context, {
+		value: ctx,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cn("fixed inset-0 z-10 backdrop-blur-sm transition-opacity duration-300 [mask-image:radial-gradient(circle_at_center_right,white,white_200px,transparent_500px)] xl:hidden", !open && "opacity-0 pointer-events-none"),
+			onClick: () => setMobileOpen(false)
+		}), /* @__PURE__ */ jsx(TOCScrollArea, {
+			id: "nd-toc",
+			...container,
+			className: cn("z-10 grid transition-[width,padding] duration-300 [grid-area:right]", "xl:sticky xl:top-10 xl:h-[calc(100dvh---spacing(10))] md:layout:[--fd-right-width:12px] xl:layout:[--fd-right-width:240px] xl:items-center xl:pe-4", "max-xl:fixed max-xl:top-1/2 max-xl:-translate-y-1/2 max-xl:end-1 max-xl:bg-fd-popover max-xl:text-fd-popover-foreground max-xl:border max-xl:rounded-xl max-xl:shadow-md max-xl:mask-none max-xl:max-h-[calc(100dvh---spacing(32))] max-xl:grid-cols-[calc(240px---spacing(6))]", inAnimation && "overflow-y-hidden", open ? "max-xl:w-[240px] max-xl:p-3" : "max-md:w-4 max-md:ps-[calc(--spacing(1.5)-1px)] max-xl:w-6 max-xl:ps-[calc(--spacing(2.5)-1px)] max-xl:overflow-clip", container?.className),
+			onPointerDown: (e) => {
+				if (!mobileOpen && (e.pointerType === "touch" || e.pointerType === "pen")) setMobileOpen(true);
+			},
+			onPointerEnter: (e) => {
+				if (e.pointerType === "mouse") {
+					if (exitTimerRef.current) window.clearTimeout(exitTimerRef.current);
+					if (!hover) setHover(true);
+				}
+			},
+			onPointerLeave: (e) => {
+				if (hover && e.pointerType === "mouse") {
+					if (exitTimerRef.current) window.clearTimeout(exitTimerRef.current);
+					exitTimerRef.current = window.setTimeout(() => {
+						setHover(false);
+					}, window.innerWidth - e.clientX < 30 ? 700 : 50);
+				}
+			},
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col xl:items-end xl:text-end",
+				children: [
+					header,
+					/* @__PURE__ */ jsxs("h3", {
+						id: "nd-toc-title",
+						className: cn("inline-flex items-center gap-1.5 overflow-hidden text-xs text-fd-muted-foreground transition-[opacity,height] opacity-0 h-0", open ? "opacity-100 h-6" : "xl:[@media(hover:none)]:opacity-100 xl:[@media(hover:none)]:h-6"),
+						children: [/* @__PURE__ */ jsx(Text, { className: "size-3.5 shrink-0" }), t("On this page")]
+					}),
+					/* @__PURE__ */ jsx(TOCPanel, {}),
+					footer
+				]
+			})
+		})]
+	});
+}
+function TOCPanel({ className, style, ...props }) {
+	const items = useTOCItems();
+	const { open, inAnimation, setMobileOpen } = useContext$1();
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("grid grid-cols-1 transition-[grid-template-rows]", open ? "[--row:calc(6*var(--spacing))]" : "[--row:calc(3*var(--spacing))] xl:[@media(hover:none)]:[--row:calc(6*var(--spacing))]", (!open || inAnimation) && "pointer-events-none xl:[@media(hover:none)]:pointer-events-auto", className),
+		style: {
+			...style,
+			gridTemplateRows: `repeat(${items.length}, var(--row))`
+		},
+		...props,
+		children: items.map((item) => /* @__PURE__ */ jsxs(TOCItem, {
+			href: item.url,
+			className: "group prose prose-sm flex items-center gap-2 text-xs text-fd-muted-foreground transition-colors data-[active=true]:text-fd-primary data-[active=false]:hover:text-fd-accent-foreground xl:flex-row-reverse",
+			onClick: () => setMobileOpen(false),
+			autoScroll: open && !inAnimation,
+			children: [/* @__PURE__ */ jsx("div", {
+				className: cn("shrink-0 bg-fd-muted-foreground/50 rounded-full size-1 transition-[background-color,width,height] group-data-[active=true]:bg-fd-primary", open ? "w-(--width) h-px" : "transition-[width,height] duration-300 xl:[@media(hover:none)]:w-(--width) xl:[@media(hover:none)]:h-px"),
+				style: { "--width": `calc(pow(${item.depth}, 1.5) * var(--spacing))` }
+			}), /* @__PURE__ */ jsx("span", {
+				className: cn("truncate transition-opacity opacity-0", open ? "opacity-100" : "xl:[@media(hover:none)]:opacity-100"),
+				children: item.title
+			})]
+		}, item.url))
+	});
+}
+//#endregion
+export { TOC, TOCProvider };

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

@@ -0,0 +1,6 @@
+import { ComponentProps } from "react";
+//#region src/layouts/glass/slots/header.d.ts
+type HeaderProps = ComponentProps<'div'>;
+declare function Header({ className, ...props }: HeaderProps): import("react").JSX.Element;
+//#endregion
+export { Header, HeaderProps };