fumadocs-ui 15.3.0 → 15.3.2

package/css/preset.css

@@ -227,6 +227,22 @@
   }
 }
 
+@utility fd-scroll-container {
+  &::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background: var(--color-fd-border);
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+}
+
 @utility fd-steps {
   counter-reset: step;
   position: relative;

package/css/shiki.css

@@ -3,9 +3,40 @@
     color: var(--shiki-light);
   }
 
+  code .line {
+    line-height: 1.45em;
+    min-height: 1.45em;
+    @apply relative;
+  }
+
+  &.has-focused code .line:not(.focused) {
+    filter: blur(2px);
+    transition: filter 200ms;
+  }
+
+  &.has-focused:hover code .line:not(.focused) {
+    filter: blur(0);
+  }
+
+  &[data-line-numbers] code .twoslash-meta-line {
+    @apply ml-7;
+  }
+
+  &[data-line-numbers] code .line {
+    width: calc(100% - 7 * var(--spacing));
+    counter-increment: line;
+    @apply ml-7;
+
+    &::after {
+      position: absolute;
+      content: counter(line);
+      @apply top-0 -left-5 text-fd-muted-foreground/60;
+    }
+  }
+
   code .diff::before {
     position: absolute;
-    left: 6px;
+    left: var(--spacing);
   }
 
   code .diff.remove {
@@ -27,29 +58,13 @@
     @apply text-fd-diff-add-symbol;
   }
 
-  code .diff {
-    width: calc(100% + 8 * var(--spacing));
-
-    @apply relative inline-block -mx-4 px-4;
-  }
-
   .highlighted {
-    width: calc(100% + 8 * var(--spacing));
-
-    @apply inline-block -mx-4 px-4 bg-fd-primary/10;
+    @apply bg-fd-primary/10;
   }
 
   .highlighted-word {
-    padding: 1px 2px;
-    margin: -1px -3px;
-    border: 1px solid
-      color-mix(in oklab, var(--color-fd-primary) 50%, transparent);
-    background-color: color-mix(
-      in oklab,
-      var(--color-fd-primary) 10%,
-      transparent
-    );
-    border-radius: 2px;
+    padding: 1px;
+    @apply border -my-px border-fd-primary/30 bg-fd-primary/10 rounded-md font-medium;
   }
 }
 

package/dist/components/callout.d.ts

@@ -4,7 +4,7 @@ export declare const Callout: import("react").ForwardRefExoticComponent<Omit<HTM
     /**
      * @defaultValue info
      */
-    type?: "info" | "warn" | "error";
+    type?: "info" | "warn" | "error" | "success" | "warning";
     /**
      * Force an icon
      */

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

@@ -1 +1 @@
-{"version":3,"file":"callout.d.ts","sourceRoot":"","sources":["../../src/components/callout.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAiCxE,eAAO,MAAM,OAAO;YAzBV,SAAS;IACjB;;OAEG;WACI,MAAM,GAAG,MAAM,GAAG,OAAO;IAEhC;;OAEG;WACI,SAAS;kDA8CjB,CAAC"}
+{"version":3,"file":"callout.d.ts","sourceRoot":"","sources":["../../src/components/callout.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAkCxE,eAAO,MAAM,OAAO;YA1BV,SAAS;IACjB;;OAEG;WACI,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS;IAExD;;OAEG;WACI,SAAS;kDAoDjB,CAAC"}

package/dist/components/callout.js

@@ -1,18 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CircleX, Info, TriangleAlert } from '../icons.js';
+import { CircleCheck, CircleX, Info, TriangleAlert } from '../icons.js';
 import { forwardRef } from 'react';
 import { cn } from '../utils/cn.js';
 import { cva } from 'class-variance-authority';
-const calloutVariants = cva('my-4 flex flex-row gap-2 rounded-lg border border-s-2 bg-fd-card p-3 text-sm text-fd-card-foreground shadow-md', {
+const calloutVariants = cva('my-4 flex gap-2 rounded-lg border border-s-2 bg-fd-card p-3 text-sm text-fd-card-foreground shadow-md', {
     variants: {
         type: {
             info: 'border-s-blue-500/50',
             warn: 'border-s-orange-500/50',
             error: 'border-s-red-500/50',
+            success: 'border-s-green-500/50',
         },
     },
 });
 export const Callout = forwardRef(({ className, children, title, type = 'info', icon, ...props }, ref) => {
+    if (type === 'warning')
+        type = 'warn';
     return (_jsxs("div", { ref: ref, className: cn(calloutVariants({
             type: type,
         }), className), ...props, children: [icon ??
@@ -20,6 +23,7 @@ export const Callout = forwardRef(({ className, children, title, type = 'info',
                     info: _jsx(Info, { className: "size-5 fill-blue-500 text-fd-card" }),
                     warn: (_jsx(TriangleAlert, { className: "size-5 fill-orange-500 text-fd-card" })),
                     error: _jsx(CircleX, { className: "size-5 fill-red-500 text-fd-card" }),
+                    success: (_jsx(CircleCheck, { className: "size-5 fill-green-500 text-fd-card" })),
                 }[type], _jsxs("div", { className: "min-w-0 flex flex-col gap-2 flex-1", children: [title ? _jsx("p", { className: "font-medium !my-0", children: title }) : null, _jsx("div", { className: "text-fd-muted-foreground prose-no-margin empty:hidden", children: children })] })] }));
 });
 Callout.displayName = 'Callout';

package/dist/components/codeblock.d.ts

@@ -1,5 +1,4 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
-import type { ScrollAreaViewportProps } from '@radix-ui/react-scroll-area';
 export type CodeBlockProps = HTMLAttributes<HTMLElement> & {
     /**
      * Icon of code block
@@ -19,7 +18,15 @@ export type CodeBlockProps = HTMLAttributes<HTMLElement> & {
      * @defaultValue false
      */
     keepBackground?: boolean;
-    viewportProps?: ScrollAreaViewportProps;
+    viewportProps?: HTMLAttributes<HTMLElement>;
+    /**
+     * show line numbers
+     */
+    'data-line-numbers'?: boolean;
+    /**
+     * @defaultValue 1
+     */
+    'data-line-numbers-start'?: number;
 };
 export declare const Pre: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLPreElement> & import("react").RefAttributes<HTMLPreElement>>;
 export declare const CodeBlock: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
@@ -41,6 +48,14 @@ export declare const CodeBlock: import("react").ForwardRefExoticComponent<HTMLAt
      * @defaultValue false
      */
     keepBackground?: boolean;
-    viewportProps?: ScrollAreaViewportProps;
+    viewportProps?: HTMLAttributes<HTMLElement>;
+    /**
+     * show line numbers
+     */
+    'data-line-numbers'?: boolean;
+    /**
+     * @defaultValue 1
+     */
+    'data-line-numbers-start'?: number;
 } & import("react").RefAttributes<HTMLElement>>;
 //# sourceMappingURL=codeblock.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"codeblock.d.ts","sourceRoot":"","sources":["../../src/components/codeblock.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAE3E,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACzD;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,aAAa,CAAC,EAAE,uBAAuB,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,GAAG,2HAYf,CAAC;AAIF,eAAO,MAAM,SAAS;IAxCpB;;;;OAIG;WACI,SAAS;IAEhB;;;;OAIG;gBACS,OAAO;IAEnB;;;;OAIG;qBACc,OAAO;oBAER,uBAAuB;+CAiGxC,CAAC"}
+{"version":3,"file":"codeblock.d.ts","sourceRoot":"","sources":["../../src/components/codeblock.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAKf,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACzD;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,aAAa,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IAE5C;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;OAEG;IACH,yBAAyB,CAAC,EAAE,MAAM,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,GAAG,2HAYf,CAAC;AAIF,eAAO,MAAM,SAAS;IAlDpB;;;;OAIG;WACI,SAAS;IAEhB;;;;OAIG;gBACS,OAAO;IAEnB;;;;OAIG;qBACc,OAAO;oBAER,cAAc,CAAC,WAAW,CAAC;IAE3C;;OAEG;0BACmB,OAAO;IAE7B;;OAEG;gCACyB,MAAM;+CA2GnC,CAAC"}

package/dist/components/codeblock.js

@@ -3,14 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, Copy } from '../icons.js';
 import { forwardRef, useRef, } from 'react';
 import { cn } from '../utils/cn.js';
-import { ScrollArea, ScrollBar, ScrollViewport, } from '../components/ui/scroll-area.js';
 import { useCopyButton } from '../utils/use-copy-button.js';
 import { buttonVariants } from '../components/ui/button.js';
 export const Pre = forwardRef(({ className, ...props }, ref) => {
-    return (_jsx("pre", { ref: ref, className: cn('text-[13px] p-4 *:block *:w-full', className), ...props, children: props.children }));
+    return (_jsx("pre", { ref: ref, className: cn('min-w-full w-max *:flex *:flex-col', className), ...props, children: props.children }));
 });
 Pre.displayName = 'Pre';
-export const CodeBlock = forwardRef(({ title, allowCopy = true, keepBackground = false, icon, viewportProps, ...props }, ref) => {
+export const CodeBlock = forwardRef(({ title, allowCopy = true, keepBackground = false, icon, viewportProps, children, ...props }, ref) => {
     const areaRef = useRef(null);
     const onCopy = () => {
         const pre = areaRef.current?.getElementsByTagName('pre').item(0);
@@ -22,11 +21,16 @@ export const CodeBlock = forwardRef(({ title, allowCopy = true, keepBackground =
         });
         void navigator.clipboard.writeText(clone.textContent ?? '');
     };
-    return (_jsxs("figure", { ref: ref, ...props, className: cn('not-prose group relative my-4 overflow-hidden rounded-lg border bg-fd-card text-sm outline-none', keepBackground && 'bg-(--shiki-light-bg) dark:bg-(--shiki-dark-bg)', props.className), children: [title ? (_jsxs("div", { className: "flex items-center gap-2 bg-fd-secondary px-4 py-1.5", children: [icon ? (_jsx("div", { className: "text-fd-muted-foreground [&_svg]:size-3.5", dangerouslySetInnerHTML: typeof icon === 'string'
+    return (_jsxs("figure", { ref: ref, dir: "ltr", ...props, className: cn('not-prose group relative my-4 overflow-hidden rounded-lg border bg-fd-card text-sm outline-none', keepBackground && 'bg-(--shiki-light-bg) dark:bg-(--shiki-dark-bg)', props.className), children: [title ? (_jsxs("div", { className: "flex items-center gap-2 bg-fd-secondary px-4 py-1.5", children: [icon ? (_jsx("div", { className: "text-fd-muted-foreground [&_svg]:size-3.5", dangerouslySetInnerHTML: typeof icon === 'string'
                             ? {
                                 __html: icon,
                             }
-                            : undefined, children: typeof icon !== 'string' ? icon : null })) : null, _jsx("figcaption", { className: "flex-1 truncate text-fd-muted-foreground", children: title }), allowCopy ? (_jsx(CopyButton, { className: "-me-2", onCopy: onCopy })) : null] })) : (allowCopy && (_jsx(CopyButton, { className: "absolute right-2 top-2 z-[2] backdrop-blur-md", onCopy: onCopy }))), _jsxs(ScrollArea, { ref: areaRef, dir: "ltr", children: [_jsx(ScrollViewport, { ...viewportProps, className: cn('max-h-[600px]', viewportProps?.className), children: props.children }), _jsx(ScrollBar, { orientation: "horizontal" })] })] }));
+                            : undefined, children: typeof icon !== 'string' ? icon : null })) : null, _jsx("figcaption", { className: "flex-1 truncate text-fd-muted-foreground", children: title }), allowCopy ? (_jsx(CopyButton, { className: "-me-2", onCopy: onCopy })) : null] })) : (allowCopy && (_jsx(CopyButton, { className: "absolute right-2 top-2 z-[2] backdrop-blur-md", onCopy: onCopy }))), _jsx("div", { ref: areaRef, ...viewportProps, className: cn('text-[13px] py-3.5 overflow-auto [&_.line]:px-4 max-h-[600px] fd-scroll-container', props['data-line-numbers'] && '[&_.line]:pl-3', viewportProps?.className), style: {
+                    counterSet: props['data-line-numbers']
+                        ? `line ${Number(props['data-line-numbers-start'] ?? 1) - 1}`
+                        : undefined,
+                    ...viewportProps?.style,
+                }, children: children })] }));
 });
 CodeBlock.displayName = 'CodeBlock';
 function CopyButton({ className, onCopy, ...props }) {

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

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

package/dist/components/layout/sidebar.js

@@ -45,7 +45,7 @@ export function Sidebar({ defaultOpenLevel = 0, prefetch = true, collapsible = t
     });
     if (isMobile) {
         const state = open ? 'open' : 'closed';
-        return (_jsxs(_Fragment, { children: [_jsx(Presence, { present: open, children: _jsx("div", { "data-state": state, className: "fixed z-40 inset-0 bg-black/30 backdrop-blur-sm data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out", onClick: () => setOpen(false) }) }), _jsx(Presence, { present: open, children: ({ present }) => (_jsx(RemoveScroll, { as: "aside", enabled: present, id: "nd-sidebar-mobile", ...props, "data-state": state, className: cn('fixed text-[15px] flex flex-col rounded-e-xl border-e start-0 inset-y-0 w-[85%] max-w-[380px] z-40 bg-fd-background data-[state=open]:animate-fd-enterFromLeft data-[state=closed]:animate-fd-exitToLeft', !present && 'invisible', props.className), children: _jsx(Context.Provider, { value: context, children: props.children }) })) })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Presence, { present: open, children: _jsx("div", { "data-state": state, className: "fixed z-40 inset-0 bg-black/30 backdrop-blur-sm data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out", onClick: () => setOpen(false) }) }), _jsx(Presence, { present: open, children: ({ present }) => (_jsx(RemoveScroll, { as: "aside", enabled: present, id: "nd-sidebar-mobile", ...props, "data-state": state, className: cn('fixed text-[15px] flex flex-col py-3 rounded-e-xl border-e start-0 inset-y-0 w-[85%] max-w-[380px] z-40 bg-fd-background data-[state=open]:animate-fd-enterFromLeft data-[state=closed]:animate-fd-exitToLeft', !present && 'invisible', props.className), children: _jsx(Context.Provider, { value: context, children: props.children }) })) })] }));
     }
     return (_jsx("aside", { id: "nd-sidebar", ...props, "data-collapsed": collapsed, className: cn('sticky top-(--fd-sidebar-top) z-20 bg-fd-card text-sm h-(--fd-sidebar-height) max-md:hidden', collapsible && [
             'transition-all',
@@ -76,13 +76,13 @@ export function Sidebar({ defaultOpenLevel = 0, prefetch = true, collapsible = t
             }, Math.min(e.clientX, document.body.clientWidth - e.clientX) > 100
                 ? 0
                 : 500);
-        }, children: _jsx("div", { className: "flex w-(--fd-sidebar-width) h-full max-w-full flex-col ms-auto border-e", children: _jsx(Context.Provider, { value: context, children: props.children }) }) }));
+        }, children: _jsx("div", { className: "flex w-(--fd-sidebar-width) h-full max-w-full flex-col pt-1.5 ms-auto border-e", children: _jsx(Context.Provider, { value: context, children: props.children }) }) }));
 }
 export function SidebarHeader(props) {
-    return (_jsx("div", { ...props, className: cn('flex flex-col gap-3 px-4 pt-4 max-md:pt-6 max-md:pb-4 empty:hidden', props.className), children: props.children }));
+    return (_jsx("div", { ...props, className: cn('flex flex-col gap-3 px-4 py-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 empty:hidden max-md:pb-6', props.className), children: props.children }));
+    return (_jsx("div", { ...props, className: cn('flex flex-col border-t px-4 py-3', props.className), children: props.children }));
 }
 export function SidebarViewport(props) {
     return (_jsx(ScrollArea, { ...props, className: cn('h-full', props.className), children: _jsx(ScrollViewport, { className: "p-4", style: {

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

@@ -1,6 +1,5 @@
 import type { TOCItemType } from 'fumadocs-core/server';
 import { type ComponentProps, type HTMLAttributes, type ReactNode } from 'react';
-import { ScrollArea } from '../ui/scroll-area.js';
 export interface TOCProps {
     /**
      * Custom content in TOC container, before the main TOC
@@ -14,9 +13,7 @@ export interface TOCProps {
 }
 export declare function Toc(props: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 export declare function TocItemsEmpty(): import("react/jsx-runtime").JSX.Element;
-export declare function TOCScrollArea({ isMenu, ...props }: ComponentProps<typeof ScrollArea> & {
-    isMenu?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+export declare function TOCScrollArea(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 export declare function TOCItems({ items }: {
     items: TOCItemType[];
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"toc.d.ts","sourceRoot":"","sources":["../../../src/components/layout/toc.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,UAAU,EAAkB,MAAM,mBAAmB,CAAC;AAG/D,MAAM,WAAW,QAAQ;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,GAAG,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAyBxD;AAED,wBAAgB,aAAa,4CAQ5B;AAED,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,UAAU,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,2CAsB1D;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,WAAW,EAAE,CAAA;CAAE,2CAqB3D"}
+{"version":3,"file":"toc.d.ts","sourceRoot":"","sources":["../../../src/components/layout/toc.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,QAAQ;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,GAAG,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAyBxD;AAED,wBAAgB,aAAa,4CAQ5B;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAiBzD;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,WAAW,EAAE,CAAA;CAAE,2CAqB3D"}

package/dist/components/layout/toc.js

@@ -5,23 +5,21 @@ import { useRef, } from 'react';
 import { cn } from '../../utils/cn.js';
 import { useI18n } from '../../contexts/i18n.js';
 import { TocThumb } from '../../components/layout/toc-thumb.js';
-import { ScrollArea, ScrollViewport } from '../ui/scroll-area.js';
 import { usePageStyles } from '../../contexts/layout.js';
 export function Toc(props) {
     const { toc } = usePageStyles();
     return (_jsx("div", { id: "nd-toc", ...props, className: cn('sticky top-[calc(var(--fd-banner-height)+var(--fd-nav-height))] h-(--fd-toc-height) pb-2 pt-12', toc, props.className), style: {
             ...props.style,
             '--fd-toc-height': 'calc(100dvh - var(--fd-banner-height) - var(--fd-nav-height))',
-        }, children: _jsx("div", { className: "flex h-full w-(--fd-toc-width) max-w-full flex-col gap-3 pe-4", children: props.children }) }));
+        }, children: _jsx("div", { className: "flex h-full w-(--fd-toc-width) max-w-full flex-col pe-4", children: props.children }) }));
 }
 export function TocItemsEmpty() {
     const { text } = useI18n();
     return (_jsx("div", { className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground", children: text.tocNoHeadings }));
 }
-export function TOCScrollArea({ isMenu, ...props }) {
+export function TOCScrollArea(props) {
     const viewRef = useRef(null);
-    return (_jsx(ScrollArea, { ...props, className: cn('flex flex-col ps-px', props.className), children: _jsx(ScrollViewport, { ref: viewRef, className: cn('relative min-h-0 text-sm', isMenu &&
-                '[mask-image:linear-gradient(to_bottom,transparent,white_16px,white_calc(100%-16px),transparent)] px-4 md:px-6 py-2'), children: _jsx(Primitive.ScrollProvider, { containerRef: viewRef, children: props.children }) }) }));
+    return (_jsx("div", { ...props, ref: viewRef, className: cn('relative min-h-0 text-sm ms-px overflow-auto [scrollbar-width:none] [mask-image:linear-gradient(to_bottom,transparent,white_16px,white_calc(100%-16px),transparent)] py-3', props.className), children: _jsx(Primitive.ScrollProvider, { containerRef: viewRef, children: props.children }) }));
 }
 export function TOCItems({ items }) {
     const containerRef = useRef(null);

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

@@ -0,0 +1,10 @@
+/**
+ * The built-in CSS `:empty` selector cannot detect if the children is hidden, classes such as `md:hidden` causes it to fail.
+ * This component is an enhancement to `empty:hidden` to fix the issue described above.
+ *
+ * This can be expensive, please avoid this whenever possible.
+ */
+export declare function HideIfEmpty({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=hide-if-empty.d.ts.map

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

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

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

@@ -0,0 +1,52 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slot } from '@radix-ui/react-slot';
+import { useEffect, useId, useRef, useState } from 'react';
+const init = `function isEmpty(node) {
+  for (let i = 0; i < node.childNodes.length; i++) {
+    const child = node.childNodes.item(i);
+    if (child.nodeType === Node.TEXT_NODE) {
+      return false
+    } else if (
+      child.nodeType === Node.ELEMENT_NODE &&
+      window.getComputedStyle(child).display !== 'none'
+    ) {
+      return false
+    }
+  }
+
+  return true;
+}`;
+const isEmpty = eval(`${init}; isEmpty`);
+/**
+ * The built-in CSS `:empty` selector cannot detect if the children is hidden, classes such as `md:hidden` causes it to fail.
+ * This component is an enhancement to `empty:hidden` to fix the issue described above.
+ *
+ * This can be expensive, please avoid this whenever possible.
+ */
+export function HideIfEmpty({ children }) {
+    const id = useId();
+    const ref = useRef(null);
+    const [empty, setEmpty] = useState();
+    useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        const onUpdate = () => {
+            setEmpty(isEmpty(element));
+        };
+        const observer = new ResizeObserver(onUpdate);
+        observer.observe(element);
+        onUpdate();
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
+    const inject = `
+${init}
+const element = document.querySelector('[data-hide-if-empty="${id}"]')
+if (element) {
+  element.setAttribute('data-empty', String(isEmpty(element)))
+}`;
+    return (_jsxs(_Fragment, { children: [empty === undefined && _jsx("script", { children: `{ ${inject} }` }), _jsx(Slot, { ref: ref, "data-hide-if-empty": id, "data-empty": empty, className: "data-[empty=true]:hidden", children: children })] }));
+}

package/dist/components/ui/navigation-menu.js

@@ -12,6 +12,6 @@ NavigationMenuTrigger.displayName = Primitive.Trigger.displayName;
 const NavigationMenuContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(Primitive.Content, { ref: ref, className: cn('absolute inset-x-0 top-0 data-[motion=from-end]:animate-fd-enterFromRight data-[motion=from-start]:animate-fd-enterFromLeft data-[motion=to-end]:animate-fd-exitToRight data-[motion=to-start]:animate-fd-exitToLeft', className), ...props })));
 NavigationMenuContent.displayName = Primitive.Content.displayName;
 const NavigationMenuLink = Primitive.Link;
-const NavigationMenuViewport = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: "flex w-full justify-center", children: _jsx(Primitive.Viewport, { ...props, className: cn('relative h-(--radix-navigation-menu-viewport-height) w-full origin-[top_center] overflow-hidden text-fd-popover-foreground transition-[width,height] duration-300 data-[state=closed]:animate-fd-nav-menu-out data-[state=open]:animate-fd-nav-menu-in', className) }) })));
+const NavigationMenuViewport = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: "flex w-full justify-center", children: _jsx(Primitive.Viewport, { ...props, className: cn('relative h-(--radix-navigation-menu-viewport-height) max-h-[80svh] w-full origin-[top_center] overflow-auto [scrollbar-width:none] text-fd-popover-foreground transition-[width,height] duration-300 data-[state=closed]:animate-fd-nav-menu-out data-[state=open]:animate-fd-nav-menu-in', className) }) })));
 NavigationMenuViewport.displayName = Primitive.Viewport.displayName;
 export { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuViewport, };

package/dist/layouts/docs.d.ts

@@ -24,7 +24,7 @@ export declare function DocsLayoutSidebarFooter({ i18n, themeSwitch, links, }: {
     i18n?: DocsLayoutProps['i18n'];
     links?: IconItemType[];
     themeSwitch?: DocsLayoutProps['themeSwitch'];
-}): import("react/jsx-runtime").JSX.Element | null;
+}): import("react/jsx-runtime").JSX.Element;
 export { CollapsibleControl, Navbar, NavbarSidebarTrigger, type LinkItemType };
 export { getSidebarTabsFromOptions } from './docs/shared.js';
 //# 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;AAarE,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,YAAY,EAClB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,UAAU,CAAC;AAK1D,OAAO,EACL,kBAAkB,EAClB,MAAM,EACN,oBAAoB,EACrB,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAIL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAY/B,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IAEpB,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG;QAClC,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,SAAS,CAAC,EAAE,SAAS,CAAC;KACvB,CAAC;IAEF;;OAEG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,wBAAgB,UAAU,CAAC,EACzB,GAAG,EAAE,EAAE,eAAe,EAAE,GAAG,GAAG,EAAO,EACrC,OAAY,EACZ,YAAY,EACZ,kBAA0B,EAC1B,WAA8C,EAC9C,IAAY,EACZ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,GAAG,SAAS,CAkG7B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,WAAkB,EAClB,UAAU,EACV,GAAG,EACH,KAAU,EACV,MAAM,EACN,MAAM,EACN,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,GAAG;IAChC,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,GAAG,CAAC,EAAE,SAAS,CAAC;CACjB,2CA0CA;AAED,wBAAgB,uBAAuB,CAAC,EACtC,IAAI,EACJ,WAAW,EACX,KAAU,GACX,EAAE;IACD,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC;CAC9C,kDAiCA;AAED,OAAO,EAAE,kBAAkB,EAAE,MAAM,EAAE,oBAAoB,EAAE,KAAK,YAAY,EAAE,CAAC;AAC/E,OAAO,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"docs.d.ts","sourceRoot":"","sources":["../../src/layouts/docs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAarE,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,YAAY,EAClB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,UAAU,CAAC;AAK1D,OAAO,EACL,kBAAkB,EAClB,MAAM,EACN,oBAAoB,EACrB,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAIL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAa/B,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IAEpB,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG;QAClC,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,SAAS,CAAC,EAAE,SAAS,CAAC;KACvB,CAAC;IAEF;;OAEG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,wBAAgB,UAAU,CAAC,EACzB,GAAG,EAAE,EAAE,eAAe,EAAE,GAAG,GAAG,EAAO,EACrC,OAAY,EACZ,YAAY,EACZ,kBAA0B,EAC1B,WAA8C,EAC9C,IAAY,EACZ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,GAAG,SAAS,CAkG7B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,WAAkB,EAClB,UAAU,EACV,GAAG,EACH,KAAU,EACV,MAAM,EACN,MAAM,EACN,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,GAAG;IAChC,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,GAAG,CAAC,EAAE,SAAS,CAAC;CACjB,2CAgDA;AAED,wBAAgB,uBAAuB,CAAC,EACtC,IAAI,EACJ,WAAW,EACX,KAAU,GACX,EAAE;IACD,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC;CAC9C,2CAgCA;AAED,OAAO,EAAE,kBAAkB,EAAE,MAAM,EAAE,oBAAoB,EAAE,KAAK,YAAY,EAAE,CAAC;AAC/E,OAAO,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAC"}

package/dist/layouts/docs.js

@@ -16,6 +16,7 @@ import { getSidebarTabsFromOptions, layoutVariables, SidebarLinkItem, } from '..
 import { NavProvider, StylesProvider, } from '../contexts/layout.js';
 import Link from 'fumadocs-core/link';
 import { LargeSearchToggle, SearchToggle, } from '../components/layout/search-toggle.js';
+import { HideIfEmpty } from '../components/ui/hide-if-empty.js';
 export function DocsLayout({ nav: { transparentMode, ...nav } = {}, sidebar = {}, searchToggle, disableThemeSwitch = false, themeSwitch = { enabled: !disableThemeSwitch }, i18n = false, children, ...props }) {
     const tabs = useMemo(() => getSidebarTabsFromOptions(sidebar.tabs, props.tree) ?? [], [sidebar.tabs, props.tree]);
     const links = getLinks(props.links ?? [], props.githubUrl);
@@ -32,18 +33,15 @@ export function DocsLayout({ nav: { transparentMode, ...nav } = {}, sidebar = {}
                     }, children: [slot(sidebar, _jsx(DocsLayoutSidebar, { ...omit(sidebar, 'enabled', 'component', 'tabs'), links: links, nav: _jsxs(_Fragment, { children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex text-[15px] items-center gap-2.5 font-medium", children: nav.title }), nav.children] }), banner: _jsxs(_Fragment, { children: [tabs.length > 0 ? _jsx(RootToggle, { options: tabs }) : null, slots('lg', searchToggle, _jsx(LargeSearchToggle, { hideIfDisabled: true, className: "rounded-lg max-md:hidden" })), sidebar.banner] }), footer: _jsxs(_Fragment, { children: [_jsx(DocsLayoutSidebarFooter, { links: links.filter((item) => item.type === 'icon'), i18n: i18n, themeSwitch: themeSwitch }), sidebar.footer] }) })), _jsx(StylesProvider, { ...pageStyles, children: children })] })] }) }));
 }
 export function DocsLayoutSidebar({ collapsible = true, components, nav, links = [], footer, banner, ...props }) {
-    return (_jsxs(_Fragment, { children: [collapsible ? _jsx(CollapsibleControl, {}) : null, _jsxs(Sidebar, { ...props, collapsible: collapsible, className: cn('md:ps-(--fd-layout-offset)', props.className), children: [_jsxs(SidebarHeader, { children: [_jsxs("div", { className: "flex flex-row py-1.5 max-md:hidden", children: [nav, collapsible && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
-                                            color: 'ghost',
-                                            size: 'icon-sm',
-                                        }), 'ms-auto mb-auto -my-1.5 text-fd-muted-foreground max-md:hidden'), children: _jsx(SidebarIcon, {}) }))] }), banner] }), _jsxs(SidebarViewport, { children: [_jsx("div", { className: "mb-4 empty:hidden", children: links
-                                    .filter((v) => v.type !== 'icon')
-                                    .map((item, i) => (_jsx(SidebarLinkItem, { item: item }, i))) }), _jsx(SidebarPageTree, { components: components })] }), _jsx(SidebarFooter, { children: footer })] })] }));
+    return (_jsxs(_Fragment, { children: [collapsible ? _jsx(CollapsibleControl, {}) : null, _jsxs(Sidebar, { ...props, collapsible: collapsible, className: cn('md:ps-(--fd-layout-offset)', props.className), children: [_jsx(HideIfEmpty, { children: _jsxs(SidebarHeader, { children: [_jsxs("div", { className: "flex py-1.5 max-md:hidden", children: [nav, collapsible && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
+                                                color: 'ghost',
+                                                size: 'icon-sm',
+                                            }), 'ms-auto mb-auto -my-1.5 text-fd-muted-foreground max-md:hidden'), children: _jsx(SidebarIcon, {}) }))] }), banner] }) }), _jsxs(SidebarViewport, { children: [links
+                                .filter((v) => v.type !== 'icon')
+                                .map((item, i, list) => (_jsx(SidebarLinkItem, { item: item, className: cn(i === list.length - 1 && 'mb-4') }, i))), _jsx(SidebarPageTree, { components: components })] }), _jsx(HideIfEmpty, { children: _jsx(SidebarFooter, { children: footer }) })] })] }));
 }
 export function DocsLayoutSidebarFooter({ i18n, themeSwitch, links = [], }) {
-    // empty footer items
-    if (links.length === 0 && !i18n && themeSwitch?.enabled === false)
-        return null;
-    return (_jsxs("div", { className: "flex flex-row items-center", children: [links.map((item, i) => (_jsx(BaseLinkItem, { item: item, className: cn(buttonVariants({ size: 'icon', color: 'ghost' }), 'text-fd-muted-foreground md:[&_svg]:size-4.5'), "aria-label": item.label, children: item.icon }, i))), _jsx("div", { role: "separator", className: "flex-1" }), i18n ? (_jsxs(LanguageToggle, { className: "me-1.5", children: [_jsx(Languages, { className: "size-4.5" }), _jsx(LanguageToggleText, { className: "md:hidden" })] })) : null, slot(themeSwitch, _jsx(ThemeToggle, { className: "p-0", mode: themeSwitch?.mode }))] }));
+    return (_jsx(HideIfEmpty, { children: _jsxs("div", { className: "flex items-center justify-end", children: [_jsx("div", { className: "flex items-center flex-1 empty:hidden", children: links.map((item, i) => (_jsx(BaseLinkItem, { item: item, className: cn(buttonVariants({ size: 'icon', color: 'ghost' }), 'text-fd-muted-foreground md:[&_svg]:size-4.5'), "aria-label": item.label, children: item.icon }, i))) }), i18n ? (_jsxs(LanguageToggle, { className: "me-1.5", children: [_jsx(Languages, { className: "size-4.5" }), _jsx(LanguageToggleText, { className: "md:hidden" })] })) : null, slot(themeSwitch, _jsx(ThemeToggle, { className: "p-0", mode: themeSwitch?.mode }))] }) }));
 }
 export { CollapsibleControl, Navbar, NavbarSidebarTrigger };
 export { getSidebarTabsFromOptions } from './docs/shared.js';

package/dist/layouts/home/menu.js

@@ -41,5 +41,5 @@ export function MenuTrigger({ enableHover = false, ...props }) {
         }), props.className), children: props.children }));
 }
 export function MenuContent(props) {
-    return (_jsx(NavigationMenuContent, { ...props, className: cn('flex flex-col p-4', props.className), children: props.children }));
+    return (_jsx(NavigationMenuContent, { ...props, className: cn('flex flex-col px-4 pb-4', props.className), children: props.children }));
 }

package/dist/layouts/home/navbar.js

@@ -12,11 +12,11 @@ const navItemVariants = cva('inline-flex items-center gap-1 p-2 text-fd-muted-fo
 export function Navbar(props) {
     const [value, setValue] = useState('');
     const { isTransparent } = useNav();
-    return (_jsx(NavigationMenu, { value: value, onValueChange: setValue, asChild: true, children: _jsxs("header", { id: "nd-nav", ...props, className: cn('fixed left-(--fd-nav-left) top-(--fd-banner-height) z-40 box-content w-full max-w-fd-container -translate-x-1/2 border-b transition-colors lg:mt-2 lg:w-[calc(100%-1rem)] lg:rounded-2xl lg:border', value.length > 0 ? 'shadow-lg' : 'shadow-sm', (!isTransparent || value.length > 0) &&
-                'bg-fd-background/80 backdrop-blur-lg', props.className), style: {
-                '--fd-nav-left': 'calc(50% - var(--removed-body-scroll-bar-size,0px) / 2)',
+    return (_jsx(NavigationMenu, { value: value, onValueChange: setValue, asChild: true, children: _jsxs("header", { id: "nd-nav", ...props, className: cn('fixed top-(--fd-banner-height) z-40 box-content backdrop-blur-lg max-w-fd-container -translate-x-1/2 border-b transition-colors lg:mt-2 lg:[--fd-padding:1rem] lg:rounded-2xl lg:border', value.length > 0 ? 'shadow-lg' : 'shadow-sm', (!isTransparent || value.length > 0) && 'bg-fd-background/80', props.className), style: {
+                width: 'calc(100% - var(--fd-padding,0px) - var(--removed-body-scroll-bar-size,0px))',
+                left: 'calc(50% - var(--removed-body-scroll-bar-size,0px) / 2)',
                 ...props.style,
-            }, children: [_jsx(NavigationMenuList, { className: "flex h-14 w-full flex-row items-center px-4 lg:h-12", asChild: true, children: _jsx("nav", { children: props.children }) }), _jsx(NavigationMenuViewport, {})] }) }));
+            }, children: [_jsx(NavigationMenuList, { className: "flex h-14 w-full items-center px-4 lg:h-12", asChild: true, children: _jsx("nav", { children: props.children }) }), _jsx(NavigationMenuViewport, {})] }) }));
 }
 export const NavbarMenu = NavigationMenuItem;
 export function NavbarMenuContent(props) {

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

@@ -1 +1 @@
-{"version":3,"file":"home.d.ts","sourceRoot":"","sources":["../../src/layouts/home.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAAW,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,KAAK,UAAU,EAAe,MAAM,kBAAkB,CAAC;AAEhE,OAAO,EAAY,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AA6B1D,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,GAAG,CAAC,EAAE,OAAO,CACX,UAAU,GAAG;QACX;;WAEG;QACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;KAC7B,CACF,CAAC;CACH;AAED,wBAAgB,UAAU,CACxB,KAAK,EAAE,eAAe,GAAG,cAAc,CAAC,WAAW,CAAC,2CAmCrD;AAED,wBAAgB,MAAM,CAAC,EACrB,GAAQ,EACR,IAAY,EACZ,KAAK,EACL,SAAS,EACT,WAAW,EACX,YAAY,GACb,EAAE,eAAe,2CA8FjB"}
+{"version":3,"file":"home.d.ts","sourceRoot":"","sources":["../../src/layouts/home.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAAW,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,KAAK,UAAU,EAAe,MAAM,kBAAkB,CAAC;AAEhE,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,UAAU,CAAC;AA6B1D,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,GAAG,CAAC,EAAE,OAAO,CACX,UAAU,GAAG;QACX;;WAEG;QACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;KAC7B,CACF,CAAC;CACH;AAED,wBAAgB,UAAU,CACxB,KAAK,EAAE,eAAe,GAAG,cAAc,CAAC,WAAW,CAAC,2CAmCrD;AAED,wBAAgB,MAAM,CAAC,EACrB,GAAQ,EACR,IAAY,EACZ,KAAK,EACL,SAAS,EACT,WAAW,EACX,YAAY,GACb,EAAE,eAAe,2CA8FjB"}

package/dist/layouts/home.js

@@ -33,7 +33,7 @@ function NavbarLinkItem({ item, ...props }) {
             if (child.type === 'custom')
                 return _jsx(Fragment, { children: child.children }, j);
             const { banner = child.icon ? (_jsx("div", { className: "w-fit rounded-md border bg-fd-muted p-1 [&_svg]:size-4", children: child.icon })) : null, ...rest } = child.menu ?? {};
-            return (_jsx(NavbarMenuLink, { href: child.url, ...rest, children: rest.children ?? (_jsxs(_Fragment, { children: [banner, _jsx("p", { className: "-mb-1 text-sm font-medium", children: child.text }), child.description ? (_jsx("p", { className: "text-[13px] text-fd-muted-foreground", children: child.description })) : null] })) }, j));
+            return (_jsx(NavbarMenuLink, { href: child.url, external: child.external, ...rest, children: rest.children ?? (_jsxs(_Fragment, { children: [banner, _jsx("p", { className: "text-[15px] font-medium", children: child.text }), _jsx("p", { className: "text-sm text-fd-muted-foreground empty:hidden", children: child.description })] })) }, j));
         });
         return (_jsxs(NavbarMenu, { children: [_jsx(NavbarMenuTrigger, { ...props, children: item.url ? _jsx(Link, { href: item.url, children: item.text }) : item.text }), _jsx(NavbarMenuContent, { children: children })] }));
     }

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

@@ -6,7 +6,4 @@ export declare function Navbar({ mode, ...props }: HTMLAttributes<HTMLElement> &
 export declare function NavbarSidebarTrigger(props: ButtonHTMLAttributes<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;
 export declare function LayoutTabs(props: HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
 export declare function LayoutTab(item: Option): import("react/jsx-runtime").JSX.Element;
-export declare function SidebarLayoutTab({ item, ...props }: {
-    item: Option;
-} & HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=notebook-client.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"notebook-client.d.ts","sourceRoot":"","sources":["../../src/layouts/notebook-client.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,oBAAoB,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAQvE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAE9D,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG;IAAE,IAAI,EAAE,KAAK,GAAG,MAAM,CAAA;CAAE,2CAoBxD;AAED,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,2CAmB/C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,2CAY5D;AAUD,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,2CAkBrC;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,GAAG,KAAK,EACT,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,cAAc,CAAC,WAAW,CAAC,2CAoBhD"}
+{"version":3,"file":"notebook-client.d.ts","sourceRoot":"","sources":["../../src/layouts/notebook-client.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,oBAAoB,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAQvE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAE9D,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG;IAAE,IAAI,EAAE,KAAK,GAAG,MAAM,CAAA;CAAE,2CAoBxD;AAED,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,2CAmB/C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,2CAY5D;AAUD,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,2CAkBrC"}

package/dist/layouts/notebook-client.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from '../utils/cn.js';
 import { useSidebar } from '../contexts/sidebar.js';
 import { useNav } from '../contexts/layout.js';
@@ -38,9 +38,3 @@ export function LayoutTab(item) {
             closeOnRedirect.current = false;
         }, children: item.title }));
 }
-export function SidebarLayoutTab({ item, ...props }) {
-    const selected = useIsSelected(item);
-    return (_jsxs(Link, { ...props, className: cn('flex flex-row items-center px-2 -mx-2 py-1.5 gap-2.5 text-fd-muted-foreground [&_svg]:!size-4.5', selected
-            ? 'text-fd-primary font-medium'
-            : 'hover:text-fd-accent-foreground', props.className), "data-active": selected, href: item.url, children: [item.icon, item.title] }));
-}

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

@@ -1 +1 @@
-{"version":3,"file":"notebook.d.ts","sourceRoot":"","sources":["../../src/layouts/notebook.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAAW,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,KAAK,eAAe,EAAyB,MAAM,kBAAkB,CAAC;AAqB/E,OAAO,EAIL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAGL,MAAM,EACN,oBAAoB,EAErB,MAAM,mBAAmB,CAAC;AAa3B,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,2CA8IhD;AAoLD,OAAO,EAAE,MAAM,EAAE,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"notebook.d.ts","sourceRoot":"","sources":["../../src/layouts/notebook.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAAW,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,KAAK,eAAe,EAAyB,MAAM,kBAAkB,CAAC;AAqB/E,OAAO,EAIL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAGL,MAAM,EACN,oBAAoB,EACrB,MAAM,mBAAmB,CAAC;AAc3B,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAE/B,GAAG,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,GAAG;QAC7B,IAAI,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;KACvB,CAAC;IAEF,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IAElC,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAmKhD;AAoLD,OAAO,EAAE,MAAM,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/layouts/notebook.js

@@ -11,11 +11,12 @@ import { LanguageToggle } from '../components/layout/language-toggle.js';
 import { ThemeToggle } from '../components/layout/theme-toggle.js';
 import { Popover, PopoverContent, PopoverTrigger, } from '../components/ui/popover.js';
 import { getSidebarTabsFromOptions, layoutVariables, SidebarLinkItem, } from '../layouts/docs/shared.js';
-import { LayoutTab, LayoutTabs, Navbar, NavbarSidebarTrigger, SidebarLayoutTab, } from './notebook-client.js';
+import { LayoutTab, LayoutTabs, Navbar, NavbarSidebarTrigger, } from './notebook-client.js';
 import { NavProvider, StylesProvider, } from '../contexts/layout.js';
 import { RootToggle } from '../components/layout/root-toggle.js';
 import Link from 'fumadocs-core/link';
 import { LargeSearchToggle, SearchToggle, } from '../components/layout/search-toggle.js';
+import { HideIfEmpty } from '../components/ui/hide-if-empty.js';
 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 navMode = nav.mode ?? 'auto';
@@ -29,17 +30,25 @@ export function DocsLayout(props) {
         toc: cn('max-xl:hidden'),
         page: cn('mt-(--fd-nav-height)'),
     };
+    const sidebarHeader = navMode === 'auto' && (_jsxs("div", { className: "flex justify-between max-md:hidden", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex items-center gap-2.5 font-medium", children: nav.title }), (sidebar.collapsible ?? true) && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
+                    color: 'ghost',
+                    size: 'icon-sm',
+                    className: 'mb-auto text-fd-muted-foreground',
+                })), children: _jsx(SidebarIcon, {}) }))] }));
     return (_jsx(TreeContextProvider, { tree: props.tree, children: _jsx(NavProvider, { transparentMode: transparentMode, children: _jsxs("main", { id: "nd-docs-layout", ...props.containerProps, className: cn('flex w-full flex-1 flex-row pe-(--fd-layout-offset)', variables, props.containerProps?.className), style: {
                     ...layoutVariables,
                     ...props.containerProps?.style,
                 }, children: [_jsxs(Sidebar, { ...sidebar, className: cn('md:ps-(--fd-layout-offset)', navMode === 'top'
                             ? 'md:bg-transparent'
-                            : 'md:[--fd-nav-height:0px]', sidebar.className), children: [_jsxs(SidebarHeader, { children: [navMode === 'auto' && (_jsxs("div", { className: "flex flex-row justify-between max-md:hidden", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex items-center gap-2.5 font-medium", children: nav.title }), (sidebar.collapsible ?? true) && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
-                                                    color: 'ghost',
+                            : 'md:[--fd-nav-height:0px]', sidebar.className), children: [_jsx(HideIfEmpty, { children: _jsxs(SidebarHeader, { children: [sidebarHeader, nav.children, sidebarBanner, tabMode === 'sidebar' && tabs.length > 0 ? (_jsx(RootToggle, { className: "mb-2", options: tabs })) : null, tabMode === 'navbar' && tabs.length > 0 && (_jsx(RootToggle, { options: tabs, className: "lg:hidden" }))] }) }), _jsxs(SidebarViewport, { children: [links
+                                        .filter((item) => item.type !== 'icon')
+                                        .map((item, i) => (_jsx(SidebarLinkItem, { item: item, className: cn('lg:hidden', i === links.length - 1 && 'mb-4') }, i))), _jsx(SidebarPageTree, { components: sidebarComponents })] }), _jsx(HideIfEmpty, { children: _jsxs(SidebarFooter, { className: "flex flex-row items-center justify-end", children: [_jsx("div", { className: "flex items-center flex-1 empty:hidden lg:hidden", children: links
+                                                .filter((item) => item.type === 'icon')
+                                                .map((item, i) => (_jsx(BaseLinkItem, { item: item, className: cn(buttonVariants({
                                                     size: 'icon-sm',
-                                                    className: 'text-fd-muted-foreground mb-auto',
-                                                })), children: _jsx(SidebarIcon, {}) }))] })), nav.children, sidebarBanner, tabMode === 'sidebar' && tabs.length > 0 ? (_jsx(RootToggle, { options: tabs })) : null] }), _jsxs(SidebarViewport, { children: [tabMode === 'navbar' &&
-                                        tabs.map((tab, i) => (_jsx(SidebarLayoutTab, { item: tab, className: cn('lg:hidden', i === tabs.length - 1 && 'mb-4') }, tab.url))), links.map((item, i) => (_jsx(SidebarLinkItem, { item: item, className: cn('lg:hidden', i === links.length - 1 && 'mb-4') }, i))), _jsx(SidebarPageTree, { components: sidebarComponents })] }), _jsxs(SidebarFooter, { className: cn('flex flex-row items-center', !sidebarFooter && 'md:hidden'), children: [i18n ? (_jsx(LanguageToggle, { className: "me-auto md:hidden", children: _jsx(Languages, { className: "size-5 text-fd-muted-foreground" }) })) : null, slot(themeSwitch, _jsx(ThemeToggle, { className: "md:hidden", mode: themeSwitch?.mode ?? 'light-dark-system' })), sidebarFooter] })] }), _jsx(DocsNavbar, { ...props, links: links, tabs: tabMode == 'navbar' ? tabs : [] }), _jsx(StylesProvider, { ...pageStyles, children: props.children })] }) }) }));
+                                                    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, slot(themeSwitch, _jsx(ThemeToggle, { className: "md:hidden", mode: themeSwitch?.mode ?? 'light-dark-system' })), sidebarFooter] }) })] }), _jsx(DocsNavbar, { ...props, links: links, tabs: tabMode == 'navbar' ? tabs : [] }), _jsx(StylesProvider, { ...pageStyles, children: props.children })] }) }) }));
 }
 function DocsNavbar({ links, tabs, ...props }) {
     const navMode = props.nav?.mode ?? 'auto';
@@ -55,7 +64,7 @@ function DocsNavbar({ links, tabs, ...props }) {
                                 .map((item, i) => (_jsx(BaseLinkItem, { item: item, className: cn(buttonVariants({ size: 'icon-sm', color: 'ghost' }), 'text-fd-muted-foreground max-lg:hidden'), "aria-label": item.label, children: item.icon }, i))), props.i18n ? (_jsx(LanguageToggle, { className: "max-md:hidden", children: _jsx(Languages, { className: "size-4.5 text-fd-muted-foreground" }) })) : null, slot(props.themeSwitch, _jsx(ThemeToggle, { className: "ms-2 max-md:hidden", mode: props.themeSwitch?.mode ?? 'light-dark-system' })), sidebarCollapsible && navMode === 'top' ? (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
                                     color: 'secondary',
                                     size: 'icon-sm',
-                                }), 'ms-2 text-fd-muted-foreground rounded-full max-md:hidden'), children: _jsx(SidebarIcon, {}) })) : null] })] }), tabs.length > 0 ? (_jsx(LayoutTabs, { className: "px-6 border-b border-fd-foreground/10 h-10 max-lg:hidden", children: tabs.map((tab) => (_jsx(LayoutTab, { ...tab }, tab.url))) })) : null] }));
+                                }), 'ms-2 text-fd-muted-foreground rounded-full max-md:hidden'), children: _jsx(SidebarIcon, {}) })) : null] })] }), tabs.length > 0 ? (_jsx(LayoutTabs, { className: "px-6 border-b h-10 max-lg:hidden", children: tabs.map((tab) => (_jsx(LayoutTab, { ...tab }, tab.url))) })) : null] }));
 }
 function NavbarLinkItem({ item, ...props }) {
     if (item.type === 'menu') {

package/dist/mdx.d.ts

@@ -19,7 +19,7 @@ declare const defaultMdxComponents: {
     table: typeof Table;
     Callout: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "title" | "type" | "icon"> & {
         title?: import("react").ReactNode;
-        type?: "info" | "warn" | "error";
+        type?: "info" | "warn" | "error" | "success" | "warning";
         icon?: import("react").ReactNode;
     } & import("react").RefAttributes<HTMLDivElement>>;
 };

package/dist/page-client.js

@@ -21,7 +21,7 @@ export function TocPopoverTrigger({ items, ...props }) {
     const selected = useMemo(() => items.findIndex((item) => active === item.url.slice(1)), [items, active]);
     const path = useTreePath().at(-1);
     const showItem = selected !== -1 && !open;
-    return (_jsxs(CollapsibleTrigger, { ...props, className: cn('flex flex-row items-center text-sm text-fd-muted-foreground gap-2.5 px-4 py-2.5 text-start focus-visible:outline-none [&_svg]:shrink-0 [&_svg]:size-4 md:px-6', props.className), children: [_jsx(ProgressCircle, { value: (selected + 1) / items.length, max: 1, className: cn(open && 'text-fd-primary') }), _jsxs("span", { className: "grid flex-1 *:row-start-1 *:col-start-1", children: [_jsx("span", { className: cn('truncate transition-all', open && 'text-fd-foreground', showItem && 'opacity-0 -translate-y-full pointer-events-none'), children: path?.name ?? text.toc }), _jsx("span", { className: cn('truncate transition-all', !showItem && 'opacity-0 translate-y-full pointer-events-none'), children: items[selected]?.title })] }), _jsx(ChevronDown, { className: cn('opacity-50 transition-transform', open && 'rotate-180') })] }));
+    return (_jsxs(CollapsibleTrigger, { ...props, className: cn('flex flex-row items-center text-sm text-fd-muted-foreground gap-2.5 px-4 py-2.5 text-start focus-visible:outline-none [&_svg]:shrink-0 [&_svg]:size-4 md:px-6', props.className), children: [_jsx(ProgressCircle, { value: (selected + 1) / items.length, max: 1, className: cn(open && 'text-fd-primary') }), _jsxs("span", { className: "grid flex-1 *:row-start-1 *:col-start-1", children: [_jsx("span", { className: cn('truncate transition-all', open && 'text-fd-foreground', showItem && 'opacity-0 -translate-y-full pointer-events-none'), children: path?.name ?? text.toc }), _jsx("span", { className: cn('truncate transition-all', !showItem && 'opacity-0 translate-y-full pointer-events-none'), children: items[selected]?.title })] }), _jsx(ChevronDown, { className: cn('transition-transform', open && 'rotate-180') })] }));
 }
 function clamp(input, min, max) {
     if (input < min)

package/dist/page.d.ts

@@ -1,5 +1,5 @@
 import type { TableOfContents } from 'fumadocs-core/server';
-import { type ComponentProps, type HTMLAttributes, type ReactNode } from 'react';
+import { type ComponentProps, type ReactNode } from 'react';
 import { type AnchorProviderProps } from 'fumadocs-core/toc';
 import { type BreadcrumbProps, type FooterProps } from './page-client.js';
 import { type TOCProps } from './components/layout/toc.js';
@@ -61,8 +61,8 @@ export interface DocsPageProps {
     footer?: Partial<FooterOptions>;
     editOnGithub?: EditOnGitHubOptions;
     lastUpdate?: Date | string | number;
-    container?: HTMLAttributes<HTMLDivElement>;
-    article?: HTMLAttributes<HTMLElement>;
+    container?: ComponentProps<'div'>;
+    article?: ComponentProps<'article'>;
     children: ReactNode;
 }
 export declare function DocsPage({ toc, full, editOnGithub, tableOfContentPopover: { enabled: tocPopoverEnabled, component: tocPopoverReplace, ...tocPopoverOptions }, tableOfContent: { enabled: tocEnabled, component: tocReplace, ...tocOptions }, ...props }: DocsPageProps): import("react/jsx-runtime").JSX.Element;
@@ -70,14 +70,12 @@ export declare function EditOnGitHub(props: ComponentProps<'a'>): import("react/
 /**
  * Add typography styles
  */
-export declare const DocsBody: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const DocsDescription: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLParagraphElement>>;
-export declare const DocsTitle: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const DocsBody: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DocsDescription: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+export declare const DocsTitle: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
 /**
  * For separate MDX page
  */
-export declare function withArticle({ children }: {
-    children: ReactNode;
-}): ReactNode;
+export declare function withArticle(props: ComponentProps<'main'>): ReactNode;
 export {};
 //# sourceMappingURL=page.d.ts.map

package/dist/page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../src/page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAG7E,OAAO,EAEL,KAAK,eAAe,EAEpB,KAAK,WAAW,EAOjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAGL,KAAK,QAAQ,EAEd,MAAM,yBAAyB,CAAC;AAMjC,KAAK,qBAAqB,GAAG,IAAI,CAAC,QAAQ,EAAE,OAAO,GAAG,UAAU,CAAC,GAC/D,IAAI,CAAC,mBAAmB,EAAE,QAAQ,CAAC,GAAG;IACpC,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC5B,CAAC;AAEJ,KAAK,4BAA4B,GAAG,IAAI,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC;AAE1E,UAAU,mBACR,SAAQ,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IAEb;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAED,UAAU,iBAAkB,SAAQ,eAAe;IACjD,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;IAErB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,UAAU,aAAc,SAAQ,WAAW;IACzC,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,GAAG,CAAC,EAAE,eAAe,CAAC;IAEtB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,cAAc,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;IAChD,qBAAqB,CAAC,EAAE,OAAO,CAAC,4BAA4B,CAAC,CAAC;IAE9D;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAExC;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAEhC,YAAY,CAAC,EAAE,mBAAmB,CAAC;IACnC,UAAU,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;IAEpC,SAAS,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC3C,OAAO,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACtC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,QAAQ,CAAC,EACvB,GAAQ,EACR,IAAY,EACZ,YAAY,EACZ,qBAAqB,EAAE,EACrB,OAAO,EAAE,iBAAiB,EAC1B,SAAS,EAAE,iBAAiB,EAC5B,GAAG,iBAAiB,EAChB,EACN,cAAc,EAAE,EACd,OAAO,EAAE,UAAU,EACnB,SAAS,EAAE,UAAU,EACrB,GAAG,UAAU,EACT,EACN,GAAG,KAAK,EACT,EAAE,aAAa,2CA8Ff;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,2CAuBtD;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,2HAOnB,CAAC;AAIH,eAAO,MAAM,eAAe,uIAgB1B,CAAC;AAIH,eAAO,MAAM,SAAS,mIAapB,CAAC;AAIH;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,GAAG,SAAS,CAM5E"}
+{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../src/page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,KAAK,cAAc,EAAoB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9E,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAG7E,OAAO,EAEL,KAAK,eAAe,EAEpB,KAAK,WAAW,EAOjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAGL,KAAK,QAAQ,EAEd,MAAM,yBAAyB,CAAC;AAOjC,KAAK,qBAAqB,GAAG,IAAI,CAAC,QAAQ,EAAE,OAAO,GAAG,UAAU,CAAC,GAC/D,IAAI,CAAC,mBAAmB,EAAE,QAAQ,CAAC,GAAG;IACpC,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC5B,CAAC;AAEJ,KAAK,4BAA4B,GAAG,IAAI,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC;AAE1E,UAAU,mBACR,SAAQ,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IAEb;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAED,UAAU,iBAAkB,SAAQ,eAAe;IACjD,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;IAErB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,UAAU,aAAc,SAAQ,WAAW;IACzC,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,GAAG,CAAC,EAAE,eAAe,CAAC;IAEtB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,cAAc,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;IAChD,qBAAqB,CAAC,EAAE,OAAO,CAAC,4BAA4B,CAAC,CAAC;IAE9D;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAExC;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAEhC,YAAY,CAAC,EAAE,mBAAmB,CAAC;IACnC,UAAU,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;IAEpC,SAAS,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IAClC,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,QAAQ,CAAC,EACvB,GAAQ,EACR,IAAY,EACZ,YAAY,EACZ,qBAAqB,EAAE,EACrB,OAAO,EAAE,iBAAiB,EAC1B,SAAS,EAAE,iBAAiB,EAC5B,GAAG,iBAAiB,EAChB,EACN,cAAc,EAAE,EACd,OAAO,EAAE,UAAU,EACnB,SAAS,EAAE,UAAU,EACrB,GAAG,UAAU,EACT,EACN,GAAG,KAAK,EACT,EAAE,aAAa,2CA8Ff;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,2CAuBtD;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,2MAMpB,CAAC;AAIF,eAAO,MAAM,eAAe,6NAgB1B,CAAC;AAIH,eAAO,MAAM,SAAS,uNAYrB,CAAC;AAIF;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG,SAAS,CAMpE"}

package/dist/page.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, } from 'react';
+import { forwardRef, lazy } from 'react';
 import { AnchorProvider } from 'fumadocs-core/toc';
 import { slot } from './layouts/shared.js';
 import { cn } from './utils/cn.js';
@@ -8,7 +8,7 @@ import { Toc, TOCItems, TOCScrollArea, } from './components/layout/toc.js';
 import { buttonVariants } from './components/ui/button.js';
 import { Edit, Text } from './icons.js';
 import { I18nLabel } from './contexts/i18n.js';
-import ClerkTOCItems from './components/layout/toc-clerk.js';
+const ClerkTOCItems = lazy(() => import('./components/layout/toc-clerk.js'));
 export function DocsPage({ toc = [], full = false, editOnGithub, tableOfContentPopover: { enabled: tocPopoverEnabled, component: tocPopoverReplace, ...tocPopoverOptions } = {}, tableOfContent: { enabled: tocEnabled, component: tocReplace, ...tocOptions } = {}, ...props }) {
     const isTocRequired = toc.length > 0 ||
         tocOptions.footer !== undefined ||
@@ -21,7 +21,7 @@ export function DocsPage({ toc = [], full = false, editOnGithub, tableOfContentP
     return (_jsxs(AnchorProvider, { toc: toc, single: tocOptions.single, children: [_jsxs(PageBody, { ...props.container, className: cn(props.container?.className), style: {
                     '--fd-tocnav-height': !tocPopoverEnabled ? '0px' : undefined,
                     ...props.container?.style,
-                }, children: [slot({ enabled: tocPopoverEnabled, component: tocPopoverReplace }, _jsxs(TocPopover, { className: "h-10", children: [_jsx(TocPopoverTrigger, { className: "w-full", items: toc }), _jsxs(TocPopoverContent, { children: [tocPopoverOptions.header, _jsx(TOCScrollArea, { isMenu: true, children: tocPopoverOptions.style === 'clerk' ? (_jsx(ClerkTOCItems, { items: toc })) : (_jsx(TOCItems, { items: toc })) }), tocPopoverOptions.footer] })] }), {
+                }, children: [slot({ enabled: tocPopoverEnabled, component: tocPopoverReplace }, _jsxs(TocPopover, { className: "h-10", children: [_jsx(TocPopoverTrigger, { className: "w-full", items: toc }), _jsxs(TocPopoverContent, { children: [tocPopoverOptions.header, _jsx(TOCScrollArea, { className: "px-4 md:px-6", children: tocPopoverOptions.style === 'clerk' ? (_jsx(ClerkTOCItems, { items: toc })) : (_jsx(TOCItems, { items: toc })) }), tocPopoverOptions.footer] })] }), {
                         items: toc,
                         ...tocPopoverOptions,
                     }), _jsxs(PageArticle, { ...props.article, className: cn(full || !tocEnabled ? 'max-w-[1120px]' : 'max-w-[860px]', props.article?.className), children: [slot(props.breadcrumb, _jsx(Breadcrumb, { ...props.breadcrumb })), props.children, _jsx("div", { role: "none", className: "flex-1" }), _jsxs("div", { className: "flex flex-row flex-wrap items-center justify-between gap-4 empty:hidden", children: [editOnGithub && (_jsx(EditOnGitHub, { href: `https://github.com/${editOnGithub.owner}/${editOnGithub.repo}/blob/${editOnGithub.sha}/${editOnGithub.path.startsWith('/') ? editOnGithub.path.slice(1) : editOnGithub.path}` })), props.lastUpdate && (_jsx(LastUpdate, { date: new Date(props.lastUpdate) }))] }), slot(props.footer, _jsx(Footer, { items: props.footer?.items }))] })] }), slot({ enabled: tocEnabled, component: tocReplace }, _jsxs(Toc, { children: [tocOptions.header, _jsxs("h3", { className: "inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground", children: [_jsx(Text, { className: "size-4" }), _jsx(I18nLabel, { label: "toc" })] }), _jsx(TOCScrollArea, { children: tocOptions.style === 'clerk' ? (_jsx(ClerkTOCItems, { items: toc })) : (_jsx(TOCItems, { items: toc })) }), tocOptions.footer] }), {
@@ -55,6 +55,6 @@ DocsTitle.displayName = 'DocsTitle';
 /**
  * For separate MDX page
  */
-export function withArticle({ children }) {
-    return (_jsx("main", { className: "container py-12", children: _jsx("article", { className: "prose", children: children }) }));
+export function withArticle(props) {
+    return (_jsx("main", { ...props, className: cn('container py-12', props.className), children: _jsx("article", { className: "prose", children: props.children }) }));
 }

package/dist/style.css

@@ -9,6 +9,7 @@
       "Courier New", monospace;
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-orange-500: oklch(70.5% 0.213 47.604);
+    --color-green-500: oklch(72.3% 0.219 149.579);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-black: #000;
     --spacing: 0.25rem;
@@ -354,9 +355,6 @@
   .bottom-1\.5 {
     bottom: calc(var(--spacing) * 1.5);
   }
-  .left-\(--fd-nav-left\) {
-    left: var(--fd-nav-left);
-  }
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
@@ -409,9 +407,6 @@
   .-mx-1 {
     margin-inline: calc(var(--spacing) * -1);
   }
-  .-mx-2 {
-    margin-inline: calc(var(--spacing) * -2);
-  }
   .\!my-0 {
     margin-block: calc(var(--spacing) * 0) !important;
   }
@@ -442,6 +437,9 @@
   .ms-auto {
     margin-inline-start: auto;
   }
+  .ms-px {
+    margin-inline-start: 1px;
+  }
   .-me-\(--fd-sidebar-width\) {
     margin-inline-end: calc(var(--fd-sidebar-width) * -1);
   }
@@ -847,9 +845,6 @@
   .mr-auto {
     margin-right: auto;
   }
-  .-mb-1 {
-    margin-bottom: calc(var(--spacing) * -1);
-  }
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
@@ -889,6 +884,19 @@
   .table {
     display: table;
   }
+  .fd-scroll-container {
+    &::-webkit-scrollbar {
+      width: 5px;
+      height: 5px;
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 5px;
+      background: var(--color-fd-border);
+    }
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+  }
   .size-3 {
     width: calc(var(--spacing) * 3);
     height: calc(var(--spacing) * 3);
@@ -947,6 +955,9 @@
   .max-h-\[50vh\] {
     max-height: 50vh;
   }
+  .max-h-\[80svh\] {
+    max-height: 80svh;
+  }
   .max-h-\[400px\] {
     max-height: 400px;
   }
@@ -1001,6 +1012,9 @@
   .w-full {
     width: 100%;
   }
+  .w-max {
+    width: max-content;
+  }
   .w-px {
     width: 1px;
   }
@@ -1040,6 +1054,9 @@
   .min-w-\[220px\] {
     min-width: 220px;
   }
+  .min-w-full {
+    min-width: 100%;
+  }
   .flex-1 {
     flex: 1;
   }
@@ -1265,6 +1282,12 @@
       border-inline-start-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
     }
   }
+  .border-s-green-500\/50 {
+    border-inline-start-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-inline-start-color: color-mix(in oklab, var(--color-green-500) 50%, transparent);
+    }
+  }
   .border-s-orange-500\/50 {
     border-inline-start-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1343,6 +1366,9 @@
   .fill-blue-500 {
     fill: var(--color-blue-500);
   }
+  .fill-green-500 {
+    fill: var(--color-green-500);
+  }
   .fill-orange-500 {
     fill: var(--color-orange-500);
   }
@@ -1421,6 +1447,9 @@
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
+  .py-3\.5 {
+    padding-block: calc(var(--spacing) * 3.5);
+  }
   .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
@@ -1442,9 +1471,6 @@
   .ps-\[calc\(var\(--fd-layout-offset\)\+var\(--fd-sidebar-width\)\)\] {
     padding-inline-start: calc(var(--fd-layout-offset) + var(--fd-sidebar-width));
   }
-  .ps-px {
-    padding-inline-start: 1px;
-  }
   .pe-\(--fd-layout-offset\) {
     padding-inline-end: var(--fd-layout-offset);
   }
@@ -1457,8 +1483,8 @@
   .pt-0 {
     padding-top: calc(var(--spacing) * 0);
   }
-  .pt-4 {
-    padding-top: calc(var(--spacing) * 4);
+  .pt-1\.5 {
+    padding-top: calc(var(--spacing) * 1.5);
   }
   .pt-8 {
     padding-top: calc(var(--spacing) * 8);
@@ -1472,6 +1498,9 @@
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
+  .pb-4 {
+    padding-bottom: calc(var(--spacing) * 4);
+  }
   .pb-6 {
     padding-bottom: calc(var(--spacing) * 6);
   }
@@ -1587,9 +1616,6 @@
   .opacity-0 {
     opacity: 0%;
   }
-  .opacity-50 {
-    opacity: 50%;
-  }
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px 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);
@@ -1683,6 +1709,9 @@
   .\[--fd-tocnav-height\:36px\] {
     --fd-tocnav-height: 36px;
   }
+  .\[scrollbar-width\:none\] {
+    scrollbar-width: none;
+  }
   .\*\:col-start-1 {
     :is(& > *) {
       grid-column-start: 1;
@@ -1693,14 +1722,14 @@
       grid-row-start: 1;
     }
   }
-  .\*\:block {
+  .\*\:flex {
     :is(& > *) {
-      display: block;
+      display: flex;
     }
   }
-  .\*\:w-full {
+  .\*\:flex-col {
     :is(& > *) {
-      width: 100%;
+      flex-direction: column;
     }
   }
   .group-hover\:opacity-100 {
@@ -1872,6 +1901,11 @@
       display: none;
     }
   }
+  .data-\[empty\=true\]\:hidden {
+    &[data-empty="true"] {
+      display: none;
+    }
+  }
   .data-\[motion\=from-end\]\:animate-fd-enterFromRight {
     &[data-motion="from-end"] {
       animation: var(--animate-fd-enterFromRight);
@@ -2025,21 +2059,6 @@
       background-color: var(--color-fd-background);
     }
   }
-  .max-md\:pt-6 {
-    @media (width < 48rem) {
-      padding-top: calc(var(--spacing) * 6);
-    }
-  }
-  .max-md\:pb-4 {
-    @media (width < 48rem) {
-      padding-bottom: calc(var(--spacing) * 4);
-    }
-  }
-  .max-md\:pb-6 {
-    @media (width < 48rem) {
-      padding-bottom: calc(var(--spacing) * 6);
-    }
-  }
   .max-sm\:mt-2 {
     @media (width < 40rem) {
       margin-top: calc(var(--spacing) * 2);
@@ -2172,11 +2191,6 @@
       height: calc(var(--spacing) * 12);
     }
   }
-  .lg\:w-\[calc\(100\%-1rem\)\] {
-    @media (width >= 64rem) {
-      width: calc(100% - 1rem);
-    }
-  }
   .lg\:grid-cols-3 {
     @media (width >= 64rem) {
       grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -2208,6 +2222,11 @@
       --fd-nav-height: calc(var(--spacing) * 24);
     }
   }
+  .lg\:\[--fd-padding\:1rem\] {
+    @media (width >= 64rem) {
+      --fd-padding: 1rem;
+    }
+  }
   .lg\:\[--fd-sidebar-width\:286px\] {
     @media (width >= 64rem) {
       --fd-sidebar-width: 286px;
@@ -2270,10 +2289,14 @@
       background-color: var(--shiki-dark-bg);
     }
   }
-  .\[\&_svg\]\:\!size-4\.5 {
-    & svg {
-      width: calc(var(--spacing) * 4.5) !important;
-      height: calc(var(--spacing) * 4.5) !important;
+  .\[\&_\.line\]\:px-4 {
+    & .line {
+      padding-inline: calc(var(--spacing) * 4);
+    }
+  }
+  .\[\&_\.line\]\:pl-3 {
+    & .line {
+      padding-left: calc(var(--spacing) * 3);
     }
   }
   .\[\&_svg\]\:size-3\.5 {
@@ -2357,9 +2380,39 @@
   code span {
     color: var(--shiki-light);
   }
+  code .line {
+    line-height: 1.45em;
+    min-height: 1.45em;
+    position: relative;
+  }
+  &.has-focused code .line:not(.focused) {
+    filter: blur(2px);
+    transition: filter 200ms;
+  }
+  &.has-focused:hover code .line:not(.focused) {
+    filter: blur(0);
+  }
+  &[data-line-numbers] code .twoslash-meta-line {
+    margin-left: calc(var(--spacing) * 7);
+  }
+  &[data-line-numbers] code .line {
+    width: calc(100% - 7 * var(--spacing));
+    counter-increment: line;
+    margin-left: calc(var(--spacing) * 7);
+    &::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);
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, var(--color-fd-muted-foreground) 60%, transparent);
+      }
+    }
+  }
   code .diff::before {
     position: absolute;
-    left: 6px;
+    left: var(--spacing);
   }
   code .diff.remove {
     opacity: 0.7;
@@ -2376,35 +2429,28 @@
     content: '+';
     color: var(--color-fd-diff-add-symbol);
   }
-  code .diff {
-    width: calc(100% + 8 * var(--spacing));
-    position: relative;
-    margin-inline: calc(var(--spacing) * -4);
-    display: inline-block;
-    padding-inline: calc(var(--spacing) * 4);
-  }
   .highlighted {
-    width: calc(100% + 8 * var(--spacing));
-    margin-inline: calc(var(--spacing) * -4);
-    display: inline-block;
     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);
     }
-    padding-inline: calc(var(--spacing) * 4);
   }
   .highlighted-word {
-    padding: 1px 2px;
-    margin: -1px -3px;
-    border: 1px solid color-mix(in srgb, hsl(0, 0%, 9%) 50%, transparent);
+    padding: 1px;
+    margin-block: -1px;
+    border-radius: var(--radius-md);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: color-mix(in srgb, hsl(0, 0%, 9%) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      border: 1px solid color-mix(in oklab, var(--color-fd-primary) 50%, transparent);
+      border-color: color-mix(in oklab, var(--color-fd-primary) 30%, transparent);
     }
-    background-color: color-mix( in oklab, hsl(0, 0%, 9%) 10%, transparent );
+    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 );
+      background-color: color-mix(in oklab, var(--color-fd-primary) 10%, transparent);
     }
-    border-radius: 2px;
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
   }
 }
 .dark .shiki:not(.not-fumadocs-codeblock *) {

package/package.json

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