fumadocs-ui 15.6.5 → 15.6.7

package/css/preset.css

@@ -10,7 +10,12 @@
   --color-fd-success: oklch(72.3% 0.219 149.579);
 }
 
+[dir='rtl'] {
+  --fd-sidebar-mobile-offset: -100%;
+}
+
 @theme {
+  --fd-sidebar-mobile-offset: 100%;
   --spacing-fd-container: 1400px;
   --fd-page-width: 1200px;
   --fd-sidebar-width: 0px;
@@ -54,6 +59,18 @@
   --animate-fd-exitToLeft: fd-exitToLeft 250ms ease;
   --animate-fd-exitToRight: fd-exitToRight 250ms ease;
 
+  @keyframes fd-sidebar-in {
+    from {
+      transform: translateX(var(--fd-sidebar-mobile-offset));
+    }
+  }
+
+  @keyframes fd-sidebar-out {
+    to {
+      transform: translateX(var(--fd-sidebar-mobile-offset));
+    }
+  }
+
   @keyframes fd-collapsible-down {
     from {
       height: 0;
@@ -190,18 +207,6 @@
     }
   }
 
-  @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/css/shiki.css

@@ -23,19 +23,22 @@
   }
 
   &[data-line-numbers] code .twoslash-meta-line {
-    @apply ml-7;
+    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
   }
 
   &[data-line-numbers] code .line {
-    width: calc(100% - 7 * var(--spacing));
     counter-increment: line;
-    padding-left: calc(var(--padding-left) - var(--spacing));
-    @apply ml-7;
+    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
 
     &::after {
       position: absolute;
       content: counter(line);
-      @apply top-0 -left-5 text-fd-muted-foreground/60;
+      color: color-mix(
+        in oklab,
+        var(--fd-counter-color, var(--color-fd-muted-foreground)) 60%,
+        transparent
+      );
+      @apply top-0 left-4;
     }
   }
 
@@ -46,6 +49,7 @@
 
   code .diff.remove {
     opacity: 0.7;
+    --fd-counter-color: var(--color-fd-diff-remove-symbol);
     @apply bg-fd-diff-remove;
   }
 
@@ -55,6 +59,7 @@
   }
 
   code .diff.add {
+    --fd-counter-color: var(--color-fd-diff-add-symbol);
     @apply bg-fd-diff-add;
   }
 
@@ -63,11 +68,12 @@
     @apply text-fd-diff-add-symbol;
   }
 
-  .highlighted {
+  code .highlighted {
+    --fd-counter-color: var(--color-fd-primary);
     @apply bg-fd-primary/10;
   }
 
-  .highlighted-word {
+  code .highlighted-word {
     padding: 1px;
     @apply border -my-px border-fd-primary/30 bg-fd-primary/10 rounded-md font-medium;
   }

package/dist/components/dialog/search.js

@@ -65,7 +65,7 @@ export function SearchDialogList({ items = null, Empty = () => (_jsx("div", { cl
         onOpenChange(false);
     };
     const onKey = useEffectEvent((e) => {
-        if (!items)
+        if (!items || e.isComposing)
             return;
         if (e.key === 'ArrowDown' || e.key == 'ArrowUp') {
             let idx = items.findIndex((item) => item.id === active);

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

@@ -3,7 +3,7 @@ import { type LinkProps } from 'fumadocs-core/link';
 import { type ScrollAreaProps } from '@radix-ui/react-scroll-area';
 import type { CollapsibleContentProps, CollapsibleTriggerProps } from '@radix-ui/react-collapsible';
 import type { PageTree } from 'fumadocs-core/server';
-export interface SidebarProps extends ComponentProps<'aside'> {
+export interface SidebarProps {
     /**
      * Open folders by default if their level is lower or equal to a specific level
      * (Starting from 1)
@@ -18,13 +18,17 @@ export interface SidebarProps extends ComponentProps<'aside'> {
      */
     prefetch?: boolean;
     /**
-     * Support collapsing the sidebar on desktop mode
-     *
-     * @defaultValue true
+     * Children to render
+     */
+    Content: ReactNode;
+    /**
+     * Alternative children for mobile
      */
-    collapsible?: boolean;
+    Mobile?: ReactNode;
 }
-export declare function Sidebar({ defaultOpenLevel, prefetch, collapsible, ...props }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+export declare function Sidebar({ defaultOpenLevel, prefetch, Mobile, Content, }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarContent(props: ComponentProps<'aside'>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarContentMobile({ className, children, ...props }: ComponentProps<'aside'>): import("react/jsx-runtime").JSX.Element;
 export declare function SidebarHeader(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 export declare function SidebarFooter(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 export declare function SidebarViewport(props: ScrollAreaProps): import("react/jsx-runtime").JSX.Element;

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,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;AAKrD,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,2CA+Gd;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"}
+{"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;AAKrD,MAAM,WAAW,YAAY;IAC3B;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AA2BD,wBAAgB,OAAO,CAAC,EACtB,gBAAoB,EACpB,QAAe,EACf,MAAM,EACN,OAAO,GACR,EAAE,YAAY,2CAed;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC,2CAoE5D;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,CAAC,2CA+BzB;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,2CAiBrD;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,2CAY1D;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,SAAS,GAAG;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,2CAiBA;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,2CAezB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,2CAiCjD;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,uBAAuB,2CAoClE;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, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, 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';
@@ -14,7 +14,7 @@ import { cva } from 'class-variance-authority';
 import { useTreeContext, useTreePath } from '../../contexts/tree.js';
 import { useMediaQuery } from 'fumadocs-core/utils/use-media-query';
 import { Presence } from '@radix-ui/react-presence';
-const itemVariants = cva('relative flex flex-row items-center gap-2 rounded-xl p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] [&_svg]:size-4 [&_svg]:shrink-0', {
+const itemVariants = cva('relative flex flex-row items-center gap-2 rounded-xl p-2 ps-(--sidebar-item-offset) text-start text-fd-muted-foreground [overflow-wrap:anywhere] [&_svg]:size-4 [&_svg]:shrink-0', {
     variants: {
         active: {
             true: 'bg-fd-primary/10 text-fd-primary',
@@ -24,8 +24,8 @@ const itemVariants = cva('relative flex flex-row items-center gap-2 rounded-xl p
 });
 const Context = createContext(null);
 const FolderContext = createContext(null);
-export function Sidebar({ defaultOpenLevel = 0, prefetch = true, collapsible = true, ...props }) {
-    const { open, setOpen, collapsed } = useSidebar();
+export function Sidebar({ defaultOpenLevel = 0, prefetch = true, Mobile, Content, }) {
+    const isMobile = useMediaQuery('(width < 768px)') ?? false;
     const context = useMemo(() => {
         return {
             defaultOpenLevel,
@@ -33,45 +33,42 @@ export function Sidebar({ defaultOpenLevel = 0, prefetch = true, collapsible = t
             level: 1,
         };
     }, [defaultOpenLevel, prefetch]);
+    return (_jsx(Context.Provider, { value: context, children: isMobile && Mobile != null ? Mobile : Content }));
+}
+export function SidebarContent(props) {
+    const { collapsed } = useSidebar();
     const [hover, setHover] = useState(false);
     const timerRef = useRef(0);
     const closeTimeRef = useRef(0);
-    // md
-    const isMobile = useMediaQuery('(width < 768px)') ?? false;
     useOnChange(collapsed, () => {
         setHover(false);
         closeTimeRef.current = Date.now() + 150;
     });
-    if (isMobile) {
-        const state = open ? 'open' : 'closed';
-        return (_jsxs(Context.Provider, { value: context, children: [_jsx(Presence, { present: open, children: _jsx("div", { "data-state": state, className: "fixed z-40 inset-0 backdrop-blur-xs data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out", onClick: () => setOpen(false) }) }), _jsx(Presence, { present: open, children: ({ present }) => (_jsx("aside", { id: "nd-sidebar-mobile", ...props, "data-state": state, className: cn('fixed text-[15px] flex flex-col shadow-lg rounded-2xl border start-2 inset-y-2 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('fixed start-0 flex flex-col items-end top-(--fd-sidebar-top) bottom-(--fd-sidebar-margin) z-20 bg-fd-card text-sm border-e max-md:hidden *:w-(--fd-sidebar-width)', collapsed && [
-            'rounded-xl border',
-            hover
-                ? 'z-50 translate-x-2 shadow-lg'
-                : 'opacity-0 -translate-x-(--fd-sidebar-offset) rtl:translate-x-(--fd-sidebar-offset)',
+            'rounded-xl border translate-x-(--fd-sidebar-offset) rtl:-translate-x-(--fd-sidebar-offset)',
+            hover ? 'z-50 shadow-lg' : 'opacity-0',
         ], props.className), style: {
             transition: ['top', 'opacity', 'translate', 'width']
                 .map((v) => `${v} ease 250ms`)
                 .join(', '),
             ...props.style,
-            '--fd-sidebar-offset': 'calc(100% - 16px)',
+            '--fd-sidebar-offset': hover
+                ? 'calc(var(--spacing) * 2)'
+                : 'calc(16px - 100%)',
             '--fd-sidebar-margin': collapsed ? '0.5rem' : '0px',
+            '--fd-sidebar-top': `calc(var(--fd-banner-height) + var(--fd-nav-height) + var(--fd-sidebar-margin))`,
             width: collapsed
                 ? 'var(--fd-sidebar-width)'
                 : 'calc(var(--fd-sidebar-width) + var(--fd-layout-offset))',
-            '--fd-sidebar-top': `calc(var(--fd-banner-height) + var(--fd-nav-height) + var(--fd-sidebar-margin))`,
         }, onPointerEnter: (e) => {
-            if (!collapsible ||
-                !collapsed ||
+            if (!collapsed ||
                 e.pointerType === 'touch' ||
                 closeTimeRef.current > Date.now())
                 return;
             window.clearTimeout(timerRef.current);
             setHover(true);
         }, onPointerLeave: (e) => {
-            if (!collapsible || !collapsed || e.pointerType === 'touch')
+            if (!collapsed || e.pointerType === 'touch')
                 return;
             window.clearTimeout(timerRef.current);
             timerRef.current = window.setTimeout(() => {
@@ -80,7 +77,12 @@ export function Sidebar({ defaultOpenLevel = 0, prefetch = true, collapsible = t
             }, Math.min(e.clientX, document.body.clientWidth - e.clientX) > 100
                 ? 0
                 : 500);
-        }, children: _jsx(Context.Provider, { value: context, children: props.children }) }));
+        }, children: props.children }));
+}
+export function SidebarContentMobile({ className, children, ...props }) {
+    const { open, setOpen } = useSidebar();
+    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 backdrop-blur-xs data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out", onClick: () => setOpen(false) }) }), _jsx(Presence, { present: open, children: ({ present }) => (_jsx("aside", { id: "nd-sidebar-mobile", ...props, "data-state": state, className: cn('fixed text-[15px] flex flex-col shadow-lg border-s end-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', className), children: children })) })] }));
 }
 export function SidebarHeader(props) {
     return (_jsx("div", { ...props, className: cn('flex flex-col gap-3 p-4 pb-2', props.className), children: props.children }));
@@ -90,24 +92,18 @@ export function SidebarFooter(props) {
 }
 export function SidebarViewport(props) {
     return (_jsx(ScrollArea, { ...props, className: cn('h-full', props.className), children: _jsx(ScrollViewport, { className: "p-4", style: {
+                '--sidebar-item-offset': 'calc(var(--spacing) * 2)',
                 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-1.5 px-2 empty:mb-0 [&_svg]:size-4 [&_svg]:shrink-0', props.className), style: {
-            paddingInlineStart: getOffset(level),
-            ...props.style,
-        }, children: props.children }));
+    return (_jsx("p", { ...props, className: cn('inline-flex items-center gap-2 mb-1.5 px-2 ps-(--sidebar-item-offset) empty:mb-0 [&_svg]:size-4 [&_svg]:shrink-0', props.className), children: props.children }));
 }
 export function SidebarItem({ icon, ...props }) {
     const pathname = usePathname();
     const active = props.href !== undefined && isActive(props.href, pathname, false);
-    const { prefetch, level } = useInternalContext();
-    return (_jsxs(Link, { ...props, "data-active": active, className: cn(itemVariants({ active }), props.className), prefetch: prefetch, style: {
-            paddingInlineStart: getOffset(level),
-            ...props.style,
-        }, children: [_jsx(Border, { level: level, active: active }), icon ?? (props.external ? _jsx(ExternalLink, {}) : null), props.children] }));
+    const { prefetch } = useInternalContext();
+    return (_jsxs(Link, { ...props, "data-active": active, className: cn(itemVariants({ active }), props.className), prefetch: prefetch, children: [icon ?? (props.external ? _jsx(ExternalLink, {}) : null), props.children] }));
 }
 export function SidebarFolder({ defaultOpen = false, ...props }) {
     const [open, setOpen] = useState(defaultOpen);
@@ -118,16 +114,12 @@ export function SidebarFolder({ defaultOpen = false, ...props }) {
     return (_jsx(Collapsible, { open: open, onOpenChange: setOpen, ...props, children: _jsx(FolderContext.Provider, { value: useMemo(() => ({ open, setOpen }), [open]), children: props.children }) }));
 }
 export function SidebarFolderTrigger({ className, ...props }) {
-    const { level } = useInternalContext();
     const { open } = useFolderContext();
-    return (_jsxs(CollapsibleTrigger, { className: cn(itemVariants({ active: false }), 'w-full', className), ...props, style: {
-            paddingInlineStart: getOffset(level),
-            ...props.style,
-        }, children: [_jsx(Border, { level: level }), props.children, _jsx(ChevronDown, { "data-icon": true, className: cn('ms-auto transition-transform', !open && '-rotate-90') })] }));
+    return (_jsxs(CollapsibleTrigger, { className: cn(itemVariants({ active: false }), 'w-full', className), ...props, children: [props.children, _jsx(ChevronDown, { "data-icon": true, className: cn('ms-auto transition-transform', !open && '-rotate-90') })] }));
 }
 export function SidebarFolderLink(props) {
     const { open, setOpen } = useFolderContext();
-    const { prefetch, level } = useInternalContext();
+    const { prefetch } = useInternalContext();
     const pathname = usePathname();
     const active = props.href !== undefined && isActive(props.href, pathname, false);
     return (_jsxs(Link, { ...props, "data-active": active, className: cn(itemVariants({ active }), 'w-full', props.className), onClick: (e) => {
@@ -139,17 +131,19 @@ export function SidebarFolderLink(props) {
             else {
                 setOpen(active ? !open : true);
             }
-        }, prefetch: prefetch, style: {
-            paddingInlineStart: getOffset(level),
-            ...props.style,
-        }, children: [_jsx(Border, { level: level, active: active }), props.children, _jsx(ChevronDown, { "data-icon": true, className: cn('ms-auto transition-transform', !open && '-rotate-90') })] }));
+        }, prefetch: prefetch, children: [props.children, _jsx(ChevronDown, { "data-icon": true, className: cn('ms-auto transition-transform', !open && '-rotate-90') })] }));
 }
 export function SidebarFolderContent(props) {
     const ctx = useInternalContext();
-    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-1 bg-fd-border start-2.5" })), props.children] }) }));
+    const level = ctx.level + 1;
+    return (_jsxs(CollapsibleContent, { ...props, className: cn('relative', level === 2 &&
+            "**:data-[active=true]:before:content-[''] **:data-[active=true]:before:bg-fd-primary **:data-[active=true]:before:absolute **:data-[active=true]:before:w-px **:data-[active=true]:before:inset-y-2.5 **:data-[active=true]:before:start-2.5", props.className), style: {
+            '--sidebar-item-offset': `calc(var(--spacing) * ${level > 1 ? level * 3 : 2})`,
+            ...props.style,
+        }, children: [level === 2 && (_jsx("div", { className: "absolute w-px inset-y-1 bg-fd-border start-2.5" })), _jsx(Context.Provider, { value: useMemo(() => ({
+                    ...ctx,
+                    level,
+                }), [ctx, level]), children: props.children })] }));
 }
 export function SidebarCollapseTrigger(props) {
     const { collapsed, setCollapsed } = useSidebar();
@@ -202,11 +196,3 @@ function PageTreeFolder({ item, ...props }) {
     const path = useTreePath();
     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 * 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-2.5 md:inset-y-2', active && 'bg-fd-primary') }));
-}

package/dist/components/type-table.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Info as InfoIcon } from '../icons.js';
+import { Info as InfoIcon, Link as LinkIcon } from '../icons.js';
 import Link from 'fumadocs-core/link';
 import { cva } from 'class-variance-authority';
 import { cn } from '../utils/cn.js';
@@ -20,5 +20,5 @@ const code = cva('rounded-md bg-fd-secondary p-1 text-fd-secondary-foreground',
 export function TypeTable({ type }) {
     return (_jsx("div", { className: "prose my-6 overflow-auto prose-no-margin", children: _jsxs("table", { className: "whitespace-nowrap text-sm text-fd-muted-foreground", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "w-[45%]", children: "Prop" }), _jsx("th", { className: "w-[30%]", children: "Type" }), _jsx("th", { className: "w-1/4", children: "Default" })] }) }), _jsx("tbody", { children: Object.entries(type).map(([key, value]) => (_jsxs("tr", { children: [_jsx("td", { children: _jsxs("div", { className: field(), children: [_jsxs("code", { className: cn(code({
                                                 color: value.deprecated ? 'deprecated' : 'primary',
-                                            })), children: [key, !value.required && '?'] }), value.description ? _jsx(Info, { children: value.description }) : null] }) }), _jsx("td", { children: _jsxs("div", { className: field(), children: [_jsx("code", { className: code(), children: value.type }), value.typeDescription ? (_jsx(Info, { children: value.typeDescription })) : null, value.typeDescriptionLink ? (_jsx(Link, { href: value.typeDescriptionLink, children: _jsx(InfoIcon, { className: "size-4" }) })) : null] }) }), _jsx("td", { children: value.default ? (_jsx("code", { className: code(), children: value.default })) : ('-') })] }, key))) })] }) }));
+                                            })), children: [key, !value.required && '?'] }), value.description ? _jsx(Info, { children: value.description }) : null] }) }), _jsx("td", { children: _jsxs("div", { className: field(), children: [_jsx("code", { className: code(), children: value.type }), value.typeDescription ? (_jsx(Info, { children: value.typeDescription })) : null, value.typeDescriptionLink ? (_jsx(Link, { href: value.typeDescriptionLink, children: _jsx(LinkIcon, { className: "size-4 text-fd-muted-foreground" }) })) : null] }) }), _jsx("td", { children: value.default ? (_jsx("code", { className: code(), children: value.default })) : ('-') })] }, key))) })] }) }));
 }

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

@@ -4,7 +4,7 @@ import type { PageTree } from 'fumadocs-core/server';
 import type { ReactNode } from 'react';
 import type { Option } from '../../components/layout/root-toggle.js';
 import { type GetSidebarTabsOptions } from '../../utils/get-sidebar-tabs.js';
-export interface SidebarOptions extends SidebarProps {
+export interface SidebarOptions extends Pick<SidebarProps, 'defaultOpenLevel' | 'prefetch'> {
     components?: Partial<SidebarComponents>;
     /**
      * Root Toggle options
@@ -12,6 +12,12 @@ export interface SidebarOptions extends SidebarProps {
     tabs?: Option[] | GetSidebarTabsOptions | false;
     banner?: ReactNode;
     footer?: ReactNode;
+    /**
+     * Support collapsing the sidebar on desktop mode
+     *
+     * @defaultValue true
+     */
+    collapsible?: boolean;
 }
 export declare function SidebarLinkItem({ item, ...props }: {
     item: LinkItemType;

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

@@ -1 +1 @@
-{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EACL,KAAK,iBAAiB,EAMtB,KAAK,YAAY,EAClB,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,0BAA0B,CAAC;AAElC,MAAM,WAAW,cAAe,SAAQ,YAAY;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAExC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,qBAAqB,GAAG,KAAK,CAAC;IAEhD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,GAAG,KAAK,EACT,EAAE;IACD,IAAI,EAAE,YAAY,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAmCA;AAED,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,cAAc,CAAC,MAAM,CAAC,EAC/B,IAAI,EAAE,QAAQ,CAAC,IAAI,wBASpB"}
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EACL,KAAK,iBAAiB,EAMtB,KAAK,YAAY,EAClB,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,0BAA0B,CAAC;AAElC,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,YAAY,EAAE,kBAAkB,GAAG,UAAU,CAAC;IAC3D,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAExC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,qBAAqB,GAAG,KAAK,CAAC;IAEhD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,GAAG,KAAK,EACT,EAAE;IACD,IAAI,EAAE,YAAY,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAmCA;AAED,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,cAAc,CAAC,MAAM,CAAC,EAC/B,IAAI,EAAE,QAAQ,CAAC,IAAI,wBASpB"}

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

@@ -1,6 +1,6 @@
 import { type ComponentProps } from 'react';
 export declare function Navbar(props: ComponentProps<'header'>): import("react/jsx-runtime").JSX.Element;
 export declare function LayoutBody(props: ComponentProps<'main'>): import("react/jsx-runtime").JSX.Element;
-export declare function NavbarSidebarTrigger({ className, ...props }: ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
-export declare function CollapsibleControl(): import("react/jsx-runtime").JSX.Element | undefined;
+export declare function SidebarTrigger({ children, ...props }: ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
+export declare function CollapsibleControl(): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=docs-client.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"docs-client.d.ts","sourceRoot":"","sources":["../../src/layouts/docs-client.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAQ5C,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAgBrD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,2CAqBvD;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAmB1B;AAED,wBAAgB,kBAAkB,wDAyBjC"}
+{"version":3,"file":"docs-client.d.ts","sourceRoot":"","sources":["../../src/layouts/docs-client.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAQ5C,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAgBrD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,2CAqBvD;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAY1B;AAED,wBAAgB,kBAAkB,4CA2BjC"}

package/dist/layouts/docs-client.js

@@ -9,7 +9,7 @@ import { SidebarCollapseTrigger } from '../components/layout/sidebar.js';
 import { SearchToggle } from '../components/layout/search-toggle.js';
 export function Navbar(props) {
     const { isTransparent } = useNav();
-    return (_jsx("header", { id: "nd-subnav", ...props, className: cn('fixed top-(--fd-banner-height) inset-x-0 z-30 flex items-center px-4 border-b transition-colors backdrop-blur-sm', !isTransparent && 'bg-fd-background/80', props.className), children: props.children }));
+    return (_jsx("header", { id: "nd-subnav", ...props, className: cn('fixed top-(--fd-banner-height) inset-x-0 z-30 flex items-center ps-4 pe-2.5 border-b transition-colors backdrop-blur-sm', !isTransparent && 'bg-fd-background/80', props.className), children: props.children }));
 }
 export function LayoutBody(props) {
     const { collapsed } = useSidebar();
@@ -20,19 +20,13 @@ export function LayoutBody(props) {
                 : 'var(--fd-sidebar-width)',
         }, children: props.children }));
 }
-export function NavbarSidebarTrigger({ className, ...props }) {
+export function SidebarTrigger({ children, ...props }) {
     const { setOpen } = useSidebar();
-    return (_jsx("button", { ...props, "aria-label": "Open Sidebar", className: cn(buttonVariants({
-            color: 'ghost',
-            size: 'icon-sm',
-            className,
-        })), onClick: () => setOpen((prev) => !prev), children: _jsx(SidebarIcon, {}) }));
+    return (_jsx("button", { ...props, "aria-label": "Open Sidebar", onClick: () => setOpen((prev) => !prev), children: children }));
 }
 export function CollapsibleControl() {
     const { collapsed } = useSidebar();
-    if (!collapsed)
-        return;
-    return (_jsxs("div", { className: "fixed flex shadow-lg animate-fd-fade-in rounded-xl p-0.5 border bg-fd-muted text-fd-muted-foreground z-10 xl:start-4 max-xl:end-4", style: {
+    return (_jsxs("div", { className: cn('fixed flex shadow-lg transition-opacity rounded-xl p-0.5 border bg-fd-muted text-fd-muted-foreground z-10 max-md:hidden xl:start-4 max-xl:end-4', !collapsed && 'pointer-events-none opacity-0'), style: {
             top: 'calc(var(--fd-banner-height) + var(--fd-tocnav-height) + var(--spacing) * 4)',
         }, children: [_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
                     color: 'ghost',

package/dist/layouts/docs.d.ts

@@ -1,12 +1,12 @@
 import type { PageTree } from 'fumadocs-core/server';
-import { type HTMLAttributes, type ReactNode } from 'react';
+import { type ComponentProps, type HTMLAttributes, type ReactNode } from 'react';
 import { type LinkItemType } from '../layouts/links.js';
 import { type BaseLayoutProps } from './shared.js';
-import { CollapsibleControl, Navbar, NavbarSidebarTrigger } from '../layouts/docs-client.js';
+import { CollapsibleControl, Navbar, SidebarTrigger } from '../layouts/docs-client.js';
 import { type SidebarOptions } from '../layouts/docs/shared.js';
 export interface DocsLayoutProps extends BaseLayoutProps {
     tree: PageTree.Root;
-    sidebar?: Partial<SidebarOptions> & {
+    sidebar?: SidebarOptions & ComponentProps<'aside'> & {
         enabled?: boolean;
         component?: ReactNode;
     };
@@ -15,6 +15,6 @@ export interface DocsLayoutProps extends BaseLayoutProps {
      */
     containerProps?: HTMLAttributes<HTMLDivElement>;
 }
-export declare function DocsLayout({ nav: { transparentMode, ...nav }, sidebar: { tabs: sidebarTabs, footer: sidebarFooter, banner: sidebarBanner, enabled: sidebarEnabled, collapsible: sidebarCollapsible, component: sidebarComponent, components: sidebarComponents, ...sidebarProps }, searchToggle, disableThemeSwitch, themeSwitch, i18n, children, ...props }: DocsLayoutProps): import("react/jsx-runtime").JSX.Element;
-export { CollapsibleControl, Navbar, NavbarSidebarTrigger, type LinkItemType };
+export declare function DocsLayout({ nav: { transparentMode, ...nav }, sidebar: { tabs: sidebarTabs, enabled: sidebarEnabled, ...sidebarProps }, searchToggle, disableThemeSwitch, themeSwitch, i18n, children, ...props }: DocsLayoutProps): import("react/jsx-runtime").JSX.Element;
+export { CollapsibleControl, Navbar, SidebarTrigger, 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,cAAc,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAYrE,OAAO,EAAgB,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAElE,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,UAAU,CAAC;AAK1D,OAAO,EACL,kBAAkB,EAElB,MAAM,EACN,oBAAoB,EACrB,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAS/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,OAAO,EAAE,EACP,IAAI,EAAE,WAAW,EACjB,MAAM,EAAE,aAAa,EACrB,MAAM,EAAE,aAAa,EACrB,OAAO,EAAE,cAAqB,EAC9B,WAAW,EAAE,kBAAyB,EACtC,SAAS,EAAE,gBAAgB,EAC3B,UAAU,EAAE,iBAAiB,EAC7B,GAAG,YAAY,EACX,EACN,YAAiB,EACjB,kBAA0B,EAC1B,WAA8C,EAC9C,IAAY,EACZ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,2CAuIjB;AAED,OAAO,EAAE,kBAAkB,EAAE,MAAM,EAAE,oBAAoB,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,EACL,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAcf,OAAO,EAGL,KAAK,YAAY,EAClB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,UAAU,CAAC;AAK1D,OAAO,EACL,kBAAkB,EAElB,MAAM,EACN,cAAc,EACf,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAS/B,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IAEpB,OAAO,CAAC,EAAE,cAAc,GACtB,cAAc,CAAC,OAAO,CAAC,GAAG;QACxB,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,SAAS,CAAC,EAAE,SAAS,CAAC;KACvB,CAAC;IAEJ;;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,OAAO,EAAE,EACP,IAAI,EAAE,WAAW,EACjB,OAAO,EAAE,cAAqB,EAC9B,GAAG,YAAY,EACX,EACN,YAAiB,EACjB,kBAA0B,EAC1B,WAA8C,EAC9C,IAAY,EACZ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,2CA4NjB;AAED,OAAO,EAAE,kBAAkB,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,YAAY,EAAE,CAAC"}

package/dist/layouts/docs.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo } from 'react';
+import { useMemo, } from 'react';
 import { Languages, Sidebar as SidebarIcon } from '../icons.js';
 import { cn } from '../utils/cn.js';
 import { buttonVariants } from '../components/ui/button.js';
-import { Sidebar, SidebarCollapseTrigger, SidebarFooter, SidebarHeader, SidebarPageTree, SidebarViewport, } from '../components/layout/sidebar.js';
-import { BaseLinkItem } from '../layouts/links.js';
+import { Sidebar, SidebarCollapseTrigger, SidebarContent, SidebarContentMobile, SidebarFooter, SidebarHeader, SidebarPageTree, SidebarViewport, } from '../components/layout/sidebar.js';
+import { BaseLinkItem, } from '../layouts/links.js';
 import { RootToggle } from '../components/layout/root-toggle.js';
 import { getLinks } from './shared.js';
 import { LanguageToggle, LanguageToggleText, } from '../components/layout/language-toggle.js';
-import { CollapsibleControl, LayoutBody, Navbar, NavbarSidebarTrigger, } from '../layouts/docs-client.js';
+import { CollapsibleControl, LayoutBody, Navbar, SidebarTrigger, } from '../layouts/docs-client.js';
 import { TreeContextProvider } from '../contexts/tree.js';
 import { ThemeToggle } from '../components/layout/theme-toggle.js';
 import { getSidebarTabsFromOptions, SidebarLinkItem, } from '../layouts/docs/shared.js';
@@ -16,26 +16,46 @@ import { NavProvider } from '../contexts/layout.js';
 import Link from 'fumadocs-core/link';
 import { LargeSearchToggle, SearchToggle, } from '../components/layout/search-toggle.js';
 import { HideIfEmpty } from 'fumadocs-core/hide-if-empty';
-export function DocsLayout({ nav: { transparentMode, ...nav } = {}, sidebar: { tabs: sidebarTabs, footer: sidebarFooter, banner: sidebarBanner, enabled: sidebarEnabled = true, collapsible: sidebarCollapsible = true, component: sidebarComponent, components: sidebarComponents, ...sidebarProps } = {}, searchToggle = {}, disableThemeSwitch = false, themeSwitch = { enabled: !disableThemeSwitch }, i18n = false, children, ...props }) {
+export function DocsLayout({ nav: { transparentMode, ...nav } = {}, sidebar: { tabs: sidebarTabs, enabled: sidebarEnabled = true, ...sidebarProps } = {}, searchToggle = {}, disableThemeSwitch = false, themeSwitch = { enabled: !disableThemeSwitch }, i18n = false, children, ...props }) {
     const tabs = useMemo(() => getSidebarTabsFromOptions(sidebarTabs, props.tree) ?? [], [sidebarTabs, props.tree]);
     const links = getLinks(props.links ?? [], props.githubUrl);
     const variables = cn(sidebarEnabled &&
         'md:[--fd-sidebar-width:268px] lg:[--fd-sidebar-width:286px]', 'xl:[--fd-toc-width:286px]', !nav.component && nav.enabled !== false
         ? '[--fd-nav-height:56px] md:[--fd-nav-height:0px]'
         : undefined);
-    const sidebar = sidebarComponent ?? (_jsxs(_Fragment, { children: [sidebarCollapsible ? _jsx(CollapsibleControl, {}) : null, _jsxs(Sidebar, { ...sidebarProps, collapsible: sidebarCollapsible, children: [_jsx(HideIfEmpty, { children: _jsxs(SidebarHeader, { className: "data-[empty=true]:hidden", children: [_jsxs("div", { className: "flex max-md:hidden", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex text-[15px] items-center gap-2.5 font-medium me-auto", children: nav.title }), nav.children, sidebarCollapsible && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
-                                                color: 'ghost',
-                                                size: 'icon-sm',
-                                                className: 'mb-auto text-fd-muted-foreground max-md:hidden',
-                                            })), children: _jsx(SidebarIcon, {}) }))] }), searchToggle.enabled !== false &&
-                                    (searchToggle.components?.lg ?? (_jsx(LargeSearchToggle, { hideIfDisabled: true, className: "max-md:hidden" }))), tabs.length > 0 && _jsx(RootToggle, { options: tabs }), sidebarBanner] }) }), _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: sidebarComponents })] }), _jsx(HideIfEmpty, { children: _jsxs(SidebarFooter, { className: "data-[empty=true]:hidden", children: [_jsxs("div", { className: "flex items-center justify-end empty:hidden", children: [links
-                                            .filter((item) => item.type === 'icon')
-                                            .map((item, i, arr) => (_jsx(BaseLinkItem, { item: item, className: cn(buttonVariants({ size: 'icon', color: 'ghost' }), 'text-fd-muted-foreground md:[&_svg]:size-4.5', i === arr.length - 1 && 'me-auto'), "aria-label": item.label, children: item.icon }, i))), i18n ? (_jsxs(LanguageToggle, { className: "me-1.5", children: [_jsx(Languages, { className: "size-4.5" }), _jsx(LanguageToggleText, { className: "md:hidden" })] })) : null, themeSwitch.enabled !== false &&
-                                            (themeSwitch.component ?? (_jsx(ThemeToggle, { className: "p-0", mode: themeSwitch.mode })))] }), sidebarFooter] }) })] })] }));
+    function sidebar() {
+        const { footer, banner, collapsible = true, component, components, defaultOpenLevel, prefetch, ...rest } = sidebarProps;
+        if (component)
+            return component;
+        const iconLinks = links.filter((item) => item.type === 'icon');
+        const viewport = (_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 })] }));
+        const mobile = (_jsxs(SidebarContentMobile, { ...rest, children: [_jsxs(HideIfEmpty, { as: SidebarHeader, children: [_jsxs("div", { className: "flex text-fd-muted-foreground items-center justify-end empty:hidden", children: [iconLinks.map((item, i) => (_jsx(BaseLinkItem, { item: item, className: cn(buttonVariants({
+                                        size: 'icon-sm',
+                                        color: 'ghost',
+                                        className: 'p-2',
+                                    }), i === iconLinks.length - 1 && 'me-auto'), "aria-label": item.label, children: item.icon }, i))), i18n ? (_jsxs(LanguageToggle, { children: [_jsx(Languages, { className: "size-4.5" }), _jsx(LanguageToggleText, {})] })) : null, themeSwitch.enabled !== false &&
+                                    (themeSwitch.component ?? (_jsx(ThemeToggle, { className: "p-0 ms-1.5", mode: themeSwitch.mode }))), _jsx(SidebarTrigger, { className: cn(buttonVariants({
+                                        color: 'ghost',
+                                        size: 'icon-sm',
+                                        className: 'p-2 ms-1.5',
+                                    })), children: _jsx(SidebarIcon, {}) })] }), tabs.length > 0 && _jsx(RootToggle, { options: tabs }), banner] }), viewport, _jsx(SidebarFooter, { className: "empty:hidden", children: footer })] }));
+        const content = (_jsxs(SidebarContent, { ...rest, children: [_jsxs(SidebarHeader, { children: [_jsxs("div", { className: "flex", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex text-[15px] items-center gap-2.5 font-medium me-auto", children: nav.title }), nav.children, collapsible && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
+                                        color: 'ghost',
+                                        size: 'icon-sm',
+                                        className: 'mb-auto text-fd-muted-foreground',
+                                    })), children: _jsx(SidebarIcon, {}) }))] }), searchToggle.enabled !== false &&
+                            (searchToggle.components?.lg ?? (_jsx(LargeSearchToggle, { hideIfDisabled: true }))), tabs.length > 0 && _jsx(RootToggle, { options: tabs }), banner] }), viewport, _jsxs(HideIfEmpty, { as: SidebarFooter, children: [_jsxs("div", { className: "flex text-fd-muted-foreground items-center justify-end empty:hidden", children: [iconLinks.map((item, i) => (_jsx(BaseLinkItem, { item: item, className: cn(buttonVariants({ size: 'icon-sm', color: 'ghost' }), i === iconLinks.length - 1 && 'me-auto'), "aria-label": item.label, children: item.icon }, i))), i18n ? (_jsx(LanguageToggle, { children: _jsx(Languages, { className: "size-4.5" }) })) : null, themeSwitch.enabled !== false &&
+                                    (themeSwitch.component ?? (_jsx(ThemeToggle, { className: "p-0 ms-1.5", mode: themeSwitch.mode })))] }), footer] })] }));
+        return (_jsx(Sidebar, { defaultOpenLevel: defaultOpenLevel, prefetch: prefetch, Mobile: mobile, Content: _jsxs(_Fragment, { children: [collapsible && _jsx(CollapsibleControl, {}), content] }) }));
+    }
     return (_jsx(TreeContextProvider, { tree: props.tree, children: _jsxs(NavProvider, { transparentMode: transparentMode, children: [nav.enabled !== false &&
-                    (nav.component ?? (_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 }), searchToggle?.enabled !== false &&
-                                (searchToggle.components?.sm ?? (_jsx(SearchToggle, { className: "p-2", hideIfDisabled: true }))), sidebarEnabled && (_jsx(NavbarSidebarTrigger, { className: "p-2 -me-1.5 md:hidden" }))] }))), _jsxs(LayoutBody, { ...props.containerProps, className: cn(variables, props.containerProps?.className), children: [sidebarEnabled && sidebar, children] })] }) }));
+                    (nav.component ?? (_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 }), searchToggle.enabled !== false &&
+                                (searchToggle.components?.sm ?? (_jsx(SearchToggle, { className: "p-2", hideIfDisabled: true }))), sidebarEnabled && (_jsx(SidebarTrigger, { className: cn(buttonVariants({
+                                    color: 'ghost',
+                                    size: 'icon-sm',
+                                    className: 'p-2',
+                                })), children: _jsx(SidebarIcon, {}) }))] }))), _jsxs(LayoutBody, { ...props.containerProps, className: cn(variables, props.containerProps?.className), children: [sidebarEnabled && sidebar(), children] })] }) }));
 }
-export { CollapsibleControl, Navbar, NavbarSidebarTrigger };
+export { CollapsibleControl, Navbar, SidebarTrigger };

package/dist/layouts/notebook.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes } from 'react';
+import { type ComponentProps, type HTMLAttributes } from 'react';
 import { type BaseLayoutProps } from '../layouts/shared.js';
 import { type SidebarOptions } from '../layouts/docs/shared.js';
 import type { PageTree } from 'fumadocs-core/server';
@@ -9,7 +9,7 @@ export interface DocsLayoutProps extends BaseLayoutProps {
     nav?: BaseLayoutProps['nav'] & {
         mode?: 'top' | 'auto';
     };
-    sidebar?: Partial<SidebarOptions>;
+    sidebar?: SidebarOptions & ComponentProps<'aside'>;
     containerProps?: HTMLAttributes<HTMLDivElement>;
 }
 export declare function DocsLayout(props: DocsLayoutProps): import("react/jsx-runtime").JSX.Element;

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,EAAY,MAAM,kBAAkB,CAAC;AAqBlE,OAAO,EAGL,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;AAU3B,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,2CAiJhD;AAiMD,OAAO,EAAE,MAAM,EAAE,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"notebook.d.ts","sourceRoot":"","sources":["../../src/layouts/notebook.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,cAAc,EAEpB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,kBAAkB,CAAC;AAuBlE,OAAO,EAGL,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;AAU3B,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,cAAc,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC;IAEnD,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAqMhD;AAiMD,OAAO,EAAE,MAAM,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/layouts/notebook.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useMemo } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useMemo, } from 'react';
 import { getLinks } from '../layouts/shared.js';
-import { Sidebar, SidebarCollapseTrigger, SidebarFooter, SidebarHeader, SidebarPageTree, SidebarViewport, } from '../components/layout/sidebar.js';
+import { Sidebar, SidebarCollapseTrigger, SidebarContent, SidebarContentMobile, SidebarFooter, SidebarHeader, SidebarPageTree, SidebarViewport, } from '../components/layout/sidebar.js';
 import { TreeContextProvider } from '../contexts/tree.js';
 import { cn } from '../utils/cn.js';
 import { buttonVariants } from '../components/ui/button.js';
@@ -18,28 +18,38 @@ import Link from 'fumadocs-core/link';
 import { LargeSearchToggle, SearchToggle, } from '../components/layout/search-toggle.js';
 import { HideIfEmpty } from 'fumadocs-core/hide-if-empty';
 export function DocsLayout(props) {
-    const { tabMode = 'sidebar', nav: { transparentMode, ...nav } = {}, sidebar: { tabs: tabOptions, banner: sidebarBanner, footer: sidebarFooter, components: sidebarComponents, ...sidebar } = {}, i18n = false, disableThemeSwitch = false, themeSwitch = { enabled: !disableThemeSwitch }, } = props;
+    const { tabMode = 'sidebar', nav: { transparentMode, ...nav } = {}, sidebar: { tabs: tabOptions, ...sidebarProps } = {}, i18n = false, disableThemeSwitch = false, themeSwitch = { enabled: !disableThemeSwitch }, } = 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:56px] md:[--fd-sidebar-width:286px] md:[--fd-nav-height:64px] xl:[--fd-toc-width:286px]', tabs.length > 0 && tabMode === 'navbar' && 'lg:[--fd-nav-height:104px]');
-    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: 'mt-px mb-auto text-fd-muted-foreground',
-                })), children: _jsx(SidebarIcon, {}) }))] }));
-    return (_jsx(TreeContextProvider, { tree: props.tree, children: _jsx(NavProvider, { transparentMode: transparentMode, children: _jsxs(LayoutBody, { ...props.containerProps, className: cn(variables, props.containerProps?.className), children: [_jsxs(Sidebar, { ...sidebar, className: cn(navMode === 'top'
-                            ? 'border-e-0 md:bg-transparent'
-                            : 'md:[--fd-nav-height:0px]', sidebar.className), children: [_jsx(HideIfEmpty, { children: _jsxs(SidebarHeader, { className: "data-[empty=true]:hidden", 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 data-[empty=true]:hidden", children: [_jsx("div", { className: "flex items-center flex-1 empty:hidden lg:hidden", children: links
-                                                .filter((item) => item.type === 'icon')
-                                                .map((item, i) => (_jsx(BaseLinkItem, { item: item, className: cn(buttonVariants({
-                                                    size: 'icon-sm',
-                                                    color: 'ghost',
-                                                    className: 'text-fd-muted-foreground',
-                                                })), "aria-label": item.label, children: item.icon }, i))) }), i18n ? (_jsx(LanguageToggle, { className: "me-auto md:hidden", children: _jsx(Languages, { className: "size-4.5 text-fd-muted-foreground" }) })) : null, themeSwitch.enabled !== false &&
-                                            (themeSwitch.component ?? (_jsx(ThemeToggle, { className: "md:hidden", mode: themeSwitch?.mode ?? 'light-dark-system' }))), sidebarFooter] }) })] }), _jsx(DocsNavbar, { ...props, links: links, tabs: tabMode == 'navbar' ? tabs : [] }), props.children] }) }) }));
+    function sidebar() {
+        const { banner, footer, components, collapsible = true, prefetch, defaultOpenLevel, ...rest } = sidebarProps;
+        const iconLinks = links.filter((item) => item.type === 'icon');
+        const rootToggle = (_jsxs(_Fragment, { children: [tabMode === 'sidebar' && tabs.length > 0 && (_jsx(RootToggle, { className: "mb-2", options: tabs })), tabMode === 'navbar' && tabs.length > 0 && (_jsx(RootToggle, { options: tabs, className: "lg:hidden" }))] }));
+        const sidebarNav = (_jsxs("div", { className: "flex justify-between", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex items-center gap-2.5 font-medium", children: nav.title }), collapsible && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
+                        color: 'ghost',
+                        size: 'icon-sm',
+                        className: 'mt-px mb-auto text-fd-muted-foreground',
+                    })), children: _jsx(SidebarIcon, {}) }))] }));
+        const viewport = (_jsxs(SidebarViewport, { children: [links
+                    .filter((item) => item.type !== 'icon')
+                    .map((item, i, arr) => (_jsx(SidebarLinkItem, { item: item, className: cn('lg:hidden', i === arr.length - 1 && 'mb-4') }, i))), _jsx(SidebarPageTree, { components: components })] }));
+        const content = (_jsxs(SidebarContent, { ...rest, className: cn(navMode === 'top'
+                ? 'border-e-0 bg-transparent'
+                : '[--fd-nav-height:0px]', rest.className), children: [_jsxs(HideIfEmpty, { as: SidebarHeader, children: [navMode === 'auto' && sidebarNav, nav.children, banner, rootToggle] }), viewport, _jsxs(HideIfEmpty, { as: SidebarFooter, className: "flex flex-row text-fd-muted-foreground items-center", children: [iconLinks.map((item, i) => (_jsx(BaseLinkItem, { item: item, className: cn(buttonVariants({
+                                size: 'icon-sm',
+                                color: 'ghost',
+                                className: 'lg:hidden',
+                            })), "aria-label": item.label, children: item.icon }, i))), footer] })] }));
+        const mobile = (_jsxs(SidebarContentMobile, { ...rest, children: [_jsxs(HideIfEmpty, { as: SidebarHeader, children: [banner, rootToggle] }), viewport, _jsxs(HideIfEmpty, { as: SidebarFooter, className: "flex flex-row items-center justify-end", children: [iconLinks.map((item, i) => (_jsx(BaseLinkItem, { item: item, className: cn(buttonVariants({
+                                size: 'icon-sm',
+                                color: 'ghost',
+                            }), 'text-fd-muted-foreground lg:hidden', i === iconLinks.length - 1 && 'me-auto'), "aria-label": item.label, children: item.icon }, i))), i18n ? (_jsx(LanguageToggle, { children: _jsx(Languages, { className: "size-4.5 text-fd-muted-foreground" }) })) : null, themeSwitch.enabled !== false &&
+                            (themeSwitch.component ?? (_jsx(ThemeToggle, { mode: themeSwitch.mode ?? 'light-dark-system' }))), footer] })] }));
+        return (_jsx(Sidebar, { defaultOpenLevel: defaultOpenLevel, prefetch: prefetch, Content: content, Mobile: mobile }));
+    }
+    return (_jsx(TreeContextProvider, { tree: props.tree, children: _jsx(NavProvider, { transparentMode: transparentMode, children: _jsxs(LayoutBody, { ...props.containerProps, className: cn(variables, props.containerProps?.className), children: [sidebar(), _jsx(DocsNavbar, { ...props, links: links, tabs: tabMode == 'navbar' ? tabs : [] }), props.children] }) }) }));
 }
 function DocsNavbar({ links, tabs, searchToggle = {}, themeSwitch = {}, ...props }) {
     const navMode = props.nav?.mode ?? 'auto';

package/dist/style.css

@@ -55,6 +55,7 @@
     --color-fd-warning: oklch(76.9% 0.188 70.08);
     --color-fd-error: oklch(63.7% 0.237 25.331);
     --color-fd-success: oklch(72.3% 0.219 149.579);
+    --fd-sidebar-mobile-offset: 100%;
     --spacing-fd-container: 1400px;
     --fd-page-width: 1200px;
     --fd-sidebar-width: 0px;
@@ -312,24 +313,18 @@
   .inset-y-1 {
     inset-block: calc(var(--spacing) * 1);
   }
-  .inset-y-2 {
-    inset-block: calc(var(--spacing) * 2);
-  }
-  .inset-y-3 {
-    inset-block: calc(var(--spacing) * 3);
-  }
   .start-0 {
     inset-inline-start: calc(var(--spacing) * 0);
   }
-  .start-2 {
-    inset-inline-start: calc(var(--spacing) * 2);
-  }
   .start-2\.5 {
     inset-inline-start: calc(var(--spacing) * 2.5);
   }
   .start-4\.5 {
     inset-inline-start: calc(var(--spacing) * 4.5);
   }
+  .end-0 {
+    inset-inline-end: calc(var(--spacing) * 0);
+  }
   .end-2 {
     inset-inline-end: calc(var(--spacing) * 2);
   }
@@ -460,6 +455,9 @@
   .-ms-1\.5 {
     margin-inline-start: calc(var(--spacing) * -1.5);
   }
+  .ms-1\.5 {
+    margin-inline-start: calc(var(--spacing) * 1.5);
+  }
   .ms-2 {
     margin-inline-start: calc(var(--spacing) * 2);
   }
@@ -475,9 +473,6 @@
   .-me-1\.5 {
     margin-inline-end: calc(var(--spacing) * -1.5);
   }
-  .me-1\.5 {
-    margin-inline-end: calc(var(--spacing) * 1.5);
-  }
   .me-2 {
     margin-inline-end: calc(var(--spacing) * 2);
   }
@@ -1116,16 +1111,12 @@
   .origin-\[top_center\] {
     transform-origin: top center;
   }
-  .-translate-x-\(--fd-sidebar-offset\) {
-    --tw-translate-x: calc(var(--fd-sidebar-offset) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  .translate-x-2 {
-    --tw-translate-x: calc(var(--spacing) * 2);
+  .translate-x-\(--fd-sidebar-offset\) {
+    --tw-translate-x: var(--fd-sidebar-offset);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
   .-translate-y-1\/2 {
@@ -1149,9 +1140,6 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
-  .animate-fd-fade-in {
-    animation: var(--animate-fd-fade-in);
-  }
   .animate-pulse {
     animation: var(--animate-pulse);
   }
@@ -1466,6 +1454,9 @@
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
+  .ps-\(--sidebar-item-offset\) {
+    padding-inline-start: var(--sidebar-item-offset);
+  }
   .ps-1 {
     padding-inline-start: calc(var(--spacing) * 1);
   }
@@ -1478,6 +1469,9 @@
   .ps-3 {
     padding-inline-start: calc(var(--spacing) * 3);
   }
+  .ps-4 {
+    padding-inline-start: calc(var(--spacing) * 4);
+  }
   .ps-6 {
     padding-inline-start: calc(var(--spacing) * 6);
   }
@@ -1487,6 +1481,9 @@
   .ps-\[calc\(var\(--fd-layout-offset\)\+var\(--fd-sidebar-width\)\)\] {
     padding-inline-start: calc(var(--fd-layout-offset) + var(--fd-sidebar-width));
   }
+  .pe-2\.5 {
+    padding-inline-end: calc(var(--spacing) * 2.5);
+  }
   .pe-4 {
     padding-inline-end: calc(var(--spacing) * 4);
   }
@@ -1744,6 +1741,9 @@
     -webkit-user-select: none;
     user-select: none;
   }
+  .\[--fd-nav-height\:0px\] {
+    --fd-nav-height: 0px;
+  }
   .\[--fd-nav-height\:56px\] {
     --fd-nav-height: 56px;
   }
@@ -1979,13 +1979,69 @@
       color: var(--color-fd-primary);
     }
   }
-  .data-\[collapsed\=false\]\:hidden {
-    &[data-collapsed="false"] {
-      display: none;
+  .\*\*\:data-\[active\=true\]\:before\:absolute {
+    :is(& *) {
+      &[data-active="true"] {
+        &::before {
+          content: var(--tw-content);
+          position: absolute;
+        }
+      }
     }
   }
-  .data-\[empty\=true\]\:hidden {
-    &[data-empty="true"] {
+  .\*\*\:data-\[active\=true\]\:before\:inset-y-2\.5 {
+    :is(& *) {
+      &[data-active="true"] {
+        &::before {
+          content: var(--tw-content);
+          inset-block: calc(var(--spacing) * 2.5);
+        }
+      }
+    }
+  }
+  .\*\*\:data-\[active\=true\]\:before\:start-2\.5 {
+    :is(& *) {
+      &[data-active="true"] {
+        &::before {
+          content: var(--tw-content);
+          inset-inline-start: calc(var(--spacing) * 2.5);
+        }
+      }
+    }
+  }
+  .\*\*\:data-\[active\=true\]\:before\:w-px {
+    :is(& *) {
+      &[data-active="true"] {
+        &::before {
+          content: var(--tw-content);
+          width: 1px;
+        }
+      }
+    }
+  }
+  .\*\*\:data-\[active\=true\]\:before\:bg-fd-primary {
+    :is(& *) {
+      &[data-active="true"] {
+        &::before {
+          content: var(--tw-content);
+          background-color: var(--color-fd-primary);
+        }
+      }
+    }
+  }
+  .\*\*\:data-\[active\=true\]\:before\:content-\[\'\'\] {
+    :is(& *) {
+      &[data-active="true"] {
+        &::before {
+          content: var(--tw-content);
+          --tw-content: '';
+          content: var(--tw-content);
+        }
+      }
+    }
+  }
+  .data-\[collapsed\=false\]\:hidden {
+    &[data-collapsed="false"] {
       display: none;
     }
   }
@@ -2240,11 +2296,6 @@
       position: sticky;
     }
   }
-  .md\:inset-y-2 {
-    @media (width >= 48rem) {
-      inset-block: calc(var(--spacing) * 2);
-    }
-  }
   .md\:top-\[calc\(50\%-250px\)\] {
     @media (width >= 48rem) {
       top: calc(50% - 250px);
@@ -2291,11 +2342,6 @@
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
-  .md\:bg-transparent {
-    @media (width >= 48rem) {
-      background-color: transparent;
-    }
-  }
   .md\:px-6 {
     @media (width >= 48rem) {
       padding-inline: calc(var(--spacing) * 6);
@@ -2381,9 +2427,9 @@
       grid-column: 1 / -1;
     }
   }
-  .rtl\:translate-x-\(--fd-sidebar-offset\) {
+  .rtl\:-translate-x-\(--fd-sidebar-offset\) {
     &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-      --tw-translate-x: var(--fd-sidebar-offset);
+      --tw-translate-x: calc(var(--fd-sidebar-offset) * -1);
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
@@ -2438,14 +2484,6 @@
       flex-shrink: 0;
     }
   }
-  .md\:\[\&_svg\]\:size-4\.5 {
-    @media (width >= 48rem) {
-      & svg {
-        width: calc(var(--spacing) * 4.5);
-        height: calc(var(--spacing) * 4.5);
-      }
-    }
-  }
   .\[\&\>figure\:only-child\]\:-m-4 {
     &>figure:only-child {
       margin: calc(var(--spacing) * -4);
@@ -2501,22 +2539,20 @@
     filter: blur(0);
   }
   &[data-line-numbers] code .twoslash-meta-line {
-    margin-left: calc(var(--spacing) * 7);
+    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
   }
   &[data-line-numbers] code .line {
-    width: calc(100% - 7 * var(--spacing));
     counter-increment: line;
-    padding-left: calc(var(--padding-left) - var(--spacing));
-    margin-left: calc(var(--spacing) * 7);
+    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
     &::after {
       position: absolute;
       content: counter(line);
-      top: calc(var(--spacing) * 0);
-      left: calc(var(--spacing) * -5);
-      color: color-mix(in srgb, hsl(0, 0%, 45.1%) 60%, transparent);
+      color: var(--fd-counter-color, hsl(0, 0%, 45.1%));
       @supports (color: color-mix(in lab, red, red)) {
-        color: color-mix(in oklab, var(--color-fd-muted-foreground) 60%, transparent);
+        color: color-mix( in oklab, var(--fd-counter-color, var(--color-fd-muted-foreground)) 60%, transparent );
       }
+      top: calc(var(--spacing) * 0);
+      left: calc(var(--spacing) * 4);
     }
   }
   code .diff::before {
@@ -2525,6 +2561,7 @@
   }
   code .diff.remove {
     opacity: 0.7;
+    --fd-counter-color: var(--color-fd-diff-remove-symbol);
     background-color: var(--color-fd-diff-remove);
   }
   code .diff.remove::before {
@@ -2532,19 +2569,21 @@
     color: var(--color-fd-diff-remove-symbol);
   }
   code .diff.add {
+    --fd-counter-color: var(--color-fd-diff-add-symbol);
     background-color: var(--color-fd-diff-add);
   }
   code .diff.add::before {
     content: '+';
     color: var(--color-fd-diff-add-symbol);
   }
-  .highlighted {
+  code .highlighted {
+    --fd-counter-color: var(--color-fd-primary);
     background-color: color-mix(in srgb, hsl(0, 0%, 9%) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-fd-primary) 10%, transparent);
     }
   }
-  .highlighted-word {
+  code .highlighted-word {
     padding: 1px;
     margin-block: -1px;
     border-radius: var(--radius-md);
@@ -2567,6 +2606,9 @@
     color: var(--shiki-dark);
   }
 }
+[dir='rtl'] {
+  --fd-sidebar-mobile-offset: -100%;
+}
 @layer base {
   *, ::after, ::before, ::backdrop, ::file-selector-button {
     border-color: var(--color-fd-border, currentColor);
@@ -2811,6 +2853,11 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-content {
+  syntax: "*";
+  initial-value: "";
+  inherits: false;
+}
 @property --tw-scale-x {
   syntax: "*";
   inherits: false;
@@ -2831,6 +2878,16 @@
     opacity: 0.5;
   }
 }
+@keyframes fd-sidebar-in {
+  from {
+    transform: translateX(var(--fd-sidebar-mobile-offset));
+  }
+}
+@keyframes fd-sidebar-out {
+  to {
+    transform: translateX(var(--fd-sidebar-mobile-offset));
+  }
+}
 @keyframes fd-collapsible-down {
   from {
     height: 0;
@@ -2953,16 +3010,6 @@
     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;
@@ -3035,6 +3082,7 @@
       --tw-backdrop-saturate: initial;
       --tw-backdrop-sepia: initial;
       --tw-duration: initial;
+      --tw-content: "";
       --tw-scale-x: 1;
       --tw-scale-y: 1;
       --tw-scale-z: 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "15.6.5",
+  "version": "15.6.7",
   "description": "The framework for building a documentation website in Next.js",
   "keywords": [
     "NextJs",
@@ -89,20 +89,20 @@
     "react-medium-image-zoom": "^5.3.0",
     "scroll-into-view-if-needed": "^3.1.0",
     "tailwind-merge": "^3.3.1",
-    "fumadocs-core": "15.6.5"
+    "fumadocs-core": "15.6.7"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^15.4.2",
+    "@next/eslint-plugin-next": "^15.4.4",
     "@tailwindcss/cli": "^4.1.11",
     "@types/lodash.merge": "^4.6.9",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
-    "next": "15.4.2",
+    "next": "15.4.4",
     "tailwindcss": "^4.1.11",
     "tsc-alias": "^1.8.16",
     "@fumadocs/cli": "0.2.1",
     "eslint-config-custom": "0.0.0",
-    "fumadocs-core": "15.6.5",
+    "fumadocs-core": "15.6.7",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {