opin-ui 0.0.1

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

@@ -0,0 +1,182 @@
+"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 { useDocsLayout } from "../../client.js";
+import "../../index.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/docs/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 && !header && !footer) 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-1) h-[calc(var(--fd-docs-height)-var(--fd-docs-row-1))] flex flex-col [grid-area:toc] 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 } = useDocsLayout();
+	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/docs/slots/container.d.ts

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

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

@@ -0,0 +1,36 @@
+"use client";
+import { cn } from "../../../utils/cn.js";
+import { useDocsLayout } from "../client.js";
+import "../index.js";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+//#region src/layouts/docs/slots/container.tsx
+function Container(props) {
+	const { slots } = useDocsLayout();
+	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-docs-layout",
+		"data-sidebar-collapsed": collapsed,
+		"data-column-changed": isCollapseChanged,
+		...props,
+		style: {
+			gridTemplate: `"sidebar sidebar header toc toc"
+"sidebar sidebar toc-popover toc toc"
+"sidebar sidebar main toc toc" 1fr / minmax(min-content, 1fr) var(--fd-sidebar-col) minmax(0, calc(var(--fd-layout-width,97rem) - var(--fd-sidebar-width) - var(--fd-toc-width))) 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) [--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/docs/slots/header.d.ts

@@ -0,0 +1,6 @@
+import { ComponentProps } from "react";
+
+//#region src/layouts/docs/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/docs/slots/header.js

@@ -0,0 +1,38 @@
+"use client";
+import { cn } from "../../../utils/cn.js";
+import { buttonVariants } from "../../../components/ui/button.js";
+import { useDocsLayout } from "../client.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SidebarIcon } from "lucide-react";
+//#region src/layouts/docs/slots/header.tsx
+function Header(props) {
+	const { isNavTransparent, slots, props: { nav } } = useDocsLayout();
+	if (nav?.component) return nav.component;
+	return /* @__PURE__ */ jsxs("header", {
+		id: "nd-subnav",
+		"data-transparent": isNavTransparent,
+		...props,
+		className: cn("[grid-area:header] sticky top-(--fd-docs-row-1) z-30 flex items-center ps-4 pe-2.5 border-b transition-colors backdrop-blur-sm h-(--fd-header-height) md:hidden max-md:layout:[--fd-header-height:--spacing(14)] data-[transparent=false]:bg-fd-background/80", props.className),
+		children: [
+			slots.navTitle && /* @__PURE__ */ jsx(slots.navTitle, { className: "inline-flex items-center gap-2.5 font-semibold" }),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex-1",
+				children: nav?.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"
+				})),
+				children: /* @__PURE__ */ jsx(SidebarIcon, {})
+			})
+		]
+	});
+}
+//#endregion
+export { Header };

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

@@ -0,0 +1,29 @@
+import { SidebarProviderProps as SidebarProviderProps$1, useSidebar as useSidebar$1 } from "../../../components/sidebar/base.js";
+import { SidebarPageTreeComponents } from "../../../components/sidebar/page-tree.js";
+import { ComponentProps, ReactNode } from "react";
+
+//#region src/layouts/docs/slots/sidebar.d.ts
+interface SidebarProps extends ComponentProps<'aside'> {
+  components?: Partial<SidebarPageTreeComponents>;
+  banner?: ReactNode;
+  footer?: ReactNode;
+  /**
+   * 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 Sidebar({
+  footer,
+  banner,
+  collapsible,
+  components,
+  ...rest
+}: SidebarProps): import("react").JSX.Element;
+declare function SidebarTrigger(props: ComponentProps<'button'>): import("react").JSX.Element;
+//#endregion
+export { Sidebar, SidebarProps, SidebarProvider, SidebarProviderProps, SidebarTrigger, useSidebar };

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

@@ -0,0 +1,326 @@
+"use client";
+import { cn } from "../../../utils/cn.js";
+import { buttonVariants } from "../../../components/ui/button.js";
+import { mergeRefs } from "../../../utils/merge-refs.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../components/ui/popover.js";
+import { SearchTrigger } from "../../shared/slots/search-trigger.js";
+import { LinkItem } from "../../shared/client.js";
+import { isLayoutTabActive } from "../../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 { useDocsLayout } from "../client.js";
+import Link from "fumadocs-core/link";
+import { usePathname } from "fumadocs-core/framework";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronDown, ChevronsUpDown, Languages, SidebarIcon } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { useMemo, useRef, useState } from "react";
+//#region src/layouts/docs/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" }
+} });
+const { useSidebar } = base_exports;
+function SidebarProvider(props) {
+	return /* @__PURE__ */ jsx(SidebarProvider$1, { ...props });
+}
+function Sidebar({ footer, banner, collapsible = true, components, ...rest }) {
+	const { menuItems, slots, props: { tabs, nav, tabMode } } = useDocsLayout();
+	const iconLinks = menuItems.filter((item) => item.type === "icon");
+	const viewport = /* @__PURE__ */ jsxs(SidebarViewport, { children: [menuItems.filter((v) => v.type !== "icon").map((item, i, list) => /* @__PURE__ */ jsx(SidebarLinkItem, {
+		item,
+		className: cn(i === list.length - 1 && "mb-4")
+	}, i)), /* @__PURE__ */ jsx(SidebarPageTree, { ...components })] });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(SidebarContent, {
+		...rest,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-3 p-4 pb-2",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex",
+						children: [
+							slots.navTitle && /* @__PURE__ */ jsx(slots.navTitle, { className: "inline-flex text-[0.9375rem] items-center gap-2.5 font-medium me-auto" }),
+							nav?.children,
+							collapsible && /* @__PURE__ */ jsx(SidebarCollapseTrigger, {
+								className: cn(buttonVariants({
+									color: "ghost",
+									size: "icon-sm",
+									className: "mb-auto text-fd-muted-foreground"
+								})),
+								children: /* @__PURE__ */ jsx(SidebarIcon, {})
+							})
+						]
+					}),
+					slots.searchTrigger && /* @__PURE__ */ jsx(slots.searchTrigger.full, { hideIfDisabled: true }),
+					tabs.length > 0 && tabMode === "auto" && /* @__PURE__ */ jsx(SidebarTabsDropdown, { tabs }),
+					banner
+				]
+			}),
+			viewport,
+			(slots.languageSelect || iconLinks.length > 0 || slots.themeSwitch || footer) && /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col p-4 pt-2",
+				children: [
+					slots.languageSelect && /* @__PURE__ */ jsxs(slots.languageSelect.root, {
+						variant: "secondary",
+						className: "text-fd-muted-foreground text-start justify-start bg-fd-secondary/50 mb-2",
+						children: [
+							/* @__PURE__ */ jsx(Languages, { className: "size-4.5" }),
+							/* @__PURE__ */ jsx(slots.languageSelect.text, {}),
+							/* @__PURE__ */ jsx(ChevronDown, { className: "ms-auto size-3.5" })
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex text-fd-muted-foreground items-center border bg-fd-secondary/50 p-0.5 pe-0 rounded-lg empty:hidden",
+						children: [iconLinks.map((item, i) => /* @__PURE__ */ jsx(LinkItem, {
+							item,
+							className: cn(buttonVariants({
+								size: "icon-sm",
+								color: "ghost"
+							})),
+							"aria-label": item.label,
+							children: item.icon
+						}, i)), slots.themeSwitch && /* @__PURE__ */ jsx(slots.themeSwitch, { className: "px-1 py-0 border-y-0 border-e-0 rounded-none ms-auto *:rounded-md" })]
+					}),
+					footer
+				]
+			})
+		]
+	}), /* @__PURE__ */ jsxs(SidebarDrawer, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-3 p-4 pb-2",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex text-fd-muted-foreground items-center gap-1.5",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "flex flex-1",
+							children: iconLinks.map((item, i) => /* @__PURE__ */ jsx(LinkItem, {
+								item,
+								className: cn(buttonVariants({
+									size: "icon-sm",
+									color: "ghost",
+									className: "p-2"
+								})),
+								"aria-label": item.label,
+								children: item.icon
+							}, i))
+						}),
+						slots.languageSelect && /* @__PURE__ */ jsxs(slots.languageSelect.root, { children: [/* @__PURE__ */ jsx(Languages, { className: "size-4.5" }), /* @__PURE__ */ jsx(slots.languageSelect.text, {})] }),
+						slots.themeSwitch && /* @__PURE__ */ jsx(slots.themeSwitch, { className: "p-0" }),
+						/* @__PURE__ */ jsx(SidebarTrigger, {
+							className: cn(buttonVariants({
+								color: "ghost",
+								size: "icon-sm",
+								className: "p-2"
+							})),
+							children: /* @__PURE__ */ jsx(SidebarIcon, {})
+						})
+					]
+				}),
+				tabs.length > 0 && /* @__PURE__ */ jsx(SidebarTabsDropdown, { tabs }),
+				banner
+			]
+		}),
+		viewport,
+		/* @__PURE__ */ jsx("div", {
+			className: "flex flex-col border-t p-4 pt-2 empty:hidden",
+			children: footer
+		})
+	] })] });
+}
+function SidebarFolder(props) {
+	return /* @__PURE__ */ jsx(SidebarFolder$1, { ...props });
+}
+function SidebarCollapseTrigger(props) {
+	return /* @__PURE__ */ jsx(SidebarCollapseTrigger$1, { ...props });
+}
+function SidebarTrigger(props) {
+	return /* @__PURE__ */ jsx(SidebarTrigger$1, { ...props });
+}
+function SidebarContent({ ref: refProp, className, children, ...props }) {
+	const ref = useRef(null);
+	return /* @__PURE__ */ jsx(SidebarContent$1, { children: ({ collapsed, hovered, ref: asideRef, ...rest }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		"data-sidebar-placeholder": "",
+		className: "sticky top-(--fd-docs-row-1) z-20 [grid-area:sidebar] pointer-events-none *:pointer-events-auto h-[calc(var(--fd-docs-height)-var(--fd-docs-row-1))] md:layout:[--fd-sidebar-width:268px] max-md:hidden",
+		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 bg-fd-card text-sm border-e duration-250 *:w-(--fd-sidebar-width)", collapsed && ["inset-y-2 rounded-xl 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
+		})]
+	}), /* @__PURE__ */ jsxs("div", {
+		"data-sidebar-panel": "",
+		className: cn("fixed flex top-[calc(--spacing(4)+var(--fd-docs-row-3))] inset-s-4 shadow-lg transition-opacity rounded-xl p-0.5 border bg-fd-muted text-fd-muted-foreground z-10", (!collapsed || hovered) && "pointer-events-none opacity-0"),
+		children: [/* @__PURE__ */ jsx(SidebarCollapseTrigger$1, {
+			className: cn(buttonVariants({
+				color: "ghost",
+				size: "icon-sm",
+				className: "rounded-lg"
+			})),
+			children: /* @__PURE__ */ jsx(SidebarIcon, {})
+		}), /* @__PURE__ */ jsx(SearchTrigger, {
+			className: "rounded-lg",
+			hideIfDisabled: true
+		})]
+	})] }) });
+}
+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 SidebarSeparator({ className, style, children, ...props }) {
+	const depth = useFolderDepth();
+	return /* @__PURE__ */ jsx(SidebarSeparator$1, {
+		className: cn("inline-flex items-center gap-2 mb-1 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 }) {
+	return /* @__PURE__ */ jsx(SidebarFolderContent$1, {
+		className: cn("relative", useFolderDepth() === 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
+		})
+	});
+}
+function SidebarTabsDropdown({ tabs, placeholder, ...props }) {
+	const [open, setOpen] = useState(false);
+	const { closeOnRedirect } = useSidebar();
+	const pathname = usePathname();
+	const selected = useMemo(() => {
+		return tabs.findLast((item) => isLayoutTabActive(item, pathname));
+	}, [tabs, 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: tabs.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);
+			})
+		})]
+	});
+}
+function getItemOffset(depth) {
+	return `calc(${2 + 3 * depth} * var(--spacing))`;
+}
+const SidebarPageTree = createPageTreeRenderer({
+	SidebarFolder,
+	SidebarFolderContent,
+	SidebarFolderLink,
+	SidebarFolderTrigger,
+	SidebarItem,
+	SidebarSeparator
+});
+const SidebarLinkItem = createLinkItemRenderer({
+	SidebarFolder,
+	SidebarFolderContent,
+	SidebarFolderLink,
+	SidebarFolderTrigger,
+	SidebarItem
+});
+//#endregion
+export { Sidebar, SidebarProvider, SidebarTrigger, useSidebar };