fumadocs-ui 16.0.15 → 16.2.0

package/dist/layouts/docs/index.js

@@ -3,18 +3,18 @@ import { useMemo, } from 'react';
 import { Languages, Sidebar as SidebarIcon } from '../../icons.js';
 import { cn } from '../../utils/cn.js';
 import { buttonVariants } from '../../components/ui/button.js';
-import { Sidebar, SidebarCollapseTrigger, SidebarContent, SidebarContentMobile, SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarFooter, SidebarHeader, SidebarItem, SidebarPageTree, SidebarTrigger, SidebarViewport, } from '../../components/layout/sidebar.js';
-import { RootToggle } from '../../components/layout/root-toggle.js';
-import { BaseLinkItem, getLinks, } from '../../layouts/shared/index.js';
-import { LanguageToggle, LanguageToggleText, } from '../../components/layout/language-toggle.js';
-import { CollapsibleControl, LayoutBody, LayoutTabs, Navbar, } from '../../layouts/docs/client.js';
+import { Sidebar, SidebarCollapseTrigger, SidebarContent, SidebarDrawer, SidebarLinkItem, SidebarPageTree, SidebarTrigger, SidebarViewport, } from './sidebar.js';
+import { resolveLinkItems } from '../../layouts/shared/index.js';
+import { LinkItem } from '../../layouts/shared/link-item.js';
+import { LanguageToggle, LanguageToggleText, } from '../../layouts/shared/language-toggle.js';
+import { CollapsibleControl, LayoutTabs, LayoutHeader, LayoutBody, LayoutContextProvider, } from './client.js';
 import { TreeContextProvider } from '../../contexts/tree.js';
-import { ThemeToggle } from '../../components/layout/theme-toggle.js';
-import { NavProvider } from '../../contexts/layout.js';
+import { ThemeToggle } from '../shared/theme-toggle.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';
-export function DocsLayout({ nav: { transparentMode, ...nav } = {}, sidebar: { tabs: sidebarTabs, enabled: sidebarEnabled = true, ...sidebarProps } = {}, searchToggle = {}, themeSwitch = {}, tabMode = 'auto', i18n = false, children, tree, ...props }) {
+import { SidebarTabTrigger, } from '../../components/sidebar/tabs.js';
+export function DocsLayout({ nav: { transparentMode, ...nav } = {}, sidebar: { tabs: sidebarTabs, enabled: sidebarEnabled = true, defaultOpenLevel, prefetch, ...sidebarProps } = {}, searchToggle = {}, themeSwitch = {}, tabMode = 'auto', i18n = false, children, tree, ...props }) {
     const tabs = useMemo(() => {
         if (Array.isArray(sidebarTabs)) {
             return sidebarTabs;
@@ -27,51 +27,40 @@ export function DocsLayout({ nav: { transparentMode, ...nav } = {}, sidebar: { t
         }
         return [];
     }, [tree, sidebarTabs]);
-    const links = getLinks(props.links ?? [], props.githubUrl);
-    const sidebarVariables = cn('md:[--fd-sidebar-width:268px] lg:[--fd-sidebar-width:286px]');
+    const links = resolveLinkItems(props);
     function sidebar() {
-        const { footer, banner, collapsible = true, component, components, defaultOpenLevel, prefetch, ...rest } = sidebarProps;
+        const { footer, banner, collapsible = true, component, components, ...rest } = sidebarProps;
         if (component)
             return component;
         const iconLinks = links.filter((item) => item.type === 'icon');
         const viewport = (_jsxs(SidebarViewport, { children: [links
                     .filter((v) => v.type !== 'icon')
-                    .map((item, i, list) => (_jsx(SidebarLinkItem, { item: item, className: cn(i === list.length - 1 && 'mb-4') }, i))), _jsx(SidebarPageTree, { components: components })] }));
-        const mobile = (_jsxs(SidebarContentMobile, { ...rest, children: [_jsxs(SidebarHeader, { children: [_jsxs("div", { className: "flex text-fd-muted-foreground items-center gap-1.5", children: [_jsx("div", { className: "flex flex-1", children: iconLinks.map((item, i) => (_jsx(BaseLinkItem, { item: item, className: cn(buttonVariants({
-                                            size: 'icon-sm',
+                    .map((item, i, list) => (_jsx(SidebarLinkItem, { item: item, className: cn(i === list.length - 1 && 'mb-4') }, i))), _jsx(SidebarPageTree, { ...components })] }));
+        return (_jsxs(_Fragment, { children: [collapsible && _jsx(CollapsibleControl, {}), _jsxs(SidebarContent, { ...rest, children: [_jsxs("div", { className: "flex flex-col gap-3 p-4 pb-2", children: [_jsxs("div", { className: "flex", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex text-[0.9375rem] items-center gap-2.5 font-medium me-auto", children: nav.title }), nav.children, collapsible && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
+                                                color: 'ghost',
+                                                size: 'icon-sm',
+                                                className: 'mb-auto text-fd-muted-foreground',
+                                            })), children: _jsx(SidebarIcon, {}) }))] }), searchToggle.enabled !== false &&
+                                    (searchToggle.components?.lg ?? (_jsx(LargeSearchToggle, { hideIfDisabled: true }))), tabs.length > 0 && tabMode === 'auto' && (_jsx(SidebarTabTrigger, { options: tabs })), banner] }), viewport, (i18n ||
+                            iconLinks.length > 0 ||
+                            themeSwitch?.enabled !== false ||
+                            footer) && (_jsxs("div", { className: "flex flex-col border-t p-4 pt-2 empty:hidden", children: [_jsxs("div", { className: "flex text-fd-muted-foreground items-center empty:hidden", children: [i18n && (_jsx(LanguageToggle, { children: _jsx(Languages, { className: "size-4.5" }) })), iconLinks.map((item, i) => (_jsx(LinkItem, { item: item, className: cn(buttonVariants({ size: 'icon-sm', color: 'ghost' })), "aria-label": item.label, children: item.icon }, i))), themeSwitch.enabled !== false &&
+                                            (themeSwitch.component ?? (_jsx(ThemeToggle, { className: "ms-auto p-0", mode: themeSwitch.mode })))] }), footer] }))] }), _jsxs(SidebarDrawer, { children: [_jsxs("div", { className: "flex flex-col gap-3 p-4 pb-2", children: [_jsxs("div", { className: "flex text-fd-muted-foreground items-center gap-1.5", children: [_jsx("div", { className: "flex flex-1", children: iconLinks.map((item, i) => (_jsx(LinkItem, { item: item, className: cn(buttonVariants({
+                                                    size: 'icon-sm',
+                                                    color: 'ghost',
+                                                    className: 'p-2',
+                                                })), "aria-label": item.label, children: item.icon }, i))) }), i18n && (_jsxs(LanguageToggle, { children: [_jsx(Languages, { className: "size-4.5" }), _jsx(LanguageToggleText, {})] })), themeSwitch.enabled !== false &&
+                                            (themeSwitch.component ?? (_jsx(ThemeToggle, { className: "p-0", mode: themeSwitch.mode }))), _jsx(SidebarTrigger, { className: cn(buttonVariants({
+                                                color: 'ghost',
+                                                size: 'icon-sm',
+                                                className: 'p-2',
+                                            })), children: _jsx(SidebarIcon, {}) })] }), tabs.length > 0 && _jsx(SidebarTabTrigger, { options: tabs }), banner] }), viewport, _jsx("div", { className: "flex flex-col border-t p-4 pt-2 empty:hidden", children: footer })] })] }));
+    }
+    return (_jsx(TreeContextProvider, { tree: tree, children: _jsx(LayoutContextProvider, { navTransparentMode: transparentMode, children: _jsx(Sidebar, { defaultOpenLevel: defaultOpenLevel, prefetch: prefetch, children: _jsxs(LayoutBody, { ...props.containerProps, children: [nav.enabled !== false &&
+                            (nav.component ?? (_jsxs(LayoutHeader, { id: "nd-subnav", className: "[grid-area:header] sticky top-(--fd-docs-row-1) z-30 flex items-center ps-4 pe-2.5 border-b transition-colors backdrop-blur-sm h-(--fd-header-height) md:hidden max-md:layout:[--fd-header-height:--spacing(14)] data-[transparent=false]:bg-fd-background/80", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex items-center gap-2.5 font-semibold", children: nav.title }), _jsx("div", { className: "flex-1", children: nav.children }), searchToggle.enabled !== false &&
+                                        (searchToggle.components?.sm ?? (_jsx(SearchToggle, { className: "p-2", hideIfDisabled: true }))), sidebarEnabled && (_jsx(SidebarTrigger, { className: cn(buttonVariants({
                                             color: 'ghost',
+                                            size: 'icon-sm',
                                             className: 'p-2',
-                                        })), "aria-label": item.label, children: item.icon }, i))) }), i18n ? (_jsxs(LanguageToggle, { children: [_jsx(Languages, { className: "size-4.5" }), _jsx(LanguageToggleText, {})] })) : null, themeSwitch.enabled !== false &&
-                                    (themeSwitch.component ?? (_jsx(ThemeToggle, { className: "p-0", mode: themeSwitch.mode }))), _jsx(SidebarTrigger, { className: cn(buttonVariants({
-                                        color: 'ghost',
-                                        size: 'icon-sm',
-                                        className: 'p-2',
-                                    })), children: _jsx(SidebarIcon, {}) })] }), tabs.length > 0 && _jsx(RootToggle, { options: tabs }), banner] }), viewport, _jsx(SidebarFooter, { className: "empty:hidden", children: footer })] }));
-        const content = (_jsxs(SidebarContent, { ...rest, children: [_jsxs(SidebarHeader, { children: [_jsxs("div", { className: "flex", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex text-[0.9375rem] items-center gap-2.5 font-medium me-auto", children: nav.title }), nav.children, collapsible && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
-                                        color: 'ghost',
-                                        size: 'icon-sm',
-                                        className: 'mb-auto text-fd-muted-foreground',
-                                    })), children: _jsx(SidebarIcon, {}) }))] }), searchToggle.enabled !== false &&
-                            (searchToggle.components?.lg ?? (_jsx(LargeSearchToggle, { hideIfDisabled: true }))), tabs.length > 0 && tabMode === 'auto' && (_jsx(RootToggle, { options: tabs })), banner] }), viewport, (i18n ||
-                    iconLinks.length > 0 ||
-                    themeSwitch?.enabled !== false ||
-                    footer) && (_jsxs(SidebarFooter, { children: [_jsxs("div", { className: "flex text-fd-muted-foreground items-center empty:hidden", children: [i18n && (_jsx(LanguageToggle, { children: _jsx(Languages, { className: "size-4.5" }) })), iconLinks.map((item, i) => (_jsx(BaseLinkItem, { item: item, className: cn(buttonVariants({ size: 'icon-sm', color: 'ghost' })), "aria-label": item.label, children: item.icon }, i))), themeSwitch.enabled !== false &&
-                                    (themeSwitch.component ?? (_jsx(ThemeToggle, { className: "ms-auto p-0", mode: themeSwitch.mode })))] }), footer] }))] }));
-        return (_jsx(Sidebar, { defaultOpenLevel: defaultOpenLevel, prefetch: prefetch, Mobile: mobile, Content: _jsxs(_Fragment, { children: [collapsible && _jsx(CollapsibleControl, {}), content] }) }));
-    }
-    return (_jsx(TreeContextProvider, { tree: tree, children: _jsxs(NavProvider, { transparentMode: transparentMode, children: [nav.enabled !== false &&
-                    (nav.component ?? (_jsxs(Navbar, { className: "h-(--fd-nav-height) on-root:[--fd-nav-height:56px] md:on-root:[--fd-nav-height:0px] md:hidden", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex items-center gap-2.5 font-semibold", children: nav.title }), _jsx("div", { className: "flex-1", children: nav.children }), searchToggle.enabled !== false &&
-                                (searchToggle.components?.sm ?? (_jsx(SearchToggle, { className: "p-2", hideIfDisabled: true }))), sidebarEnabled && (_jsx(SidebarTrigger, { className: cn(buttonVariants({
-                                    color: 'ghost',
-                                    size: 'icon-sm',
-                                    className: 'p-2',
-                                })), children: _jsx(SidebarIcon, {}) }))] }))), _jsxs(LayoutBody, { ...props.containerProps, className: cn('md:[&_#nd-page_article]:pt-12 xl:[&_#nd-page_article]:px-8', sidebarEnabled && sidebarVariables, props.containerProps?.className), children: [sidebarEnabled && sidebar(), tabMode === 'top' && tabs.length > 0 && (_jsx(LayoutTabs, { options: tabs, className: "sticky top-[calc(var(--fd-nav-height)+var(--fd-tocnav-height))] z-10 bg-fd-background border-b px-6 pt-3 xl:px-8 max-md:hidden" })), children] })] }) }));
-}
-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 }));
+                                        })), children: _jsx(SidebarIcon, {}) }))] }))), sidebarEnabled && sidebar(), tabMode === 'top' && tabs.length > 0 && (_jsx(LayoutTabs, { options: tabs, className: "z-10 bg-fd-background border-b px-6 pt-3 xl:px-8 max-md:hidden" })), children] }) }) }) }));
 }
-export { CollapsibleControl, Navbar, SidebarTrigger };

package/dist/layouts/docs/{page-client.d.ts → page/client.d.ts}

@@ -1,9 +1,9 @@
 import { type ComponentProps } from 'react';
 import type * as PageTree from 'fumadocs-core/page-tree';
 import { type BreadcrumbOptions } from 'fumadocs-core/breadcrumb';
-export declare function PageTOCPopoverTrigger(props: ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
+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 PageTOCPopover(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;
@@ -20,6 +20,5 @@ export interface FooterProps extends ComponentProps<'div'> {
 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 declare function PageTOC(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 export {};
-//# sourceMappingURL=page-client.d.ts.map
+//# sourceMappingURL=client.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../../../src/layouts/docs/page/client.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EASpB,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AAEzD,OAAO,EACL,KAAK,iBAAiB,EAEvB,MAAM,0BAA0B,CAAC;AAiBlC,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,KAAK,CAAC,2CAqDvB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAqD1B;AA4DD,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAUjE;AAED,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EAAE,KAAK,EACX,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,GAAG;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,2CAiBxD;AAED,KAAK,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,aAAa,GAAG,KAAK,CAAC,CAAC;AAChE,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,KAAK,CAAC;IACxD;;OAEG;IACH,KAAK,CAAC,EAAE;QACN,QAAQ,CAAC,EAAE,IAAI,CAAC;QAChB,IAAI,CAAC,EAAE,IAAI,CAAC;KACb,CAAC;CACH;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CA+B1D;AA8BD,MAAM,MAAM,eAAe,GAAG,iBAAiB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAExE,wBAAgB,cAAc,CAAC,EAC7B,WAAW,EACX,gBAAgB,EAChB,WAAW,EACX,GAAG,KAAK,EACT,EAAE,eAAe,kDA6CjB"}

package/dist/layouts/docs/{page-client.js → page/client.js}

@@ -1,21 +1,42 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useEffect, useEffectEvent, createContext, useMemo, useRef, useState, use, } from 'react';
-import { ChevronDown, ChevronLeft, ChevronRight } from '../../icons.js';
+import { ChevronDown, ChevronLeft, ChevronRight } from '../../../icons.js';
 import Link from 'fumadocs-core/link';
-import { cn } from '../../utils/cn.js';
-import { useI18n } from '../../contexts/i18n.js';
-import { useTreeContext, useTreePath } from '../../contexts/tree.js';
+import { cn } from '../../../utils/cn.js';
+import { useI18n } from '../../../contexts/i18n.js';
+import { useTreeContext, useTreePath } from '../../../contexts/tree.js';
 import { usePathname } from 'fumadocs-core/framework';
 import { getBreadcrumbItemsFromPath, } from 'fumadocs-core/breadcrumb';
-import { useNav } from '../../contexts/layout.js';
-import { isActive } from '../../utils/is-active.js';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '../../components/ui/collapsible.js';
-import { useSidebar } from '../../contexts/sidebar.js';
-import { useTOCItems } from '../../components/layout/toc.js';
+import { isActive } from '../../../utils/is-active.js';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '../../../components/ui/collapsible.js';
+import { useTOCItems } from '../../../components/toc/index.js';
 import { useActiveAnchor } from 'fumadocs-core/toc';
+import { LayoutContext } from '../client.js';
+import { useFooterItems } from '../../../utils/use-footer-items.js';
 const TocPopoverContext = createContext(null);
-export function PageTOCPopoverTrigger(props) {
+export function PageTOCPopover({ className, children, ...rest }) {
+    const ref = useRef(null);
+    const [open, setOpen] = useState(false);
+    const { isNavTransparent } = use(LayoutContext);
+    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);
+        };
+    }, []);
+    return (_jsx(TocPopoverContext, { value: useMemo(() => ({
+            open,
+            setOpen,
+        }), [setOpen, open]), children: _jsx(Collapsible, { open: open, onOpenChange: setOpen, "data-toc-popover": "", className: cn('sticky top-(--fd-docs-row-2) z-10 [grid-area:toc-popover] h-(--fd-toc-popover-height) xl:hidden max-xl:layout:[--fd-toc-popover-height:--spacing(10)]', className), ...rest, children: _jsx("header", { ref: ref, className: cn('border-b backdrop-blur-sm transition-colors', (!isNavTransparent || open) && 'bg-fd-background/80', open && 'shadow-lg'), children: children }) }) }));
+}
+export function PageTOCPopoverTrigger({ className, ...props }) {
     const { text } = useI18n();
     const { open } = use(TocPopoverContext);
     const items = useTOCItems();
@@ -23,7 +44,7 @@ export function PageTOCPopoverTrigger(props) {
     const selected = useMemo(() => items.findIndex((item) => active === item.url.slice(1)), [items, active]);
     const path = useTreePath().at(-1);
     const showItem = selected !== -1 && !open;
-    return (_jsxs(CollapsibleTrigger, { ...props, className: cn('flex w-full h-(--fd-tocnav-height) items-center text-sm text-fd-muted-foreground gap-2.5 px-4 py-2.5 text-start focus-visible:outline-none [&_svg]:size-4 md:px-6', props.className), children: [_jsx(ProgressCircle, { value: (selected + 1) / Math.max(1, items.length), max: 1, className: cn('shrink-0', open && 'text-fd-primary') }), _jsxs("span", { className: "grid flex-1 *:my-auto *:row-start-1 *:col-start-1", children: [_jsx("span", { className: cn('truncate transition-all', open && 'text-fd-foreground', showItem && 'opacity-0 -translate-y-full pointer-events-none'), children: path?.name ?? text.toc }), _jsx("span", { className: cn('truncate transition-all', !showItem && 'opacity-0 translate-y-full pointer-events-none'), children: items[selected]?.title })] }), _jsx(ChevronDown, { className: cn('shrink-0 transition-transform mx-0.5', open && 'rotate-180') })] }));
+    return (_jsxs(CollapsibleTrigger, { className: cn('flex w-full h-10 items-center text-sm text-fd-muted-foreground gap-2.5 px-4 py-2.5 text-start focus-visible:outline-none [&_svg]:size-4 md:px-6', className), "data-toc-popover-trigger": "", ...props, children: [_jsx(ProgressCircle, { value: (selected + 1) / Math.max(1, items.length), max: 1, className: cn('shrink-0', open && 'text-fd-primary') }), _jsxs("span", { className: "grid flex-1 *:my-auto *:row-start-1 *:col-start-1", children: [_jsx("span", { className: cn('truncate transition-all', open && 'text-fd-foreground', showItem && 'opacity-0 -translate-y-full pointer-events-none'), children: path?.name ?? text.toc }), _jsx("span", { className: cn('truncate transition-all', !showItem && 'opacity-0 translate-y-full pointer-events-none'), children: items[selected]?.title })] }), _jsx(ChevronDown, { className: cn('shrink-0 transition-transform mx-0.5', open && 'rotate-180') })] }));
 }
 function clamp(input, min, max) {
     if (input < min)
@@ -47,36 +68,7 @@ function ProgressCircle({ value, strokeWidth = 2, size = 24, min = 0, max = 100,
     return (_jsxs("svg", { role: "progressbar", viewBox: `0 0 ${size} ${size}`, "aria-valuenow": normalizedValue, "aria-valuemin": min, "aria-valuemax": max, ...restSvgProps, children: [_jsx("circle", { ...circleProps, className: "stroke-current/25" }), _jsx("circle", { ...circleProps, stroke: "currentColor", strokeDasharray: circumference, strokeDashoffset: circumference - progress, strokeLinecap: "round", transform: `rotate(-90 ${size / 2} ${size / 2})`, className: "transition-all" })] }));
 }
 export function PageTOCPopoverContent(props) {
-    return (_jsx(CollapsibleContent, { "data-toc-popover": "", ...props, className: cn('flex flex-col px-4 max-h-[50vh] md:px-6', props.className), children: props.children }));
-}
-export function PageTOCPopover(props) {
-    const ref = useRef(null);
-    const [open, setOpen] = useState(false);
-    const { collapsed } = useSidebar();
-    const { isTransparent } = useNav();
-    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);
-        };
-    }, []);
-    return (_jsx(TocPopoverContext, { value: useMemo(() => ({
-            open,
-            setOpen,
-        }), [setOpen, open]), children: _jsx(Collapsible, { open: open, onOpenChange: setOpen, asChild: true, children: _jsx("header", { ref: ref, id: "nd-tocnav", ...props, className: cn('fixed pr-(--removed-body-scroll-bar-size,0) z-10 border-b backdrop-blur-sm transition-colors xl:hidden max-xl:on-root:[--fd-tocnav-height:40px]', (!isTransparent || open) && 'bg-fd-background/80', open && 'shadow-lg', props.className), style: {
-                    ...props.style,
-                    top: 'calc(var(--fd-banner-height) + var(--fd-nav-height))',
-                    insetInlineStart: collapsed
-                        ? '0px'
-                        : 'calc(var(--fd-sidebar-width) + var(--fd-layout-offset))',
-                    insetInlineEnd: 0,
-                }, children: props.children }) }) }));
+    return (_jsx(CollapsibleContent, { "data-toc-popover-content": "", ...props, className: cn('flex flex-col px-4 max-h-[50vh] md:px-6', props.className), children: props.children }));
 }
 export function PageLastUpdate({ date: value, ...props }) {
     const { text } = useI18n();
@@ -87,41 +79,21 @@ export function PageLastUpdate({ date: value, ...props }) {
     }, [value]);
     return (_jsxs("p", { ...props, className: cn('text-sm text-fd-muted-foreground', props.className), children: [text.lastUpdate, " ", date] }));
 }
-function scanNavigationList(tree) {
-    const list = [];
-    tree.forEach((node) => {
-        if (node.type === 'folder') {
-            if (node.index) {
-                list.push(node.index);
-            }
-            list.push(...scanNavigationList(node.children));
-            return;
-        }
-        if (node.type === 'page' && !node.external) {
-            list.push(node);
-        }
-    });
-    return list;
-}
-const listCache = new Map();
 export function PageFooter({ items, ...props }) {
-    const { root } = useTreeContext();
+    const footerList = useFooterItems();
     const pathname = usePathname();
     const { previous, next } = useMemo(() => {
         if (items)
             return items;
-        const cached = listCache.get(root.$id);
-        const list = cached ?? scanNavigationList(root.children);
-        listCache.set(root.$id, list);
-        const idx = list.findIndex((item) => isActive(item.url, pathname, false));
+        const idx = footerList.findIndex((item) => isActive(item.url, pathname, false));
         if (idx === -1)
             return {};
         return {
-            previous: list[idx - 1],
-            next: list[idx + 1],
+            previous: footerList[idx - 1],
+            next: footerList[idx + 1],
         };
-    }, [items, pathname, root]);
-    return (_jsxs("div", { ...props, className: cn('@container grid gap-4 pb-6', previous && next ? 'grid-cols-2' : 'grid-cols-1', props.className), children: [previous ? _jsx(FooterItem, { item: previous, index: 0 }) : null, next ? _jsx(FooterItem, { item: next, index: 1 }) : null] }));
+    }, [footerList, items, pathname]);
+    return (_jsxs("div", { ...props, className: cn('@container grid gap-4', previous && next ? 'grid-cols-2' : 'grid-cols-1', props.className), children: [previous ? _jsx(FooterItem, { item: previous, index: 0 }) : null, next ? _jsx(FooterItem, { item: next, index: 1 }) : null] }));
 }
 function FooterItem({ item, index }) {
     const { text } = useI18n();
@@ -145,12 +117,3 @@ export function PageBreadcrumb({ includeRoot, includeSeparator, includePage, ...
             return (_jsxs(Fragment, { children: [i !== 0 && _jsx(ChevronRight, { className: "size-3.5 shrink-0" }), 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));
         }) }));
 }
-export function PageTOC(props) {
-    const { collapsed } = useSidebar();
-    const offset = collapsed ? '0px' : 'var(--fd-layout-offset)';
-    return (_jsx("div", { id: "nd-toc", ...props, className: cn('fixed bottom-0 pt-12 pb-2 pr-(--removed-body-scroll-bar-size,0) xl:on-root:[--fd-toc-width:286px] max-xl:hidden', props.className), style: {
-            ...props.style,
-            top: 'calc(var(--fd-banner-height) + var(--fd-nav-height))',
-            insetInlineEnd: `max(${offset}, calc(50vw - var(--fd-sidebar-width)/2 - var(--fd-page-width)/2))`,
-        }, children: _jsx("div", { className: "flex h-full w-(--fd-toc-width) max-w-full flex-col pe-4", children: props.children }) }));
-}

package/dist/layouts/docs/page/index.d.ts

@@ -0,0 +1,58 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { type BreadcrumbProps, type FooterProps } from './client.js';
+import type { AnchorProviderProps, TOCItemType } from 'fumadocs-core/toc';
+interface BreadcrumbOptions extends BreadcrumbProps {
+    enabled: boolean;
+    component: ReactNode;
+}
+interface FooterOptions extends FooterProps {
+    enabled: boolean;
+    component: ReactNode;
+}
+export interface DocsPageProps {
+    toc?: TOCItemType[];
+    tableOfContent?: Partial<TableOfContentOptions>;
+    tableOfContentPopover?: Partial<TableOfContentPopoverOptions>;
+    /**
+     * Extend the page to fill all available space
+     *
+     * @defaultValue false
+     */
+    full?: boolean;
+    /**
+     * Replace or disable breadcrumb
+     */
+    breadcrumb?: Partial<BreadcrumbOptions>;
+    /**
+     * Footer navigation, you can disable it by passing `false`
+     */
+    footer?: Partial<FooterOptions>;
+    children?: ReactNode;
+}
+type TableOfContentOptions = Pick<AnchorProviderProps, 'single'> & {
+    /**
+     * Custom content in TOC container, before the main TOC
+     */
+    header?: ReactNode;
+    /**
+     * Custom content in TOC container, after the main TOC
+     */
+    footer?: ReactNode;
+    enabled: boolean;
+    component: ReactNode;
+    /**
+     * @defaultValue 'normal'
+     */
+    style?: 'normal' | 'clerk';
+};
+type TableOfContentPopoverOptions = Omit<TableOfContentOptions, 'single'>;
+export declare function DocsPage({ breadcrumb: { enabled: breadcrumbEnabled, component: breadcrumb, ...breadcrumbProps }, footer, full, tableOfContentPopover: { enabled: tocPopoverEnabled, component: tocPopover, ...tocPopoverOptions }, tableOfContent: { enabled: tocEnabled, component: tocReplace, ...tocOptions }, toc, children, }: DocsPageProps): ReactNode;
+export declare function EditOnGitHub(props: ComponentProps<'a'>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Add typography styles
+ */
+export declare function DocsBody({ children, className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function DocsDescription({ children, className, ...props }: ComponentProps<'p'>): import("react/jsx-runtime").JSX.Element | null;
+export declare function DocsTitle({ children, className, ...props }: ComponentProps<'h1'>): import("react/jsx-runtime").JSX.Element;
+export { PageLastUpdate, PageBreadcrumb } from './client.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/layouts/docs/page/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvD,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,WAAW,EAMjB,MAAM,UAAU,CAAC;AAClB,OAAO,KAAK,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAK1E,UAAU,iBAAkB,SAAQ,eAAe;IACjD,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;CACtB;AAED,UAAU,aAAc,SAAQ,WAAW;IACzC,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,GAAG,CAAC,EAAE,WAAW,EAAE,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;IAChD,qBAAqB,CAAC,EAAE,OAAO,CAAC,4BAA4B,CAAC,CAAC;IAE9D;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAExC;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAEhC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,KAAK,qBAAqB,GAAG,IAAI,CAAC,mBAAmB,EAAE,QAAQ,CAAC,GAAG;IACjE;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC5B,CAAC;AAEF,KAAK,4BAA4B,GAAG,IAAI,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC;AAE1E,wBAAgB,QAAQ,CAAC,EACvB,UAAU,EAAE,EACV,OAAO,EAAE,iBAAwB,EACjC,SAAS,EAAE,UAAU,EACrB,GAAG,eAAe,EACd,EACN,MAAW,EACX,IAAY,EACZ,qBAAqB,EAAE,EACrB,OAAO,EAAE,iBAAiB,EAC1B,SAAS,EAAE,UAAU,EACrB,GAAG,iBAAiB,EAChB,EACN,cAAc,EAAE,EACd,OAAO,EAAE,UAAU,EACnB,SAAS,EAAE,UAAU,EACrB,GAAG,UAAU,EACT,EACN,GAAQ,EACR,QAAQ,GACT,EAAE,aAAa,aAkFf;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,2CAuBtD;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,2CAMvB;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,GAAG,CAAC,kDAYrB;AAED,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,IAAI,CAAC,2CAMtB;AAED,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC"}

package/dist/layouts/docs/page/index.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from '../../../utils/cn.js';
+import { buttonVariants } from '../../../components/ui/button.js';
+import { Edit, Text } from '../../../icons.js';
+import { I18nLabel } from '../../../contexts/i18n.js';
+import { PageBreadcrumb, PageFooter, PageTOCPopover, PageTOCPopoverContent, PageTOCPopoverTrigger, } from './client.js';
+import * as TocDefault from '../../../components/toc/default.js';
+import * as TocClerk from '../../../components/toc/clerk.js';
+import { TOCProvider, TOCScrollArea } from '../../../components/toc/index.js';
+export function DocsPage({ breadcrumb: { enabled: breadcrumbEnabled = true, component: breadcrumb, ...breadcrumbProps } = {}, footer = {}, full = false, tableOfContentPopover: { enabled: tocPopoverEnabled, component: tocPopover, ...tocPopoverOptions } = {}, tableOfContent: { enabled: tocEnabled, component: tocReplace, ...tocOptions } = {}, toc = [], children, }) {
+    // disable TOC on full mode, you can still enable it with `enabled` option.
+    tocEnabled ?? (tocEnabled = !full &&
+        (toc.length > 0 ||
+            tocOptions.footer !== undefined ||
+            tocOptions.header !== undefined));
+    tocPopoverEnabled ?? (tocPopoverEnabled = toc.length > 0 ||
+        tocPopoverOptions.header !== undefined ||
+        tocPopoverOptions.footer !== undefined);
+    let wrapper = (children) => children;
+    if (tocEnabled || tocPopoverEnabled) {
+        wrapper = (children) => (_jsx(TOCProvider, { single: tocOptions.single, toc: toc, children: children }));
+    }
+    return wrapper(_jsxs(_Fragment, { children: [tocPopoverEnabled &&
+                (tocPopover ?? (_jsxs(PageTOCPopover, { children: [_jsx(PageTOCPopoverTrigger, {}), _jsxs(PageTOCPopoverContent, { children: [tocPopoverOptions.header, _jsx(TOCScrollArea, { children: tocPopoverOptions.style === 'clerk' ? (_jsx(TocClerk.TOCItems, {})) : (_jsx(TocDefault.TOCItems, {})) }), tocPopoverOptions.footer] })] }))), _jsxs("article", { id: "nd-page", "data-full": full, className: cn('flex flex-col w-full max-w-[900px] mx-auto [grid-area:main] px-4 py-6 gap-4 md:px-6 md:pt-8 xl:px-8 xl:pt-14', full ? 'max-w-[1200px]' : 'xl:layout:[--fd-toc-width:268px]'), children: [breadcrumbEnabled &&
+                        (breadcrumb ?? _jsx(PageBreadcrumb, { ...breadcrumbProps })), children, footer.enabled !== false &&
+                        (footer.component ?? _jsx(PageFooter, { items: footer.items }))] }), tocEnabled &&
+                (tocReplace ?? (_jsxs("div", { id: "nd-toc", className: "sticky top-(--fd-docs-row-1) h-[calc(var(--fd-docs-height)-var(--fd-docs-row-1))] flex flex-col [grid-area:toc] w-(--fd-toc-width) pt-12 pe-4 pb-2 max-xl:hidden", children: [tocOptions.header, _jsxs("h3", { id: "toc-title", 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(TocClerk.TOCItems, {})) : (_jsx(TocDefault.TOCItems, {})) }), tocOptions.footer] })))] }));
+}
+export function EditOnGitHub(props) {
+    return (_jsx("a", { target: "_blank", rel: "noreferrer noopener", ...props, className: cn(buttonVariants({
+            color: 'secondary',
+            size: 'sm',
+            className: 'gap-1.5 not-prose',
+        }), props.className), children: props.children ?? (_jsxs(_Fragment, { children: [_jsx(Edit, { className: "size-3.5" }), _jsx(I18nLabel, { label: "editOnGithub" })] })) }));
+}
+/**
+ * Add typography styles
+ */
+export function DocsBody({ children, className, ...props }) {
+    return (_jsx("div", { ...props, className: cn('prose flex-1', className), children: children }));
+}
+export function DocsDescription({ children, className, ...props }) {
+    // Don't render if no description provided
+    if (children === undefined)
+        return null;
+    return (_jsx("p", { ...props, className: cn('mb-8 text-lg text-fd-muted-foreground', className), children: children }));
+}
+export function DocsTitle({ children, className, ...props }) {
+    return (_jsx("h1", { ...props, className: cn('text-[1.75em] font-semibold', className), children: children }));
+}
+export { PageLastUpdate, PageBreadcrumb } from './client.js';

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

@@ -0,0 +1,17 @@
+import * as Base from '../../components/sidebar/base.js';
+import type { ComponentProps } from 'react';
+export declare const Sidebar: typeof Base.SidebarProvider, SidebarFolder: typeof Base.SidebarFolder, SidebarCollapseTrigger: typeof Base.SidebarCollapseTrigger, SidebarViewport: typeof Base.SidebarViewport, SidebarTrigger: typeof Base.SidebarTrigger;
+export declare function SidebarContent({ className, children, ...props }: ComponentProps<'aside'>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarDrawer({ children, className, ...props }: ComponentProps<typeof Base.SidebarDrawerContent>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarSeparator({ className, style, children, ...props }: ComponentProps<'p'>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarItem({ className, style, children, ...props }: ComponentProps<typeof Base.SidebarItem>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarFolderTrigger({ className, style, ...props }: ComponentProps<typeof Base.SidebarFolderTrigger>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarFolderLink({ className, style, ...props }: ComponentProps<typeof Base.SidebarFolderLink>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarFolderContent({ className, children, ...props }: ComponentProps<typeof Base.SidebarFolderContent>): import("react/jsx-runtime").JSX.Element;
+export declare const SidebarPageTree: (components: Partial<import("../../components/sidebar/page-tree.js").SidebarPageTreeComponents>) => import("react/jsx-runtime").JSX.Element;
+export declare const SidebarLinkItem: ({ item, ...props }: import("react").HTMLAttributes<HTMLElement> & {
+    item: Exclude<import("../shared/index.js").LinkItemType, {
+        type: "icon";
+    }>;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=sidebar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/sidebar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,IAAI,MAAM,2BAA2B,CAAC;AAElD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAoB5C,eAAO,MACY,OAAO,+BACxB,aAAa,6BACb,sBAAsB,sCACtB,eAAe,+BACf,cAAc,4BACR,CAAC;AAET,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,CAAC,2CAoBzB;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,oBAAoB,CAAC,2CAelD;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,GAAG,CAAC,2CAerB;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,WAAW,CAAC,2CAezC;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,oBAAoB,CAAC,2CAelD;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,iBAAiB,CAAC,2CAe/C;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,oBAAoB,CAAC,2CAkBlD;AAED,eAAO,MAAM,eAAe,sIAO1B,CAAC;AAEH,eAAO,MAAM,eAAe;;;;6CAM1B,CAAC"}

package/dist/layouts/docs/sidebar.js

@@ -0,0 +1,82 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Base from '../../components/sidebar/base.js';
+import { cn } from '../../utils/cn.js';
+import { cva } from 'class-variance-authority';
+import { createPageTreeRenderer } from '../../components/sidebar/page-tree.js';
+import { createLinkItemRenderer } from '../../components/sidebar/link-item.js';
+const itemVariants = cva('relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none [&_svg]:size-4 [&_svg]:shrink-0', {
+    variants: {
+        variant: {
+            link: 'data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors',
+        },
+    },
+});
+function getItemOffset(depth) {
+    return `calc(${2 + 3 * depth} * var(--spacing))`;
+}
+export const { SidebarProvider: Sidebar, SidebarFolder, SidebarCollapseTrigger, SidebarViewport, SidebarTrigger, } = Base;
+export function SidebarContent({ className, children, ...props }) {
+    return (_jsx(Base.SidebarContent, { aside: ({ collapsed, hovered }) => ({
+            className: cn('sticky top-(--fd-docs-row-1) [grid-area:sidebar] h-[calc(var(--fd-docs-height)-var(--fd-docs-row-1))] flex flex-col items-end z-20 bg-fd-card text-sm border-e *:w-(--fd-sidebar-width) md:layout:[--fd-sidebar-width:268px] max-md:hidden', collapsed && [
+                'fixed start-0 inset-y-2 h-auto rounded-xl border transition-[opacity,translate] duration-200',
+                hovered
+                    ? 'z-50 shadow-lg translate-x-2 rtl:-translate-x-2'
+                    : 'opacity-0 -translate-x-[calc(100%-16px)] rtl:translate-x-[calc(100%-16px)]',
+            ], className),
+            ...props,
+        }), children: children }));
+}
+export function SidebarDrawer({ children, className, ...props }) {
+    return (_jsxs(_Fragment, { children: [_jsx(Base.SidebarDrawerOverlay, { className: "fixed z-40 inset-0 backdrop-blur-xs data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out" }), _jsx(Base.SidebarDrawerContent, { className: cn('fixed text-[0.9375rem] flex flex-col shadow-lg border-s end-0 inset-y-0 w-[85%] max-w-[380px] z-40 bg-fd-background data-[state=open]:animate-fd-sidebar-in data-[state=closed]:animate-fd-sidebar-out', className), ...props, children: children })] }));
+}
+export function SidebarSeparator({ className, style, children, ...props }) {
+    const depth = Base.useFolderDepth();
+    return (_jsx(Base.SidebarSeparator, { className: cn('[&_svg]:size-4 [&_svg]:shrink-0', className), style: {
+            paddingInlineStart: getItemOffset(depth),
+            ...style,
+        }, ...props, children: children }));
+}
+export function SidebarItem({ className, style, children, ...props }) {
+    const depth = Base.useFolderDepth();
+    return (_jsx(Base.SidebarItem, { className: cn(itemVariants({ variant: 'link' }), className), style: {
+            paddingInlineStart: getItemOffset(depth),
+            ...style,
+        }, ...props, children: children }));
+}
+export function SidebarFolderTrigger({ className, style, ...props }) {
+    const depth = Base.useFolderDepth();
+    return (_jsx(Base.SidebarFolderTrigger, { className: cn(itemVariants(), 'w-full', className), style: {
+            paddingInlineStart: getItemOffset(depth - 1),
+            ...style,
+        }, ...props, children: props.children }));
+}
+export function SidebarFolderLink({ className, style, ...props }) {
+    const depth = Base.useFolderDepth();
+    return (_jsx(Base.SidebarFolderLink, { className: cn(itemVariants({ variant: 'link' }), 'w-full', className), style: {
+            paddingInlineStart: getItemOffset(depth - 1),
+            ...style,
+        }, ...props, children: props.children }));
+}
+export function SidebarFolderContent({ className, children, ...props }) {
+    const depth = Base.useFolderDepth();
+    return (_jsx(Base.SidebarFolderContent, { className: cn('relative', depth === 1 && [
+            "before:content-[''] before:absolute before:w-px before:inset-y-1 before:bg-fd-border before:start-2.5",
+            "**:data-[active=true]:before:content-[''] **:data-[active=true]:before:bg-fd-primary **:data-[active=true]:before:absolute **:data-[active=true]:before:w-px **:data-[active=true]:before:inset-y-2.5 **:data-[active=true]:before:start-2.5",
+        ], className), ...props, children: children }));
+}
+export const SidebarPageTree = createPageTreeRenderer({
+    SidebarFolder,
+    SidebarFolderContent,
+    SidebarFolderLink,
+    SidebarFolderTrigger,
+    SidebarItem,
+    SidebarSeparator,
+});
+export const SidebarLinkItem = createLinkItemRenderer({
+    SidebarFolder,
+    SidebarFolderContent,
+    SidebarFolderLink,
+    SidebarFolderTrigger,
+    SidebarItem,
+});

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

@@ -1,24 +1,6 @@
-import { type ComponentProps } from 'react';
-import { type LinkItemType } from '../../layouts/shared/index.js';
-import { NavigationMenuContent, NavigationMenuItem, NavigationMenuTrigger } from '../../components/ui/navigation-menu.js';
+import type { HomeLayoutProps } from './index.js';
 export declare const navItemVariants: (props?: ({
     variant?: "button" | "main" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare function Navbar(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-export { NavigationMenuItem };
-export declare function NavigationMenuLinkItem({ item, ...props }: {
-    item: LinkItemType;
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function MobileNavigationMenuLinkItem({ item, ...props }: {
-    item: LinkItemType;
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function MobileNavigationMenuTrigger({ enableHover, ...props }: ComponentProps<typeof NavigationMenuTrigger> & {
-    /**
-     * Enable hover to trigger
-     */
-    enableHover?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function MobileNavigationMenuContent(props: ComponentProps<typeof NavigationMenuContent>): import("react/jsx-runtime").JSX.Element;
+export declare function Header({ nav, i18n, links, githubUrl, themeSwitch, searchToggle, }: HomeLayoutProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=client.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../../src/layouts/home/client.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAsB,MAAM,OAAO,CAAC;AAIhE,OAAO,EAAgB,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACnE,OAAO,EAEL,qBAAqB,EACrB,kBAAkB,EAGlB,qBAAqB,EAEtB,MAAM,iCAAiC,CAAC;AAIzC,eAAO,MAAM,eAAe;;8EAiB1B,CAAC;AAEH,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CA2BlD;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAE9B,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,GAAG,KAAK,EACT,EAAE;IACD,IAAI,EAAE,YAAY,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CA0EA;AAED,wBAAgB,4BAA4B,CAAC,EAC3C,IAAI,EACJ,GAAG,KAAK,EACT,EAAE;IACD,IAAI,EAAE,YAAY,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAyDA;AAED,wBAAgB,2BAA2B,CAAC,EAC1C,WAAmB,EACnB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,qBAAqB,CAAC,GAAG;IAChD;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,2CASA;AAED,wBAAgB,2BAA2B,CACzC,KAAK,EAAE,cAAc,CAAC,OAAO,qBAAqB,CAAC,2CAUpD"}
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../../src/layouts/home/client.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,GAAG,CAAC;AAazC,eAAO,MAAM,eAAe;;8EAiB1B,CAAC;AAEH,wBAAgB,MAAM,CAAC,EACrB,GAAQ,EACR,IAAY,EACZ,KAAK,EACL,SAAS,EACT,WAAgB,EAChB,YAAiB,GAClB,EAAE,eAAe,2CA0HjB"}