fumadocs-ui 15.0.7 → 15.0.9

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;AASnE,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,GAAG,EAAE,IAAI,EACT,GAAG,KAAK,EACT,EAAE,YAAY,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC,2CAgB3E;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,GAAG,KAAK,EACT,EAAE,mBAAmB,GAAG;IAAE,KAAK,EAAE,WAAW,EAAE,CAAA;CAAE,2CAmChD;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,mBAAmB,2CAU3D"}

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,19 +20,23 @@ 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 }));
 }
 const Context = createContext(null);
+const TocProvider = Context.Provider || Context;
 export function TocPopover({ open, onOpenChange, ref: _ref, ...props }) {
-    return (_jsx(Collapsible, { open: open, onOpenChange: onOpenChange, ...props, children: _jsx(Context, { value: useMemo(() => ({
+    return (_jsx(Collapsible, { open: open, onOpenChange: onOpenChange, ...props, children: _jsx(TocProvider, { value: useMemo(() => ({
                 open,
                 setOpen: onOpenChange,
             }), [onOpenChange, open]), children: props.children }) }));
@@ -44,7 +48,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/sidebar.js

@@ -130,7 +130,7 @@ export function SidebarFolderLink(props) {
 }
 export function SidebarFolderContent(props) {
     const ctx = useInternalContext();
-    return (_jsx(CollapsibleContent, { ...props, className: cn('relative', props.className), children: _jsxs(Context, { value: useMemo(() => ({
+    return (_jsx(CollapsibleContent, { ...props, className: cn('relative', props.className), children: _jsxs(Context.Provider, { value: useMemo(() => ({
                 ...ctx,
                 level: ctx.level + 1,
             }), [ctx]), children: [_jsx("div", { className: "absolute w-px inset-y-0 bg-fd-border start-3" }), props.children] }) }));

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,2CA2GjB"}

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,23 @@ 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' : '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 +64,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

@@ -1,17 +1,275 @@
-/*! tailwindcss v4.0.5 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.0.6 | MIT License | https://tailwindcss.com */
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
     --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-      "Liberation Mono", "Courier New", monospace;
+    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+      "Courier New", monospace;
+    --color-red-50: oklch(0.971 0.013 17.38);
+    --color-red-100: oklch(0.936 0.032 17.717);
+    --color-red-200: oklch(0.885 0.062 18.334);
+    --color-red-300: oklch(0.808 0.114 19.571);
+    --color-red-400: oklch(0.704 0.191 22.216);
     --color-red-500: oklch(0.637 0.237 25.331);
+    --color-red-600: oklch(0.577 0.245 27.325);
+    --color-red-700: oklch(0.505 0.213 27.518);
+    --color-red-800: oklch(0.444 0.177 26.899);
+    --color-red-900: oklch(0.396 0.141 25.723);
+    --color-red-950: oklch(0.258 0.092 26.042);
+    --color-orange-50: oklch(0.98 0.016 73.684);
+    --color-orange-100: oklch(0.954 0.038 75.164);
+    --color-orange-200: oklch(0.901 0.076 70.697);
+    --color-orange-300: oklch(0.837 0.128 66.29);
+    --color-orange-400: oklch(0.75 0.183 55.934);
     --color-orange-500: oklch(0.705 0.213 47.604);
+    --color-orange-600: oklch(0.646 0.222 41.116);
+    --color-orange-700: oklch(0.553 0.195 38.402);
+    --color-orange-800: oklch(0.47 0.157 37.304);
+    --color-orange-900: oklch(0.408 0.123 38.172);
+    --color-orange-950: oklch(0.266 0.079 36.259);
+    --color-amber-50: oklch(0.987 0.022 95.277);
+    --color-amber-100: oklch(0.962 0.059 95.617);
+    --color-amber-200: oklch(0.924 0.12 95.746);
+    --color-amber-300: oklch(0.879 0.169 91.605);
+    --color-amber-400: oklch(0.828 0.189 84.429);
+    --color-amber-500: oklch(0.769 0.188 70.08);
+    --color-amber-600: oklch(0.666 0.179 58.318);
+    --color-amber-700: oklch(0.555 0.163 48.998);
+    --color-amber-800: oklch(0.473 0.137 46.201);
+    --color-amber-900: oklch(0.414 0.112 45.904);
+    --color-amber-950: oklch(0.279 0.077 45.635);
+    --color-yellow-50: oklch(0.987 0.026 102.212);
+    --color-yellow-100: oklch(0.973 0.071 103.193);
+    --color-yellow-200: oklch(0.945 0.129 101.54);
+    --color-yellow-300: oklch(0.905 0.182 98.111);
+    --color-yellow-400: oklch(0.852 0.199 91.936);
+    --color-yellow-500: oklch(0.795 0.184 86.047);
+    --color-yellow-600: oklch(0.681 0.162 75.834);
+    --color-yellow-700: oklch(0.554 0.135 66.442);
+    --color-yellow-800: oklch(0.476 0.114 61.907);
+    --color-yellow-900: oklch(0.421 0.095 57.708);
+    --color-yellow-950: oklch(0.286 0.066 53.813);
+    --color-lime-50: oklch(0.986 0.031 120.757);
+    --color-lime-100: oklch(0.967 0.067 122.328);
+    --color-lime-200: oklch(0.938 0.127 124.321);
+    --color-lime-300: oklch(0.897 0.196 126.665);
+    --color-lime-400: oklch(0.841 0.238 128.85);
+    --color-lime-500: oklch(0.768 0.233 130.85);
+    --color-lime-600: oklch(0.648 0.2 131.684);
+    --color-lime-700: oklch(0.532 0.157 131.589);
+    --color-lime-800: oklch(0.453 0.124 130.933);
+    --color-lime-900: oklch(0.405 0.101 131.063);
+    --color-lime-950: oklch(0.274 0.072 132.109);
+    --color-green-50: oklch(0.982 0.018 155.826);
+    --color-green-100: oklch(0.962 0.044 156.743);
+    --color-green-200: oklch(0.925 0.084 155.995);
+    --color-green-300: oklch(0.871 0.15 154.449);
+    --color-green-400: oklch(0.792 0.209 151.711);
+    --color-green-500: oklch(0.723 0.219 149.579);
+    --color-green-600: oklch(0.627 0.194 149.214);
+    --color-green-700: oklch(0.527 0.154 150.069);
+    --color-green-800: oklch(0.448 0.119 151.328);
+    --color-green-900: oklch(0.393 0.095 152.535);
+    --color-green-950: oklch(0.266 0.065 152.934);
+    --color-emerald-50: oklch(0.979 0.021 166.113);
+    --color-emerald-100: oklch(0.95 0.052 163.051);
+    --color-emerald-200: oklch(0.905 0.093 164.15);
+    --color-emerald-300: oklch(0.845 0.143 164.978);
+    --color-emerald-400: oklch(0.765 0.177 163.223);
+    --color-emerald-500: oklch(0.696 0.17 162.48);
+    --color-emerald-600: oklch(0.596 0.145 163.225);
+    --color-emerald-700: oklch(0.508 0.118 165.612);
+    --color-emerald-800: oklch(0.432 0.095 166.913);
+    --color-emerald-900: oklch(0.378 0.077 168.94);
+    --color-emerald-950: oklch(0.262 0.051 172.552);
+    --color-teal-50: oklch(0.984 0.014 180.72);
+    --color-teal-100: oklch(0.953 0.051 180.801);
+    --color-teal-200: oklch(0.91 0.096 180.426);
+    --color-teal-300: oklch(0.855 0.138 181.071);
+    --color-teal-400: oklch(0.777 0.152 181.912);
+    --color-teal-500: oklch(0.704 0.14 182.503);
+    --color-teal-600: oklch(0.6 0.118 184.704);
+    --color-teal-700: oklch(0.511 0.096 186.391);
+    --color-teal-800: oklch(0.437 0.078 188.216);
+    --color-teal-900: oklch(0.386 0.063 188.416);
+    --color-teal-950: oklch(0.277 0.046 192.524);
+    --color-cyan-50: oklch(0.984 0.019 200.873);
+    --color-cyan-100: oklch(0.956 0.045 203.388);
+    --color-cyan-200: oklch(0.917 0.08 205.041);
+    --color-cyan-300: oklch(0.865 0.127 207.078);
+    --color-cyan-400: oklch(0.789 0.154 211.53);
+    --color-cyan-500: oklch(0.715 0.143 215.221);
+    --color-cyan-600: oklch(0.609 0.126 221.723);
+    --color-cyan-700: oklch(0.52 0.105 223.128);
+    --color-cyan-800: oklch(0.45 0.085 224.283);
+    --color-cyan-900: oklch(0.398 0.07 227.392);
+    --color-cyan-950: oklch(0.302 0.056 229.695);
+    --color-sky-50: oklch(0.977 0.013 236.62);
+    --color-sky-100: oklch(0.951 0.026 236.824);
+    --color-sky-200: oklch(0.901 0.058 230.902);
+    --color-sky-300: oklch(0.828 0.111 230.318);
+    --color-sky-400: oklch(0.746 0.16 232.661);
+    --color-sky-500: oklch(0.685 0.169 237.323);
+    --color-sky-600: oklch(0.588 0.158 241.966);
+    --color-sky-700: oklch(0.5 0.134 242.749);
+    --color-sky-800: oklch(0.443 0.11 240.79);
+    --color-sky-900: oklch(0.391 0.09 240.876);
+    --color-sky-950: oklch(0.293 0.066 243.157);
+    --color-blue-50: oklch(0.97 0.014 254.604);
+    --color-blue-100: oklch(0.932 0.032 255.585);
+    --color-blue-200: oklch(0.882 0.059 254.128);
+    --color-blue-300: oklch(0.809 0.105 251.813);
+    --color-blue-400: oklch(0.707 0.165 254.624);
     --color-blue-500: oklch(0.623 0.214 259.815);
+    --color-blue-600: oklch(0.546 0.245 262.881);
+    --color-blue-700: oklch(0.488 0.243 264.376);
+    --color-blue-800: oklch(0.424 0.199 265.638);
+    --color-blue-900: oklch(0.379 0.146 265.522);
+    --color-blue-950: oklch(0.282 0.091 267.935);
+    --color-indigo-50: oklch(0.962 0.018 272.314);
+    --color-indigo-100: oklch(0.93 0.034 272.788);
+    --color-indigo-200: oklch(0.87 0.065 274.039);
+    --color-indigo-300: oklch(0.785 0.115 274.713);
+    --color-indigo-400: oklch(0.673 0.182 276.935);
+    --color-indigo-500: oklch(0.585 0.233 277.117);
+    --color-indigo-600: oklch(0.511 0.262 276.966);
+    --color-indigo-700: oklch(0.457 0.24 277.023);
+    --color-indigo-800: oklch(0.398 0.195 277.366);
+    --color-indigo-900: oklch(0.359 0.144 278.697);
+    --color-indigo-950: oklch(0.257 0.09 281.288);
+    --color-violet-50: oklch(0.969 0.016 293.756);
+    --color-violet-100: oklch(0.943 0.029 294.588);
+    --color-violet-200: oklch(0.894 0.057 293.283);
+    --color-violet-300: oklch(0.811 0.111 293.571);
+    --color-violet-400: oklch(0.702 0.183 293.541);
+    --color-violet-500: oklch(0.606 0.25 292.717);
+    --color-violet-600: oklch(0.541 0.281 293.009);
+    --color-violet-700: oklch(0.491 0.27 292.581);
+    --color-violet-800: oklch(0.432 0.232 292.759);
+    --color-violet-900: oklch(0.38 0.189 293.745);
+    --color-violet-950: oklch(0.283 0.141 291.089);
+    --color-purple-50: oklch(0.977 0.014 308.299);
+    --color-purple-100: oklch(0.946 0.033 307.174);
+    --color-purple-200: oklch(0.902 0.063 306.703);
+    --color-purple-300: oklch(0.827 0.119 306.383);
+    --color-purple-400: oklch(0.714 0.203 305.504);
+    --color-purple-500: oklch(0.627 0.265 303.9);
+    --color-purple-600: oklch(0.558 0.288 302.321);
+    --color-purple-700: oklch(0.496 0.265 301.924);
+    --color-purple-800: oklch(0.438 0.218 303.724);
+    --color-purple-900: oklch(0.381 0.176 304.987);
+    --color-purple-950: oklch(0.291 0.149 302.717);
+    --color-fuchsia-50: oklch(0.977 0.017 320.058);
+    --color-fuchsia-100: oklch(0.952 0.037 318.852);
+    --color-fuchsia-200: oklch(0.903 0.076 319.62);
+    --color-fuchsia-300: oklch(0.833 0.145 321.434);
+    --color-fuchsia-400: oklch(0.74 0.238 322.16);
+    --color-fuchsia-500: oklch(0.667 0.295 322.15);
+    --color-fuchsia-600: oklch(0.591 0.293 322.896);
+    --color-fuchsia-700: oklch(0.518 0.253 323.949);
+    --color-fuchsia-800: oklch(0.452 0.211 324.591);
+    --color-fuchsia-900: oklch(0.401 0.17 325.612);
+    --color-fuchsia-950: oklch(0.293 0.136 325.661);
+    --color-pink-50: oklch(0.971 0.014 343.198);
+    --color-pink-100: oklch(0.948 0.028 342.258);
+    --color-pink-200: oklch(0.899 0.061 343.231);
+    --color-pink-300: oklch(0.823 0.12 346.018);
+    --color-pink-400: oklch(0.718 0.202 349.761);
+    --color-pink-500: oklch(0.656 0.241 354.308);
+    --color-pink-600: oklch(0.592 0.249 0.584);
+    --color-pink-700: oklch(0.525 0.223 3.958);
+    --color-pink-800: oklch(0.459 0.187 3.815);
+    --color-pink-900: oklch(0.408 0.153 2.432);
+    --color-pink-950: oklch(0.284 0.109 3.907);
+    --color-rose-50: oklch(0.969 0.015 12.422);
+    --color-rose-100: oklch(0.941 0.03 12.58);
+    --color-rose-200: oklch(0.892 0.058 10.001);
+    --color-rose-300: oklch(0.81 0.117 11.638);
+    --color-rose-400: oklch(0.712 0.194 13.428);
+    --color-rose-500: oklch(0.645 0.246 16.439);
+    --color-rose-600: oklch(0.586 0.253 17.585);
+    --color-rose-700: oklch(0.514 0.222 16.935);
+    --color-rose-800: oklch(0.455 0.188 13.697);
+    --color-rose-900: oklch(0.41 0.159 10.272);
+    --color-rose-950: oklch(0.271 0.105 12.094);
+    --color-slate-50: oklch(0.984 0.003 247.858);
+    --color-slate-100: oklch(0.968 0.007 247.896);
+    --color-slate-200: oklch(0.929 0.013 255.508);
+    --color-slate-300: oklch(0.869 0.022 252.894);
+    --color-slate-400: oklch(0.704 0.04 256.788);
+    --color-slate-500: oklch(0.554 0.046 257.417);
+    --color-slate-600: oklch(0.446 0.043 257.281);
+    --color-slate-700: oklch(0.372 0.044 257.287);
+    --color-slate-800: oklch(0.279 0.041 260.031);
+    --color-slate-900: oklch(0.208 0.042 265.755);
+    --color-slate-950: oklch(0.129 0.042 264.695);
+    --color-gray-50: oklch(0.985 0.002 247.839);
+    --color-gray-100: oklch(0.967 0.003 264.542);
+    --color-gray-200: oklch(0.928 0.006 264.531);
+    --color-gray-300: oklch(0.872 0.01 258.338);
+    --color-gray-400: oklch(0.707 0.022 261.325);
+    --color-gray-500: oklch(0.551 0.027 264.364);
+    --color-gray-600: oklch(0.446 0.03 256.802);
+    --color-gray-700: oklch(0.373 0.034 259.733);
+    --color-gray-800: oklch(0.278 0.033 256.848);
+    --color-gray-900: oklch(0.21 0.034 264.665);
+    --color-gray-950: oklch(0.13 0.028 261.692);
+    --color-zinc-50: oklch(0.985 0 0);
+    --color-zinc-100: oklch(0.967 0.001 286.375);
+    --color-zinc-200: oklch(0.92 0.004 286.32);
+    --color-zinc-300: oklch(0.871 0.006 286.286);
+    --color-zinc-400: oklch(0.705 0.015 286.067);
+    --color-zinc-500: oklch(0.552 0.016 285.938);
+    --color-zinc-600: oklch(0.442 0.017 285.786);
+    --color-zinc-700: oklch(0.37 0.013 285.805);
+    --color-zinc-800: oklch(0.274 0.006 286.033);
+    --color-zinc-900: oklch(0.21 0.006 285.885);
+    --color-zinc-950: oklch(0.141 0.005 285.823);
+    --color-neutral-50: oklch(0.985 0 0);
+    --color-neutral-100: oklch(0.97 0 0);
+    --color-neutral-200: oklch(0.922 0 0);
+    --color-neutral-300: oklch(0.87 0 0);
+    --color-neutral-400: oklch(0.708 0 0);
+    --color-neutral-500: oklch(0.556 0 0);
+    --color-neutral-600: oklch(0.439 0 0);
+    --color-neutral-700: oklch(0.371 0 0);
+    --color-neutral-800: oklch(0.269 0 0);
+    --color-neutral-900: oklch(0.205 0 0);
+    --color-neutral-950: oklch(0.145 0 0);
+    --color-stone-50: oklch(0.985 0.001 106.423);
+    --color-stone-100: oklch(0.97 0.001 106.424);
+    --color-stone-200: oklch(0.923 0.003 48.717);
+    --color-stone-300: oklch(0.869 0.005 56.366);
+    --color-stone-400: oklch(0.709 0.01 56.259);
+    --color-stone-500: oklch(0.553 0.013 58.071);
+    --color-stone-600: oklch(0.444 0.011 73.639);
+    --color-stone-700: oklch(0.374 0.01 67.558);
+    --color-stone-800: oklch(0.268 0.007 34.298);
+    --color-stone-900: oklch(0.216 0.006 56.043);
+    --color-stone-950: oklch(0.147 0.004 49.25);
     --color-black: #000;
+    --color-white: #fff;
     --spacing: 0.25rem;
     --breakpoint-sm: 40rem;
+    --breakpoint-md: 48rem;
+    --breakpoint-lg: 64rem;
+    --breakpoint-xl: 80rem;
+    --breakpoint-2xl: 96rem;
+    --container-3xs: 16rem;
+    --container-2xs: 18rem;
+    --container-xs: 20rem;
+    --container-sm: 24rem;
+    --container-md: 28rem;
+    --container-lg: 32rem;
+    --container-xl: 36rem;
+    --container-2xl: 42rem;
+    --container-3xl: 48rem;
+    --container-4xl: 56rem;
+    --container-5xl: 64rem;
+    --container-6xl: 72rem;
+    --container-7xl: 80rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -20,18 +278,88 @@
     --text-base--line-height: calc(1.5 / 1);
     --text-lg: 1.125rem;
     --text-lg--line-height: calc(1.75 / 1.125);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
     --text-3xl: 1.875rem;
     --text-3xl--line-height: calc(2.25 / 1.875);
+    --text-4xl: 2.25rem;
+    --text-4xl--line-height: calc(2.5 / 2.25);
+    --text-5xl: 3rem;
+    --text-5xl--line-height: 1;
+    --text-6xl: 3.75rem;
+    --text-6xl--line-height: 1;
+    --text-7xl: 4.5rem;
+    --text-7xl--line-height: 1;
+    --text-8xl: 6rem;
+    --text-8xl--line-height: 1;
+    --text-9xl: 8rem;
+    --text-9xl--line-height: 1;
+    --font-weight-thin: 100;
+    --font-weight-extralight: 200;
+    --font-weight-light: 300;
+    --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --font-weight-extrabold: 800;
+    --font-weight-black: 900;
+    --tracking-tighter: -0.05em;
+    --tracking-tight: -0.025em;
+    --tracking-normal: 0em;
+    --tracking-wide: 0.025em;
+    --tracking-wider: 0.05em;
+    --tracking-widest: 0.1em;
+    --leading-tight: 1.25;
+    --leading-snug: 1.375;
+    --leading-normal: 1.5;
+    --leading-relaxed: 1.625;
+    --leading-loose: 2;
+    --radius-xs: 0.125rem;
+    --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
     --radius-2xl: 1rem;
+    --radius-3xl: 1.5rem;
+    --radius-4xl: 2rem;
+    --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+    --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
+    --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
+    --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
+    --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
+    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
+    --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
+    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
+    --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
+    --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
+    --ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
+    --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    --animate-bounce: bounce 1s infinite;
+    --blur-xs: 4px;
     --blur-sm: 8px;
     --blur-md: 12px;
     --blur-lg: 16px;
+    --blur-xl: 24px;
+    --blur-2xl: 40px;
+    --blur-3xl: 64px;
+    --perspective-dramatic: 100px;
+    --perspective-near: 300px;
+    --perspective-normal: 500px;
+    --perspective-midrange: 800px;
+    --perspective-distant: 1200px;
+    --aspect-video: 16 / 9;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
@@ -357,9 +685,6 @@
   .mx-4 {
     margin-inline: calc(var(--spacing) * 4);
   }
-  .mx-auto {
-    margin-inline: auto;
-  }
   .my-0 {
     margin-block: calc(var(--spacing) * 0);
   }
@@ -369,6 +694,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 +727,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 +1105,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 +1153,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 +1265,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 +1455,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 +1466,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 +1616,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 +1810,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;
@@ -1485,11 +1830,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 +2209,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 +2272,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 +2292,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 +2318,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 +2343,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 +2377,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);
@@ -2223,6 +2569,27 @@
     transform: rotate(360deg);
   }
 }
+@keyframes ping {
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+@keyframes pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
 @keyframes fd-collapsible-down {
   from {
     height: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "15.0.7",
+  "version": "15.0.9",
   "description": "The framework for building a documentation website in Next.js",
   "keywords": [
     "NextJs",
@@ -71,17 +71,17 @@
     "tailwind-merge": "^3.0.1"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^15.1.6",
-    "@tailwindcss/cli": "^4.0.5",
+    "@next/eslint-plugin-next": "^15.1.7",
+    "@tailwindcss/cli": "^4.0.6",
     "@types/lodash.merge": "^4.6.9",
-    "@types/react": "^19.0.8",
+    "@types/react": "^19.0.9",
     "@types/react-dom": "^19.0.3",
-    "next": "15.1.6",
-    "tailwindcss": "^4.0.5",
+    "next": "15.1.7",
+    "tailwindcss": "^4.0.6",
     "tsc-alias": "^1.8.10",
     "@fumadocs/cli": "0.0.8",
     "eslint-config-custom": "0.0.0",
-    "fumadocs-core": "15.0.7",
+    "fumadocs-core": "15.0.9",
     "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.9"
   },
   "peerDependenciesMeta": {
     "tailwindcss": {