fumadocs-ui 15.0.7 → 15.0.8

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

@@ -1,6 +1,5 @@
 import type { TOCItemType } from 'fumadocs-core/server';
-export default function ClerkTOCItems({ items, }: {
+export default function ClerkTOCItems({ items }: {
     items: TOCItemType[];
-    isMenu?: boolean;
 }): 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,GACN,EAAE;IACD,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,2CAgGA"}
+{"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"}

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

@@ -1,13 +1,11 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, 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.js';
 import { TocThumb } from '../../components/layout/toc-thumb.js';
-import { ScrollArea, ScrollViewport } from '../ui/scroll-area.js';
 import { TocItemsEmpty } from '../../components/layout/toc.js';
-export default function ClerkTOCItems({ items, }) {
-    const viewRef = useRef(null);
+export default function ClerkTOCItems({ items }) {
     const containerRef = useRef(null);
     const [svg, setSvg] = useState();
     useEffect(() => {
@@ -47,13 +45,13 @@ export default function ClerkTOCItems({ items, }) {
     }, [items]);
     if (items.length === 0)
         return _jsx(TocItemsEmpty, {});
-    return (_jsx(ScrollArea, { className: "flex flex-col ps-px", 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,
-                        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(Primitive.ScrollProvider, { containerRef: viewRef, children: _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))) }) })] }) }));
+    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))) })] }));
 }
 function getItemOffset(depth) {
     if (depth <= 2)

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

@@ -1,5 +1,6 @@
 import type { TOCItemType } from 'fumadocs-core/server';
 import { type ComponentProps, type HTMLAttributes, type ReactNode } from 'react';
+import { ScrollArea } from '../ui/scroll-area.js';
 import type { PopoverContentProps, PopoverTriggerProps } from '@radix-ui/react-popover';
 import { Collapsible } from '../../components/ui/collapsible.js';
 export interface TOCProps {
@@ -15,10 +16,12 @@ export interface TOCProps {
 }
 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[];
+export declare function TOCScrollArea({ isMenu, ...props }: ComponentProps<typeof ScrollArea> & {
     isMenu?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function TOCItems({ items }: {
+    items: TOCItemType[];
+}): import("react/jsx-runtime").JSX.Element;
 type MakeRequired<T, K extends keyof T> = T & {
     [P in K]-?: T[P];
 };

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

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

package/dist/components/layout/toc.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as Primitive from 'fumadocs-core/toc';
 import { createContext, use, useMemo, useRef, } from 'react';
 import { cn } from '../../utils/cn.js';
@@ -20,12 +20,15 @@ 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, }) {
-    const containerRef = useRef(null);
+export function TOCScrollArea({ isMenu, ...props }) {
     const viewRef = useRef(null);
+    return (_jsx(ScrollArea, { ...props, className: cn('flex flex-col ps-px', props.className), children: _jsx(Primitive.ScrollProvider, { containerRef: viewRef, children: _jsx(ScrollViewport, { className: cn('relative min-h-0 text-sm', isMenu && 'mt-2 mb-4 mx-4 md:mx-6'), ref: viewRef, children: props.children }) }) }));
+}
+export function TOCItems({ items }) {
+    const containerRef = useRef(null);
     if (items.length === 0)
         return _jsx(TocItemsEmpty, {});
-    return (_jsx(ScrollArea, { className: "flex flex-col ps-px", children: _jsx(Primitive.ScrollProvider, { containerRef: viewRef, children: _jsxs(ScrollViewport, { className: cn('relative min-h-0  text-sm', isMenu && 'mt-2 mb-4 mx-4 md:mx-6'), ref: viewRef, children: [_jsx(TocThumb, { containerRef: containerRef, className: "absolute start-0 mt-(--fd-top) h-(--fd-height) w-px bg-fd-primary transition-all" }), _jsx("div", { ref: containerRef, className: "flex flex-col border-s border-fd-foreground/10", children: items.map((item) => (_jsx(TOCItem, { item: item }, item.url))) })] }) }) }));
+    return (_jsxs(_Fragment, { children: [_jsx(TocThumb, { containerRef: containerRef, className: "absolute start-0 mt-(--fd-top) h-(--fd-height) w-px bg-fd-primary transition-all" }), _jsx("div", { ref: containerRef, className: "flex flex-col border-s border-fd-foreground/10", children: items.map((item) => (_jsx(TOCItem, { item: item }, item.url))) })] }));
 }
 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 }));
@@ -44,7 +47,7 @@ export function TocPopoverTrigger({ items, ...props }) {
     const current = useMemo(() => {
         return items.find((item) => active === item.url.slice(1))?.title;
     }, [items, active]);
-    return (_jsxs(CollapsibleTrigger, { ...props, className: cn('inline-flex items-center text-sm gap-2 text-nowrap px-4 py-2 text-start md:px-6 md:py-3', props.className), children: [_jsx(Text, { className: "size-4 shrink-0" }), text.toc, _jsx(ChevronRight, { className: cn('size-4 shrink-0 text-fd-muted-foreground transition-all', !current && 'opacity-0', open ? 'rotate-90' : '-ms-1.5') }), _jsx("span", { className: cn('truncate text-fd-muted-foreground transition-opacity -ms-1.5', (!current || open) && 'opacity-0'), children: current })] }));
+    return (_jsxs(CollapsibleTrigger, { ...props, className: cn('inline-flex items-center text-sm gap-2 text-nowrap px-4 py-2 text-start md:px-6 md:py-3 focus-visible:outline-none', props.className), children: [_jsx(Text, { className: "size-4 shrink-0" }), text.toc, _jsx(ChevronRight, { className: cn('size-4 shrink-0 text-fd-muted-foreground transition-all', !current && 'opacity-0', open ? 'rotate-90' : '-ms-1.5') }), _jsx("span", { className: cn('truncate text-fd-muted-foreground transition-opacity -ms-1.5', (!current || open) && 'opacity-0'), children: current })] }));
 }
 export function TocPopoverContent(props) {
     return (_jsx(CollapsibleContent, { "data-toc-popover": "", className: "flex flex-col max-h-[50vh]", ...props, children: props.children }));

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

@@ -1,5 +1,5 @@
 export declare const buttonVariants: (props?: ({
     color?: "primary" | "outline" | "ghost" | "secondary" | null | undefined;
-    size?: "sm" | "icon" | null | undefined;
+    size?: "sm" | "icon" | "icon-sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //# 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":"AAEA,eAAO,MAAM,cAAc;;;8EAkB1B,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc;;;8EAmB1B,CAAC"}

package/dist/components/ui/button.js

@@ -10,6 +10,7 @@ export const buttonVariants = cva('inline-flex items-center justify-center round
         size: {
             sm: 'gap-1 p-0.5 text-xs',
             icon: 'p-1.5 [&_svg]:size-5',
+            'icon-sm': 'p-1.5 [&_svg]:size-4.5',
         },
     },
 });

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

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

package/dist/layouts/docs.client.js

@@ -1,15 +1,11 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronDown, Menu, X } from 'lucide-react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Menu, X } from 'lucide-react';
 import { cn } from '../utils/cn.js';
-import { BaseLinkItem } from '../layouts/links.js';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '../components/ui/collapsible.js';
-import { cva } from 'class-variance-authority';
 import { buttonVariants } from '../components/ui/button.js';
 import { useSidebar } from '../contexts/sidebar.js';
 import { useNav } from '../components/layout/nav.js';
 import { SidebarTrigger } from 'fumadocs-core/sidebar';
-const itemVariants = cva('flex flex-row items-center gap-2 rounded-md px-3 py-2.5 text-fd-muted-foreground transition-colors duration-100 [overflow-wrap:anywhere] hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none md:px-2 md:py-1.5 [&_svg]:size-4');
 export function Navbar(props) {
     const { open } = useSidebar();
     const { isTransparent } = useNav();
@@ -22,16 +18,3 @@ export function NavbarSidebarTrigger(props) {
             size: 'icon',
         }), props.className), children: open ? _jsx(X, {}) : _jsx(Menu, {}) }));
 }
-function MenuItem({ item, ...props }) {
-    if (item.type === 'custom')
-        return (_jsx("div", { ...props, className: cn('grid', props.className), children: item.children }));
-    if (item.type === 'menu') {
-        return (_jsxs(Collapsible, { className: "flex flex-col", children: [_jsxs(CollapsibleTrigger, { ...props, className: cn(itemVariants(), 'group', props.className), children: [item.icon, item.text, _jsx(ChevronDown, { className: "ms-auto transition-transform group-data-[state=closed]:-rotate-90" })] }), _jsx(CollapsibleContent, { children: _jsx("div", { className: "flex flex-col py-2 ps-2", children: item.items.map((child, i) => (_jsx(MenuItem, { item: child }, i))) }) })] }));
-    }
-    return (_jsxs(BaseLinkItem, { item: item, ...props, className: cn(item.type === 'button'
-            ? buttonVariants({
-                color: 'secondary',
-                className: 'gap-1.5 [&_svg]:size-4',
-            })
-            : itemVariants(), props.className), children: [item.icon, item.text] }));
-}

package/dist/layouts/docs.js

@@ -22,7 +22,7 @@ export function DocsLayout({ nav: { enabled: navEnabled = true, component: navRe
     const Aside = collapsible ? CollapsibleSidebar : Sidebar;
     const tabs = getSidebarTabsFromOptions(tabOptions, props.tree) ?? [];
     const variables = cn('[--fd-tocnav-height:36px] md:[--fd-sidebar-width:268px] lg:[--fd-sidebar-width:286px] xl:[--fd-toc-width:286px] xl:[--fd-tocnav-height:0px]', !navReplace && navEnabled
-        ? '[--fd-nav-height:3.5rem] md:[--fd-nav-height:0px]'
+        ? '[--fd-nav-height:calc(var(--spacing)*14)] md:[--fd-nav-height:0px]'
         : undefined);
     const pageStyles = {
         tocNav: cn('xl:hidden'),
@@ -47,14 +47,14 @@ function SidebarHeaderItems({ links, sidebarCollapsible, ...props }) {
         return null;
     return (_jsxs("div", { className: "flex flex-row items-center max-md:hidden", children: [props.title ? (_jsx(Link, { href: props.url ?? '/', className: "inline-flex text-[15px] items-center gap-2.5 py-1 font-medium", children: props.title })) : null, props.children, sidebarCollapsible && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
                     color: 'ghost',
-                    size: 'icon',
-                }), 'ms-auto text-fd-muted-foreground [&_svg]:size-4.5 max-md:hidden') }))] }));
+                    size: 'icon-sm',
+                }), 'ms-auto text-fd-muted-foreground max-md:hidden') }))] }));
 }
 function SidebarFooterItems({ i18n, disableThemeSwitch, links, }) {
     const iconItems = links.filter((v) => v.type === 'icon');
     // empty footer items
     if (links.length === 0 && !i18n && disableThemeSwitch)
         return null;
-    return (_jsxs("div", { className: "flex flex-row items-center", children: [iconItems.map((item, i) => (_jsx(BaseLinkItem, { item: item, className: cn(buttonVariants({ size: 'icon', color: 'ghost' }), 'text-fd-muted-foreground md:[&_svg]:size-4.5'), "aria-label": item.label, children: item.icon }, i))), _jsx("div", { role: "separator", className: "flex-1" }), i18n ? (_jsxs(LanguageToggle, { className: "me-1.5", children: [_jsx(Languages, { className: "size-5" }), _jsx(LanguageToggleText, { className: "md:hidden" })] })) : null, !disableThemeSwitch ? _jsx(ThemeToggle, { className: "p-0" }) : null] }));
+    return (_jsxs("div", { className: "flex flex-row items-center", children: [iconItems.map((item, i) => (_jsx(BaseLinkItem, { item: item, className: cn(buttonVariants({ size: 'icon', color: 'ghost' }), 'text-fd-muted-foreground md:[&_svg]:size-4.5'), "aria-label": item.label, children: item.icon }, i))), _jsx("div", { role: "separator", className: "flex-1" }), i18n ? (_jsxs(LanguageToggle, { className: "me-1.5", children: [_jsx(Languages, { className: "size-4.5" }), _jsx(LanguageToggleText, { className: "md:hidden" })] })) : null, !disableThemeSwitch ? _jsx(ThemeToggle, { className: "p-0" }) : null] }));
 }
 export { getSidebarTabsFromOptions } from './docs/shared.js';

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

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

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

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

package/dist/layouts/notebook.client.js

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

package/dist/layouts/notebook.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"notebook.d.ts","sourceRoot":"","sources":["../../src/layouts/notebook.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,EACL,KAAK,eAAe,EAGrB,MAAM,kBAAkB,CAAC;AA6B1B,OAAO,EAKL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAIrD,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IAEpB,OAAO,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC,CAAC;IAEjE,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,wBAAgB,UAAU,CAAC,EACzB,GAAG,EAAE,EAAE,eAAe,EAAE,GAAG,GAAG,EAAO,EACrC,OAAO,EAAE,EACP,WAAW,EAAE,kBAAyB,EACtC,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,aAAa,EACrB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,iBAAiB,EAC7B,GAAG,OAAO,EACN,EACN,IAAY,EACZ,GAAG,KAAK,EACT,EAAE,eAAe,GAAG,SAAS,CAwF7B"}
+{"version":3,"file":"notebook.d.ts","sourceRoot":"","sources":["../../src/layouts/notebook.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,kBAAkB,CAAC;AA4BlE,OAAO,EAKL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAWrD,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAE/B,GAAG,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,GAAG;QAC7B,IAAI,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;KACvB,CAAC;IAEF,OAAO,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC,CAAC;IAEjE,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAmB,EACnB,GAAG,EAAE,EAAE,eAAe,EAAE,GAAG,GAAG,EAAO,EACrC,OAAO,EAAE,EACP,WAAW,EAAE,kBAAyB,EACtC,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,aAAa,EACrB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,iBAAiB,EAC7B,GAAG,OAAO,EACN,EACN,IAAY,EACZ,GAAG,KAAK,EACT,EAAE,eAAe,2CA6GjB"}

package/dist/layouts/notebook.js

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

package/dist/page.client.js

@@ -104,7 +104,7 @@ export function Breadcrumb(options) {
     }, [options, 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 -mb-1.5", children: items.map((item, i) => {
+    return (_jsx("div", { className: "flex flex-row items-center gap-1.5 text-[15px] text-fd-muted-foreground", children: items.map((item, i) => {
             const className = cn('truncate', i === items.length - 1 && 'text-fd-primary font-medium');
             return (_jsxs(Fragment, { children: [i !== 0 && _jsx("span", { className: "text-fd-foreground/30", children: "/" }), item.url ? (_jsx(Link, { href: item.url, className: cn(className, 'transition-opacity hover:opacity-80'), children: item.name })) : (_jsx("span", { className: className, children: item.name }))] }, i));
         }) }));

package/dist/page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../src/page.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../src/page.tsx"],"names":[],"mappings":"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"}

package/dist/page.js

@@ -5,7 +5,7 @@ import { Card, Cards } from './components/card.js';
 import { replaceOrDefault } from './layouts/shared.js';
 import { cn } from './utils/cn.js';
 import { Footer, LastUpdate, TocPopoverHeader, Breadcrumb, PageBody, PageArticle, } from './page.client.js';
-import { Toc, TOCItems, TocPopoverTrigger, TocPopoverContent, } from './components/layout/toc.js';
+import { Toc, TOCItems, TocPopoverTrigger, TocPopoverContent, TOCScrollArea, } from './components/layout/toc.js';
 import { buttonVariants } from './components/ui/button.js';
 import { Edit, Text } from 'lucide-react';
 import { I18nLabel } from './contexts/i18n.js';
@@ -22,10 +22,10 @@ export function DocsPage({ toc = [], full = false, tableOfContentPopover: { enab
     return (_jsxs(AnchorProvider, { toc: toc, single: tocOptions.single, children: [_jsxs(PageBody, { ...props.container, className: cn(props.container?.className), style: {
                     '--fd-tocnav-height': !tocPopoverEnabled ? '0px' : undefined,
                     ...props.container?.style,
-                }, children: [replaceOrDefault({ enabled: tocPopoverEnabled, component: tocPopoverReplace }, _jsxs(TocPopoverHeader, { children: [_jsx(TocPopoverTrigger, { className: "w-full", items: toc }), _jsxs(TocPopoverContent, { children: [tocPopoverOptions.header, tocPopoverOptions.style === 'clerk' ? (_jsx(ClerkTOCItems, { items: toc, isMenu: true })) : (_jsx(TOCItems, { items: toc, isMenu: true })), tocPopoverOptions.footer] })] }), {
+                }, children: [replaceOrDefault({ enabled: tocPopoverEnabled, component: tocPopoverReplace }, _jsxs(TocPopoverHeader, { children: [_jsx(TocPopoverTrigger, { className: "w-full", items: toc }), _jsxs(TocPopoverContent, { children: [tocPopoverOptions.header, _jsx(TOCScrollArea, { isMenu: true, children: tocPopoverOptions.style === 'clerk' ? (_jsx(ClerkTOCItems, { items: toc })) : (_jsx(TOCItems, { items: toc })) }), tocPopoverOptions.footer] })] }), {
                         items: toc,
                         ...tocPopoverOptions,
-                    }), _jsxs(PageArticle, { ...props.article, className: cn(full || !tocEnabled ? 'max-w-[1120px]' : 'max-w-[860px]', props.article?.className), children: [replaceOrDefault(props.breadcrumb, _jsx(Breadcrumb, { ...props.breadcrumb })), props.children, _jsx("div", { role: "none", className: "flex-1" }), _jsxs("div", { className: "flex flex-row flex-wrap items-center justify-between gap-4 empty:hidden", children: [props.editOnGithub ? (_jsx(EditOnGitHub, { ...props.editOnGithub })) : null, props.lastUpdate ? (_jsx(LastUpdate, { date: new Date(props.lastUpdate) })) : null] }), replaceOrDefault(props.footer, _jsx(Footer, { items: props.footer?.items }))] })] }), replaceOrDefault({ enabled: tocEnabled, component: tocReplace }, _jsxs(Toc, { children: [tocOptions.header, _jsxs("h3", { className: "inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground", children: [_jsx(Text, { className: "size-4" }), _jsx(I18nLabel, { label: "toc" })] }), tocOptions.style === 'clerk' ? (_jsx(ClerkTOCItems, { items: toc })) : (_jsx(TOCItems, { items: toc })), tocOptions.footer] }), {
+                    }), _jsxs(PageArticle, { ...props.article, className: cn(full || !tocEnabled ? 'max-w-[1120px]' : 'max-w-[860px]', props.article?.className), children: [replaceOrDefault(props.breadcrumb, _jsx(Breadcrumb, { ...props.breadcrumb })), props.children, _jsx("div", { role: "none", className: "flex-1" }), _jsxs("div", { className: "flex flex-row flex-wrap items-center justify-between gap-4 empty:hidden", children: [props.editOnGithub ? (_jsx(EditOnGitHub, { ...props.editOnGithub })) : null, props.lastUpdate ? (_jsx(LastUpdate, { date: new Date(props.lastUpdate) })) : null] }), replaceOrDefault(props.footer, _jsx(Footer, { items: props.footer?.items }))] })] }), replaceOrDefault({ enabled: tocEnabled, component: tocReplace }, _jsxs(Toc, { children: [tocOptions.header, _jsxs("h3", { className: "inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground", children: [_jsx(Text, { className: "size-4" }), _jsx(I18nLabel, { label: "toc" })] }), _jsx(TOCScrollArea, { children: tocOptions.style === 'clerk' ? (_jsx(ClerkTOCItems, { items: toc })) : (_jsx(TOCItems, { items: toc })) }), tocOptions.footer] }), {
                 items: toc,
                 ...tocOptions,
             })] }));

package/dist/style.css

@@ -12,6 +12,7 @@
     --color-black: #000;
     --spacing: 0.25rem;
     --breakpoint-sm: 40rem;
+    --container-sm: 24rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -357,9 +358,6 @@
   .mx-4 {
     margin-inline: calc(var(--spacing) * 4);
   }
-  .mx-auto {
-    margin-inline: auto;
-  }
   .my-0 {
     margin-block: calc(var(--spacing) * 0);
   }
@@ -369,6 +367,9 @@
   .my-6 {
     margin-block: calc(var(--spacing) * 6);
   }
+  .my-auto {
+    margin-block: auto;
+  }
   .-ms-1 {
     margin-inline-start: calc(var(--spacing) * -1);
   }
@@ -399,6 +400,9 @@
   .me-2 {
     margin-inline-end: calc(var(--spacing) * 2);
   }
+  .me-auto {
+    margin-inline-end: auto;
+  }
   .prose {
     color: var(--tw-prose-body);
     max-width: none;
@@ -774,9 +778,6 @@
   .-mb-1 {
     margin-bottom: calc(var(--spacing) * -1);
   }
-  .-mb-1\.5 {
-    margin-bottom: calc(var(--spacing) * -1.5);
-  }
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
@@ -825,6 +826,10 @@
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
   }
+  .size-4\.5 {
+    width: calc(var(--spacing) * 4.5);
+    height: calc(var(--spacing) * 4.5);
+  }
   .size-5 {
     width: calc(var(--spacing) * 5);
     height: calc(var(--spacing) * 5);
@@ -933,6 +938,9 @@
   .max-w-screen-sm {
     max-width: var(--breakpoint-sm);
   }
+  .max-w-sm {
+    max-width: var(--container-sm);
+  }
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
@@ -1120,6 +1128,10 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
+  .border-b-2 {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 2px;
+  }
   .border-l {
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
@@ -1127,6 +1139,9 @@
   .border-fd-foreground\/10 {
     border-color: color-mix(in oklab, var(--color-fd-foreground) 10%, transparent);
   }
+  .border-fd-primary {
+    border-color: var(--color-fd-primary);
+  }
   .border-transparent {
     border-color: transparent;
   }
@@ -1274,6 +1289,9 @@
   .pe-4 {
     padding-inline-end: calc(var(--spacing) * 4);
   }
+  .pe-6 {
+    padding-inline-end: calc(var(--spacing) * 6);
+  }
   .pt-0 {
     padding-top: calc(var(--spacing) * 0);
   }
@@ -1465,8 +1483,8 @@
     --tw-duration: 300ms;
     transition-duration: 300ms;
   }
-  .\[--fd-nav-height\:3\.5rem\] {
-    --fd-nav-height: 3.5rem;
+  .\[--fd-nav-height\:calc\(var\(--spacing\)\*14\)\] {
+    --fd-nav-height: calc(var(--spacing) * 14);
   }
   .\[--fd-tocnav-height\:36px\] {
     --fd-tocnav-height: 36px;
@@ -1478,6 +1496,11 @@
     -webkit-user-select: none;
     user-select: none;
   }
+  .\*\:\!pt-0 {
+    :is(& > *) {
+      padding-top: calc(var(--spacing) * 0) !important;
+    }
+  }
   .group-hover\:opacity-100 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -1485,11 +1508,6 @@
       }
     }
   }
-  .group-data-\[state\=closed\]\:-rotate-90 {
-    &:is(:where(.group)[data-state="closed"] *) {
-      rotate: calc(90deg * -1);
-    }
-  }
   .group-data-\[state\=open\]\:rotate-180 {
     &:is(:where(.group)[data-state="open"] *) {
       rotate: 180deg;
@@ -1869,22 +1887,12 @@
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
-  .md\:gap-1\.5 {
-    @media (width >= 48rem) {
-      gap: calc(var(--spacing) * 1.5);
-    }
-  }
   .md\:border-e {
     @media (width >= 48rem) {
       border-inline-end-style: var(--tw-border-style);
       border-inline-end-width: 1px;
     }
   }
-  .md\:px-2 {
-    @media (width >= 48rem) {
-      padding-inline: calc(var(--spacing) * 2);
-    }
-  }
   .md\:px-6 {
     @media (width >= 48rem) {
       padding-inline: calc(var(--spacing) * 6);
@@ -1942,6 +1950,11 @@
       --fd-sidebar-width: 268px;
     }
   }
+  .md\:\[--fd-sidebar-width\:286px\] {
+    @media (width >= 48rem) {
+      --fd-sidebar-width: 286px;
+    }
+  }
   .lg\:mt-2 {
     @media (width >= 64rem) {
       margin-top: calc(var(--spacing) * 2);
@@ -1957,6 +1970,11 @@
       height: calc(var(--spacing) * 12);
     }
   }
+  .lg\:h-26 {
+    @media (width >= 64rem) {
+      height: calc(var(--spacing) * 26);
+    }
+  }
   .lg\:w-\[calc\(100\%-1rem\)\] {
     @media (width >= 64rem) {
       width: calc(100% - 1rem);
@@ -1978,6 +1996,11 @@
       border-width: 1px;
     }
   }
+  .lg\:\[--fd-nav-height\:calc\(var\(--spacing\)\*26\)\] {
+    @media (width >= 64rem) {
+      --fd-nav-height: calc(var(--spacing) * 26);
+    }
+  }
   .lg\:\[--fd-sidebar-width\:286px\] {
     @media (width >= 64rem) {
       --fd-sidebar-width: 286px;
@@ -1998,11 +2021,6 @@
       padding-inline: calc(var(--spacing) * 12);
     }
   }
-  .xl\:\[--fd-toc-width\:268px\] {
-    @media (width >= 80rem) {
-      --fd-toc-width: 268px;
-    }
-  }
   .xl\:\[--fd-toc-width\:286px\] {
     @media (width >= 80rem) {
       --fd-toc-width: 286px;
@@ -2037,6 +2055,12 @@
       background-color: var(--shiki-dark-bg);
     }
   }
+  .\[\&_svg\]\:\!size-4\.5 {
+    & svg {
+      width: calc(var(--spacing) * 4.5) !important;
+      height: calc(var(--spacing) * 4.5) !important;
+    }
+  }
   .\[\&_svg\]\:size-3\.5 {
     & svg {
       width: calc(var(--spacing) * 3.5);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "15.0.7",
+  "version": "15.0.8",
   "description": "The framework for building a documentation website in Next.js",
   "keywords": [
     "NextJs",
@@ -79,9 +79,9 @@
     "next": "15.1.6",
     "tailwindcss": "^4.0.5",
     "tsc-alias": "^1.8.10",
-    "@fumadocs/cli": "0.0.8",
     "eslint-config-custom": "0.0.0",
-    "fumadocs-core": "15.0.7",
+    "@fumadocs/cli": "0.0.8",
+    "fumadocs-core": "15.0.8",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {
@@ -89,7 +89,7 @@
     "react": "18.x.x || 19.x.x",
     "react-dom": "18.x.x || 19.x.x",
     "tailwindcss": "^3.4.14 || ^4.0.0",
-    "fumadocs-core": "15.0.7"
+    "fumadocs-core": "15.0.8"
   },
   "peerDependenciesMeta": {
     "tailwindcss": {