@fumadocs/base-ui 16.6.17 → 16.7.1

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

@@ -0,0 +1,30 @@
+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";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#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): react_jsx_runtime0.JSX.Element;
+declare function Sidebar({
+  footer,
+  banner,
+  collapsible,
+  components,
+  ...rest
+}: SidebarProps): react_jsx_runtime0.JSX.Element;
+declare function SidebarTrigger(props: ComponentProps<'button'>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Sidebar, SidebarProps, SidebarProvider, SidebarProviderProps, SidebarTrigger, useSidebar };

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

@@ -0,0 +1,329 @@
+"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 { ScrollArea, ScrollViewport } from "../../../components/ui/scroll-area.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, 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 { useMemo, useRef, useState } from "react";
+import { usePathname } from "fumadocs-core/framework";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import Link from "fumadocs-core/link";
+import { Check, ChevronsUpDown, Languages, SidebarIcon } from "lucide-react";
+import { cva } from "class-variance-authority";
+//#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:start-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$1, { 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 border-t p-4 pt-2 empty:hidden",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex text-fd-muted-foreground items-center empty:hidden",
+					children: [
+						slots.languageSelect && /* @__PURE__ */ jsx(slots.languageSelect.root, { children: /* @__PURE__ */ jsx(Languages, { className: "size-4.5" }) }),
+						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: "ms-auto p-0" })
+					]
+				}), 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 SidebarViewport(props) {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		...rest,
+		className: (state) => cn("min-h-0 flex-1", typeof className === "function" ? className(state) : className),
+		children: /* @__PURE__ */ jsx(ScrollViewport, {
+			className: "*:flex! *:flex-col! *:gap-0.5! p-4 overscroll-contain",
+			style: { maskImage: "linear-gradient(to bottom, transparent, white 12px, white calc(100% - 12px), transparent)" },
+			children: props.children
+		})
+	});
+}
+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$1, { 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 start-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 start-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))] start-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$1, { 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 end-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: (state) => cn(itemVariants({ variant: collapsible ? "button" : null }), "w-full", typeof className === "function" ? className(state) : 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: (state) => cn("relative flex flex-col gap-0.5 *:first:mt-0.5", depth === 1 && "before:content-[''] before:absolute before:w-px before:inset-y-1 before:bg-fd-border before:start-2.5", typeof className === "function" ? className(state) : className),
+		...props,
+		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$1, { 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 };

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

@@ -1,52 +1,49 @@
-import { SidebarPageTreeComponents } from "../../components/sidebar/page-tree.js";
-import { GetSidebarTabsOptions } from "../../components/sidebar/tabs/index.js";
-import { BaseLayoutProps } from "../shared/index.js";
-import { SidebarTabWithProps } from "./tab-dropdown.js";
-import { Sidebar } from "./sidebar.js";
-import { ComponentProps, HTMLAttributes, ReactNode } from "react";
+import { BaseSlots, BaseSlotsProps } from "../shared/client.js";
+import { BaseLayoutProps, GetLayoutTabsOptions, LayoutTab, LinkItemType } from "../shared/index.js";
+import { TabDropdownProps } from "./slots/tab-dropdown.js";
+import { SidebarProps, SidebarProviderProps } from "./slots/sidebar.js";
+import { ComponentProps, FC, ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
-import { motion } from "motion/react";
 import * as PageTree from "fumadocs-core/page-tree";
+import { motion } from "motion/react";
 
 //#region src/layouts/flux/index.d.ts
+interface DocsSlots extends BaseSlots {
+  container?: FC<ComponentProps<'div'>>;
+  tabDropdown?: FC<TabDropdownProps>;
+  sidebar?: {
+    provider: FC<SidebarProviderProps>;
+    trigger: FC<ComponentProps<'button'>>;
+    root: FC<SidebarProps>;
+    useSidebar: () => {
+      collapsed: boolean;
+      open: boolean;
+      setOpen: (v: boolean) => void;
+    };
+  };
+}
 interface DocsLayoutProps extends BaseLayoutProps {
   tree: PageTree.Root;
   sidebar?: SidebarOptions;
-  /**
-   * Props for the `div` container
-   */
-  containerProps?: HTMLAttributes<HTMLDivElement>;
+  tabs?: LayoutTab[] | GetLayoutTabsOptions | false;
+  slots?: DocsSlots;
   renderNavigationPanel?: (props: NavigationPanelProps) => ReactNode;
+  containerProps?: ComponentProps<'div'>;
 }
-interface SidebarOptions extends ComponentProps<'aside'>, Pick<ComponentProps<typeof Sidebar>, 'defaultOpenLevel' | 'prefetch'> {
+interface SidebarOptions extends SidebarProps, SidebarProviderProps {
   enabled?: boolean;
-  component?: ReactNode;
-  components?: Partial<SidebarPageTreeComponents>;
   /**
-   * Root Toggle options
+   * @deprecated use layout-level `tabs` instead.
    */
-  tabs?: SidebarTabWithProps[] | GetSidebarTabsOptions | false;
-  banner?: ReactNode;
-  footer?: ReactNode;
+  tabs?: LayoutTab[] | GetLayoutTabsOptions | false;
 }
-declare function DocsLayout({
-  tree,
-  nav,
-  sidebar: {
-    enabled: sidebarEnabled,
-    tabs: sidebarTabs,
-    defaultOpenLevel,
-    prefetch,
-    ...sidebarProps
-  },
-  searchToggle,
-  themeSwitch,
-  i18n,
-  children,
-  containerProps,
-  renderNavigationPanel,
-  ...props
-}: DocsLayoutProps): react_jsx_runtime0.JSX.Element;
+declare function useFluxLayout(): {
+  props: BaseSlotsProps;
+  menuItems: LinkItemType[];
+  navItems: LinkItemType[];
+  slots: DocsSlots;
+};
+declare function DocsLayout(props: DocsLayoutProps): react_jsx_runtime0.JSX.Element;
 interface NavigationPanelProps {
   head: ReactNode;
   tabDropdown: ReactNode;
@@ -74,5 +71,4 @@ declare function NavigationPanelOverlay({
   enabled?: boolean;
 }): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { DocsLayout, DocsLayoutProps, NavigationPanel, NavigationPanelOverlay, NavigationPanelProps };
-//# sourceMappingURL=index.d.ts.map
+export { DocsLayout, DocsLayoutProps, DocsSlots, NavigationPanel, NavigationPanelOverlay, NavigationPanelProps, useFluxLayout };

package/dist/layouts/flux/index.js

@@ -2,78 +2,86 @@
 import { cn } from "../../utils/cn.js";
 import { buttonVariants } from "../../components/ui/button.js";
 import { TreeContextProvider } from "../../contexts/tree.js";
-import { SidebarViewport, useSidebar } from "../../components/sidebar/base.js";
-import { LinkItem } from "../../utils/link-item.js";
 import { useSearchContext } from "../../contexts/search.js";
-import { SearchToggle } from "../shared/search-toggle.js";
-import { renderTitleNav, useLinkItems } from "../shared/index.js";
-import { LanguageToggle } from "../shared/language-toggle.js";
-import { ThemeToggle } from "../shared/theme-toggle.js";
-import { getSidebarTabs } from "../../components/sidebar/tabs/index.js";
-import { SidebarTabsDropdown } from "./tab-dropdown.js";
-import { Sidebar as Sidebar$1, SidebarContent, SidebarLinkItem, SidebarPageTree } from "./sidebar.js";
-import { useMemo } from "react";
+import { LinkItem, baseSlots } from "../shared/client.js";
+import { getLayoutTabs, useLinkItems } from "../shared/index.js";
+import { TabDropdown } from "./slots/tab-dropdown.js";
+import { Sidebar as Sidebar$1, SidebarProvider, SidebarTrigger, useSidebar } from "./slots/sidebar.js";
+import { Container } from "./slots/container.js";
+import { createContext, use, useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Languages, SidebarIcon, XIcon } from "lucide-react";
-import { AnimatePresence, motion } from "motion/react";
+import { Languages } from "lucide-react";
+import { motion } from "motion/react";
 import { RemoveScroll } from "react-remove-scroll";
 //#region src/layouts/flux/index.tsx
-function DocsLayout({ tree, nav = {}, sidebar: { enabled: sidebarEnabled = true, tabs: sidebarTabs, defaultOpenLevel, prefetch, ...sidebarProps } = {}, searchToggle = {}, themeSwitch = {}, i18n = false, children, containerProps, renderNavigationPanel = (props) => /* @__PURE__ */ jsx(NavigationPanel, { ...props }), ...props }) {
+const LayoutContext = createContext(null);
+function useFluxLayout() {
+	const context = use(LayoutContext);
+	if (!context) throw new Error("Please use Flux layout components under <DocsLayout /> (`fumadocs-ui/layouts/flux`).");
+	return context;
+}
+const { useProvider } = baseSlots({ useProps() {
+	return useFluxLayout().props;
+} });
+function DocsLayout(props) {
+	const { tree, nav = {}, sidebar: { enabled: sidebarEnabled = true, tabs: _tabs, defaultOpenLevel, prefetch, ...sidebarProps } = {}, tabs: defaultTabs = _tabs, children, containerProps, renderNavigationPanel = (props) => /* @__PURE__ */ jsx(NavigationPanel, { ...props }), slots: defaultSlots = {} } = props;
+	const linkItems = useLinkItems(props);
+	const { baseSlots, baseProps } = useProvider(props);
 	const tabs = useMemo(() => {
-		if (Array.isArray(sidebarTabs)) return sidebarTabs;
-		if (typeof sidebarTabs === "object") return getSidebarTabs(tree, sidebarTabs);
-		if (sidebarTabs !== false) return getSidebarTabs(tree);
+		if (Array.isArray(defaultTabs)) return defaultTabs;
+		if (typeof defaultTabs === "object") return getLayoutTabs(tree, defaultTabs);
+		if (defaultTabs !== false) return getLayoutTabs(tree);
 		return [];
-	}, [tree, sidebarTabs]);
-	const { menuItems } = useLinkItems(props);
-	const iconLinks = menuItems.filter((item) => item.type === "icon");
-	function sidebar() {
-		const { footer, banner, component, components, ...rest } = sidebarProps;
-		if (component) return component;
-		return /* @__PURE__ */ jsxs(SidebarContent, {
-			...rest,
-			children: [
-				/* @__PURE__ */ jsx("div", {
-					className: "flex flex-col gap-3 p-4 pb-2 empty:hidden",
-					children: banner
-				}),
-				/* @__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 })] }),
-				footer
-			]
-		});
-	}
-	return /* @__PURE__ */ jsx(TreeContextProvider, {
-		tree,
-		children: /* @__PURE__ */ jsxs(Sidebar$1, {
-			defaultOpenLevel,
-			prefetch,
-			children: [/* @__PURE__ */ jsxs("div", {
-				id: "nd-flux-layout",
-				...containerProps,
-				className: cn("flex flex-col items-center pb-24 overflow-x-clip", containerProps?.className),
-				children: [sidebarEnabled && sidebar(), children]
-			}), renderNavigationPanel({
-				head: renderTitleNav(nav, { className: "inline-flex items-center gap-2.5 text-sm font-semibold" }),
-				tabDropdown: tabs.length > 0 && /* @__PURE__ */ jsx(SidebarTabsDropdown, {
+	}, [tree, defaultTabs]);
+	const slots = {
+		...baseSlots,
+		container: defaultSlots.container ?? Container,
+		tabDropdown: defaultSlots.tabDropdown ?? TabDropdown,
+		sidebar: defaultSlots.sidebar ?? {
+			root: Sidebar$1,
+			provider: SidebarProvider,
+			trigger: SidebarTrigger,
+			useSidebar
+		}
+	};
+	let content = /* @__PURE__ */ jsxs(Fragment$1, { children: [sidebarEnabled && slots.sidebar && /* @__PURE__ */ jsx(slots.sidebar.root, { ...sidebarProps }), children] });
+	if (slots.container) content = /* @__PURE__ */ jsx(slots.container, {
+		...containerProps,
+		children: content
+	});
+	if (slots.sidebar) content = /* @__PURE__ */ jsx(slots.sidebar.provider, {
+		defaultOpenLevel,
+		prefetch,
+		children: content
+	});
+	return /* @__PURE__ */ jsx(LayoutContext, {
+		value: {
+			props: baseProps,
+			slots,
+			...linkItems
+		},
+		children: /* @__PURE__ */ jsxs(TreeContextProvider, {
+			tree,
+			children: [content, renderNavigationPanel({
+				head: /* @__PURE__ */ jsxs(Fragment$1, { children: [slots.navTitle && /* @__PURE__ */ jsx(slots.navTitle, { className: "inline-flex items-center gap-2.5 text-sm font-semibold" }), nav.children] }),
+				tabDropdown: slots.tabDropdown && tabs.length > 0 && /* @__PURE__ */ jsx(slots.tabDropdown, {
 					className: "flex-1",
-					options: tabs
+					tabs
 				}),
 				tool: /* @__PURE__ */ jsxs(Fragment$1, { children: [
-					i18n && /* @__PURE__ */ jsx(LanguageToggle, { children: /* @__PURE__ */ jsx(Languages, { className: "size-4.5" }) }),
-					searchToggle.enabled !== false && (searchToggle.components?.sm ?? /* @__PURE__ */ jsx(SearchToggle, {
-						className: "rounded-lg",
-						hideIfDisabled: true
-					})),
-					/* @__PURE__ */ jsx(NavigationSidebarTrigger, {}),
-					themeSwitch.enabled !== false && (themeSwitch.component ?? /* @__PURE__ */ jsx(ThemeToggle, {
-						className: "px-1 py-0 h-full ms-1 rounded-xl bg-fd-muted *:rounded-lg",
-						mode: themeSwitch.mode
-					}))
+					slots.languageSelect && /* @__PURE__ */ jsx(slots.languageSelect.root, { children: /* @__PURE__ */ jsx(Languages, { className: "size-4.5" }) }),
+					slots.searchTrigger && /* @__PURE__ */ jsx(slots.searchTrigger.sm, {
+						hideIfDisabled: true,
+						className: "rounded-lg"
+					}),
+					slots.sidebar && /* @__PURE__ */ jsx(slots.sidebar.trigger, { className: cn(buttonVariants({
+						variant: "ghost",
+						size: "icon-sm",
+						className: "overflow-hidden"
+					})) }),
+					slots.themeSwitch && /* @__PURE__ */ jsx(slots.themeSwitch, { className: "p-1 h-full ms-1 rounded-xl bg-fd-muted *:rounded-lg" })
 				] }),
-				link: iconLinks.map((item, i) => /* @__PURE__ */ jsx(LinkItem, {
+				link: linkItems.menuItems.filter((item) => item.type === "icon").map((item, i) => /* @__PURE__ */ jsx(LinkItem, {
 					item,
 					className: cn(buttonVariants({
 						size: "icon-sm",
@@ -86,36 +94,6 @@ function DocsLayout({ tree, nav = {}, sidebar: { enabled: sidebarEnabled = true,
 		})
 	});
 }
-function NavigationSidebarTrigger() {
-	const { open, setOpen } = useSidebar();
-	return /* @__PURE__ */ jsx("button", {
-		className: cn(buttonVariants({
-			variant: "ghost",
-			size: "icon-sm",
-			className: "overflow-hidden"
-		})),
-		onClick: () => setOpen((prev) => !prev),
-		children: /* @__PURE__ */ jsx(AnimatePresence, {
-			mode: "wait",
-			children: /* @__PURE__ */ jsx(motion.span, {
-				transition: { duration: .2 },
-				initial: {
-					y: "100%",
-					opacity: 0
-				},
-				animate: {
-					y: 0,
-					opacity: 1
-				},
-				exit: {
-					y: "100%",
-					opacity: 0
-				},
-				children: open ? /* @__PURE__ */ jsx(XIcon, {}) : /* @__PURE__ */ jsx(SidebarIcon, {})
-			}, open ? "open" : "closed")
-		})
-	});
-}
 function NavigationPanel({ head, tabDropdown, tool, link, children = (v) => v, ...props }) {
 	const { open } = useSearchContext();
 	return /* @__PURE__ */ jsx(motion.div, {
@@ -168,6 +146,4 @@ function NavigationPanelOverlay({ enabled = false, className, ...props }) {
 	});
 }
 //#endregion
-export { DocsLayout, NavigationPanel, NavigationPanelOverlay };
-
-//# sourceMappingURL=index.js.map
+export { DocsLayout, NavigationPanel, NavigationPanelOverlay, useFluxLayout };