@vx-oss/docs-react 1.0.3

package/dist/components/sidebar/base.js

@@ -0,0 +1,277 @@
+"use client";
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../utils/cn.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
+import { ScrollArea, ScrollViewport } from "../ui/scroll-area.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, ExternalLink } from "lucide-react";
+import { createContext, use, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslations } from "@fuma-translate/react";
+import { useOnChange } from "@vx-oss/docs-core/utils/use-on-change";
+import { useMediaQuery } from "@vx-oss/docs-core/utils/use-media-query";
+import { Presence } from "@radix-ui/react-presence";
+import scrollIntoView from "scroll-into-view-if-needed";
+//#region src/components/sidebar/base.tsx
+var base_exports = /* @__PURE__ */ __exportAll({
+	SidebarCollapseTrigger: () => SidebarCollapseTrigger,
+	SidebarContent: () => SidebarContent,
+	SidebarDrawerContent: () => SidebarDrawerContent,
+	SidebarDrawerOverlay: () => SidebarDrawerOverlay,
+	SidebarFolder: () => SidebarFolder,
+	SidebarFolderContent: () => SidebarFolderContent,
+	SidebarFolderLink: () => SidebarFolderLink,
+	SidebarFolderTrigger: () => SidebarFolderTrigger,
+	SidebarItem: () => SidebarItem,
+	SidebarProvider: () => SidebarProvider,
+	SidebarSeparator: () => SidebarSeparator,
+	SidebarTrigger: () => SidebarTrigger,
+	SidebarViewport: () => SidebarViewport,
+	useAutoScroll: () => useAutoScroll,
+	useFolder: () => useFolder,
+	useFolderDepth: () => useFolderDepth,
+	useSidebar: () => useSidebar
+});
+const SidebarContext = createContext(null);
+const FolderContext = createContext(null);
+function SidebarProvider({ defaultOpenLevel = 0, prefetch, children }) {
+	const closeOnRedirect = useRef(true);
+	const [open, setOpen] = useState(false);
+	const [collapsed, setCollapsed] = useState(false);
+	const pathname = usePathname();
+	const mode = useMediaQuery("(width < 768px)") ? "drawer" : "full";
+	useOnChange(pathname, () => {
+		if (closeOnRedirect.current) setOpen(false);
+		closeOnRedirect.current = true;
+	});
+	return /* @__PURE__ */ jsx(SidebarContext, {
+		value: useMemo(() => ({
+			open,
+			setOpen,
+			collapsed,
+			setCollapsed,
+			closeOnRedirect,
+			defaultOpenLevel,
+			prefetch,
+			mode
+		}), [
+			open,
+			collapsed,
+			defaultOpenLevel,
+			prefetch,
+			mode
+		]),
+		children
+	});
+}
+function useSidebar() {
+	const ctx = use(SidebarContext);
+	if (!ctx) throw new Error("Missing SidebarContext, make sure you have wrapped the component in <DocsLayout /> and the context is available.");
+	return ctx;
+}
+function useFolder() {
+	return use(FolderContext);
+}
+function useFolderDepth() {
+	return use(FolderContext)?.depth ?? 0;
+}
+function SidebarContent({ mode: allowedMode = "full", children }) {
+	const { collapsed, mode } = useSidebar();
+	const [hover, setHover] = useState(false);
+	const ref = useRef(null);
+	const timerRef = useRef(0);
+	useOnChange(collapsed, () => {
+		if (collapsed) setHover(false);
+	});
+	if (allowedMode !== true && allowedMode !== mode) return;
+	function shouldIgnoreHover(e) {
+		const element = ref.current;
+		if (!element) return true;
+		return !collapsed || e.pointerType === "touch" || element.getAnimations().length > 0;
+	}
+	return children({
+		ref,
+		collapsed,
+		hovered: hover,
+		onPointerEnter(e) {
+			if (shouldIgnoreHover(e)) return;
+			window.clearTimeout(timerRef.current);
+			setHover(true);
+		},
+		onPointerLeave(e) {
+			if (shouldIgnoreHover(e)) return;
+			window.clearTimeout(timerRef.current);
+			timerRef.current = window.setTimeout(() => setHover(false), Math.min(e.clientX, document.body.clientWidth - e.clientX) > 100 ? 0 : 500);
+		}
+	});
+}
+function SidebarViewport({ area, viewport, children }) {
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		...area,
+		className: cn("min-h-0 flex-1", area?.className),
+		children: /* @__PURE__ */ jsx(ScrollViewport, {
+			...viewport,
+			className: cn("*:flex! *:flex-col! *:gap-0.5! p-4 overscroll-contain mask-[linear-gradient(to_bottom,transparent,white_12px,white_calc(100%-12px),transparent)]", viewport?.className),
+			children
+		})
+	});
+}
+function SidebarDrawerOverlay(props) {
+	const { open, setOpen, mode } = useSidebar();
+	if (mode !== "drawer") return;
+	return /* @__PURE__ */ jsx(Presence, {
+		present: open,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-state": open ? "open" : "closed",
+			onClick: () => setOpen(false),
+			...props
+		})
+	});
+}
+function SidebarDrawerContent({ className, children, ...props }) {
+	const { open, mode } = useSidebar();
+	const state = open ? "open" : "closed";
+	if (mode !== "drawer") return;
+	return /* @__PURE__ */ jsx(Presence, {
+		present: open,
+		children: ({ present }) => /* @__PURE__ */ jsx("aside", {
+			id: "nd-sidebar-mobile",
+			"data-state": state,
+			className: cn(!present && "invisible", className),
+			...props,
+			children
+		})
+	});
+}
+function SidebarSeparator(props) {
+	return /* @__PURE__ */ jsx("p", { ...props });
+}
+function SidebarItem({ icon, active = false, children, ...props }) {
+	const ref = useRef(null);
+	const { prefetch } = useSidebar();
+	useAutoScroll(active, ref);
+	return /* @__PURE__ */ jsxs(Link, {
+		ref,
+		"data-active": active,
+		prefetch,
+		...props,
+		children: [icon ?? (props.external ? /* @__PURE__ */ jsx(ExternalLink, {}) : null), children]
+	});
+}
+function SidebarFolder({ defaultOpen: defaultOpenProp, collapsible = true, active = false, children, ...props }) {
+	const { defaultOpenLevel } = useSidebar();
+	const depth = useFolderDepth() + 1;
+	const defaultOpen = collapsible === false || active || (defaultOpenProp ?? defaultOpenLevel >= depth);
+	const [open, setOpen] = useState(defaultOpen);
+	useOnChange(defaultOpen, (v) => {
+		if (v) setOpen(v);
+	});
+	return /* @__PURE__ */ jsx(Collapsible, {
+		open,
+		onOpenChange: setOpen,
+		disabled: !collapsible,
+		...props,
+		children: /* @__PURE__ */ jsx(FolderContext, {
+			value: useMemo(() => ({
+				open,
+				setOpen,
+				depth,
+				collapsible
+			}), [
+				collapsible,
+				depth,
+				open
+			]),
+			children
+		})
+	});
+}
+function SidebarFolderTrigger({ children, ...props }) {
+	const { open, collapsible } = use(FolderContext);
+	if (collapsible) return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronDown, {
+			"data-icon": true,
+			className: cn("ms-auto transition-transform", !open && "-rotate-90 rtl:rotate-90")
+		})]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		children
+	});
+}
+function SidebarFolderLink({ children, active = false, ...props }) {
+	const ref = useRef(null);
+	const { open, setOpen, collapsible } = use(FolderContext);
+	const { prefetch } = useSidebar();
+	useAutoScroll(active, ref);
+	return /* @__PURE__ */ jsxs(Link, {
+		ref,
+		"data-active": active,
+		onClick: (e) => {
+			if (!collapsible) return;
+			if (e.target instanceof Element && e.target.matches("[data-icon], [data-icon] *")) {
+				setOpen(!open);
+				e.preventDefault();
+			} else setOpen(active ? !open : true);
+		},
+		prefetch,
+		...props,
+		children: [children, collapsible && /* @__PURE__ */ jsx(ChevronDown, {
+			"data-icon": true,
+			className: cn("ms-auto transition-transform", !open && "-rotate-90 rtl:rotate-90")
+		})]
+	});
+}
+function SidebarFolderContent(props) {
+	return /* @__PURE__ */ jsx(CollapsibleContent, {
+		...props,
+		children: props.children
+	});
+}
+function SidebarTrigger({ children, ...props }) {
+	const { open, setOpen } = useSidebar();
+	const t = useTranslations({ note: "sidebar" });
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": open ? t("Close Sidebar", { note: "aria-label" }) : t("Open Sidebar", { note: "aria-label" }),
+		"aria-expanded": open,
+		"aria-controls": "nd-sidebar-mobile",
+		onClick: () => setOpen((prev) => !prev),
+		...props,
+		children
+	});
+}
+function SidebarCollapseTrigger(props) {
+	const { collapsed, setCollapsed } = useSidebar();
+	const t = useTranslations({ note: "sidebar" });
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": t("Collapse Sidebar", { note: "aria-label" }),
+		"data-collapsed": collapsed,
+		onClick: () => {
+			setCollapsed((prev) => !prev);
+		},
+		...props,
+		children: props.children
+	});
+}
+/**
+* scroll to the element if `active` is true
+*/
+function useAutoScroll(active, ref) {
+	const { mode } = useSidebar();
+	useEffect(() => {
+		if (active && ref.current) scrollIntoView(ref.current, {
+			boundary: document.getElementById(mode === "drawer" ? "nd-sidebar-mobile" : "nd-sidebar"),
+			scrollMode: "if-needed"
+		});
+	}, [
+		active,
+		mode,
+		ref
+	]);
+}
+//#endregion
+export { SidebarCollapseTrigger, SidebarContent, SidebarDrawerContent, SidebarDrawerOverlay, SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarItem, SidebarProvider, SidebarSeparator, SidebarTrigger, SidebarViewport, base_exports, useAutoScroll, useFolder, useFolderDepth, useSidebar };

package/dist/components/sidebar/link-item.d.ts

@@ -0,0 +1,12 @@
+import { base_d_exports } from "./base.js";
+import { LinkItemType } from "../../layouts/shared/index.js";
+import { HTMLAttributes } from "react";
+//#region src/components/sidebar/link-item.d.ts
+type InternalComponents = Pick<typeof base_d_exports, 'SidebarFolder' | 'SidebarFolderLink' | 'SidebarFolderContent' | 'SidebarFolderTrigger' | 'SidebarItem'>;
+declare function createLinkItemRenderer({ SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarItem }: InternalComponents): ({ item, ...props }: HTMLAttributes<HTMLElement> & {
+  item: Exclude<LinkItemType, {
+    type: "icon";
+  }>;
+}) => import("react").JSX.Element;
+//#endregion
+export { createLinkItemRenderer };

package/dist/components/sidebar/link-item.js

@@ -0,0 +1,37 @@
+"use client";
+import { isLinkItemActive } from "../../layouts/shared/index.js";
+import { usePathname } from "@vx-oss/docs-core/framework";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/sidebar/link-item.tsx
+function createLinkItemRenderer({ SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarItem }) {
+	/**
+	* Render sidebar items from page tree
+	*/
+	return function SidebarLinkItem({ item, ...props }) {
+		const pathname = usePathname();
+		const active = isLinkItemActive(item, pathname);
+		if (item.type === "custom") return /* @__PURE__ */ jsx("div", {
+			...props,
+			children: item.children
+		});
+		if (item.type === "menu") return /* @__PURE__ */ jsxs(SidebarFolder, {
+			...props,
+			children: [item.url ? /* @__PURE__ */ jsxs(SidebarFolderLink, {
+				href: item.url,
+				active,
+				external: item.external,
+				children: [item.icon, item.text]
+			}) : /* @__PURE__ */ jsxs(SidebarFolderTrigger, { children: [item.icon, item.text] }), /* @__PURE__ */ jsx(SidebarFolderContent, { children: item.items.map((child, i) => /* @__PURE__ */ jsx(SidebarLinkItem, { item: child }, i)) })]
+		});
+		return /* @__PURE__ */ jsx(SidebarItem, {
+			href: item.url,
+			icon: item.icon,
+			external: item.external,
+			active,
+			...props,
+			children: item.text
+		});
+	};
+}
+//#endregion
+export { createLinkItemRenderer };

package/dist/components/sidebar/page-tree.d.ts

@@ -0,0 +1,20 @@
+import { base_d_exports } from "./base.js";
+import { FC, ReactNode } from "react";
+import * as PageTree from "@vx-oss/docs-core/page-tree";
+//#region src/components/sidebar/page-tree.d.ts
+interface SidebarPageTreeComponents {
+  Item: FC<{
+    item: PageTree.Item;
+  }>;
+  Folder: FC<{
+    item: PageTree.Folder;
+    children: ReactNode;
+  }>;
+  Separator: FC<{
+    item: PageTree.Separator;
+  }>;
+}
+type InternalComponents = Pick<typeof base_d_exports, 'SidebarSeparator' | 'SidebarFolder' | 'SidebarFolderLink' | 'SidebarFolderContent' | 'SidebarFolderTrigger' | 'SidebarItem'>;
+declare function createPageTreeRenderer({ SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarSeparator, SidebarItem }: InternalComponents): (components: Partial<SidebarPageTreeComponents>) => import("react").JSX.Element;
+//#endregion
+export { SidebarPageTreeComponents, createPageTreeRenderer };

package/dist/components/sidebar/page-tree.js

@@ -0,0 +1,69 @@
+import { useTreeContext, useTreePath } from "../../contexts/tree.js";
+import { isActive } from "../../utils/urls.js";
+import { usePathname } from "@vx-oss/docs-core/framework";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, createContext, use, useMemo } from "react";
+//#region src/components/sidebar/page-tree.tsx
+const RendererContext = createContext(null);
+function createPageTreeRenderer({ SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarSeparator, SidebarItem }) {
+	function renderList(nodes) {
+		return nodes.map((node, i) => /* @__PURE__ */ jsx(PageTreeNode, { node }, i));
+	}
+	function PageTreeNode({ node }) {
+		const { Separator, Item, Folder, pathname } = use(RendererContext);
+		if (node.type === "separator") {
+			if (Separator) return /* @__PURE__ */ jsx(Separator, { item: node });
+			return /* @__PURE__ */ jsxs(SidebarSeparator, { children: [node.icon, node.name] });
+		}
+		if (node.type === "folder") {
+			const path = useTreePath();
+			if (Folder) return /* @__PURE__ */ jsx(Folder, {
+				item: node,
+				children: renderList(node.children)
+			});
+			return /* @__PURE__ */ jsxs(SidebarFolder, {
+				collapsible: node.collapsible,
+				active: path.includes(node),
+				defaultOpen: node.defaultOpen,
+				children: [node.index ? /* @__PURE__ */ jsxs(SidebarFolderLink, {
+					href: node.index.url,
+					active: isActive(node.index.url, pathname),
+					external: node.index.external,
+					children: [node.icon, node.name]
+				}) : /* @__PURE__ */ jsxs(SidebarFolderTrigger, { children: [node.icon, node.name] }), /* @__PURE__ */ jsx(SidebarFolderContent, { children: renderList(node.children) })]
+			});
+		}
+		if (Item) return /* @__PURE__ */ jsx(Item, { item: node });
+		return /* @__PURE__ */ jsx(SidebarItem, {
+			href: node.url,
+			external: node.external,
+			active: isActive(node.url, pathname),
+			icon: node.icon,
+			children: node.name
+		});
+	}
+	/**
+	* Render sidebar items from page tree
+	*/
+	return function SidebarPageTree(components) {
+		const { Folder, Item, Separator } = components;
+		const { root } = useTreeContext();
+		const pathname = usePathname();
+		return /* @__PURE__ */ jsx(RendererContext, {
+			value: useMemo(() => ({
+				Folder,
+				Item,
+				Separator,
+				pathname
+			}), [
+				Folder,
+				Item,
+				Separator,
+				pathname
+			]),
+			children: /* @__PURE__ */ jsx(Fragment$1, { children: renderList(root.children) }, root.$id)
+		});
+	};
+}
+//#endregion
+export { createPageTreeRenderer };

package/dist/components/sidebar/tabs/dropdown.d.ts

@@ -0,0 +1,15 @@
+import { LayoutTab, isLayoutTabActive } from "../../../layouts/shared/index.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/sidebar/tabs/dropdown.d.ts
+type SidebarTabWithProps = LayoutTab;
+/**
+ * Renders the given tabs as a dropdown per tabs group, one for each root folder on the
+ * current page's path, letting users switch between root folders of the same type.
+ */
+declare function SidebarTabsDropdown({ options, placeholder, ...props }: {
+  placeholder?: ReactNode;
+  options: LayoutTab[];
+} & ComponentProps<'button'>): import("react").JSX.Element[];
+declare const isTabActive: typeof isLayoutTabActive;
+//#endregion
+export { SidebarTabWithProps, SidebarTabsDropdown, isTabActive };

package/dist/components/sidebar/tabs/dropdown.js

@@ -0,0 +1,83 @@
+"use client";
+import { cn } from "../../../utils/cn.js";
+import { useTabsGroups } from "../../../contexts/tree.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover.js";
+import { isLayoutTabActive } from "../../../layouts/shared/index.js";
+import { useSidebar } from "../base.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";
+//#region src/components/sidebar/tabs/dropdown.tsx
+/**
+* Renders the given tabs as a dropdown per tabs group, one for each root folder on the
+* current page's path, letting users switch between root folders of the same type.
+*/
+function SidebarTabsDropdown({ options, placeholder, ...props }) {
+	return useTabsGroups(options).map((group, i) => /* @__PURE__ */ jsx(Dropdown, {
+		options: group.options,
+		placeholder,
+		...props
+	}, i));
+}
+function Dropdown({ options, placeholder, ...props }) {
+	const [open, setOpen] = useState(false);
+	const { closeOnRedirect } = useSidebar();
+	const pathname = usePathname();
+	const selected = useMemo(() => {
+		return options.findLast((item) => isLayoutTabActive(item, pathname));
+	}, [options, pathname]);
+	const onClick = () => {
+		closeOnRedirect.current = false;
+		setOpen(false);
+	};
+	const item = selected ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		className: "size-9 shrink-0 empty:hidden md:size-5",
+		children: selected.icon
+	}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+		className: "text-sm font-medium",
+		children: selected.title
+	}), /* @__PURE__ */ jsx("p", {
+		className: "text-sm text-fd-muted-foreground empty:hidden md:hidden",
+		children: selected.description
+	})] })] }) : placeholder;
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [item && /* @__PURE__ */ jsxs(PopoverTrigger, {
+			...props,
+			className: cn("flex items-center gap-2 rounded-lg p-2 border bg-fd-secondary/50 text-start text-fd-secondary-foreground transition-colors hover:bg-fd-accent data-[state=open]:bg-fd-accent data-[state=open]:text-fd-accent-foreground", props.className),
+			children: [item, /* @__PURE__ */ jsx(ChevronsUpDown, { className: "shrink-0 ms-auto size-4 text-fd-muted-foreground" })]
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			className: "flex flex-col gap-1 w-(--radix-popover-trigger-width) p-1 fd-scroll-container",
+			children: options.map((item) => {
+				const isActive = selected && item.url === selected.url;
+				if (!isActive && item.unlisted) return;
+				return /* @__PURE__ */ jsxs(Link, {
+					href: item.url,
+					onClick,
+					...item.props,
+					className: cn("flex items-center gap-2 rounded-lg p-1.5 hover:bg-fd-accent hover:text-fd-accent-foreground", item.props?.className),
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "shrink-0 size-9 md:mb-auto md:size-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);
+			})
+		})]
+	});
+}
+const isTabActive = isLayoutTabActive;
+//#endregion
+export { SidebarTabsDropdown, isTabActive };

package/dist/components/sidebar/tabs/index.d.ts

@@ -0,0 +1,8 @@
+import { GetLayoutTabsOptions, LayoutTab } from "../../../layouts/shared/index.js";
+import * as PageTree from "@vx-oss/docs-core/page-tree";
+//#region src/components/sidebar/tabs/index.d.ts
+type SidebarTab = LayoutTab;
+type GetSidebarTabsOptions = GetLayoutTabsOptions;
+declare function getSidebarTabs(tree: PageTree.Root, { transform }?: GetSidebarTabsOptions): SidebarTab[];
+//#endregion
+export { GetSidebarTabsOptions, SidebarTab, getSidebarTabs };

package/dist/components/sidebar/tabs/index.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/sidebar/tabs/index.tsx
+const defaultTransform = (option, node) => {
+	if (!node.icon) return option;
+	return {
+		...option,
+		icon: /* @__PURE__ */ jsx("div", {
+			className: "size-full [&_svg]:size-full max-md:p-1.5 max-md:rounded-md max-md:border max-md:bg-fd-secondary",
+			children: node.icon
+		})
+	};
+};
+function getSidebarTabs(tree, { transform = defaultTransform } = {}) {
+	const results = [];
+	function scanOptions(node, unlisted) {
+		if ("root" in node && node.root) {
+			const urls = getFolderUrls(node);
+			if (urls.size > 0) {
+				const option = {
+					url: urls.values().next().value ?? "",
+					title: node.name,
+					icon: node.icon,
+					unlisted,
+					description: node.description,
+					urls
+				};
+				const mapped = transform ? transform(option, node) : option;
+				if (mapped) results.push(mapped);
+			}
+		}
+		for (const child of node.children) if (child.type === "folder") scanOptions(child, unlisted);
+	}
+	scanOptions(tree);
+	if (tree.fallback) scanOptions(tree.fallback, true);
+	return results;
+}
+function getFolderUrls(folder, output = /* @__PURE__ */ new Set()) {
+	if (folder.index) output.add(folder.index.url);
+	for (const child of folder.children) {
+		if (child.type === "page" && !child.external) output.add(child.url);
+		if (child.type === "folder") getFolderUrls(child, output);
+	}
+	return output;
+}
+//#endregion
+export { getSidebarTabs };

package/dist/components/steps.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+//#region src/components/steps.d.ts
+declare function Steps({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+declare function Step({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+//#endregion
+export { Step, Steps };

package/dist/components/steps.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/steps.tsx
+function Steps({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "fd-steps",
+		children
+	});
+}
+function Step({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "fd-step",
+		children
+	});
+}
+//#endregion
+export { Step, Steps };

package/dist/components/tabs.d.ts

@@ -0,0 +1,33 @@
+import { Tabs as Tabs$1, TabsContent as TabsContent$1, TabsList as TabsList$1, TabsTrigger as TabsTrigger$1 } from "./ui/tabs.js";
+import * as React$1 from "react";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/tabs.d.ts
+interface TabsProps extends Omit<ComponentProps<typeof Tabs$1>, 'value' | 'onValueChange'> {
+  /**
+   * Use simple mode instead of advanced usage as documented in https://radix-ui.com/primitives/docs/components/tabs.
+   */
+  items?: string[];
+  /**
+   * Shortcut for `defaultValue` when `items` is provided.
+   *
+   * @defaultValue 0
+   */
+  defaultIndex?: number;
+  /**
+   * Additional label in tabs list when `items` is provided.
+   */
+  label?: ReactNode;
+}
+declare function TabsList(props: React$1.ComponentProps<typeof TabsList$1>): React$1.JSX.Element;
+declare function TabsTrigger(props: React$1.ComponentProps<typeof TabsTrigger$1>): React$1.JSX.Element;
+declare function Tabs({ ref, className, items, label, defaultIndex, defaultValue, ...props }: TabsProps): React$1.JSX.Element;
+interface TabProps extends Omit<ComponentProps<typeof TabsContent$1>, 'value'> {
+  /**
+   * Value of tab, detect from index if unspecified.
+   */
+  value?: string;
+}
+declare function Tab({ value, ...props }: TabProps): React$1.JSX.Element;
+declare function TabsContent({ value, className, ...props }: ComponentProps<typeof TabsContent$1>): React$1.JSX.Element;
+//#endregion
+export { Tab, TabProps, Tabs, TabsContent, TabsList, TabsProps, TabsTrigger };