fumadocs-ui 15.3.3 → 15.3.4

package/css/preset.css

@@ -40,6 +40,9 @@
   --animate-fd-enterFromLeft: fd-enterFromLeft 250ms ease;
   --animate-fd-enterFromRight: fd-enterFromRight 250ms ease;
 
+  --animate-fd-sidebar-in: fd-sidebar-in 250ms ease;
+  --animate-fd-sidebar-out: fd-sidebar-out 250ms ease;
+
   --animate-fd-exitToLeft: fd-exitToLeft 250ms ease;
   --animate-fd-exitToRight: fd-exitToRight 250ms ease;
 
@@ -187,6 +190,18 @@
     }
   }
 
+  @keyframes fd-sidebar-in {
+    from {
+      transform: translateX(-100%);
+    }
+  }
+
+  @keyframes fd-sidebar-out {
+    to {
+      transform: translateX(-100%);
+    }
+  }
+
   @keyframes fd-nav-menu-in {
     from {
       opacity: 0;
@@ -243,6 +258,10 @@
   &::-webkit-scrollbar-track {
     background: transparent;
   }
+
+  &::-webkit-scrollbar-corner {
+    display: none;
+  }
 }
 
 @utility fd-steps {

package/css/vitepress.css

@@ -63,16 +63,13 @@
 
 #nd-sidebar {
   background-color: hsl(240, 6%, 97%);
+  border-color: transparent;
 }
 
 .dark #nd-sidebar {
   background-color: hsl(240, 4%, 9%);
 }
 
-#nd-sidebar > div {
-  border-color: transparent;
-}
-
 button[data-search-full] {
   background-color: var(--color-fd-background);
 }

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 items-center gap-2.5 rounded-lg pe-2 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 items-center gap-2 rounded-lg pe-2 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/search-toggle.js

@@ -21,7 +21,7 @@ export function LargeSearchToggle({ hideIfDisabled, ...props }) {
     const { text } = useI18n();
     if (hideIfDisabled && !enabled)
         return null;
-    return (_jsxs("button", { type: "button", "data-search-full": "", ...props, className: cn('inline-flex items-center gap-2 rounded-full border bg-fd-secondary/50 p-1.5 text-sm text-fd-muted-foreground transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground', props.className), onClick: () => {
+    return (_jsxs("button", { type: "button", "data-search-full": "", ...props, className: cn('inline-flex items-center gap-2 rounded-lg border bg-fd-secondary/50 p-1.5 ps-2 text-sm text-fd-muted-foreground transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground', props.className), onClick: () => {
             setOpenSearch(true);
-        }, children: [_jsx(Search, { className: "ms-1 size-4" }), text.search, _jsx("div", { className: "ms-auto inline-flex gap-0.5", children: hotKey.map((k, i) => (_jsx("kbd", { className: "rounded-md border bg-fd-background px-1.5", children: k.display }, i))) })] }));
+        }, children: [_jsx(Search, { className: "size-4" }), text.search, _jsx("div", { className: "ms-auto inline-flex gap-0.5", children: hotKey.map((k, i) => (_jsx("kbd", { className: "rounded-md border bg-fd-background px-1.5", children: k.display }, i))) })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/layout/sidebar.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,EAAE,EAGP,KAAK,SAAS,EAKf,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;AACrC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAMrD,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,OAAO,CAAC;IAC3D;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA2BD,wBAAgB,OAAO,CAAC,EACtB,gBAAoB,EACpB,QAAe,EACf,WAAkB,EAClB,GAAG,KAAK,EACT,EAAE,YAAY,2CAkHd;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CASzD;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CASzD;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,eAAe,2CAarD;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,2CAkB1D;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,KAAK,CAAC,GAAG;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,2CAgBA;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAqBzB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,2CAsCjD;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,uBAAuB,2CAqBlE;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAgBrE;AAgBD,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAA;KAAE,CAAC,CAAC;IAClC,MAAM,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IAC1E,SAAS,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;CAC7C;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACzC,2CAuDA"}
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/layout/sidebar.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,EAAE,EAEP,KAAK,SAAS,EAKf,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;AACrC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAMrD,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,OAAO,CAAC;IAC3D;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA2BD,wBAAgB,OAAO,CAAC,EACtB,gBAAoB,EACpB,QAAe,EACf,WAAkB,EAClB,GAAG,KAAK,EACT,EAAE,YAAY,2CAmHd;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CASzD;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CASzD;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,eAAe,2CAcrD;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,2CAkB1D;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,KAAK,CAAC,GAAG;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,2CAgBA;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAqBzB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,2CAsCjD;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,uBAAuB,2CAqBlE;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAgBrE;AAgBD,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAA;KAAE,CAAC,CAAC;IAClC,MAAM,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IAC1E,SAAS,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;CAC7C;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACzC,2CAuDA"}

package/dist/components/layout/sidebar.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown, ExternalLink } from '../../icons.js';
 import { usePathname } from 'fumadocs-core/framework';
 import { createContext, Fragment, useContext, useMemo, useRef, useState, } from 'react';
@@ -45,18 +45,22 @@ export function Sidebar({ defaultOpenLevel = 0, prefetch = true, collapsible = t
     });
     if (isMobile) {
         const state = open ? 'open' : 'closed';
-        return (_jsxs(_Fragment, { children: [_jsx(Presence, { present: open, children: _jsx("div", { "data-state": state, className: "fixed z-40 inset-0 bg-black/30 backdrop-blur-sm data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out", onClick: () => setOpen(false) }) }), _jsx(Presence, { present: open, children: ({ present }) => (_jsx(RemoveScroll, { as: "aside", enabled: present, id: "nd-sidebar-mobile", ...props, "data-state": state, className: cn('fixed text-[15px] flex flex-col py-3 rounded-e-xl border-e start-0 inset-y-0 w-[85%] max-w-[380px] z-40 bg-fd-background data-[state=open]:animate-fd-enterFromLeft data-[state=closed]:animate-fd-exitToLeft', !present && 'invisible', props.className), children: _jsx(Context.Provider, { value: context, children: props.children }) })) })] }));
+        return (_jsxs(Context.Provider, { value: context, children: [_jsx(Presence, { present: open, children: _jsx("div", { "data-state": state, className: "fixed z-40 inset-0 bg-black/30 backdrop-blur-sm data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out", onClick: () => setOpen(false) }) }), _jsx(Presence, { present: open, children: ({ present }) => (_jsx(RemoveScroll, { as: "aside", enabled: present, id: "nd-sidebar-mobile", ...props, "data-state": state, className: cn('fixed text-[15px] flex flex-col py-2 rounded-e-2xl border-e start-0 inset-y-0 w-[85%] max-w-[380px] z-40 bg-fd-background data-[state=open]:animate-fd-sidebar-in data-[state=closed]:animate-fd-sidebar-out', !present && 'invisible', props.className), children: props.children })) })] }));
     }
-    return (_jsx("aside", { id: "nd-sidebar", ...props, "data-collapsed": collapsed, className: cn('sticky top-(--fd-sidebar-top) z-20 bg-fd-card text-sm h-(--fd-sidebar-height) max-md:hidden', collapsible && [
-            'transition-all',
-            collapsed &&
-                '-me-(--fd-sidebar-width) -translate-x-(--fd-sidebar-offset) rtl:translate-x-(--fd-sidebar-offset)',
-            collapsed && hover && 'z-50 translate-x-0',
-            collapsed && !hover && 'opacity-0',
+    return (_jsx("aside", { id: "nd-sidebar", ...props, "data-collapsed": collapsed, className: cn('sticky shrink-0 flex flex-col items-end top-(--fd-sidebar-top) z-20 bg-fd-card text-sm h-(--fd-sidebar-height) w-(--fd-sidebar-width) *:w-(--fd-sidebar-width) border-e max-md:hidden', collapsed && [
+            'rounded-xl border',
+            hover
+                ? 'z-50 translate-x-2 shadow-lg'
+                : 'opacity-0 -translate-x-(--fd-sidebar-offset) rtl:translate-x-(--fd-sidebar-offset)',
         ], props.className), style: {
-            '--fd-sidebar-offset': 'calc(var(--fd-sidebar-width) - 6px)',
-            '--fd-sidebar-top': 'calc(var(--fd-banner-height) + var(--fd-nav-height))',
-            '--fd-sidebar-height': 'calc(100dvh - var(--fd-banner-height) - var(--fd-nav-height))',
+            transition: [
+                ...['border', 'height', 'top'].map((v) => collapsed ? `${v} step-end 200ms` : `${v} step-start 200ms`),
+                ...['opacity', 'margin', 'translate'].map((v) => `${v} ease 200ms`),
+            ].join(', '),
+            '--fd-sidebar-offset': 'calc(100% - 16px)',
+            '--fd-sidebar-margin': collapsed ? '0.5rem' : '0px',
+            '--fd-sidebar-top': `calc(var(--fd-banner-height) + var(--fd-nav-height) + var(--fd-sidebar-margin))`,
+            '--fd-sidebar-height': 'calc(100dvh - var(--fd-sidebar-top) - var(--fd-sidebar-margin))',
             ...props.style,
         }, onPointerEnter: (e) => {
             if (!collapsible ||
@@ -76,22 +80,22 @@ export function Sidebar({ defaultOpenLevel = 0, prefetch = true, collapsible = t
             }, Math.min(e.clientX, document.body.clientWidth - e.clientX) > 100
                 ? 0
                 : 500);
-        }, children: _jsx("div", { className: "flex w-(--fd-sidebar-width) h-full max-w-full flex-col pt-1.5 ms-auto border-e", children: _jsx(Context.Provider, { value: context, children: props.children }) }) }));
+        }, children: _jsx(Context.Provider, { value: context, children: props.children }) }));
 }
 export function SidebarHeader(props) {
-    return (_jsx("div", { ...props, className: cn('flex flex-col gap-3 px-4 py-2', props.className), children: props.children }));
+    return (_jsx("div", { ...props, className: cn('flex flex-col gap-3 p-4 pb-2', props.className), children: props.children }));
 }
 export function SidebarFooter(props) {
     return (_jsx("div", { ...props, className: cn('flex flex-col border-t px-4 py-3', 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", style: {
-                maskImage: 'linear-gradient(to bottom, transparent, white 12px)',
+                maskImage: 'linear-gradient(to bottom, transparent, white 12px, white calc(100% - 12px), transparent)',
             }, children: props.children }) }));
 }
 export function SidebarSeparator(props) {
     const { level } = useInternalContext();
-    return (_jsx("p", { ...props, className: cn('inline-flex items-center gap-2 mb-2 px-2 font-medium empty:mb-0 [&_svg]:size-4 [&_svg]:shrink-0', props.className), style: {
+    return (_jsx("p", { ...props, className: cn('inline-flex items-center gap-2 mb-1.5 px-2 font-medium empty:mb-0 [&_svg]:size-4 [&_svg]:shrink-0', props.className), style: {
             paddingInlineStart: getOffset(level),
             ...props.style,
         }, children: props.children }));
@@ -145,7 +149,7 @@ export function SidebarFolderContent(props) {
     return (_jsx(CollapsibleContent, { ...props, className: cn('relative', props.className), children: _jsxs(Context.Provider, { value: useMemo(() => ({
                 ...ctx,
                 level: ctx.level + 1,
-            }), [ctx]), children: [ctx.level === 1 && (_jsx("div", { className: "absolute w-px inset-y-0 bg-fd-border start-3" })), props.children] }) }));
+            }), [ctx]), children: [ctx.level === 1 && (_jsx("div", { className: "absolute w-px inset-y-1 bg-fd-border start-2.5" })), props.children] }) }));
 }
 export function SidebarCollapseTrigger(props) {
     const { collapsed, setCollapsed } = useSidebar();
@@ -199,10 +203,10 @@ function PageTreeFolder({ item, ...props }) {
     return (_jsxs(SidebarFolder, { defaultOpen: (item.defaultOpen ?? defaultOpenLevel >= level) || path.includes(item), children: [item.index ? (_jsxs(SidebarFolderLink, { href: item.index.url, external: item.index.external, ...props, children: [item.icon, item.name] })) : (_jsxs(SidebarFolderTrigger, { ...props, children: [item.icon, item.name] })), _jsx(SidebarFolderContent, { children: props.children })] }));
 }
 function getOffset(level) {
-    return `calc(var(--spacing) * ${level > 1 ? (level - 1) * 3 + 3 : 2})`;
+    return `calc(var(--spacing) * ${level > 1 ? level * 3 : 2})`;
 }
 function Border({ level, active }) {
     if (level <= 1)
         return null;
-    return (_jsx("div", { className: cn('absolute w-px inset-y-3 z-[2] start-3 md:inset-y-2', active && 'bg-fd-primary') }));
+    return (_jsx("div", { className: cn('absolute w-px inset-y-3 z-[2] start-2.5 md:inset-y-2', active && 'bg-fd-primary') }));
 }

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

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

package/dist/components/tabs.js

@@ -91,7 +91,7 @@ export function TabsContent({ value, className, ...props }) {
     if (props.id) {
         valueToIdMap.set(value, props.id);
     }
-    return (_jsx(Primitive.TabsContent, { value: value, className: cn('prose-no-margin [&>figure:only-child]:-m-4 [&>figure:only-child]:border-none', className), ...props, children: props.children }));
+    return (_jsx(Primitive.TabsContent, { value: value, forceMount: true, className: cn('prose-no-margin data-[state=inactive]:hidden [&>figure:only-child]:-m-4 [&>figure:only-child]:border-none', className), ...props, children: props.children }));
 }
 /**
  * Inspired by Headless UI.

package/dist/components/ui/hide-if-empty.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hide-if-empty.d.ts","sourceRoot":"","sources":["../../../src/components/ui/hide-if-empty.tsx"],"names":[],"mappings":"AAoCA;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAyCtE"}
+{"version":3,"file":"hide-if-empty.d.ts","sourceRoot":"","sources":["../../../src/components/ui/hide-if-empty.tsx"],"names":[],"mappings":"AAoBA;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAyDtE"}

package/dist/components/ui/hide-if-empty.js

@@ -2,21 +2,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Slot } from '@radix-ui/react-slot';
 import { useEffect, useId, useRef, useState } from 'react';
-const init = `function isEmpty(node) {
-  for (let i = 0; i < node.childNodes.length; i++) {
-    const child = node.childNodes.item(i);
-    if (child.nodeType === Node.TEXT_NODE) {
-      return false
-    } else if (
-      child.nodeType === Node.ELEMENT_NODE &&
-      window.getComputedStyle(child).display !== 'none'
-    ) {
-      return false
-    }
-  }
-
-  return true;
-}`;
 function isEmpty(node) {
     for (let i = 0; i < node.childNodes.length; i++) {
         const child = node.childNodes.item(i);
@@ -55,10 +40,25 @@ export function HideIfEmpty({ children }) {
         };
     }, []);
     const inject = `
-${init}
-const element = document.querySelector('[data-hide-if-empty="${id}"]')
+function isEmpty(node) {
+  for (let i = 0; i < node.childNodes.length; i++) {
+    const child = node.childNodes.item(i);
+    if (child.nodeType === Node.TEXT_NODE) {
+      return false
+    } else if (
+      child.nodeType === Node.ELEMENT_NODE &&
+      window.getComputedStyle(child).display !== 'none'
+    ) {
+      return false
+    }
+  }
+
+  return true;
+}
+
+const element = document.querySelector('[data-fdid="${id}"]')
 if (element) {
   element.setAttribute('data-empty', String(isEmpty(element)))
 }`;
-    return (_jsxs(_Fragment, { children: [empty === undefined && _jsx("script", { children: `{ ${inject} }` }), _jsx(Slot, { ref: ref, "data-hide-if-empty": id, "data-empty": empty, className: "data-[empty=true]:hidden", children: children })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Slot, { ref: ref, "data-fdid": id, "data-empty": empty, className: "data-[empty=true]:hidden", suppressHydrationWarning: true, children: children }), empty === undefined && _jsx("script", { children: `{ ${inject} }` })] }));
 }

package/dist/layouts/docs-client.js

@@ -10,7 +10,7 @@ import { SearchToggle } from '../components/layout/search-toggle.js';
 export function Navbar(props) {
     const { open } = useSidebar();
     const { isTransparent } = useNav();
-    return (_jsx("header", { id: "nd-subnav", ...props, className: cn('sticky top-(--fd-banner-height) z-30 flex h-14 items-center px-4 border-b transition-colors backdrop-blur-sm md:px-6', (!isTransparent || open) && 'bg-fd-background/80', props.className), children: props.children }));
+    return (_jsx("header", { id: "nd-subnav", ...props, className: cn('sticky top-(--fd-banner-height) z-30 flex items-center px-4 border-b transition-colors backdrop-blur-sm', (!isTransparent || open) && 'bg-fd-background/80', props.className), children: props.children }));
 }
 export function NavbarSidebarTrigger({ className, ...props }) {
     const { setOpen } = useSidebar();

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,cAAc,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAarE,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,YAAY,EAClB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,UAAU,CAAC;AAK1D,OAAO,EACL,kBAAkB,EAClB,MAAM,EACN,oBAAoB,EACrB,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAIL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAa/B,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IAEpB,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG;QAClC,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,SAAS,CAAC,EAAE,SAAS,CAAC;KACvB,CAAC;IAEF;;OAEG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,wBAAgB,UAAU,CAAC,EACzB,GAAG,EAAE,EAAE,eAAe,EAAE,GAAG,GAAG,EAAO,EACrC,OAAY,EACZ,YAAY,EACZ,kBAA0B,EAC1B,WAA8C,EAC9C,IAAY,EACZ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,GAAG,SAAS,CAkG7B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,WAAkB,EAClB,UAAU,EACV,GAAG,EACH,KAAU,EACV,MAAM,EACN,MAAM,EACN,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,GAAG;IAChC,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,GAAG,CAAC,EAAE,SAAS,CAAC;CACjB,2CAgDA;AAED,wBAAgB,uBAAuB,CAAC,EACtC,IAAI,EACJ,WAAW,EACX,KAAU,GACX,EAAE;IACD,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC;CAC9C,2CAgCA;AAED,OAAO,EAAE,kBAAkB,EAAE,MAAM,EAAE,oBAAoB,EAAE,KAAK,YAAY,EAAE,CAAC;AAC/E,OAAO,EAAE,yBAAyB,EAAE,MAAM,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,cAAc,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAarE,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,YAAY,EAClB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,UAAU,CAAC;AAK1D,OAAO,EACL,kBAAkB,EAClB,MAAM,EACN,oBAAoB,EACrB,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAIL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAa/B,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IAEpB,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG;QAClC,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,SAAS,CAAC,EAAE,SAAS,CAAC;KACvB,CAAC;IAEF;;OAEG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,wBAAgB,UAAU,CAAC,EACzB,GAAG,EAAE,EAAE,eAAe,EAAE,GAAG,GAAG,EAAO,EACrC,OAAY,EACZ,YAAY,EACZ,kBAA0B,EAC1B,WAA8C,EAC9C,IAAY,EACZ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,GAAG,SAAS,CAgG7B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,WAAkB,EAClB,UAAU,EACV,GAAG,EACH,KAAU,EACV,MAAM,EACN,MAAM,EACN,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,GAAG;IAChC,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,GAAG,CAAC,EAAE,SAAS,CAAC;CACjB,2CAmDA;AAED,wBAAgB,uBAAuB,CAAC,EACtC,IAAI,EACJ,WAAW,EACX,KAAU,GACX,EAAE;IACD,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC;CAC9C,2CAgCA;AAED,OAAO,EAAE,kBAAkB,EAAE,MAAM,EAAE,oBAAoB,EAAE,KAAK,YAAY,EAAE,CAAC;AAC/E,OAAO,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAC"}

package/dist/layouts/docs.js

@@ -20,23 +20,23 @@ import { HideIfEmpty } from '../components/ui/hide-if-empty.js';
 export function DocsLayout({ nav: { transparentMode, ...nav } = {}, sidebar = {}, searchToggle, disableThemeSwitch = false, themeSwitch = { enabled: !disableThemeSwitch }, i18n = false, children, ...props }) {
     const tabs = useMemo(() => getSidebarTabsFromOptions(sidebar.tabs, props.tree) ?? [], [sidebar.tabs, props.tree]);
     const links = getLinks(props.links ?? [], props.githubUrl);
-    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]', !nav.component && nav.enabled !== false
-        ? '[--fd-nav-height:calc(var(--spacing)*14)] md:[--fd-nav-height:0px]'
+    const variables = cn('[--fd-tocnav-height:36px] md:[--fd-sidebar-width:268px] lg:[--fd-sidebar-width:290px] xl:[--fd-toc-width:290px] xl:[--fd-tocnav-height:0px]', !nav.component && nav.enabled !== false
+        ? '[--fd-nav-height:56px] md:[--fd-nav-height:0px]'
         : undefined);
     const pageStyles = {
         tocNav: cn('xl:hidden'),
         toc: cn('max-xl:hidden'),
     };
-    return (_jsx(TreeContextProvider, { tree: props.tree, children: _jsxs(NavProvider, { transparentMode: transparentMode, children: [slot(nav, _jsxs(Navbar, { className: "md:hidden", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex items-center gap-2.5 font-semibold", children: nav.title }), _jsx("div", { className: "flex flex-1 flex-row items-center gap-1", children: nav.children }), slots('sm', searchToggle, _jsx(SearchToggle, { hideIfDisabled: true })), _jsx(NavbarSidebarTrigger, { className: "-me-2 md:hidden" })] })), _jsxs("main", { id: "nd-docs-layout", ...props.containerProps, className: cn('flex flex-1 flex-row pe-(--fd-layout-offset)', variables, props.containerProps?.className), style: {
+    return (_jsx(TreeContextProvider, { tree: props.tree, children: _jsxs(NavProvider, { transparentMode: transparentMode, children: [slot(nav, _jsxs(Navbar, { className: "h-14 md:hidden", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex items-center gap-2.5 font-semibold", children: nav.title }), _jsx("div", { className: "flex-1", children: nav.children }), slots('sm', searchToggle, _jsx(SearchToggle, { hideIfDisabled: true })), _jsx(NavbarSidebarTrigger, { className: "-me-2 md:hidden" })] })), _jsxs("main", { id: "nd-docs-layout", ...props.containerProps, className: cn('flex flex-1 flex-row pe-(--fd-layout-offset)', variables, props.containerProps?.className), style: {
                         ...layoutVariables,
                         ...props.containerProps?.style,
-                    }, children: [slot(sidebar, _jsx(DocsLayoutSidebar, { ...omit(sidebar, 'enabled', 'component', 'tabs'), links: links, nav: _jsxs(_Fragment, { children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex text-[15px] items-center gap-2.5 font-medium", children: nav.title }), nav.children] }), banner: _jsxs(_Fragment, { children: [tabs.length > 0 ? _jsx(RootToggle, { options: tabs }) : null, slots('lg', searchToggle, _jsx(LargeSearchToggle, { hideIfDisabled: true, className: "rounded-lg max-md:hidden" })), sidebar.banner] }), footer: _jsxs(_Fragment, { children: [_jsx(DocsLayoutSidebarFooter, { links: links.filter((item) => item.type === 'icon'), i18n: i18n, themeSwitch: themeSwitch }), sidebar.footer] }) })), _jsx(StylesProvider, { ...pageStyles, children: children })] })] }) }));
+                    }, children: [slot(sidebar, _jsx(DocsLayoutSidebar, { ...omit(sidebar, 'enabled', 'component', 'tabs'), links: links, nav: _jsxs(_Fragment, { children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex text-[15px] items-center gap-2.5 font-medium", children: nav.title }), nav.children] }), banner: _jsxs(_Fragment, { children: [tabs.length > 0 ? _jsx(RootToggle, { options: tabs }) : null, slots('lg', searchToggle, _jsx(LargeSearchToggle, { hideIfDisabled: true, className: "max-md:hidden" })), sidebar.banner] }), footer: _jsxs(_Fragment, { children: [_jsx(DocsLayoutSidebarFooter, { links: links.filter((item) => item.type === 'icon'), i18n: i18n, themeSwitch: themeSwitch }), sidebar.footer] }) })), _jsx(StylesProvider, { ...pageStyles, children: children })] })] }) }));
 }
 export function DocsLayoutSidebar({ collapsible = true, components, nav, links = [], footer, banner, ...props }) {
-    return (_jsxs(_Fragment, { children: [collapsible ? _jsx(CollapsibleControl, {}) : null, _jsxs(Sidebar, { ...props, collapsible: collapsible, className: cn('md:ps-(--fd-layout-offset)', props.className), children: [_jsx(HideIfEmpty, { children: _jsxs(SidebarHeader, { children: [_jsxs("div", { className: "flex py-1.5 max-md:hidden", children: [nav, collapsible && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
+    return (_jsxs(_Fragment, { children: [collapsible ? _jsx(CollapsibleControl, {}) : null, _jsxs(Sidebar, { ...props, collapsible: collapsible, className: cn('data-[collapsed=false]:w-[calc(var(--fd-sidebar-width)+var(--fd-layout-offset))] data-[collapsed=true]:me-[calc(var(--fd-layout-offset)-var(--fd-sidebar-width))]', props.className), children: [_jsx(HideIfEmpty, { children: _jsxs(SidebarHeader, { children: [_jsxs("div", { className: "flex max-md:hidden", children: [nav, collapsible && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
                                                 color: 'ghost',
                                                 size: 'icon-sm',
-                                            }), 'ms-auto mb-auto -my-1.5 text-fd-muted-foreground max-md:hidden'), children: _jsx(SidebarIcon, {}) }))] }), banner] }) }), _jsxs(SidebarViewport, { children: [links
+                                            }), 'ms-auto mb-auto text-fd-muted-foreground max-md:hidden'), children: _jsx(SidebarIcon, {}) }))] }), banner] }) }), _jsxs(SidebarViewport, { children: [links
                                 .filter((v) => v.type !== 'icon')
                                 .map((item, i, list) => (_jsx(SidebarLinkItem, { item: item, className: cn(i === list.length - 1 && 'mb-4') }, i))), _jsx(SidebarPageTree, { components: components })] }), _jsx(HideIfEmpty, { children: _jsx(SidebarFooter, { children: footer }) })] })] }));
 }

package/dist/layouts/home.js

@@ -21,7 +21,7 @@ export function Header({ nav = {}, i18n = false, links, githubUrl, themeSwitch,
     const menuItems = finalLinks.filter((item) => ['menu', 'all'].includes(item.on ?? 'all'));
     return (_jsxs(Navbar, { children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex items-center gap-2.5 font-semibold", children: nav.title }), nav.children, _jsx("ul", { className: "flex flex-row items-center gap-2 px-6 max-sm:hidden", children: navItems
                     .filter((item) => !isSecondary(item))
-                    .map((item, i) => (_jsx(NavbarLinkItem, { item: item, className: "text-sm" }, i))) }), _jsxs("div", { className: "flex flex-row items-center justify-end gap-1.5 flex-1", children: [slots('sm', searchToggle, _jsx(SearchToggle, { className: "lg:hidden", hideIfDisabled: true })), slots('lg', searchToggle, _jsx(LargeSearchToggle, { className: "w-full max-w-[240px] max-lg:hidden", hideIfDisabled: true })), slot(themeSwitch, _jsx(ThemeToggle, { className: "max-lg:hidden", mode: themeSwitch?.mode })), i18n ? (_jsx(LanguageToggle, { className: "max-lg:hidden", children: _jsx(Languages, { className: "size-5" }) })) : null] }), _jsxs("ul", { className: "flex flex-row items-center", children: [navItems.filter(isSecondary).map((item, i) => (_jsx(NavbarLinkItem, { item: item, className: "-me-1.5 max-lg:hidden" }, i))), _jsxs(Menu, { className: "lg:hidden", children: [_jsx(MenuTrigger, { "aria-label": "Toggle Menu", className: "group -me-2", enableHover: nav.enableHoverToOpen, children: _jsx(ChevronDown, { className: "size-3 transition-transform duration-300 group-data-[state=open]:rotate-180" }) }), _jsxs(MenuContent, { className: "sm:flex-row sm:items-center sm:justify-end", children: [menuItems
+                    .map((item, i) => (_jsx(NavbarLinkItem, { item: item, className: "text-sm" }, i))) }), _jsxs("div", { className: "flex flex-row items-center justify-end gap-1.5 flex-1", children: [slots('sm', searchToggle, _jsx(SearchToggle, { className: "lg:hidden", hideIfDisabled: true })), slots('lg', searchToggle, _jsx(LargeSearchToggle, { className: "w-full rounded-full ps-2.5 max-w-[240px] max-lg:hidden", hideIfDisabled: true })), slot(themeSwitch, _jsx(ThemeToggle, { className: "max-lg:hidden", mode: themeSwitch?.mode })), i18n ? (_jsx(LanguageToggle, { className: "max-lg:hidden", children: _jsx(Languages, { className: "size-5" }) })) : null] }), _jsxs("ul", { className: "flex flex-row items-center", children: [navItems.filter(isSecondary).map((item, i) => (_jsx(NavbarLinkItem, { item: item, className: "-me-1.5 max-lg:hidden" }, i))), _jsxs(Menu, { className: "lg:hidden", children: [_jsx(MenuTrigger, { "aria-label": "Toggle Menu", className: "group -me-2", enableHover: nav.enableHoverToOpen, children: _jsx(ChevronDown, { className: "size-3 transition-transform duration-300 group-data-[state=open]:rotate-180" }) }), _jsxs(MenuContent, { className: "sm:flex-row sm:items-center sm:justify-end", children: [menuItems
                                         .filter((item) => !isSecondary(item))
                                         .map((item, i) => (_jsx(MenuLinkItem, { item: item, className: "sm:hidden" }, i))), _jsxs("div", { className: "-ms-1.5 flex flex-row items-center gap-1.5 max-sm:mt-2", children: [menuItems.filter(isSecondary).map((item, i) => (_jsx(MenuLinkItem, { item: item, className: "-me-1.5" }, i))), _jsx("div", { role: "separator", className: "flex-1" }), i18n ? (_jsxs(LanguageToggle, { children: [_jsx(Languages, { className: "size-5" }), _jsx(LanguageToggleText, {}), _jsx(ChevronDown, { className: "size-3 text-fd-muted-foreground" })] })) : null, slot(themeSwitch, _jsx(ThemeToggle, { mode: themeSwitch?.mode }))] })] })] })] })] }));
 }

package/dist/layouts/notebook-client.js

@@ -11,7 +11,7 @@ import { isActive } from '../utils/is-active.js';
 export function Navbar({ mode, ...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 px-(--fd-layout-offset) backdrop-blur-sm transition-colors', (!isTransparent || open) && 'bg-fd-background/80', mode === 'auto' &&
+    return (_jsx("header", { id: "nd-subnav", ...props, className: cn('fixed flex flex-col inset-x-0 top-(--fd-banner-height) z-10 px-(--fd-layout-offset) h-(--fd-nav-height) backdrop-blur-sm transition-colors', (!isTransparent || open) && 'bg-fd-background/80', mode === 'auto' &&
             !collapsed &&
             'ps-[calc(var(--fd-layout-offset)+var(--fd-sidebar-width))]', props.className), children: props.children }));
 }

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,EAAW,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,KAAK,eAAe,EAAyB,MAAM,kBAAkB,CAAC;AAqB/E,OAAO,EAIL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAGL,MAAM,EACN,oBAAoB,EACrB,MAAM,mBAAmB,CAAC;AAc3B,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,OAAO,CAAC,cAAc,CAAC,CAAC;IAElC,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAmKhD;AAoLD,OAAO,EAAE,MAAM,EAAE,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"notebook.d.ts","sourceRoot":"","sources":["../../src/layouts/notebook.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAAW,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,KAAK,eAAe,EAAyB,MAAM,kBAAkB,CAAC;AAqB/E,OAAO,EAIL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAGL,MAAM,EACN,oBAAoB,EACrB,MAAM,mBAAmB,CAAC;AAc3B,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,OAAO,CAAC,cAAc,CAAC,CAAC;IAElC,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAiKhD;AAsLD,OAAO,EAAE,MAAM,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/layouts/notebook.js

@@ -22,25 +22,23 @@ export function DocsLayout(props) {
     const navMode = nav.mode ?? 'auto';
     const links = getLinks(props.links ?? [], props.githubUrl);
     const tabs = useMemo(() => getSidebarTabsFromOptions(tabOptions, props.tree) ?? [], [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)*24)]');
+    const variables = cn('[--fd-nav-height:56px] [--fd-tocnav-height:36px] md:[--fd-sidebar-width:286px] md:[--fd-nav-height:64px] xl:[--fd-toc-width:286px] xl:[--fd-tocnav-height:0px]', tabs.length > 0 && tabMode === 'navbar' && 'lg:[--fd-nav-height:104px]');
     const pageStyles = {
         tocNav: cn('xl:hidden'),
         toc: cn('max-xl:hidden'),
         page: cn('mt-(--fd-nav-height)'),
     };
-    const sidebarHeader = navMode === 'auto' && (_jsxs("div", { className: "flex justify-between max-md:hidden", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex items-center gap-2.5 font-medium", children: nav.title }), (sidebar.collapsible ?? true) && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
+    const sidebarHeader = (_jsxs("div", { className: "flex justify-between max-md:hidden", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex items-center gap-2.5 font-medium", children: nav.title }), (sidebar.collapsible ?? true) && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
                     color: 'ghost',
                     size: 'icon-sm',
-                    className: 'mb-auto text-fd-muted-foreground',
+                    className: 'mt-px mb-auto text-fd-muted-foreground',
                 })), children: _jsx(SidebarIcon, {}) }))] }));
     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(Sidebar, { ...sidebar, className: cn('md:ps-(--fd-layout-offset)', navMode === 'top'
+                }, children: [_jsxs(Sidebar, { ...sidebar, className: cn('data-[collapsed=false]:w-[calc(var(--fd-sidebar-width)+var(--fd-layout-offset))] data-[collapsed=true]:me-[calc(var(--fd-layout-offset)-var(--fd-sidebar-width))]', navMode === 'top'
                             ? 'md:bg-transparent'
-                            : 'md:[--fd-nav-height:0px]', sidebar.className), children: [_jsx(HideIfEmpty, { children: _jsxs(SidebarHeader, { children: [sidebarHeader, nav.children, sidebarBanner, tabMode === 'sidebar' && tabs.length > 0 ? (_jsx(RootToggle, { className: "mb-2", options: tabs })) : null, tabMode === 'navbar' && tabs.length > 0 && (_jsx(RootToggle, { options: tabs, className: "lg:hidden" }))] }) }), _jsxs(SidebarViewport, { children: [links
+                            : 'md:[--fd-nav-height:0px]', sidebar.className), children: [_jsx(HideIfEmpty, { children: _jsxs(SidebarHeader, { children: [navMode === 'auto' && sidebarHeader, nav.children, sidebarBanner, tabMode === 'sidebar' && tabs.length > 0 ? (_jsx(RootToggle, { className: "mb-2", options: tabs })) : null, tabMode === 'navbar' && tabs.length > 0 && (_jsx(RootToggle, { options: tabs, className: "lg:hidden" }))] }) }), _jsxs(SidebarViewport, { children: [links
                                         .filter((item) => item.type !== 'icon')
                                         .map((item, i) => (_jsx(SidebarLinkItem, { item: item, className: cn('lg:hidden', i === links.length - 1 && 'mb-4') }, i))), _jsx(SidebarPageTree, { components: sidebarComponents })] }), _jsx(HideIfEmpty, { children: _jsxs(SidebarFooter, { className: "flex flex-row items-center justify-end", children: [_jsx("div", { className: "flex items-center flex-1 empty:hidden lg:hidden", children: links
                                                 .filter((item) => item.type === 'icon')
@@ -54,10 +52,12 @@ function DocsNavbar({ links, tabs, ...props }) {
     const navMode = props.nav?.mode ?? 'auto';
     const sidebarCollapsible = props.sidebar?.collapsible ?? true;
     const nav = (_jsx(Link, { href: props.nav?.url ?? '/', className: cn('inline-flex items-center gap-2.5 font-semibold empty:hidden', navMode === 'auto' && 'md:hidden'), children: props.nav?.title }));
-    return (_jsxs(Navbar, { mode: navMode, children: [_jsxs("div", { className: cn('flex flex-row border-b 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({
+    return (_jsxs(Navbar, { mode: navMode, children: [_jsxs("div", { className: cn('flex border-b px-4 flex-1', 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-sm',
-                                }), 'text-fd-muted-foreground -ms-1.5 me-2 data-[collapsed=false]:hidden max-md:hidden'), children: _jsx(SidebarIcon, {}) })) : null, nav] }), slots('lg', props.searchToggle, _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
+                                }), 'text-fd-muted-foreground -ms-1.5 me-2 data-[collapsed=false]:hidden max-md:hidden'), children: _jsx(SidebarIcon, {}) })) : null, nav] }), slots('lg', props.searchToggle, _jsx(LargeSearchToggle, { hideIfDisabled: true, className: cn('w-full my-auto max-md:hidden', navMode === 'top'
+                            ? 'rounded-xl max-w-sm ps-2.5'
+                            : '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))) }), props.nav?.children, slots('sm', props.searchToggle, _jsx(SearchToggle, { hideIfDisabled: true, className: "md:hidden" })), _jsx(NavbarSidebarTrigger, { className: "-me-1.5 md:hidden" }), links
                                 .filter((item) => item.type === 'icon')

package/dist/style.css

@@ -82,6 +82,8 @@
     --animate-fd-nav-menu-out: fd-nav-menu-out 200ms ease;
     --animate-fd-enterFromLeft: fd-enterFromLeft 250ms ease;
     --animate-fd-enterFromRight: fd-enterFromRight 250ms ease;
+    --animate-fd-sidebar-in: fd-sidebar-in 250ms ease;
+    --animate-fd-sidebar-out: fd-sidebar-out 250ms ease;
     --animate-fd-exitToLeft: fd-exitToLeft 250ms ease;
     --animate-fd-exitToRight: fd-exitToRight 250ms ease;
   }
@@ -303,14 +305,17 @@
   .inset-y-0 {
     inset-block: calc(var(--spacing) * 0);
   }
+  .inset-y-1 {
+    inset-block: calc(var(--spacing) * 1);
+  }
   .inset-y-3 {
     inset-block: calc(var(--spacing) * 3);
   }
   .start-0 {
     inset-inline-start: calc(var(--spacing) * 0);
   }
-  .start-3 {
-    inset-inline-start: calc(var(--spacing) * 3);
+  .start-2\.5 {
+    inset-inline-start: calc(var(--spacing) * 2.5);
   }
   .end-2 {
     inset-inline-end: calc(var(--spacing) * 2);
@@ -412,9 +417,6 @@
   .\!my-0 {
     margin-block: calc(var(--spacing) * 0) !important;
   }
-  .-my-1\.5 {
-    margin-block: calc(var(--spacing) * -1.5);
-  }
   .my-0 {
     margin-block: calc(var(--spacing) * 0);
   }
@@ -430,9 +432,6 @@
   .-ms-1\.5 {
     margin-inline-start: calc(var(--spacing) * -1.5);
   }
-  .ms-1 {
-    margin-inline-start: calc(var(--spacing) * 1);
-  }
   .ms-2 {
     margin-inline-start: calc(var(--spacing) * 2);
   }
@@ -442,9 +441,6 @@
   .ms-px {
     margin-inline-start: 1px;
   }
-  .-me-\(--fd-sidebar-width\) {
-    margin-inline-end: calc(var(--fd-sidebar-width) * -1);
-  }
   .-me-1\.5 {
     margin-inline-end: calc(var(--spacing) * -1.5);
   }
@@ -844,12 +840,18 @@
   .mt-auto {
     margin-top: auto;
   }
+  .mt-px {
+    margin-top: 1px;
+  }
   .mr-auto {
     margin-right: auto;
   }
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
+  .mb-1\.5 {
+    margin-bottom: calc(var(--spacing) * 1.5);
+  }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -865,6 +867,22 @@
   .box-content {
     box-sizing: content-box;
   }
+  .fd-scroll-container {
+    &::-webkit-scrollbar {
+      width: 5px;
+      height: 5px;
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 5px;
+      background: var(--color-fd-border);
+    }
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    &::-webkit-scrollbar-corner {
+      display: none;
+    }
+  }
   .block {
     display: block;
   }
@@ -886,19 +904,6 @@
   .table {
     display: table;
   }
-  .fd-scroll-container {
-    &::-webkit-scrollbar {
-      width: 5px;
-      height: 5px;
-    }
-    &::-webkit-scrollbar-thumb {
-      border-radius: 5px;
-      background: var(--color-fd-border);
-    }
-    &::-webkit-scrollbar-track {
-      background: transparent;
-    }
-  }
   .size-3 {
     width: calc(var(--spacing) * 3);
     height: calc(var(--spacing) * 3);
@@ -930,6 +935,9 @@
   .h-\(--fd-height\) {
     height: var(--fd-height);
   }
+  .h-\(--fd-nav-height\) {
+    height: var(--fd-nav-height);
+  }
   .h-\(--fd-sidebar-height\) {
     height: var(--fd-sidebar-height);
   }
@@ -1079,8 +1087,8 @@
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  .translate-x-0 {
-    --tw-translate-x: calc(var(--spacing) * 0);
+  .translate-x-2 {
+    --tw-translate-x: calc(var(--spacing) * 2);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
   .-translate-y-1\/2 {
@@ -1234,9 +1242,9 @@
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
-  .rounded-e-xl {
-    border-start-end-radius: var(--radius-xl);
-    border-end-end-radius: var(--radius-xl);
+  .rounded-e-2xl {
+    border-start-end-radius: var(--radius-2xl);
+    border-end-end-radius: var(--radius-2xl);
   }
   .border {
     border-style: var(--tw-border-style);
@@ -1461,6 +1469,9 @@
   .ps-2 {
     padding-inline-start: calc(var(--spacing) * 2);
   }
+  .ps-2\.5 {
+    padding-inline-start: calc(var(--spacing) * 2.5);
+  }
   .ps-3 {
     padding-inline-start: calc(var(--spacing) * 3);
   }
@@ -1485,9 +1496,6 @@
   .pt-0 {
     padding-top: calc(var(--spacing) * 0);
   }
-  .pt-1\.5 {
-    padding-top: calc(var(--spacing) * 1.5);
-  }
   .pt-8 {
     padding-top: calc(var(--spacing) * 8);
   }
@@ -1705,9 +1713,6 @@
   .\[--fd-nav-height\:56px\] {
     --fd-nav-height: 56px;
   }
-  .\[--fd-nav-height\:calc\(var\(--spacing\)\*14\)\] {
-    --fd-nav-height: calc(var(--spacing) * 14);
-  }
   .\[--fd-tocnav-height\:36px\] {
     --fd-tocnav-height: 36px;
   }
@@ -1734,6 +1739,11 @@
       display: flex;
     }
   }
+  .\*\:w-\(--fd-sidebar-width\) {
+    :is(& > *) {
+      width: var(--fd-sidebar-width);
+    }
+  }
   .\*\:flex-col {
     :is(& > *) {
       flex-direction: column;
@@ -1908,6 +1918,16 @@
       display: none;
     }
   }
+  .data-\[collapsed\=false\]\:w-\[calc\(var\(--fd-sidebar-width\)\+var\(--fd-layout-offset\)\)\] {
+    &[data-collapsed="false"] {
+      width: calc(var(--fd-sidebar-width) + var(--fd-layout-offset));
+    }
+  }
+  .data-\[collapsed\=true\]\:me-\[calc\(var\(--fd-layout-offset\)-var\(--fd-sidebar-width\)\)\] {
+    &[data-collapsed="true"] {
+      margin-inline-end: calc(var(--fd-layout-offset) - var(--fd-sidebar-width));
+    }
+  }
   .data-\[empty\=true\]\:hidden {
     &[data-empty="true"] {
       display: none;
@@ -1958,11 +1978,6 @@
       animation: var(--animate-fd-dialog-out);
     }
   }
-  .data-\[state\=closed\]\:animate-fd-exitToLeft {
-    &[data-state="closed"] {
-      animation: var(--animate-fd-exitToLeft);
-    }
-  }
   .data-\[state\=closed\]\:animate-fd-fade-out {
     &[data-state="closed"] {
       animation: var(--animate-fd-fade-out);
@@ -1978,11 +1993,21 @@
       animation: var(--animate-fd-popover-out);
     }
   }
+  .data-\[state\=closed\]\:animate-fd-sidebar-out {
+    &[data-state="closed"] {
+      animation: var(--animate-fd-sidebar-out);
+    }
+  }
   .data-\[state\=hidden\]\:animate-fd-fade-out {
     &[data-state="hidden"] {
       animation: var(--animate-fd-fade-out);
     }
   }
+  .data-\[state\=inactive\]\:hidden {
+    &[data-state="inactive"] {
+      display: none;
+    }
+  }
   .data-\[state\=open\]\:animate-fd-accordion-down {
     &[data-state="open"] {
       animation: var(--animate-fd-accordion-down);
@@ -1998,11 +2023,6 @@
       animation: var(--animate-fd-dialog-in);
     }
   }
-  .data-\[state\=open\]\:animate-fd-enterFromLeft {
-    &[data-state="open"] {
-      animation: var(--animate-fd-enterFromLeft);
-    }
-  }
   .data-\[state\=open\]\:animate-fd-fade-in {
     &[data-state="open"] {
       animation: var(--animate-fd-fade-in);
@@ -2018,6 +2038,11 @@
       animation: var(--animate-fd-popover-in);
     }
   }
+  .data-\[state\=open\]\:animate-fd-sidebar-in {
+    &[data-state="open"] {
+      animation: var(--animate-fd-sidebar-in);
+    }
+  }
   .data-\[state\=open\]\:bg-fd-accent\/50 {
     &[data-state="open"] {
       background-color: color-mix(in srgb, hsl(0, 0%, 90.1%) 50%, transparent);
@@ -2146,11 +2171,6 @@
       padding-block: calc(var(--spacing) * 1.5);
     }
   }
-  .md\:ps-\(--fd-layout-offset\) {
-    @media (width >= 48rem) {
-      padding-inline-start: var(--fd-layout-offset);
-    }
-  }
   .md\:pt-12 {
     @media (width >= 48rem) {
       padding-top: calc(var(--spacing) * 12);
@@ -2173,6 +2193,11 @@
       --fd-nav-height: 0px;
     }
   }
+  .md\:\[--fd-nav-height\:64px\] {
+    @media (width >= 48rem) {
+      --fd-nav-height: 64px;
+    }
+  }
   .md\:\[--fd-sidebar-width\:268px\] {
     @media (width >= 48rem) {
       --fd-sidebar-width: 268px;
@@ -2224,9 +2249,9 @@
       border-width: 1px;
     }
   }
-  .lg\:\[--fd-nav-height\:calc\(var\(--spacing\)\*24\)\] {
+  .lg\:\[--fd-nav-height\:104px\] {
     @media (width >= 64rem) {
-      --fd-nav-height: calc(var(--spacing) * 24);
+      --fd-nav-height: 104px;
     }
   }
   .lg\:\[--fd-padding\:1rem\] {
@@ -2234,9 +2259,9 @@
       --fd-padding: 1rem;
     }
   }
-  .lg\:\[--fd-sidebar-width\:286px\] {
+  .lg\:\[--fd-sidebar-width\:290px\] {
     @media (width >= 64rem) {
-      --fd-sidebar-width: 286px;
+      --fd-sidebar-width: 290px;
     }
   }
   .xl\:start-4 {
@@ -2264,6 +2289,11 @@
       --fd-toc-width: 286px;
     }
   }
+  .xl\:\[--fd-toc-width\:290px\] {
+    @media (width >= 80rem) {
+      --fd-toc-width: 290px;
+    }
+  }
   .xl\:\[--fd-tocnav-height\:0px\] {
     @media (width >= 80rem) {
       --fd-tocnav-height: 0px;
@@ -2851,6 +2881,16 @@
     transform: translateX(-200px);
   }
 }
+@keyframes fd-sidebar-in {
+  from {
+    transform: translateX(-100%);
+  }
+}
+@keyframes fd-sidebar-out {
+  to {
+    transform: translateX(-100%);
+  }
+}
 @keyframes fd-nav-menu-in {
   from {
     opacity: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "15.3.3",
+  "version": "15.3.4",
   "description": "The framework for building a documentation website in Next.js",
   "keywords": [
     "NextJs",
@@ -89,7 +89,7 @@
     "react-medium-image-zoom": "^5.2.14",
     "react-remove-scroll": "^2.6.3",
     "tailwind-merge": "^3.3.0",
-    "fumadocs-core": "15.3.3"
+    "fumadocs-core": "15.3.4"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^15.3.2",
@@ -100,9 +100,9 @@
     "next": "15.3.2",
     "tailwindcss": "^4.1.7",
     "tsc-alias": "^1.8.16",
-    "@fumadocs/cli": "0.1.1",
+    "@fumadocs/cli": "0.2.0",
     "eslint-config-custom": "0.0.0",
-    "fumadocs-core": "15.3.3",
+    "fumadocs-core": "15.3.4",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {