fumadocs-ui 14.3.1 → 14.4.1

package/dist/layouts/docs.client.d.ts

@@ -1,6 +1,5 @@
 import { type ButtonHTMLAttributes, type HTMLAttributes } from 'react';
 import { type LinkItemType } from '../layouts/links';
-import type { SidebarComponents } from '../layouts/docs';
 interface LinksMenuProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     items: LinkItemType[];
 }
@@ -9,8 +8,5 @@ interface MenuItemProps extends HTMLAttributes<HTMLElement> {
     item: LinkItemType;
 }
 export declare function MenuItem({ item, ...props }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
-export declare function SidebarItems(props: {
-    components?: Partial<SidebarComponents>;
-}): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=docs.client.d.ts.map

package/dist/layouts/docs.client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"docs.client.d.ts","sourceRoot":"","sources":["../../src/layouts/docs.client.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,cAAc,EAGpB,MAAM,OAAO,CAAC;AASf,OAAO,EAAgB,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAQlE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAgBxD,UAAU,cAAe,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IACtE,KAAK,EAAE,YAAY,EAAE,CAAC;CACvB;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAgB5D;AAED,UAAU,aAAc,SAAQ,cAAc,CAAC,WAAW,CAAC;IACzD,IAAI,EAAE,YAAY,CAAC;CACpB;AAED,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAgDzD;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACzC,2CAQA"}
+{"version":3,"file":"docs.client.d.ts","sourceRoot":"","sources":["../../src/layouts/docs.client.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,cAAc,EAEpB,MAAM,OAAO,CAAC;AASf,OAAO,EAAgB,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAalE,UAAU,cAAe,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IACtE,KAAK,EAAE,YAAY,EAAE,CAAC;CACvB;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAkB5D;AAED,UAAU,aAAc,SAAQ,cAAc,CAAC,WAAW,CAAC;IACzD,IAAI,EAAE,YAAY,CAAC;CACpB;AAED,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAgDzD"}

package/dist/layouts/docs.client.js

@@ -9,8 +9,6 @@ import { Popover, PopoverContent, PopoverTrigger, } from '../components/ui/popov
 import { BaseLinkItem } from '../layouts/links';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '../components/ui/collapsible';
 import { cva } from 'class-variance-authority';
-import { SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarItem, SidebarSeparator, } from '../layouts/docs/sidebar';
-import { useTreeContext, useTreePath } from '../contexts/tree';
 import { buttonVariants } from '../components/ui/button';
 const itemVariants = cva('flex flex-row items-center gap-2 rounded-md px-3 py-2.5 text-fd-muted-foreground transition-colors duration-100 [overflow-wrap:anywhere] hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none md:px-2 md:py-1.5 [&_svg]:size-4');
 export function LinksMenu({ items, ...props }) {
@@ -19,7 +17,7 @@ export function LinksMenu({ items, ...props }) {
     useOnChange(pathname, () => {
         setOpen(false);
     });
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { ...props }), _jsx(PopoverContent, { className: "flex flex-col p-1", children: items?.map((item, i) => _jsx(MenuItem, { item: item }, i)) })] }));
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { ...props }), _jsx(PopoverContent, { className: "flex flex-col p-1", children: items.map((item, i) => (_jsx(MenuItem, { item: item }, i))) })] }));
 }
 export function MenuItem({ item, ...props }) {
     if (item.type === 'custom')
@@ -34,25 +32,3 @@ export function MenuItem({ item, ...props }) {
             })
             : itemVariants(), props.className), children: [item.icon, item.text] }));
 }
-export function SidebarItems(props) {
-    const { root } = useTreeContext();
-    return (_jsx("div", { className: "px-2 py-4 md:px-3", children: renderSidebarList(root.children, 1, props?.components ?? {}) }));
-}
-function PageTreeFolder({ item, children, level, }) {
-    const path = useTreePath();
-    return (_jsx(SidebarFolder, { defaultOpen: item.defaultOpen || path.includes(item), level: level + 1, children: children }));
-}
-function renderSidebarList(items, level, customComps) {
-    const { Separator, Item, Folder } = customComps;
-    return items.map((item, i) => {
-        const id = `${item.type}_${i.toString()}`;
-        switch (item.type) {
-            case 'separator':
-                return Separator ? (_jsx(Separator, { item: item }, id)) : (_jsx(SidebarSeparator, { children: item.name }, id));
-            case 'folder':
-                return Folder ? (_jsx(Folder, { item: item, level: level + 1 }, id)) : (_jsxs(PageTreeFolder, { item: item, level: level + 1, children: [item.index ? (_jsxs(SidebarFolderLink, { href: item.index.url, external: item.index.external, children: [item.icon, item.name] })) : (_jsxs(SidebarFolderTrigger, { children: [item.icon, item.name] })), _jsx(SidebarFolderContent, { children: renderSidebarList(item.children, level + 1, customComps) })] }, id));
-            default:
-                return Item ? (_jsx(Item, { item: item }, item.url)) : (_jsx(SidebarItem, { href: item.url, external: item.external, icon: item.icon, children: item.name }, item.url));
-        }
-    });
-}

package/dist/layouts/docs.d.ts

@@ -1,40 +1,9 @@
 import type { PageTree } from 'fumadocs-core/server';
-import { type ReactNode, type HTMLAttributes, type FC } from 'react';
-import { type SidebarProps } from '../layouts/docs/sidebar';
+import { type ReactNode, type HTMLAttributes } from 'react';
 import { type LinkItemType } from '../layouts/links';
 import { getSidebarTabs, type TabOptions } from '../utils/get-sidebar-tabs';
-import { type Option } from '../components/layout/root-toggle';
 import { type BaseLayoutProps } from './shared';
-interface SidebarOptions extends SidebarProps {
-    enabled: boolean;
-    component: ReactNode;
-    collapsible?: boolean;
-    components?: Partial<SidebarComponents>;
-    /**
-     * Root Toggle options
-     */
-    tabs?: Option[] | TabOptions | false;
-    banner?: ReactNode;
-    footer?: ReactNode;
-    /**
-     * Hide search trigger
-     *
-     * @defaultValue false
-     */
-    hideSearch?: boolean;
-}
-export interface SidebarComponents {
-    Item: FC<{
-        item: PageTree.Item;
-    }>;
-    Folder: FC<{
-        item: PageTree.Folder;
-        level: number;
-    }>;
-    Separator: FC<{
-        item: PageTree.Separator;
-    }>;
-}
+import { type SidebarOptions } from '../layouts/docs/shared';
 export interface DocsLayoutProps extends BaseLayoutProps {
     tree: PageTree.Root;
     sidebar?: Partial<SidebarOptions>;

package/dist/layouts/docs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"docs.d.ts","sourceRoot":"","sources":["../../src/layouts/docs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,cAAc,EAAY,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAM/E,OAAO,EAML,KAAK,YAAY,EAOlB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EACL,KAAK,YAAY,EAGlB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,cAAc,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,EAAE,KAAK,MAAM,EAAc,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,UAAU,CAAC;AAgB1D,UAAU,cAAe,SAAQ,YAAY;IAC3C,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;IAErB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAExC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,UAAU,GAAG,KAAK,CAAC;IAErC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAA;KAAE,CAAC,CAAC;IAClC,MAAM,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACrD,SAAS,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;CAC7C;AAED,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IAEpB,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IAElC,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,wBAAgB,UAAU,CAAC,EACzB,GAAG,EAAE,EACH,OAAO,EAAE,UAAiB,EAC1B,SAAS,EAAE,UAAU,EACrB,eAAe,EACf,GAAG,GAAG,EACF,EACN,OAAO,EAAE,EACP,OAAO,EAAE,cAAqB,EAC9B,WAAkB,EAClB,SAAS,EAAE,cAAc,EACzB,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,aAAa,EACrB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,iBAAiB,EAC7B,GAAG,OAAO,EACN,EACN,IAAY,EACZ,GAAG,KAAK,EACT,EAAE,eAAe,GAAG,SAAS,CAqF7B;AAiID,OAAO,EAAE,cAAc,EAAE,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,CAAC"}
+{"version":3,"file":"docs.d.ts","sourceRoot":"","sources":["../../src/layouts/docs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAgB5D,OAAO,EACL,KAAK,YAAY,EAGlB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,cAAc,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAE3E,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,UAAU,CAAC;AAe1D,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAE/B,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IAEpB,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IAElC,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,wBAAgB,UAAU,CAAC,EACzB,GAAG,EAAE,EACH,OAAO,EAAE,UAAiB,EAC1B,SAAS,EAAE,UAAU,EACrB,eAAe,EACf,GAAG,GAAG,EACF,EACN,OAAO,EAAE,EACP,OAAO,EAAE,cAAqB,EAC9B,WAAkB,EAClB,SAAS,EAAE,cAAc,EACzB,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,aAAa,EACrB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,iBAAiB,EAC7B,GAAG,OAAO,EACN,EACN,IAAY,EACZ,GAAG,KAAK,EACT,EAAE,eAAe,GAAG,SAAS,CAmF7B;AA0FD,OAAO,EAAE,cAAc,EAAE,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,CAAC"}

package/dist/layouts/docs.js

@@ -1,62 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from 'react';
 import Link from 'next/link';
 import { Languages, MoreHorizontal } from 'lucide-react';
 import { notFound } from 'next/navigation';
 import { cn } from '../utils/cn';
 import { buttonVariants } from '../components/ui/button';
-import { CollapsibleSidebar, Sidebar, SidebarFooter, SidebarHeader, SidebarCollapseTrigger, SidebarViewport, SidebarItem, SidebarFolder, SidebarFolderLink, SidebarFolderTrigger, SidebarFolderContent, } from '../layouts/docs/sidebar';
+import { CollapsibleSidebar, Sidebar, SidebarFooter, SidebarHeader, SidebarCollapseTrigger, SidebarViewport, SidebarPageTree, } from '../layouts/docs/sidebar';
 import { replaceOrDefault } from '../layouts/shared';
 import { BaseLinkItem, } from '../layouts/links';
 import { getSidebarTabs } from '../utils/get-sidebar-tabs';
 import { RootToggle } from '../components/layout/root-toggle';
 import { getLinks } from './shared';
 import { LanguageToggle, LanguageToggleText, } from '../components/layout/language-toggle';
-import { SidebarItems, LinksMenu } from '../layouts/docs.client';
+import { LinksMenu } from '../layouts/docs.client';
 import { TreeContextProvider } from '../contexts/tree';
 import { NavProvider, Title } from '../components/layout/nav';
 import { ThemeToggle } from '../components/layout/theme-toggle';
 import { Navbar, NavbarSidebarTrigger } from '../layouts/docs/navbar';
 import { LargeSearchToggle, SearchToggle, } from '../components/layout/search-toggle';
 import { SearchOnly } from '../contexts/search';
+import { getSidebarTabsFromOptions, SidebarLinkItem, } from '../layouts/docs/shared';
 export function DocsLayout({ nav: { enabled: navEnabled = true, component: navReplace, transparentMode, ...nav } = {}, sidebar: { enabled: sidebarEnabled = true, collapsible = true, component: sidebarReplace, tabs: tabOptions, banner: sidebarBanner, footer: sidebarFooter, components: sidebarComponents, ...sidebar } = {}, i18n = false, ...props }) {
     const links = getLinks(props.links ?? [], props.githubUrl);
     const Aside = collapsible ? CollapsibleSidebar : Sidebar;
     if (props.tree === undefined)
         notFound();
-    let tabs = [];
-    if (Array.isArray(tabOptions)) {
-        tabs = tabOptions;
-    }
-    else if (typeof tabOptions === 'object') {
-        tabs = getSidebarTabs(props.tree, tabOptions);
-    }
-    else if (tabOptions !== false) {
-        tabs = getSidebarTabs(props.tree);
-    }
-    return (_jsx(TreeContextProvider, { tree: props.tree, children: _jsxs(NavProvider, { transparentMode: transparentMode, children: [replaceOrDefault({ enabled: navEnabled, component: navReplace }, _jsxs(Navbar, { className: "h-14 md:hidden", children: [_jsx(Title, { url: nav.url, title: nav.title }), _jsx("div", { className: "flex flex-1 flex-row items-center gap-1", children: nav.children }), _jsx(SearchOnly, { children: _jsx(SearchToggle, {}) }), _jsx(NavbarSidebarTrigger, {})] }), nav), _jsxs("main", { id: "nd-docs-layout", ...props.containerProps, className: cn('flex flex-1 flex-row', !navReplace && navEnabled
+    const tabs = getSidebarTabsFromOptions(tabOptions, props.tree) ?? [];
+    return (_jsx(TreeContextProvider, { tree: props.tree, children: _jsxs(NavProvider, { transparentMode: transparentMode, children: [replaceOrDefault({ enabled: navEnabled, component: navReplace }, _jsxs(Navbar, { id: "nd-subnav", className: "h-14 md:hidden", children: [_jsx(Title, { url: nav.url, title: nav.title }), _jsx("div", { className: "flex flex-1 flex-row items-center gap-1", children: nav.children }), _jsx(SearchOnly, { children: _jsx(SearchToggle, {}) }), _jsx(NavbarSidebarTrigger, { className: "-me-2 md:hidden" })] }), nav), _jsxs("main", { id: "nd-docs-layout", ...props.containerProps, className: cn('flex flex-1 flex-row md:[--fd-sidebar-width:260px] xl:[--fd-toc-width:260px] [&_#nd-toc]:max-xl:hidden [&_#nd-tocnav]:xl:hidden max-xl:[&_article]:mx-0', !navReplace && navEnabled
                         ? '[--fd-nav-height:3.5rem] md:[--fd-nav-height:0px]'
-                        : null, props.containerProps?.className), children: [replaceOrDefault({ enabled: sidebarEnabled, component: sidebarReplace }, _jsxs(Aside, { ...sidebar, children: [_jsxs(SidebarHeader, { children: [_jsx(SidebarHeaderItems, { ...nav, links: links }), sidebarBanner, tabs.length > 0 ? (_jsx(RootToggle, { options: tabs, className: "-mx-2" })) : null, _jsx(SearchOnly, { children: _jsx(LargeSearchToggle, { className: "rounded-lg max-md:hidden" }) })] }), _jsxs(SidebarViewport, { children: [_jsx("div", { className: "px-2 pt-4 empty:hidden md:hidden", children: links
+                        : null, props.containerProps?.className), children: [collapsible ? (_jsx(SidebarCollapseTrigger, { className: "fixed bottom-3 start-2 z-40 transition-opacity data-[collapsed=false]:pointer-events-none data-[collapsed=false]:opacity-0 max-md:hidden" })) : null, replaceOrDefault({ enabled: sidebarEnabled, component: sidebarReplace }, _jsxs(Aside, { ...sidebar, children: [_jsxs(SidebarHeader, { children: [_jsx(SidebarHeaderItems, { ...nav, links: links }), sidebarBanner, tabs.length > 0 ? (_jsx(RootToggle, { options: tabs, className: "-mx-2" })) : null, _jsx(SearchOnly, { children: _jsx(LargeSearchToggle, { className: "rounded-lg max-md:hidden" }) })] }), _jsxs(SidebarViewport, { children: [_jsx("div", { className: "px-2 pt-4 empty:hidden md:hidden", children: links
                                                 .filter((v) => v.type !== 'icon')
-                                                .map((item, i) => (_jsx(Fragment, { children: renderLinkItem(item) }, i))) }), _jsx(SidebarItems, { components: sidebarComponents })] }), _jsxs(SidebarFooter, { children: [_jsx(SidebarFooterItems, { sidebarCollapsible: collapsible, i18n: i18n, disableThemeSwitch: props.disableThemeSwitch ?? false, iconItems: links.filter((v) => v.type === 'icon') }), sidebarFooter] })] }), {
+                                                .map((item, i) => (_jsx(SidebarLinkItem, { item: item }, i))) }), _jsx("div", { className: "px-2 py-4 md:px-3", children: _jsx(SidebarPageTree, { components: sidebarComponents }) })] }), _jsxs(SidebarFooter, { children: [_jsx(SidebarFooterItems, { sidebarCollapsible: collapsible, i18n: i18n, disableThemeSwitch: props.disableThemeSwitch ?? false, iconItems: links.filter((v) => v.type === 'icon') }), sidebarFooter] })] }), {
                             ...sidebar,
                             tabs,
                         }), props.children] })] }) }));
 }
-function renderLinkItem(item) {
-    if (!item.type || item.type === 'main' || item.type === 'icon')
-        return (_jsx(SidebarItem, { href: item.url, icon: item.icon, external: item.external, children: item.text }));
-    if (item.type === 'menu')
-        return (_jsxs(SidebarFolder, { level: 1, children: [item.url ? (_jsxs(SidebarFolderLink, { href: item.url, children: [item.icon, item.text] })) : (_jsxs(SidebarFolderTrigger, { children: [item.icon, item.text] })), _jsx(SidebarFolderContent, { children: item.items.map((child, i) => (_jsx(Fragment, { children: renderLinkItem(child) }, i))) })] }));
-    if (item.type === 'button') {
-        return (_jsxs(BaseLinkItem, { item: item, className: cn(buttonVariants({
-                color: 'secondary',
-                className: 'gap-1.5 [&_svg]:size-4',
-            })), children: [item.icon, item.text] }));
-    }
-    if (item.type === 'custom')
-        return item.children;
-}
 function SidebarHeaderItems({ links, ...props }) {
     const isEmpty = !props.title && !props.children && links.length === 0;
     if (isEmpty)
@@ -66,7 +43,13 @@ function SidebarHeaderItems({ links, ...props }) {
                     color: 'ghost',
                 }), 'ms-auto'), children: _jsx(MoreHorizontal, {}) })) : null] }));
 }
-function SidebarFooterItems({ iconItems, ...props }) {
-    return (_jsxs("div", { className: "flex flex-row items-center", children: [iconItems.map((item, i) => (_jsx(BaseLinkItem, { item: item, className: cn(buttonVariants({ size: 'icon', color: 'ghost' }), 'text-fd-muted-foreground md:hidden'), "aria-label": item.label, children: item.icon }, i))), _jsx("div", { role: "separator", className: "flex-1" }), props.i18n ? (_jsxs(LanguageToggle, { className: "me-1.5", children: [_jsx(Languages, { className: "size-5" }), _jsx(LanguageToggleText, { className: "md:hidden" })] })) : null, !props.disableThemeSwitch ? (_jsx(ThemeToggle, { className: "p-0 md:order-first" })) : null, props.sidebarCollapsible ? (_jsx(SidebarCollapseTrigger, { className: "-me-1.5 max-md:hidden" })) : null] }));
+function SidebarFooterItems({ iconItems, i18n, sidebarCollapsible, disableThemeSwitch, }) {
+    // empty footer items
+    if (iconItems.length === 0 &&
+        !i18n &&
+        disableThemeSwitch &&
+        !sidebarCollapsible)
+        return null;
+    return (_jsxs("div", { className: "flex flex-row items-center", children: [iconItems.map((item, i) => (_jsx(BaseLinkItem, { item: item, className: cn(buttonVariants({ size: 'icon', color: 'ghost' }), 'text-fd-muted-foreground md:hidden'), "aria-label": item.label, children: item.icon }, i))), _jsx("div", { role: "separator", className: "flex-1" }), i18n ? (_jsxs(LanguageToggle, { className: "me-1.5", children: [_jsx(Languages, { className: "size-5" }), _jsx(LanguageToggleText, { className: "md:hidden" })] })) : null, !disableThemeSwitch ? (_jsx(ThemeToggle, { className: "p-0 md:order-first" })) : null, sidebarCollapsible ? (_jsx(SidebarCollapseTrigger, { className: "-me-1.5 max-md:hidden" })) : null] }));
 }
 export { getSidebarTabs };

package/dist/layouts/home/navbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navbar.d.ts","sourceRoot":"","sources":["../../../src/layouts/home/navbar.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,cAAc,EAGpB,MAAM,OAAO,CAAC;AACf,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAU/C,OAAO,KAAK,EACV,0BAA0B,EAC1B,0BAA0B,EAC3B,MAAM,iCAAiC,CAAC;AAOzC,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,2CAwBxD;AAED,eAAO,MAAM,UAAU,6JAAqB,CAAC;AAE7C,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,0BAA0B,2CAYlE;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,0BAA0B,2CASlE;AAED,QAAA,MAAM,YAAY;;8EAiBhB,CAAC;AAEH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAO,EACP,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,YAAY,CAAC,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,2CAczE;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,SAAS,2CAY9C"}
+{"version":3,"file":"navbar.d.ts","sourceRoot":"","sources":["../../../src/layouts/home/navbar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAY,MAAM,OAAO,CAAC;AAC3E,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAU/C,OAAO,KAAK,EACV,0BAA0B,EAC1B,0BAA0B,EAC3B,MAAM,iCAAiC,CAAC;AAOzC,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,2CAwBxD;AAED,eAAO,MAAM,UAAU,6JAAqB,CAAC;AAE7C,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,0BAA0B,2CAYlE;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,0BAA0B,2CASlE;AAED,QAAA,MAAM,YAAY;;8EAiBhB,CAAC;AAEH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAO,EACP,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,YAAY,CAAC,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,2CAczE;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,SAAS,2CAY9C"}

package/dist/layouts/home/navbar.js

@@ -1,17 +1,17 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useState, } from 'react';
+import { useState } from 'react';
 import { cva } from 'class-variance-authority';
 import Link from 'fumadocs-core/link';
 import { cn } from '../../utils/cn';
 import { BaseLinkItem } from '../../layouts/links';
 import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuTrigger, NavigationMenuViewport, } from '../../components/ui/navigation-menu';
-import { NavContext } from '../../components/layout/nav';
+import { useNav } from '../../components/layout/nav';
 import { buttonVariants } from '../../components/ui/button';
 const navItemVariants = cva('inline-flex items-center gap-1 p-2 text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground data-[active=true]:text-fd-primary [&_svg]:size-4');
 export function Navbar(props) {
     const [value, setValue] = useState('');
-    const { isTransparent } = useContext(NavContext);
+    const { isTransparent } = useNav();
     return (_jsx(NavigationMenu, { value: value, onValueChange: setValue, asChild: true, children: _jsxs("header", { id: "nd-nav", ...props, className: cn('fixed left-1/2 top-[var(--fd-banner-height)] z-40 w-full max-w-fd-container -translate-x-1/2 border-b border-fd-foreground/10 transition-colors lg:mt-2 lg:w-[calc(100%-1rem)] lg:rounded-2xl lg:border', value.length > 0 ? 'shadow-lg' : 'shadow-sm', (!isTransparent || value.length > 0) &&
                 'bg-fd-background/80 backdrop-blur-lg', props.className), children: [_jsx("nav", { className: "flex h-14 w-full flex-row items-center gap-6 px-4 lg:h-12", children: props.children }), _jsx(NavigationMenuViewport, {})] }) }));
 }

package/dist/layouts/notebook.client.d.ts

@@ -0,0 +1,3 @@
+import type { HTMLAttributes } from 'react';
+export declare function LayoutBody(props: HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=notebook.client.d.ts.map

package/dist/layouts/notebook.client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notebook.client.d.ts","sourceRoot":"","sources":["../../src/layouts/notebook.client.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,2CAoB5D"}

package/dist/layouts/notebook.client.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../utils/cn';
+import { useSidebar } from '../contexts/sidebar';
+export function LayoutBody(props) {
+    const { collapsed } = useSidebar();
+    return (_jsx("main", { id: "nd-docs-layout", ...props, className: cn('flex w-full flex-1 flex-row', props.className), style: {
+            ...props.style,
+            '--fd-content-width': collapsed
+                ? '100vw'
+                : 'calc(min(100vw, var(--fd-layout-width)) - var(--fd-sidebar-width))',
+        }, children: props.children }));
+}

package/dist/layouts/notebook.d.ts

@@ -0,0 +1,11 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type BaseLayoutProps } from '../layouts/shared';
+import { type SidebarOptions } from '../layouts/docs/shared';
+import type { PageTree } from 'fumadocs-core/server';
+export interface DocsLayoutProps extends BaseLayoutProps {
+    tree: PageTree.Root;
+    sidebar?: Omit<Partial<SidebarOptions>, 'component' | 'enabled'>;
+    containerProps?: HTMLAttributes<HTMLDivElement>;
+}
+export declare function DocsLayout({ nav: { transparentMode, ...nav }, sidebar: { collapsible: sidebarCollapsible, tabs: tabOptions, banner: sidebarBanner, footer: sidebarFooter, components: sidebarComponents, ...sidebar }, i18n, ...props }: DocsLayoutProps): ReactNode;
+//# sourceMappingURL=notebook.d.ts.map

package/dist/layouts/notebook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notebook.d.ts","sourceRoot":"","sources":["../../src/layouts/notebook.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,EACL,KAAK,eAAe,EAGrB,MAAM,kBAAkB,CAAC;AAgC1B,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAGrD,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IAEpB,OAAO,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC,CAAC;IAEjE,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,wBAAgB,UAAU,CAAC,EACzB,GAAG,EAAE,EAAE,eAAe,EAAE,GAAG,GAAG,EAAO,EACrC,OAAO,EAAE,EACP,WAAW,EAAE,kBAAyB,EACtC,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,aAAa,EACrB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,iBAAiB,EAC7B,GAAG,OAAO,EACN,EACN,IAAY,EACZ,GAAG,KAAK,EACT,EAAE,eAAe,GAAG,SAAS,CAgE7B"}

package/dist/layouts/notebook.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { getLinks, } from '../layouts/shared';
+import { CollapsibleSidebar, Sidebar, SidebarCollapseTrigger, SidebarFooter, SidebarHeader, SidebarViewport, SidebarPageTree, } from '../layouts/docs/sidebar';
+import { notFound } from 'next/navigation';
+import { RootToggle } from '../components/layout/root-toggle';
+import { TreeContextProvider } from '../contexts/tree';
+import { NavProvider, Title } from '../components/layout/nav';
+import { Navbar, NavbarSidebarTrigger } from '../layouts/docs/navbar';
+import { SearchOnly } from '../contexts/search';
+import { LargeSearchToggle, SearchToggle, } from '../components/layout/search-toggle';
+import { cn } from '../utils/cn';
+import Link from 'next/link';
+import { buttonVariants } from '../components/ui/button';
+import { ChevronDown, Languages } from 'lucide-react';
+import { BaseLinkItem } from '../layouts/links';
+import { LanguageToggle } from '../components/layout/language-toggle';
+import { ThemeToggle } from '../components/layout/theme-toggle';
+import { Popover, PopoverContent, PopoverTrigger, } from '../components/ui/popover';
+import { getSidebarTabsFromOptions, SidebarLinkItem, } from '../layouts/docs/shared';
+import { LayoutBody } from './notebook.client';
+export function DocsLayout({ nav: { transparentMode, ...nav } = {}, sidebar: { collapsible: sidebarCollapsible = true, tabs: tabOptions, banner: sidebarBanner, footer: sidebarFooter, components: sidebarComponents, ...sidebar } = {}, i18n = false, ...props }) {
+    const links = getLinks(props.links ?? [], props.githubUrl);
+    const Aside = sidebarCollapsible ? CollapsibleSidebar : Sidebar;
+    if (props.tree === undefined)
+        notFound();
+    const tabs = getSidebarTabsFromOptions(tabOptions, props.tree) ?? [];
+    return (_jsx(TreeContextProvider, { tree: props.tree, children: _jsx(NavProvider, { transparentMode: transparentMode, children: _jsxs(LayoutBody, { ...props.containerProps, className: cn('[--fd-nav-height:3.5rem] md:[--fd-sidebar-width:260px] lg:[--fd-toc-width:260px] [&_#nd-toc]:max-lg:hidden [&_#nd-tocnav]:lg:hidden', props.containerProps?.className), children: [_jsxs(Aside, { ...sidebar, className: cn('md:[--fd-nav-height:0px]', sidebar.className), children: [_jsxs(SidebarHeader, { children: [_jsxs(SidebarHeaderItems, { nav: nav, links: links, children: [nav.children, sidebarCollapsible ? (_jsx(SidebarCollapseTrigger, { className: "ms-auto text-fd-muted-foreground" })) : null] }), sidebarBanner, tabs.length > 0 ? (_jsx(RootToggle, { options: tabs, className: "md:-mx-2" })) : null] }), _jsxs(SidebarViewport, { children: [_jsx("div", { className: "px-4 pt-4 empty:hidden md:px-3 lg:hidden", children: links.map((item, i) => (_jsx(SidebarLinkItem, { item: item }, i))) }), _jsx("div", { className: "p-4 md:px-3", children: _jsx(SidebarPageTree, { components: sidebarComponents }) })] }), _jsx(SidebarFooter, { children: sidebarFooter })] }), _jsxs("div", { className: "w-full min-w-0 max-w-[var(--fd-content-width)] [--fd-nav-height:3.5rem]", children: [_jsx(DocsNavbar, { nav: nav, links: links, i18n: i18n, sidebarCollapsible: sidebarCollapsible }), _jsx("div", { className: "flex flex-row", children: props.children })] }), _jsx("div", { className: "min-w-[var(--fd-sidebar-width)] flex-1", style: {
+                            marginInlineStart: 'calc(var(--fd-sidebar-width) * -1)',
+                        } })] }) }) }));
+}
+function DocsNavbar({ sidebarCollapsible, links, nav = {}, i18n, }) {
+    return (_jsxs(Navbar, { id: "nd-subnav", className: "h-14 md:gap-1.5", children: [sidebarCollapsible ? (_jsx(SidebarCollapseTrigger, { className: "-ms-1.5 text-fd-muted-foreground data-[collapsed=false]:hidden max-md:hidden" })) : null, _jsx(SearchOnly, { children: _jsx(LargeSearchToggle, { className: "w-full max-w-[240px] rounded-lg max-md:hidden" }) }), _jsx(Title, { url: nav.url, title: nav.title, className: "md:hidden" }), _jsxs("div", { className: "flex flex-1 flex-row items-center gap-6 px-2", children: [links
+                        .filter((item) => item.type !== 'icon')
+                        .map((item, i) => (_jsx(NavbarLinkItem, { item: item, className: "text-sm text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground max-lg:hidden" }, i))), nav.children] }), _jsx(SearchOnly, { children: _jsx(SearchToggle, { className: "md:hidden" }) }), _jsx(NavbarSidebarTrigger, { className: "-me-1.5 max-lg:hidden md:hidden" }), _jsx("div", { className: "flex flex-row items-center empty:hidden", children: links
+                    .filter((item) => item.type === 'icon')
+                    .map((item, i) => (_jsx(BaseLinkItem, { item: item, className: cn(buttonVariants({ size: 'icon', color: 'ghost' }), 'text-fd-muted-foreground'), "aria-label": item.label, children: item.icon }, i))) }), i18n ? (_jsx(LanguageToggle, { children: _jsx(Languages, { className: "size-5" }) })) : null, _jsx(ThemeToggle, { className: "p-0 max-md:hidden" })] }));
+}
+function NavbarLinkItem({ item, ...props }) {
+    if (item.type === 'menu') {
+        return (_jsxs(Popover, { children: [_jsxs(PopoverTrigger, { ...props, className: cn('inline-flex items-center gap-1.5', props.className), children: [item.text, _jsx(ChevronDown, { className: "size-3" })] }), _jsx(PopoverContent, { className: "flex flex-col", children: item.items.map((child, i) => {
+                        if (child.type === 'custom')
+                            return _jsx(Fragment, { children: child.children }, i);
+                        return (_jsxs(BaseLinkItem, { item: child, className: "inline-flex items-center gap-2 rounded-md p-2 text-start hover:bg-fd-accent hover:text-fd-accent-foreground data-[active=true]:text-fd-primary [&_svg]:size-4", children: [child.icon, child.text] }, i));
+                    }) })] }));
+    }
+    if (item.type === 'custom')
+        return item.children;
+    return (_jsx(BaseLinkItem, { item: item, ...props, children: item.text }));
+}
+function SidebarHeaderItems({ links, nav = {}, children, }) {
+    const isEmpty = !nav.title && !nav.children && links.length === 0;
+    if (isEmpty)
+        return null;
+    return (_jsxs("div", { className: "flex flex-row items-center max-md:hidden", children: [nav.title ? (_jsx(Link, { href: nav.url ?? '/', className: "inline-flex items-center gap-2.5 py-1 font-medium", children: nav.title })) : null, children] }));
+}

package/dist/layouts/shared.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import type { LinkItemType } from '../layouts/links';
 import type { NavProviderProps, TitleProps } from '../components/layout/nav';
-interface NavOptions extends SharedNavProps {
+export interface NavOptions extends SharedNavProps {
     enabled: boolean;
     component: ReactNode;
 }
@@ -44,5 +44,4 @@ export declare function replaceOrDefault(obj: {
     enabled?: boolean;
     component?: ReactNode;
 } | undefined, def: ReactNode, customComponentProps?: object, disabled?: ReactNode): ReactNode;
-export {};
 //# sourceMappingURL=shared.d.ts.map

package/dist/layouts/shared.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/layouts/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAG5E,UAAU,UAAW,SAAQ,cAAc;IACzC,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,cAAe,SAAQ,UAAU,EAAE,gBAAgB;IAClE;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB;;OAEG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAE1B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,QAAQ,CACtB,KAAK,CAAC,EAAE,YAAY,EAAE,EACtB,SAAS,CAAC,EAAE,MAAM,GACjB,YAAY,EAAE,CAoBhB;AAED,wBAAgB,gBAAgB,CAC9B,GAAG,EACC;IACE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,GACD,SAAS,EACb,GAAG,EAAE,SAAS,EACd,oBAAoB,CAAC,EAAE,MAAM,EAC7B,QAAQ,CAAC,EAAE,SAAS,GACnB,SAAS,CAMX"}
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/layouts/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAG5E,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,cAAe,SAAQ,UAAU,EAAE,gBAAgB;IAClE;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB;;OAEG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAE1B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,QAAQ,CACtB,KAAK,CAAC,EAAE,YAAY,EAAE,EACtB,SAAS,CAAC,EAAE,MAAM,GACjB,YAAY,EAAE,CAqBhB;AAED,wBAAgB,gBAAgB,CAC9B,GAAG,EACC;IACE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,GACD,SAAS,EACb,GAAG,EAAE,SAAS,EACd,oBAAoB,CAAC,EAAE,MAAM,EAC7B,QAAQ,CAAC,EAAE,SAAS,GACnB,SAAS,CAMX"}

package/dist/layouts/shared.js

@@ -12,6 +12,7 @@ export function getLinks(links, githubUrl) {
                 type: 'icon',
                 url: githubUrl,
                 text: 'Github',
+                label: 'GitHub',
                 icon: (_jsx("svg", { role: "img", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" }) })),
                 external: true,
             },

package/dist/page.client.d.ts

@@ -1,4 +1,5 @@
 import { type HTMLAttributes } from 'react';
+import { type BreadcrumbOptions } from 'fumadocs-core/breadcrumb';
 export declare function PageContainer(props: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 export declare function PageHeader(props: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 export declare function LastUpdate(props: {
@@ -20,4 +21,6 @@ export interface FooterProps {
     };
 }
 export declare function Footer({ items }: FooterProps): import("react/jsx-runtime").JSX.Element;
+export type BreadcrumbProps = BreadcrumbOptions;
+export declare function Breadcrumb(options: BreadcrumbProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=page.client.d.ts.map

package/dist/page.client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page.client.d.ts","sourceRoot":"","sources":["../src/page.client.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EAKpB,MAAM,OAAO,CAAC;AAYf,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAuBlE;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAyB/D;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,2CAc/C;AAED,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE;QACN,QAAQ,CAAC,EAAE;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,GAAG,EAAE,MAAM,CAAA;SAAE,CAAC;QACzC,IAAI,CAAC,EAAE;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,GAAG,EAAE,MAAM,CAAA;SAAE,CAAC;KACtC,CAAC;CACH;AAiCD,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,EAAE,WAAW,2CA8C5C"}
+{"version":3,"file":"page.client.d.ts","sourceRoot":"","sources":["../src/page.client.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,cAAc,EAIpB,MAAM,OAAO,CAAC;AAWf,OAAO,EACL,KAAK,iBAAiB,EAEvB,MAAM,0BAA0B,CAAC;AAElC,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAsBlE;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAwB/D;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,2CAc/C;AAED,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE;QACN,QAAQ,CAAC,EAAE;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,GAAG,EAAE,MAAM,CAAA;SAAE,CAAC;QACzC,IAAI,CAAC,EAAE;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,GAAG,EAAE,MAAM,CAAA;SAAE,CAAC;KACtC,CAAC;CACH;AAiCD,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,EAAE,WAAW,2CA8C5C;AAED,MAAM,MAAM,eAAe,GAAG,iBAAiB,CAAC;AAEhD,wBAAgB,UAAU,CAAC,OAAO,EAAE,eAAe,kDAiClD"}

package/dist/page.client.js

@@ -1,18 +1,19 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useEffect, useMemo, useState, } from 'react';
+import { Fragment, useEffect, useMemo, useState, } from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import Link from 'next/link';
 import { cva } from 'class-variance-authority';
 import { cn } from './utils/cn';
 import { useI18n } from './contexts/i18n';
-import { useTreeContext } from './contexts/tree';
+import { useTreeContext, useTreePath } from './contexts/tree';
 import { useSidebar } from './contexts/sidebar';
 import { usePathname } from 'next/navigation';
-import { NavContext } from './components/layout/nav';
+import { useNav } from './components/layout/nav';
+import { getBreadcrumbItemsFromPath, } from 'fumadocs-core/breadcrumb';
 export function PageContainer(props) {
     const { collapsed } = useSidebar();
-    return (_jsx("div", { id: "nd-page", ...props, className: cn('flex w-full min-w-0 max-w-[var(--fd-page-width)] flex-col md:transition-[max-width]', props.className), style: {
+    return (_jsx("div", { ...props, className: cn('flex w-full min-w-0 max-w-[var(--fd-page-width)] flex-col md:transition-[max-width]', props.className), style: {
             ...props.style,
             '--fd-page-width': collapsed
                 ? '100vw'
@@ -21,8 +22,8 @@ export function PageContainer(props) {
 }
 export function PageHeader(props) {
     const { open } = useSidebar();
-    const { isTransparent } = useContext(NavContext);
-    return (_jsx("div", { id: "nd-tocnav", ...props, className: cn('sticky top-fd-layout-top z-10 flex flex-row items-center border-b border-fd-foreground/10 text-sm transition-colors', !isTransparent && 'bg-fd-background/80 backdrop-blur-md', open && 'opacity-0', props.className), style: {
+    const { isTransparent } = useNav();
+    return (_jsx("header", { ...props, className: cn('sticky top-fd-layout-top z-10 flex flex-row items-center border-b border-fd-foreground/10 text-sm transition-colors', !isTransparent && 'bg-fd-background/80 backdrop-blur-md', open && 'opacity-0', props.className), style: {
             ...props.style,
             '--fd-toc-top-with-offset': 'calc(4px + var(--fd-banner-height) + var(--fd-nav-height))',
         }, children: props.children }));
@@ -75,3 +76,16 @@ export function Footer({ items }) {
     }, [items, pathname, root]);
     return (_jsxs("div", { className: "grid grid-cols-2 gap-4 pb-6", children: [previous ? (_jsxs(Link, { href: previous.url, className: cn(itemVariants()), children: [_jsxs("div", { className: cn(itemLabel()), children: [_jsx(ChevronLeft, { className: "-ms-1 size-4 shrink-0 rtl:rotate-180" }), _jsx("p", { children: text.previousPage })] }), _jsx("p", { className: "font-medium", children: previous.name })] })) : null, next ? (_jsxs(Link, { href: next.url, className: cn(itemVariants({ className: 'col-start-2 text-end' })), children: [_jsxs("div", { className: cn(itemLabel({ className: 'flex-row-reverse' })), children: [_jsx(ChevronRight, { className: "-me-1 size-4 shrink-0 rtl:rotate-180" }), _jsx("p", { children: text.nextPage })] }), _jsx("p", { className: "font-medium", children: next.name })] })) : null] }));
 }
+export function Breadcrumb(options) {
+    const path = useTreePath();
+    const { root } = useTreeContext();
+    const items = useMemo(() => {
+        return getBreadcrumbItemsFromPath(root, path, {
+            includePage: options.includePage ?? false,
+            ...options,
+        });
+    }, [options, path, root]);
+    if (items.length === 0)
+        return null;
+    return (_jsx("div", { className: "-mb-3 flex flex-row items-center gap-1 text-sm font-medium text-fd-muted-foreground", children: items.map((item, i) => (_jsxs(Fragment, { children: [i !== 0 && (_jsx(ChevronRight, { className: "size-4 shrink-0 rtl:rotate-180" })), item.url ? (_jsx(Link, { href: item.url, className: "truncate hover:text-fd-accent-foreground", children: item.name })) : (_jsx("span", { className: "truncate", children: item.name }))] }, i))) }));
+}

package/dist/page.d.ts

@@ -2,8 +2,7 @@ import { type PageTree, type TableOfContents } from 'fumadocs-core/server';
 import { type AnchorHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';
 import type { LoaderConfig, LoaderOutput, Page } from 'fumadocs-core/source';
 import { type AnchorProviderProps } from 'fumadocs-core/toc';
-import { type FooterProps } from './page.client';
-import { type BreadcrumbProps } from './components/layout/breadcrumb';
+import { type FooterProps, type BreadcrumbProps } from './page.client';
 import { type TOCProps } from './components/layout/toc';
 type TableOfContentOptions = Omit<TOCProps, 'items' | 'children'> & Pick<AnchorProviderProps, 'single'> & {
     enabled: boolean;
@@ -31,6 +30,13 @@ interface EditOnGitHubOptions extends Omit<AnchorHTMLAttributes<HTMLAnchorElemen
 interface BreadcrumbOptions extends BreadcrumbProps {
     enabled: boolean;
     component: ReactNode;
+    /**
+     * Show the full path to the current page
+     *
+     * @defaultValue false
+     * @deprecated use `includePage` instead
+     */
+    full?: boolean;
 }
 interface FooterOptions extends FooterProps {
     enabled: boolean;

package/dist/page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../src/page.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../src/page.tsx"],"names":[],"mappings":"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"}

package/dist/page.js

@@ -1,27 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, } from 'react';
-import dynamic from 'next/dynamic';
 import { AnchorProvider } from 'fumadocs-core/toc';
 import { Card, Cards } from './components/card';
 import { replaceOrDefault } from './layouts/shared';
 import { cn } from './utils/cn';
-import { Footer, LastUpdate, PageContainer, PageHeader, } from './page.client';
-import { Breadcrumb, } from './components/layout/breadcrumb';
+import { Footer, LastUpdate, PageContainer, PageHeader, Breadcrumb, } from './page.client';
 import { Toc, TOCItems } from './components/layout/toc';
 import { TocPopoverTrigger, TocPopover, TocPopoverContent, } from './components/layout/toc-popover';
 import { buttonVariants } from './components/ui/button';
 import { Edit, Text } from 'lucide-react';
 import { I18nLabel } from './contexts/i18n';
-const ClerkTOCItems = dynamic(() => import('./components/layout/toc-clerk'));
+import ClerkTOCItems from './components/layout/toc-clerk';
 export function DocsPage({ toc = [], breadcrumb = {}, full = false, footer = {}, tableOfContentPopover: { enabled: tocPopoverEnabled = true, component: tocPopoverReplace, ...tocPopoverOptions } = {}, tableOfContent: { 
 // disable TOC on full mode, you can still enable it with `enabled` option.
 enabled: tocEnabled = !full, component: tocReplace, ...tocOptions } = {}, ...props }) {
-    return (_jsxs(AnchorProvider, { toc: toc, single: tocOptions.single, children: [_jsxs(PageContainer, { style: {
+    return (_jsxs(AnchorProvider, { toc: toc, single: tocOptions.single, children: [_jsxs(PageContainer, { id: "nd-page", style: {
                     '--fd-toc-width': tocEnabled ? undefined : '0px',
-                }, children: [replaceOrDefault({ enabled: tocPopoverEnabled, component: tocPopoverReplace }, _jsx(PageHeader, { className: "lg:hidden", children: _jsxs(TocPopover, { children: [_jsx(TocPopoverTrigger, { className: "size-full", items: toc }), _jsxs(TocPopoverContent, { children: [tocPopoverOptions.header, tocPopoverOptions.style === 'clerk' ? (_jsx(ClerkTOCItems, { items: toc, isMenu: true })) : (_jsx(TOCItems, { items: toc, isMenu: true })), tocPopoverOptions.footer] })] }) }), {
+                }, children: [replaceOrDefault({ enabled: tocPopoverEnabled, component: tocPopoverReplace }, _jsx(PageHeader, { id: "nd-tocnav", children: _jsxs(TocPopover, { children: [_jsx(TocPopoverTrigger, { className: "size-full", items: toc }), _jsxs(TocPopoverContent, { children: [tocPopoverOptions.header, tocPopoverOptions.style === 'clerk' ? (_jsx(ClerkTOCItems, { items: toc, isMenu: true })) : (_jsx(TOCItems, { items: toc, isMenu: true })), tocPopoverOptions.footer] })] }) }), {
                         items: toc,
                         ...tocPopoverOptions,
-                    }), _jsxs("article", { className: cn('mx-auto flex w-full flex-1 flex-col gap-6 px-4 pt-10 md:px-6 md:pt-12', tocEnabled ? 'max-w-[860px]' : 'max-w-[1120px]'), children: [replaceOrDefault(breadcrumb, _jsx(Breadcrumb, { ...breadcrumb })), props.children, _jsx("div", { role: "none", className: "flex-1" }), _jsxs("div", { className: "flex flex-row flex-wrap items-center justify-between gap-4 empty:hidden", children: [props.editOnGithub ? (_jsx(EditOnGitHub, { ...props.editOnGithub })) : null, props.lastUpdate ? (_jsx(LastUpdate, { date: new Date(props.lastUpdate) })) : null] }), replaceOrDefault(footer, _jsx(Footer, { items: footer.items }))] })] }), replaceOrDefault({ enabled: tocEnabled, component: tocReplace }, _jsx(Toc, { children: _jsxs("div", { className: "flex h-full w-[var(--fd-toc-width)] max-w-full flex-col gap-3", children: [tocOptions.header, _jsxs("h3", { className: "-ms-0.5 inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground", children: [_jsx(Text, { className: "size-4" }), _jsx(I18nLabel, { label: "toc" })] }), tocOptions.style === 'clerk' ? (_jsx(ClerkTOCItems, { items: toc })) : (_jsx(TOCItems, { items: toc })), tocOptions.footer] }) }), {
+                    }), _jsxs("article", { className: cn('mx-auto flex w-full flex-1 flex-col gap-6 px-4 pt-10 md:px-7 md:pt-12', tocEnabled ? 'max-w-[860px]' : 'max-w-[1120px]'), children: [replaceOrDefault(breadcrumb, _jsx(Breadcrumb, { includePage: breadcrumb.full, ...breadcrumb })), props.children, _jsx("div", { role: "none", className: "flex-1" }), _jsxs("div", { className: "flex flex-row flex-wrap items-center justify-between gap-4 empty:hidden", children: [props.editOnGithub ? (_jsx(EditOnGitHub, { ...props.editOnGithub })) : null, props.lastUpdate ? (_jsx(LastUpdate, { date: new Date(props.lastUpdate) })) : null] }), replaceOrDefault(footer, _jsx(Footer, { items: footer.items }))] })] }), replaceOrDefault({ enabled: tocEnabled, component: tocReplace }, _jsx(Toc, { id: "nd-toc", children: _jsxs("div", { className: "flex h-full w-[var(--fd-toc-width)] max-w-full flex-col gap-3 pe-2", children: [tocOptions.header, _jsxs("h3", { className: "-ms-0.5 inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground", children: [_jsx(Text, { className: "size-4" }), _jsx(I18nLabel, { label: "toc" })] }), tocOptions.style === 'clerk' ? (_jsx(ClerkTOCItems, { items: toc })) : (_jsx(TOCItems, { items: toc })), tocOptions.footer] }) }), {
                 items: toc,
                 ...tocOptions,
             }, _jsx("div", { role: "none", className: "flex-1" }))] }));