fumadocs-ui 14.3.1 → 14.4.1

package/dist/components/codeblock.d.ts

@@ -1,4 +1,5 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
+import type { ScrollAreaViewportProps } from '@radix-ui/react-scroll-area';
 export type CodeBlockProps = HTMLAttributes<HTMLElement> & {
     /**
      * Icon of code block
@@ -18,6 +19,7 @@ export type CodeBlockProps = HTMLAttributes<HTMLElement> & {
      * @defaultValue false
      */
     keepBackground?: boolean;
+    viewportProps?: ScrollAreaViewportProps;
 };
 export declare const Pre: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLPreElement> & import("react").RefAttributes<HTMLPreElement>>;
 export declare const CodeBlock: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
@@ -39,5 +41,6 @@ export declare const CodeBlock: import("react").ForwardRefExoticComponent<HTMLAt
      * @defaultValue false
      */
     keepBackground?: boolean;
+    viewportProps?: ScrollAreaViewportProps;
 } & import("react").RefAttributes<HTMLElement>>;
 //# sourceMappingURL=codeblock.d.ts.map

package/dist/components/codeblock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"codeblock.d.ts","sourceRoot":"","sources":["../../src/components/codeblock.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,cAAc,EAEnB,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAUf,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACzD;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,GAAG,2HAQf,CAAC;AAIF,eAAO,MAAM,SAAS;IAlCpB;;;;OAIG;WACI,SAAS;IAEhB;;;;OAIG;gBACS,OAAO;IAEnB;;;;OAIG;qBACc,OAAO;+CAwFzB,CAAC"}
+{"version":3,"file":"codeblock.d.ts","sourceRoot":"","sources":["../../src/components/codeblock.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,cAAc,EAEnB,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAE3E,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACzD;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,aAAa,CAAC,EAAE,uBAAuB,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,GAAG,2HAQf,CAAC;AAIF,eAAO,MAAM,SAAS;IApCpB;;;;OAIG;WACI,SAAS;IAEhB;;;;OAIG;gBACS,OAAO;IAEnB;;;;OAIG;qBACc,OAAO;oBAER,uBAAuB;+CA+FxC,CAAC"}

package/dist/components/codeblock.js

@@ -7,10 +7,10 @@ import { ScrollArea, ScrollBar, ScrollViewport, } from '../components/ui/scroll-
 import { useCopyButton } from '../utils/use-copy-button';
 import { buttonVariants } from '../components/ui/button';
 export const Pre = forwardRef(({ className, ...props }, ref) => {
-    return (_jsx("pre", { ref: ref, className: cn('max-h-[400px] p-4', className), ...props, children: props.children }));
+    return (_jsx("pre", { ref: ref, className: cn('p-4', className), ...props, children: props.children }));
 });
 Pre.displayName = 'Pre';
-export const CodeBlock = forwardRef(({ title, allowCopy = true, keepBackground = false, icon, className, ...props }, ref) => {
+export const CodeBlock = forwardRef(({ title, allowCopy = true, keepBackground = false, icon, viewportProps, ...props }, ref) => {
     const areaRef = useRef(null);
     const onCopy = useCallback(() => {
         const pre = areaRef.current?.getElementsByTagName('pre').item(0);
@@ -22,20 +22,17 @@ export const CodeBlock = forwardRef(({ title, allowCopy = true, keepBackground =
         });
         void navigator.clipboard.writeText(clone.textContent ?? '');
     }, []);
-    return (_jsxs("figure", { ref: ref, className: cn('not-prose group fd-codeblock relative my-6 overflow-hidden rounded-lg border bg-fd-secondary/50 text-sm', keepBackground &&
-            'bg-[var(--shiki-light-bg)] dark:bg-[var(--shiki-dark-bg)]', className), ...props, children: [title ? (_jsxs("div", { className: "flex flex-row items-center gap-2 border-b bg-fd-muted px-4 py-1.5", children: [icon ? (_jsx("div", { className: "text-fd-muted-foreground [&_svg]:size-3.5", ...(typeof icon === 'string'
+    return (_jsxs("figure", { ref: ref, ...props, className: cn('not-prose group fd-codeblock relative my-6 overflow-hidden rounded-lg border bg-fd-secondary/50 text-sm', keepBackground &&
+            'bg-[var(--shiki-light-bg)] dark:bg-[var(--shiki-dark-bg)]', props.className), children: [title ? (_jsxs("div", { className: "flex flex-row items-center gap-2 border-b bg-fd-muted px-4 py-1.5", children: [icon ? (_jsx("div", { className: "text-fd-muted-foreground [&_svg]:size-3.5", dangerouslySetInnerHTML: typeof icon === 'string'
                             ? {
-                                dangerouslySetInnerHTML: { __html: icon },
+                                __html: icon,
                             }
-                            : {
-                                children: icon,
-                            }) })) : null, _jsx("figcaption", { className: "flex-1 truncate text-fd-muted-foreground", children: title }), allowCopy ? (_jsx(CopyButton, { className: "-me-2", onCopy: onCopy })) : null] })) : (allowCopy && (_jsx(CopyButton, { className: "absolute right-2 top-2 z-[2] backdrop-blur-md", onCopy: onCopy }))), _jsxs(ScrollArea, { ref: areaRef, dir: "ltr", children: [_jsx(ScrollViewport, { children: props.children }), _jsx(ScrollBar, { orientation: "horizontal" })] })] }));
+                            : undefined, children: typeof icon !== 'string' ? icon : null })) : null, _jsx("figcaption", { className: "flex-1 truncate text-fd-muted-foreground", children: title }), allowCopy ? (_jsx(CopyButton, { className: "-me-2", onCopy: onCopy })) : null] })) : (allowCopy && (_jsx(CopyButton, { className: "absolute right-2 top-2 z-[2] backdrop-blur-md", onCopy: onCopy }))), _jsxs(ScrollArea, { ref: areaRef, dir: "ltr", children: [_jsx(ScrollViewport, { ...viewportProps, className: cn('max-h-[400px]', viewportProps?.className), children: props.children }), _jsx(ScrollBar, { orientation: "horizontal" })] })] }));
 });
 CodeBlock.displayName = 'CodeBlock';
 function CopyButton({ className, onCopy, ...props }) {
     const [checked, onClick] = useCopyButton(onCopy);
     return (_jsxs("button", { type: "button", className: cn(buttonVariants({
             color: 'ghost',
-            className: 'transition-all group-hover:opacity-100',
-        }), !checked && 'opacity-0', className), "aria-label": "Copy Text", onClick: onClick, ...props, children: [_jsx(Check, { className: cn('size-3.5 transition-transform', !checked && 'scale-0') }), _jsx(Copy, { className: cn('absolute size-3.5 transition-transform', checked && 'scale-0') })] }));
+        }), 'transition-opacity group-hover:opacity-100', !checked && 'opacity-0', className), "aria-label": "Copy Text", onClick: onClick, ...props, children: [_jsx(Check, { className: cn('size-3.5 transition-transform', !checked && 'scale-0') }), _jsx(Copy, { className: cn('absolute size-3.5 transition-transform', checked && 'scale-0') })] }));
 }

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

@@ -19,10 +19,10 @@ export interface TitleProps {
 interface NavContextType {
     isTransparent: boolean;
 }
-export declare const NavContext: import("react").Context<NavContextType>;
 export declare function NavProvider({ transparentMode, children, }: NavProviderProps & {
     children: ReactNode;
-}): ReactNode;
-export declare function Title({ title, url, ...props }: TitleProps & Omit<LinkProps, 'title'>): React.ReactElement;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useNav(): NavContextType;
+export declare function Title({ title, url, ...props }: TitleProps & Omit<LinkProps, 'title'>): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=nav.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"nav.d.ts","sourceRoot":"","sources":["../../../src/components/layout/nav.tsx"],"names":[],"mappings":"AACA,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAiB,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAI3E,MAAM,WAAW,gBAAgB;IAC/B;;;;OAIG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;CAC7C;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,UAAU,cAAc;IACtB,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,yCAErB,CAAC;AAEH,wBAAgB,WAAW,CAAC,EAC1B,eAAwB,EACxB,QAAQ,GACT,EAAE,gBAAgB,GAAG;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,GAAG,SAAS,CAsBxD;AAED,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,GAAG,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,YAAY,CAe5D"}
+{"version":3,"file":"nav.d.ts","sourceRoot":"","sources":["../../../src/components/layout/nav.tsx"],"names":[],"mappings":"AACA,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAEL,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,gBAAgB;IAC/B;;;;OAIG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;CAC7C;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,UAAU,cAAc;IACtB,aAAa,EAAE,OAAO,CAAC;CACxB;AAMD,wBAAgB,WAAW,CAAC,EAC1B,eAAwB,EACxB,QAAQ,GACT,EAAE,gBAAgB,GAAG;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAsB5C;AAED,wBAAgB,MAAM,IAAI,cAAc,CAEvC;AAED,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,GAAG,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,2CAevC"}

package/dist/components/layout/nav.js

@@ -1,10 +1,10 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import Link from 'fumadocs-core/link';
-import { createContext, useEffect, useState } from 'react';
+import { createContext, useContext, useEffect, useState, } from 'react';
 import { cn } from '../../utils/cn';
 import { useI18n } from '../../contexts/i18n';
-export const NavContext = createContext({
+const NavContext = createContext({
     isTransparent: false,
 });
 export function NavProvider({ transparentMode = 'none', children, }) {
@@ -23,6 +23,9 @@ export function NavProvider({ transparentMode = 'none', children, }) {
     }, [transparentMode]);
     return (_jsx(NavContext.Provider, { value: { isTransparent: transparent }, children: children }));
 }
+export function useNav() {
+    return useContext(NavContext);
+}
 export function Title({ title, url, ...props }) {
     const { locale } = useI18n();
     return (_jsx(Link, { href: url ?? (locale ? `/${locale}` : '/'), ...props, className: cn('inline-flex items-center gap-2.5 font-semibold', props.className), children: title }));

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

@@ -2,5 +2,5 @@ import type { TOCItemType } from 'fumadocs-core/server';
 export default function ClerkTOCItems({ items, isMenu, }: {
     items: TOCItemType[];
     isMenu?: boolean;
-}): React.ReactElement;
+}): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=toc-clerk.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"toc-clerk.d.ts","sourceRoot":"","sources":["../../../src/components/layout/toc-clerk.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAQxD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,KAAK,EACL,MAAc,GACf,EAAE;IACD,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,GAAG,KAAK,CAAC,YAAY,CAsGrB"}
+{"version":3,"file":"toc-clerk.d.ts","sourceRoot":"","sources":["../../../src/components/layout/toc-clerk.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAQxD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,KAAK,EACL,MAAc,GACf,EAAE;IACD,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,2CAgGA"}

package/dist/components/layout/toc-clerk.js

@@ -3,11 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as Primitive from 'fumadocs-core/toc';
 import { useEffect, useRef, useState } from 'react';
 import { cn } from '../../utils/cn';
-import { useI18n } from '../../contexts/i18n';
 import { TocThumb } from '../../components/layout/toc-thumb';
 import { ScrollArea, ScrollViewport } from '../ui/scroll-area';
+import { TocItemsEmpty } from '../../components/layout/toc';
 export default function ClerkTOCItems({ items, isMenu = false, }) {
-    const { text } = useI18n();
     const viewRef = useRef(null);
     const containerRef = useRef(null);
     const [svg, setSvg] = useState();
@@ -47,7 +46,7 @@ export default function ClerkTOCItems({ items, isMenu = false, }) {
         };
     }, [items]);
     if (items.length === 0)
-        return (_jsx("div", { className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground", children: text.tocNoHeadings }));
+        return _jsx(TocItemsEmpty, {});
     return (_jsx(ScrollArea, { className: cn('flex flex-col', isMenu && '-ms-3'), children: _jsxs(ScrollViewport, { className: "relative min-h-0", ref: viewRef, children: [svg ? (_jsx("div", { className: "absolute start-0 top-0 rtl:-scale-x-100", style: {
                         width: svg.width,
                         height: svg.height,
@@ -58,19 +57,19 @@ export default function ClerkTOCItems({ items, isMenu = false, }) {
 }
 function getItemOffset(depth) {
     if (depth <= 2)
-        return 16;
+        return 14;
     if (depth === 3)
-        return 32;
-    return 48;
+        return 26;
+    return 36;
 }
 function getLineOffset(depth) {
-    return depth >= 3 ? 12 : 0;
+    return depth >= 3 ? 10 : 0;
 }
 function TOCItem({ item, upper = item.depth, lower = item.depth, }) {
     const offset = getLineOffset(item.depth), upperOffset = getLineOffset(upper), lowerOffset = getLineOffset(lower);
     return (_jsxs(Primitive.TOCItem, { href: item.url, style: {
             paddingInlineStart: getItemOffset(item.depth),
-        }, className: "prose relative py-2 text-sm text-fd-muted-foreground transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0 data-[active=true]:text-fd-primary", children: [offset !== upperOffset ? (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", className: "absolute -top-2 start-0 size-4 rtl:-scale-x-100", children: _jsx("line", { x1: upperOffset, y1: "0", x2: offset, y2: "16", className: "stroke-fd-foreground/10", strokeWidth: "1" }) })) : null, _jsx("div", { className: cn('absolute inset-y-0 w-px bg-fd-foreground/10', offset !== upperOffset && 'top-2', offset !== lowerOffset && 'bottom-2'), style: {
+        }, className: "prose relative 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", children: [offset !== upperOffset ? (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", className: "absolute -top-1.5 start-0 size-4 rtl:-scale-x-100", children: _jsx("line", { x1: upperOffset, y1: "0", x2: offset, y2: "12", className: "stroke-fd-foreground/10", strokeWidth: "1" }) })) : null, _jsx("div", { className: cn('absolute inset-y-0 w-px bg-fd-foreground/10', offset !== upperOffset && 'top-1.5', offset !== lowerOffset && 'bottom-1.5'), style: {
                     insetInlineStart: offset,
                 } }), item.title] }));
 }

package/dist/components/layout/toc-popover.js

@@ -13,7 +13,7 @@ export function TocPopoverTrigger({ items, ...props }) {
     const current = useMemo(() => {
         return items.find((item) => active === item.url.slice(1))?.title;
     }, [items, active]);
-    return (_jsxs(PopoverTrigger, { ...props, className: cn('inline-flex items-center gap-2 text-nowrap px-4 py-2 text-start md:px-3', props.className), children: [_jsx(Text, { className: "size-4 shrink-0" }), text.toc, current ? (_jsxs(_Fragment, { children: [_jsx(ChevronRight, { className: "-mx-1.5 size-4 shrink-0 text-fd-muted-foreground" }), _jsx("span", { className: "truncate text-fd-muted-foreground", children: current })] })) : null] }));
+    return (_jsxs(PopoverTrigger, { ...props, className: cn('inline-flex items-center gap-2 text-nowrap px-4 py-2 text-start', props.className), children: [_jsx(Text, { className: "size-4 shrink-0" }), text.toc, current ? (_jsxs(_Fragment, { children: [_jsx(ChevronRight, { className: "-mx-1.5 size-4 shrink-0 text-fd-muted-foreground" }), _jsx("span", { className: "truncate text-fd-muted-foreground", children: current })] })) : null] }));
 }
 export function TocPopoverContent(props) {
     return (_jsx(PopoverContent, { hideWhenDetached: true, alignOffset: 16, align: "start", side: "bottom", "data-toc-popover": "", ...props, className: cn('flex max-h-[var(--radix-popover-content-available-height)] w-[260px] flex-col gap-4 p-3', props.className), children: props.children }));

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

@@ -12,6 +12,7 @@ export interface TOCProps {
     children: ReactNode;
 }
 export declare function Toc(props: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare function TocItemsEmpty(): import("react/jsx-runtime").JSX.Element;
 export declare function TOCItems({ items, isMenu, }: {
     items: TOCItemType[];
     isMenu?: boolean;

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,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAU,MAAM,OAAO,CAAC;AAMpE,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,2CAoBxD;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,MAAc,GACf,EAAE;IACD,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,2CAmCA"}
+{"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,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAU,MAAM,OAAO,CAAC;AAMpE,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,2CAoBxD;AAED,wBAAgB,aAAa,4CAQ5B;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,MAAc,GACf,EAAE;IACD,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,2CA6BA"}

package/dist/components/layout/toc.js

@@ -7,17 +7,20 @@ import { useI18n } from '../../contexts/i18n';
 import { TocThumb } from '../../components/layout/toc-thumb';
 import { ScrollArea, ScrollViewport } from '../ui/scroll-area';
 export function Toc(props) {
-    return (_jsx("div", { ...props, "data-toc": "", className: cn('sticky top-fd-layout-top h-[var(--fd-toc-height)] flex-1 pb-2 pe-2 pt-12 max-lg:hidden', props.className), style: {
+    return (_jsx("div", { ...props, "data-toc": "", className: cn('sticky top-fd-layout-top h-[var(--fd-toc-height)] flex-1 pb-2 pt-12', props.className), style: {
             ...props.style,
             '--fd-toc-height': 'calc(100dvh - var(--fd-banner-height) - var(--fd-nav-height))',
         }, children: props.children }));
 }
-export function TOCItems({ items, isMenu = false, }) {
+export function TocItemsEmpty() {
     const { text } = useI18n();
+    return (_jsx("div", { className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground", children: text.tocNoHeadings }));
+}
+export function TOCItems({ items, isMenu = false, }) {
     const containerRef = useRef(null);
     const viewRef = useRef(null);
     if (items.length === 0)
-        return (_jsx("div", { className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground", children: text.tocNoHeadings }));
+        return _jsx(TocItemsEmpty, {});
     return (_jsx(ScrollArea, { className: cn('flex flex-col', isMenu && '-ms-3'), children: _jsx(Primitive.ScrollProvider, { containerRef: viewRef, children: _jsxs(ScrollViewport, { className: "relative min-h-0 text-sm", ref: viewRef, children: [_jsx(TocThumb, { containerRef: containerRef, className: "absolute start-0 mt-[var(--fd-top)] h-[var(--fd-height)] w-px bg-fd-primary transition-all" }), _jsx("div", { ref: containerRef, className: cn('flex flex-col', !isMenu && 'border-s border-fd-foreground/10'), children: items.map((item) => (_jsx(TOCItem, { item: item }, item.url))) })] }) }) }));
 }
 function TOCItem({ item }) {

package/dist/components/registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/components/registry.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AASpD,eAAO,MAAM,QAAQ,EAAE,QA8DtB,CAAC"}
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/components/registry.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AASpD,eAAO,MAAM,QAAQ,EAAE,QAmEtB,CAAC"}

package/dist/components/registry.js

@@ -34,6 +34,11 @@ export const registry = {
             files: ['../layouts/home.tsx'],
             mapImportPath: contextsMap,
         },
+        {
+            name: 'layouts/page',
+            files: ['components:../page.tsx'],
+            mapImportPath: contextsMap,
+        },
         { name: 'accordion', files: ['accordion.tsx'] },
         { name: 'banner', files: ['banner.tsx'] },
         { name: 'callout', files: ['callout.tsx'] },

package/dist/components/type-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"type-table.d.ts","sourceRoot":"","sources":["../../src/components/type-table.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,GAAG,SAAS,CAWrE;AAED,UAAU,UAAU;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAcD,wBAAgB,SAAS,CAAC,EACxB,IAAI,GACL,EAAE;IACD,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;CAClC,GAAG,KAAK,CAAC,YAAY,CA8CrB"}
+{"version":3,"file":"type-table.d.ts","sourceRoot":"","sources":["../../src/components/type-table.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,GAAG,SAAS,CAWrE;AAED,UAAU,UAAU;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAYD,wBAAgB,SAAS,CAAC,EACxB,IAAI,GACL,EAAE;IACD,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;CAClC,GAAG,KAAK,CAAC,YAAY,CA8CrB"}

package/dist/components/type-table.js

@@ -8,8 +8,6 @@ import { Popover, PopoverContent, PopoverTrigger, } from '../components/ui/popov
 export function Info({ children }) {
     return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { children: _jsx(InfoIcon, { className: "size-4" }) }), _jsx(PopoverContent, { className: "prose max-h-[400px] min-w-[220px] max-w-[400px] overflow-auto text-sm prose-no-margin", children: children })] }));
 }
-const th = cva('p-2 font-medium first:pl-0 last:pr-0');
-const td = cva('p-2 first:pl-0 last:pr-0');
 const field = cva('inline-flex flex-row items-center gap-1');
 const code = cva('rounded-md bg-fd-secondary p-1 text-fd-secondary-foreground', {
     variants: {
@@ -17,5 +15,5 @@ const code = cva('rounded-md bg-fd-secondary p-1 text-fd-secondary-foreground',
     },
 });
 export function TypeTable({ type, }) {
-    return (_jsx("div", { className: "not-prose overflow-auto whitespace-nowrap", children: _jsxs("table", { className: "my-4 w-full text-left text-sm text-fd-muted-foreground", children: [_jsx("thead", { className: "border-b", children: _jsxs("tr", { children: [_jsx("th", { className: cn(th(), 'w-[45%]'), children: "Prop" }), _jsx("th", { className: cn(th(), 'w-[30%]'), children: "Type" }), _jsx("th", { className: cn(th(), 'w-1/4'), children: "Default" })] }) }), _jsx("tbody", { className: "border-collapse divide-y divide-fd-border", children: Object.entries(type).map(([key, value]) => (_jsxs("tr", { children: [_jsx("td", { className: td(), children: _jsxs("div", { className: field(), children: [_jsx("code", { className: cn(code({ color: 'primary' })), children: key }), value.description ? _jsx(Info, { children: value.description }) : null] }) }), _jsx("td", { className: td(), children: _jsxs("div", { className: field(), children: [_jsx("code", { className: code(), children: value.type }), value.typeDescription ? (_jsx(Info, { children: value.typeDescription })) : null, value.typeDescriptionLink ? (_jsx(Link, { href: value.typeDescriptionLink, children: _jsx(InfoIcon, { className: "size-4" }) })) : null] }) }), _jsx("td", { className: td(), children: value.default ? (_jsx("code", { className: code(), children: value.default })) : (_jsx("span", { children: "-" })) })] }, key))) })] }) }));
+    return (_jsx("div", { className: "overflow-auto whitespace-nowrap", children: _jsxs("table", { className: "text-sm text-fd-muted-foreground", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "w-[45%]", children: "Prop" }), _jsx("th", { className: "w-[30%]", children: "Type" }), _jsx("th", { className: "w-1/4", children: "Default" })] }) }), _jsx("tbody", { children: Object.entries(type).map(([key, value]) => (_jsxs("tr", { children: [_jsx("td", { children: _jsxs("div", { className: field(), children: [_jsx("code", { className: cn(code({ color: 'primary' })), children: key }), value.description ? _jsx(Info, { children: value.description }) : null] }) }), _jsx("td", { children: _jsxs("div", { className: field(), children: [_jsx("code", { className: code(), children: value.type }), value.typeDescription ? (_jsx(Info, { children: value.typeDescription })) : null, value.typeDescriptionLink ? (_jsx(Link, { href: value.typeDescriptionLink, children: _jsx(InfoIcon, { className: "size-4" }) })) : null] }) }), _jsx("td", { children: value.default ? (_jsx("code", { className: code(), children: value.default })) : (_jsx("span", { children: "-" })) })] }, key))) })] }) }));
 }

package/dist/contexts/search.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type ComponentType, type ReactNode } from 'react';
 import type { SearchLink, SharedProps } from '../components/dialog/search';
 interface HotKey {
     display: ReactNode;
@@ -29,7 +29,7 @@ export interface SearchProviderProps {
      *
      * It receives the `open` and `onOpenChange` prop, can be lazy loaded with `next/dynamic`
      */
-    SearchDialog: React.ComponentType<SharedProps>;
+    SearchDialog: ComponentType<SharedProps>;
     /**
      * Additional props to the dialog
      */
@@ -42,7 +42,10 @@ interface SearchContextType {
     setOpenSearch: (value: boolean) => void;
 }
 export declare function useSearchContext(): SearchContextType;
-export declare function SearchProvider({ SearchDialog, children, preload, options, hotKey, links, }: SearchProviderProps): React.ReactElement;
+export declare function SearchProvider({ SearchDialog, children, preload, options, hotKey, links, }: SearchProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Show children only when search is enabled via React Context
+ */
 export declare function SearchOnly({ children }: {
     children: ReactNode;
 }): ReactNode;

package/dist/contexts/search.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../src/contexts/search.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE1E,UAAU,MAAM;IACd,OAAO,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,GAAG,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE,aAAa,KAAK,OAAO,CAAC,CAAC;CAC/C;AAED,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IAErB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAElB;;;;OAIG;IACH,YAAY,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAE/C;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAE/B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,UAAU,iBAAiB;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC;AAQD,wBAAgB,gBAAgB,IAAI,iBAAiB,CAEpD;AAcD,wBAAgB,cAAc,CAAC,EAC7B,YAAY,EACZ,QAAQ,EACR,OAAc,EACd,OAAO,EACP,MASC,EACD,KAAK,GACN,EAAE,mBAAmB,GAAG,KAAK,CAAC,YAAY,CAuC1C;AAED,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,aAI/D"}
+{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../src/contexts/search.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,aAAa,EAElB,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE1E,UAAU,MAAM;IACd,OAAO,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,GAAG,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE,aAAa,KAAK,OAAO,CAAC,CAAC;CAC/C;AAED,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IAErB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAElB;;;;OAIG;IACH,YAAY,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IAEzC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAE/B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,UAAU,iBAAiB;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC;AAQD,wBAAgB,gBAAgB,IAAI,iBAAiB,CAEpD;AAcD,wBAAgB,cAAc,CAAC,EAC7B,YAAY,EACZ,QAAQ,EACR,OAAc,EACd,OAAO,EACP,MASC,EACD,KAAK,GACN,EAAE,mBAAmB,2CAuCrB;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,aAI/D"}

package/dist/contexts/search.js

@@ -43,6 +43,9 @@ export function SearchProvider({ SearchDialog, children, preload = true, options
     }, [hotKey]);
     return (_jsxs(SearchContext.Provider, { value: useMemo(() => ({ enabled: true, hotKey, setOpenSearch: setIsOpen }), [hotKey]), children: [isOpen !== undefined && (_jsx(SearchDialog, { open: isOpen, onOpenChange: setIsOpen, links: links, ...options })), children] }));
 }
+/**
+ * Show children only when search is enabled via React Context
+ */
 export function SearchOnly({ children }) {
     const search = useSearchContext();
     if (search.enabled)

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

@@ -1,4 +1,4 @@
-import { type HTMLAttributes } from 'react';
+import { type ButtonHTMLAttributes, type HTMLAttributes } from 'react';
 export declare function Navbar(props: HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
-export declare function NavbarSidebarTrigger(): import("react/jsx-runtime").JSX.Element;
+export declare function NavbarSidebarTrigger(props: ButtonHTMLAttributes<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=navbar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"navbar.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/navbar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAc,MAAM,OAAO,CAAC;AAOxD,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,2CAiBxD;AAED,wBAAgB,oBAAoB,4CAgBnC"}
+{"version":3,"file":"navbar.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/navbar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,oBAAoB,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAOvE,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,2CAgBxD;AAED,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,2CAkB/C"}

package/dist/layouts/docs/navbar.js

@@ -1,22 +1,20 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useSidebar } from '../../contexts/sidebar';
-import { useContext } from 'react';
-import { NavContext } from '../../components/layout/nav';
+import { useNav } from '../../components/layout/nav';
 import { cn } from '../../utils/cn';
 import { SidebarTrigger } from 'fumadocs-core/sidebar';
 import { buttonVariants } from '../../components/ui/button';
 import { Menu, X } from 'lucide-react';
 export function Navbar(props) {
     const { open } = useSidebar();
-    const { isTransparent } = useContext(NavContext);
-    return (_jsx("header", { id: "nd-subnav", ...props, className: cn('sticky top-[var(--fd-banner-height)] z-40 flex flex-row items-center border-b border-fd-foreground/10 px-4 transition-colors', (!isTransparent || open) && 'bg-fd-background/80 backdrop-blur-lg', props.className), children: props.children }));
+    const { isTransparent } = useNav();
+    return (_jsx("header", { ...props, className: cn('sticky top-[var(--fd-banner-height)] z-30 flex flex-row items-center border-b border-fd-foreground/10 px-4 transition-colors', (!isTransparent || open) && 'bg-fd-background/80 backdrop-blur-lg', props.className), children: props.children }));
 }
-export function NavbarSidebarTrigger() {
+export function NavbarSidebarTrigger(props) {
     const { open } = useSidebar();
-    return (_jsx(SidebarTrigger, { className: cn(buttonVariants({
+    return (_jsx(SidebarTrigger, { ...props, className: cn(buttonVariants({
             color: 'ghost',
             size: 'icon',
-            className: '-me-2 md:hidden',
-        })), children: open ? _jsx(X, {}) : _jsx(Menu, {}) }));
+        }), props.className), children: open ? _jsx(X, {}) : _jsx(Menu, {}) }));
 }

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

@@ -0,0 +1,41 @@
+import { type LinkItemType } from '../../layouts/links';
+import { type SidebarProps } from '../../layouts/docs/sidebar';
+import type { PageTree } from 'fumadocs-core/server';
+import { type TabOptions } from '../../utils/get-sidebar-tabs';
+import type { FC, ReactNode } from 'react';
+import type { Option } from '../../components/layout/root-toggle';
+export interface SidebarOptions extends SidebarProps {
+    enabled: boolean;
+    component: ReactNode;
+    collapsible?: boolean;
+    components?: Partial<SidebarComponents>;
+    /**
+     * Root Toggle options
+     */
+    tabs?: Option[] | TabOptions | false;
+    banner?: ReactNode;
+    footer?: ReactNode;
+    /**
+     * Hide search trigger
+     *
+     * @defaultValue false
+     */
+    hideSearch?: boolean;
+}
+export interface SidebarComponents {
+    Item: FC<{
+        item: PageTree.Item;
+    }>;
+    Folder: FC<{
+        item: PageTree.Folder;
+        level: number;
+    }>;
+    Separator: FC<{
+        item: PageTree.Separator;
+    }>;
+}
+export declare function SidebarLinkItem({ item }: {
+    item: LinkItemType;
+}): string | number | bigint | boolean | Iterable<ReactNode> | Promise<import("react").AwaitedReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare function getSidebarTabsFromOptions(options: SidebarOptions['tabs'], tree: PageTree.Root): Option[] | undefined;
+//# sourceMappingURL=shared.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAClE,OAAO,EAML,KAAK,YAAY,EAClB,MAAM,wBAAwB,CAAC;AAGhC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAE9D,MAAM,WAAW,cAAe,SAAQ,YAAY;IAClD,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;IAErB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAExC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,UAAU,GAAG,KAAK,CAAC;IAErC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAA;KAAE,CAAC,CAAC;IAClC,MAAM,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACrD,SAAS,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;CAC7C;AAED,wBAAgB,eAAe,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,YAAY,CAAA;CAAE,qKA+C/D;AAED,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,cAAc,CAAC,MAAM,CAAC,EAC/B,IAAI,EAAE,QAAQ,CAAC,IAAI,wBASpB"}

package/dist/layouts/docs/shared.js

@@ -0,0 +1,30 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { BaseLinkItem } from '../../layouts/links';
+import { SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarItem, } from '../../layouts/docs/sidebar';
+import { cn } from '../../utils/cn';
+import { buttonVariants } from '../../components/ui/button';
+import { getSidebarTabs } from '../../utils/get-sidebar-tabs';
+export function SidebarLinkItem({ item }) {
+    if (item.type === 'menu')
+        return (_jsxs(SidebarFolder, { level: 1, children: [item.url ? (_jsxs(SidebarFolderLink, { href: item.url, children: [item.icon, item.text] })) : (_jsxs(SidebarFolderTrigger, { children: [item.icon, item.text] })), _jsx(SidebarFolderContent, { children: item.items.map((child, i) => (_jsx(SidebarLinkItem, { item: child }, i))) })] }));
+    if (item.type === 'button') {
+        return (_jsxs(BaseLinkItem, { item: item, className: cn(buttonVariants({
+                color: 'secondary',
+                className: 'gap-1.5 [&_svg]:size-4',
+            })), children: [item.icon, item.text] }));
+    }
+    if (item.type === 'custom')
+        return item.children;
+    return (_jsx(SidebarItem, { href: item.url, icon: item.icon, external: item.external, children: item.text }));
+}
+export function getSidebarTabsFromOptions(options, tree) {
+    if (Array.isArray(options)) {
+        return options;
+    }
+    else if (typeof options === 'object') {
+        return getSidebarTabs(tree, options);
+    }
+    else if (options !== false) {
+        return getSidebarTabs(tree);
+    }
+}

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

@@ -2,6 +2,7 @@ import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from '
 import { type LinkProps } from 'fumadocs-core/link';
 import { type ScrollAreaProps } from '@radix-ui/react-scroll-area';
 import type { CollapsibleContentProps, CollapsibleTriggerProps } from '@radix-ui/react-collapsible';
+import type { SidebarComponents } from '../../layouts/docs/shared';
 export interface SidebarProps extends HTMLAttributes<HTMLElement> {
     /**
      * Open folders by default if their level is lower or equal to a specific level
@@ -37,4 +38,10 @@ export declare function SidebarFolderTrigger(props: CollapsibleTriggerProps): im
 export declare function SidebarFolderLink(props: LinkProps): import("react/jsx-runtime").JSX.Element;
 export declare function SidebarFolderContent(props: CollapsibleContentProps): import("react/jsx-runtime").JSX.Element;
 export declare function SidebarCollapseTrigger(props: ButtonHTMLAttributes<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Render sidebar items from page tree
+ */
+export declare function SidebarPageTree(props: {
+    components?: Partial<SidebarComponents>;
+}): ReactNode[];
 //# sourceMappingURL=sidebar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/sidebar.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,oBAAoB,EAEzB,KAAK,cAAc,EAEnB,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AACf,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAU1D,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAInE,OAAO,KAAK,EACV,uBAAuB,EACvB,uBAAuB,EACxB,MAAM,6BAA6B,CAAC;AAErC,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC/D;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6BD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,YAAY,2CA4DrD;AAED,wBAAgB,OAAO,CAAC,EACtB,gBAAoB,EACpB,QAAe,EACf,KAAK,EACL,GAAG,KAAK,EACT,EAAE,YAAY,GAAG;IAAE,KAAK,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAA;CAAE,2CAuC3D;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAYlE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAYlE;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,eAAe,2CAYrD;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,oBAAoB,CAAC,2CAY3E;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,SAAS,GAAG;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,2CAiBA;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,WAAW,EACX,GAAG,KAAK,EACT,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;CACf,2CAkBA;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,uBAAuB,2CAelE;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,2CA0CjD;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,uBAAuB,2CAQlE;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,2CAuB/C"}
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/sidebar.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,oBAAoB,EAEzB,KAAK,cAAc,EAEnB,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AACf,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAU1D,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAInE,OAAO,KAAK,EACV,uBAAuB,EACvB,uBAAuB,EACxB,MAAM,6BAA6B,CAAC;AAGrC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE/D,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC/D;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6BD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,YAAY,2CAqDrD;AAED,wBAAgB,OAAO,CAAC,EACtB,gBAAoB,EACpB,QAAe,EACf,KAAK,EACL,GAAG,KAAK,EACT,EAAE,YAAY,GAAG;IAAE,KAAK,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAA;CAAE,2CAuC3D;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAYlE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAYlE;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,eAAe,2CAYrD;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,oBAAoB,CAAC,2CAY3E;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,SAAS,GAAG;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,2CAiBA;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,WAAW,EACX,GAAG,KAAK,EACT,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;CACf,2CAkBA;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,uBAAuB,2CAelE;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,2CAiCjD;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,uBAAuB,2CAQlE;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,2CAwB/C;AAgBD;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACzC,eA2CA"}

package/dist/layouts/docs/sidebar.js

@@ -1,9 +1,9 @@
 '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 { ChevronDown, ExternalLink, SidebarIcon } from 'lucide-react';
 import * as Base from 'fumadocs-core/sidebar';
 import { usePathname } from 'next/navigation';
-import { createContext, useCallback, useContext, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { createContext, useCallback, useContext, useMemo, useRef, useState, } from 'react';
 import Link from 'fumadocs-core/link';
 import { useOnChange } from 'fumadocs-core/utils/use-on-change';
 import { cn } from '../../utils/cn';
@@ -13,6 +13,7 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '../../comp
 import { useSidebar } from '../../contexts/sidebar';
 import { buttonVariants } from '../../components/ui/button';
 import { cva } from 'class-variance-authority';
+import { useTreeContext, useTreePath } from '../../contexts/tree';
 const itemVariants = cva('flex flex-row items-center gap-2 rounded-md px-3 py-2 text-fd-muted-foreground transition-colors duration-100 [overflow-wrap:anywhere] md:px-2 md:py-1.5 [&_svg]:size-4', {
     variants: {
         active: {
@@ -49,10 +50,10 @@ export function CollapsibleSidebar(props) {
             ? 0
             : 500);
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsx(SidebarCollapseTrigger, { className: cn('fixed bottom-3 start-2 z-20 transition-opacity max-md:hidden', (!collapsed || hover) && 'opacity-0') }), _jsx(Sidebar, { ...props, onPointerEnter: onEnter, onPointerLeave: onLeave, className: cn('transition-[flex,margin,opacity,transform]', collapsed &&
-                    'md:-me-[var(--fd-sidebar-offset)] md:flex-initial md:translate-x-[calc(var(--fd-sidebar-offset)*-1)] rtl:md:translate-x-[var(--fd-sidebar-offset)]', collapsed && hover && 'md:translate-x-0', collapsed && !hover && 'md:z-10 md:opacity-0', props.className), style: {
-                    '--fd-sidebar-offset': 'calc(var(--fd-sidebar-width) - 30px)',
-                } })] }));
+    return (_jsx(Sidebar, { ...props, onPointerEnter: onEnter, onPointerLeave: onLeave, "data-collapsed": collapsed, className: cn('transition-[flex,margin,opacity,transform]', collapsed &&
+            'md:-me-[var(--fd-sidebar-width)] md:flex-initial md:translate-x-[calc(var(--fd-sidebar-offset)*-1)] rtl:md:translate-x-[var(--fd-sidebar-offset)]', collapsed && hover && 'z-50 md:translate-x-0', collapsed && !hover && 'md:opacity-0', props.className), style: {
+            '--fd-sidebar-offset': 'calc(var(--fd-sidebar-width) - 20px)',
+        } }));
 }
 export function Sidebar({ defaultOpenLevel = 0, prefetch = true, inner, ...props }) {
     const context = useMemo(() => {
@@ -64,7 +65,7 @@ export function Sidebar({ defaultOpenLevel = 0, prefetch = true, inner, ...props
     return (_jsx(Context.Provider, { value: context, children: _jsx(Base.SidebarList, { id: "nd-sidebar", blockScrollingWidth: 768, ...props, className: cn('fixed top-fd-layout-top z-30 bg-fd-card text-sm md:sticky md:h-[var(--fd-sidebar-height)] md:flex-1', 'max-md:inset-x-0 max-md:bottom-0 max-md:bg-fd-background/80 max-md:text-[15px] max-md:backdrop-blur-lg max-md:data-[open=false]:invisible', props.className), style: {
                 ...props.style,
                 '--fd-sidebar-height': 'calc(100dvh - var(--fd-banner-height) - var(--fd-nav-height))',
-            }, children: _jsx("div", { ...inner, className: cn('flex size-full flex-col pt-2 md:ms-auto md:w-[var(--fd-sidebar-width)] md:border-e md:pt-4', inner?.className), children: props.children }) }) }));
+            }, children: _jsx("div", { ...inner, className: cn('flex size-full max-w-full flex-col pt-2 md:ms-auto md:w-[var(--fd-sidebar-width)] md:border-e md:pt-4', inner?.className), children: props.children }) }) }));
 }
 export function SidebarHeader(props) {
     return (_jsx("div", { ...props, className: cn('flex flex-col gap-2 px-4 empty:hidden md:px-3', props.className), children: props.children }));
@@ -105,17 +106,9 @@ export function SidebarFolderLink(props) {
     const { prefetch } = useInternalContext();
     const pathname = usePathname();
     const active = props.href !== undefined && isActive(props.href, pathname, false);
-    useLayoutEffect(() => {
-        if (active) {
-            setOpen(true);
-        }
-    }, [active, setOpen]);
     return (_jsxs(Link, { ...props, "data-active": active, className: cn(itemVariants({ active }), 'w-full pe-3.5 md:pe-1.5', props.className), onClick: (e) => {
-            if (
-            // clicking on icon
-            e.target.hasAttribute('data-icon') ||
-                active) {
-                setOpen((prev) => !prev);
+            setOpen((prev) => !active || !prev);
+            if (e.target.hasAttribute('data-icon')) {
                 e.preventDefault();
             }
         }, prefetch: prefetch, children: [props.children, _jsx(ChevronDown, { "data-icon": true, className: cn('ms-auto transition-transform', !open && '-rotate-90') })] }));
@@ -124,13 +117,13 @@ export function SidebarFolderContent(props) {
     return (_jsx(CollapsibleContent, { ...props, children: _jsx("div", { className: "ms-3 border-s py-1.5 ps-1.5 md:ms-2 md:ps-2", children: props.children }) }));
 }
 export function SidebarCollapseTrigger(props) {
-    const { setCollapsed } = useSidebar();
-    return (_jsx("button", { type: "button", "aria-label": "Collapse Sidebar", ...props, className: cn(buttonVariants({
+    const { collapsed, setCollapsed } = useSidebar();
+    return (_jsx("button", { type: "button", "aria-label": "Collapse Sidebar", "data-collapsed": collapsed, ...props, className: cn(buttonVariants({
             color: 'ghost',
             size: 'icon',
         }), props.className), onClick: () => {
             setCollapsed((prev) => !prev);
-        }, children: _jsx(SidebarIcon, {}) }));
+        }, children: props.children ?? _jsx(SidebarIcon, {}) }));
 }
 function useFolderContext() {
     const ctx = useContext(FolderContext);
@@ -144,3 +137,36 @@ function useInternalContext() {
         throw new Error('<Sidebar /> component required.');
     return ctx;
 }
+/**
+ * Render sidebar items from page tree
+ */
+export function SidebarPageTree(props) {
+    const { root } = useTreeContext();
+    return useMemo(() => {
+        function renderSidebarList(items, level) {
+            const { Separator, Item, Folder } = props.components ?? {};
+            return items.map((item, i) => {
+                const id = `${item.type}_${i.toString()}`;
+                switch (item.type) {
+                    case 'separator':
+                        if (Separator)
+                            return _jsx(Separator, { item: item }, id);
+                        return _jsx(SidebarSeparator, { children: item.name }, id);
+                    case 'folder':
+                        if (Folder)
+                            return _jsx(Folder, { item: item, level: level + 1 }, id);
+                        return (_jsx(PageTreeFolder, { item: item, level: level + 1, children: renderSidebarList(item.children, level + 1) }, id));
+                    default:
+                        if (Item)
+                            return _jsx(Item, { item: item }, item.url);
+                        return (_jsx(SidebarItem, { href: item.url, external: item.external, icon: item.icon, children: item.name }, item.url));
+                }
+            });
+        }
+        return renderSidebarList(root.children, 1);
+    }, [root, props.components]);
+}
+function PageTreeFolder({ item, children, level, }) {
+    const path = useTreePath();
+    return (_jsxs(SidebarFolder, { defaultOpen: item.defaultOpen || path.includes(item), level: level + 1, children: [item.index ? (_jsxs(SidebarFolderLink, { href: item.index.url, external: item.index.external, children: [item.icon, item.name] })) : (_jsxs(SidebarFolderTrigger, { children: [item.icon, item.name] })), _jsx(SidebarFolderContent, { children: children })] }));
+}