fumadocs-ui 15.6.4 → 15.6.6

package/css/preset.css

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

package/dist/components/dialog/search.js

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

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

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

package/dist/components/layout/sidebar.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronDown, ExternalLink } from '../../icons.js';
+import { ChevronDown, ExternalLink, X } from '../../icons.js';
 import { usePathname } from 'fumadocs-core/framework';
 import { createContext, Fragment, useContext, useMemo, useRef, useState, } from 'react';
 import Link from 'fumadocs-core/link';
@@ -14,7 +14,8 @@ import { cva } from 'class-variance-authority';
 import { useTreeContext, useTreePath } from '../../contexts/tree.js';
 import { useMediaQuery } from 'fumadocs-core/utils/use-media-query';
 import { Presence } from '@radix-ui/react-presence';
-const itemVariants = cva('relative flex flex-row items-center gap-2 rounded-xl p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] [&_svg]:size-4 [&_svg]:shrink-0', {
+import { buttonVariants } from '../../components/ui/button.js';
+const itemVariants = cva('relative flex flex-row items-center gap-2 rounded-xl p-2 ps-(--sidebar-item-offset) text-start text-fd-muted-foreground [overflow-wrap:anywhere] [&_svg]:size-4 [&_svg]:shrink-0', {
     variants: {
         active: {
             true: 'bg-fd-primary/10 text-fd-primary',
@@ -44,24 +45,28 @@ export function Sidebar({ defaultOpenLevel = 0, prefetch = true, collapsible = t
     });
     if (isMobile) {
         const state = open ? 'open' : 'closed';
-        return (_jsxs(Context.Provider, { value: context, children: [_jsx(Presence, { present: open, children: _jsx("div", { "data-state": state, className: "fixed z-40 inset-0 backdrop-blur-xs data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out", onClick: () => setOpen(false) }) }), _jsx(Presence, { present: open, children: ({ present }) => (_jsx("aside", { id: "nd-sidebar-mobile", ...props, "data-state": state, className: cn('fixed text-[15px] flex flex-col shadow-lg rounded-2xl border start-2 inset-y-2 w-[85%] max-w-[380px] z-40 bg-fd-background data-[state=open]:animate-fd-sidebar-in data-[state=closed]:animate-fd-sidebar-out', !present && 'invisible', props.className), children: props.children })) })] }));
+        return (_jsxs(Context.Provider, { value: context, children: [_jsx(Presence, { present: open, children: _jsx("div", { "data-state": state, className: "fixed z-40 inset-0 backdrop-blur-xs data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out", onClick: () => setOpen(false) }) }), _jsx(Presence, { present: open, children: ({ present }) => (_jsxs("aside", { id: "nd-sidebar-mobile", ...props, "data-state": state, className: cn('fixed text-[15px] flex flex-col shadow-lg border-s end-0 inset-y-0 w-[85%] max-w-[380px] z-40 bg-fd-background data-[state=open]:animate-fd-sidebar-in data-[state=closed]:animate-fd-sidebar-out', !present && 'invisible', props.className), children: [_jsx("button", { onClick: () => setOpen(false), className: cn(buttonVariants({
+                                    color: 'ghost',
+                                    size: 'icon-sm',
+                                    className: 'mt-3 mb-1 ms-auto me-4 text-fd-muted-foreground',
+                                })), children: _jsx(X, {}) }), props.children] })) })] }));
     }
     return (_jsx("aside", { id: "nd-sidebar", ...props, "data-collapsed": collapsed, className: cn('fixed start-0 flex flex-col items-end top-(--fd-sidebar-top) bottom-(--fd-sidebar-margin) z-20 bg-fd-card text-sm border-e max-md:hidden *:w-(--fd-sidebar-width)', collapsed && [
-            'rounded-xl border',
-            hover
-                ? 'z-50 translate-x-2 shadow-lg'
-                : 'opacity-0 -translate-x-(--fd-sidebar-offset) rtl:translate-x-(--fd-sidebar-offset)',
+            'rounded-xl border translate-x-(--fd-sidebar-offset) rtl:-translate-x-(--fd-sidebar-offset)',
+            hover ? 'z-50 shadow-lg' : 'opacity-0 ',
         ], props.className), style: {
             transition: ['top', 'opacity', 'translate', 'width']
                 .map((v) => `${v} ease 250ms`)
                 .join(', '),
             ...props.style,
-            '--fd-sidebar-offset': 'calc(100% - 16px)',
+            '--fd-sidebar-offset': hover
+                ? 'calc(var(--spacing) * 2)'
+                : 'calc(16px - 100%)',
             '--fd-sidebar-margin': collapsed ? '0.5rem' : '0px',
+            '--fd-sidebar-top': `calc(var(--fd-banner-height) + var(--fd-nav-height) + var(--fd-sidebar-margin))`,
             width: collapsed
                 ? 'var(--fd-sidebar-width)'
                 : 'calc(var(--fd-sidebar-width) + var(--fd-layout-offset))',
-            '--fd-sidebar-top': `calc(var(--fd-banner-height) + var(--fd-nav-height) + var(--fd-sidebar-margin))`,
         }, onPointerEnter: (e) => {
             if (!collapsible ||
                 !collapsed ||
@@ -83,31 +88,25 @@ export function Sidebar({ defaultOpenLevel = 0, prefetch = true, collapsible = t
         }, children: _jsx(Context.Provider, { value: context, children: props.children }) }));
 }
 export function SidebarHeader(props) {
-    return (_jsx("div", { ...props, className: cn('flex flex-col gap-3 p-4 pb-2', props.className), children: props.children }));
+    return (_jsx("div", { ...props, className: cn('flex flex-col gap-3 px-4 pb-2 md:pt-4', props.className), children: props.children }));
 }
 export function SidebarFooter(props) {
     return (_jsx("div", { ...props, className: cn('flex flex-col border-t px-4 py-3', props.className), children: props.children }));
 }
 export function SidebarViewport(props) {
     return (_jsx(ScrollArea, { ...props, className: cn('h-full', props.className), children: _jsx(ScrollViewport, { className: "p-4", style: {
+                '--sidebar-item-offset': 'calc(var(--spacing) * 2)',
                 maskImage: 'linear-gradient(to bottom, transparent, white 12px, white calc(100% - 12px), transparent)',
             }, children: props.children }) }));
 }
 export function SidebarSeparator(props) {
-    const { level } = useInternalContext();
-    return (_jsx("p", { ...props, className: cn('inline-flex items-center gap-2 mb-1.5 px-2 empty:mb-0 [&_svg]:size-4 [&_svg]:shrink-0', props.className), style: {
-            paddingInlineStart: getOffset(level),
-            ...props.style,
-        }, children: props.children }));
+    return (_jsx("p", { ...props, className: cn('inline-flex items-center gap-2 mb-1.5 px-2 ps-(--sidebar-item-offset) empty:mb-0 [&_svg]:size-4 [&_svg]:shrink-0', props.className), children: props.children }));
 }
 export function SidebarItem({ icon, ...props }) {
     const pathname = usePathname();
     const active = props.href !== undefined && isActive(props.href, pathname, false);
-    const { prefetch, level } = useInternalContext();
-    return (_jsxs(Link, { ...props, "data-active": active, className: cn(itemVariants({ active }), props.className), prefetch: prefetch, style: {
-            paddingInlineStart: getOffset(level),
-            ...props.style,
-        }, children: [_jsx(Border, { level: level, active: active }), icon ?? (props.external ? _jsx(ExternalLink, {}) : null), props.children] }));
+    const { prefetch } = useInternalContext();
+    return (_jsxs(Link, { ...props, "data-active": active, className: cn(itemVariants({ active }), props.className), prefetch: prefetch, children: [icon ?? (props.external ? _jsx(ExternalLink, {}) : null), props.children] }));
 }
 export function SidebarFolder({ defaultOpen = false, ...props }) {
     const [open, setOpen] = useState(defaultOpen);
@@ -118,16 +117,12 @@ export function SidebarFolder({ defaultOpen = false, ...props }) {
     return (_jsx(Collapsible, { open: open, onOpenChange: setOpen, ...props, children: _jsx(FolderContext.Provider, { value: useMemo(() => ({ open, setOpen }), [open]), children: props.children }) }));
 }
 export function SidebarFolderTrigger({ className, ...props }) {
-    const { level } = useInternalContext();
     const { open } = useFolderContext();
-    return (_jsxs(CollapsibleTrigger, { className: cn(itemVariants({ active: false }), 'w-full', className), ...props, style: {
-            paddingInlineStart: getOffset(level),
-            ...props.style,
-        }, children: [_jsx(Border, { level: level }), props.children, _jsx(ChevronDown, { "data-icon": true, className: cn('ms-auto transition-transform', !open && '-rotate-90') })] }));
+    return (_jsxs(CollapsibleTrigger, { className: cn(itemVariants({ active: false }), 'w-full', className), ...props, children: [props.children, _jsx(ChevronDown, { "data-icon": true, className: cn('ms-auto transition-transform', !open && '-rotate-90') })] }));
 }
 export function SidebarFolderLink(props) {
     const { open, setOpen } = useFolderContext();
-    const { prefetch, level } = useInternalContext();
+    const { prefetch } = useInternalContext();
     const pathname = usePathname();
     const active = props.href !== undefined && isActive(props.href, pathname, false);
     return (_jsxs(Link, { ...props, "data-active": active, className: cn(itemVariants({ active }), 'w-full', props.className), onClick: (e) => {
@@ -139,17 +134,19 @@ export function SidebarFolderLink(props) {
             else {
                 setOpen(active ? !open : true);
             }
-        }, prefetch: prefetch, style: {
-            paddingInlineStart: getOffset(level),
-            ...props.style,
-        }, children: [_jsx(Border, { level: level, active: active }), props.children, _jsx(ChevronDown, { "data-icon": true, className: cn('ms-auto transition-transform', !open && '-rotate-90') })] }));
+        }, prefetch: prefetch, children: [props.children, _jsx(ChevronDown, { "data-icon": true, className: cn('ms-auto transition-transform', !open && '-rotate-90') })] }));
 }
 export function SidebarFolderContent(props) {
     const ctx = useInternalContext();
-    return (_jsx(CollapsibleContent, { ...props, className: cn('relative', props.className), children: _jsxs(Context.Provider, { value: useMemo(() => ({
-                ...ctx,
-                level: ctx.level + 1,
-            }), [ctx]), children: [ctx.level === 1 && (_jsx("div", { className: "absolute w-px inset-y-1 bg-fd-border start-2.5" })), props.children] }) }));
+    const level = ctx.level + 1;
+    return (_jsxs(CollapsibleContent, { ...props, className: cn('relative', level === 2 &&
+            "**:data-[active=true]:before:content-[''] **:data-[active=true]:before:bg-fd-primary **:data-[active=true]:before:absolute **:data-[active=true]:before:w-px **:data-[active=true]:before:inset-y-2.5 **:data-[active=true]:before:start-2.5", props.className), style: {
+            '--sidebar-item-offset': `calc(var(--spacing) * ${level > 1 ? level * 3 : 2})`,
+            ...props.style,
+        }, children: [level === 2 && (_jsx("div", { className: "absolute w-px inset-y-1 bg-fd-border start-2.5" })), _jsx(Context.Provider, { value: useMemo(() => ({
+                    ...ctx,
+                    level,
+                }), [ctx, level]), children: props.children })] }));
 }
 export function SidebarCollapseTrigger(props) {
     const { collapsed, setCollapsed } = useSidebar();
@@ -202,11 +199,3 @@ function PageTreeFolder({ item, ...props }) {
     const path = useTreePath();
     return (_jsxs(SidebarFolder, { defaultOpen: (item.defaultOpen ?? defaultOpenLevel >= level) || path.includes(item), children: [item.index ? (_jsxs(SidebarFolderLink, { href: item.index.url, external: item.index.external, ...props, children: [item.icon, item.name] })) : (_jsxs(SidebarFolderTrigger, { ...props, children: [item.icon, item.name] })), _jsx(SidebarFolderContent, { children: props.children })] }));
 }
-function getOffset(level) {
-    return `calc(var(--spacing) * ${level > 1 ? level * 3 : 2})`;
-}
-function Border({ level, active }) {
-    if (level <= 1)
-        return null;
-    return (_jsx("div", { className: cn('absolute w-px inset-y-3 z-2 start-2.5 md:inset-y-2', active && 'bg-fd-primary') }));
-}

package/dist/components/type-table.js

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

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

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

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

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

package/dist/layouts/docs-client.js

@@ -30,9 +30,7 @@ export function NavbarSidebarTrigger({ className, ...props }) {
 }
 export function CollapsibleControl() {
     const { collapsed } = useSidebar();
-    if (!collapsed)
-        return;
-    return (_jsxs("div", { className: "fixed flex shadow-lg animate-fd-fade-in rounded-xl p-0.5 border bg-fd-muted text-fd-muted-foreground z-10 xl:start-4 max-xl:end-4", style: {
+    return (_jsxs("div", { className: cn('fixed flex shadow-lg transition-opacity rounded-xl p-0.5 border bg-fd-muted text-fd-muted-foreground z-10 max-md:hidden xl:start-4 max-xl:end-4', !collapsed && 'pointer-events-none opacity-0'), style: {
             top: 'calc(var(--fd-banner-height) + var(--fd-tocnav-height) + var(--spacing) * 4)',
         }, children: [_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
                     color: 'ghost',

package/dist/layouts/docs.js

@@ -23,7 +23,7 @@ export function DocsLayout({ nav: { transparentMode, ...nav } = {}, sidebar: { t
         'md:[--fd-sidebar-width:268px] lg:[--fd-sidebar-width:286px]', 'xl:[--fd-toc-width:286px]', !nav.component && nav.enabled !== false
         ? '[--fd-nav-height:56px] md:[--fd-nav-height:0px]'
         : undefined);
-    const sidebar = sidebarComponent ?? (_jsxs(_Fragment, { children: [sidebarCollapsible ? _jsx(CollapsibleControl, {}) : null, _jsxs(Sidebar, { ...sidebarProps, collapsible: sidebarCollapsible, children: [_jsx(HideIfEmpty, { children: _jsxs(SidebarHeader, { className: "data-[empty=true]:hidden", children: [_jsxs("div", { className: "flex max-md:hidden", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex text-[15px] items-center gap-2.5 font-medium me-auto", children: nav.title }), nav.children, sidebarCollapsible && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
+    const sidebar = sidebarComponent ?? (_jsxs(_Fragment, { children: [sidebarCollapsible && _jsx(CollapsibleControl, {}), _jsxs(Sidebar, { ...sidebarProps, collapsible: sidebarCollapsible, children: [_jsx(HideIfEmpty, { children: _jsxs(SidebarHeader, { className: "data-[empty=true]:hidden", children: [_jsxs("div", { className: "flex max-md:hidden", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex text-[15px] items-center gap-2.5 font-medium me-auto", children: nav.title }), nav.children, sidebarCollapsible && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
                                                 color: 'ghost',
                                                 size: 'icon-sm',
                                                 className: 'mb-auto text-fd-muted-foreground max-md:hidden',

package/dist/style.css

@@ -55,6 +55,7 @@
     --color-fd-warning: oklch(76.9% 0.188 70.08);
     --color-fd-error: oklch(63.7% 0.237 25.331);
     --color-fd-success: oklch(72.3% 0.219 149.579);
+    --fd-sidebar-mobile-offset: 100%;
     --spacing-fd-container: 1400px;
     --fd-page-width: 1200px;
     --fd-sidebar-width: 0px;
@@ -312,24 +313,18 @@
   .inset-y-1 {
     inset-block: calc(var(--spacing) * 1);
   }
-  .inset-y-2 {
-    inset-block: calc(var(--spacing) * 2);
-  }
-  .inset-y-3 {
-    inset-block: calc(var(--spacing) * 3);
-  }
   .start-0 {
     inset-inline-start: calc(var(--spacing) * 0);
   }
-  .start-2 {
-    inset-inline-start: calc(var(--spacing) * 2);
-  }
   .start-2\.5 {
     inset-inline-start: calc(var(--spacing) * 2.5);
   }
   .start-4\.5 {
     inset-inline-start: calc(var(--spacing) * 4.5);
   }
+  .end-0 {
+    inset-inline-end: calc(var(--spacing) * 0);
+  }
   .end-2 {
     inset-inline-end: calc(var(--spacing) * 2);
   }
@@ -481,6 +476,9 @@
   .me-2 {
     margin-inline-end: calc(var(--spacing) * 2);
   }
+  .me-4 {
+    margin-inline-end: calc(var(--spacing) * 4);
+  }
   .me-auto {
     margin-inline-end: auto;
   }
@@ -859,6 +857,9 @@
   .mt-\(--fd-top\) {
     margin-top: var(--fd-top);
   }
+  .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
   .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
@@ -1116,16 +1117,12 @@
   .origin-\[top_center\] {
     transform-origin: top center;
   }
-  .-translate-x-\(--fd-sidebar-offset\) {
-    --tw-translate-x: calc(var(--fd-sidebar-offset) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  .translate-x-2 {
-    --tw-translate-x: calc(var(--spacing) * 2);
+  .translate-x-\(--fd-sidebar-offset\) {
+    --tw-translate-x: var(--fd-sidebar-offset);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
   .-translate-y-1\/2 {
@@ -1149,9 +1146,6 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
-  .animate-fd-fade-in {
-    animation: var(--animate-fd-fade-in);
-  }
   .animate-pulse {
     animation: var(--animate-pulse);
   }
@@ -1466,6 +1460,9 @@
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
+  .ps-\(--sidebar-item-offset\) {
+    padding-inline-start: var(--sidebar-item-offset);
+  }
   .ps-1 {
     padding-inline-start: calc(var(--spacing) * 1);
   }
@@ -1979,6 +1976,67 @@
       color: var(--color-fd-primary);
     }
   }
+  .\*\*\:data-\[active\=true\]\:before\:absolute {
+    :is(& *) {
+      &[data-active="true"] {
+        &::before {
+          content: var(--tw-content);
+          position: absolute;
+        }
+      }
+    }
+  }
+  .\*\*\:data-\[active\=true\]\:before\:inset-y-2\.5 {
+    :is(& *) {
+      &[data-active="true"] {
+        &::before {
+          content: var(--tw-content);
+          inset-block: calc(var(--spacing) * 2.5);
+        }
+      }
+    }
+  }
+  .\*\*\:data-\[active\=true\]\:before\:start-2\.5 {
+    :is(& *) {
+      &[data-active="true"] {
+        &::before {
+          content: var(--tw-content);
+          inset-inline-start: calc(var(--spacing) * 2.5);
+        }
+      }
+    }
+  }
+  .\*\*\:data-\[active\=true\]\:before\:w-px {
+    :is(& *) {
+      &[data-active="true"] {
+        &::before {
+          content: var(--tw-content);
+          width: 1px;
+        }
+      }
+    }
+  }
+  .\*\*\:data-\[active\=true\]\:before\:bg-fd-primary {
+    :is(& *) {
+      &[data-active="true"] {
+        &::before {
+          content: var(--tw-content);
+          background-color: var(--color-fd-primary);
+        }
+      }
+    }
+  }
+  .\*\*\:data-\[active\=true\]\:before\:content-\[\'\'\] {
+    :is(& *) {
+      &[data-active="true"] {
+        &::before {
+          content: var(--tw-content);
+          --tw-content: '';
+          content: var(--tw-content);
+        }
+      }
+    }
+  }
   .data-\[collapsed\=false\]\:hidden {
     &[data-collapsed="false"] {
       display: none;
@@ -2240,11 +2298,6 @@
       position: sticky;
     }
   }
-  .md\:inset-y-2 {
-    @media (width >= 48rem) {
-      inset-block: calc(var(--spacing) * 2);
-    }
-  }
   .md\:top-\[calc\(50\%-250px\)\] {
     @media (width >= 48rem) {
       top: calc(50% - 250px);
@@ -2301,6 +2354,11 @@
       padding-inline: calc(var(--spacing) * 6);
     }
   }
+  .md\:pt-4 {
+    @media (width >= 48rem) {
+      padding-top: calc(var(--spacing) * 4);
+    }
+  }
   .md\:\[--fd-nav-height\:0px\] {
     @media (width >= 48rem) {
       --fd-nav-height: 0px;
@@ -2381,9 +2439,9 @@
       grid-column: 1 / -1;
     }
   }
-  .rtl\:translate-x-\(--fd-sidebar-offset\) {
+  .rtl\:-translate-x-\(--fd-sidebar-offset\) {
     &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-      --tw-translate-x: var(--fd-sidebar-offset);
+      --tw-translate-x: calc(var(--fd-sidebar-offset) * -1);
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
@@ -2567,6 +2625,9 @@
     color: var(--shiki-dark);
   }
 }
+[dir='rtl'] {
+  --fd-sidebar-mobile-offset: -100%;
+}
 @layer base {
   *, ::after, ::before, ::backdrop, ::file-selector-button {
     border-color: var(--color-fd-border, currentColor);
@@ -2811,6 +2872,11 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-content {
+  syntax: "*";
+  initial-value: "";
+  inherits: false;
+}
 @property --tw-scale-x {
   syntax: "*";
   inherits: false;
@@ -2831,6 +2897,16 @@
     opacity: 0.5;
   }
 }
+@keyframes fd-sidebar-in {
+  from {
+    transform: translateX(var(--fd-sidebar-mobile-offset));
+  }
+}
+@keyframes fd-sidebar-out {
+  to {
+    transform: translateX(var(--fd-sidebar-mobile-offset));
+  }
+}
 @keyframes fd-collapsible-down {
   from {
     height: 0;
@@ -2953,16 +3029,6 @@
     transform: translateX(-200px);
   }
 }
-@keyframes fd-sidebar-in {
-  from {
-    transform: translateX(-100%);
-  }
-}
-@keyframes fd-sidebar-out {
-  to {
-    transform: translateX(-100%);
-  }
-}
 @keyframes fd-nav-menu-in {
   from {
     opacity: 0;
@@ -3035,6 +3101,7 @@
       --tw-backdrop-saturate: initial;
       --tw-backdrop-sepia: initial;
       --tw-duration: initial;
+      --tw-content: "";
       --tw-scale-x: 1;
       --tw-scale-y: 1;
       --tw-scale-z: 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "15.6.4",
+  "version": "15.6.6",
   "description": "The framework for building a documentation website in Next.js",
   "keywords": [
     "NextJs",
@@ -86,23 +86,23 @@
     "lodash.merge": "^4.6.2",
     "next-themes": "^0.4.6",
     "postcss-selector-parser": "^7.1.0",
-    "react-medium-image-zoom": "^5.2.14",
+    "react-medium-image-zoom": "^5.3.0",
     "scroll-into-view-if-needed": "^3.1.0",
     "tailwind-merge": "^3.3.1",
-    "fumadocs-core": "15.6.4"
+    "fumadocs-core": "15.6.6"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^15.4.1",
+    "@next/eslint-plugin-next": "^15.4.4",
     "@tailwindcss/cli": "^4.1.11",
     "@types/lodash.merge": "^4.6.9",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
-    "next": "15.4.1",
+    "next": "15.4.4",
     "tailwindcss": "^4.1.11",
     "tsc-alias": "^1.8.16",
-    "eslint-config-custom": "0.0.0",
     "@fumadocs/cli": "0.2.1",
-    "fumadocs-core": "15.6.4",
+    "eslint-config-custom": "0.0.0",
+    "fumadocs-core": "15.6.6",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {