fumadocs-ui 15.3.1 → 15.3.3

package/css/preset.css

@@ -20,14 +20,16 @@
   --animate-fd-fade-in: fd-fade-in 300ms ease;
   --animate-fd-fade-out: fd-fade-out 300ms ease;
 
-  --animate-fd-dialog-in: fd-dialog-in 200ms cubic-bezier(0.32, 0.72, 0, 1);
-  --animate-fd-dialog-out: fd-dialog-out 300ms cubic-bezier(0.32, 0.72, 0, 1);
+  --animate-fd-dialog-in: fd-dialog-in 240ms cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-fd-dialog-out: fd-dialog-out 240ms cubic-bezier(0.16, 1, 0.3, 1);
 
   --animate-fd-popover-in: fd-popover-in 150ms ease;
   --animate-fd-popover-out: fd-popover-out 150ms ease;
 
-  --animate-fd-collapsible-down: fd-collapsible-down 150ms ease-out;
-  --animate-fd-collapsible-up: fd-collapsible-up 150ms ease-out;
+  --animate-fd-collapsible-down: fd-collapsible-down 150ms
+    cubic-bezier(0.45, 0, 0.55, 1);
+  --animate-fd-collapsible-up: fd-collapsible-up 150ms
+    cubic-bezier(0.45, 0, 0.55, 1);
 
   --animate-fd-accordion-down: fd-accordion-down 200ms ease-out;
   --animate-fd-accordion-up: fd-accordion-up 200ms ease-out;
@@ -96,7 +98,7 @@
       transform: scale(1);
     }
     to {
-      transform: scale(1.06);
+      transform: scale(1.04);
       opacity: 0;
     }
   }
@@ -227,6 +229,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

@@ -4,8 +4,18 @@
   }
 
   code .line {
-    min-height: 1em;
-    @apply relative inline-block w-full;
+    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 {
@@ -48,25 +58,13 @@
     @apply text-fd-diff-add-symbol;
   }
 
-  code .diff {
-    @apply relative;
-  }
-
   .highlighted {
     @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,7 @@ export type CodeBlockProps = HTMLAttributes<HTMLElement> & {
      * @defaultValue false
      */
     keepBackground?: boolean;
-    viewportProps?: ScrollAreaViewportProps;
+    viewportProps?: HTMLAttributes<HTMLElement>;
     /**
      * show line numbers
      */
@@ -49,7 +48,7 @@ export declare const CodeBlock: import("react").ForwardRefExoticComponent<HTMLAt
      * @defaultValue false
      */
     keepBackground?: boolean;
-    viewportProps?: ScrollAreaViewportProps;
+    viewportProps?: HTMLAttributes<HTMLElement>;
     /**
      * show line numbers
      */

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;IAExC;;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,uBAAuB;IAEvC;;OAEG;0BACmB,OAAO;IAE7B;;OAEG;gCACyB,MAAM;+CA4GnC,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,11 +3,10 @@ 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('size-full *: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, children, ...props }, ref) => {
@@ -22,16 +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('text-[13px] py-3.5 [&_.line]:px-4 max-h-[600px]', 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 }), _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/dialog/search-algolia.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search-algolia.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/search-algolia.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,cAAc,EACpB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAEjD,OAAO,EAEL,KAAK,WAAW,EAEhB,KAAK,OAAO,EACb,MAAM,UAAU,CAAC;AAElB,MAAM,WAAW,wBAAyB,SAAQ,WAAW;IAC3D,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAC/B,aAAa,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;IAC9C,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IAEjB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,KAAK,EACL,aAAa,EACb,IAAI,EACJ,UAAU,EACV,WAAmB,EACnB,UAAkB,EAClB,GAAG,KAAK,EACT,EAAE,wBAAwB,GAAG,SAAS,CA0CtC"}
+{"version":3,"file":"search-algolia.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/search-algolia.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EAEpB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAEjD,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,OAAO,EAGb,MAAM,UAAU,CAAC;AAElB,MAAM,WAAW,wBAAyB,SAAQ,WAAW;IAC3D,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAC/B,aAAa,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;IAC9C,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IAEjB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,KAAK,EACL,aAAa,EACb,IAAI,EACJ,UAAU,EACV,WAAmB,EACnB,UAAkB,EAClB,GAAG,KAAK,EACT,EAAE,wBAAwB,GAAG,SAAS,CA0CtC"}

package/dist/components/dialog/search-algolia.js

@@ -1,9 +1,9 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useDocsSearch, } from 'fumadocs-core/search/client';
 import { useState } from 'react';
 import { useOnChange } from 'fumadocs-core/utils/use-on-change';
-import { SearchDialog, TagsList, } from './search.js';
+import { SearchDialog, TagsList, TagsListItem, } from './search.js';
 export default function AlgoliaSearchDialog({ index, searchOptions, tags, defaultTag, showAlgolia = false, allowClear = false, ...props }) {
     const [tag, setTag] = useState(defaultTag);
     const { search, setSearch, query } = useDocsSearch({
@@ -14,7 +14,7 @@ export default function AlgoliaSearchDialog({ index, searchOptions, tags, defaul
     useOnChange(defaultTag, (v) => {
         setTag(v);
     });
-    return (_jsx(SearchDialog, { search: search, onSearchChange: setSearch, results: query.data ?? [], isLoading: query.isLoading, ...props, footer: tags ? (_jsxs(_Fragment, { children: [_jsx(TagsList, { tag: tag, onTagChange: setTag, items: tags, allowClear: allowClear, children: showAlgolia ? _jsx(AlgoliaTitle, {}) : null }), props.footer] })) : (props.footer) }));
+    return (_jsx(SearchDialog, { search: search, onSearchChange: setSearch, results: query.data ?? [], isLoading: query.isLoading, ...props, footer: _jsxs(_Fragment, { children: [tags ? (_jsxs(TagsList, { tag: tag, onTagChange: setTag, allowClear: allowClear, children: [tags.map((tag) => (_jsx(TagsListItem, { value: tag.value, children: tag.name }, tag.value))), showAlgolia && _jsx(AlgoliaTitle, {})] })) : (showAlgolia && _jsx(AlgoliaTitle, {})), props.footer] }) }));
 }
 function AlgoliaTitle() {
     return (_jsx("a", { href: "https://algolia.com", rel: "noreferrer noopener", className: "ms-auto text-xs text-fd-muted-foreground", children: "Search powered by Algolia" }));

package/dist/components/dialog/search-default.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search-default.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/search-default.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAGjD,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,OAAO,EAEb,MAAM,UAAU,CAAC;AAElB,MAAM,WAAW,wBAAyB,SAAQ,WAAW;IAC3D;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAE1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IAEjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,UAAU,EACV,IAAI,EACJ,GAAG,EACH,OAAO,EACP,IAAc,EACd,UAAkB,EAClB,GAAG,KAAK,EACT,EAAE,wBAAwB,GAAG,SAAS,CA8CtC"}
+{"version":3,"file":"search-default.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/search-default.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAGjD,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,OAAO,EAGb,MAAM,UAAU,CAAC;AAElB,MAAM,WAAW,wBAAyB,SAAQ,WAAW;IAC3D;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAE1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IAEjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,UAAU,EACV,IAAI,EACJ,GAAG,EACH,OAAO,EACP,IAAc,EACd,UAAkB,EAClB,GAAG,KAAK,EACT,EAAE,wBAAwB,GAAG,SAAS,CA6CtC"}

package/dist/components/dialog/search-default.js

@@ -4,7 +4,7 @@ import { useDocsSearch } from 'fumadocs-core/search/client';
 import { useState } from 'react';
 import { useOnChange } from 'fumadocs-core/utils/use-on-change';
 import { useI18n } from '../../contexts/i18n.js';
-import { SearchDialog, TagsList, } from './search.js';
+import { SearchDialog, TagsList, TagsListItem, } from './search.js';
 export default function DefaultSearchDialog({ defaultTag, tags, api, delayMs, type = 'fetch', allowClear = false, ...props }) {
     const { locale } = useI18n();
     const [tag, setTag] = useState(defaultTag);
@@ -20,5 +20,5 @@ export default function DefaultSearchDialog({ defaultTag, tags, api, delayMs, ty
     useOnChange(defaultTag, (v) => {
         setTag(v);
     });
-    return (_jsx(SearchDialog, { search: search, onSearchChange: setSearch, isLoading: query.isLoading, results: query.data ?? [], ...props, footer: tags ? (_jsxs(_Fragment, { children: [_jsx(TagsList, { tag: tag, onTagChange: setTag, items: tags, allowClear: allowClear }), props.footer] })) : (props.footer) }));
+    return (_jsx(SearchDialog, { search: search, onSearchChange: setSearch, isLoading: query.isLoading, results: query.data ?? [], ...props, footer: _jsxs(_Fragment, { children: [tags && (_jsx(TagsList, { tag: tag, onTagChange: setTag, allowClear: allowClear, children: tags.map((tag) => (_jsx(TagsListItem, { value: tag.value, children: tag.name }, tag.value))) })), props.footer] }) }));
 }

package/dist/components/dialog/search-orama.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search-orama.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/search-orama.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAEjD,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,OAAO,EAEb,MAAM,UAAU,CAAC;AAElB,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,MAAM,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IACpC,aAAa,CAAC,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IAC5C,KAAK,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAEnC,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IAEjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,MAAM,EACN,aAAa,EACb,IAAI,EACJ,UAAU,EACV,SAAiB,EACjB,UAAkB,EAClB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,sBAAsB,GAAG,SAAS,CA2CpC"}
+{"version":3,"file":"search-orama.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/search-orama.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,iBAAiB,EAEvB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAEjD,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,OAAO,EAGb,MAAM,UAAU,CAAC;AAElB,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,MAAM,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IACpC,aAAa,CAAC,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IAC5C,KAAK,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAEnC,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IAEjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,MAAM,EACN,aAAa,EACb,IAAI,EACJ,UAAU,EACV,SAAiB,EACjB,UAAkB,EAClB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,sBAAsB,GAAG,SAAS,CA2CpC"}

package/dist/components/dialog/search-orama.js

@@ -1,9 +1,9 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useDocsSearch, } from 'fumadocs-core/search/client';
 import { useState } from 'react';
 import { useOnChange } from 'fumadocs-core/utils/use-on-change';
-import { SearchDialog, TagsList, } from './search.js';
+import { SearchDialog, TagsList, TagsListItem, } from './search.js';
 /**
  * Orama Cloud integration
  */
@@ -18,7 +18,7 @@ export default function OramaSearchDialog({ client, searchOptions, tags, default
     useOnChange(defaultTag, (v) => {
         setTag(v);
     });
-    return (_jsx(SearchDialog, { search: search, onSearchChange: setSearch, results: query.data ?? [], isLoading: query.isLoading, ...props, footer: tags ? (_jsxs(_Fragment, { children: [_jsx(TagsList, { tag: tag, onTagChange: setTag, items: tags, allowClear: allowClear, children: showOrama ? _jsx(Label, {}) : null }), props.footer] })) : (props.footer) }));
+    return (_jsx(SearchDialog, { search: search, onSearchChange: setSearch, results: query.data ?? [], isLoading: query.isLoading, ...props, footer: _jsxs(_Fragment, { children: [tags ? (_jsxs(TagsList, { tag: tag, onTagChange: setTag, allowClear: allowClear, children: [tags.map((tag) => (_jsx(TagsListItem, { value: tag.value, children: tag.name }, tag.value))), showOrama && _jsx(Label, {})] })) : (showOrama && _jsx(Label, {})), props.footer] }) }));
 }
 function Label() {
     return (_jsx("a", { href: "https://orama.com", rel: "noreferrer noopener", className: "ms-auto text-xs text-fd-muted-foreground", children: "Search powered by Orama" }));

package/dist/components/dialog/search.d.ts

@@ -1,10 +1,14 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
+import { type ComponentProps, type ReactNode } from 'react';
 import type { SortedResult } from 'fumadocs-core/server';
 export type SearchLink = [name: string, href: string];
 type ReactSortedResult = Omit<SortedResult, 'content'> & {
     external?: boolean;
     content: ReactNode;
 };
+export interface TagItem {
+    name: string;
+    value: string;
+}
 export interface SharedProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
@@ -22,17 +26,14 @@ interface SearchDialogProps extends SharedProps {
     footer?: ReactNode;
 }
 export declare function SearchDialog({ open, onOpenChange, footer, links, search, onSearchChange, isLoading, ...props }: SearchDialogProps): import("react/jsx-runtime").JSX.Element;
-export interface TagItem {
-    name: string;
-    value: string | undefined;
-    props?: HTMLAttributes<HTMLButtonElement>;
-}
-export interface TagsListProps extends HTMLAttributes<HTMLDivElement> {
+export interface TagsListProps extends ComponentProps<'div'> {
     tag?: string;
     onTagChange: (tag: string | undefined) => void;
     allowClear?: boolean;
-    items: TagItem[];
 }
-export declare function TagsList({ tag, onTagChange, items, allowClear, ...props }: TagsListProps): import("react/jsx-runtime").JSX.Element;
+export declare function TagsList({ tag, onTagChange, allowClear, ...props }: TagsListProps): import("react/jsx-runtime").JSX.Element;
+export declare function TagsListItem({ value, className, ...props }: ComponentProps<'button'> & {
+    value: string;
+}): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=search.d.ts.map

package/dist/components/dialog/search.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/search.tsx"],"names":[],"mappings":"AASA,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAWf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAKzD,MAAM,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;AAEtD,KAAK,iBAAiB,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,GAAG;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEtC;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;CACtB;AAED,UAAU,iBAAkB,SAAQ,WAAW;IAC7C,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,iBAAiB,EAAE,GAAG,OAAO,CAAC;IAEvC,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,KAAU,EACV,MAAM,EACN,cAAc,EACd,SAAS,EACT,GAAG,KAAK,EACT,EAAE,iBAAiB,2CAyDnB;AA4JD,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAE1B,KAAK,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC,CAAC;CAC3C;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IACnE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,KAAK,EAAE,OAAO,EAAE,CAAC;CAClB;AAaD,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EACH,WAAW,EACX,KAAK,EACL,UAAU,EACV,GAAG,KAAK,EACT,EAAE,aAAa,2CAkCf"}
+{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/search.tsx"],"names":[],"mappings":"AASA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAWf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAKzD,MAAM,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;AAEtD,KAAK,iBAAiB,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,GAAG;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEtC;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;CACtB;AAED,UAAU,iBAAkB,SAAQ,WAAW;IAC7C,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,iBAAiB,EAAE,GAAG,OAAO,CAAC;IAEvC,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,KAAU,EACV,MAAM,EACN,cAAc,EACd,SAAS,EACT,GAAG,KAAK,EACT,EAAE,iBAAiB,2CA6DnB;AAoJD,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC1D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAmBD,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EACH,WAAW,EACX,UAAkB,EAClB,GAAG,KAAK,EACT,EAAE,aAAa,2CAoBf;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;CACf,2CAmBA"}

package/dist/components/dialog/search.js

@@ -9,9 +9,10 @@ import { buttonVariants } from '../../components/ui/button.js';
 import { Dialog, DialogContent, DialogOverlay, DialogTitle, } from '@radix-ui/react-dialog';
 import { cva } from 'class-variance-authority';
 import { useEffectEvent } from 'fumadocs-core/utils/use-effect-event';
-import { useRouter } from 'fumadocs-core/framework';
+import { createContext, useRouter } from 'fumadocs-core/framework';
 export function SearchDialog({ open, onOpenChange, footer, links = [], search, onSearchChange, isLoading, ...props }) {
     const { text } = useI18n();
+    const [active, setActive] = useState();
     const defaultItems = useMemo(() => links.map(([name, link]) => ({
         type: 'page',
         id: name,
@@ -20,25 +21,21 @@ export function SearchDialog({ open, onOpenChange, footer, links = [], search, o
     })), [links]);
     return (_jsxs(Dialog, { open: open, onOpenChange: onOpenChange, children: [_jsx(DialogOverlay, { className: "fixed inset-0 z-50 bg-black/30 backdrop-blur-sm data-[state=closed]:animate-fd-fade-out data-[state=open]:animate-fd-fade-in" }), _jsxs(DialogContent, { "aria-describedby": undefined, className: "fixed left-1/2 top-[10vh] z-50 w-[98vw] max-w-screen-sm -translate-x-1/2 rounded-lg border bg-fd-popover text-fd-popover-foreground shadow-lg data-[state=closed]:animate-fd-dialog-out data-[state=open]:animate-fd-dialog-in", children: [_jsx(DialogTitle, { className: "hidden", children: text.search }), _jsxs("div", { className: "flex flex-row items-center gap-2 px-3", children: [_jsx(LoadingIndicator, { isLoading: isLoading ?? false }), _jsx("input", { value: search, onChange: (e) => {
                                     onSearchChange(e.target.value);
+                                    setActive(undefined);
                                 }, placeholder: text.search, className: "w-0 flex-1 bg-transparent py-3 text-base placeholder:text-fd-muted-foreground focus-visible:outline-none" }), _jsx("button", { type: "button", "aria-label": "Close Search", onClick: () => onOpenChange(false), className: cn(buttonVariants({
                                     color: 'outline',
                                     className: 'text-xs p-1.5',
-                                })), children: "Esc" })] }), props.results !== 'empty' || defaultItems.length > 0 ? (_jsx(SearchResults, { items: props.results === 'empty' ? defaultItems : props.results, onSelect: () => onOpenChange(false) })) : null, footer ? (_jsx("div", { className: "mt-auto flex flex-col border-t p-3", children: footer })) : null] })] }));
+                                })), children: "Esc" })] }), props.results !== 'empty' || defaultItems.length > 0 ? (_jsx(SearchResults, { active: active, onActiveChange: setActive, items: props.results === 'empty' ? defaultItems : props.results, onSelect: () => onOpenChange(false) })) : null, _jsx("div", { className: "mt-auto flex flex-col border-t p-3 empty:hidden", children: footer })] })] }));
 }
 const icons = {
     text: _jsx(Text, { className: "size-4 text-fd-muted-foreground" }),
     heading: _jsx(Hash, { className: "size-4 text-fd-muted-foreground" }),
     page: _jsx(FileText, { className: "size-4 text-fd-muted-foreground" }),
 };
-function SearchResults({ items, onSelect, ...props }) {
-    const [active, setActive] = useState();
+function SearchResults({ items, active = items.at(0)?.id, onActiveChange, onSelect, ...props }) {
     const { text } = useI18n();
     const router = useRouter();
     const sidebar = useSidebar();
-    if (items.length > 0 &&
-        (!active || items.every((item) => item.id !== active))) {
-        setActive(items[0].id);
-    }
     const onOpen = ({ external, url }) => {
         if (external)
             window.open(url, '_blank')?.focus();
@@ -49,12 +46,14 @@ function SearchResults({ items, onSelect, ...props }) {
     };
     const onKey = useEffectEvent((e) => {
         if (e.key === 'ArrowDown' || e.key == 'ArrowUp') {
-            setActive((cur) => {
-                const idx = items.findIndex((item) => item.id === cur);
-                if (idx === -1)
-                    return items.at(0)?.id;
-                return items.at((e.key === 'ArrowDown' ? idx + 1 : idx - 1) % items.length)?.id;
-            });
+            const idx = items.findIndex((item) => item.id === active);
+            if (idx === -1) {
+                onActiveChange(items.at(0)?.id);
+            }
+            else {
+                onActiveChange(items.at((e.key === 'ArrowDown' ? idx + 1 : idx - 1) % items.length)
+                    ?.id);
+            }
             e.preventDefault();
         }
         if (e.key === 'Enter') {
@@ -70,21 +69,21 @@ function SearchResults({ items, onSelect, ...props }) {
             window.removeEventListener('keydown', onKey);
         };
     }, [onKey]);
-    return (_jsxs("div", { ...props, className: cn('flex max-h-[460px] flex-col overflow-y-auto border-t p-2', props.className), children: [items.length === 0 ? (_jsx("div", { className: "py-12 text-center text-sm", children: text.searchNoResult })) : null, items.map((item) => (_jsxs(CommandItem, { value: item.id, active: active, onActiveChange: setActive, onClick: () => {
+    return (_jsxs("div", { ...props, className: cn('flex max-h-[460px] flex-col overflow-y-auto border-t p-2', props.className), children: [items.length === 0 ? (_jsx("div", { className: "py-12 text-center text-sm", children: text.searchNoResult })) : null, items.map((item) => (_jsxs(CommandItem, { active: active === item.id, onPointerMove: () => onActiveChange(item.id), onClick: () => {
                     onOpen(item);
                 }, children: [item.type !== 'page' ? (_jsx("div", { role: "none", className: "ms-2 h-full min-h-10 w-px bg-fd-border" })) : null, icons[item.type], _jsx("p", { className: "w-0 flex-1 truncate", children: item.content })] }, item.id)))] }));
 }
 function LoadingIndicator({ isLoading }) {
     return (_jsxs("div", { className: "relative size-4", children: [_jsx(LoaderCircle, { className: cn('absolute size-full animate-spin text-fd-primary transition-opacity', !isLoading && 'opacity-0') }), _jsx(SearchIcon, { className: cn('absolute size-full text-fd-muted-foreground transition-opacity', isLoading && 'opacity-0') })] }));
 }
-function CommandItem({ active, onActiveChange, value, ...props }) {
+function CommandItem({ active = false, ...props }) {
     return (_jsx("button", { ref: useCallback((element) => {
-            if (active === value && element) {
+            if (active && element) {
                 element.scrollIntoView({
                     block: 'nearest',
                 });
             }
-        }, [active, value]), type: "button", "aria-selected": active === value, onPointerMove: () => onActiveChange(value), ...props, className: cn('flex min-h-10 select-none flex-row items-center gap-2.5 rounded-lg px-2 text-start text-sm', active === value && 'bg-fd-accent text-fd-accent-foreground', props.className), children: props.children }));
+        }, [active]), type: "button", "aria-selected": active, ...props, className: cn('flex min-h-10 select-none flex-row items-center gap-2.5 rounded-lg px-2 text-start text-sm', active && 'bg-fd-accent text-fd-accent-foreground', props.className), children: props.children }));
 }
 const itemVariants = cva('rounded-md border px-2 py-0.5 text-xs font-medium text-fd-muted-foreground transition-colors', {
     variants: {
@@ -93,13 +92,17 @@ const itemVariants = cva('rounded-md border px-2 py-0.5 text-xs font-medium text
         },
     },
 });
-export function TagsList({ tag, onTagChange, items, allowClear, ...props }) {
-    return (_jsxs("div", { ...props, className: cn('flex flex-row items-center gap-1 flex-wrap', props.className), children: [items.map((item) => (_jsx("button", { type: "button", "data-active": tag === item.value, className: cn(itemVariants({ active: tag === item.value }), item.props?.className), onClick: () => {
-                    if (tag === item.value && allowClear) {
-                        onTagChange(undefined);
-                    }
-                    else {
-                        onTagChange(item.value);
-                    }
-                }, tabIndex: -1, ...item.props, children: item.name }, item.value))), props.children] }));
+const TagsListContext = createContext('TagsList');
+export function TagsList({ tag, onTagChange, allowClear = false, ...props }) {
+    return (_jsx("div", { ...props, className: cn('flex items-center gap-1 flex-wrap', props.className), children: _jsx(TagsListContext.Provider, { value: useMemo(() => ({
+                value: tag,
+                onValueChange: onTagChange,
+                allowClear,
+            }), [allowClear, onTagChange, tag]), children: props.children }) }));
+}
+export function TagsListItem({ value, className, ...props }) {
+    const ctx = TagsListContext.use();
+    return (_jsx("button", { type: "button", "data-active": value === ctx.value, className: cn(itemVariants({ active: value === ctx.value, className })), onClick: () => {
+            ctx.onValueChange(ctx.value === value && ctx.allowClear ? undefined : value);
+        }, tabIndex: -1, ...props, children: props.children }));
 }

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

@@ -35,7 +35,7 @@ export declare function SidebarItem({ icon, ...props }: LinkProps & {
 export declare function SidebarFolder({ defaultOpen, ...props }: ComponentProps<'div'> & {
     defaultOpen?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function SidebarFolderTrigger(props: CollapsibleTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarFolderTrigger({ className, ...props }: CollapsibleTriggerProps): import("react/jsx-runtime").JSX.Element;
 export declare function SidebarFolderLink(props: LinkProps): import("react/jsx-runtime").JSX.Element;
 export declare function SidebarFolderContent(props: CollapsibleContentProps): import("react/jsx-runtime").JSX.Element;
 export declare function SidebarCollapseTrigger(props: ComponentProps<'button'>): 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,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,EACnC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAqBzB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,2CAsCjD;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,uBAAuB,2CAqBlE;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAgBrE;AAgBD,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAA;KAAE,CAAC,CAAC;IAClC,MAAM,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IAC1E,SAAS,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;CAC7C;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACzC,2CAuDA"}

package/dist/components/layout/sidebar.js

@@ -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 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: {
@@ -113,10 +113,10 @@ export function SidebarFolder({ defaultOpen = false, ...props }) {
     });
     return (_jsx(Collapsible, { open: open, onOpenChange: setOpen, ...props, children: _jsx(FolderContext.Provider, { value: useMemo(() => ({ open, setOpen }), [open]), children: props.children }) }));
 }
-export function SidebarFolderTrigger(props) {
+export function SidebarFolderTrigger({ className, ...props }) {
     const { level } = useInternalContext();
     const { open } = useFolderContext();
-    return (_jsxs(CollapsibleTrigger, { ...props, className: cn(itemVariants({ active: false }), 'w-full'), style: {
+    return (_jsxs(CollapsibleTrigger, { className: cn(itemVariants({ active: false }), 'w-full', className), ...props, style: {
             paddingInlineStart: getOffset(level),
             ...props.style,
         }, children: [_jsx(Border, { level: level }), props.children, _jsx(ChevronDown, { "data-icon": true, className: cn('ms-auto transition-transform', !open && '-rotate-90') })] }));
@@ -127,12 +127,13 @@ export function SidebarFolderLink(props) {
     const pathname = usePathname();
     const active = props.href !== undefined && isActive(props.href, pathname, false);
     return (_jsxs(Link, { ...props, "data-active": active, className: cn(itemVariants({ active }), 'w-full', props.className), onClick: (e) => {
-            if (e.target.hasAttribute('data-icon')) {
-                setOpen((prev) => !prev);
+            if (e.target instanceof HTMLElement &&
+                e.target.hasAttribute('data-icon')) {
+                setOpen(!open);
                 e.preventDefault();
             }
             else {
-                setOpen((prev) => !active || !prev);
+                setOpen(active ? !open : true);
             }
         }, prefetch: prefetch, style: {
             paddingInlineStart: getOffset(level),

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);