fumadocs-ui 15.6.6 → 15.6.8

package/css/neutral.css

@@ -22,7 +22,7 @@
   --color-fd-foreground: hsl(0, 0%, 92%);
   --color-fd-muted: hsl(0, 0%, 12.9%);
   --color-fd-muted-foreground: hsla(0, 0%, 70%, 0.8);
-  --color-fd-popover: hsl(0, 0%, 10.6%);
+  --color-fd-popover: hsl(0, 0%, 11.6%);
   --color-fd-popover-foreground: hsl(0, 0%, 86.9%);
   --color-fd-card: hsl(0, 0%, 9.8%);
   --color-fd-card-foreground: hsl(0, 0%, 98%);

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

@@ -50,7 +50,7 @@ export function SearchDialogOverlay(props) {
 }
 export function SearchDialogContent({ children, ...props }) {
     const { text } = useI18n();
-    return (_jsxs(DialogContent, { "aria-describedby": undefined, ...props, className: cn('fixed left-1/2 top-4 md:top-[calc(50%-250px)] z-50 w-[calc(100%-2*var(--spacing))] max-w-screen-sm -translate-x-1/2 rounded-2xl border bg-fd-popover/60 backdrop-blur-xl text-fd-popover-foreground shadow-2xl shadow-black/40 overflow-hidden data-[state=closed]:animate-fd-dialog-out data-[state=open]:animate-fd-dialog-in', '*:border-b *:has-[+:last-child[data-empty=true]]:border-b-0 *:data-[empty=true]:border-b-0 *:last:border-b-0', props.className), children: [_jsx(DialogTitle, { className: "hidden", children: text.search }), children] }));
+    return (_jsxs(DialogContent, { "aria-describedby": undefined, ...props, className: cn('fixed left-1/2 top-4 md:top-[calc(50%-250px)] z-50 w-[calc(100%-1rem)] max-w-screen-sm -translate-x-1/2 rounded-2xl border bg-fd-popover/80 backdrop-blur-xl text-fd-popover-foreground shadow-2xl shadow-black/50 overflow-hidden data-[state=closed]:animate-fd-dialog-out data-[state=open]:animate-fd-dialog-in', '*:border-b *:has-[+:last-child[data-empty=true]]:border-b-0 *:data-[empty=true]:border-b-0 *:last:border-b-0', props.className), children: [_jsx(DialogTitle, { className: "hidden", children: text.search }), children] }));
 }
 export function SearchDialogList({ items = null, Empty = () => (_jsx("div", { className: "py-12 text-center text-sm text-fd-muted-foreground", children: _jsx(I18nLabel, { label: "searchNoResult" }) })), Item = (props) => _jsx(SearchDialogListItem, { ...props }), ...props }) {
     const ref = useRef(null);

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;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,2CA4Hd;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"}
+{"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,6 +1,6 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronDown, ExternalLink, X } from '../../icons.js';
+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';
 import Link from 'fumadocs-core/link';
@@ -14,7 +14,6 @@ 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';
-import { buttonVariants } from '../../components/ui/button.js';
 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: {
@@ -25,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,
@@ -34,26 +33,20 @@ 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 }) => (_jsxs("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', props.className), children: [_jsx("button", { onClick: () => setOpen(false), className: cn(buttonVariants({
-                                    color: 'ghost',
-                                    size: 'icon-sm',
-                                    className: 'mt-3 mb-1 ms-auto me-4 text-fd-muted-foreground',
-                                })), children: _jsx(X, {}) }), 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 translate-x-(--fd-sidebar-offset) rtl:-translate-x-(--fd-sidebar-offset)',
-            hover ? 'z-50 shadow-lg' : 'opacity-0 ',
+            hover ? 'z-50 shadow-lg' : 'opacity-0',
         ], props.className), style: {
             transition: ['top', 'opacity', 'translate', 'width']
                 .map((v) => `${v} ease 250ms`)
@@ -68,15 +61,14 @@ export function Sidebar({ defaultOpenLevel = 0, prefetch = true, collapsible = t
                 ? 'var(--fd-sidebar-width)'
                 : 'calc(var(--fd-sidebar-width) + var(--fd-layout-offset))',
         }, 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(() => {
@@ -85,10 +77,15 @@ 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 px-4 pb-2 md:pt-4', 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 }));

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 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,4CA2BjC"}
+{"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,13 +20,9 @@ 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();

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, {}), _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

@@ -455,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);
   }
@@ -470,15 +473,9 @@
   .-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);
   }
-  .me-4 {
-    margin-inline-end: calc(var(--spacing) * 4);
-  }
   .me-auto {
     margin-inline-end: auto;
   }
@@ -857,9 +854,6 @@
   .mt-\(--fd-top\) {
     margin-top: var(--fd-top);
   }
-  .mt-3 {
-    margin-top: calc(var(--spacing) * 3);
-  }
   .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
@@ -1048,8 +1042,8 @@
   .w-\[286px\] {
     width: 286px;
   }
-  .w-\[calc\(100\%-2\*var\(--spacing\)\)\] {
-    width: calc(100% - 2 * var(--spacing));
+  .w-\[calc\(100\%-1rem\)\] {
+    width: calc(100% - 1rem);
   }
   .w-fit {
     width: fit-content;
@@ -1352,6 +1346,12 @@
       background-color: color-mix(in oklab, var(--color-fd-popover) 60%, transparent);
     }
   }
+  .bg-fd-popover\/80 {
+    background-color: color-mix(in srgb, hsl(0, 0%, 98%) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-fd-popover) 80%, transparent);
+    }
+  }
   .bg-fd-primary {
     background-color: var(--color-fd-primary);
   }
@@ -1475,6 +1475,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);
   }
@@ -1484,6 +1487,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);
   }
@@ -1644,10 +1650,10 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-black\/40 {
-    --tw-shadow-color: color-mix(in srgb, #000 40%, transparent);
+  .shadow-black\/50 {
+    --tw-shadow-color: color-mix(in srgb, #000 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 40%, transparent) var(--tw-shadow-alpha), transparent);
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 50%, transparent) var(--tw-shadow-alpha), transparent);
     }
   }
   .outline {
@@ -1741,6 +1747,9 @@
     -webkit-user-select: none;
     user-select: none;
   }
+  .\[--fd-nav-height\:0px\] {
+    --fd-nav-height: 0px;
+  }
   .\[--fd-nav-height\:56px\] {
     --fd-nav-height: 56px;
   }
@@ -2042,11 +2051,6 @@
       display: none;
     }
   }
-  .data-\[empty\=true\]\:hidden {
-    &[data-empty="true"] {
-      display: none;
-    }
-  }
   .\*\:data-\[empty\=true\]\:border-b-0 {
     :is(& > *) {
       &[data-empty="true"] {
@@ -2344,21 +2348,11 @@
       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);
     }
   }
-  .md\:pt-4 {
-    @media (width >= 48rem) {
-      padding-top: calc(var(--spacing) * 4);
-    }
-  }
   .md\:\[--fd-nav-height\:0px\] {
     @media (width >= 48rem) {
       --fd-nav-height: 0px;
@@ -2496,14 +2490,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);
@@ -2521,7 +2507,7 @@
   --color-fd-foreground: hsl(0, 0%, 92%);
   --color-fd-muted: hsl(0, 0%, 12.9%);
   --color-fd-muted-foreground: hsla(0, 0%, 70%, 0.8);
-  --color-fd-popover: hsl(0, 0%, 10.6%);
+  --color-fd-popover: hsl(0, 0%, 11.6%);
   --color-fd-popover-foreground: hsl(0, 0%, 86.9%);
   --color-fd-card: hsl(0, 0%, 9.8%);
   --color-fd-card-foreground: hsl(0, 0%, 98%);
@@ -2559,22 +2545,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 {
@@ -2583,6 +2567,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 {
@@ -2590,19 +2575,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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "15.6.6",
+  "version": "15.6.8",
   "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.6"
+    "fumadocs-core": "15.6.8"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^15.4.4",
+    "@next/eslint-plugin-next": "^15.4.5",
     "@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.4",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "next": "15.4.5",
     "tailwindcss": "^4.1.11",
     "tsc-alias": "^1.8.16",
-    "@fumadocs/cli": "0.2.1",
     "eslint-config-custom": "0.0.0",
-    "fumadocs-core": "15.6.6",
+    "@fumadocs/cli": "0.2.1",
+    "fumadocs-core": "15.6.8",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {