fumadocs-ui 15.0.6 → 15.0.8

package/dist/layouts/docs/sidebar.js

@@ -11,7 +11,6 @@ import { ScrollArea, ScrollViewport } from '../../components/ui/scroll-area.js';
 import { isActive } from '../../utils/is-active.js';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '../../components/ui/collapsible.js';
 import { useSidebar } from '../../contexts/sidebar.js';
-import { buttonVariants } from '../../components/ui/button.js';
 import { cva } from 'class-variance-authority';
 import { useTreeContext, useTreePath } from '../../contexts/tree.js';
 const itemVariants = cva('relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0', {
@@ -51,7 +50,7 @@ export function CollapsibleSidebar(props) {
             : 500);
     }, []);
     return (_jsx(Sidebar, { ...props, onPointerEnter: collapsed ? onEnter : undefined, onPointerLeave: collapsed ? onLeave : undefined, "data-collapsed": collapsed, className: cn('md:transition-all', collapsed &&
-            'md:-me-[var(--fd-sidebar-width)] md:translate-x-[calc(var(--fd-sidebar-offset)*-1)] rtl:md:translate-x-[var(--fd-sidebar-offset)]', collapsed && hover && 'z-50 md:translate-x-0', collapsed && !hover && 'md:opacity-0', props.className), style: {
+            'md:-me-(--fd-sidebar-width) md:translate-x-[calc(var(--fd-sidebar-offset)*-1)] rtl:md:translate-x-(--fd-sidebar-offset)', collapsed && hover && 'z-50 md:translate-x-0', collapsed && !hover && 'md:opacity-0', props.className), style: {
             '--fd-sidebar-offset': 'calc(var(--fd-sidebar-width) - 20px)',
         } }));
 }
@@ -63,25 +62,25 @@ export function Sidebar({ defaultOpenLevel = 0, prefetch = true, inner, ...props
             level: 1,
         };
     }, [defaultOpenLevel, prefetch]);
-    return (_jsx(Context.Provider, { value: context, children: _jsx(Base.SidebarList, { id: "nd-sidebar", blockScrollingWidth: 768, ...props, className: cn('fixed top-[calc(var(--fd-banner-height)+var(--fd-nav-height))] z-30 bg-fd-card text-sm md:sticky md:h-[var(--fd-sidebar-height)]', 'max-md:inset-x-0 max-md:bottom-0 max-md:bg-fd-background/80 max-md:text-[15px] max-md:backdrop-blur-lg max-md:data-[open=false]:invisible', props.className), style: {
+    return (_jsx(Context.Provider, { value: context, children: _jsx(Base.SidebarList, { id: "nd-sidebar", blockScrollingWidth: 768, ...props, className: cn('fixed top-[calc(var(--fd-banner-height)+var(--fd-nav-height))] z-30 bg-fd-card text-sm md:sticky md:h-(--fd-sidebar-height)', 'max-md:inset-x-0 max-md:bottom-0 max-md:bg-fd-background/80 max-md:text-[15px] max-md:backdrop-blur-lg max-md:data-[open=false]:invisible', props.className), style: {
                 ...props.style,
                 '--fd-sidebar-height': 'calc(100dvh - var(--fd-banner-height) - var(--fd-nav-height))',
-            }, children: _jsx("div", { ...inner, className: cn('flex size-full max-w-full flex-col pt-2 md:ms-auto md:w-[var(--fd-sidebar-width)] md:border-e md:pt-4', inner?.className), children: props.children }) }) }));
+            }, children: _jsx("div", { ...inner, className: cn('flex size-full max-w-full flex-col pt-2 md:ms-auto md:w-(--fd-sidebar-width) md:border-e md:pt-4', inner?.className), children: props.children }) }) }));
 }
 export function SidebarHeader(props) {
-    return (_jsx("div", { ...props, className: cn('flex flex-col gap-2 ps-4 pe-3 empty:hidden', props.className), children: props.children }));
+    return (_jsx("div", { ...props, className: cn('flex flex-col gap-2 px-4 empty:hidden md:ps-5', props.className), children: props.children }));
 }
 export function SidebarFooter(props) {
-    return (_jsx("div", { ...props, className: cn('flex flex-col border-t ps-4 pe-3 py-3 empty:hidden', props.className), children: props.children }));
+    return (_jsx("div", { ...props, className: cn('flex flex-col border-t px-4 py-3 empty:hidden md:ps-5', props.className), children: props.children }));
 }
 export function SidebarViewport(props) {
-    return (_jsx(ScrollArea, { ...props, className: cn('h-full', props.className), children: _jsx(ScrollViewport, { className: "p-4 pe-3", style: {
+    return (_jsx(ScrollArea, { ...props, className: cn('h-full', props.className), children: _jsx(ScrollViewport, { className: "p-4 md:ps-5", style: {
                 maskImage: 'linear-gradient(to bottom, transparent, white 12px)',
             }, children: props.children }) }));
 }
 export function SidebarSeparator(props) {
     const { level } = useInternalContext();
-    return (_jsx("p", { ...props, className: cn('mb-2 px-2 text-sm font-medium', props.className), style: {
+    return (_jsx("p", { ...props, className: cn('inline-flex items-center gap-2 mb-2 px-2 text-sm font-medium [&_svg]:size-4 [&_svg]:shrink-0', props.className), style: {
             paddingInlineStart: getOffset(level),
             ...props.style,
         }, children: props.children }));
@@ -138,10 +137,7 @@ export function SidebarFolderContent(props) {
 }
 export function SidebarCollapseTrigger(props) {
     const { collapsed, setCollapsed } = useSidebar();
-    return (_jsx("button", { type: "button", "aria-label": "Collapse Sidebar", "data-collapsed": collapsed, ...props, className: cn(buttonVariants({
-            color: 'ghost',
-            size: 'icon',
-        }), props.className), onClick: () => {
+    return (_jsx("button", { type: "button", "aria-label": "Collapse Sidebar", "data-collapsed": collapsed, ...props, onClick: () => {
             setCollapsed((prev) => !prev);
         }, children: props.children ?? _jsx(SidebarIcon, {}) }));
 }
@@ -170,7 +166,7 @@ export function SidebarPageTree(props) {
                 if (item.type === 'separator') {
                     if (Separator)
                         return _jsx(Separator, { item: item }, id);
-                    return (_jsx(SidebarSeparator, { className: cn(i !== 0 && 'mt-8'), children: item.name }, id));
+                    return (_jsxs(SidebarSeparator, { className: cn(i !== 0 && 'mt-8'), children: [item.icon, item.name] }, id));
                 }
                 if (item.type === 'folder') {
                     const children = renderSidebarList(item.children, level + 1);

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

@@ -1,10 +1,4 @@
 import { type ButtonHTMLAttributes, type HTMLAttributes } from 'react';
-import { type LinkItemType } from '../layouts/links.js';
-interface LinksMenuProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    items: LinkItemType[];
-}
-export declare function LinksMenu({ items, ...props }: LinksMenuProps): import("react/jsx-runtime").JSX.Element;
 export declare function Navbar(props: HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
 export declare function NavbarSidebarTrigger(props: ButtonHTMLAttributes<HTMLButtonElement>): 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,EAEpB,MAAM,OAAO,CAAC;AASf,OAAO,EAAgB,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAgBlE,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,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,2CAiBxD;AAED,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,2CAkB/C"}
+{"version":3,"file":"docs.client.d.ts","sourceRoot":"","sources":["../../src/layouts/docs.client.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,oBAAoB,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAOvE,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,2CAiBxD;AAED,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,2CAkB/C"}

package/dist/layouts/docs.client.js

@@ -1,31 +1,15 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronDown, Menu, X } from 'lucide-react';
-import { useState, } from 'react';
-import { usePathname } from 'next/navigation';
-import { useOnChange } from 'fumadocs-core/utils/use-on-change';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Menu, X } from 'lucide-react';
 import { cn } from '../utils/cn.js';
-import { Popover, PopoverContent, PopoverTrigger, } from '../components/ui/popover.js';
-import { BaseLinkItem } from '../layouts/links.js';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '../components/ui/collapsible.js';
-import { cva } from 'class-variance-authority';
 import { buttonVariants } from '../components/ui/button.js';
 import { useSidebar } from '../contexts/sidebar.js';
 import { useNav } from '../components/layout/nav.js';
 import { SidebarTrigger } from 'fumadocs-core/sidebar';
-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 }) {
-    const [open, setOpen] = useState(false);
-    const pathname = usePathname();
-    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))) })] }));
-}
 export function Navbar(props) {
     const { open } = useSidebar();
     const { isTransparent } = useNav();
-    return (_jsx("header", { id: "nd-subnav", ...props, className: cn('sticky top-[var(--fd-banner-height)] z-30 flex h-14 flex-row items-center border-b border-fd-foreground/10 px-4 backdrop-blur-lg transition-colors', (!isTransparent || open) && 'bg-fd-background/80', props.className), children: props.children }));
+    return (_jsx("header", { id: "nd-subnav", ...props, className: cn('sticky top-(--fd-banner-height) z-30 flex h-14 flex-row items-center border-b border-fd-foreground/10 px-4 backdrop-blur-lg transition-colors', (!isTransparent || open) && 'bg-fd-background/80', props.className), children: props.children }));
 }
 export function NavbarSidebarTrigger(props) {
     const { open } = useSidebar();
@@ -34,16 +18,3 @@ export function NavbarSidebarTrigger(props) {
             size: 'icon',
         }), props.className), children: open ? _jsx(X, {}) : _jsx(Menu, {}) }));
 }
-function MenuItem({ item, ...props }) {
-    if (item.type === 'custom')
-        return (_jsx("div", { ...props, className: cn('grid', props.className), children: item.children }));
-    if (item.type === 'menu') {
-        return (_jsxs(Collapsible, { className: "flex flex-col", children: [_jsxs(CollapsibleTrigger, { ...props, className: cn(itemVariants(), 'group', props.className), children: [item.icon, item.text, _jsx(ChevronDown, { className: "ms-auto transition-transform group-data-[state=closed]:-rotate-90" })] }), _jsx(CollapsibleContent, { children: _jsx("div", { className: "flex flex-col py-2 ps-2", children: item.items.map((child, i) => (_jsx(MenuItem, { item: child }, i))) }) })] }));
-    }
-    return (_jsxs(BaseLinkItem, { item: item, ...props, className: cn(item.type === 'button'
-            ? buttonVariants({
-                color: 'secondary',
-                className: 'gap-1.5 [&_svg]:size-4',
-            })
-            : itemVariants(), props.className), children: [item.icon, item.text] }));
-}

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,EAAE,MAAM,OAAO,CAAC;AAe5D,OAAO,EACL,KAAK,YAAY,EAGlB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,UAAU,CAAC;AAa1D,OAAO,EAKL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAG/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,UAAU,EAAE,iBAAiB,EAC7B,GAAG,OAAO,EACN,EACN,IAAY,EACZ,GAAG,KAAK,EACT,EAAE,eAAe,GAAG,SAAS,CA0G7B;AA0FD,OAAO,EAAE,yBAAyB,EAAE,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,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;AAe5D,OAAO,EAAE,KAAK,YAAY,EAAgB,MAAM,iBAAiB,CAAC;AAElE,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,UAAU,CAAC;AAa1D,OAAO,EAKL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAG/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,UAAU,EAAE,iBAAiB,EAC7B,GAAG,OAAO,EACN,EACN,IAAY,EACZ,GAAG,KAAK,EACT,EAAE,eAAe,GAAG,SAAS,CA+G7B;AA6ED,OAAO,EAAE,yBAAyB,EAAE,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAE,KAAK,YAAY,EAAE,CAAC"}

package/dist/layouts/docs.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from 'next/link';
-import { Languages, MoreHorizontal } from 'lucide-react';
+import { ChevronRight, Languages } from 'lucide-react';
 import { cn } from '../utils/cn.js';
 import { buttonVariants } from '../components/ui/button.js';
 import { CollapsibleSidebar, Sidebar, SidebarFooter, SidebarHeader, SidebarCollapseTrigger, SidebarViewport, SidebarPageTree, } from '../layouts/docs/sidebar.js';
 import { replaceOrDefault } from '../layouts/shared.js';
-import { BaseLinkItem, } from '../layouts/links.js';
+import { BaseLinkItem } from '../layouts/links.js';
 import { RootToggle } from '../components/layout/root-toggle.js';
 import { getLinks } from './shared.js';
 import { LanguageToggle, LanguageToggleText, } from '../components/layout/language-toggle.js';
-import { LinksMenu, Navbar, NavbarSidebarTrigger } from '../layouts/docs.client.js';
+import { Navbar, NavbarSidebarTrigger } from '../layouts/docs.client.js';
 import { TreeContextProvider } from '../contexts/tree.js';
 import { NavProvider, Title } from '../components/layout/nav.js';
 import { ThemeToggle } from '../components/layout/theme-toggle.js';
@@ -21,41 +21,40 @@ export function DocsLayout({ nav: { enabled: navEnabled = true, component: navRe
     const links = getLinks(props.links ?? [], props.githubUrl);
     const Aside = collapsible ? CollapsibleSidebar : Sidebar;
     const tabs = getSidebarTabsFromOptions(tabOptions, props.tree) ?? [];
-    const variables = cn('[--fd-tocnav-height:36px] md:[--fd-sidebar-width:268px] xl:md:[--fd-sidebar-width:286px] xl:[--fd-toc-width:286px] xl:[--fd-tocnav-height:0px]', !navReplace && navEnabled
-        ? '[--fd-nav-height:3.5rem] md:[--fd-nav-height:0px]'
+    const variables = cn('[--fd-tocnav-height:36px] md:[--fd-sidebar-width:268px] lg:[--fd-sidebar-width:286px] xl:[--fd-toc-width:286px] xl:[--fd-tocnav-height:0px]', !navReplace && navEnabled
+        ? '[--fd-nav-height:calc(var(--spacing)*14)] md:[--fd-nav-height:0px]'
         : undefined);
     const pageStyles = {
         tocNav: cn('xl:hidden'),
         toc: cn('max-xl:hidden'),
     };
-    return (_jsx(TreeContextProvider, { tree: props.tree, children: _jsxs(NavProvider, { transparentMode: transparentMode, children: [replaceOrDefault({ enabled: navEnabled, component: navReplace }, _jsxs(Navbar, { className: "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(SearchToggle, { hideIfDisabled: true }), _jsx(NavbarSidebarTrigger, { className: "-me-2 md:hidden" })] }), nav), _jsxs("main", { id: "nd-docs-layout", ...props.containerProps, className: cn('flex flex-1 flex-row pe-[var(--fd-layout-offset)]', variables, props.containerProps?.className), style: {
+    return (_jsx(TreeContextProvider, { tree: props.tree, children: _jsxs(NavProvider, { transparentMode: transparentMode, children: [replaceOrDefault({ enabled: navEnabled, component: navReplace }, _jsxs(Navbar, { className: "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(SearchToggle, { hideIfDisabled: true }), _jsx(NavbarSidebarTrigger, { className: "-me-2 md:hidden" })] }), nav), _jsxs("main", { id: "nd-docs-layout", ...props.containerProps, className: cn('flex flex-1 flex-row pe-(--fd-layout-offset)', variables, props.containerProps?.className), style: {
                         ...layoutVariables,
                         ...props.containerProps?.style,
-                    }, children: [collapsible ? (_jsx(SidebarCollapseTrigger, { className: "fixed bottom-3 z-30 backdrop-blur-lg data-[collapsed=false]:hidden max-md:hidden", style: {
-                                insetInlineStart: 'calc(var(--fd-layout-offset) + 0.5rem)',
-                            } })) : null, replaceOrDefault({ enabled: sidebarEnabled, component: sidebarReplace }, _jsxs(Aside, { ...sidebar, className: cn('md:ps-[var(--fd-layout-offset)]', sidebar.className), children: [_jsxs(SidebarHeader, { children: [_jsx(SidebarHeaderItems, { ...nav, links: links }), sidebarBanner, tabs.length > 0 ? (_jsx(RootToggle, { options: tabs, className: "-mx-2" })) : null, !sidebarHideSearch ? (_jsx(LargeSearchToggle, { hideIfDisabled: true, className: "rounded-lg max-md:hidden" })) : null] }), _jsxs(SidebarViewport, { children: [_jsx("div", { className: "mb-4 empty:hidden md:hidden", children: links
+                    }, children: [collapsible ? (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
+                                color: 'secondary',
+                                size: 'icon',
+                            }), 'fixed top-1/2 -translate-y-1/2 start-0 z-40 text-fd-muted-foreground border-s-0 rounded-s-none shadow-md data-[collapsed=false]:hidden max-md:hidden'), children: _jsx(ChevronRight, {}) })) : null, replaceOrDefault({ enabled: sidebarEnabled, component: sidebarReplace }, _jsxs(Aside, { ...sidebar, className: cn('md:ps-(--fd-layout-offset)', sidebar.className), children: [_jsxs(SidebarHeader, { children: [_jsx(SidebarHeaderItems, { ...nav, links: links, sidebarCollapsible: collapsible }), sidebarBanner, tabs.length > 0 ? (_jsx(RootToggle, { options: tabs, className: "-mx-2" })) : null, !sidebarHideSearch ? (_jsx(LargeSearchToggle, { hideIfDisabled: true, className: "rounded-lg max-md:hidden" })) : null] }), _jsxs(SidebarViewport, { children: [_jsx("div", { className: "mb-4 empty:hidden md:hidden", children: links
                                                 .filter((v) => v.type !== 'icon')
-                                                .map((item, i) => (_jsx(SidebarLinkItem, { item: item }, i))) }), _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] })] }), {
+                                                .map((item, i) => (_jsx(SidebarLinkItem, { item: item }, i))) }), _jsx(SidebarPageTree, { components: sidebarComponents })] }), _jsxs(SidebarFooter, { children: [_jsx(SidebarFooterItems, { links: links, i18n: i18n, disableThemeSwitch: props.disableThemeSwitch ?? false }), sidebarFooter] })] }), {
                             ...sidebar,
                             tabs,
                         }), _jsx(StylesProvider, { ...pageStyles, children: props.children })] })] }) }));
 }
-function SidebarHeaderItems({ links, ...props }) {
+function SidebarHeaderItems({ links, sidebarCollapsible, ...props }) {
     const isEmpty = !props.title && !props.children && links.length === 0;
     if (isEmpty)
         return null;
-    return (_jsxs("div", { className: "flex flex-row items-center max-md:hidden", children: [props.title ? (_jsx(Link, { href: props.url ?? '/', className: "inline-flex items-center gap-2.5 py-1 font-medium", children: props.title })) : null, props.children, links.length > 0 ? (_jsx(LinksMenu, { items: links, className: cn(buttonVariants({
-                    size: 'icon',
+    return (_jsxs("div", { className: "flex flex-row items-center max-md:hidden", children: [props.title ? (_jsx(Link, { href: props.url ?? '/', className: "inline-flex text-[15px] items-center gap-2.5 py-1 font-medium", children: props.title })) : null, props.children, sidebarCollapsible && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
                     color: 'ghost',
-                }), 'ms-auto'), children: _jsx(MoreHorizontal, {}) })) : null] }));
+                    size: 'icon-sm',
+                }), 'ms-auto text-fd-muted-foreground max-md:hidden') }))] }));
 }
-function SidebarFooterItems({ iconItems, i18n, sidebarCollapsible, disableThemeSwitch, }) {
+function SidebarFooterItems({ i18n, disableThemeSwitch, links, }) {
+    const iconItems = links.filter((v) => v.type === 'icon');
     // empty footer items
-    if (iconItems.length === 0 &&
-        !i18n &&
-        disableThemeSwitch &&
-        !sidebarCollapsible)
+    if (links.length === 0 && !i18n && disableThemeSwitch)
         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: "max-md:hidden" })) : 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:[&_svg]:size-4.5'), "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-4.5" }), _jsx(LanguageToggleText, { className: "md:hidden" })] })) : null, !disableThemeSwitch ? _jsx(ThemeToggle, { className: "p-0" }) : null] }));
 }
 export { getSidebarTabsFromOptions } from './docs/shared.js';

package/dist/layouts/home/navbar.js

@@ -12,7 +12,7 @@ const navItemVariants = cva('inline-flex items-center gap-1 p-2 text-fd-muted-fo
 export function Navbar(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 left-1/2 top-[var(--fd-banner-height)] z-40 box-content 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) &&
+    return (_jsx(NavigationMenu, { value: value, onValueChange: setValue, asChild: true, children: _jsxs("header", { id: "nd-nav", ...props, className: cn('fixed left-1/2 top-(--fd-banner-height) z-40 box-content 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(NavigationMenuList, { className: "flex h-14 w-full flex-row items-center px-4 lg:h-12", asChild: true, children: _jsx("nav", { children: props.children }) }), _jsx(NavigationMenuViewport, {})] }) }));
 }
 export const NavbarMenu = NavigationMenuItem;

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

@@ -1,4 +1,10 @@
-import type { ButtonHTMLAttributes, HTMLAttributes } from 'react';
+import { type ButtonHTMLAttributes, type HTMLAttributes } from 'react';
+import type { Option } from '../components/layout/root-toggle.js';
 export declare function Navbar(props: HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
 export declare function NavbarSidebarTrigger(props: ButtonHTMLAttributes<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;
+export declare function LayoutTabs(props: HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
+export declare function LayoutTab(item: Option): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarLayoutTab({ item, ...props }: {
+    item: Option;
+} & HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=notebook.client.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"notebook.client.d.ts","sourceRoot":"","sources":["../../src/layouts/notebook.client.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAOlE,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,2CA0BxD;AAED,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,2CAkB/C"}
+{"version":3,"file":"notebook.client.d.ts","sourceRoot":"","sources":["../../src/layouts/notebook.client.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,oBAAoB,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AASvE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAE9D,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,2CAyBxD;AAED,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,2CAkB/C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,2CAY5D;AAUD,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,2CAkBrC;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,GAAG,KAAK,EACT,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,cAAc,CAAC,WAAW,CAAC,2CAoBhD"}

package/dist/layouts/notebook.client.js

@@ -1,19 +1,23 @@
 '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 { useSidebar } from '../contexts/sidebar.js';
 import { useNav } from '../components/layout/nav.js';
 import { SidebarTrigger } from 'fumadocs-core/sidebar';
 import { buttonVariants } from '../components/ui/button.js';
 import { Menu, X } from 'lucide-react';
+import Link from 'fumadocs-core/link';
+import { usePathname } from 'next/navigation';
+import { isActive } from '../utils/is-active.js';
 export function Navbar(props) {
     const { open, collapsed } = useSidebar();
     const { isTransparent } = useNav();
-    return (_jsx("header", { id: "nd-subnav", ...props, className: cn('fixed inset-x-0 top-[var(--fd-banner-height)] z-10 h-14 pe-[var(--fd-layout-offset)] backdrop-blur-lg transition-colors', (!isTransparent || open) && 'bg-fd-background/80', props.className), style: {
+    return (_jsx("header", { id: "nd-subnav", ...props, className: cn('fixed inset-x-0 top-(--fd-banner-height) z-10 h-14 pe-(--fd-layout-offset) backdrop-blur-lg transition-colors', (!isTransparent || open) && 'bg-fd-background/80', props.className), style: {
             paddingInlineStart: collapsed
-                ? 'calc(var(--fd-layout-offset))'
+                ? 'var(--fd-layout-offset)'
                 : 'calc(var(--fd-layout-offset) + var(--fd-sidebar-width))',
-        }, children: _jsx("div", { className: "mx-auto flex size-full flex-row items-center border-b border-fd-foreground/10 px-4 md:gap-1.5", children: props.children }) }));
+            ...props.style,
+        }, children: props.children }));
 }
 export function NavbarSidebarTrigger(props) {
     const { open } = useSidebar();
@@ -22,3 +26,25 @@ export function NavbarSidebarTrigger(props) {
             size: 'icon',
         }), props.className), children: open ? _jsx(X, {}) : _jsx(Menu, {}) }));
 }
+export function LayoutTabs(props) {
+    return (_jsx("div", { ...props, className: cn('flex flex-row items-end gap-6 overflow-auto', props.className), children: props.children }));
+}
+function useIsSelected(item) {
+    const pathname = usePathname();
+    return item.urls
+        ? item.urls.has(pathname.endsWith('/') ? pathname.slice(0, -1) : pathname)
+        : isActive(item.url, pathname, true);
+}
+export function LayoutTab(item) {
+    const { closeOnRedirect } = useSidebar();
+    const selected = useIsSelected(item);
+    return (_jsx(Link, { className: cn('inline-flex items-center py-2.5 border-b-2 border-transparent gap-2 text-fd-muted-foreground text-sm text-nowrap', selected && 'text-fd-foreground font-medium border-fd-primary'), href: item.url, onClick: () => {
+            closeOnRedirect.current = false;
+        }, children: item.title }));
+}
+export function SidebarLayoutTab({ item, ...props }) {
+    const selected = useIsSelected(item);
+    return (_jsxs(Link, { ...props, className: cn('flex flex-row items-center px-2 py-1.5 gap-2.5 text-fd-muted-foreground [&_svg]:!size-4.5', selected
+            ? 'text-fd-primary font-medium'
+            : 'hover:text-fd-accent-foreground', props.className), "data-active": selected, href: item.url, children: [item.icon, item.title] }));
+}

package/dist/layouts/notebook.d.ts

@@ -1,11 +1,15 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
+import { type HTMLAttributes } from 'react';
 import { type BaseLayoutProps } from '../layouts/shared.js';
 import { type SidebarOptions } from '../layouts/docs/shared.js';
 import type { PageTree } from 'fumadocs-core/server';
 export interface DocsLayoutProps extends BaseLayoutProps {
     tree: PageTree.Root;
+    tabMode?: 'sidebar' | 'navbar';
+    nav?: BaseLayoutProps['nav'] & {
+        mode?: 'top' | 'auto';
+    };
     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;
+export declare function DocsLayout({ tabMode, nav: { transparentMode, ...nav }, sidebar: { collapsible: sidebarCollapsible, tabs: tabOptions, banner: sidebarBanner, footer: sidebarFooter, components: sidebarComponents, ...sidebar }, i18n, ...props }: DocsLayoutProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=notebook.d.ts.map

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

@@ -1 +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;AA6B1B,OAAO,EAKL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAIrD,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,CAgF7B"}
+{"version":3,"file":"notebook.d.ts","sourceRoot":"","sources":["../../src/layouts/notebook.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,kBAAkB,CAAC;AA4BlE,OAAO,EAKL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAWrD,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,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,OAAmB,EACnB,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,2CA6GjB"}

package/dist/layouts/notebook.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
-import { getLinks, } from '../layouts/shared.js';
+import { getLinks } from '../layouts/shared.js';
 import { CollapsibleSidebar, Sidebar, SidebarCollapseTrigger, SidebarFooter, SidebarHeader, SidebarViewport, SidebarPageTree, } from '../layouts/docs/sidebar.js';
-import { RootToggle } from '../components/layout/root-toggle.js';
 import { TreeContextProvider } from '../contexts/tree.js';
 import { NavProvider, Title } from '../components/layout/nav.js';
 import { LargeSearchToggle, SearchToggle, } from '../components/layout/search-toggle.js';
@@ -15,30 +14,45 @@ 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 { checkPageTree, getSidebarTabsFromOptions, layoutVariables, SidebarLinkItem, } from '../layouts/docs/shared.js';
-import { Navbar, NavbarSidebarTrigger } from './notebook.client.js';
+import { LayoutTab, LayoutTabs, Navbar, NavbarSidebarTrigger, SidebarLayoutTab, } from './notebook.client.js';
 import { StylesProvider } from '../contexts/layout.js';
-export function DocsLayout({ nav: { transparentMode, ...nav } = {}, sidebar: { collapsible: sidebarCollapsible = true, tabs: tabOptions, banner: sidebarBanner, footer: sidebarFooter, components: sidebarComponents, ...sidebar } = {}, i18n = false, ...props }) {
+import { RootToggle } from '../components/layout/root-toggle.js';
+export function DocsLayout({ tabMode = 'sidebar', nav: { transparentMode, ...nav } = {}, sidebar: { collapsible: sidebarCollapsible = true, tabs: tabOptions, banner: sidebarBanner, footer: sidebarFooter, components: sidebarComponents, ...sidebar } = {}, i18n = false, ...props }) {
     checkPageTree(props.tree);
+    const navMode = nav.mode ?? 'auto';
     const links = getLinks(props.links ?? [], props.githubUrl);
     const Aside = sidebarCollapsible ? CollapsibleSidebar : Sidebar;
     const tabs = getSidebarTabsFromOptions(tabOptions, props.tree) ?? [];
-    const variables = cn('[--fd-nav-height:3.5rem] [--fd-tocnav-height:36px] md:[--fd-sidebar-width:268px] xl:[--fd-toc-width:268px] xl:[--fd-tocnav-height:0px]');
+    const variables = cn('[--fd-nav-height:calc(var(--spacing)*14)] [--fd-tocnav-height:36px] md:[--fd-sidebar-width:286px] xl:[--fd-toc-width:286px] xl:[--fd-tocnav-height:0px]', tabs.length > 0 &&
+        tabMode === 'navbar' &&
+        'lg:[--fd-nav-height:calc(var(--spacing)*26)]');
     const pageStyles = {
         tocNav: cn('xl:hidden'),
         toc: cn('max-xl:hidden'),
-        page: cn('mt-[var(--fd-nav-height)]'),
+        page: cn('mt-(--fd-nav-height)'),
     };
-    return (_jsx(TreeContextProvider, { tree: props.tree, children: _jsx(NavProvider, { transparentMode: transparentMode, children: _jsxs("main", { id: "nd-docs-layout", ...props.containerProps, className: cn('flex w-full flex-1 flex-row pe-[var(--fd-layout-offset)]', variables, props.containerProps?.className), style: {
+    return (_jsx(TreeContextProvider, { tree: props.tree, children: _jsx(NavProvider, { transparentMode: transparentMode, children: _jsxs("main", { id: "nd-docs-layout", ...props.containerProps, className: cn('flex w-full flex-1 flex-row pe-(--fd-layout-offset)', variables, props.containerProps?.className), style: {
                     ...layoutVariables,
                     ...props.containerProps?.style,
-                }, children: [_jsxs(Aside, { ...sidebar, className: cn('md:ps-[var(--fd-layout-offset)] 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: "-mx-2" })) : null] }), _jsxs(SidebarViewport, { children: [_jsx("div", { className: "mb-4 empty:hidden lg:hidden", children: links.map((item, i) => (_jsx(SidebarLinkItem, { item: item }, i))) }), _jsx(SidebarPageTree, { components: sidebarComponents })] }), _jsxs(SidebarFooter, { className: cn(!sidebarFooter && 'md:hidden'), children: [!props.disableThemeSwitch ? (_jsx(ThemeToggle, { className: "w-fit md:hidden", mode: "light-dark-system" })) : null, sidebarFooter] })] }), _jsx(DocsNavbar, { nav: nav, links: links, i18n: i18n, sidebarCollapsible: sidebarCollapsible }), _jsx(StylesProvider, { ...pageStyles, children: props.children })] }) }) }));
+                }, children: [_jsxs(Aside, { ...sidebar, className: cn('md:ps-(--fd-layout-offset)', navMode === 'top'
+                            ? 'bg-transparent *:!pt-0'
+                            : 'md:[--fd-nav-height:0px]', sidebar.className), children: [_jsxs(SidebarHeader, { children: [nav.title && navMode === 'auto' ? (_jsx(Link, { href: nav.url ?? '/', className: "inline-flex items-center gap-2.5 py-1 font-medium max-md:hidden", children: nav.title })) : null, nav.children, sidebarBanner, tabMode === 'sidebar' && tabs.length > 0 ? (_jsx(RootToggle, { options: tabs, className: "-mx-2" })) : null] }), _jsxs(SidebarViewport, { children: [tabMode === 'navbar' &&
+                                        tabs.map((tab, i) => (_jsx(SidebarLayoutTab, { item: tab, className: cn('lg:hidden', i === tabs.length - 1 && 'mb-4') }, tab.url))), links.map((item, i) => (_jsx(SidebarLinkItem, { item: item, className: cn('lg:hidden', i === links.length - 1 && 'mb-4') }, i))), _jsx(SidebarPageTree, { components: sidebarComponents })] }), _jsxs(SidebarFooter, { className: cn('flex flex-row items-center', !sidebarFooter && 'md:hidden'), children: [i18n ? (_jsx(LanguageToggle, { className: "me-auto md:hidden", children: _jsx(Languages, { className: "size-5 text-fd-muted-foreground" }) })) : null, !props.disableThemeSwitch ? (_jsx(ThemeToggle, { className: "md:hidden", mode: "light-dark-system" })) : null, sidebarFooter] })] }), _jsx(DocsNavbar, { nav: nav, links: links, i18n: i18n, sidebarCollapsible: sidebarCollapsible, tabs: tabMode == 'navbar' ? tabs : [] }), _jsx(StylesProvider, { ...pageStyles, children: props.children })] }) }) }));
 }
-function DocsNavbar({ sidebarCollapsible, links, nav = {}, i18n, }) {
-    return (_jsxs(Navbar, { children: [sidebarCollapsible ? (_jsx(SidebarCollapseTrigger, { className: "-ms-1.5 text-fd-muted-foreground data-[collapsed=false]:hidden max-md:hidden" })) : null, _jsx(LargeSearchToggle, { hideIfDisabled: true, 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(SearchToggle, { hideIfDisabled: true, className: "md:hidden" }), _jsx(NavbarSidebarTrigger, { className: "-me-1.5 md:hidden" }), _jsx("div", { className: "flex flex-row items-center empty:hidden max-lg: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: "max-md:hidden", mode: "light-dark-system" })] }));
+function DocsNavbar({ sidebarCollapsible, links, nav = {}, i18n, tabs, }) {
+    const navMode = nav.mode ?? 'auto';
+    return (_jsxs(Navbar, { className: cn('flex flex-col h-14', tabs.length > 0 && 'lg:h-26'), style: navMode === 'top'
+            ? {
+                paddingInlineStart: 'var(--fd-layout-offset)',
+            }
+            : undefined, children: [_jsxs("div", { className: "flex flex-row border-b border-fd-foreground/10 px-4 flex-1 md:px-6", children: [_jsxs("div", { className: cn('flex flex-row items-center', navMode === 'top' && 'flex-1'), children: [_jsx(Title, { url: nav.url, title: nav.title, className: cn(navMode === 'auto' ? 'md:hidden' : 'pe-6') }), sidebarCollapsible ? (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
+                                    color: 'ghost',
+                                    size: 'icon',
+                                }), 'text-fd-muted-foreground data-[collapsed=false]:hidden max-md:hidden') })) : null] }), _jsx(LargeSearchToggle, { hideIfDisabled: true, className: cn('w-full my-auto rounded-xl max-md:hidden', navMode === 'top' ? 'max-w-sm px-2' : 'max-w-[240px]') }), _jsxs("div", { className: "flex flex-1 flex-row items-center justify-end", children: [_jsx("div", { className: "flex flex-row items-center gap-6 px-4 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" }, i))) }), nav.children, _jsx(SearchToggle, { hideIfDisabled: true, className: "md:hidden" }), _jsx(NavbarSidebarTrigger, { className: "md:hidden" }), 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))), i18n ? (_jsx(LanguageToggle, { className: "max-md:hidden", children: _jsx(Languages, { className: "size-4.5 text-fd-muted-foreground" }) })) : null, _jsx(ThemeToggle, { className: "ms-2 max-md:hidden", mode: "light-dark-system" })] })] }), tabs.length > 0 ? (_jsx(LayoutTabs, { className: "px-6 border-b border-fd-foreground/10 max-lg:hidden", children: tabs.map((tab) => (_jsx(LayoutTab, { ...tab }, tab.url))) })) : null] }));
 }
 function NavbarLinkItem({ item, ...props }) {
     if (item.type === 'menu') {
@@ -52,9 +66,3 @@ function NavbarLinkItem({ item, ...props }) {
         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/page.client.d.ts

@@ -1,6 +1,6 @@
 import { type HTMLAttributes } from 'react';
 import { type BreadcrumbOptions } from 'fumadocs-core/breadcrumb';
-export declare function TocNav(props: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare function TocPopoverHeader(props: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 export declare function PageBody(props: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 export declare function PageArticle(props: HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
 export declare function LastUpdate(props: {

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,EAEL,KAAK,cAAc,EAIpB,MAAM,OAAO,CAAC;AAWf,OAAO,EACL,KAAK,iBAAiB,EAEvB,MAAM,0BAA0B,CAAC;AAIlC,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CA2B3D;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAY7D;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,2CAe7D;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"}
+{"version":3,"file":"page.client.d.ts","sourceRoot":"","sources":["../src/page.client.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,cAAc,EAKpB,MAAM,OAAO,CAAC;AAWf,OAAO,EACL,KAAK,iBAAiB,EAEvB,MAAM,0BAA0B,CAAC;AAMlC,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAkDrE;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAY7D;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,2CAe7D;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,kDAsClD"}

package/dist/page.client.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useEffect, useMemo, useState, } from 'react';
+import { Fragment, useEffect, useMemo, useRef, useState, } from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import Link from 'next/link';
 import { cva } from 'class-variance-authority';
@@ -13,14 +13,29 @@ import { useNav } from './components/layout/nav.js';
 import { getBreadcrumbItemsFromPath, } from 'fumadocs-core/breadcrumb';
 import { usePageStyles } from './contexts/layout.js';
 import { isActive } from './utils/is-active.js';
-export function TocNav(props) {
-    const { open } = useSidebar();
+import { TocPopover } from './components/layout/toc.js';
+import { useEffectEvent } from 'fumadocs-core/utils/use-effect-event';
+export function TocPopoverHeader(props) {
+    const ref = useRef(null);
+    const [open, setOpen] = useState(false);
+    const sidebar = useSidebar();
     const { tocNav } = usePageStyles();
     const { isTransparent } = useNav();
-    return (_jsx("header", { id: "nd-tocnav", ...props, className: cn('sticky top-[calc(var(--fd-banner-height)+var(--fd-nav-height))] z-10 flex flex-row items-center border-b border-fd-foreground/10 text-sm backdrop-blur-md transition-colors', !isTransparent && 'bg-fd-background/80', open && 'opacity-0', tocNav, props.className), style: {
-            ...props.style,
-            '--fd-toc-top-with-offset': 'calc(4px + var(--fd-banner-height) + var(--fd-nav-height))',
-        }, children: props.children }));
+    const onClick = useEffectEvent((e) => {
+        if (!open)
+            return;
+        if (ref.current && !ref.current.contains(e.target))
+            setOpen(false);
+    });
+    useEffect(() => {
+        window.addEventListener('click', onClick);
+        return () => {
+            window.removeEventListener('click', onClick);
+        };
+    }, [onClick]);
+    return (_jsx("div", { className: cn('sticky overflow-visible z-10 h-8', tocNav, props.className), style: {
+            top: 'calc(var(--fd-banner-height) + var(--fd-nav-height))',
+        }, children: _jsx(TocPopover, { open: open, onOpenChange: setOpen, asChild: true, children: _jsx("header", { ref: ref, id: "nd-tocnav", ...props, className: cn('border-b border-fd-foreground/10 backdrop-blur-md transition-colors', (!isTransparent || open) && 'bg-fd-background/80', open && 'shadow-lg', sidebar.open && 'opacity-0'), children: props.children }) }) }));
 }
 export function PageBody(props) {
     const { page } = usePageStyles();
@@ -28,7 +43,7 @@ export function PageBody(props) {
 }
 export function PageArticle(props) {
     const { article } = usePageStyles();
-    return (_jsx("article", { ...props, className: cn('flex w-full flex-1 flex-col gap-6 px-4 pt-8 md:pt-12 lg:px-8 xl:mx-auto', article, props.className), children: props.children }));
+    return (_jsx("article", { ...props, className: cn('flex w-full flex-1 flex-col gap-6 px-4 pt-8 md:px-6 md:pt-12 xl:px-12 xl:mx-auto', article, props.className), children: props.children }));
 }
 export function LastUpdate(props) {
     const { text } = useI18n();
@@ -89,5 +104,8 @@ export function Breadcrumb(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))) }));
+    return (_jsx("div", { className: "flex flex-row items-center gap-1.5 text-[15px] text-fd-muted-foreground", children: items.map((item, i) => {
+            const className = cn('truncate', i === items.length - 1 && 'text-fd-primary font-medium');
+            return (_jsxs(Fragment, { children: [i !== 0 && _jsx("span", { className: "text-fd-foreground/30", children: "/" }), item.url ? (_jsx(Link, { href: item.url, className: cn(className, 'transition-opacity hover:opacity-80'), children: item.name })) : (_jsx("span", { className: className, children: item.name }))] }, i));
+        }) }));
 }

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":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAC3E,OAAO,EACL,KAAK,oBAAoB,EAEzB,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC7E,OAAO,EAAE,KAAK,mBAAmB,EAAkB,MAAM,mBAAmB,CAAC;AAI7E,OAAO,EAEL,KAAK,WAAW,EAIhB,KAAK,eAAe,EAGrB,MAAM,eAAe,CAAC;AACvB,OAAO,EAKL,KAAK,QAAQ,EAEd,MAAM,yBAAyB,CAAC;AAMjC,KAAK,qBAAqB,GAAG,IAAI,CAAC,QAAQ,EAAE,OAAO,GAAG,UAAU,CAAC,GAC/D,IAAI,CAAC,mBAAmB,EAAE,QAAQ,CAAC,GAAG;IACpC,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC5B,CAAC;AAEJ,KAAK,4BAA4B,GAAG,IAAI,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC;AAE1E,UAAU,mBACR,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC1E,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IAEb;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAED,UAAU,iBAAkB,SAAQ,eAAe;IACjD,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;IAErB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,UAAU,aAAc,SAAQ,WAAW;IACzC,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,GAAG,CAAC,EAAE,eAAe,CAAC;IAEtB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,cAAc,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;IAChD,qBAAqB,CAAC,EAAE,OAAO,CAAC,4BAA4B,CAAC,CAAC;IAE9D;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAExC;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAEhC,YAAY,CAAC,EAAE,mBAAmB,CAAC;IACnC,UAAU,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;IAEpC,SAAS,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC3C,OAAO,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACtC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,QAAQ,CAAC,EACvB,GAAQ,EACR,IAAY,EACZ,qBAAqB,EAAE,EACrB,OAAO,EAAE,iBAAiB,EAC1B,SAAS,EAAE,iBAAiB,EAC5B,GAAG,iBAAiB,EAChB,EACN,cAAc,EAAE,EACd,OAAO,EAAE,UAAU,EACnB,SAAS,EAAE,UAAU,EACrB,GAAG,UAAU,EACT,EACN,GAAG,KAAK,EACT,EAAE,aAAa,2CAkGf;AA+BD;;GAEG;AACH,eAAO,MAAM,QAAQ,2HAOnB,CAAC;AAIH,eAAO,MAAM,eAAe,uIAgB1B,CAAC;AAIH,eAAO,MAAM,SAAS,mIAapB,CAAC;AAIH,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,IAAI,EACJ,IAAI,EAAE,UAAU,EAChB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC;CACtB,kDAmEA;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,GAAG,SAAS,CAM5E"}

package/dist/page.js

@@ -4,8 +4,8 @@ import { AnchorProvider } from 'fumadocs-core/toc';
 import { Card, Cards } from './components/card.js';
 import { replaceOrDefault } from './layouts/shared.js';
 import { cn } from './utils/cn.js';
-import { Footer, LastUpdate, TocNav, Breadcrumb, PageBody, PageArticle, } from './page.client.js';
-import { Toc, TOCItems, TocPopoverTrigger, TocPopover, TocPopoverContent, } from './components/layout/toc.js';
+import { Footer, LastUpdate, TocPopoverHeader, Breadcrumb, PageBody, PageArticle, } from './page.client.js';
+import { Toc, TOCItems, TocPopoverTrigger, TocPopoverContent, TOCScrollArea, } from './components/layout/toc.js';
 import { buttonVariants } from './components/ui/button.js';
 import { Edit, Text } from 'lucide-react';
 import { I18nLabel } from './contexts/i18n.js';
@@ -22,10 +22,10 @@ export function DocsPage({ toc = [], full = false, tableOfContentPopover: { enab
     return (_jsxs(AnchorProvider, { toc: toc, single: tocOptions.single, children: [_jsxs(PageBody, { ...props.container, className: cn(props.container?.className), style: {
                     '--fd-tocnav-height': !tocPopoverEnabled ? '0px' : undefined,
                     ...props.container?.style,
-                }, children: [replaceOrDefault({ enabled: tocPopoverEnabled, component: tocPopoverReplace }, _jsx(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] })] }) }), {
+                }, children: [replaceOrDefault({ enabled: tocPopoverEnabled, component: tocPopoverReplace }, _jsxs(TocPopoverHeader, { children: [_jsx(TocPopoverTrigger, { className: "w-full", items: toc }), _jsxs(TocPopoverContent, { children: [tocPopoverOptions.header, _jsx(TOCScrollArea, { isMenu: true, children: tocPopoverOptions.style === 'clerk' ? (_jsx(ClerkTOCItems, { items: toc })) : (_jsx(TOCItems, { items: toc })) }), tocPopoverOptions.footer] })] }), {
                         items: toc,
                         ...tocPopoverOptions,
-                    }), _jsxs(PageArticle, { ...props.article, className: cn(full || !tocEnabled ? 'max-w-[1120px]' : 'max-w-[860px]', props.article?.className), children: [replaceOrDefault(props.breadcrumb, _jsx(Breadcrumb, { includePage: props.breadcrumb?.full, ...props.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(props.footer, _jsx(Footer, { items: props.footer?.items }))] })] }), replaceOrDefault({ enabled: tocEnabled, component: tocReplace }, _jsxs(Toc, { 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(PageArticle, { ...props.article, className: cn(full || !tocEnabled ? 'max-w-[1120px]' : 'max-w-[860px]', props.article?.className), children: [replaceOrDefault(props.breadcrumb, _jsx(Breadcrumb, { ...props.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(props.footer, _jsx(Footer, { items: props.footer?.items }))] })] }), replaceOrDefault({ enabled: tocEnabled, component: tocReplace }, _jsxs(Toc, { children: [tocOptions.header, _jsxs("h3", { className: "inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground", children: [_jsx(Text, { className: "size-4" }), _jsx(I18nLabel, { label: "toc" })] }), _jsx(TOCScrollArea, { children: tocOptions.style === 'clerk' ? (_jsx(ClerkTOCItems, { items: toc })) : (_jsx(TOCItems, { items: toc })) }), tocOptions.footer] }), {
                 items: toc,
                 ...tocOptions,
             })] }));
@@ -50,7 +50,7 @@ export const DocsDescription = forwardRef((props, ref) => {
 });
 DocsDescription.displayName = 'DocsDescription';
 export const DocsTitle = forwardRef((props, ref) => {
-    return (_jsx("h1", { ref: ref, ...props, className: cn('text-3xl font-bold', props.className), children: props.children }));
+    return (_jsx("h1", { ref: ref, ...props, className: cn('text-3xl font-semibold', props.className), children: props.children }));
 });
 DocsTitle.displayName = 'DocsTitle';
 export function DocsCategory({ page, from, tree: forcedTree, ...props }) {