fumadocs-ui 15.0.9 → 15.0.11

package/css/preset.css

@@ -72,6 +72,12 @@
   }
 }
 
+@property --radix-collapsible-content-height {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0px;
+}
+
 @utility container {
   margin-inline: auto;
   padding-inline: 1rem;

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

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

package/dist/components/layout/nav.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import Link from 'fumadocs-core/link';
-import { createContext, useContext, useEffect, useState, } from 'react';
+import { createContext, useContext, useEffect, useMemo, useState, } from 'react';
 import { cn } from '../../utils/cn.js';
 import { useI18n } from '../../contexts/i18n.js';
 const NavContext = createContext({
@@ -21,7 +21,7 @@ export function NavProvider({ transparentMode = 'none', children, }) {
             window.removeEventListener('scroll', listener);
         };
     }, [transparentMode]);
-    return (_jsx(NavContext.Provider, { value: { isTransparent: transparent }, children: children }));
+    return (_jsx(NavContext.Provider, { value: useMemo(() => ({ isTransparent: transparent }), [transparent]), children: children }));
 }
 export function useNav() {
     return useContext(NavContext);

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

@@ -22,7 +22,7 @@ export function RootToggle({ options, placeholder, ...props }) {
         setOpen(false);
     };
     const item = selected ? _jsx(Item, { ...selected }) : placeholder;
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [item ? (_jsxs(PopoverTrigger, { ...props, className: cn('flex flex-row items-center gap-2 rounded-lg ps-2 pe-4 py-1.5 hover:bg-fd-accent/50 hover:text-fd-accent-foreground', props.className), children: [item, _jsx(ChevronsUpDown, { className: "size-4 text-fd-muted-foreground" })] })) : null, _jsx(PopoverContent, { className: "w-(--radix-popover-trigger-width) overflow-hidden p-0", children: options.map((item) => (_jsx(Link, { href: item.url, onClick: onClick, ...item.props, className: cn('flex w-full flex-row items-center gap-2 px-2 py-1.5', selected === item
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [item ? (_jsxs(PopoverTrigger, { ...props, className: cn('flex flex-row items-center gap-2.5 rounded-lg ps-2 pe-4 py-1.5 hover:bg-fd-accent/50 hover:text-fd-accent-foreground', props.className), children: [item, _jsx(ChevronsUpDown, { className: "size-4 text-fd-muted-foreground" })] })) : null, _jsx(PopoverContent, { className: "w-(--radix-popover-trigger-width) overflow-hidden p-0", children: options.map((item) => (_jsx(Link, { href: item.url, onClick: onClick, ...item.props, className: cn('flex w-full flex-row items-center gap-2 px-2 py-1.5', selected === item
                         ? 'bg-fd-accent text-fd-accent-foreground'
                         : 'hover:bg-fd-accent/50', item.props?.className), children: _jsx(Item, { ...item }) }, item.url))) })] }));
 }

package/dist/components/layout/toc.js

@@ -48,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 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 })] }));
+    return (_jsxs(CollapsibleTrigger, { ...props, className: cn('inline-flex items-center text-sm gap-2 text-nowrap px-4 py-2.5 text-start md:px-6 focus-visible:outline-none', props.className), children: [_jsx(Text, { className: "size-4 shrink-0" }), text.toc, _jsx(ChevronRight, { className: cn('size-4 shrink-0 text-fd-muted-foreground transition-all', !current && 'opacity-0', open ? 'rotate-90' : '-ms-1.5') }), _jsx("span", { className: cn('truncate text-fd-muted-foreground transition-opacity -ms-1.5', (!current || open) && 'opacity-0'), children: current })] }));
 }
 export function TocPopoverContent(props) {
     return (_jsx(CollapsibleContent, { "data-toc-popover": "", className: "flex flex-col max-h-[50vh]", ...props, children: props.children }));

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

@@ -1 +1 @@
-{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../../src/components/ui/collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,oBAAoB,MAAM,6BAA6B,CAAC;AAIpE,QAAA,MAAM,WAAW,kIAA4B,CAAC;AAE9C,QAAA,MAAM,kBAAkB,4IAA0C,CAAC;AAEnE,QAAA,MAAM,kBAAkB,sMAgBtB,CAAC;AAKH,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../../src/components/ui/collapsible.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,oBAAoB,MAAM,6BAA6B,CAAC;AAIpE,QAAA,MAAM,WAAW,kIAA4B,CAAC;AAE9C,QAAA,MAAM,kBAAkB,4IAA0C,CAAC;AAEnE,QAAA,MAAM,kBAAkB,sMAwBtB,CAAC;AAKH,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/components/ui/collapsible.js

@@ -1,11 +1,17 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
-import { forwardRef } from 'react';
+import { forwardRef, useEffect, useState } from 'react';
 import { cn } from '../../utils/cn.js';
 const Collapsible = CollapsiblePrimitive.Root;
 const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
 const CollapsibleContent = forwardRef(({ children, ...props }, ref) => {
-    return (_jsx(CollapsiblePrimitive.CollapsibleContent, { ref: ref, ...props, className: cn('overflow-hidden [--radix-collapsible-content-height:0px] data-[state=closed]:animate-fd-collapsible-up data-[state=open]:animate-fd-collapsible-down', props.className), children: children }));
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    return (_jsx(CollapsiblePrimitive.CollapsibleContent, { ref: ref, ...props, className: cn('overflow-hidden', mounted &&
+            'data-[state=closed]:animate-fd-collapsible-up data-[state=open]:animate-fd-collapsible-down', props.className), children: children }));
 });
 CollapsibleContent.displayName =
     CollapsiblePrimitive.CollapsibleContent.displayName;

package/dist/i18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../src/i18n.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAEL,KAAK,YAAY,EAEjB,mBAAmB,EACnB,KAAK,UAAU,EAChB,MAAM,iBAAiB,CAAC;AAGzB,UAAU,iBAAiB;IACzB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAErC;;OAEG;IACH,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IAEvB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAE/B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,YAAY,CAAC,EAC3B,OAAY,EACZ,MAAM,EACN,GAAG,KAAK,EACT,EAAE,iBAAiB,2CAkCnB;AAED,OAAO,EAAE,mBAAmB,EAAE,KAAK,YAAY,EAAE,CAAC"}
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../src/i18n.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAEhD,OAAO,EACL,KAAK,YAAY,EAEjB,mBAAmB,EACnB,KAAK,UAAU,EAChB,MAAM,iBAAiB,CAAC;AAGzB,UAAU,iBAAiB;IACzB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAErC;;OAEG;IACH,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IAEvB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAE/B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,YAAY,CAAC,EAC3B,OAAY,EACZ,MAAM,EACN,GAAG,KAAK,EACT,EAAE,iBAAiB,2CAuCnB;AAED,OAAO,EAAE,mBAAmB,EAAE,KAAK,YAAY,EAAE,CAAC"}

package/dist/i18n.js

@@ -1,32 +1,34 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { useRouter, usePathname } from 'next/navigation';
-import { useI18n, I18nContext, defaultTranslations, } from './contexts/i18n.js';
+import { I18nContext, defaultTranslations, } from './contexts/i18n.js';
 import { useEffectEvent } from 'fumadocs-core/utils/use-effect-event';
 export function I18nProvider({ locales = [], locale, ...props }) {
-    const context = useI18n();
     const router = useRouter();
     const pathname = usePathname();
-    const onChange = useEffectEvent((value) => {
-        const segments = pathname.split('/').filter((v) => v.length > 0);
-        // If locale prefix hidden
-        if (segments[0] !== locale) {
-            segments.unshift(value);
-        }
-        else {
-            segments[0] = value;
-        }
-        router.push(`/${segments.join('/')}`);
-        router.refresh();
-    });
-    return (_jsx(I18nContext.Provider, { value: {
+    const onChange = props.onChange ??
+        // eslint-disable-next-line react-hooks/rules-of-hooks -- always controlled
+        useEffectEvent((value) => {
+            const segments = pathname.split('/').filter((v) => v.length > 0);
+            // If locale prefix hidden
+            if (segments[0] !== locale) {
+                segments.unshift(value);
+            }
+            else {
+                segments[0] = value;
+            }
+            router.push(`/${segments.join('/')}`);
+            router.refresh();
+        });
+    return (_jsx(I18nContext.Provider, { value: useMemo(() => ({
             locale,
             locales,
             text: {
-                ...context.text,
+                ...defaultTranslations,
                 ...props.translations,
             },
-            onChange: props.onChange ?? onChange,
-        }, children: props.children }));
+            onChange,
+        }), [locale, locales, onChange, props.translations]), children: props.children }));
 }
 export { defaultTranslations };

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

@@ -41,5 +41,5 @@ export declare function SidebarCollapseTrigger(props: ButtonHTMLAttributes<HTMLB
  */
 export declare function SidebarPageTree(props: {
     components?: Partial<SidebarComponents>;
-}): ReactNode[];
+}): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=sidebar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/sidebar.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,oBAAoB,EAEzB,KAAK,cAAc,EAEnB,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AACf,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAU1D,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAGnE,OAAO,KAAK,EACV,uBAAuB,EACvB,uBAAuB,EACxB,MAAM,6BAA6B,CAAC;AAGrC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE/D,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC/D;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2BD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,YAAY,2CAqDrD;AAED,wBAAgB,OAAO,CAAC,EACtB,gBAAoB,EACpB,QAAe,EACf,KAAK,EACL,GAAG,KAAK,EACT,EAAE,YAAY,GAAG;IAAE,KAAK,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAA;CAAE,2CAwC3D;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAYlE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAYlE;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,eAAe,2CAarD;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,oBAAoB,CAAC,2CAkB3E;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,SAAS,GAAG;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,2CAsBA;AAED,wBAAgB,aAAa,CAAC,EAC5B,WAAmB,EACnB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,2CAgBA;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,uBAAuB,2CAqBlE;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,2CAmCjD;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,uBAAuB,2CAmBlE;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,2CAiB/C;AAgBD;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACzC,eAuDA"}
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/sidebar.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,oBAAoB,EAGzB,KAAK,cAAc,EAEnB,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AACf,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAU1D,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAGnE,OAAO,KAAK,EACV,uBAAuB,EACvB,uBAAuB,EACxB,MAAM,6BAA6B,CAAC;AAGrC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE/D,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC/D;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2BD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,YAAY,2CAqDrD;AAED,wBAAgB,OAAO,CAAC,EACtB,gBAAoB,EACpB,QAAe,EACf,KAAK,EACL,GAAG,KAAK,EACT,EAAE,YAAY,GAAG;IAAE,KAAK,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAA;CAAE,2CAwC3D;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CASlE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAYlE;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,eAAe,2CAarD;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,oBAAoB,CAAC,2CAkB3E;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,SAAS,GAAG;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,2CAsBA;AAED,wBAAgB,aAAa,CAAC,EAC5B,WAAmB,EACnB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,2CAgBA;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,uBAAuB,2CAqBlE;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,2CAmCjD;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,uBAAuB,2CAmBlE;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,2CAiB/C;AAgBD;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACzC,2CA0DA"}

package/dist/layouts/docs/sidebar.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown, ExternalLink, SidebarIcon } from 'lucide-react';
 import * as Base from 'fumadocs-core/sidebar';
 import { usePathname } from 'next/navigation';
-import { createContext, useCallback, useContext, useMemo, useRef, useState, } from 'react';
+import { createContext, Fragment, useCallback, useContext, useMemo, useRef, useState, } from 'react';
 import Link from 'fumadocs-core/link';
 import { useOnChange } from 'fumadocs-core/utils/use-on-change';
 import { cn } from '../../utils/cn.js';
@@ -68,13 +68,13 @@ export function Sidebar({ defaultOpenLevel = 0, prefetch = true, inner, ...props
             }, children: _jsx("div", { ...inner, className: cn('flex size-full max-w-full flex-col pt-2 md:ms-auto md:w-(--fd-sidebar-width) md:border-e md:pt-4', inner?.className), children: props.children }) }) }));
 }
 export function SidebarHeader(props) {
-    return (_jsx("div", { ...props, className: cn('flex flex-col gap-2 px-4 empty:hidden md:ps-5', props.className), children: props.children }));
+    return (_jsx("div", { ...props, className: cn('flex flex-col gap-2 px-4 empty:hidden', props.className), children: props.children }));
 }
 export function SidebarFooter(props) {
-    return (_jsx("div", { ...props, className: cn('flex flex-col border-t px-4 py-3 empty:hidden md:ps-5', props.className), children: props.children }));
+    return (_jsx("div", { ...props, className: cn('flex flex-col border-t px-4 py-3 empty:hidden', props.className), children: props.children }));
 }
 export function SidebarViewport(props) {
-    return (_jsx(ScrollArea, { ...props, className: cn('h-full', props.className), children: _jsx(ScrollViewport, { className: "p-4 md:ps-5", style: {
+    return (_jsx(ScrollArea, { ...props, className: cn('h-full', props.className), children: _jsx(ScrollViewport, { className: "p-4", style: {
                 maskImage: 'linear-gradient(to bottom, transparent, white 12px)',
             }, children: props.children }) }));
 }
@@ -158,29 +158,29 @@ function useInternalContext() {
  */
 export function SidebarPageTree(props) {
     const { root } = useTreeContext();
+    const idRef = useRef(0);
     return useMemo(() => {
         const { Separator, Item, Folder } = props.components ?? {};
         function renderSidebarList(items, level) {
             return items.map((item, i) => {
-                const id = `${item.type}_${i}`;
                 if (item.type === 'separator') {
                     if (Separator)
-                        return _jsx(Separator, { item: item }, id);
-                    return (_jsxs(SidebarSeparator, { className: cn(i !== 0 && 'mt-8'), children: [item.icon, item.name] }, id));
+                        return _jsx(Separator, { item: item }, i);
+                    return (_jsxs(SidebarSeparator, { className: cn(i !== 0 && 'mt-8'), children: [item.icon, item.name] }, i));
                 }
                 if (item.type === 'folder') {
                     const children = renderSidebarList(item.children, level + 1);
                     if (Folder)
-                        return (_jsx(Folder, { item: item, level: level, children: children }, id));
-                    return (_jsx(PageTreeFolder, { item: item, children: children }, id));
+                        return (_jsx(Folder, { item: item, level: level, children: children }, i));
+                    return (_jsx(PageTreeFolder, { item: item, children: children }, i));
                 }
                 if (Item)
                     return _jsx(Item, { item: item }, item.url);
                 return (_jsx(SidebarItem, { href: item.url, external: item.external, icon: item.icon, children: item.name }, item.url));
             });
         }
-        return renderSidebarList(root.children, 1);
-    }, [root, props.components]);
+        return (_jsx(Fragment, { children: renderSidebarList(root.children, 1) }, idRef.current++));
+    }, [props.components, root.children]);
 }
 function PageTreeFolder({ item, ...props }) {
     const { defaultOpenLevel, level } = useInternalContext();

package/dist/layouts/docs.d.ts

@@ -8,7 +8,7 @@ export interface DocsLayoutProps extends BaseLayoutProps {
     sidebar?: Partial<SidebarOptions>;
     containerProps?: HTMLAttributes<HTMLDivElement>;
 }
-export declare function DocsLayout({ nav: { enabled: navEnabled, component: navReplace, transparentMode, ...nav }, sidebar: { enabled: sidebarEnabled, collapsible, component: sidebarReplace, tabs: tabOptions, banner: sidebarBanner, footer: sidebarFooter, components: sidebarComponents, hideSearch: sidebarHideSearch, ...sidebar }, i18n, ...props }: DocsLayoutProps): ReactNode;
+export declare function DocsLayout({ nav: { enabled: navEnabled, component: navReplace, transparentMode, ...nav }, sidebar: { enabled: sidebarEnabled, collapsible, component: sidebarReplace, tabs: tabOptions, banner: sidebarBanner, footer: sidebarFooter, components: sidebarComponents, hideSearch: sidebarHideSearch, ...sidebar }, i18n, children, ...props }: DocsLayoutProps): ReactNode;
 export { getSidebarTabsFromOptions, type TabOptions } from './docs/shared.js';
 export { type LinkItemType };
 //# sourceMappingURL=docs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"docs.d.ts","sourceRoot":"","sources":["../../src/layouts/docs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAe5D,OAAO,EAAE,KAAK,YAAY,EAAgB,MAAM,iBAAiB,CAAC;AAElE,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,UAAU,CAAC;AAa1D,OAAO,EAKL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAG/B,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IAEpB,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IAElC,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,wBAAgB,UAAU,CAAC,EACzB,GAAG,EAAE,EACH,OAAO,EAAE,UAAiB,EAC1B,SAAS,EAAE,UAAU,EACrB,eAAe,EACf,GAAG,GAAG,EACF,EACN,OAAO,EAAE,EACP,OAAO,EAAE,cAAqB,EAC9B,WAAkB,EAClB,SAAS,EAAE,cAAc,EACzB,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,aAAa,EACrB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,iBAAiB,EAC7B,UAAU,EAAE,iBAAiB,EAC7B,GAAG,OAAO,EACN,EACN,IAAY,EACZ,GAAG,KAAK,EACT,EAAE,eAAe,GAAG,SAAS,CA+G7B;AA6ED,OAAO,EAAE,yBAAyB,EAAE,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAE,KAAK,YAAY,EAAE,CAAC"}
+{"version":3,"file":"docs.d.ts","sourceRoot":"","sources":["../../src/layouts/docs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAe5D,OAAO,EAAE,KAAK,YAAY,EAAgB,MAAM,iBAAiB,CAAC;AAElE,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,UAAU,CAAC;AAa1D,OAAO,EAKL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAG/B,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IAEpB,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IAElC,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,wBAAgB,UAAU,CAAC,EACzB,GAAG,EAAE,EACH,OAAO,EAAE,UAAiB,EAC1B,SAAS,EAAE,UAAU,EACrB,eAAe,EACf,GAAG,GAAG,EACF,EACN,OAAO,EAAE,EACP,OAAO,EAAE,cAAqB,EAC9B,WAAkB,EAClB,SAAS,EAAE,cAAc,EACzB,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,aAAa,EACrB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,iBAAiB,EAC7B,UAAU,EAAE,iBAAiB,EAC7B,GAAG,OAAO,EACN,EACN,IAAY,EACZ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,GAAG,SAAS,CA8H7B;AA2CD,OAAO,EAAE,yBAAyB,EAAE,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAE,KAAK,YAAY,EAAE,CAAC"}

package/dist/layouts/docs.js

@@ -16,7 +16,7 @@ import { ThemeToggle } from '../components/layout/theme-toggle.js';
 import { LargeSearchToggle, SearchToggle, } from '../components/layout/search-toggle.js';
 import { checkPageTree, getSidebarTabsFromOptions, layoutVariables, SidebarLinkItem, } from '../layouts/docs/shared.js';
 import { StylesProvider } from '../contexts/layout.js';
-export function DocsLayout({ nav: { enabled: navEnabled = true, component: navReplace, transparentMode, ...nav } = {}, sidebar: { enabled: sidebarEnabled = true, collapsible = true, component: sidebarReplace, tabs: tabOptions, banner: sidebarBanner, footer: sidebarFooter, components: sidebarComponents, hideSearch: sidebarHideSearch, ...sidebar } = {}, i18n = false, ...props }) {
+export function DocsLayout({ nav: { enabled: navEnabled = true, component: navReplace, transparentMode, ...nav } = {}, sidebar: { enabled: sidebarEnabled = true, collapsible = true, component: sidebarReplace, tabs: tabOptions, banner: sidebarBanner, footer: sidebarFooter, components: sidebarComponents, hideSearch: sidebarHideSearch, ...sidebar } = {}, i18n = false, children, ...props }) {
     checkPageTree(props.tree);
     const links = getLinks(props.links ?? [], props.githubUrl);
     const Aside = collapsible ? CollapsibleSidebar : Sidebar;
@@ -34,21 +34,15 @@ export function DocsLayout({ nav: { enabled: navEnabled = true, component: navRe
                     }, children: [collapsible ? (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
                                 color: 'secondary',
                                 size: 'icon',
-                            }), 'fixed top-1/2 -translate-y-1/2 start-0 z-40 text-fd-muted-foreground border-s-0 rounded-s-none shadow-md data-[collapsed=false]:hidden max-md:hidden'), children: _jsx(ChevronRight, {}) })) : null, replaceOrDefault({ enabled: sidebarEnabled, component: sidebarReplace }, _jsxs(Aside, { ...sidebar, className: cn('md:ps-(--fd-layout-offset)', sidebar.className), children: [_jsxs(SidebarHeader, { children: [_jsx(SidebarHeaderItems, { ...nav, links: links, sidebarCollapsible: collapsible }), sidebarBanner, tabs.length > 0 ? (_jsx(RootToggle, { options: tabs, className: "-mx-2" })) : null, !sidebarHideSearch ? (_jsx(LargeSearchToggle, { hideIfDisabled: true, className: "rounded-lg max-md:hidden" })) : null] }), _jsxs(SidebarViewport, { children: [_jsx("div", { className: "mb-4 empty:hidden md:hidden", children: links
+                            }), 'fixed top-1/2 -translate-y-1/2 start-0 z-40 text-fd-muted-foreground border-s-0 rounded-s-none shadow-md data-[collapsed=false]:hidden max-md:hidden'), children: _jsx(ChevronRight, {}) })) : null, replaceOrDefault({ enabled: sidebarEnabled, component: sidebarReplace }, _jsxs(Aside, { ...sidebar, className: cn('md:ps-(--fd-layout-offset)', sidebar.className), children: [_jsxs(SidebarHeader, { children: [_jsxs("div", { className: "flex flex-row pt-1 max-md:hidden", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex text-[15px] items-center gap-2.5 font-medium", children: nav.title }), nav.children, collapsible && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
+                                                        color: 'ghost',
+                                                        size: 'icon-sm',
+                                                    }), 'ms-auto mb-auto text-fd-muted-foreground max-md:hidden') }))] }), sidebarBanner, tabs.length > 0 ? (_jsx(RootToggle, { options: tabs, className: "-mx-2" })) : null, !sidebarHideSearch ? (_jsx(LargeSearchToggle, { hideIfDisabled: true, className: "rounded-lg max-md:hidden" })) : null] }), _jsxs(SidebarViewport, { children: [_jsx("div", { className: "mb-4 empty:hidden md:hidden", children: links
                                                 .filter((v) => v.type !== 'icon')
                                                 .map((item, i) => (_jsx(SidebarLinkItem, { item: item }, i))) }), _jsx(SidebarPageTree, { components: sidebarComponents })] }), _jsxs(SidebarFooter, { children: [_jsx(SidebarFooterItems, { links: links, i18n: i18n, disableThemeSwitch: props.disableThemeSwitch ?? false }), sidebarFooter] })] }), {
                             ...sidebar,
                             tabs,
-                        }), _jsx(StylesProvider, { ...pageStyles, children: props.children })] })] }) }));
-}
-function SidebarHeaderItems({ links, sidebarCollapsible, ...props }) {
-    const isEmpty = !props.title && !props.children && links.length === 0;
-    if (isEmpty)
-        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-sm',
-                }), 'ms-auto text-fd-muted-foreground max-md:hidden') }))] }));
+                        }), _jsx(StylesProvider, { ...pageStyles, children: children })] })] }) }));
 }
 function SidebarFooterItems({ i18n, disableThemeSwitch, links, }) {
     const iconItems = links.filter((v) => v.type === 'icon');

package/dist/layouts/notebook.client.js

@@ -12,7 +12,7 @@ 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: {
+    return (_jsx("header", { id: "nd-subnav", ...props, className: cn('fixed inset-x-0 top-(--fd-banner-height) z-10 pe-(--fd-layout-offset) backdrop-blur-lg transition-colors', (!isTransparent || open) && 'bg-fd-background/80', props.className), style: {
             paddingInlineStart: collapsed
                 ? 'var(--fd-layout-offset)'
                 : 'calc(var(--fd-layout-offset) + var(--fd-sidebar-width))',
@@ -38,13 +38,13 @@ function useIsSelected(item) {
 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: () => {
+    return (_jsx(Link, { className: cn('inline-flex items-center py-2.5 border-b 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
+    return (_jsxs(Link, { ...props, className: cn('flex flex-row items-center px-2 -mx-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.map

@@ -1 +1 @@
-{"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"}
+{"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,2CA4HjB"}

package/dist/layouts/notebook.js

@@ -25,7 +25,7 @@ export function DocsLayout({ tabMode = 'sidebar', nav: { transparentMode, ...nav
     const tabs = getSidebarTabsFromOptions(tabOptions, props.tree) ?? [];
     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)]');
+        'lg:[--fd-nav-height:calc(var(--spacing)*24)]');
     const pageStyles = {
         tocNav: cn('xl:hidden'),
         toc: cn('max-xl:hidden'),
@@ -34,23 +34,33 @@ export function DocsLayout({ tabMode = 'sidebar', nav: { transparentMode, ...nav
     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)', 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' &&
+                }, children: [_jsxs(Aside, { ...sidebar, className: cn('md:ps-(--fd-layout-offset)', navMode === 'top' ? 'bg-transparent' : 'md:[--fd-nav-height:0px]', sidebar.className), inner: {
+                            className: cn(navMode === 'top' ? 'md:pt-2.5' : 'md:pt-3.5', tabMode === 'navbar' && 'md:pt-0'),
+                        }, children: [_jsxs(SidebarHeader, { children: [navMode === 'auto' && (_jsxs("div", { className: "flex flex-row justify-between max-md:hidden", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex items-center gap-2.5 font-medium", children: nav.title }), _jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
+                                                    color: 'ghost',
+                                                    size: 'icon-sm',
+                                                }), 'text-fd-muted-foreground mb-auto') })] })), 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, 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'
+    return (_jsxs(Navbar, { 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({
+            : undefined, children: [_jsxs("div", { className: cn('flex flex-row border-b border-fd-foreground/10 px-4 h-14', navMode === 'auto' && 'md:px-6'), children: [_jsxs("div", { className: cn('flex flex-row items-center', navMode === 'top' && 'flex-1 pe-4'), children: [sidebarCollapsible && navMode === 'auto' ? (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
                                     color: 'ghost',
-                                    size: 'icon',
-                                }), '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
+                                    size: 'icon-sm',
+                                }), 'text-fd-muted-foreground -ms-1.5 me-2 data-[collapsed=false]:hidden max-md:hidden') })) : null, _jsx(Title, { url: nav.url, title: nav.title, className: cn(
+                                // show on sidebar on above md
+                                navMode === 'auto' && 'md:hidden') })] }), _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] }));
+                                .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" }), sidebarCollapsible && navMode === 'top' ? (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
+                                    color: 'secondary',
+                                    size: 'icon-sm',
+                                }), 'ms-2 text-fd-muted-foreground rounded-full max-md:hidden') })) : null] })] }), tabs.length > 0 ? (_jsx(LayoutTabs, { className: "px-6 border-b border-fd-foreground/10 h-10 max-lg:hidden", children: tabs.map((tab) => (_jsx(LayoutTab, { ...tab }, tab.url))) })) : null] }));
 }
 function NavbarLinkItem({ item, ...props }) {
     if (item.type === 'menu') {

package/dist/page.client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page.client.d.ts","sourceRoot":"","sources":["../src/page.client.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,cAAc,EAKpB,MAAM,OAAO,CAAC;AAWf,OAAO,EACL,KAAK,iBAAiB,EAEvB,MAAM,0BAA0B,CAAC;AAMlC,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAkDrE;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAY7D;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,2CAe7D;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,2CAc/C;AAED,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE;QACN,QAAQ,CAAC,EAAE;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,GAAG,EAAE,MAAM,CAAA;SAAE,CAAC;QACzC,IAAI,CAAC,EAAE;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,GAAG,EAAE,MAAM,CAAA;SAAE,CAAC;KACtC,CAAC;CACH;AAiCD,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,EAAE,WAAW,2CA8C5C;AAED,MAAM,MAAM,eAAe,GAAG,iBAAiB,CAAC;AAEhD,wBAAgB,UAAU,CAAC,OAAO,EAAE,eAAe,kDAsClD"}
+{"version":3,"file":"page.client.d.ts","sourceRoot":"","sources":["../src/page.client.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,cAAc,EAKpB,MAAM,OAAO,CAAC;AAWf,OAAO,EACL,KAAK,iBAAiB,EAEvB,MAAM,0BAA0B,CAAC;AAMlC,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CA8CrE;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAY7D;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,2CAe7D;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,2CAc/C;AAED,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE;QACN,QAAQ,CAAC,EAAE;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,GAAG,EAAE,MAAM,CAAA;SAAE,CAAC;QACzC,IAAI,CAAC,EAAE;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,GAAG,EAAE,MAAM,CAAA;SAAE,CAAC;KACtC,CAAC;CACH;AAiCD,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,EAAE,WAAW,2CA8C5C;AAED,MAAM,MAAM,eAAe,GAAG,iBAAiB,CAAC;AAEhD,wBAAgB,UAAU,CAAC,OAAO,EAAE,eAAe,kDAsClD"}

package/dist/page.client.js

@@ -33,9 +33,9 @@ export function TocPopoverHeader(props) {
             window.removeEventListener('click', onClick);
         };
     }, [onClick]);
-    return (_jsx("div", { className: cn('sticky overflow-visible z-10 h-8', tocNav, props.className), style: {
+    return (_jsx("div", { className: cn('sticky overflow-visible z-10', tocNav, props.className), style: {
             top: 'calc(var(--fd-banner-height) + var(--fd-nav-height))',
-        }, children: _jsx(TocPopover, { open: open, onOpenChange: setOpen, asChild: true, children: _jsx("header", { ref: ref, id: "nd-tocnav", ...props, className: cn('border-b border-fd-foreground/10 backdrop-blur-md transition-colors', (!isTransparent || open) && 'bg-fd-background/80', open && 'shadow-lg', sidebar.open && 'opacity-0'), children: props.children }) }) }));
+        }, children: _jsx(TocPopover, { open: open, onOpenChange: setOpen, asChild: true, children: _jsx("header", { ref: ref, id: "nd-tocnav", ...props, className: cn('border-b border-fd-foreground/10 backdrop-blur-md transition-colors', (!isTransparent || open) && 'bg-fd-background/80', open && 'shadow-lg', sidebar.open && 'max-md:hidden'), children: props.children }) }) }));
 }
 export function PageBody(props) {
     const { page } = usePageStyles();
@@ -54,7 +54,7 @@ export function LastUpdate(props) {
     }, [props.date]);
     return (_jsxs("p", { className: "text-sm text-fd-muted-foreground", children: [text.lastUpdate, " ", date] }));
 }
-const itemVariants = cva('flex w-full flex-col gap-2 rounded-lg border bg-fd-card p-4 text-sm transition-colors hover:bg-fd-accent/80 hover:text-fd-accent-foreground');
+const itemVariants = cva('flex w-full flex-col gap-2 rounded-lg border p-4 text-sm transition-colors hover:bg-fd-accent/80 hover:text-fd-accent-foreground');
 const itemLabel = cva('inline-flex items-center gap-0.5 text-fd-muted-foreground');
 function scanNavigationList(tree) {
     const list = [];
@@ -91,7 +91,7 @@ export function Footer({ items }) {
             next: list[idx + 1],
         };
     }, [items, pathname, root]);
-    return (_jsxs("div", { className: "grid grid-cols-2 gap-4 pb-6", children: [previous ? (_jsxs(Link, { href: previous.url, className: cn(itemVariants()), children: [_jsxs("div", { className: cn(itemLabel()), children: [_jsx(ChevronLeft, { className: "-ms-1 size-4 shrink-0 rtl:rotate-180" }), _jsx("p", { children: text.previousPage })] }), _jsx("p", { className: "font-medium", children: previous.name })] })) : null, next ? (_jsxs(Link, { href: next.url, className: cn(itemVariants({ className: 'col-start-2 text-end' })), children: [_jsxs("div", { className: cn(itemLabel({ className: 'flex-row-reverse' })), children: [_jsx(ChevronRight, { className: "-me-1 size-4 shrink-0 rtl:rotate-180" }), _jsx("p", { children: text.nextPage })] }), _jsx("p", { className: "font-medium", children: next.name })] })) : null] }));
+    return (_jsxs("div", { className: "grid grid-cols-2 gap-4 pb-6", children: [previous ? (_jsxs(Link, { href: previous.url, className: cn(itemVariants()), children: [_jsxs("div", { className: cn(itemLabel()), children: [_jsx(ChevronLeft, { className: "-ms-1 size-4 shrink-0 rtl:rotate-180" }), _jsx("p", { children: text.previousPage })] }), _jsx("p", { className: "font-medium md:text-[15px]", children: previous.name })] })) : null, next ? (_jsxs(Link, { href: next.url, className: cn(itemVariants({ className: 'col-start-2 text-end' })), children: [_jsxs("div", { className: cn(itemLabel({ className: 'flex-row-reverse' })), children: [_jsx(ChevronRight, { className: "-me-1 size-4 shrink-0 rtl:rotate-180" }), _jsx("p", { children: text.nextPage })] }), _jsx("p", { className: "font-medium md:text-[15px]", children: next.name })] })) : null] }));
 }
 export function Breadcrumb(options) {
     const path = useTreePath();

package/dist/page.js

@@ -22,7 +22,7 @@ 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, _jsx(TOCScrollArea, { isMenu: true, children: tocPopoverOptions.style === 'clerk' ? (_jsx(ClerkTOCItems, { items: toc })) : (_jsx(TOCItems, { items: toc })) }), tocPopoverOptions.footer] })] }), {
+                }, children: [replaceOrDefault({ enabled: tocPopoverEnabled, component: tocPopoverReplace }, _jsxs(TocPopoverHeader, { className: "h-10", children: [_jsx(TocPopoverTrigger, { className: "w-full", items: toc }), _jsxs(TocPopoverContent, { children: [tocPopoverOptions.header, _jsx(TOCScrollArea, { isMenu: true, children: tocPopoverOptions.style === 'clerk' ? (_jsx(ClerkTOCItems, { items: toc })) : (_jsx(TOCItems, { items: toc })) }), tocPopoverOptions.footer] })] }), {
                         items: toc,
                         ...tocPopoverOptions,
                     }), _jsxs(PageArticle, { ...props.article, className: cn(full || !tocEnabled ? 'max-w-[1120px]' : 'max-w-[860px]', props.article?.className), children: [replaceOrDefault(props.breadcrumb, _jsx(Breadcrumb, { ...props.breadcrumb })), props.children, _jsx("div", { role: "none", className: "flex-1" }), _jsxs("div", { className: "flex flex-row flex-wrap items-center justify-between gap-4 empty:hidden", children: [props.editOnGithub ? (_jsx(EditOnGitHub, { ...props.editOnGithub })) : null, props.lastUpdate ? (_jsx(LastUpdate, { date: new Date(props.lastUpdate) })) : null] }), replaceOrDefault(props.footer, _jsx(Footer, { items: props.footer?.items }))] })] }), replaceOrDefault({ enabled: tocEnabled, component: tocReplace }, _jsxs(Toc, { children: [tocOptions.header, _jsxs("h3", { className: "inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground", children: [_jsx(Text, { className: "size-4" }), _jsx(I18nLabel, { label: "toc" })] }), _jsx(TOCScrollArea, { children: tocOptions.style === 'clerk' ? (_jsx(ClerkTOCItems, { items: toc })) : (_jsx(TOCItems, { items: toc })) }), tocOptions.footer] }), {

package/dist/style.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.0.6 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.0.7 | MIT License | https://tailwindcss.com */
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
@@ -1117,6 +1117,9 @@
   .mb-8 {
     margin-bottom: calc(var(--spacing) * 8);
   }
+  .mb-auto {
+    margin-bottom: auto;
+  }
   .box-content {
     box-sizing: content-box;
   }
@@ -1181,8 +1184,8 @@
   .h-1\.5 {
     height: calc(var(--spacing) * 1.5);
   }
-  .h-8 {
-    height: calc(var(--spacing) * 8);
+  .h-10 {
+    height: calc(var(--spacing) * 10);
   }
   .h-14 {
     height: calc(var(--spacing) * 14);
@@ -1455,10 +1458,6 @@
     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;
@@ -1577,9 +1576,6 @@
   .py-0\.5 {
     padding-block: calc(var(--spacing) * 0.5);
   }
-  .py-1 {
-    padding-block: calc(var(--spacing) * 1);
-  }
   .py-1\.5 {
     padding-block: calc(var(--spacing) * 1.5);
   }
@@ -1616,12 +1612,12 @@
   .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);
   }
+  .pt-1 {
+    padding-top: calc(var(--spacing) * 1);
+  }
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
@@ -1816,9 +1812,6 @@
   .\[--fd-tocnav-height\:36px\] {
     --fd-tocnav-height: 36px;
   }
-  .\[--radix-collapsible-content-height\:0px\] {
-    --radix-collapsible-content-height: 0px;
-  }
   .select-none {
     -webkit-user-select: none;
     user-select: none;
@@ -2225,19 +2218,24 @@
       padding-block: calc(var(--spacing) * 1.5);
     }
   }
-  .md\:py-3 {
+  .md\:ps-\(--fd-layout-offset\) {
     @media (width >= 48rem) {
-      padding-block: calc(var(--spacing) * 3);
+      padding-inline-start: var(--fd-layout-offset);
     }
   }
-  .md\:ps-\(--fd-layout-offset\) {
+  .md\:pt-0 {
     @media (width >= 48rem) {
-      padding-inline-start: var(--fd-layout-offset);
+      padding-top: calc(var(--spacing) * 0);
+    }
+  }
+  .md\:pt-2\.5 {
+    @media (width >= 48rem) {
+      padding-top: calc(var(--spacing) * 2.5);
     }
   }
-  .md\:ps-5 {
+  .md\:pt-3\.5 {
     @media (width >= 48rem) {
-      padding-inline-start: calc(var(--spacing) * 5);
+      padding-top: calc(var(--spacing) * 3.5);
     }
   }
   .md\:pt-4 {
@@ -2250,6 +2248,11 @@
       padding-top: calc(var(--spacing) * 12);
     }
   }
+  .md\:text-\[15px\] {
+    @media (width >= 48rem) {
+      font-size: 15px;
+    }
+  }
   .md\:opacity-0 {
     @media (width >= 48rem) {
       opacity: 0%;
@@ -2292,11 +2295,6 @@
       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);
@@ -2318,9 +2316,9 @@
       border-width: 1px;
     }
   }
-  .lg\:\[--fd-nav-height\:calc\(var\(--spacing\)\*26\)\] {
+  .lg\:\[--fd-nav-height\:calc\(var\(--spacing\)\*24\)\] {
     @media (width >= 64rem) {
-      --fd-nav-height: calc(var(--spacing) * 26);
+      --fd-nav-height: calc(var(--spacing) * 24);
     }
   }
   .lg\:\[--fd-sidebar-width\:286px\] {
@@ -2554,6 +2552,11 @@
     margin-bottom: 0;
   }
 }
+@property --radix-collapsible-content-height {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0px;
+}
 @layer base {
   body {
     display: flex;
@@ -2905,6 +2908,10 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-backdrop-blur {
   syntax: "*";
   inherits: false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "15.0.9",
+  "version": "15.0.11",
   "description": "The framework for building a documentation website in Next.js",
   "keywords": [
     "NextJs",
@@ -67,21 +67,21 @@
     "lucide-react": "^0.475.0",
     "next-themes": "^0.4.4",
     "postcss-selector-parser": "^7.1.0",
-    "react-medium-image-zoom": "^5.2.13",
+    "react-medium-image-zoom": "^5.2.14",
     "tailwind-merge": "^3.0.1"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^15.1.7",
-    "@tailwindcss/cli": "^4.0.6",
+    "@tailwindcss/cli": "^4.0.7",
     "@types/lodash.merge": "^4.6.9",
-    "@types/react": "^19.0.9",
-    "@types/react-dom": "^19.0.3",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
     "next": "15.1.7",
-    "tailwindcss": "^4.0.6",
+    "tailwindcss": "^4.0.7",
     "tsc-alias": "^1.8.10",
     "@fumadocs/cli": "0.0.8",
     "eslint-config-custom": "0.0.0",
-    "fumadocs-core": "15.0.9",
+    "fumadocs-core": "15.0.11",
     "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.9"
+    "fumadocs-core": "15.0.11"
   },
   "peerDependenciesMeta": {
     "tailwindcss": {