fumadocs-ui 15.2.6 → 15.2.7

package/css/shiki.css

@@ -1,8 +1,8 @@
-.fd-codeblock code span {
+.shiki code span {
   color: var(--shiki-light);
 }
 
-.dark .fd-codeblock code span {
+.dark .shiki code span {
   color: var(--shiki-dark);
 }
 
@@ -11,37 +11,37 @@
   font-size: 13px;
 }
 
-.fd-codeblock code .diff.remove {
+.shiki code .diff.remove {
   background-color: var(--fd-diff-remove-color);
   opacity: 0.7;
 }
 
-.fd-codeblock code .diff::before {
+.shiki code .diff::before {
   position: absolute;
   left: 6px;
 }
 
-.fd-codeblock code .diff.remove::before {
+.shiki code .diff.remove::before {
   content: '-';
   color: var(--fd-diff-remove-symbol-color);
 }
 
-.fd-codeblock code .diff.add {
+.shiki code .diff.add {
   background-color: var(--fd-diff-add-color);
 }
 
-.fd-codeblock code .diff.add::before {
+.shiki code .diff.add::before {
   content: '+';
   color: var(--fd-diff-add-symbol-color);
 }
 
-.fd-codeblock code .diff {
+.shiki code .diff {
   margin: 0 -16px;
   padding: 0 16px;
   position: relative;
 }
 
-.fd-codeblock .highlighted {
+.shiki .highlighted {
   margin: 0 -16px;
   padding: 0 16px;
   background-color: color-mix(
@@ -51,7 +51,7 @@
   );
 }
 
-.fd-codeblock .highlighted-word {
+.shiki .highlighted-word {
   padding: 1px 2px;
   margin: -1px -3px;
   border: 1px solid

package/dist/components/layout/search-toggle.js

@@ -14,7 +14,7 @@ export function SearchToggle({ hideIfDisabled, size = 'icon', color = 'ghost', .
             color,
         }), props.className), "data-search": "", "aria-label": "Open Search", onClick: () => {
             setOpenSearch(true);
-        }, children: _jsx(SearchIcon, {}) }));
+        }, children: _jsx(SearchIcon, { className: "p-px" }) }));
 }
 export function LargeSearchToggle({ hideIfDisabled, ...props }) {
     const { enabled, hotKey, setOpenSearch } = useSearchContext();

package/dist/components/layout/toc.d.ts

@@ -1,8 +1,6 @@
 import type { TOCItemType } from 'fumadocs-core/server';
 import { type ComponentProps, type HTMLAttributes, type ReactNode } from 'react';
 import { ScrollArea } from '../ui/scroll-area.js';
-import type { PopoverContentProps, PopoverTriggerProps } from '@radix-ui/react-popover';
-import { Collapsible } from '../../components/ui/collapsible.js';
 export interface TOCProps {
     /**
      * Custom content in TOC container, before the main TOC
@@ -22,13 +20,4 @@ export declare function TOCScrollArea({ isMenu, ...props }: ComponentProps<typeo
 export declare function TOCItems({ items }: {
     items: TOCItemType[];
 }): import("react/jsx-runtime").JSX.Element;
-type MakeRequired<T, K extends keyof T> = T & {
-    [P in K]-?: T[P];
-};
-export declare function TocPopover({ open, onOpenChange, ref: _ref, ...props }: MakeRequired<ComponentProps<typeof Collapsible>, 'open' | 'onOpenChange'>): import("react/jsx-runtime").JSX.Element;
-export declare function TocPopoverTrigger({ items, ...props }: PopoverTriggerProps & {
-    items: TOCItemType[];
-}): import("react/jsx-runtime").JSX.Element;
-export declare function TocPopoverContent(props: PopoverContentProps): import("react/jsx-runtime").JSX.Element;
-export {};
 //# sourceMappingURL=toc.d.ts.map

package/dist/components/layout/toc.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toc.d.ts","sourceRoot":"","sources":["../../../src/components/layout/toc.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,cAAc,EACnB,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,UAAU,EAAkB,MAAM,mBAAmB,CAAC;AAC/D,OAAO,KAAK,EACV,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EACL,WAAW,EAGZ,MAAM,6BAA6B,CAAC;AAErC,MAAM,WAAW,QAAQ;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,GAAG,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAyBxD;AAED,wBAAgB,aAAa,4CAQ5B;AAED,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,UAAU,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,2CAqB1D;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,WAAW,EAAE,CAAA;CAAE,2CAqB3D;AAkBD,KAAK,YAAY,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,CAAC,GAAG;KAAG,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAE,CAAC;AASnE,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,GAAG,EAAE,IAAI,EACT,GAAG,KAAK,EACT,EAAE,YAAY,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC,2CAgB3E;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,GAAG,KAAK,EACT,EAAE,mBAAmB,GAAG;IAAE,KAAK,EAAE,WAAW,EAAE,CAAA;CAAE,2CAmChD;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,mBAAmB,2CAU3D"}
+{"version":3,"file":"toc.d.ts","sourceRoot":"","sources":["../../../src/components/layout/toc.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,UAAU,EAAkB,MAAM,mBAAmB,CAAC;AAG/D,MAAM,WAAW,QAAQ;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,GAAG,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAyBxD;AAED,wBAAgB,aAAa,4CAQ5B;AAED,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,UAAU,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,2CAsB1D;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,WAAW,EAAE,CAAA;CAAE,2CAqB3D"}

package/dist/components/layout/toc.js

@@ -1,14 +1,12 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as Primitive from 'fumadocs-core/toc';
-import { createContext, use, useMemo, useRef, } from 'react';
+import { useRef, } from 'react';
 import { cn } from '../../utils/cn.js';
 import { useI18n } from '../../contexts/i18n.js';
 import { TocThumb } from '../../components/layout/toc-thumb.js';
 import { ScrollArea, ScrollViewport } from '../ui/scroll-area.js';
-import { ChevronRight, Text } from 'lucide-react';
 import { usePageStyles } from '../../contexts/layout.js';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '../../components/ui/collapsible.js';
 export function Toc(props) {
     const { toc } = usePageStyles();
     return (_jsx("div", { id: "nd-toc", ...props, className: cn('sticky top-[calc(var(--fd-banner-height)+var(--fd-nav-height))] h-(--fd-toc-height) pb-2 pt-12', toc, props.className), style: {
@@ -22,34 +20,15 @@ export function TocItemsEmpty() {
 }
 export function TOCScrollArea({ isMenu, ...props }) {
     const viewRef = useRef(null);
-    return (_jsx(ScrollArea, { ...props, className: cn('flex flex-col ps-px', props.className), children: _jsx(Primitive.ScrollProvider, { containerRef: viewRef, children: _jsx(ScrollViewport, { className: cn('relative min-h-0 text-sm', isMenu && 'mt-2 mb-4 mx-4 md:mx-6'), ref: viewRef, children: props.children }) }) }));
+    return (_jsx(ScrollArea, { ...props, className: cn('flex flex-col ps-px', props.className), children: _jsx(ScrollViewport, { ref: viewRef, className: cn('min-h-0 text-sm', isMenu &&
+                '[mask-image:linear-gradient(to_bottom,transparent,white_16px,white_calc(100%-16px),transparent)] px-4 md:px-6 py-2'), children: _jsx(Primitive.ScrollProvider, { containerRef: viewRef, children: props.children }) }) }));
 }
 export function TOCItems({ items }) {
     const containerRef = useRef(null);
     if (items.length === 0)
         return _jsx(TocItemsEmpty, {});
-    return (_jsxs(_Fragment, { children: [_jsx(TocThumb, { containerRef: containerRef, className: "absolute start-0 mt-(--fd-top) h-(--fd-height) w-px bg-fd-primary transition-all" }), _jsx("div", { ref: containerRef, className: "flex flex-col border-s border-fd-foreground/10", children: items.map((item) => (_jsx(TOCItem, { item: item }, item.url))) })] }));
+    return (_jsxs("div", { className: "relative", children: [_jsx(TocThumb, { containerRef: containerRef, className: "absolute start-0 mt-(--fd-top) h-(--fd-height) w-px bg-fd-primary transition-all" }), _jsx("div", { ref: containerRef, className: "flex flex-col border-s border-fd-foreground/10", children: items.map((item) => (_jsx(TOCItem, { item: item }, item.url))) })] }));
 }
 function TOCItem({ item }) {
     return (_jsx(Primitive.TOCItem, { href: item.url, className: cn('prose py-1.5 text-sm text-fd-muted-foreground transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0 data-[active=true]:text-fd-primary', item.depth <= 2 && 'ps-3', item.depth === 3 && 'ps-6', item.depth >= 4 && 'ps-8'), children: item.title }));
 }
-const Context = createContext(null);
-const TocProvider = Context.Provider || Context;
-export function TocPopover({ open, onOpenChange, ref: _ref, ...props }) {
-    return (_jsx(Collapsible, { open: open, onOpenChange: onOpenChange, ...props, children: _jsx(TocProvider, { value: useMemo(() => ({
-                open,
-                setOpen: onOpenChange,
-            }), [onOpenChange, open]), children: props.children }) }));
-}
-export function TocPopoverTrigger({ items, ...props }) {
-    const { text } = useI18n();
-    const { open } = use(Context);
-    const active = Primitive.useActiveAnchor();
-    const current = useMemo(() => {
-        return items.find((item) => active === item.url.slice(1))?.title;
-    }, [items, active]);
-    return (_jsxs(CollapsibleTrigger, { ...props, className: cn('inline-flex items-center text-sm gap-2 text-nowrap px-4 py-2.5 text-start md:px-6 focus-visible:outline-none', props.className), children: [_jsx(Text, { className: "size-4 shrink-0" }), text.toc, _jsx(ChevronRight, { className: cn('size-4 shrink-0 text-fd-muted-foreground transition-all', !current && 'opacity-0', open ? 'rotate-90' : '-ms-1.5') }), _jsx("span", { className: cn('truncate text-fd-muted-foreground transition-opacity -ms-1.5', (!current || open) && 'opacity-0'), children: current })] }));
-}
-export function TocPopoverContent(props) {
-    return (_jsx(CollapsibleContent, { "data-toc-popover": "", className: "flex flex-col max-h-[50vh]", ...props, children: props.children }));
-}

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

@@ -16,12 +16,6 @@ export interface SidebarOptions extends SidebarProps {
     tabs?: Option[] | GetSidebarTabsOptions | false;
     banner?: ReactNode;
     footer?: ReactNode;
-    /**
-     * Hide search trigger. You can also disable search for the entire site from `<RootProvider />`.
-     *
-     * @defaultValue false
-     */
-    hideSearch?: boolean;
 }
 export declare function SidebarLinkItem({ item, ...props }: {
     item: LinkItemType;

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

@@ -1 +1 @@
-{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EACL,KAAK,iBAAiB,EAMtB,KAAK,YAAY,EAClB,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,0BAA0B,CAAC;AAElC,eAAO,MAAM,eAAe;;CAE3B,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,YAAY;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAExC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,qBAAqB,GAAG,KAAK,CAAC;IAEhD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,GAAG,KAAK,EACT,EAAE;IACD,IAAI,EAAE,YAAY,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAmCA;AAED,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,cAAc,CAAC,MAAM,CAAC,EAC/B,IAAI,EAAE,QAAQ,CAAC,IAAI,wBASpB"}
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EACL,KAAK,iBAAiB,EAMtB,KAAK,YAAY,EAClB,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,0BAA0B,CAAC;AAElC,eAAO,MAAM,eAAe;;CAE3B,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,YAAY;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAExC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,qBAAqB,GAAG,KAAK,CAAC;IAEhD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,GAAG,KAAK,EACT,EAAE;IACD,IAAI,EAAE,YAAY,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAmCA;AAED,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,cAAc,CAAC,MAAM,CAAC,EAC/B,IAAI,EAAE,QAAQ,CAAC,IAAI,wBASpB"}

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,EAAE,KAAK,oBAAoB,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AASvE,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,2CAiBxD;AAED,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,2CAkB/C;AAED,wBAAgB,kBAAkB,wDAoBjC"}
+{"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;AASvE,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,2CAiBxD;AAED,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,2CAkB/C;AAED,wBAAgB,kBAAkB,wDAyBjC"}

package/dist/layouts/docs-client.js

@@ -11,7 +11,7 @@ import { SearchToggle } from '../components/layout/search-toggle.js';
 export function Navbar(props) {
     const { open } = useSidebar();
     const { isTransparent } = useNav();
-    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 }));
+    return (_jsx("header", { id: "nd-subnav", ...props, className: cn('sticky top-(--fd-banner-height) z-30 flex h-14 items-center px-4 border-b border-fd-foreground/10 transition-colors backdrop-blur-sm md:px-6', (!isTransparent || open) && 'bg-fd-background/80', props.className), children: props.children }));
 }
 export function NavbarSidebarTrigger(props) {
     const { open } = useSidebar();
@@ -24,7 +24,9 @@ export function CollapsibleControl() {
     const { collapsed } = useSidebar();
     if (!collapsed)
         return;
-    return (_jsxs("div", { className: "fixed flex flex-row items-center animate-fd-fade-in rounded-xl p-0.5 border bg-fd-muted text-fd-muted-foreground z-10 top-12 shadow-md max-md:hidden xl:top-4 xl:start-4 max-xl:end-4", children: [_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
+    return (_jsxs("div", { className: "fixed flex flex-row animate-fd-fade-in rounded-xl p-0.5 border bg-fd-muted text-fd-muted-foreground z-10 xl:start-4 max-xl:end-4", style: {
+            top: 'calc(var(--fd-banner-height) + var(--fd-tocnav-height) + var(--spacing) * 4)',
+        }, children: [_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
                     color: 'ghost',
                     size: 'icon-sm',
                 }), 'rounded-lg'), children: _jsx(SidebarIcon, {}) }), _jsx(SearchToggle, { size: "icon-sm", className: "rounded-lg" })] }));

package/dist/layouts/docs.d.ts

@@ -15,9 +15,8 @@ export interface DocsLayoutProps extends BaseLayoutProps {
      */
     containerProps?: HTMLAttributes<HTMLDivElement>;
 }
-export declare function DocsLayout({ nav: { enabled: navEnabled, component: navReplace, transparentMode, ...nav }, themeSwitch, sidebar, i18n, children, ...props }: DocsLayoutProps): ReactNode;
-export declare function DocsLayoutSidebar({ collapsible, components, tabs: tabOptions, hideSearch, tree, nav, links, footer, banner, ...props }: Partial<SidebarOptions> & {
-    tree: PageTree.Root;
+export declare function DocsLayout({ nav: { transparentMode, ...nav }, searchToggle, disableThemeSwitch, themeSwitch, sidebar: { tabs: tabOptions, ...sidebar }, i18n, children, ...props }: DocsLayoutProps): ReactNode;
+export declare function DocsLayoutSidebar({ collapsible, components, nav, links, footer, banner, ...props }: Omit<SidebarOptions, 'tabs'> & {
     links?: LinkItemType[];
     nav?: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;

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,EAAW,MAAM,OAAO,CAAC;AAcrE,OAAO,EACL,KAAK,YAAY,EAEjB,KAAK,YAAY,EAClB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,UAAU,CAAC;AAK1D,OAAO,EACL,kBAAkB,EAClB,MAAM,EACN,oBAAoB,EACrB,MAAM,uBAAuB,CAAC;AAO/B,OAAO,EAIL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAQ/B,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IAEpB,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG;QAClC,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,SAAS,CAAC,EAAE,SAAS,CAAC;KACvB,CAAC;IAEF;;OAEG;IACH,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,WAAW,EACX,OAAY,EACZ,IAAY,EACZ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,GAAG,SAAS,CAkF7B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,WAAkB,EAClB,UAAU,EACV,IAAI,EAAE,UAAU,EAChB,UAAU,EACV,IAAI,EACJ,GAAG,EACH,KAAU,EACV,MAAM,EACN,MAAM,EACN,GAAG,KAAK,EACT,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG;IAC3B,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,GAAG,CAAC,EAAE,SAAS,CAAC;CACjB,2CAwDA;AAED,wBAAgB,uBAAuB,CAAC,EACtC,IAAI,EACJ,WAAW,EACX,KAAU,GACX,EAAE;IACD,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC;CAC9C,kDAiCA;AAED,OAAO,EAAE,kBAAkB,EAAE,MAAM,EAAE,oBAAoB,EAAE,KAAK,YAAY,EAAE,CAAC;AAC/E,OAAO,EAAE,yBAAyB,EAAE,MAAM,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,EAAW,MAAM,OAAO,CAAC;AAcrE,OAAO,EACL,KAAK,YAAY,EAEjB,KAAK,YAAY,EAClB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,UAAU,CAAC;AAK1D,OAAO,EACL,kBAAkB,EAClB,MAAM,EACN,oBAAoB,EACrB,MAAM,uBAAuB,CAAC;AAO/B,OAAO,EAIL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAQ/B,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IAEpB,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG;QAClC,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,SAAS,CAAC,EAAE,SAAS,CAAC;KACvB,CAAC;IAEF;;OAEG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,wBAAgB,UAAU,CAAC,EACzB,GAAG,EAAE,EAAE,eAAe,EAAE,GAAG,GAAG,EAAO,EACrC,YAAY,EACZ,kBAA0B,EAC1B,WAA8C,EAC9C,OAAO,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,OAAO,EAAO,EAC9C,IAAY,EACZ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,GAAG,SAAS,CAoG7B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,WAAkB,EAClB,UAAU,EACV,GAAG,EACH,KAAU,EACV,MAAM,EACN,MAAM,EACN,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,GAAG;IAChC,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,GAAG,CAAC,EAAE,SAAS,CAAC;CACjB,2CA2CA;AAED,wBAAgB,uBAAuB,CAAC,EACtC,IAAI,EACJ,WAAW,EACX,KAAU,GACX,EAAE;IACD,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC;CAC9C,kDAiCA;AAED,OAAO,EAAE,kBAAkB,EAAE,MAAM,EAAE,oBAAoB,EAAE,KAAK,YAAY,EAAE,CAAC;AAC/E,OAAO,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAC"}

package/dist/layouts/docs.js

@@ -4,7 +4,7 @@ import { Languages, SidebarIcon } 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 '../components/layout/sidebar.js';
-import { replaceOrDefault } from '../layouts/shared.js';
+import { slot, slots } from '../layouts/shared.js';
 import { BaseLinkItem, } from '../layouts/links.js';
 import { RootToggle } from '../components/layout/root-toggle.js';
 import { getLinks } from './shared.js';
@@ -16,27 +16,27 @@ import { LargeSearchToggle, SearchToggle, } from '../components/layout/search-to
 import { getSidebarTabsFromOptions, layoutVariables, SidebarLinkItem, } from '../layouts/docs/shared.js';
 import { StylesProvider, NavProvider, } from '../contexts/layout.js';
 import Link from 'fumadocs-core/link';
-export function DocsLayout({ nav: { enabled: navEnabled = true, component: navReplace, transparentMode, ...nav } = {}, themeSwitch, sidebar = {}, i18n = false, children, ...props }) {
+export function DocsLayout({ nav: { transparentMode, ...nav } = {}, searchToggle, disableThemeSwitch = false, themeSwitch = { enabled: !disableThemeSwitch }, sidebar: { tabs: tabOptions, ...sidebar } = {}, i18n = false, children, ...props }) {
+    const tabs = useMemo(() => getSidebarTabsFromOptions(tabOptions, props.tree) ?? [], [tabOptions, props.tree]);
     const links = getLinks(props.links ?? [], props.githubUrl);
-    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
+    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]', !nav.component && nav.enabled !== false
         ? '[--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(Link, { href: nav.url ?? '/', className: "inline-flex items-center gap-2.5 font-semibold", children: 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: {
+    return (_jsx(TreeContextProvider, { tree: props.tree, children: _jsxs(NavProvider, { transparentMode: transparentMode, children: [slot(nav, _jsxs(Navbar, { className: "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 flex-1 flex-row items-center gap-1", children: nav.children }), slots('sm', searchToggle, _jsx(SearchToggle, { hideIfDisabled: true })), _jsx(NavbarSidebarTrigger, { className: "-me-2 md:hidden" })] })), _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: [replaceOrDefault(sidebar, _jsx(DocsLayoutSidebar, { tree: props.tree, ...sidebar, links: links, nav: _jsxs(_Fragment, { children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex text-[15px] items-center gap-2.5 font-medium", children: nav.title }), nav.children] }), footer: _jsxs(_Fragment, { children: [_jsx(DocsLayoutSidebarFooter, { links: links.filter((item) => item.type === 'icon'), i18n: i18n, themeSwitch: themeSwitch }), sidebar.footer] }) })), _jsx(StylesProvider, { ...pageStyles, children: children })] })] }) }));
+                    }, children: [slot(sidebar, _jsx(DocsLayoutSidebar, { ...sidebar, links: links, nav: _jsxs(_Fragment, { children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex text-[15px] items-center gap-2.5 font-medium", children: nav.title }), nav.children] }), banner: _jsxs(_Fragment, { children: [tabs.length > 0 ? (_jsx(RootToggle, { options: tabs, className: "-mx-2" })) : null, slots('lg', searchToggle, _jsx(LargeSearchToggle, { hideIfDisabled: true, className: "rounded-lg max-md:hidden" })), sidebar.banner] }), footer: _jsxs(_Fragment, { children: [_jsx(DocsLayoutSidebarFooter, { links: links.filter((item) => item.type === 'icon'), i18n: i18n, themeSwitch: themeSwitch }), sidebar.footer] }) })), _jsx(StylesProvider, { ...pageStyles, children: children })] })] }) }));
 }
-export function DocsLayoutSidebar({ collapsible = true, components, tabs: tabOptions, hideSearch, tree, nav, links = [], footer, banner, ...props }) {
-    const tabs = useMemo(() => getSidebarTabsFromOptions(tabOptions, tree) ?? [], [tabOptions, tree]);
+export function DocsLayoutSidebar({ collapsible = true, components, nav, links = [], footer, banner, ...props }) {
     const Aside = collapsible ? CollapsibleSidebar : Sidebar;
     return (_jsxs(_Fragment, { children: [collapsible ? _jsx(CollapsibleControl, {}) : null, _jsxs(Aside, { ...props, className: cn('md:ps-(--fd-layout-offset)', props.className), children: [_jsxs(SidebarHeader, { children: [_jsxs("div", { className: "flex flex-row pt-1 max-md:hidden", children: [nav, collapsible && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
                                             color: 'ghost',
                                             size: 'icon-sm',
-                                        }), 'ms-auto mb-auto text-fd-muted-foreground max-md:hidden'), children: _jsx(SidebarIcon, {}) }))] }), banner, tabs.length > 0 ? (_jsx(RootToggle, { options: tabs, className: "-mx-2" })) : null, !hideSearch ? (_jsx(LargeSearchToggle, { hideIfDisabled: true, className: "rounded-lg max-md:hidden" })) : null] }), _jsxs(SidebarViewport, { children: [_jsx("div", { className: "mb-4 empty:hidden", children: links
+                                        }), 'ms-auto mb-auto text-fd-muted-foreground max-md:hidden'), children: _jsx(SidebarIcon, {}) }))] }), banner] }), _jsxs(SidebarViewport, { children: [_jsx("div", { className: "mb-4 empty:hidden", children: links
                                     .filter((v) => v.type !== 'icon')
                                     .map((item, i) => (_jsx(SidebarLinkItem, { item: item }, i))) }), _jsx(SidebarPageTree, { components: components })] }), _jsx(SidebarFooter, { children: footer })] })] }));
 }
@@ -44,7 +44,7 @@ export function DocsLayoutSidebarFooter({ i18n, themeSwitch, links = [], }) {
     // empty footer items
     if (links.length === 0 && !i18n && themeSwitch?.enabled === false)
         return null;
-    return (_jsxs("div", { className: "flex flex-row items-center", children: [links.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, replaceOrDefault(themeSwitch, _jsx(ThemeToggle, { className: "p-0", mode: themeSwitch?.mode }))] }));
+    return (_jsxs("div", { className: "flex flex-row items-center", children: [links.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, slot(themeSwitch, _jsx(ThemeToggle, { className: "p-0", mode: themeSwitch?.mode }))] }));
 }
 export { CollapsibleControl, Navbar, NavbarSidebarTrigger };
 export { getSidebarTabsFromOptions } from './docs/shared.js';

package/dist/layouts/home.d.ts

@@ -1,7 +1,7 @@
 import { type HTMLAttributes } from 'react';
 import { type NavOptions } from '../layouts/shared.js';
 import { type BaseLayoutProps } from './shared.js';
-export interface HomeLayoutProps extends BaseLayoutProps, HTMLAttributes<HTMLElement> {
+export interface HomeLayoutProps extends BaseLayoutProps {
     nav?: Partial<NavOptions & {
         /**
          * Open mobile menu when hovering the trigger
@@ -9,5 +9,6 @@ export interface HomeLayoutProps extends BaseLayoutProps, HTMLAttributes<HTMLEle
         enableHoverToOpen?: boolean;
     }>;
 }
-export declare function HomeLayout(props: HomeLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function HomeLayout(props: HomeLayoutProps & HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
+export declare function Header({ nav, i18n, links, githubUrl, themeSwitch, searchToggle, }: HomeLayoutProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=home.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"home.d.ts","sourceRoot":"","sources":["../../src/layouts/home.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,KAAK,UAAU,EAAoB,MAAM,kBAAkB,CAAC;AAErE,OAAO,EAAY,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AA6B1D,MAAM,WAAW,eACf,SAAQ,eAAe,EACrB,cAAc,CAAC,WAAW,CAAC;IAC7B,GAAG,CAAC,EAAE,OAAO,CACX,UAAU,GAAG;QACX;;WAEG;QACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;KAC7B,CACF,CAAC;CACH;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CA2BhD"}
+{"version":3,"file":"home.d.ts","sourceRoot":"","sources":["../../src/layouts/home.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAAW,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,KAAK,UAAU,EAAe,MAAM,kBAAkB,CAAC;AAEhE,OAAO,EAAY,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AA6B1D,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,GAAG,CAAC,EAAE,OAAO,CACX,UAAU,GAAG;QACX;;WAEG;QACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;KAC7B,CACF,CAAC;CACH;AAED,wBAAgB,UAAU,CACxB,KAAK,EAAE,eAAe,GAAG,cAAc,CAAC,WAAW,CAAC,2CAmCrD;AAED,wBAAgB,MAAM,CAAC,EACrB,GAAQ,EACR,IAAY,EACZ,KAAK,EACL,SAAS,EACT,WAAW,EACX,YAAY,GACb,EAAE,eAAe,2CA8FjB"}

package/dist/layouts/home.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Fragment } from 'react';
-import { replaceOrDefault } from '../layouts/shared.js';
+import { Fragment, useMemo } from 'react';
+import { slot, slots } from '../layouts/shared.js';
 import { cn } from '../utils/cn.js';
 import { getLinks } from './shared.js';
 import { NavProvider } from '../contexts/layout.js';
@@ -12,20 +12,18 @@ import { ChevronDown, Languages } from 'lucide-react';
 import Link from 'fumadocs-core/link';
 import { Menu, MenuContent, MenuLinkItem, MenuTrigger, } from '../layouts/home/menu.js';
 export function HomeLayout(props) {
-    const { nav, links, githubUrl, i18n: _i18n, themeSwitch: _themeSwitch, disableThemeSwitch: _disableThemeSwitch, ...rest } = props;
-    const finalLinks = getLinks(links, githubUrl);
-    return (_jsx(NavProvider, { transparentMode: nav?.transparentMode, children: _jsxs("main", { id: "nd-home-layout", ...rest, className: cn('flex flex-1 flex-col pt-14', rest.className), children: [replaceOrDefault(nav, _jsx(Header, { finalLinks: finalLinks, ...props }), {
-                    items: finalLinks,
-                }), props.children] }) }));
+    const { nav, links, githubUrl, i18n, disableThemeSwitch = false, themeSwitch = { enabled: !disableThemeSwitch }, searchToggle, ...rest } = props;
+    return (_jsx(NavProvider, { transparentMode: nav?.transparentMode, children: _jsxs("main", { id: "nd-home-layout", ...rest, className: cn('flex flex-1 flex-col pt-14', rest.className), children: [slot(nav, _jsx(Header, { links: links, nav: nav, themeSwitch: themeSwitch, searchToggle: searchToggle, i18n: i18n, githubUrl: githubUrl })), props.children] }) }));
 }
-function Header({ nav: { enableSearch = true, ...nav } = {}, i18n = false, finalLinks, themeSwitch, }) {
+export function Header({ nav = {}, i18n = false, links, githubUrl, themeSwitch, searchToggle, }) {
+    const finalLinks = useMemo(() => getLinks(links, githubUrl), [links, githubUrl]);
     const navItems = finalLinks.filter((item) => ['nav', 'all'].includes(item.on ?? 'all'));
     const menuItems = finalLinks.filter((item) => ['menu', 'all'].includes(item.on ?? 'all'));
     return (_jsxs(Navbar, { children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex items-center gap-2.5 font-semibold", children: nav.title }), nav.children, _jsx("ul", { className: "flex flex-row items-center gap-2 px-6 max-sm:hidden", children: navItems
                     .filter((item) => !isSecondary(item))
-                    .map((item, i) => (_jsx(NavbarLinkItem, { item: item, className: "text-sm" }, i))) }), _jsxs("div", { className: "flex flex-row items-center justify-end gap-1.5 flex-1", children: [enableSearch ? (_jsxs(_Fragment, { children: [_jsx(SearchToggle, { className: "lg:hidden", hideIfDisabled: true }), _jsx(LargeSearchToggle, { className: "w-full max-w-[240px] max-lg:hidden", hideIfDisabled: true })] })) : null, replaceOrDefault(themeSwitch, _jsx(ThemeToggle, { className: "max-lg:hidden", mode: themeSwitch?.mode })), i18n ? (_jsx(LanguageToggle, { className: "max-lg:hidden", children: _jsx(Languages, { className: "size-5" }) })) : null] }), _jsxs("ul", { className: "flex flex-row items-center", children: [navItems.filter(isSecondary).map((item, i) => (_jsx(NavbarLinkItem, { item: item, className: "-me-1.5 max-lg:hidden" }, i))), _jsxs(Menu, { className: "lg:hidden", children: [_jsx(MenuTrigger, { "aria-label": "Toggle Menu", className: "group -me-2", enableHover: nav.enableHoverToOpen, children: _jsx(ChevronDown, { className: "size-3 transition-transform duration-300 group-data-[state=open]:rotate-180" }) }), _jsxs(MenuContent, { className: "sm:flex-row sm:items-center sm:justify-end", children: [menuItems
+                    .map((item, i) => (_jsx(NavbarLinkItem, { item: item, className: "text-sm" }, i))) }), _jsxs("div", { className: "flex flex-row items-center justify-end gap-1.5 flex-1", children: [slots('sm', searchToggle, _jsx(SearchToggle, { className: "lg:hidden", hideIfDisabled: true })), slots('lg', searchToggle, _jsx(LargeSearchToggle, { className: "w-full max-w-[240px] max-lg:hidden", hideIfDisabled: true })), slot(themeSwitch, _jsx(ThemeToggle, { className: "max-lg:hidden", mode: themeSwitch?.mode })), i18n ? (_jsx(LanguageToggle, { className: "max-lg:hidden", children: _jsx(Languages, { className: "size-5" }) })) : null] }), _jsxs("ul", { className: "flex flex-row items-center", children: [navItems.filter(isSecondary).map((item, i) => (_jsx(NavbarLinkItem, { item: item, className: "-me-1.5 max-lg:hidden" }, i))), _jsxs(Menu, { className: "lg:hidden", children: [_jsx(MenuTrigger, { "aria-label": "Toggle Menu", className: "group -me-2", enableHover: nav.enableHoverToOpen, children: _jsx(ChevronDown, { className: "size-3 transition-transform duration-300 group-data-[state=open]:rotate-180" }) }), _jsxs(MenuContent, { className: "sm:flex-row sm:items-center sm:justify-end", children: [menuItems
                                         .filter((item) => !isSecondary(item))
-                                        .map((item, i) => (_jsx(MenuLinkItem, { item: item, className: "sm:hidden" }, i))), _jsxs("div", { className: "-ms-1.5 flex flex-row items-center gap-1.5 max-sm:mt-2", children: [menuItems.filter(isSecondary).map((item, i) => (_jsx(MenuLinkItem, { item: item, className: "-me-1.5" }, i))), _jsx("div", { role: "separator", className: "flex-1" }), i18n ? (_jsxs(LanguageToggle, { children: [_jsx(Languages, { className: "size-5" }), _jsx(LanguageToggleText, {}), _jsx(ChevronDown, { className: "size-3 text-fd-muted-foreground" })] })) : null, replaceOrDefault(themeSwitch, _jsx(ThemeToggle, { mode: themeSwitch?.mode }))] })] })] })] })] }));
+                                        .map((item, i) => (_jsx(MenuLinkItem, { item: item, className: "sm:hidden" }, i))), _jsxs("div", { className: "-ms-1.5 flex flex-row items-center gap-1.5 max-sm:mt-2", children: [menuItems.filter(isSecondary).map((item, i) => (_jsx(MenuLinkItem, { item: item, className: "-me-1.5" }, i))), _jsx("div", { role: "separator", className: "flex-1" }), i18n ? (_jsxs(LanguageToggle, { children: [_jsx(Languages, { className: "size-5" }), _jsx(LanguageToggleText, {}), _jsx(ChevronDown, { className: "size-3 text-fd-muted-foreground" })] })) : null, slot(themeSwitch, _jsx(ThemeToggle, { mode: themeSwitch?.mode }))] })] })] })] })] }));
 }
 function NavbarLinkItem({ item, ...props }) {
     if (item.type === 'custom')

package/dist/layouts/notebook-client.js

@@ -12,7 +12,7 @@ import { isActive } from '../utils/is-active.js';
 export function Navbar({ mode, ...props }) {
     const { open, collapsed } = useSidebar();
     const { isTransparent } = useNav();
-    return (_jsx("header", { id: "nd-subnav", ...props, className: cn('fixed inset-x-0 top-(--fd-banner-height) z-10 px-(--fd-layout-offset) backdrop-blur-lg transition-colors', (!isTransparent || open) && 'bg-fd-background/80', mode === 'auto' &&
+    return (_jsx("header", { id: "nd-subnav", ...props, className: cn('fixed inset-x-0 top-(--fd-banner-height) z-10 px-(--fd-layout-offset) backdrop-blur-sm transition-colors', (!isTransparent || open) && 'bg-fd-background/80', mode === 'auto' &&
             !collapsed &&
             'ps-[calc(var(--fd-layout-offset)+var(--fd-sidebar-width))]', props.className), children: props.children }));
 }

package/dist/layouts/notebook.d.ts

@@ -12,6 +12,6 @@ export interface DocsLayoutProps extends BaseLayoutProps {
     sidebar?: Omit<Partial<SidebarOptions>, 'component' | 'enabled'>;
     containerProps?: HTMLAttributes<HTMLDivElement>;
 }
-export declare function DocsLayout({ tabMode, nav: { transparentMode, ...nav }, sidebar: { collapsible: sidebarCollapsible, tabs: tabOptions, banner: sidebarBanner, footer: sidebarFooter, components: sidebarComponents, ...sidebar }, i18n, themeSwitch, ...props }: DocsLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function DocsLayout({ tabMode, nav: { transparentMode, ...nav }, sidebar: { collapsible: sidebarCollapsible, tabs: tabOptions, banner: sidebarBanner, footer: sidebarFooter, components: sidebarComponents, ...sidebar }, i18n, disableThemeSwitch, themeSwitch, searchToggle, ...props }: DocsLayoutProps): import("react/jsx-runtime").JSX.Element;
 export { Navbar, NavbarSidebarTrigger };
 //# 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,EAAW,MAAM,OAAO,CAAC;AAC/D,OAAO,EACL,KAAK,eAAe,EAGrB,MAAM,kBAAkB,CAAC;AA0B1B,OAAO,EAIL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAGL,MAAM,EACN,oBAAoB,EAErB,MAAM,mBAAmB,CAAC;AAS3B,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,WAAW,EACX,GAAG,KAAK,EACT,EAAE,eAAe,2CAqIjB;AAiLD,OAAO,EAAE,MAAM,EAAE,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"notebook.d.ts","sourceRoot":"","sources":["../../src/layouts/notebook.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAA2B,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAE,KAAK,eAAe,EAAyB,MAAM,kBAAkB,CAAC;AAsB/E,OAAO,EAIL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAGL,MAAM,EACN,oBAAoB,EAErB,MAAM,mBAAmB,CAAC;AAa3B,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,kBAA0B,EAC1B,WAA8C,EAC9C,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,eAAe,2CAmJjB;AAqLD,OAAO,EAAE,MAAM,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/layouts/notebook.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useMemo } from 'react';
-import { getLinks, replaceOrDefault, } from '../layouts/shared.js';
+import { getLinks, slot, slots } from '../layouts/shared.js';
 import { CollapsibleSidebar, Sidebar, SidebarCollapseTrigger, SidebarFooter, SidebarHeader, SidebarViewport, SidebarPageTree, } from '../components/layout/sidebar.js';
 import { TreeContextProvider } from '../contexts/tree.js';
-import { LargeSearchToggle, SearchToggle, } from '../components/layout/search-toggle.js';
 import { cn } from '../utils/cn.js';
 import { buttonVariants } from '../components/ui/button.js';
 import { ChevronDown, Languages, SidebarIcon } from 'lucide-react';
@@ -16,7 +15,8 @@ import { LayoutTab, LayoutTabs, Navbar, NavbarSidebarTrigger, SidebarLayoutTab,
 import { StylesProvider, NavProvider, } from '../contexts/layout.js';
 import { RootToggle } from '../components/layout/root-toggle.js';
 import Link from 'fumadocs-core/link';
-export function DocsLayout({ tabMode = 'sidebar', nav: { transparentMode, ...nav } = {}, sidebar: { collapsible: sidebarCollapsible = true, tabs: tabOptions, banner: sidebarBanner, footer: sidebarFooter, components: sidebarComponents, ...sidebar } = {}, i18n = false, themeSwitch, ...props }) {
+import { LargeSearchToggle, SearchToggle, } from '../components/layout/search-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, disableThemeSwitch = false, themeSwitch = { enabled: !disableThemeSwitch }, searchToggle, ...props }) {
     const navMode = nav.mode ?? 'auto';
     const links = getLinks(props.links ?? [], props.githubUrl);
     const tabs = useMemo(() => getSidebarTabsFromOptions(tabOptions, props.tree) ?? [], [tabOptions, props.tree]);
@@ -38,18 +38,17 @@ export function DocsLayout({ tabMode = 'sidebar', nav: { transparentMode, ...nav
                                                     color: 'ghost',
                                                     size: 'icon-sm',
                                                 }), 'text-fd-muted-foreground mb-auto'), children: _jsx(SidebarIcon, {}) })] })), 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, replaceOrDefault(themeSwitch, _jsx(ThemeToggle, { className: "md:hidden", mode: themeSwitch?.mode ?? 'light-dark-system' })), sidebarFooter] })] }), _jsx(DocsNavbar, { nav: nav, links: links, i18n: i18n, sidebarCollapsible: sidebarCollapsible, tabs: tabMode == 'navbar' ? tabs : [] }), _jsx(StylesProvider, { ...pageStyles, children: props.children })] }) }) }));
+                                        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, slot(themeSwitch, _jsx(ThemeToggle, { className: "md:hidden", mode: themeSwitch?.mode ?? 'light-dark-system' })), sidebarFooter] })] }), _jsx(DocsNavbar, { mode: nav.mode, nav: _jsx(Link, { href: nav.url ?? '/', className: cn('inline-flex items-center gap-2.5 font-semibold', navMode === 'auto' && 'md:hidden'), children: nav.title }), links: links, i18n: i18n, sidebarCollapsible: sidebarCollapsible, searchToggle: searchToggle, tabs: tabMode == 'navbar' ? tabs : [], children: nav.children }), _jsx(StylesProvider, { ...pageStyles, children: props.children })] }) }) }));
 }
-function DocsNavbar({ sidebarCollapsible, links, themeSwitch, nav = {}, i18n, tabs, }) {
-    const navMode = nav.mode ?? 'auto';
+function DocsNavbar({ mode: navMode = 'auto', nav, sidebarCollapsible = false, links, themeSwitch, searchToggle, i18n = false, tabs, children, }) {
     return (_jsxs(Navbar, { mode: navMode, children: [_jsxs("div", { className: cn('flex flex-row border-b border-fd-foreground/10 px-4 h-14', navMode === 'auto' && 'md:px-6'), children: [_jsxs("div", { className: cn('flex flex-row items-center', navMode === 'top' && 'flex-1 pe-4'), children: [sidebarCollapsible && navMode === 'auto' ? (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
                                     color: 'ghost',
                                     size: 'icon-sm',
-                                }), 'text-fd-muted-foreground -ms-1.5 me-2 data-[collapsed=false]:hidden max-md:hidden'), children: _jsx(SidebarIcon, {}) })) : null, _jsx(Link, { href: nav.url ?? '/', className: cn('inline-flex items-center gap-2.5 font-semibold', navMode === 'auto' && 'md:hidden'), children: nav.title })] }), _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
+                                }), 'text-fd-muted-foreground -ms-1.5 me-2 data-[collapsed=false]:hidden max-md:hidden'), children: _jsx(SidebarIcon, {}) })) : null, nav] }), slots('lg', searchToggle, _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
+                                    .map((item, i) => (_jsx(NavbarLinkItem, { item: item, className: "text-sm text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground" }, i))) }), children, slots('sm', searchToggle, _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, replaceOrDefault(themeSwitch, _jsx(ThemeToggle, { className: "ms-2 max-md:hidden", mode: themeSwitch?.mode ?? 'light-dark-system' })), sidebarCollapsible && navMode === 'top' ? (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
+                                .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, slot(themeSwitch, _jsx(ThemeToggle, { className: "ms-2 max-md:hidden", mode: themeSwitch?.mode ?? 'light-dark-system' })), sidebarCollapsible && navMode === 'top' ? (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
                                     color: 'secondary',
                                     size: 'icon-sm',
                                 }), 'ms-2 text-fd-muted-foreground rounded-full max-md:hidden'), children: _jsx(SidebarIcon, {}) })) : null] })] }), tabs.length > 0 ? (_jsx(LayoutTabs, { className: "px-6 border-b border-fd-foreground/10 h-10 max-lg:hidden", children: tabs.map((tab) => (_jsx(LayoutTab, { ...tab }, tab.url))) })) : null] }));

package/dist/layouts/shared.d.ts

@@ -11,12 +11,6 @@ export interface NavOptions extends NavProviderProps {
      * @defaultValue '/'
      */
     url?: string;
-    /**
-     * Show/hide search toggle
-     *
-     * Note: Enable/disable search from root provider instead
-     */
-    enableSearch?: boolean;
     children?: ReactNode;
 }
 export interface BaseLayoutProps {
@@ -25,6 +19,13 @@ export interface BaseLayoutProps {
         component?: ReactNode;
         mode?: 'light-dark' | 'light-dark-system';
     };
+    searchToggle?: Partial<{
+        enabled: boolean;
+        components: Partial<{
+            sm: ReactNode;
+            lg: ReactNode;
+        }>;
+    }>;
     /**
      * Remove theme switcher component
      *
@@ -53,8 +54,12 @@ export { type LinkItemType };
  * Get Links Items with shortcuts
  */
 export declare function getLinks(links?: LinkItemType[], githubUrl?: string): LinkItemType[];
-export declare function replaceOrDefault(obj: {
+export declare function slot(obj: {
     enabled?: boolean;
     component?: ReactNode;
 } | undefined, def: ReactNode, customComponentProps?: object, disabled?: ReactNode): ReactNode;
+export declare function slots<Comp extends Record<string, ReactNode>>(variant: keyof Comp, obj: {
+    enabled?: boolean;
+    components?: Comp;
+} | undefined, def: ReactNode): ReactNode;
 //# sourceMappingURL=shared.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/layouts/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,UAAW,SAAQ,gBAAgB;IAClD,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;IAErB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B,WAAW,CAAC,EAAE;QACZ,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,SAAS,CAAC,EAAE,SAAS,CAAC;QACtB,IAAI,CAAC,EAAE,YAAY,GAAG,mBAAmB,CAAC;KAC3C,CAAC;IAEF;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAE5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB;;OAEG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAE1B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,OAAO,EAAE,KAAK,YAAY,EAAE,CAAC;AAE7B;;GAEG;AACH,wBAAgB,QAAQ,CACtB,KAAK,GAAE,YAAY,EAAO,EAC1B,SAAS,CAAC,EAAE,MAAM,GACjB,YAAY,EAAE,CAqBhB;AAED,wBAAgB,gBAAgB,CAC9B,GAAG,EACC;IACE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,GACD,SAAS,EACb,GAAG,EAAE,SAAS,EACd,oBAAoB,CAAC,EAAE,MAAM,EAC7B,QAAQ,CAAC,EAAE,SAAS,GACnB,SAAS,CAMX"}
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/layouts/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,UAAW,SAAQ,gBAAgB;IAClD,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;IAErB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B,WAAW,CAAC,EAAE;QACZ,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,SAAS,CAAC,EAAE,SAAS,CAAC;QACtB,IAAI,CAAC,EAAE,YAAY,GAAG,mBAAmB,CAAC;KAC3C,CAAC;IAEF,YAAY,CAAC,EAAE,OAAO,CAAC;QACrB,OAAO,EAAE,OAAO,CAAC;QACjB,UAAU,EAAE,OAAO,CAAC;YAClB,EAAE,EAAE,SAAS,CAAC;YACd,EAAE,EAAE,SAAS,CAAC;SACf,CAAC,CAAC;KACJ,CAAC,CAAC;IAEH;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAE5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB;;OAEG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAE1B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,OAAO,EAAE,KAAK,YAAY,EAAE,CAAC;AAE7B;;GAEG;AACH,wBAAgB,QAAQ,CACtB,KAAK,GAAE,YAAY,EAAO,EAC1B,SAAS,CAAC,EAAE,MAAM,GACjB,YAAY,EAAE,CAqBhB;AAED,wBAAgB,IAAI,CAClB,GAAG,EACC;IACE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,GACD,SAAS,EACb,GAAG,EAAE,SAAS,EACd,oBAAoB,CAAC,EAAE,MAAM,EAC7B,QAAQ,CAAC,EAAE,SAAS,GACnB,SAAS,CAMX;AAED,wBAAgB,KAAK,CAAC,IAAI,SAAS,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,EAC1D,OAAO,EAAE,MAAM,IAAI,EACnB,GAAG,EACC;IACE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,IAAI,CAAC;CACnB,GACD,SAAS,EACb,GAAG,EAAE,SAAS,GACb,SAAS,CAMX"}

package/dist/layouts/shared.js

@@ -19,10 +19,17 @@ export function getLinks(links = [], githubUrl) {
         ];
     return result;
 }
-export function replaceOrDefault(obj, def, customComponentProps, disabled) {
+export function slot(obj, def, customComponentProps, disabled) {
     if (obj?.enabled === false)
         return disabled;
     if (obj?.component !== undefined)
         return _jsx(Slot, { ...customComponentProps, children: obj.component });
     return def;
 }
+export function slots(variant, obj, def) {
+    if (obj?.enabled === false)
+        return;
+    if (obj?.components?.[variant] !== undefined)
+        return _jsx(Slot, { children: obj.components[variant] });
+    return def;
+}

package/dist/page-client.d.ts

@@ -1,7 +1,11 @@
-import { type HTMLAttributes } from 'react';
-import type { PageTree } from 'fumadocs-core/server';
+import { type ComponentProps, type HTMLAttributes } from 'react';
+import type { PageTree, TOCItemType } from 'fumadocs-core/server';
 import { type BreadcrumbOptions } from 'fumadocs-core/breadcrumb';
-export declare function TocPopoverHeader(props: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare function TocPopoverTrigger({ items, ...props }: ComponentProps<'button'> & {
+    items: TOCItemType[];
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TocPopoverContent(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function TocPopover(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,EAKpB,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EACL,KAAK,iBAAiB,EAEvB,MAAM,0BAA0B,CAAC;AAMlC,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CA8CrE;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,KAAK,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,aAAa,GAAG,KAAK,CAAC,CAAC;AAChE,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE;QACN,QAAQ,CAAC,EAAE,IAAI,CAAC;QAChB,IAAI,CAAC,EAAE,IAAI,CAAC;KACb,CAAC;CACH;AAyBD,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,EAAE,WAAW,2CA+B5C;AA8BD,MAAM,MAAM,eAAe,GAAG,iBAAiB,CAAC;AAEhD,wBAAgB,UAAU,CAAC,OAAO,EAAE,eAAe,kDAsClD"}
+{"version":3,"file":"page-client.d.ts","sourceRoot":"","sources":["../src/page-client.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,cAAc,EAKpB,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAElE,OAAO,EACL,KAAK,iBAAiB,EAEvB,MAAM,0BAA0B,CAAC;AAgBlC,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAE,KAAK,EAAE,WAAW,EAAE,CAAA;CAAE,2CAoDrD;AA4DD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAU7D;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CA0D/D;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,KAAK,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,aAAa,GAAG,KAAK,CAAC,CAAC;AAChE,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE;QACN,QAAQ,CAAC,EAAE,IAAI,CAAC;QAChB,IAAI,CAAC,EAAE,IAAI,CAAC;KACb,CAAC;CACH;AAyBD,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,EAAE,WAAW,2CA+B5C;AA8BD,MAAM,MAAM,eAAe,GAAG,iBAAiB,CAAC;AAEhD,wBAAgB,UAAU,CAAC,OAAO,EAAE,eAAe,kDAsClD"}

package/dist/page-client.js

@@ -1,19 +1,54 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useEffect, useMemo, useRef, useState, } from 'react';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';
 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 { useSidebar } from './contexts/sidebar.js';
-import { usePathname } from 'fumadocs-core/framework';
+import { createContext, usePathname } from 'fumadocs-core/framework';
 import { getBreadcrumbItemsFromPath, } from 'fumadocs-core/breadcrumb';
-import { usePageStyles, useNav } from './contexts/layout.js';
+import { useNav, usePageStyles } from './contexts/layout.js';
 import { isActive } from './utils/is-active.js';
-import { TocPopover } from './components/layout/toc.js';
 import { useEffectEvent } from 'fumadocs-core/utils/use-effect-event';
-export function TocPopoverHeader(props) {
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from './components/ui/collapsible.js';
+import * as Primitive from 'fumadocs-core/toc';
+const TocPopoverContext = createContext('TocPopoverContext');
+export function TocPopoverTrigger({ items, ...props }) {
+    const { text } = useI18n();
+    const { open } = TocPopoverContext.use();
+    const active = Primitive.useActiveAnchor();
+    const selected = useMemo(() => items.findIndex((item) => active === item.url.slice(1)), [items, active]);
+    const path = useTreePath().at(-1);
+    const showCurrent = selected !== -1 && !open;
+    return (_jsxs(CollapsibleTrigger, { ...props, className: cn('flex flex-row items-center text-sm text-fd-muted-foreground gap-2.5 px-4 py-2.5 text-start focus-visible:outline-none [&_svg]:shrink-0 [&_svg]:size-4 md:px-6', props.className), children: [_jsx(ProgressCircle, { value: (selected + 1) / items.length, max: 1, className: cn(open && 'text-fd-primary') }), _jsxs("span", { className: cn('grid flex-1 *:row-start-1 *:col-start-1', open && 'text-fd-foreground'), children: [_jsx("span", { className: cn('truncate transition-all', showCurrent && 'opacity-0 -translate-y-full pointer-events-none'), children: path?.name ?? text.toc }), _jsx("span", { className: cn('truncate transition-all', !showCurrent && 'opacity-0 translate-y-full pointer-events-none'), children: items[selected]?.title })] }), _jsx(ChevronDown, { className: cn('transition-transform', open && 'rotate-180') })] }));
+}
+function clamp(input, min, max) {
+    if (input < min)
+        return min;
+    if (input > max)
+        return max;
+    return input;
+}
+function ProgressCircle({ value, strokeWidth = 2, size = 24, min = 0, max = 100, ...restSvgProps }) {
+    const normalizedValue = clamp(value, min, max);
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const progress = (normalizedValue / max) * circumference;
+    const circleProps = {
+        cx: size / 2,
+        cy: size / 2,
+        r: radius,
+        fill: 'none',
+        strokeWidth,
+    };
+    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 TocPopoverContent(props) {
+    return (_jsx(CollapsibleContent, { "data-toc-popover": "", ...props, className: cn('flex flex-col max-h-[50vh]', props.className), children: props.children }));
+}
+export function TocPopover(props) {
     const ref = useRef(null);
     const [open, setOpen] = useState(false);
     const sidebar = useSidebar();
@@ -31,9 +66,13 @@ export function TocPopoverHeader(props) {
             window.removeEventListener('click', onClick);
         };
     }, [onClick]);
-    return (_jsx("div", { className: cn('sticky overflow-visible z-10', tocNav, props.className), style: {
+    return (_jsx("div", { ...props, className: cn('sticky overflow-visible z-10', tocNav, props.className), style: {
+            ...props.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 && 'max-md:hidden'), children: props.children }) }) }));
+        }, children: _jsx(TocPopoverContext.Provider, { 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('border-b border-fd-foreground/10 backdrop-blur-sm transition-colors', (!isTransparent || open) && 'bg-fd-background/80', open && 'shadow-lg', sidebar.open && 'max-md:hidden'), children: props.children }) }) }) }));
 }
 export function PageBody(props) {
     const { page } = usePageStyles();
@@ -41,7 +80,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:px-6 md:pt-12 xl:px-12 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 md:px-6 pt-8 md:pt-12 xl:px-12 xl:mx-auto', article, props.className), children: props.children }));
 }
 export function LastUpdate(props) {
     const { text } = useI18n();

package/dist/page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../src/page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EACL,KAAK,oBAAoB,EAEzB,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,KAAK,mBAAmB,EAAkB,MAAM,mBAAmB,CAAC;AAG7E,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;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,GAAG,SAAS,CAM5E"}
+{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../src/page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EACL,KAAK,oBAAoB,EAEzB,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,KAAK,mBAAmB,EAAkB,MAAM,mBAAmB,CAAC;AAG7E,OAAO,EAEL,KAAK,WAAW,EAIhB,KAAK,eAAe,EAKrB,MAAM,eAAe,CAAC;AACvB,OAAO,EAGL,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,2CA4Ff;AA+BD;;GAEG;AACH,eAAO,MAAM,QAAQ,2HAOnB,CAAC;AAIH,eAAO,MAAM,eAAe,uIAgB1B,CAAC;AAIH,eAAO,MAAM,SAAS,mIAapB,CAAC;AAIH;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,GAAG,SAAS,CAM5E"}

package/dist/page.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, } from 'react';
 import { AnchorProvider } from 'fumadocs-core/toc';
-import { replaceOrDefault } from './layouts/shared.js';
+import { slot } from './layouts/shared.js';
 import { cn } from './utils/cn.js';
-import { Footer, LastUpdate, TocPopoverHeader, Breadcrumb, PageBody, PageArticle, } from './page-client.js';
-import { Toc, TOCItems, TocPopoverTrigger, TocPopoverContent, TOCScrollArea, } from './components/layout/toc.js';
+import { Footer, LastUpdate, TocPopover, Breadcrumb, PageBody, PageArticle, TocPopoverTrigger, TocPopoverContent, } from './page-client.js';
+import { Toc, TOCItems, 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';
@@ -21,10 +21,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 }, _jsxs(TocPopoverHeader, { className: "h-10", 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] })] }), {
+                }, children: [slot({ enabled: tocPopoverEnabled, component: tocPopoverReplace }, _jsxs(TocPopover, { className: "h-10", 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, { ...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] }), {
+                    }), _jsxs(PageArticle, { ...props.article, className: cn(full || !tocEnabled ? 'max-w-[1120px]' : 'max-w-[860px]', props.article?.className), children: [slot(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] }), slot(props.footer, _jsx(Footer, { items: props.footer?.items }))] })] }), slot({ 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,
             })] }));

package/dist/style.css

@@ -231,6 +231,9 @@
   .\@container {
     container-type: inline-size;
   }
+  .pointer-events-none {
+    pointer-events: none;
+  }
   .collapse {
     visibility: collapse;
   }
@@ -316,9 +319,6 @@
   .top-2 {
     top: calc(var(--spacing) * 2);
   }
-  .top-12 {
-    top: calc(var(--spacing) * 12);
-  }
   .top-14 {
     top: calc(var(--spacing) * 14);
   }
@@ -389,9 +389,6 @@
   .-mx-2 {
     margin-inline: calc(var(--spacing) * -2);
   }
-  .mx-4 {
-    margin-inline: calc(var(--spacing) * 4);
-  }
   .\!my-0 {
     margin-block: calc(var(--spacing) * 0) !important;
   }
@@ -814,9 +811,6 @@
   .mt-\(--fd-top\) {
     margin-top: var(--fd-top);
   }
-  .mt-2 {
-    margin-top: calc(var(--spacing) * 2);
-  }
   .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
@@ -1030,6 +1024,14 @@
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .-translate-y-full {
+    --tw-translate-y: -100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-y-full {
+    --tw-translate-y: 100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .scale-0 {
     --tw-scale-x: 0%;
     --tw-scale-y: 0%;
@@ -1039,8 +1041,8 @@
   .-rotate-90 {
     rotate: calc(90deg * -1);
   }
-  .rotate-90 {
-    rotate: 90deg;
+  .rotate-180 {
+    rotate: 180deg;
   }
   .transform {
     transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
@@ -1280,6 +1282,9 @@
   .bg-transparent {
     background-color: transparent;
   }
+  .\[mask-image\:linear-gradient\(to_bottom\,transparent\,white_16px\,white_calc\(100\%-16px\)\,transparent\)\] {
+    mask-image: linear-gradient(to bottom,transparent,white 16px,white calc(100% - 16px),transparent);
+  }
   .fill-blue-500 {
     fill: var(--color-blue-500);
   }
@@ -1289,6 +1294,12 @@
   .fill-red-500 {
     fill: var(--color-red-500);
   }
+  .stroke-current\/25 {
+    stroke: currentcolor;
+    @supports (color: color-mix(in lab, red, red)) {
+      stroke: color-mix(in oklab, currentcolor 25%, transparent);
+    }
+  }
   .stroke-fd-foreground\/10 {
     stroke: color-mix(in srgb, hsl(0, 0%, 3.9%) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1316,6 +1327,9 @@
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
+  .p-px {
+    padding: 1px;
+  }
   .px-\(--fd-layout-offset\) {
     padding-inline: var(--fd-layout-offset);
   }
@@ -1601,6 +1615,16 @@
   .\[--fd-tocnav-height\:36px\] {
     --fd-tocnav-height: 36px;
   }
+  .\*\:col-start-1 {
+    :is(& > *) {
+      grid-column-start: 1;
+    }
+  }
+  .\*\:row-start-1 {
+    :is(& > *) {
+      grid-row-start: 1;
+    }
+  }
   .group-hover\:opacity-100 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -1970,11 +1994,6 @@
       position: sticky;
     }
   }
-  .md\:mx-6 {
-    @media (width >= 48rem) {
-      margin-inline: calc(var(--spacing) * 6);
-    }
-  }
   .md\:mx-auto {
     @media (width >= 48rem) {
       margin-inline: auto;
@@ -2166,11 +2185,6 @@
       inset-inline-start: calc(var(--spacing) * 4);
     }
   }
-  .xl\:top-4 {
-    @media (width >= 80rem) {
-      top: calc(var(--spacing) * 4);
-    }
-  }
   .xl\:mx-auto {
     @media (width >= 80rem) {
       margin-inline: auto;
@@ -2313,41 +2327,41 @@
   --color-fd-secondary: hsl(0, 0%, 18%);
   --color-fd-muted-foreground: hsl(0, 0%, 72%);
 }
-.fd-codeblock code span {
+.shiki code span {
   color: var(--shiki-light);
 }
-.dark .fd-codeblock code span {
+.dark .shiki code span {
   color: var(--shiki-dark);
 }
 .fd-codeblock pre > * {
   display: grid;
   font-size: 13px;
 }
-.fd-codeblock code .diff.remove {
+.shiki code .diff.remove {
   background-color: var(--fd-diff-remove-color);
   opacity: 0.7;
 }
-.fd-codeblock code .diff::before {
+.shiki code .diff::before {
   position: absolute;
   left: 6px;
 }
-.fd-codeblock code .diff.remove::before {
+.shiki code .diff.remove::before {
   content: '-';
   color: var(--fd-diff-remove-symbol-color);
 }
-.fd-codeblock code .diff.add {
+.shiki code .diff.add {
   background-color: var(--fd-diff-add-color);
 }
-.fd-codeblock code .diff.add::before {
+.shiki code .diff.add::before {
   content: '+';
   color: var(--fd-diff-add-symbol-color);
 }
-.fd-codeblock code .diff {
+.shiki code .diff {
   margin: 0 -16px;
   padding: 0 16px;
   position: relative;
 }
-.fd-codeblock .highlighted {
+.shiki .highlighted {
   margin: 0 -16px;
   padding: 0 16px;
   background-color: color-mix( in oklab, hsl(0, 0%, 9%) 10%, transparent );
@@ -2355,7 +2369,7 @@
     background-color: color-mix( in oklab, var(--color-fd-primary) 10%, transparent );
   }
 }
-.fd-codeblock .highlighted-word {
+.shiki .highlighted-word {
   padding: 1px 2px;
   margin: -1px -3px;
   border: 1px solid color-mix(in srgb, hsl(0, 0%, 9%) 50%, transparent);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "15.2.6",
+  "version": "15.2.7",
   "description": "The framework for building a documentation website in Next.js",
   "keywords": [
     "NextJs",
@@ -68,15 +68,15 @@
     "css/*"
   ],
   "dependencies": {
-    "@radix-ui/react-accordion": "^1.2.3",
-    "@radix-ui/react-collapsible": "^1.1.3",
-    "@radix-ui/react-dialog": "^1.1.6",
-    "@radix-ui/react-direction": "^1.1.0",
-    "@radix-ui/react-navigation-menu": "^1.2.5",
-    "@radix-ui/react-popover": "^1.1.6",
-    "@radix-ui/react-scroll-area": "^1.2.3",
-    "@radix-ui/react-slot": "^1.1.2",
-    "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-accordion": "^1.2.4",
+    "@radix-ui/react-collapsible": "^1.1.4",
+    "@radix-ui/react-dialog": "^1.1.7",
+    "@radix-ui/react-direction": "^1.1.1",
+    "@radix-ui/react-navigation-menu": "^1.2.6",
+    "@radix-ui/react-popover": "^1.1.7",
+    "@radix-ui/react-scroll-area": "^1.2.4",
+    "@radix-ui/react-slot": "^1.2.0",
+    "@radix-ui/react-tabs": "^1.1.4",
     "class-variance-authority": "^0.7.1",
     "lodash.merge": "^4.6.2",
     "lucide-react": "^0.487.0",
@@ -84,20 +84,20 @@
     "postcss-selector-parser": "^7.1.0",
     "react-medium-image-zoom": "^5.2.14",
     "tailwind-merge": "^3.2.0",
-    "fumadocs-core": "15.2.6"
+    "fumadocs-core": "15.2.7"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^15.2.4",
+    "@next/eslint-plugin-next": "^15.3.0",
     "@tailwindcss/cli": "^4.1.3",
     "@types/lodash.merge": "^4.6.9",
     "@types/react": "^19.1.0",
-    "@types/react-dom": "^19.1.1",
-    "next": "15.2.4",
+    "@types/react-dom": "^19.1.2",
+    "next": "15.3.0",
     "tailwindcss": "^4.1.3",
-    "tsc-alias": "^1.8.13",
+    "tsc-alias": "^1.8.15",
     "@fumadocs/cli": "0.1.1",
     "eslint-config-custom": "0.0.0",
-    "fumadocs-core": "15.2.6",
+    "fumadocs-core": "15.2.7",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {