fumadocs-ui 15.4.2 → 15.5.1

package/dist/components/layout/sidebar.js

@@ -47,20 +47,22 @@ export function Sidebar({ defaultOpenLevel = 0, prefetch = true, collapsible = t
         const state = open ? 'open' : 'closed';
         return (_jsxs(Context.Provider, { value: context, children: [_jsx(Presence, { present: open, children: _jsx("div", { "data-state": state, className: "fixed z-40 inset-0 bg-black/30 backdrop-blur-sm data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out", onClick: () => setOpen(false) }) }), _jsx(Presence, { present: open, children: ({ present }) => (_jsx(RemoveScroll, { as: "aside", enabled: present, id: "nd-sidebar-mobile", ...props, "data-state": state, className: cn('fixed text-[15px] flex flex-col py-2 rounded-e-2xl border-e start-0 inset-y-0 w-[85%] max-w-[380px] z-40 bg-fd-background data-[state=open]:animate-fd-sidebar-in data-[state=closed]:animate-fd-sidebar-out', !present && 'invisible', props.className), children: props.children })) })] }));
     }
-    return (_jsx("aside", { id: "nd-sidebar", ...props, "data-collapsed": collapsed, className: cn('sticky shrink-0 flex flex-col items-end top-(--fd-sidebar-top) z-20 bg-fd-card text-sm h-(--fd-sidebar-height) w-(--fd-sidebar-width) *:w-(--fd-sidebar-width) border-e max-md:hidden', collapsed && [
+    return (_jsx("aside", { id: "nd-sidebar", ...props, "data-collapsed": collapsed, className: cn('fixed start-0 flex flex-col items-end top-(--fd-sidebar-top) bottom-(--fd-sidebar-margin) z-20 bg-fd-card text-sm border-e max-md:hidden *:w-(--fd-sidebar-width)', collapsed && [
             'rounded-xl border',
             hover
                 ? 'z-50 translate-x-2 shadow-lg'
                 : 'opacity-0 -translate-x-(--fd-sidebar-offset) rtl:translate-x-(--fd-sidebar-offset)',
         ], props.className), style: {
-            transition: ['top', 'opacity', 'margin', 'translate', 'width']
-                .map((v) => `${v} ease 200ms`)
+            transition: ['top', 'opacity', 'translate', 'width']
+                .map((v) => `${v} ease 250ms`)
                 .join(', '),
+            ...props.style,
             '--fd-sidebar-offset': 'calc(100% - 16px)',
             '--fd-sidebar-margin': collapsed ? '0.5rem' : '0px',
+            width: collapsed
+                ? 'var(--fd-sidebar-width)'
+                : 'calc(var(--fd-sidebar-width) + var(--fd-layout-offset))',
             '--fd-sidebar-top': `calc(var(--fd-banner-height) + var(--fd-nav-height) + var(--fd-sidebar-margin))`,
-            '--fd-sidebar-height': 'calc(100dvh - var(--fd-sidebar-top) - var(--fd-sidebar-margin))',
-            ...props.style,
         }, onPointerEnter: (e) => {
             if (!collapsible ||
                 !collapsed ||

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

@@ -1,5 +1,3 @@
-import type { TOCItemType } from 'fumadocs-core/server';
-export default function ClerkTOCItems({ items }: {
-    items: TOCItemType[];
-}): import("react/jsx-runtime").JSX.Element;
+import { type ComponentProps } from 'react';
+export default function ClerkTOCItems({ ref, className, ...props }: ComponentProps<'div'>): 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;AAOxD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,WAAW,EAAE,CAAA;CAAE,2CA2FxE"}
+{"version":3,"file":"toc-clerk.d.ts","sourceRoot":"","sources":["../../../src/components/layout/toc-clerk.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,cAAc,EAA+B,MAAM,OAAO,CAAC;AAOzE,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,2CAsGvB"}

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

@@ -4,9 +4,13 @@ import * as Primitive from 'fumadocs-core/toc';
 import { useEffect, useRef, useState } from 'react';
 import { cn } from '../../utils/cn.js';
 import { TocThumb } from '../../components/layout/toc-thumb.js';
-import { TocItemsEmpty } from '../../components/layout/toc.js';
-export default function ClerkTOCItems({ items }) {
+import { useTOCItems } from '../../components/layout/toc.js';
+import { mergeRefs } from '../../utils/merge-refs.js';
+import { useI18n } from '../../contexts/i18n.js';
+export default function ClerkTOCItems({ ref, className, ...props }) {
     const containerRef = useRef(null);
+    const items = useTOCItems();
+    const { text } = useI18n();
     const [svg, setSvg] = useState();
     useEffect(() => {
         if (!containerRef.current)
@@ -44,14 +48,14 @@ export default function ClerkTOCItems({ items }) {
         };
     }, [items]);
     if (items.length === 0)
-        return _jsx(TocItemsEmpty, {});
+        return (_jsx("div", { className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground", children: text.tocNoHeadings }));
     return (_jsxs(_Fragment, { children: [svg ? (_jsx("div", { className: "absolute start-0 top-0 rtl:-scale-x-100", style: {
                     width: svg.width,
                     height: svg.height,
                     maskImage: `url("data:image/svg+xml,${
                     // Inline SVG
                     encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svg.width} ${svg.height}"><path d="${svg.path}" stroke="black" stroke-width="1" fill="none" /></svg>`)}")`,
-                }, children: _jsx(TocThumb, { containerRef: containerRef, className: "mt-(--fd-top) h-(--fd-height) bg-fd-primary transition-all" }) })) : null, _jsx("div", { className: "flex flex-col", ref: containerRef, children: items.map((item, i) => (_jsx(TOCItem, { item: item, upper: items[i - 1]?.depth, lower: items[i + 1]?.depth }, item.url))) })] }));
+                }, children: _jsx(TocThumb, { containerRef: containerRef, className: "mt-(--fd-top) h-(--fd-height) bg-fd-primary transition-all" }) })) : null, _jsx("div", { ref: mergeRefs(containerRef, ref), className: cn('flex flex-col', className), ...props, children: items.map((item, i) => (_jsx(TOCItem, { item: item, upper: items[i - 1]?.depth, lower: items[i + 1]?.depth }, item.url))) })] }));
 }
 function getItemOffset(depth) {
     if (depth <= 2)

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

@@ -1,20 +1,8 @@
 import type { TOCItemType } from 'fumadocs-core/server';
-import { type ComponentProps, type HTMLAttributes, type ReactNode } from 'react';
-export interface TOCProps {
-    /**
-     * Custom content in TOC container, before the main TOC
-     */
-    header?: ReactNode;
-    /**
-     * Custom content in TOC container, after the main TOC
-     */
-    footer?: ReactNode;
-    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 TOCScrollArea(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-export declare function TOCItems({ items }: {
-    items: TOCItemType[];
-}): import("react/jsx-runtime").JSX.Element;
+import * as Primitive from 'fumadocs-core/toc';
+import { type ComponentProps } from 'react';
+export declare function useTOCItems(): TOCItemType[];
+export declare function TOCProvider({ toc, children, ...props }: ComponentProps<typeof Primitive.AnchorProvider>): import("react/jsx-runtime").JSX.Element;
+export declare function TOCScrollArea({ ref, className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function TOCItems({ ref, className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 //# 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,EACnB,KAAK,cAAc,EACnB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAMf,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,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAiBzD;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,WAAW,EAAE,CAAA;CAAE,2CAqB3D"}
+{"version":3,"file":"toc.d.ts","sourceRoot":"","sources":["../../../src/components/layout/toc.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,KAAK,SAAS,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,KAAK,cAAc,EAAqC,MAAM,OAAO,CAAC;AAQ/E,wBAAgB,WAAW,IAAI,WAAW,EAAE,CAE3C;AAED,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,SAAS,CAAC,cAAc,CAAC,2CAQjD;AAED,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,2CAiBvB;AAED,wBAAgB,QAAQ,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,2CAgC3E"}

package/dist/components/layout/toc.js

@@ -1,31 +1,29 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as Primitive from 'fumadocs-core/toc';
-import { useRef, } from 'react';
+import { createContext, useContext, useRef } from 'react';
 import { cn } from '../../utils/cn.js';
 import { useI18n } from '../../contexts/i18n.js';
 import { TocThumb } from '../../components/layout/toc-thumb.js';
-import { usePageStyles } from '../../contexts/layout.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: {
-            ...props.style,
-            '--fd-toc-height': 'calc(100dvh - var(--fd-banner-height) - var(--fd-nav-height))',
-        }, children: _jsx("div", { className: "flex h-full w-(--fd-toc-width) max-w-full flex-col pe-4", children: props.children }) }));
+import { mergeRefs } from '../../utils/merge-refs.js';
+const TOCContext = createContext([]);
+export function useTOCItems() {
+    return useContext(TOCContext);
 }
-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 TOCProvider({ toc, children, ...props }) {
+    return (_jsx(TOCContext, { value: toc, children: _jsx(Primitive.AnchorProvider, { toc: toc, ...props, children: children }) }));
 }
-export function TOCScrollArea(props) {
+export function TOCScrollArea({ ref, className, ...props }) {
     const viewRef = useRef(null);
-    return (_jsx("div", { ...props, ref: viewRef, className: cn('relative min-h-0 text-sm ms-px overflow-auto [scrollbar-width:none] [mask-image:linear-gradient(to_bottom,transparent,white_16px,white_calc(100%-16px),transparent)] py-3', props.className), children: _jsx(Primitive.ScrollProvider, { containerRef: viewRef, children: props.children }) }));
+    return (_jsx("div", { ref: mergeRefs(viewRef, ref), className: cn('relative min-h-0 text-sm ms-px overflow-auto [scrollbar-width:none] [mask-image:linear-gradient(to_bottom,transparent,white_16px,white_calc(100%-16px),transparent)] py-3', className), ...props, children: _jsx(Primitive.ScrollProvider, { containerRef: viewRef, children: props.children }) }));
 }
-export function TOCItems({ items }) {
+export function TOCItems({ ref, className, ...props }) {
     const containerRef = useRef(null);
+    const items = useTOCItems();
+    const { text } = useI18n();
     if (items.length === 0)
-        return _jsx(TocItemsEmpty, {});
-    return (_jsxs(_Fragment, { children: [_jsx(TocThumb, { containerRef: containerRef, className: "absolute top-(--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 (_jsx("div", { className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground", children: text.tocNoHeadings }));
+    return (_jsxs(_Fragment, { children: [_jsx(TocThumb, { containerRef: containerRef, className: "absolute top-(--fd-top) h-(--fd-height) w-px bg-fd-primary transition-all" }), _jsx("div", { ref: mergeRefs(ref, containerRef), className: cn('flex flex-col border-s border-fd-foreground/10', className), ...props, 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 }));

package/dist/components/tabs.d.ts

@@ -1,6 +1,6 @@
-import type { TabsContentProps, TabsProps as BaseProps } from '@radix-ui/react-tabs';
-import { type ReactNode } from 'react';
-export interface TabsProps extends BaseProps {
+import { type ComponentProps, type ReactNode } from 'react';
+import * as Primitive from './ui/tabs.js';
+export interface TabsProps extends ComponentProps<typeof Primitive.Tabs> {
     /**
      * Identifier for Sharing value of tabs
      */
@@ -30,13 +30,13 @@ export interface TabsProps extends BaseProps {
 }
 export declare const TabsList: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsListProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const TabsTrigger: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-export declare function Tabs({ groupId, items, persist, label, defaultIndex, updateAnchor, defaultValue, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
-export type TabProps = Omit<TabsContentProps, 'value'> & {
+export declare function Tabs({ ref, className, groupId, items, persist, label, defaultIndex, updateAnchor, defaultValue, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export interface TabProps extends Omit<ComponentProps<typeof Primitive.TabsContent>, 'value'> {
     /**
      * Value of tab, detect from index if unspecified.
      */
     value?: string;
-};
+}
 export declare function Tab({ value, ...props }: TabProps): import("react/jsx-runtime").JSX.Element;
-export declare function TabsContent({ value, className, ...props }: TabsContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function TabsContent({ value, className, ...props }: ComponentProps<typeof Primitive.TabsContent>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=tabs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,gBAAgB,EAChB,SAAS,IAAI,SAAS,EACvB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAEL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAuBf,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IAEjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAcD,eAAO,MAAM,QAAQ,sMAAqB,CAAC;AAC3C,eAAO,MAAM,WAAW,+MAAwB,CAAC;AAEjD,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,KAAK,EACL,OAAe,EACf,KAAK,EACL,YAAgB,EAChB,YAAoB,EACpB,YAAmE,EACnE,GAAG,KAAK,EACT,EAAE,SAAS,2CAmFX;AAED,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,GAAG;IACvD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,wBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,2CAgBhD;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAoB3E"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,SAAS,EAQf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,SAAS,MAAM,WAAW,CAAC;AAsBvC,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC;IACtE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IAEjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAcD,eAAO,MAAM,QAAQ,sMAAqB,CAAC;AAC3C,eAAO,MAAM,WAAW,+MAAwB,CAAC;AAEjD,wBAAgB,IAAI,CAAC,EACnB,GAAG,EACH,SAAS,EACT,OAAO,EACP,KAAK,EACL,OAAe,EACf,KAAK,EACL,YAAgB,EAChB,YAAoB,EACpB,YAAmE,EACnE,GAAG,KAAK,EACT,EAAE,SAAS,2CAsFX;AAED,MAAM,WAAW,QACf,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IACnE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,2CAgBhD;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,SAAS,CAAC,WAAW,CAAC,2CAoB9C"}

package/dist/components/tabs.js

@@ -1,9 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useId, useLayoutEffect, useMemo, useState, } from 'react';
+import { createContext, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { cn } from '../utils/cn.js';
 import * as Primitive from './ui/tabs.js';
 import { useEffectEvent } from 'fumadocs-core/utils/use-effect-event';
+import { mergeRefs } from '../utils/merge-refs.js';
 const listeners = new Map();
 function addChangeListener(id, listener) {
     const list = listeners.get(id) ?? [];
@@ -23,7 +24,8 @@ function useTabContext() {
 }
 export const TabsList = Primitive.TabsList;
 export const TabsTrigger = Primitive.TabsTrigger;
-export function Tabs({ groupId, items, persist = false, label, defaultIndex = 0, updateAnchor = false, defaultValue = items ? escapeValue(items[defaultIndex]) : undefined, ...props }) {
+export function Tabs({ ref, className, groupId, items, persist = false, label, defaultIndex = 0, updateAnchor = false, defaultValue = items ? escapeValue(items[defaultIndex]) : undefined, ...props }) {
+    const tabsRef = useRef(null);
     const [value, setValue] = useState(defaultValue);
     const valueToIdMap = useMemo(() => new Map(), []);
     const collection = useMemo(() => [], []);
@@ -52,11 +54,12 @@ export function Tabs({ groupId, items, persist = false, label, defaultIndex = 0,
         for (const [value, id] of valueToIdMap.entries()) {
             if (id === hash) {
                 setValue(value);
+                tabsRef.current?.scrollIntoView();
                 break;
             }
         }
     }, [valueToIdMap]);
-    return (_jsxs(Primitive.Tabs, { value: value, onValueChange: (v) => {
+    return (_jsxs(Primitive.Tabs, { ref: mergeRefs(ref, tabsRef), value: value, onValueChange: (v) => {
             if (updateAnchor) {
                 const id = valueToIdMap.get(v);
                 if (id) {
@@ -75,7 +78,7 @@ export function Tabs({ groupId, items, persist = false, label, defaultIndex = 0,
             else {
                 setValue(v);
             }
-        }, ...props, className: cn('my-4', props.className), children: [items && (_jsxs(TabsList, { children: [label && (_jsx("span", { className: "text-sm font-medium my-auto me-auto", children: label })), items.map((item) => (_jsx(TabsTrigger, { value: escapeValue(item), children: item }, item)))] })), _jsx(TabsContext.Provider, { value: useMemo(() => ({ items, valueToIdMap, collection }), [valueToIdMap, collection, items]), children: props.children })] }));
+        }, className: cn('my-4', className), ...props, children: [items && (_jsxs(TabsList, { children: [label && (_jsx("span", { className: "text-sm font-medium my-auto me-auto", children: label })), items.map((item) => (_jsx(TabsTrigger, { value: escapeValue(item), children: item }, item)))] })), _jsx(TabsContext.Provider, { value: useMemo(() => ({ items, valueToIdMap, collection }), [valueToIdMap, collection, items]), children: props.children })] }));
 }
 export function Tab({ value, ...props }) {
     const { items } = useTabContext();

package/dist/components/ui/button.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const buttonVariants: (props?: ({
     color?: "primary" | "outline" | "ghost" | "secondary" | null | undefined;
-    size?: "sm" | "icon" | "icon-sm" | null | undefined;
+    size?: "sm" | "icon" | "icon-sm" | "icon-xs" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ButtonProps = VariantProps<typeof buttonVariants>;
 //# sourceMappingURL=button.d.ts.map

package/dist/components/ui/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,cAAc;;;8EAmB1B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,cAAc;;;8EAoB1B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC"}

package/dist/components/ui/button.js

@@ -1,5 +1,5 @@
 import { cva } from 'class-variance-authority';
-export const buttonVariants = cva('inline-flex items-center justify-center rounded-md p-2 text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50', {
+export const buttonVariants = cva('inline-flex items-center justify-center rounded-md p-2 text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none', {
     variants: {
         color: {
             primary: 'bg-fd-primary text-fd-primary-foreground hover:bg-fd-primary/80',
@@ -11,6 +11,7 @@ export const buttonVariants = cva('inline-flex items-center justify-center round
             sm: 'gap-1 px-2 py-1.5 text-xs',
             icon: 'p-1.5 [&_svg]:size-5',
             'icon-sm': 'p-1.5 [&_svg]:size-4.5',
+            'icon-xs': 'p-1 [&_svg]:size-4',
         },
     },
 });

package/dist/contexts/search.d.ts

@@ -1,5 +1,4 @@
 import { type ComponentType, type ReactNode } from 'react';
-import type { SearchLink, SharedProps } from '../components/dialog/search.js';
 interface HotKey {
     display: ReactNode;
     /**
@@ -7,6 +6,15 @@ interface HotKey {
      */
     key: string | ((e: KeyboardEvent) => boolean);
 }
+export interface SharedProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+export type SearchLink = [name: string, href: string];
+export interface TagItem {
+    name: string;
+    value: string;
+}
 export interface SearchProviderProps {
     /**
      * Preload search dialog before opening it
@@ -33,7 +41,7 @@ export interface SearchProviderProps {
     /**
      * Additional props to the dialog
      */
-    options?: Partial<SharedProps>;
+    options?: Partial<SharedProps & Record<string, unknown>>;
     children?: ReactNode;
 }
 interface SearchContextType {

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,EACL,KAAK,aAAa,EAClB,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAG1E,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"}
+{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../src/contexts/search.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAGf,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,WAAW;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;AAEtD,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;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,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAEzD,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,2CAwCrB;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,aAI/D"}

package/dist/contexts/search.js

@@ -42,7 +42,9 @@ export function SearchProvider({ SearchDialog, children, preload = true, options
             window.removeEventListener('keydown', handler);
         };
     }, [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] }));
+    return (_jsxs(SearchContext.Provider, { value: useMemo(() => ({ enabled: true, hotKey, setOpenSearch: setIsOpen }), [hotKey]), children: [isOpen !== undefined && (_jsx(SearchDialog, { open: isOpen, onOpenChange: setIsOpen, 
+                // @ts-expect-error -- insert prop for official UIs
+                links: links, ...options })), children] }));
 }
 /**
  * Show children only when search is enabled via React Context

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-client.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/page-client.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EAMpB,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EACL,KAAK,iBAAiB,EAEvB,MAAM,0BAA0B,CAAC;AAWlC,OAAO,EAAE,KAAK,mBAAmB,EAAmB,MAAM,mBAAmB,CAAC;AAO9E,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAiDpE;AA4DD,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAUjE;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAuD1D;AAED,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,KAAK,CAAC;IACtD,GAAG,EAAE,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC,CAAC;CAC5C;AAED,wBAAgB,QAAQ,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAqB9D;AAED,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EAAE,KAAK,EACX,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,GAAG;IAAE,IAAI,EAAE,IAAI,GAAG,MAAM,CAAA;CAAE,2CAiBjE;AAED,KAAK,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,aAAa,GAAG,KAAK,CAAC,CAAC;AAChE,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,KAAK,CAAC;IACxD;;OAEG;IACH,KAAK,CAAC,EAAE;QACN,QAAQ,CAAC,EAAE,IAAI,CAAC;QAChB,IAAI,CAAC,EAAE,IAAI,CAAC;KACb,CAAC;CACH;AAyBD,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAiC1D;AA8BD,MAAM,MAAM,eAAe,GAAG,iBAAiB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAExE,wBAAgB,cAAc,CAAC,EAC7B,WAAmB,EACnB,gBAAgB,EAChB,WAAmB,EACnB,GAAG,KAAK,EACT,EAAE,eAAe,kDA6CjB;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAiBnD"}

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

@@ -1,27 +1,30 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useEffect, useMemo, useRef, useState, } from 'react';
-import { ChevronDown, ChevronLeft, ChevronRight } from './icons.js';
+import { ChevronDown, ChevronLeft, ChevronRight } from '../../icons.js';
 import Link from 'fumadocs-core/link';
-import { cn } from './utils/cn.js';
-import { useI18n } from './contexts/i18n.js';
-import { useTreeContext, useTreePath } from './contexts/tree.js';
+import { cn } from '../../utils/cn.js';
+import { useI18n } from '../../contexts/i18n.js';
+import { useTreeContext, useTreePath } from '../../contexts/tree.js';
 import { createContext, usePathname } from 'fumadocs-core/framework';
 import { getBreadcrumbItemsFromPath, } from 'fumadocs-core/breadcrumb';
-import { useNav, usePageStyles } from './contexts/layout.js';
-import { isActive } from './utils/is-active.js';
+import { useNav } from '../../contexts/layout.js';
+import { isActive } from '../../utils/is-active.js';
 import { useEffectEvent } from 'fumadocs-core/utils/use-effect-event';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from './components/ui/collapsible.js';
-import * as Primitive from 'fumadocs-core/toc';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '../../components/ui/collapsible.js';
+import { useSidebar } from '../../contexts/sidebar.js';
+import { TOCProvider, useTOCItems } from '../../components/layout/toc.js';
+import { useActiveAnchor } from 'fumadocs-core/toc';
 const TocPopoverContext = createContext('TocPopoverContext');
-export function TocPopoverTrigger({ items, ...props }) {
+export function PageTOCPopoverTrigger(props) {
     const { text } = useI18n();
     const { open } = TocPopoverContext.use();
-    const active = Primitive.useActiveAnchor();
+    const items = useTOCItems();
+    const active = useActiveAnchor();
     const selected = useMemo(() => items.findIndex((item) => active === item.url.slice(1)), [items, active]);
     const path = useTreePath().at(-1);
     const showItem = selected !== -1 && !open;
-    return (_jsxs(CollapsibleTrigger, { ...props, className: cn('flex 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: "grid flex-1 *:my-auto *:row-start-1 *:col-start-1", children: [_jsx("span", { className: cn('truncate transition-all', open && 'text-fd-foreground', showItem && 'opacity-0 -translate-y-full pointer-events-none'), children: path?.name ?? text.toc }), _jsx("span", { className: cn('truncate transition-all', !showItem && 'opacity-0 translate-y-full pointer-events-none'), children: items[selected]?.title })] }), _jsx(ChevronDown, { className: cn('transition-transform mx-0.5', open && 'rotate-180') })] }));
+    return (_jsxs(CollapsibleTrigger, { ...props, className: cn('flex w-full h-(--fd-tocnav-height) items-center text-sm text-fd-muted-foreground gap-2.5 px-4 py-2.5 text-start focus-visible:outline-none [&_svg]:shrink-0 [&_svg]:size-4 md:px-6', props.className), children: [_jsx(ProgressCircle, { value: (selected + 1) / Math.max(1, items.length), max: 1, className: cn(open && 'text-fd-primary') }), _jsxs("span", { className: "grid flex-1 *:my-auto *:row-start-1 *:col-start-1", children: [_jsx("span", { className: cn('truncate transition-all', open && 'text-fd-foreground', showItem && 'opacity-0 -translate-y-full pointer-events-none'), children: path?.name ?? text.toc }), _jsx("span", { className: cn('truncate transition-all', !showItem && 'opacity-0 translate-y-full pointer-events-none'), children: items[selected]?.title })] }), _jsx(ChevronDown, { className: cn('transition-transform mx-0.5', open && 'rotate-180') })] }));
 }
 function clamp(input, min, max) {
     if (input < min)
@@ -44,13 +47,13 @@ function ProgressCircle({ value, strokeWidth = 2, size = 24, min = 0, max = 100,
     };
     return (_jsxs("svg", { role: "progressbar", viewBox: `0 0 ${size} ${size}`, "aria-valuenow": normalizedValue, "aria-valuemin": min, "aria-valuemax": max, ...restSvgProps, children: [_jsx("circle", { ...circleProps, className: "stroke-current/25" }), _jsx("circle", { ...circleProps, stroke: "currentColor", strokeDasharray: circumference, strokeDashoffset: circumference - progress, strokeLinecap: "round", transform: `rotate(-90 ${size / 2} ${size / 2})`, className: "transition-all" })] }));
 }
-export function TocPopoverContent(props) {
-    return (_jsx(CollapsibleContent, { "data-toc-popover": "", ...props, className: cn('flex flex-col max-h-[50vh]', props.className), children: props.children }));
+export function PageTOCPopoverContent(props) {
+    return (_jsx(CollapsibleContent, { "data-toc-popover": "", ...props, className: cn('flex flex-col px-4 max-h-[50vh] md:px-6', props.className), children: props.children }));
 }
-export function TocPopover(props) {
+export function PageTOCPopover(props) {
     const ref = useRef(null);
     const [open, setOpen] = useState(false);
-    const { tocNav } = usePageStyles();
+    const { collapsed } = useSidebar();
     const { isTransparent } = useNav();
     const onClick = useEffectEvent((e) => {
         if (!open)
@@ -64,30 +67,35 @@ export function TocPopover(props) {
             window.removeEventListener('click', onClick);
         };
     }, [onClick]);
-    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(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 backdrop-blur-sm transition-colors', (!isTransparent || open) && 'bg-fd-background/80', open && 'shadow-lg'), children: props.children }) }) }) }));
-}
-export function PageBody(props) {
-    const { page } = usePageStyles();
-    return (_jsx("div", { id: "nd-page", ...props, className: cn('flex w-full min-w-0 flex-col', page, props.className), children: props.children }));
+    return (_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('fixed inset-x-0 z-10 border-b backdrop-blur-sm transition-colors xl:hidden', (!isTransparent || open) && 'bg-fd-background/80', open && 'shadow-lg', props.className), style: {
+                    ...props.style,
+                    top: 'calc(var(--fd-banner-height) + var(--fd-nav-height))',
+                    insetInlineStart: collapsed
+                        ? '0px'
+                        : 'calc(var(--fd-sidebar-width) + var(--fd-layout-offset))',
+                }, children: props.children }) }) }));
 }
-export function PageArticle(props) {
-    const { article } = usePageStyles();
-    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 PageRoot({ toc, children, ...props }) {
+    const { collapsed } = useSidebar();
+    return (_jsx(TOCProvider, { ...toc, children: _jsx("div", { id: "nd-page", ...props, className: cn('flex flex-1 mx-auto w-full', props.className), style: {
+                paddingTop: 'calc(var(--fd-nav-height) + var(--fd-tocnav-height))',
+                maxWidth: collapsed
+                    ? 'var(--fd-page-width)'
+                    : 'min(var(--fd-page-width),calc(var(--fd-layout-width) - var(--fd-sidebar-width)))',
+                ...props.style,
+            }, children: children }) }));
 }
-export function LastUpdate(props) {
+export function PageLastUpdate({ date: value, ...props }) {
     const { text } = useI18n();
     const [date, setDate] = useState('');
     useEffect(() => {
         // to the timezone of client
-        setDate(props.date.toLocaleDateString());
-    }, [props.date]);
-    return (_jsxs("p", { className: "text-sm text-fd-muted-foreground", children: [text.lastUpdate, " ", date] }));
+        setDate(new Date(value).toLocaleDateString());
+    }, [value]);
+    return (_jsxs("p", { ...props, className: cn('text-sm text-fd-muted-foreground', props.className), children: [text.lastUpdate, " ", date] }));
 }
 function scanNavigationList(tree) {
     const list = [];
@@ -106,7 +114,7 @@ function scanNavigationList(tree) {
     return list;
 }
 const listCache = new WeakMap();
-export function Footer({ items }) {
+export function PageFooter({ items, ...props }) {
     const { root } = useTreeContext();
     const pathname = usePathname();
     const { previous, next } = useMemo(() => {
@@ -123,26 +131,34 @@ export function Footer({ items }) {
             next: list[idx + 1],
         };
     }, [items, pathname, root]);
-    return (_jsxs("div", { className: cn('@container grid gap-4 pb-6', previous && next ? 'grid-cols-2' : 'grid-cols-1'), children: [previous ? _jsx(FooterItem, { item: previous, index: 0 }) : null, next ? _jsx(FooterItem, { item: next, index: 1 }) : null] }));
+    return (_jsxs("div", { ...props, className: cn('@container grid gap-4 pb-6', previous && next ? 'grid-cols-2' : 'grid-cols-1', props.className), children: [previous ? _jsx(FooterItem, { item: previous, index: 0 }) : null, next ? _jsx(FooterItem, { item: next, index: 1 }) : null] }));
 }
 function FooterItem({ item, index }) {
     const { text } = useI18n();
     const Icon = index === 0 ? ChevronLeft : ChevronRight;
     return (_jsxs(Link, { href: item.url, className: cn('flex flex-col gap-2 rounded-lg border p-4 text-sm transition-colors hover:bg-fd-accent/80 hover:text-fd-accent-foreground @max-lg:col-span-full', index === 1 && 'text-end'), children: [_jsxs("div", { className: cn('inline-flex items-center gap-1.5 font-medium', index === 1 && 'flex-row-reverse'), children: [_jsx(Icon, { className: "-mx-1 size-4 shrink-0 rtl:rotate-180" }), _jsx("p", { children: item.name })] }), _jsx("p", { className: "text-fd-muted-foreground truncate", children: item.description ?? (index === 0 ? text.previousPage : text.nextPage) })] }));
 }
-export function Breadcrumb(options) {
+export function PageBreadcrumb({ includeRoot = false, includeSeparator, includePage = false, ...props }) {
     const path = useTreePath();
     const { root } = useTreeContext();
     const items = useMemo(() => {
         return getBreadcrumbItemsFromPath(root, path, {
-            includePage: options.includePage ?? false,
-            ...options,
+            includePage,
+            includeSeparator,
+            includeRoot,
         });
-    }, [options, path, root]);
+    }, [includePage, includeRoot, includeSeparator, path, root]);
     if (items.length === 0)
         return null;
-    return (_jsx("div", { className: "flex flex-row items-center gap-1.5 text-[15px] text-fd-muted-foreground", children: items.map((item, i) => {
+    return (_jsx("div", { ...props, className: cn('flex items-center gap-1.5 text-[15px] text-fd-muted-foreground', props.className), children: items.map((item, i) => {
             const className = cn('truncate', i === items.length - 1 && 'text-fd-primary font-medium');
             return (_jsxs(Fragment, { children: [i !== 0 && _jsx("span", { className: "text-fd-foreground/30", children: "/" }), item.url ? (_jsx(Link, { href: item.url, className: cn(className, 'transition-opacity hover:opacity-80'), children: item.name })) : (_jsx("span", { className: className, children: item.name }))] }, i));
         }) }));
 }
+export function PageTOC(props) {
+    return (_jsx("div", { id: "nd-toc", ...props, className: cn('sticky pb-2 pt-12 max-xl:hidden', props.className), style: {
+            ...props.style,
+            top: 'calc(var(--fd-banner-height) + var(--fd-nav-height))',
+            height: 'calc(100dvh - var(--fd-banner-height) - var(--fd-nav-height))',
+        }, children: _jsx("div", { className: "flex h-full w-(--fd-toc-width) max-w-full flex-col pe-4", children: props.children }) }));
+}

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

@@ -0,0 +1,16 @@
+import { type ComponentProps } from 'react';
+import { type BreadcrumbProps, type FooterProps, PageBreadcrumb, PageFooter, PageLastUpdate, PageRoot, PageTOC, PageTOCPopover, PageTOCPopoverContent, PageTOCPopoverTrigger, type RootProps } from './page-client.js';
+/**
+ * Apply `prose` on div
+ */
+export declare function PageProse(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function PageTOCTitle(props: ComponentProps<'h2'>): import("react/jsx-runtime").JSX.Element;
+export declare function PageTOCItems({ variant, ...props }: ComponentProps<'div'> & {
+    variant?: 'clerk' | 'normal';
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PageTOCPopoverItems({ variant, ...props }: ComponentProps<'div'> & {
+    variant?: 'clerk' | 'normal';
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PageArticle(props: ComponentProps<'article'>): import("react/jsx-runtime").JSX.Element;
+export { PageRoot, PageBreadcrumb, PageFooter, PageLastUpdate, PageTOC, PageTOCPopover, PageTOCPopoverTrigger, PageTOCPopoverContent, type FooterProps, type BreadcrumbProps, type RootProps, };
+//# sourceMappingURL=page.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/page.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,cAAc,EACd,UAAU,EACV,cAAc,EACd,QAAQ,EACR,OAAO,EACP,cAAc,EACd,qBAAqB,EACrB,qBAAqB,EACrB,KAAK,SAAS,EACf,MAAM,eAAe,CAAC;AAMvB;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAMrD;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,2CAavD;AAED,wBAAgB,YAAY,CAAC,EAC3B,OAAkB,EAClB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAAE,2CAM1D;AAED,wBAAgB,mBAAmB,CAAC,EAClC,OAAkB,EAClB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAAE,2CAM1D;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,SAAS,CAAC,2CAY3D;AAED,OAAO,EACL,QAAQ,EACR,cAAc,EACd,UAAU,EACV,cAAc,EACd,OAAO,EACP,cAAc,EACd,qBAAqB,EACrB,qBAAqB,EACrB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,SAAS,GACf,CAAC"}

package/dist/layouts/docs/page.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../utils/cn.js';
+import { PageBreadcrumb, PageFooter, PageLastUpdate, PageRoot, PageTOC, PageTOCPopover, PageTOCPopoverContent, PageTOCPopoverTrigger, } from './page-client.js';
+import { TOCItems, TOCScrollArea } from '../../components/layout/toc.js';
+import { Text } from '../../icons.js';
+import { I18nLabel } from '../../contexts/i18n.js';
+import ClerkTOCItems from '../../components/layout/toc-clerk.js';
+/**
+ * Apply `prose` on div
+ */
+export function PageProse(props) {
+    return (_jsx("div", { ...props, className: cn('prose', props.className), children: props.children }));
+}
+export function PageTOCTitle(props) {
+    return (_jsxs("h3", { ...props, className: cn('inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground', props.className), children: [_jsx(Text, { className: "size-4" }), _jsx(I18nLabel, { label: "toc" })] }));
+}
+export function PageTOCItems({ variant = 'normal', ...props }) {
+    return (_jsx(TOCScrollArea, { ...props, children: variant === 'clerk' ? _jsx(ClerkTOCItems, {}) : _jsx(TOCItems, {}) }));
+}
+export function PageTOCPopoverItems({ variant = 'normal', ...props }) {
+    return (_jsx(TOCScrollArea, { ...props, children: variant === 'clerk' ? _jsx(ClerkTOCItems, {}) : _jsx(TOCItems, {}) }));
+}
+export function PageArticle(props) {
+    return (_jsx("article", { ...props, className: cn('flex min-w-0 w-full flex-col gap-6 px-4 pt-8 md:px-6 md:mx-auto xl:pt-12 xl:px-12', props.className), children: props.children }));
+}
+export { PageRoot, PageBreadcrumb, PageFooter, PageLastUpdate, PageTOC, PageTOCPopover, PageTOCPopoverTrigger, PageTOCPopoverContent, };

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

@@ -4,9 +4,6 @@ import type { PageTree } from 'fumadocs-core/server';
 import type { ReactNode } from 'react';
 import type { Option } from '../../components/layout/root-toggle.js';
 import { type GetSidebarTabsOptions } from '../../utils/get-sidebar-tabs.js';
-export declare const layoutVariables: {
-    '--fd-layout-offset': string;
-};
 export interface SidebarOptions extends SidebarProps {
     components?: Partial<SidebarComponents>;
     /**