fumadocs-ui 16.1.0 → 16.2.0

package/dist/layouts/home/client.js

@@ -1,13 +1,18 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Fragment, useState } from 'react';
+import { Fragment, useMemo, useState } from 'react';
 import { cva } from 'class-variance-authority';
 import Link from 'fumadocs-core/link';
 import { cn } from '../../utils/cn.js';
-import { BaseLinkItem } from '../../layouts/shared/index.js';
+import { resolveLinkItems, } from '../../layouts/shared/index.js';
+import { LinkItem } from '../../layouts/shared/link-item.js';
 import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, } from '../../components/ui/navigation-menu.js';
-import { useNav } from '../../contexts/layout.js';
 import { buttonVariants } from '../../components/ui/button.js';
+import { LargeSearchToggle, SearchToggle, } from '../../layouts/shared/search-toggle.js';
+import { ThemeToggle } from '../../layouts/shared/theme-toggle.js';
+import { LanguageToggle, LanguageToggleText, } from '../../layouts/shared/language-toggle.js';
+import { ChevronDown, Languages } from '../../icons.js';
+import { useIsScrollTop } from '../../utils/use-is-scroll-top.js';
 export const navItemVariants = cva('[&_svg]:size-4', {
     variants: {
         variant: {
@@ -26,13 +31,51 @@ export const navItemVariants = cva('[&_svg]:size-4', {
         variant: 'main',
     },
 });
-export function Navbar(props) {
+export function Header({ nav = {}, i18n = false, links, githubUrl, themeSwitch = {}, searchToggle = {}, }) {
+    const { navItems, menuItems } = useMemo(() => {
+        const navItems = [];
+        const menuItems = [];
+        for (const item of resolveLinkItems({ links, githubUrl })) {
+            switch (item.on ?? 'all') {
+                case 'menu':
+                    menuItems.push(item);
+                    break;
+                case 'nav':
+                    navItems.push(item);
+                    break;
+                default:
+                    navItems.push(item);
+                    menuItems.push(item);
+            }
+        }
+        return { navItems, menuItems };
+    }, [links, githubUrl]);
+    return (_jsxs(HeaderNavigationMenu, { transparentMode: nav.transparentMode, children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex items-center gap-2.5 font-semibold", children: nav.title }), nav.children, _jsx("ul", { className: "flex flex-row items-center gap-2 px-6 max-sm:hidden", children: navItems
+                    .filter((item) => !isSecondary(item))
+                    .map((item, i) => (_jsx(NavigationMenuLinkItem, { item: item, className: "text-sm" }, i))) }), _jsxs("div", { className: "flex flex-row items-center justify-end gap-1.5 flex-1 max-lg:hidden", children: [searchToggle.enabled !== false &&
+                        (searchToggle.components?.lg ?? (_jsx(LargeSearchToggle, { className: "w-full rounded-full ps-2.5 max-w-[240px]", hideIfDisabled: true }))), themeSwitch.enabled !== false &&
+                        (themeSwitch.component ?? _jsx(ThemeToggle, { mode: themeSwitch?.mode })), i18n && (_jsx(LanguageToggle, { children: _jsx(Languages, { className: "size-5" }) })), _jsx("ul", { className: "flex flex-row gap-2 items-center empty:hidden", children: navItems.filter(isSecondary).map((item, i) => (_jsx(NavigationMenuLinkItem, { className: cn(item.type === 'icon' && '-mx-1 first:ms-0 last:me-0'), item: item }, i))) })] }), _jsxs("ul", { className: "flex flex-row items-center ms-auto -me-1.5 lg:hidden", children: [searchToggle.enabled !== false &&
+                        (searchToggle.components?.sm ?? (_jsx(SearchToggle, { className: "p-2", hideIfDisabled: true }))), _jsxs(NavigationMenuItem, { children: [_jsx(NavigationMenuTrigger, { "aria-label": "Toggle Menu", className: cn(buttonVariants({
+                                    size: 'icon',
+                                    color: 'ghost',
+                                    className: 'group [&_svg]:size-5.5',
+                                })), onPointerMove: nav.enableHoverToOpen ? undefined : (e) => e.preventDefault(), children: _jsx(ChevronDown, { className: "transition-transform duration-300 group-data-[state=open]:rotate-180" }) }), _jsxs(NavigationMenuContent, { className: "flex flex-col p-4 sm:flex-row sm:items-center sm:justify-end", children: [menuItems
+                                        .filter((item) => !isSecondary(item))
+                                        .map((item, i) => (_jsx(MobileNavigationMenuLinkItem, { item: item, className: "sm:hidden" }, i))), _jsxs("div", { className: "-ms-1.5 flex flex-row items-center gap-2 max-sm:mt-2", children: [menuItems.filter(isSecondary).map((item, i) => (_jsx(MobileNavigationMenuLinkItem, { item: item, className: cn(item.type === 'icon' && '-mx-1 first:ms-0') }, i))), _jsx("div", { role: "separator", className: "flex-1" }), i18n && (_jsxs(LanguageToggle, { children: [_jsx(Languages, { className: "size-5" }), _jsx(LanguageToggleText, {}), _jsx(ChevronDown, { className: "size-3 text-fd-muted-foreground" })] })), themeSwitch.enabled !== false &&
+                                                (themeSwitch.component ?? (_jsx(ThemeToggle, { mode: themeSwitch?.mode })))] })] })] })] })] }));
+}
+function isSecondary(item) {
+    if ('secondary' in item && item.secondary != null)
+        return item.secondary;
+    return item.type === 'icon';
+}
+function HeaderNavigationMenu({ transparentMode = 'none', ...props }) {
     const [value, setValue] = useState('');
-    const { isTransparent } = useNav();
-    return (_jsx(NavigationMenu, { value: value, onValueChange: setValue, asChild: true, children: _jsxs("header", { id: "nd-nav", ...props, className: cn('fixed top-(--fd-banner-height) z-40 left-0 right-(--removed-body-scroll-bar-size,0) backdrop-blur-lg border-b transition-colors *:mx-auto *:max-w-fd-container', value.length > 0 && 'max-lg:shadow-lg max-lg:rounded-b-2xl', (!isTransparent || value.length > 0) && 'bg-fd-background/80', props.className), children: [_jsx(NavigationMenuList, { className: "flex h-14 w-full items-center px-4", asChild: true, children: _jsx("nav", { children: props.children }) }), _jsx(NavigationMenuViewport, {})] }) }));
+    const isTop = useIsScrollTop({ enabled: transparentMode === 'top' }) ?? true;
+    const isTransparent = transparentMode === 'top' ? isTop : transparentMode === 'always';
+    return (_jsx(NavigationMenu, { value: value, onValueChange: setValue, asChild: true, children: _jsx("header", { id: "nd-nav", ...props, className: cn('sticky h-14 top-0 z-40', props.className), children: _jsxs("div", { className: cn('backdrop-blur-lg border-b transition-colors *:mx-auto *:max-w-(--fd-layout-width)', value.length > 0 && 'max-lg:shadow-lg max-lg:rounded-b-2xl', (!isTransparent || value.length > 0) && 'bg-fd-background/80'), children: [_jsx(NavigationMenuList, { className: "flex h-14 w-full items-center px-4", asChild: true, children: _jsx("nav", { children: props.children }) }), _jsx(NavigationMenuViewport, {})] }) }) }));
 }
-export { NavigationMenuItem };
-export function NavigationMenuLinkItem({ item, ...props }) {
+function NavigationMenuLinkItem({ item, ...props }) {
     if (item.type === 'custom')
         return _jsx("div", { ...props, children: item.children });
     if (item.type === 'menu') {
@@ -45,16 +88,16 @@ export function NavigationMenuLinkItem({ item, ...props }) {
         });
         return (_jsxs(NavigationMenuItem, { ...props, children: [_jsx(NavigationMenuTrigger, { className: cn(navItemVariants(), 'rounded-md'), children: item.url ? (_jsx(Link, { href: item.url, external: item.external, children: item.text })) : (item.text) }), _jsx(NavigationMenuContent, { className: "grid grid-cols-1 gap-2 p-4 md:grid-cols-2 lg:grid-cols-3", children: children })] }));
     }
-    return (_jsx(NavigationMenuItem, { ...props, children: _jsx(NavigationMenuLink, { asChild: true, children: _jsx(BaseLinkItem, { item: item, "aria-label": item.type === 'icon' ? item.label : undefined, className: cn(navItemVariants({ variant: item.type })), children: item.type === 'icon' ? item.icon : item.text }) }) }));
+    return (_jsx(NavigationMenuItem, { ...props, children: _jsx(NavigationMenuLink, { asChild: true, children: _jsx(LinkItem, { item: item, "aria-label": item.type === 'icon' ? item.label : undefined, className: cn(navItemVariants({ variant: item.type })), children: item.type === 'icon' ? item.icon : item.text }) }) }));
 }
-export function MobileNavigationMenuLinkItem({ item, ...props }) {
+function MobileNavigationMenuLinkItem({ item, ...props }) {
     if (item.type === 'custom')
         return _jsx("div", { className: cn('grid', props.className), children: item.children });
     if (item.type === 'menu') {
         const header = (_jsxs(_Fragment, { children: [item.icon, item.text] }));
         return (_jsxs("div", { className: cn('mb-4 flex flex-col', props.className), children: [_jsx("p", { className: "mb-1 text-sm text-fd-muted-foreground", children: item.url ? (_jsx(NavigationMenuLink, { asChild: true, children: _jsx(Link, { href: item.url, external: item.external, children: header }) })) : (header) }), item.items.map((child, i) => (_jsx(MobileNavigationMenuLinkItem, { item: child }, i)))] }));
     }
-    return (_jsx(NavigationMenuLink, { asChild: true, children: _jsxs(BaseLinkItem, { item: item, className: cn({
+    return (_jsx(NavigationMenuLink, { asChild: true, children: _jsxs(LinkItem, { item: item, className: cn({
                 main: 'inline-flex items-center gap-2 py-1.5 transition-colors hover:text-fd-popover-foreground/50 data-[active=true]:font-medium data-[active=true]:text-fd-primary [&_svg]:size-4',
                 icon: buttonVariants({
                     size: 'icon',
@@ -66,9 +109,3 @@ export function MobileNavigationMenuLinkItem({ item, ...props }) {
                 }),
             }[item.type ?? 'main'], props.className), "aria-label": item.type === 'icon' ? item.label : undefined, children: [item.icon, item.type === 'icon' ? undefined : item.text] }) }));
 }
-export function MobileNavigationMenuTrigger({ enableHover = false, ...props }) {
-    return (_jsx(NavigationMenuTrigger, { ...props, onPointerMove: enableHover ? undefined : (e) => e.preventDefault(), children: props.children }));
-}
-export function MobileNavigationMenuContent(props) {
-    return (_jsx(NavigationMenuContent, { ...props, className: cn('flex flex-col p-4', props.className), children: props.children }));
-}

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

@@ -1,4 +1,4 @@
-import { type HTMLAttributes } from 'react';
+import type { ComponentProps } from 'react';
 import { type BaseLayoutProps, type NavOptions } from '../../layouts/shared/index.js';
 export interface HomeLayoutProps extends BaseLayoutProps {
     nav?: Partial<NavOptions & {
@@ -8,6 +8,5 @@ export interface HomeLayoutProps extends BaseLayoutProps {
         enableHoverToOpen?: boolean;
     }>;
 }
-export declare function HomeLayout(props: HomeLayoutProps & HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
-export declare function Header({ nav, i18n, links, githubUrl, themeSwitch, searchToggle, }: HomeLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function HomeLayout(props: HomeLayoutProps & ComponentProps<'main'>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layouts/home/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAW,MAAM,OAAO,CAAC;AAErD,OAAO,EACL,KAAK,eAAe,EAGpB,KAAK,UAAU,EAChB,MAAM,kBAAkB,CAAC;AAuB1B,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,GAAG,CAAC,EAAE,OAAO,CACX,UAAU,GAAG;QACX;;WAEG;QACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;KAC7B,CACF,CAAC;CACH;AAED,wBAAgB,UAAU,CACxB,KAAK,EAAE,eAAe,GAAG,cAAc,CAAC,WAAW,CAAC,2CAkCrD;AAED,wBAAgB,MAAM,CAAC,EACrB,GAAQ,EACR,IAAY,EACZ,KAAK,EACL,SAAS,EACT,WAAgB,EAChB,YAAiB,GAClB,EAAE,eAAe,2CA+GjB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layouts/home/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,KAAK,eAAe,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAGzE,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,GAAG,CAAC,EAAE,OAAO,CACX,UAAU,GAAG;QACX;;WAEG;QACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;KAC7B,CACF,CAAC;CACH;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,cAAc,CAAC,MAAM,CAAC,2CAkCzE"}

package/dist/layouts/home/index.js

@@ -1,40 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
 import { cn } from '../../utils/cn.js';
-import { getLinks, } from '../../layouts/shared/index.js';
-import { NavProvider } from '../../contexts/layout.js';
-import { LargeSearchToggle, SearchToggle, } from '../../components/layout/search-toggle.js';
-import { ThemeToggle } from '../../components/layout/theme-toggle.js';
-import { LanguageToggle, LanguageToggleText, } from '../../components/layout/language-toggle.js';
-import { ChevronDown, Languages } from '../../icons.js';
-import Link from 'fumadocs-core/link';
-import { Navbar, NavigationMenuLinkItem, MobileNavigationMenuContent, MobileNavigationMenuLinkItem, MobileNavigationMenuTrigger, NavigationMenuItem, } from '../../layouts/home/client.js';
-import { buttonVariants } from '../../components/ui/button.js';
+import { Header } from '../../layouts/home/client.js';
 export function HomeLayout(props) {
     const { nav = {}, links, githubUrl, i18n, themeSwitch = {}, searchToggle, ...rest } = props;
-    return (_jsx(NavProvider, { transparentMode: nav?.transparentMode, children: _jsxs("main", { id: "nd-home-layout", ...rest, className: cn('flex flex-1 flex-col pt-14', rest.className), children: [nav.enabled !== false &&
-                    (nav.component ?? (_jsx(Header, { links: links, nav: nav, themeSwitch: themeSwitch, searchToggle: searchToggle, i18n: i18n, githubUrl: githubUrl }))), props.children] }) }));
-}
-export function Header({ nav = {}, i18n = false, links, githubUrl, themeSwitch = {}, searchToggle = {}, }) {
-    const finalLinks = useMemo(() => getLinks(links, githubUrl), [links, githubUrl]);
-    const navItems = finalLinks.filter((item) => ['nav', 'all'].includes(item.on ?? 'all'));
-    const menuItems = finalLinks.filter((item) => ['menu', 'all'].includes(item.on ?? 'all'));
-    return (_jsxs(Navbar, { children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex items-center gap-2.5 font-semibold", children: nav.title }), nav.children, _jsx("ul", { className: "flex flex-row items-center gap-2 px-6 max-sm:hidden", children: navItems
-                    .filter((item) => !isSecondary(item))
-                    .map((item, i) => (_jsx(NavigationMenuLinkItem, { item: item, className: "text-sm" }, i))) }), _jsxs("div", { className: "flex flex-row items-center justify-end gap-1.5 flex-1 max-lg:hidden", children: [searchToggle.enabled !== false &&
-                        (searchToggle.components?.lg ?? (_jsx(LargeSearchToggle, { className: "w-full rounded-full ps-2.5 max-w-[240px]", hideIfDisabled: true }))), themeSwitch.enabled !== false &&
-                        (themeSwitch.component ?? _jsx(ThemeToggle, { mode: themeSwitch?.mode })), i18n && (_jsx(LanguageToggle, { children: _jsx(Languages, { className: "size-5" }) })), _jsx("ul", { className: "flex flex-row gap-2 items-center empty:hidden", children: navItems.filter(isSecondary).map((item, i) => (_jsx(NavigationMenuLinkItem, { className: cn(item.type === 'icon' && '-mx-1 first:ms-0 last:me-0'), item: item }, i))) })] }), _jsxs("ul", { className: "flex flex-row items-center ms-auto -me-1.5 lg:hidden", children: [searchToggle.enabled !== false &&
-                        (searchToggle.components?.sm ?? (_jsx(SearchToggle, { className: "p-2", hideIfDisabled: true }))), _jsxs(NavigationMenuItem, { children: [_jsx(MobileNavigationMenuTrigger, { "aria-label": "Toggle Menu", className: cn(buttonVariants({
-                                    size: 'icon',
-                                    color: 'ghost',
-                                    className: 'group [&_svg]:size-5.5',
-                                })), enableHover: nav.enableHoverToOpen, children: _jsx(ChevronDown, { className: "transition-transform duration-300 group-data-[state=open]:rotate-180" }) }), _jsxs(MobileNavigationMenuContent, { className: "sm:flex-row sm:items-center sm:justify-end", children: [menuItems
-                                        .filter((item) => !isSecondary(item))
-                                        .map((item, i) => (_jsx(MobileNavigationMenuLinkItem, { item: item, className: "sm:hidden" }, i))), _jsxs("div", { className: "-ms-1.5 flex flex-row items-center gap-2 max-sm:mt-2", children: [menuItems.filter(isSecondary).map((item, i) => (_jsx(MobileNavigationMenuLinkItem, { item: item, className: cn(item.type === 'icon' && '-mx-1 first:ms-0') }, i))), _jsx("div", { role: "separator", className: "flex-1" }), i18n && (_jsxs(LanguageToggle, { children: [_jsx(Languages, { className: "size-5" }), _jsx(LanguageToggleText, {}), _jsx(ChevronDown, { className: "size-3 text-fd-muted-foreground" })] })), themeSwitch.enabled !== false &&
-                                                (themeSwitch.component ?? (_jsx(ThemeToggle, { mode: themeSwitch?.mode })))] })] })] })] })] }));
-}
-function isSecondary(item) {
-    if ('secondary' in item && item.secondary != null)
-        return item.secondary;
-    return item.type === 'icon';
+    return (_jsxs("main", { id: "nd-home-layout", ...rest, className: cn('flex flex-1 flex-col [--fd-layout-width:1400px]', rest.className), children: [nav.enabled !== false &&
+                (nav.component ?? (_jsx(Header, { links: links, nav: nav, themeSwitch: themeSwitch, searchToggle: searchToggle, i18n: i18n, githubUrl: githubUrl }))), props.children] }));
 }

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

@@ -1,11 +1,23 @@
-import { type ComponentProps } from 'react';
-import type { Option } from '../../components/layout/root-toggle.js';
-export declare function Navbar({ mode, ...props }: ComponentProps<'header'> & {
-    mode: 'top' | 'auto';
+import { type ComponentProps, type HTMLAttributes, type ReactNode } from 'react';
+import { type LinkItemType } from '../shared/link-item.js';
+import type { SidebarTabWithProps } from '../../components/sidebar/tabs.js';
+export declare const LayoutContext: import("react").Context<(LayoutInfo & {
+    isNavTransparent: boolean;
+}) | null>;
+export interface LayoutInfo {
+    tabMode: 'sidebar' | 'navbar';
+    navMode: 'top' | 'auto';
+}
+export declare function LayoutContextProvider({ navTransparentMode, navMode, tabMode, children, }: LayoutInfo & {
+    navTransparentMode?: 'always' | 'top' | 'none';
+    children: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function LayoutBody(props: ComponentProps<'main'>): import("react/jsx-runtime").JSX.Element;
-export declare function NavbarSidebarTrigger({ className, ...props }: ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
-export declare function LayoutTabs({ options, ...props }: ComponentProps<'div'> & {
-    options: Option[];
+export declare function LayoutHeader(props: ComponentProps<'header'>): import("react/jsx-runtime").JSX.Element;
+export declare function LayoutBody({ className, style, children, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function LayoutHeaderTabs({ options, className, ...props }: ComponentProps<'div'> & {
+    options: SidebarTabWithProps[];
 }): import("react/jsx-runtime").JSX.Element;
+export declare function NavbarLinkItem({ item, className, ...props }: {
+    item: LinkItemType;
+} & HTMLAttributes<HTMLElement>): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
 //# sourceMappingURL=client.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../../src/layouts/notebook/client.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAW,MAAM,OAAO,CAAC;AAQrD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAE9D,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAE,IAAI,EAAE,KAAK,GAAG,MAAM,CAAA;CAAE,2CAoBrD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,2CAsBvD;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAkB1B;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IACzB,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB,2CAuBA"}
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../../src/layouts/notebook/client.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EAGnB,KAAK,cAAc,EACnB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAOf,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAMlE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAErE,eAAO,MAAM,aAAa;sBAEF,OAAO;UAGxB,CAAC;AAER,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC9B,OAAO,EAAE,KAAK,GAAG,MAAM,CAAC;CACzB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,kBAA2B,EAC3B,OAAO,EACP,OAAO,EACP,QAAQ,GACT,EAAE,UAAU,GAAG;IACd,kBAAkB,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;IAC/C,QAAQ,EAAE,SAAS,CAAC;CACrB,2CAoBA;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAS3D;AAED,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,2CAuCvB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IACzB,OAAO,EAAE,mBAAmB,EAAE,CAAC;CAChC,2CAmCA;AAED,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IAAE,IAAI,EAAE,YAAY,CAAA;CAAE,GAAG,cAAc,CAAC,WAAW,CAAC,2UAqDtD"}

package/dist/layouts/notebook/client.js

@@ -1,45 +1,71 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../../utils/cn.js';
-import { useMemo } from 'react';
-import { useSidebar } from '../../contexts/sidebar.js';
-import { useNav } from '../../contexts/layout.js';
-import { buttonVariants } from '../../components/ui/button.js';
-import { Sidebar as SidebarIcon } from '../../icons.js';
+import { createContext, Fragment, use, useMemo, } from 'react';
+import { useSidebar } from '../../components/sidebar/base.js';
+import { ChevronDown } from '../../icons.js';
 import Link from 'fumadocs-core/link';
 import { usePathname } from 'fumadocs-core/framework';
 import { isTabActive } from '../../utils/is-active.js';
-export function Navbar({ mode, ...props }) {
-    const { open, collapsed } = useSidebar();
-    const { isTransparent } = useNav();
-    return (_jsx("header", { id: "nd-subnav", ...props, className: cn('fixed flex flex-col top-(--fd-banner-height) left-0 right-(--removed-body-scroll-bar-size,0) z-10 px-(--fd-layout-offset) h-(--fd-nav-height) backdrop-blur-sm transition-colors', (!isTransparent || open) && 'bg-fd-background/80', mode === 'auto' &&
-            !collapsed &&
-            'ps-[calc(var(--fd-layout-offset)+var(--fd-sidebar-width))]', props.className), children: props.children }));
+import { useIsScrollTop } from '../../utils/use-is-scroll-top.js';
+import { LinkItem } from '../shared/link-item.js';
+import { Popover, PopoverContent, PopoverTrigger, } from '../../components/ui/popover.js';
+export const LayoutContext = createContext(null);
+export function LayoutContextProvider({ navTransparentMode = 'none', navMode, tabMode, children, }) {
+    const isTop = useIsScrollTop({ enabled: navTransparentMode === 'top' }) ?? true;
+    const isNavTransparent = navTransparentMode === 'top' ? isTop : navTransparentMode === 'always';
+    return (_jsx(LayoutContext, { value: useMemo(() => ({
+            isNavTransparent,
+            navMode,
+            tabMode,
+        }), [isNavTransparent, navMode, tabMode]), children: children }));
 }
-export function LayoutBody(props) {
-    const { collapsed } = useSidebar();
-    return (_jsx("main", { id: "nd-docs-layout", ...props, className: cn('flex flex-1 flex-col transition-[padding] pt-(--fd-nav-height) fd-notebook-layout', !collapsed && 'mx-(--fd-layout-offset)', props.className), style: {
-            ...props.style,
-            paddingInlineStart: collapsed
-                ? 'min(calc(100vw - var(--fd-page-width)), var(--fd-sidebar-width))'
-                : 'var(--fd-sidebar-width)',
-        }, children: props.children }));
+export function LayoutHeader(props) {
+    const { open } = useSidebar();
+    const { isNavTransparent } = use(LayoutContext);
+    return (_jsx("header", { "data-transparent": isNavTransparent && !open, ...props, children: props.children }));
 }
-export function NavbarSidebarTrigger({ className, ...props }) {
-    const { setOpen } = useSidebar();
-    return (_jsx("button", { ...props, className: cn(buttonVariants({
-            color: 'ghost',
-            size: 'icon-sm',
-            className,
-        })), onClick: () => setOpen((prev) => !prev), children: _jsx(SidebarIcon, {}) }));
+export function LayoutBody({ className, style, children, ...props }) {
+    const { navMode } = use(LayoutContext);
+    const { collapsed } = useSidebar();
+    const pageCol = 'calc(var(--fd-layout-width,97rem) - var(--fd-sidebar-col) - var(--fd-toc-width))';
+    return (_jsx("div", { id: "nd-notebook-layout", 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]', className), style: {
+            gridTemplate: navMode === 'top'
+                ? `". header header header ."
+        "sidebar sidebar toc-popover toc-popover ."
+        "sidebar sidebar main toc toc" 1fr / minmax(min-content, 1fr) var(--fd-sidebar-col) minmax(0, ${pageCol}) var(--fd-toc-width) minmax(min-content, 1fr)`
+                : `"sidebar sidebar header header ."
+        "sidebar sidebar toc-popover toc-popover ."
+        "sidebar sidebar main toc ." 1fr / minmax(min-content, 1fr) var(--fd-sidebar-col) minmax(0, ${pageCol}) 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)',
+            gridAutoColumns: 'auto',
+            gridAutoRows: 'auto',
+            ...style,
+        }, ...props, children: children }));
 }
-export function LayoutTabs({ options, ...props }) {
+export function LayoutHeaderTabs({ options, className, ...props }) {
     const pathname = usePathname();
-    const selected = useMemo(() => {
-        return options.findLast((option) => isTabActive(option, pathname));
+    const selectedIdx = useMemo(() => {
+        return options.findLastIndex((option) => isTabActive(option, pathname));
     }, [options, pathname]);
-    return (_jsx("div", { ...props, className: cn('flex flex-row items-end gap-6 overflow-auto', props.className), children: options.map((option) => (_jsx(LayoutTab, { selected: selected === option, option: option }, option.url))) }));
+    return (_jsx("div", { className: cn('flex flex-row items-end gap-6', className), ...props, children: options.map((option, i) => {
+            const { title, url, unlisted, props: { className, ...rest } = {}, } = option;
+            const isSelected = selectedIdx === i;
+            return (_jsx(Link, { href: url, className: cn('inline-flex border-b-2 border-transparent transition-colors items-center pb-1.5 font-medium gap-2 text-fd-muted-foreground text-sm text-nowrap hover:text-fd-accent-foreground', unlisted && !isSelected && 'hidden', isSelected && 'border-fd-primary text-fd-primary', className), ...rest, children: title }, i));
+        }) }));
 }
-function LayoutTab({ option: { title, url, unlisted, props }, selected = false, }) {
-    return (_jsx(Link, { href: url, ...props, className: cn('inline-flex border-b-2 border-transparent transition-colors items-center pb-1.5 font-medium gap-2 text-fd-muted-foreground text-sm text-nowrap hover:text-fd-accent-foreground', unlisted && !selected && 'hidden', selected && 'border-fd-primary text-fd-primary', props?.className), children: title }));
+export function NavbarLinkItem({ item, className, ...props }) {
+    if (item.type === 'custom')
+        return item.children;
+    if (item.type === 'menu') {
+        return (_jsxs(Popover, { children: [_jsxs(PopoverTrigger, { className: cn('inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground has-data-[active=true]:text-fd-primary', className), ...props, children: [item.url ? (_jsx(LinkItem, { item: item, children: item.text })) : (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(LinkItem, { 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));
+                    }) })] }));
+    }
+    return (_jsx(LinkItem, { item: item, className: cn('text-sm text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground data-[active=true]:text-fd-primary', className), ...props, children: item.text }));
 }

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

@@ -1,10 +1,10 @@
 import { type ComponentProps, type FC, type HTMLAttributes, type ReactNode } from 'react';
 import { type BaseLayoutProps } from '../../layouts/shared/index.js';
-import { type SidebarComponents, SidebarFooter, SidebarHeader, type SidebarProps } from '../../components/layout/sidebar.js';
+import { Sidebar } from './sidebar.js';
 import type * as PageTree from 'fumadocs-core/page-tree';
-import { Navbar, NavbarSidebarTrigger } from '../../layouts/notebook/client.js';
-import { type Option } from '../../components/layout/root-toggle.js';
 import { type GetSidebarTabsOptions } from '../../utils/get-sidebar-tabs.js';
+import type { SidebarPageTreeComponents } from '../../components/sidebar/page-tree.js';
+import { type SidebarTabWithProps } from '../../components/sidebar/tabs.js';
 export interface DocsLayoutProps extends BaseLayoutProps {
     tree: PageTree.Root;
     tabMode?: 'sidebar' | 'navbar';
@@ -14,14 +14,14 @@ export interface DocsLayoutProps extends BaseLayoutProps {
     sidebar?: SidebarOptions;
     containerProps?: HTMLAttributes<HTMLDivElement>;
 }
-interface SidebarOptions extends ComponentProps<'aside'>, Pick<SidebarProps, 'defaultOpenLevel' | 'prefetch'> {
-    components?: Partial<SidebarComponents>;
+interface SidebarOptions extends ComponentProps<'aside'>, Pick<ComponentProps<typeof Sidebar>, 'defaultOpenLevel' | 'prefetch'> {
+    components?: Partial<SidebarPageTreeComponents>;
     /**
      * Root Toggle options
      */
-    tabs?: Option[] | GetSidebarTabsOptions | false;
-    banner?: ReactNode | FC<ComponentProps<typeof SidebarHeader>>;
-    footer?: ReactNode | FC<ComponentProps<typeof SidebarFooter>>;
+    tabs?: SidebarTabWithProps[] | GetSidebarTabsOptions | false;
+    banner?: ReactNode | FC<ComponentProps<'div'>>;
+    footer?: ReactNode | FC<ComponentProps<'div'>>;
     /**
      * Support collapsing the sidebar on desktop mode
      *
@@ -30,5 +30,5 @@ interface SidebarOptions extends ComponentProps<'aside'>, Pick<SidebarProps, 'de
     collapsible?: boolean;
 }
 export declare function DocsLayout(props: DocsLayoutProps): import("react/jsx-runtime").JSX.Element;
-export { Navbar, NavbarSidebarTrigger };
+export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layouts/notebook/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,EAAE,EAEP,KAAK,cAAc,EACnB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AACf,OAAO,EACL,KAAK,eAAe,EAKrB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAGL,KAAK,iBAAiB,EAOtB,aAAa,EACb,aAAa,EAGb,KAAK,YAAY,EAGlB,MAAM,6BAA6B,CAAC;AAiBrC,OAAO,KAAK,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAGL,MAAM,EACN,oBAAoB,EACrB,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EAAE,KAAK,MAAM,EAAc,MAAM,iCAAiC,CAAC;AAM1E,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,0BAA0B,CAAC;AAElC,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAE/B,GAAG,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,GAAG;QAC7B,IAAI,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;KACvB,CAAC;IAEF,OAAO,CAAC,EAAE,cAAc,CAAC;IAEzB,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,UAAU,cACR,SAAQ,cAAc,CAAC,OAAO,CAAC,EAC7B,IAAI,CAAC,YAAY,EAAE,kBAAkB,GAAG,UAAU,CAAC;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAExC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,qBAAqB,GAAG,KAAK,CAAC;IAEhD,MAAM,CAAC,EAAE,SAAS,GAAG,EAAE,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC;IAC9D,MAAM,CAAC,EAAE,SAAS,GAAG,EAAE,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC;IAE9D;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAyOhD;AA8PD,OAAO,EAAE,MAAM,EAAE,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layouts/notebook/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,EAAE,EACP,KAAK,cAAc,EACnB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,KAAK,eAAe,EAAoB,MAAM,kBAAkB,CAAC;AAC1E,OAAO,EACL,OAAO,EAQR,MAAM,WAAW,CAAC;AAOnB,OAAO,KAAK,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AAazD,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,0BAA0B,CAAC;AAElC,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAChF,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAE/B,GAAG,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,GAAG;QAC7B,IAAI,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;KACvB,CAAC;IAEF,OAAO,CAAC,EAAE,cAAc,CAAC;IAEzB,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,UAAU,cACR,SAAQ,cAAc,CAAC,OAAO,CAAC,EAC7B,IAAI,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,EAAE,kBAAkB,GAAG,UAAU,CAAC;IACvE,UAAU,CAAC,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAC;IAEhD;;OAEG;IACH,IAAI,CAAC,EAAE,mBAAmB,EAAE,GAAG,qBAAqB,GAAG,KAAK,CAAC;IAE7D,MAAM,CAAC,EAAE,SAAS,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;IAC/C,MAAM,CAAC,EAAE,SAAS,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;IAE/C;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAsNhD"}

package/dist/layouts/notebook/index.js

@@ -1,79 +1,72 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { Fragment, useMemo, } from 'react';
-import { BaseLinkItem, getLinks, } from '../../layouts/shared/index.js';
-import { Sidebar, SidebarCollapseTrigger, SidebarContent, SidebarContentMobile, SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarFooter, SidebarHeader, SidebarItem, SidebarPageTree, SidebarTrigger, SidebarViewport, } from '../../components/layout/sidebar.js';
+import { useMemo, } from 'react';
+import { resolveLinkItems } from '../../layouts/shared/index.js';
+import { Sidebar, SidebarCollapseTrigger, SidebarContent, SidebarDrawer, SidebarLinkItem, SidebarPageTree, SidebarTrigger, SidebarViewport, } from './sidebar.js';
 import { TreeContextProvider } from '../../contexts/tree.js';
 import { cn } from '../../utils/cn.js';
 import { buttonVariants } from '../../components/ui/button.js';
-import { ChevronDown, Languages, Sidebar as SidebarIcon, X, } from '../../icons.js';
-import { LanguageToggle } from '../../components/layout/language-toggle.js';
-import { ThemeToggle } from '../../components/layout/theme-toggle.js';
-import { Popover, PopoverContent, PopoverTrigger, } from '../../components/ui/popover.js';
-import { LayoutBody, LayoutTabs, Navbar, NavbarSidebarTrigger, } from '../../layouts/notebook/client.js';
-import { NavProvider } from '../../contexts/layout.js';
-import { RootToggle } from '../../components/layout/root-toggle.js';
+import { Languages, Sidebar as SidebarIcon, X } from '../../icons.js';
+import { LanguageToggle } from '../../layouts/shared/language-toggle.js';
+import { ThemeToggle } from '../../layouts/shared/theme-toggle.js';
+import { LayoutBody, LayoutContextProvider, LayoutHeaderTabs, LayoutHeader, NavbarLinkItem, } from '../../layouts/notebook/client.js';
 import Link from 'fumadocs-core/link';
-import { LargeSearchToggle, SearchToggle, } from '../../components/layout/search-toggle.js';
+import { LargeSearchToggle, SearchToggle, } from '../../layouts/shared/search-toggle.js';
 import { getSidebarTabs, } from '../../utils/get-sidebar-tabs.js';
+import { LinkItem } from '../../layouts/shared/link-item.js';
+import { SidebarTabTrigger, } from '../../components/sidebar/tabs.js';
 export function DocsLayout(props) {
-    const { tabMode = 'sidebar', nav: { transparentMode, ...nav } = {}, sidebar: { tabs: tabOptions, ...sidebarProps } = {}, i18n = false, themeSwitch = {}, } = props;
+    const { tabMode = 'sidebar', nav = {}, sidebar: { tabs: tabOptions, defaultOpenLevel, prefetch, ...sidebarProps } = {}, i18n = false, themeSwitch = {}, tree, } = props;
     const navMode = nav.mode ?? 'auto';
-    const links = getLinks(props.links ?? [], props.githubUrl);
+    const links = resolveLinkItems(props);
     const tabs = useMemo(() => {
         if (Array.isArray(tabOptions)) {
             return tabOptions;
         }
         if (typeof tabOptions === 'object') {
-            return getSidebarTabs(props.tree, tabOptions);
+            return getSidebarTabs(tree, tabOptions);
         }
         if (tabOptions !== false) {
-            return getSidebarTabs(props.tree);
+            return getSidebarTabs(tree);
         }
         return [];
-    }, [tabOptions, props.tree]);
+    }, [tabOptions, tree]);
     function sidebar() {
-        const { banner, footer, components, collapsible = true, prefetch, defaultOpenLevel, ...rest } = sidebarProps;
+        const { banner, footer, components, collapsible = true, ...rest } = sidebarProps;
         const Header = typeof banner === 'function'
             ? banner
-            : (props) => (_jsxs(SidebarHeader, { ...props, children: [props.children, banner] }));
+            : ({ className, ...props }) => (_jsxs("div", { className: cn('flex flex-col gap-3 p-4 pb-2', className), ...props, children: [props.children, banner] }));
         const Footer = typeof footer === 'function'
             ? footer
-            : (props) => (_jsxs(SidebarFooter, { ...props, children: [props.children, footer] }));
+            : ({ className, ...props }) => (_jsxs("div", { className: cn('flex flex-col border-t p-4 pt-2', className), ...props, children: [props.children, footer] }));
         const iconLinks = links.filter((item) => item.type === 'icon');
-        const rootToggle = (_jsxs(_Fragment, { children: [tabMode === 'sidebar' && tabs.length > 0 && (_jsx(RootToggle, { className: "mb-2", options: tabs })), tabMode === 'navbar' && tabs.length > 0 && (_jsx(RootToggle, { options: tabs, className: "lg:hidden" }))] }));
         const viewport = (_jsxs(SidebarViewport, { children: [links
                     .filter((item) => item.type !== 'icon')
-                    .map((item, i, arr) => (_jsx(SidebarLinkItem, { item: item, className: cn('lg:hidden', i === arr.length - 1 && 'mb-4') }, i))), _jsx(SidebarPageTree, { components: components })] }));
-        const content = (_jsxs(SidebarContent, { ...rest, className: cn(navMode === 'top'
-                ? 'border-e-0 bg-transparent'
-                : '[--fd-nav-height:0px]', rest.className), children: [_jsxs(Header, { className: "empty:hidden", children: [navMode === 'auto' && (_jsxs("div", { className: "flex justify-between", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex items-center gap-2.5 font-medium", children: nav.title }), collapsible && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
+                    .map((item, i, arr) => (_jsx(SidebarLinkItem, { item: item, className: cn('lg:hidden', i === arr.length - 1 && 'mb-4') }, i))), _jsx(SidebarPageTree, { ...components })] }));
+        return (_jsxs(_Fragment, { children: [_jsxs(SidebarContent, { ...rest, children: [_jsxs(Header, { className: "empty:hidden", children: [navMode === 'auto' && (_jsxs("div", { className: "flex justify-between", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex items-center gap-2.5 font-medium", children: nav.title }), collapsible && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
+                                                color: 'ghost',
+                                                size: 'icon-sm',
+                                                className: 'mt-px mb-auto text-fd-muted-foreground',
+                                            })), children: _jsx(SidebarIcon, {}) }))] })), nav.children, tabs.length > 0 && (_jsx(SidebarTabTrigger, { options: tabs, className: cn(tabMode === 'navbar' && 'lg:hidden') }))] }), viewport, _jsx(Footer, { className: cn('hidden flex-row text-fd-muted-foreground items-center', iconLinks.length > 0 && 'max-lg:flex'), children: iconLinks.map((item, i) => (_jsx(LinkItem, { item: item, className: cn(buttonVariants({
+                                    size: 'icon-sm',
+                                    color: 'ghost',
+                                    className: 'lg:hidden',
+                                })), "aria-label": item.label, children: item.icon }, i))) })] }), _jsxs(SidebarDrawer, { ...rest, children: [_jsxs(Header, { children: [_jsx(SidebarTrigger, { className: cn(buttonVariants({
+                                        size: 'icon-sm',
                                         color: 'ghost',
+                                        className: 'ms-auto text-fd-muted-foreground',
+                                    })), children: _jsx(X, {}) }), tabs.length > 0 && _jsx(SidebarTabTrigger, { options: tabs })] }), viewport, _jsxs(Footer, { className: cn('hidden flex-row items-center justify-end', (i18n || themeSwitch.enabled !== false) && 'flex', iconLinks.length > 0 && 'max-lg:flex'), children: [iconLinks.map((item, i) => (_jsx(LinkItem, { item: item, className: cn(buttonVariants({
                                         size: 'icon-sm',
-                                        className: 'mt-px mb-auto text-fd-muted-foreground',
-                                    })), children: _jsx(SidebarIcon, {}) }))] })), nav.children, rootToggle] }), viewport, _jsx(Footer, { className: cn('hidden flex-row text-fd-muted-foreground items-center', iconLinks.length > 0 && 'max-lg:flex'), children: iconLinks.map((item, i) => (_jsx(BaseLinkItem, { item: item, className: cn(buttonVariants({
-                            size: 'icon-sm',
-                            color: 'ghost',
-                            className: 'lg:hidden',
-                        })), "aria-label": item.label, children: item.icon }, i))) })] }));
-        const mobile = (_jsxs(SidebarContentMobile, { ...rest, children: [_jsxs(Header, { children: [_jsx(SidebarTrigger, { className: cn(buttonVariants({
-                                size: 'icon-sm',
-                                color: 'ghost',
-                                className: 'ms-auto text-fd-muted-foreground',
-                            })), children: _jsx(X, {}) }), rootToggle] }), viewport, _jsxs(Footer, { className: cn('hidden flex-row items-center justify-end', (i18n || themeSwitch.enabled !== false) && 'flex', iconLinks.length > 0 && 'max-lg:flex'), children: [iconLinks.map((item, i) => (_jsx(BaseLinkItem, { item: item, className: cn(buttonVariants({
-                                size: 'icon-sm',
-                                color: 'ghost',
-                            }), 'text-fd-muted-foreground lg:hidden', i === iconLinks.length - 1 && 'me-auto'), "aria-label": item.label, children: item.icon }, i))), i18n && (_jsx(LanguageToggle, { children: _jsx(Languages, { className: "size-4.5 text-fd-muted-foreground" }) })), themeSwitch.enabled !== false &&
-                            (themeSwitch.component ?? (_jsx(ThemeToggle, { mode: themeSwitch.mode ?? 'light-dark-system' })))] })] }));
-        return (_jsx(Sidebar, { defaultOpenLevel: defaultOpenLevel, prefetch: prefetch, Content: content, Mobile: mobile }));
+                                        color: 'ghost',
+                                    }), 'text-fd-muted-foreground lg:hidden', i === iconLinks.length - 1 && 'me-auto'), "aria-label": item.label, children: item.icon }, i))), i18n && (_jsx(LanguageToggle, { children: _jsx(Languages, { className: "size-4.5 text-fd-muted-foreground" }) })), themeSwitch.enabled !== false &&
+                                    (themeSwitch.component ?? (_jsx(ThemeToggle, { mode: themeSwitch.mode ?? 'light-dark-system' })))] })] })] }));
     }
-    return (_jsx(TreeContextProvider, { tree: props.tree, children: _jsx(NavProvider, { transparentMode: transparentMode, children: _jsxs(LayoutBody, { ...props.containerProps, className: cn('md:[--fd-sidebar-width:286px]', props.containerProps?.className), children: [sidebar(), _jsx(DocsNavbar, { ...props, links: links, tabs: tabMode == 'navbar' ? tabs : [] }), props.children] }) }) }));
+    return (_jsx(TreeContextProvider, { tree: tree, children: _jsx(LayoutContextProvider, { navMode: nav.mode ?? 'auto', tabMode: tabMode, navTransparentMode: nav.transparentMode, children: _jsx(Sidebar, { defaultOpenLevel: defaultOpenLevel, prefetch: prefetch, children: _jsxs(LayoutBody, { ...props.containerProps, children: [sidebar(), _jsx(DocsNavbar, { ...props, links: links, tabs: tabs }), props.children] }) }) }) }));
 }
-function DocsNavbar({ links, tabs, sidebar: { collapsible: sidebarCollapsible = true } = {}, searchToggle = {}, themeSwitch = {}, nav = {}, i18n, }) {
+function DocsNavbar({ links, tabs, tabMode = 'sidebar', sidebar: { collapsible: sidebarCollapsible = true } = {}, searchToggle = {}, themeSwitch = {}, nav = {}, i18n, }) {
     const navMode = nav.mode ?? 'auto';
-    return (_jsxs(Navbar, { mode: navMode, className: cn('on-root:[--fd-nav-height:56px] md:on-root:[--fd-nav-height:64px]', tabs.length > 0 && 'lg:on-root:[--fd-nav-height:104px]'), children: [_jsxs("div", { className: cn('flex border-b px-4 gap-2 flex-1 md:px-6', navMode === 'top' && 'ps-7'), children: [_jsxs("div", { className: cn('items-center', navMode === 'top' && 'flex flex-1', navMode === 'auto' && [
-                            'hidden max-md:flex',
-                            sidebarCollapsible && 'has-data-[collapsed=true]:md:flex',
-                        ]), children: [sidebarCollapsible && navMode === 'auto' && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
+    const showLayoutTabs = tabMode === 'navbar' && tabs.length > 0;
+    return (_jsxs(LayoutHeader, { id: "nd-subnav", className: cn('sticky [grid-area:header] flex flex-col top-(--fd-docs-row-1) z-10 backdrop-blur-sm transition-colors data-[transparent=false]:bg-fd-background/80 layout:[--fd-header-height:--spacing(14)]', showLayoutTabs && 'lg:layout:[--fd-header-height:--spacing(24)]'), children: [_jsxs("div", { "data-header-body": "", className: "flex border-b px-4 gap-2 h-14 md:px-6", children: [_jsxs("div", { className: cn('items-center', navMode === 'top' && 'flex flex-1', navMode === 'auto' &&
+                            'hidden has-data-[collapsed=true]:md:flex max-md:flex'), children: [sidebarCollapsible && navMode === 'auto' && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
                                     color: 'ghost',
                                     size: 'icon-sm',
                                 }), 'text-fd-muted-foreground data-[collapsed=false]:hidden max-md:hidden'), children: _jsx(SidebarIcon, {}) })), _jsx(Link, { href: nav.url ?? '/', className: cn('inline-flex items-center gap-2.5 font-semibold', navMode === 'auto' && 'md:hidden'), children: nav.title })] }), searchToggle.enabled !== false &&
@@ -81,32 +74,16 @@ function DocsNavbar({ links, tabs, sidebar: { collapsible: sidebarCollapsible =
                                 ? 'rounded-xl max-w-sm ps-2.5'
                                 : 'max-w-[240px]') }))), _jsxs("div", { className: "flex flex-1 items-center justify-end md:gap-2", children: [_jsx("div", { className: "flex items-center gap-6 empty:hidden max-lg:hidden", 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 data-[active=true]:text-fd-primary" }, i))) }), nav.children, links
+                                    .map((item, i) => (_jsx(NavbarLinkItem, { item: item }, i))) }), nav.children, links
                                 .filter((item) => item.type === 'icon')
-                                .map((item, i) => (_jsx(BaseLinkItem, { item: item, className: cn(buttonVariants({ size: 'icon-sm', color: 'ghost' }), 'text-fd-muted-foreground max-lg:hidden'), "aria-label": item.label, children: item.icon }, i))), _jsxs("div", { className: "flex items-center md:hidden", children: [searchToggle.enabled !== false &&
-                                        (searchToggle.components?.sm ?? (_jsx(SearchToggle, { hideIfDisabled: true, className: "p-2" }))), _jsx(NavbarSidebarTrigger, { className: "p-2 -me-1.5" })] }), _jsxs("div", { className: "flex items-center gap-2 max-md:hidden", children: [i18n && (_jsx(LanguageToggle, { children: _jsx(Languages, { className: "size-4.5 text-fd-muted-foreground" }) })), themeSwitch.enabled !== false &&
+                                .map((item, i) => (_jsx(LinkItem, { item: item, className: cn(buttonVariants({ size: 'icon-sm', color: 'ghost' }), 'text-fd-muted-foreground max-lg:hidden'), "aria-label": item.label, children: item.icon }, i))), _jsxs("div", { className: "flex items-center md:hidden", children: [searchToggle.enabled !== false &&
+                                        (searchToggle.components?.sm ?? (_jsx(SearchToggle, { hideIfDisabled: true, className: "p-2" }))), _jsx(SidebarTrigger, { className: cn(buttonVariants({
+                                            color: 'ghost',
+                                            size: 'icon-sm',
+                                            className: 'p-2 -me-1.5',
+                                        })), children: _jsx(SidebarIcon, {}) })] }), _jsxs("div", { className: "flex items-center gap-2 max-md:hidden", children: [i18n && (_jsx(LanguageToggle, { children: _jsx(Languages, { className: "size-4.5 text-fd-muted-foreground" }) })), themeSwitch.enabled !== false &&
                                         (themeSwitch.component ?? (_jsx(ThemeToggle, { mode: themeSwitch.mode ?? 'light-dark-system' }))), sidebarCollapsible && navMode === 'top' && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
                                             color: 'secondary',
                                             size: 'icon-sm',
-                                        }), 'text-fd-muted-foreground rounded-full -me-1.5'), children: _jsx(SidebarIcon, {}) }))] })] })] }), tabs.length > 0 && (_jsx(LayoutTabs, { className: cn('border-b px-6 h-10 max-lg:hidden', navMode === 'top' && 'ps-7'), options: tabs }))] }));
-}
-function NavbarLinkItem({ item, ...props }) {
-    if (item.type === 'menu') {
-        return (_jsxs(Popover, { children: [_jsxs(PopoverTrigger, { ...props, className: cn('inline-flex items-center gap-1.5 has-data-[active=true]:text-fd-primary', props.className), children: [item.url ? (_jsx(BaseLinkItem, { item: item, children: item.text })) : (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 SidebarLinkItem({ item, ...props }) {
-    if (item.type === 'menu')
-        return (_jsxs(SidebarFolder, { ...props, children: [item.url ? (_jsxs(SidebarFolderLink, { href: item.url, external: item.external, children: [item.icon, item.text] })) : (_jsxs(SidebarFolderTrigger, { children: [item.icon, item.text] })), _jsx(SidebarFolderContent, { children: item.items.map((child, i) => (_jsx(SidebarLinkItem, { item: child }, i))) })] }));
-    if (item.type === 'custom')
-        return _jsx("div", { ...props, children: item.children });
-    return (_jsx(SidebarItem, { href: item.url, icon: item.icon, external: item.external, ...props, children: item.text }));
+                                        }), 'text-fd-muted-foreground rounded-full -me-1.5'), children: _jsx(SidebarIcon, {}) }))] })] })] }), showLayoutTabs && (_jsx(LayoutHeaderTabs, { "data-header-tabs": "", className: "overflow-x-auto border-b px-6 h-10 max-lg:hidden", options: tabs }))] }));
 }
-export { Navbar, NavbarSidebarTrigger };

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

@@ -0,0 +1,24 @@
+import { type ComponentProps } from 'react';
+import type * as PageTree from 'fumadocs-core/page-tree';
+import { type BreadcrumbOptions } from 'fumadocs-core/breadcrumb';
+export declare function PageTOCPopover({ className, children, ...rest }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function PageTOCPopoverTrigger({ className, ...props }: ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
+export declare function PageTOCPopoverContent(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function PageLastUpdate({ date: value, ...props }: Omit<ComponentProps<'p'>, 'children'> & {
+    date: Date;
+}): import("react/jsx-runtime").JSX.Element;
+type Item = Pick<PageTree.Item, 'name' | 'description' | 'url'>;
+export interface FooterProps extends ComponentProps<'div'> {
+    /**
+     * Items including information for the next and previous page
+     */
+    items?: {
+        previous?: Item;
+        next?: Item;
+    };
+}
+export declare function PageFooter({ items, ...props }: FooterProps): import("react/jsx-runtime").JSX.Element;
+export type BreadcrumbProps = BreadcrumbOptions & ComponentProps<'div'>;
+export declare function PageBreadcrumb({ includeRoot, includeSeparator, includePage, ...props }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=client.d.ts.map