fumadocs-ui 15.5.4 → 15.5.5

package/css/neutral.css

@@ -21,7 +21,7 @@
   --color-fd-background: hsl(0, 0%, 7.04%);
   --color-fd-foreground: hsl(0, 0%, 92%);
   --color-fd-muted: hsl(0, 0%, 12.9%);
-  --color-fd-muted-foreground: hsl(0, 0%, 60.9%);
+  --color-fd-muted-foreground: hsla(0, 0%, 70%, 0.8);
   --color-fd-popover: hsl(0, 0%, 10.6%);
   --color-fd-popover-foreground: hsl(0, 0%, 86.9%);
   --color-fd-card: hsl(0, 0%, 9.8%);

package/dist/components/banner.d.ts

@@ -1,5 +1,6 @@
 import { type HTMLAttributes } from 'react';
-export declare function Banner({ id, variant, changeLayout, height, ...props }: HTMLAttributes<HTMLDivElement> & {
+type BannerVariant = 'rainbow' | 'normal';
+export declare function Banner({ id, variant, changeLayout, height, rainbowColors, ...props }: HTMLAttributes<HTMLDivElement> & {
     /**
      * @defaultValue 3rem
      */
@@ -7,7 +8,11 @@ export declare function Banner({ id, variant, changeLayout, height, ...props }:
     /**
      * @defaultValue 'normal'
      */
-    variant?: 'rainbow' | 'normal';
+    variant?: BannerVariant;
+    /**
+     * For rainbow variant only, customise the colors
+     */
+    rainbowColors?: string[];
     /**
      * Change Fumadocs layout styles
      *
@@ -15,4 +20,5 @@ export declare function Banner({ id, variant, changeLayout, height, ...props }:
      */
     changeLayout?: boolean;
 }): import("react/jsx-runtime").JSX.Element | null;
+export {};
 //# sourceMappingURL=banner.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../src/components/banner.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAuB,MAAM,OAAO,CAAC;AAKjE,wBAAgB,MAAM,CAAC,EACrB,EAAE,EACF,OAAkB,EAClB,YAAmB,EACnB,MAAe,EACf,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAE/B;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,kDAkEA"}
+{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../src/components/banner.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAuB,MAAM,OAAO,CAAC;AAKjE,KAAK,aAAa,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE1C,wBAAgB,MAAM,CAAC,EACrB,EAAE,EACF,OAAkB,EAClB,YAAmB,EACnB,MAAe,EACf,aAKC,EACD,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IAEzB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,kDAuEA"}

package/dist/components/banner.js

@@ -4,7 +4,12 @@ import { useEffect, useState } from 'react';
 import { X } from '../icons.js';
 import { cn } from '../utils/cn.js';
 import { buttonVariants } from '../components/ui/button.js';
-export function Banner({ id, variant = 'normal', changeLayout = true, height = '3rem', ...props }) {
+export function Banner({ id, variant = 'normal', changeLayout = true, height = '3rem', rainbowColors = [
+    'rgba(0,149,255,0.56)',
+    'rgba(231,77,255,0.77)',
+    'rgba(255,0,0,0.73)',
+    'rgba(131,255,166,0.66)',
+], ...props }) {
     const [open, setOpen] = useState(true);
     const globalKey = id ? `nd-banner-${id}` : null;
     useEffect(() => {
@@ -13,47 +18,37 @@ export function Banner({ id, variant = 'normal', changeLayout = true, height = '
     }, [globalKey]);
     if (!open)
         return null;
-    return (_jsxs("div", { id: id, ...props, className: cn('sticky top-0 z-40 flex flex-row items-center justify-center bg-fd-secondary px-4 text-center text-sm font-medium', variant === 'rainbow' && 'bg-fd-background', !open && 'hidden', props.className), style: {
+    return (_jsxs("div", { id: id, ...props, className: cn('sticky top-0 z-40 flex flex-row items-center justify-center px-4 text-center text-sm font-medium', variant === 'normal' && 'bg-fd-secondary', variant === 'rainbow' && 'bg-fd-background', !open && 'hidden', props.className), style: {
             height,
         }, children: [changeLayout && open ? (_jsx("style", { children: globalKey
                     ? `:root:not(.${globalKey}) { --fd-banner-height: ${height}; }`
                     : `:root { --fd-banner-height: ${height}; }` })) : null, globalKey ? (_jsx("style", { children: `.${globalKey} #${id} { display: none; }` })) : null, globalKey ? (_jsx("script", { dangerouslySetInnerHTML: {
                     __html: `if (localStorage.getItem('${globalKey}') === 'true') document.documentElement.classList.add('${globalKey}');`,
-                } })) : null, variant === 'rainbow' ? rainbowLayer : null, props.children, id ? (_jsx("button", { type: "button", "aria-label": "Close Banner", onClick: () => {
+                } })) : null, variant === 'rainbow'
+                ? flow({
+                    colors: rainbowColors,
+                })
+                : null, props.children, id ? (_jsx("button", { type: "button", "aria-label": "Close Banner", onClick: () => {
                     setOpen(false);
                     if (globalKey)
                         localStorage.setItem(globalKey, 'true');
                 }, className: cn(buttonVariants({
                     color: 'ghost',
-                    className: 'absolute end-2 top-1/2 -translate-y-1/2 text-fd-muted-foreground',
-                    size: 'icon',
+                    className: 'absolute end-2 top-1/2 -translate-y-1/2 text-fd-muted-foreground/50',
+                    size: 'icon-sm',
                 })), children: _jsx(X, {}) })) : null] }));
 }
 const maskImage = 'linear-gradient(to bottom,white,transparent), radial-gradient(circle at top center, white, transparent)';
-const rainbowLayer = (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute inset-0 z-[-1]", style: {
-                maskImage,
-                maskComposite: 'intersect',
-                animation: 'fd-moving-banner 16s linear infinite',
-                '--start': 'rgba(0,87,255,0.5)',
-                '--mid': 'rgba(255,0,166,0.77)',
-                '--end': 'rgba(255,77,0,0.4)',
-                '--via': 'rgba(164,255,68,0.4)',
-                animationDirection: 'reverse',
-                backgroundImage: 'repeating-linear-gradient(60deg, var(--end), var(--start) 2%, var(--start) 5%, transparent 8%, transparent 14%, var(--via) 18%, var(--via) 22%, var(--mid) 28%, var(--mid) 30%, var(--via) 34%, var(--via) 36%, transparent, var(--end) calc(50% - 12px))',
-                backgroundSize: '200% 100%',
-                mixBlendMode: 'difference',
-            } }), _jsx("div", { className: "absolute inset-0 z-[-1]", style: {
-                maskImage,
-                maskComposite: 'intersect',
-                animation: 'fd-moving-banner 20s linear infinite',
-                '--start': 'rgba(255,120,120,0.5)',
-                '--mid': 'rgba(36,188,255,0.4)',
-                '--end': 'rgba(64,0,255,0.51)',
-                '--via': 'rgba(255,89,0,0.56)',
-                backgroundImage: 'repeating-linear-gradient(45deg, var(--end), var(--start) 4%, var(--start) 8%, transparent 9%, transparent 14%, var(--mid) 16%, var(--mid) 20%, transparent, var(--via) 36%, var(--via) 40%, transparent 42%, var(--end) 46%, var(--end) calc(50% - 16.8px))',
-                backgroundSize: '200% 100%',
-                mixBlendMode: 'color-dodge',
-            } }), _jsx("style", { children: `@keyframes fd-moving-banner {
+function flow({ colors }) {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute inset-0 z-[-1]", style: {
+                    maskImage,
+                    maskComposite: 'intersect',
+                    animation: 'fd-moving-banner 20s linear infinite',
+                    backgroundImage: `repeating-linear-gradient(70deg, ${[...colors, colors[0]].map((color, i) => `${color} ${(i * 50) / colors.length}%`).join(', ')})`,
+                    backgroundSize: '200% 100%',
+                    filter: 'saturate(2)',
+                } }), _jsx("style", { children: `@keyframes fd-moving-banner {
             from { background-position: 0% 0;  }
             to { background-position: 100% 0;  }
          }` })] }));
+}

package/dist/layouts/docs/page-client.js

@@ -150,7 +150,7 @@ export function PageBreadcrumb({ includeRoot = false, includeSeparator, includeP
     }, [includePage, includeRoot, includeSeparator, path, root]);
     if (items.length === 0)
         return null;
-    return (_jsx("div", { ...props, className: cn('flex items-center gap-1.5 text-[15px] text-fd-muted-foreground', props.className), children: items.map((item, i) => {
+    return (_jsx("div", { ...props, className: cn('flex items-center gap-1.5 text-sm text-fd-muted-foreground', props.className), children: items.map((item, i) => {
             const className = cn('truncate', i === items.length - 1 && 'text-fd-primary font-medium');
             return (_jsxs(Fragment, { children: [i !== 0 && _jsx("span", { className: "text-fd-foreground/30", children: "/" }), item.url ? (_jsx(Link, { href: item.url, className: cn(className, 'transition-opacity hover:opacity-80'), children: item.name })) : (_jsx("span", { className: className, children: item.name }))] }, i));
         }) }));

package/dist/layouts/docs/page.js

@@ -21,6 +21,6 @@ export function PageTOCPopoverItems({ variant = 'normal', ...props }) {
     return (_jsx(TOCScrollArea, { ...props, children: variant === 'clerk' ? _jsx(ClerkTOCItems, {}) : _jsx(TOCItems, {}) }));
 }
 export function PageArticle(props) {
-    return (_jsx("article", { ...props, className: cn('flex min-w-0 w-full flex-col gap-6 px-4 pt-8 md:px-6 md:mx-auto xl:pt-12 xl:px-12', props.className), children: props.children }));
+    return (_jsx("article", { ...props, className: cn('flex min-w-0 w-full flex-col gap-4 px-4 pt-8 md:px-6 md:mx-auto xl:pt-12 xl:px-12', props.className), children: props.children }));
 }
 export { PageRoot, PageBreadcrumb, PageFooter, PageLastUpdate, PageTOC, PageTOCPopover, PageTOCPopoverTrigger, PageTOCPopoverContent, };

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

@@ -1 +1 @@
-{"version":3,"file":"navbar.d.ts","sourceRoot":"","sources":["../../../src/layouts/home/navbar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAY,MAAM,OAAO,CAAC;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAW/C,OAAO,KAAK,EACV,0BAA0B,EAC1B,0BAA0B,EAC3B,MAAM,iCAAiC,CAAC;AAOzC,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CA0BlD;AAED,eAAO,MAAM,UAAU,yNAAqB,CAAC;AAE7C,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,0BAA0B,2CAYlE;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,0BAA0B,2CASlE;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,SAAS,2CAc9C;AAED,QAAA,MAAM,YAAY;;8EAiBhB,CAAC;AAEH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAO,EACP,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,YAAY,CAAC,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,2CAczE"}
+{"version":3,"file":"navbar.d.ts","sourceRoot":"","sources":["../../../src/layouts/home/navbar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAY,MAAM,OAAO,CAAC;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAW/C,OAAO,KAAK,EACV,0BAA0B,EAC1B,0BAA0B,EAC3B,MAAM,iCAAiC,CAAC;AAOzC,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CA8BlD;AAED,eAAO,MAAM,UAAU,yNAAqB,CAAC;AAE7C,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,0BAA0B,2CAYlE;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,0BAA0B,2CASlE;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,SAAS,2CAc9C;AAED,QAAA,MAAM,YAAY;;8EAiBhB,CAAC;AAEH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAO,EACP,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,YAAY,CAAC,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,2CAczE"}

package/dist/layouts/home/navbar.js

@@ -12,7 +12,9 @@ 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 top-(--fd-banner-height) z-40 inset-x-0 backdrop-blur-lg border-b transition-colors *:mx-auto *:max-w-fd-container', value.length > 0 ? 'shadow-lg' : 'shadow-sm', (!isTransparent || value.length > 0) && 'bg-fd-background/80', props.className), children: [_jsx(NavigationMenuList, { className: "flex h-14 w-full items-center px-4", asChild: true, children: _jsx("nav", { children: props.children }) }), _jsx(NavigationMenuViewport, { className: "text-fd-popover-foreground" })] }) }));
+    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 left-0 backdrop-blur-lg border-b transition-colors *:mx-auto *:max-w-fd-container', value.length > 0 && 'max-lg:shadow-lg max-lg:rounded-b-2xl', (!isTransparent || value.length > 0) && 'bg-fd-background/80', props.className), style: {
+                right: 'var(--removed-body-scroll-bar-size, 0px)',
+            }, children: [_jsx(NavigationMenuList, { className: "flex h-14 w-full items-center px-4", asChild: true, children: _jsx("nav", { children: props.children }) }), _jsx(NavigationMenuViewport, {})] }) }));
 }
 export const NavbarMenu = NavigationMenuItem;
 export function NavbarMenuContent(props) {

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

@@ -5,6 +5,7 @@ export declare function Navbar({ mode, ...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 LayoutTabs(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-export declare function LayoutTab(item: Option): import("react/jsx-runtime").JSX.Element;
+export declare function LayoutTabs({ options, ...props }: ComponentProps<'div'> & {
+    options: Option[];
+}): 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,cAAc,EAAE,MAAM,OAAO,CAAC;AAQ5C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAE9D,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAE,IAAI,EAAE,KAAK,GAAG,MAAM,CAAA;CAAE,2CAoBrD;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,2CAkB1B;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAYtD;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,2CAqBrC"}
+{"version":3,"file":"notebook-client.d.ts","sourceRoot":"","sources":["../../src/layouts/notebook-client.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAW,MAAM,OAAO,CAAC;AAQrD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAE9D,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAE,IAAI,EAAE,KAAK,GAAG,MAAM,CAAA;CAAE,2CAoBrD;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,2CAkB1B;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IACzB,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB,2CA+BA"}

package/dist/layouts/notebook-client.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from '../utils/cn.js';
+import { useMemo } from 'react';
 import { useSidebar } from '../contexts/sidebar.js';
 import { useNav } from '../contexts/layout.js';
 import { buttonVariants } from '../components/ui/button.js';
@@ -32,16 +33,19 @@ export function NavbarSidebarTrigger({ className, ...props }) {
             className,
         })), onClick: () => setOpen((prev) => !prev), children: _jsx(SidebarIcon, {}) }));
 }
-export function LayoutTabs(props) {
-    return (_jsx("div", { ...props, className: cn('flex flex-row items-end gap-6 overflow-auto', props.className), children: props.children }));
-}
-export function LayoutTab(item) {
-    const { closeOnRedirect } = useSidebar();
+export function LayoutTabs({ options, ...props }) {
     const pathname = usePathname();
-    const selected = item.urls
-        ? item.urls.has(pathname.endsWith('/') ? pathname.slice(0, -1) : pathname)
-        : isActive(item.url, pathname, true);
-    return (_jsx(Link, { className: cn('inline-flex items-center py-2.5 border-b border-transparent gap-2 text-fd-muted-foreground text-sm text-nowrap', selected && 'text-fd-foreground font-medium border-fd-primary'), href: item.url, onClick: () => {
-            closeOnRedirect.current = false;
-        }, children: item.title }));
+    const selected = useMemo(() => {
+        const url = pathname.endsWith('/') ? pathname.slice(0, -1) : pathname;
+        return options.findLast((option) => {
+            if (option.urls) {
+                return option.urls.has(url);
+            }
+            return isActive(option.url, pathname, true);
+        });
+    }, [options, pathname]);
+    return (_jsx("div", { ...props, className: cn('flex flex-row items-end gap-6 overflow-auto', props.className), children: options.map((option) => (_jsx(LayoutTab, { selected: selected === option, option: option }, option.url))) }));
+}
+function LayoutTab({ option, selected = false, }) {
+    return (_jsx(Link, { className: cn('inline-flex items-center py-2.5 border-b border-transparent gap-2 text-fd-muted-foreground text-sm text-nowrap', selected && 'text-fd-foreground font-medium border-fd-primary'), href: option.url, children: option.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,EAAY,MAAM,kBAAkB,CAAC;AAqBlE,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAIL,MAAM,EACN,oBAAoB,EACrB,MAAM,mBAAmB,CAAC;AAU3B,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAE/B,GAAG,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,GAAG;QAC7B,IAAI,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;KACvB,CAAC;IAEF,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IAElC,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAiJhD;AAsLD,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,EAAY,MAAM,kBAAkB,CAAC;AAqBlE,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAGL,MAAM,EACN,oBAAoB,EACrB,MAAM,mBAAmB,CAAC;AAU3B,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAE/B,GAAG,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,GAAG;QAC7B,IAAI,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;KACvB,CAAC;IAEF,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IAElC,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAiJhD;AA8LD,OAAO,EAAE,MAAM,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/layouts/notebook.js

@@ -11,7 +11,7 @@ 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, SidebarLinkItem, } from '../layouts/docs/shared.js';
-import { LayoutBody, LayoutTab, LayoutTabs, Navbar, NavbarSidebarTrigger, } from './notebook-client.js';
+import { LayoutBody, LayoutTabs, Navbar, NavbarSidebarTrigger, } from './notebook-client.js';
 import { NavProvider } from '../contexts/layout.js';
 import { RootToggle } from '../components/layout/root-toggle.js';
 import Link from 'fumadocs-core/link';
@@ -29,7 +29,7 @@ export function DocsLayout(props) {
                     className: 'mt-px mb-auto text-fd-muted-foreground',
                 })), children: _jsx(SidebarIcon, {}) }))] }));
     return (_jsx(TreeContextProvider, { tree: props.tree, children: _jsx(NavProvider, { transparentMode: transparentMode, children: _jsxs(LayoutBody, { ...props.containerProps, className: cn(variables, props.containerProps?.className), children: [_jsxs(Sidebar, { ...sidebar, className: cn(navMode === 'top'
-                            ? 'md:bg-transparent'
+                            ? 'border-e-0 md:bg-transparent'
                             : 'md:[--fd-nav-height:0px]', sidebar.className), children: [_jsx(HideIfEmpty, { children: _jsxs(SidebarHeader, { children: [navMode === 'auto' && sidebarHeader, nav.children, sidebarBanner, tabMode === 'sidebar' && tabs.length > 0 ? (_jsx(RootToggle, { className: "mb-2", options: tabs })) : null, tabMode === 'navbar' && tabs.length > 0 && (_jsx(RootToggle, { options: tabs, className: "lg:hidden" }))] }) }), _jsxs(SidebarViewport, { children: [links
                                         .filter((item) => item.type !== 'icon')
                                         .map((item, i) => (_jsx(SidebarLinkItem, { item: item, className: cn('lg:hidden', i === links.length - 1 && 'mb-4') }, i))), _jsx(SidebarPageTree, { components: sidebarComponents })] }), _jsx(HideIfEmpty, { children: _jsxs(SidebarFooter, { className: "flex flex-row items-center justify-end", children: [_jsx("div", { className: "flex items-center flex-1 empty:hidden lg:hidden", children: links
@@ -49,7 +49,7 @@ function DocsNavbar({ links, tabs, searchToggle = {}, themeSwitch = {}, ...props
                                     color: 'ghost',
                                     size: 'icon-sm',
                                 }), 'text-fd-muted-foreground -ms-1.5 me-2 data-[collapsed=false]:hidden max-md:hidden'), children: _jsx(SidebarIcon, {}) })) : null, nav] }), searchToggle.enabled !== false &&
-                        (searchToggle.components?.lg ?? (_jsx(LargeSearchToggle, { hideIfDisabled: true, className: cn('w-full my-auto max-md:hidden', navMode === 'top'
+                        (searchToggle.components?.lg ? (_jsx("div", { className: cn('w-full my-auto max-md:hidden', navMode === 'top' ? 'rounded-xl max-w-sm' : 'max-w-[240px]'), children: searchToggle.components?.lg })) : (_jsx(LargeSearchToggle, { hideIfDisabled: true, className: cn('w-full my-auto max-md:hidden', navMode === 'top'
                                 ? 'rounded-xl max-w-sm ps-2.5'
                                 : 'max-w-[240px]') }))), _jsxs("div", { className: "flex flex-1 flex-row items-center justify-end", children: [_jsx("div", { className: "flex flex-row items-center gap-6 px-4 empty:hidden max-lg:hidden", children: links
                                     .filter((item) => item.type !== 'icon')
@@ -60,7 +60,7 @@ function DocsNavbar({ links, tabs, searchToggle = {}, themeSwitch = {}, ...props
                                 (themeSwitch.component ?? (_jsx(ThemeToggle, { className: "ms-2 max-md:hidden", mode: 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 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", options: tabs }))] }));
 }
 function NavbarLinkItem({ item, ...props }) {
     if (item.type === 'menu') {

package/dist/style.css

@@ -373,6 +373,9 @@
   .bottom-1\.5 {
     bottom: calc(var(--spacing) * 1.5);
   }
+  .left-0 {
+    left: calc(var(--spacing) * 0);
+  }
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
@@ -1278,6 +1281,10 @@
     border-inline-end-style: var(--tw-border-style);
     border-inline-end-width: 1px;
   }
+  .border-e-0 {
+    border-inline-end-style: var(--tw-border-style);
+    border-inline-end-width: 0px;
+  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -1600,6 +1607,12 @@
   .text-fd-muted-foreground {
     color: var(--color-fd-muted-foreground);
   }
+  .text-fd-muted-foreground\/50 {
+    color: color-mix(in srgb, hsl(0, 0%, 45.1%) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-fd-muted-foreground) 50%, transparent);
+    }
+  }
   .text-fd-popover-foreground {
     color: var(--color-fd-popover-foreground);
   }
@@ -2112,6 +2125,18 @@
       display: none;
     }
   }
+  .max-lg\:rounded-b-2xl {
+    @media (width < 64rem) {
+      border-bottom-right-radius: var(--radius-2xl);
+      border-bottom-left-radius: var(--radius-2xl);
+    }
+  }
+  .max-lg\:shadow-lg {
+    @media (width < 64rem) {
+      --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);
+    }
+  }
   .max-md\:invisible {
     @media (width < 48rem) {
       visibility: hidden;
@@ -2437,7 +2462,7 @@
   --color-fd-background: hsl(0, 0%, 7.04%);
   --color-fd-foreground: hsl(0, 0%, 92%);
   --color-fd-muted: hsl(0, 0%, 12.9%);
-  --color-fd-muted-foreground: hsl(0, 0%, 60.9%);
+  --color-fd-muted-foreground: hsla(0, 0%, 70%, 0.8);
   --color-fd-popover: hsl(0, 0%, 10.6%);
   --color-fd-popover-foreground: hsl(0, 0%, 86.9%);
   --color-fd-card: hsl(0, 0%, 9.8%);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "15.5.4",
+  "version": "15.5.5",
   "description": "The framework for building a documentation website in Next.js",
   "keywords": [
     "NextJs",
@@ -89,7 +89,7 @@
     "react-medium-image-zoom": "^5.2.14",
     "scroll-into-view-if-needed": "^3.1.0",
     "tailwind-merge": "^3.3.1",
-    "fumadocs-core": "15.5.4"
+    "fumadocs-core": "15.5.5"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^15.3.4",
@@ -100,9 +100,9 @@
     "next": "15.3.4",
     "tailwindcss": "^4.1.10",
     "tsc-alias": "^1.8.16",
-    "eslint-config-custom": "0.0.0",
     "@fumadocs/cli": "0.2.1",
-    "fumadocs-core": "15.5.4",
+    "fumadocs-core": "15.5.5",
+    "eslint-config-custom": "0.0.0",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {