fumadocs-ui 16.2.0 → 16.2.1

package/css/shadcn.css

@@ -1,3 +1,5 @@
+@import './colors/index.css';
+
 @theme {
   --color-fd-background: var(--background);
   --color-fd-foreground: var(--foreground);
@@ -27,3 +29,7 @@
   --color-fd-ring: var(--sidebar-ring);
   --color-fd-primary-foreground: var(--sidebar-primary-foreground);
 }
+
+@theme static {
+  --color-fd-error: var(--destructive);
+}

package/css/solar.css

@@ -69,10 +69,6 @@
   }
 }
 
-#nd-sidebar {
-  @apply bg-fd-card;
-}
-
 #nd-sidebar[data-collapsed='false'] {
   border: none;
   @apply bg-fd-background;

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

@@ -1,4 +1,4 @@
-import { type ComponentProps, type ReactNode, type RefObject } from 'react';
+import { type ComponentProps, type PointerEvent, type ReactNode, type RefObject } from 'react';
 import { type LinkProps } from 'fumadocs-core/link';
 import { type ScrollAreaProps } from '@radix-ui/react-scroll-area';
 import type { CollapsibleContentProps, CollapsibleTriggerProps } from '@radix-ui/react-collapsible';
@@ -36,13 +36,15 @@ declare const SidebarContext: import("react").Context<SidebarContext | null>;
 export declare function SidebarProvider({ defaultOpenLevel, prefetch, children, }: SidebarProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useSidebar(): SidebarContext;
 export declare function useFolderDepth(): number;
-export declare function SidebarContent({ children, aside, }: {
-    aside?: (state: {
+export declare function SidebarContent({ children, }: {
+    children: (state: {
+        ref: RefObject<HTMLElement | null>;
         collapsed: boolean;
         hovered: boolean;
-    }) => ComponentProps<'aside'>;
-    children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element | undefined;
+        onPointerEnter: (event: PointerEvent) => void;
+        onPointerLeave: (event: PointerEvent) => void;
+    }) => ReactNode;
+}): ReactNode;
 export declare function SidebarDrawerOverlay(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element | undefined;
 export declare function SidebarDrawerContent({ className, children, ...props }: ComponentProps<'aside'>): import("react/jsx-runtime").JSX.Element | undefined;
 export declare function SidebarViewport(props: ScrollAreaProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/base.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/base.tsx"],"names":[],"mappings":"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"}

package/dist/components/sidebar/base.js

@@ -46,42 +46,46 @@ export function useSidebar() {
 export function useFolderDepth() {
     return use(FolderContext)?.depth ?? 0;
 }
-export function SidebarContent({ children, aside, }) {
+export function SidebarContent({ children, }) {
     const { collapsed, mode } = useSidebar();
     const [hover, setHover] = useState(false);
+    const ref = useRef(null);
     const timerRef = useRef(0);
-    const ignoreHoverUntil = useRef(0);
     useOnChange(collapsed, () => {
-        if (collapsed) {
-            setHover(true);
-            ignoreHoverUntil.current = Date.now() + 200;
-            setTimeout(() => {
-                setHover(false);
-            }, 200);
-        }
+        if (collapsed)
+            setHover(false);
     });
     if (mode !== 'full')
         return;
-    return (_jsx("aside", { id: "nd-sidebar", "data-collapsed": collapsed, "data-hovered": collapsed && hover, ...aside?.({ collapsed, hovered: hover }), onPointerEnter: (e) => {
-            if (!collapsed ||
-                e.pointerType === 'touch' ||
-                ignoreHoverUntil.current > Date.now())
+    function shouldIgnoreHover(e) {
+        const element = ref.current;
+        if (!element)
+            return true;
+        return (!collapsed ||
+            e.pointerType === 'touch' ||
+            element.getAnimations().length > 0);
+    }
+    return children({
+        ref,
+        collapsed,
+        hovered: hover,
+        onPointerEnter(e) {
+            if (shouldIgnoreHover(e))
                 return;
             window.clearTimeout(timerRef.current);
             setHover(true);
-        }, onPointerLeave: (e) => {
-            if (!collapsed ||
-                e.pointerType === 'touch' ||
-                ignoreHoverUntil.current > Date.now())
+        },
+        onPointerLeave(e) {
+            if (shouldIgnoreHover(e))
                 return;
             window.clearTimeout(timerRef.current);
-            timerRef.current = window.setTimeout(() => {
-                setHover(false);
-                ignoreHoverUntil.current = Date.now() + 200;
-            }, Math.min(e.clientX, document.body.clientWidth - e.clientX) > 100
+            timerRef.current = window.setTimeout(() => setHover(false), 
+            // if mouse is leaving the viewport, add a close delay
+            Math.min(e.clientX, document.body.clientWidth - e.clientX) > 100
                 ? 0
                 : 500);
-        }, children: children }));
+        },
+    });
 }
 export function SidebarDrawerOverlay(props) {
     const { open, setOpen, mode } = useSidebar();

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

@@ -9,7 +9,6 @@ export declare function LayoutContextProvider({ navTransparentMode, children, }:
 }): import("react/jsx-runtime").JSX.Element;
 export declare function LayoutHeader(props: ComponentProps<'header'>): import("react/jsx-runtime").JSX.Element;
 export declare function LayoutBody({ className, style, children, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-export declare function CollapsibleControl(): import("react/jsx-runtime").JSX.Element;
 export declare function LayoutTabs({ options, ...props }: ComponentProps<'div'> & {
     options: SidebarTab[];
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/client.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAG3D,eAAO,MAAM,aAAa;sBACN,OAAO;SACZ,CAAC;AAEhB,wBAAgB,qBAAqB,CAAC,EACpC,kBAA2B,EAC3B,QAAQ,GACT,EAAE;IACD,kBAAkB,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;IAC/C,QAAQ,EAAE,SAAS,CAAC;CACrB,2CAkBA;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAQ3D;AAED,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,2CAgCvB;AAED,wBAAgB,kBAAkB,4CAwBjC;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IACzB,OAAO,EAAE,UAAU,EAAE,CAAC;CACvB,2CA6BA"}
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/client.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAG3D,eAAO,MAAM,aAAa;sBACN,OAAO;SACZ,CAAC;AAEhB,wBAAgB,qBAAqB,CAAC,EACpC,kBAA2B,EAC3B,QAAQ,GACT,EAAE;IACD,kBAAkB,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;IAC/C,QAAQ,EAAE,SAAS,CAAC;CACrB,2CAkBA;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAQ3D;AAED,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,2CA8BvB;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IACzB,OAAO,EAAE,UAAU,EAAE,CAAC;CACvB,2CA6BA"}

package/dist/layouts/docs/client.js

@@ -1,12 +1,8 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Sidebar as SidebarIcon } from '../../icons.js';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, use, useMemo, } from 'react';
 import { cn } from '../../utils/cn.js';
-import { buttonVariants } from '../../components/ui/button.js';
 import { useSidebar } from '../../components/sidebar/base.js';
-import { SidebarCollapseTrigger } from './sidebar.js';
-import { SearchToggle } from '../shared/search-toggle.js';
 import { usePathname } from 'fumadocs-core/framework';
 import { isTabActive } from '../../utils/is-active.js';
 import Link from 'fumadocs-core/link';
@@ -25,7 +21,7 @@ export function LayoutHeader(props) {
 }
 export function LayoutBody({ className, style, children, ...props }) {
     const { collapsed } = useSidebar();
-    return (_jsx("div", { id: "nd-docs-layout", className: cn('grid transition-[grid-template-columns] overflow-x-clip min-h-(--fd-docs-height) [--fd-docs-height:100dvh] [--fd-header-height:0px] [--fd-toc-popover-height:0px] [--fd-sidebar-width:0px] [--fd-toc-width:0px]', className), "data-sidebar-collapsed": collapsed, style: {
+    return (_jsx("div", { id: "nd-docs-layout", className: cn('grid transition-[grid-template-columns] overflow-x-clip min-h-(--fd-docs-height) auto-cols-auto auto-rows-auto [--fd-docs-height:100dvh] [--fd-header-height:0px] [--fd-toc-popover-height:0px] [--fd-sidebar-width:0px] [--fd-toc-width:0px]', className), "data-sidebar-collapsed": collapsed, style: {
             gridTemplate: `"sidebar header toc"
         "sidebar toc-popover toc"
         "sidebar main toc" 1fr / minmax(var(--fd-sidebar-col), 1fr) minmax(0, calc(var(--fd-layout-width,97rem) - var(--fd-sidebar-width) - var(--fd-toc-width))) minmax(min-content, 1fr)`,
@@ -33,19 +29,9 @@ export function LayoutBody({ className, style, children, ...props }) {
             '--fd-docs-row-2': 'calc(var(--fd-docs-row-1) + var(--fd-header-height))',
             '--fd-docs-row-3': 'calc(var(--fd-docs-row-2) + var(--fd-toc-popover-height))',
             '--fd-sidebar-col': collapsed ? '0px' : 'var(--fd-sidebar-width)',
-            gridAutoColumns: 'auto',
-            gridAutoRows: 'auto',
             ...style,
         }, ...props, children: children }));
 }
-export function CollapsibleControl() {
-    const { collapsed } = useSidebar();
-    return (_jsxs("div", { className: cn('fixed flex top-16 shadow-lg transition-opacity rounded-xl p-0.5 border bg-fd-muted text-fd-muted-foreground z-10 max-md:hidden xl:top-4 xl:start-4 max-xl:end-4', !collapsed && 'pointer-events-none opacity-0'), children: [_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
-                    color: 'ghost',
-                    size: 'icon-sm',
-                    className: 'rounded-lg',
-                })), children: _jsx(SidebarIcon, {}) }), _jsx(SearchToggle, { className: "rounded-lg", hideIfDisabled: true })] }));
-}
 export function LayoutTabs({ options, ...props }) {
     const pathname = usePathname();
     const selected = useMemo(() => {

package/dist/layouts/docs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACzD,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAIf,OAAO,EACL,OAAO,EAQR,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,KAAK,eAAe,EAAoB,MAAM,kBAAkB,CAAC;AAoB1E,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAChF,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IAEpB,OAAO,CAAC,EAAE,cAAc,CAAC;IAEzB,OAAO,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAEzB;;OAEG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,UAAU,cACR,SAAQ,cAAc,CAAC,OAAO,CAAC,EAC7B,IAAI,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,EAAE,kBAAkB,GAAG,UAAU,CAAC;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAC;IAEhD;;OAEG;IACH,IAAI,CAAC,EAAE,mBAAmB,EAAE,GAAG,qBAAqB,GAAG,KAAK,CAAC;IAE7D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,UAAU,CAAC,EACzB,GAAG,EAAE,EAAE,eAAe,EAAE,GAAG,GAAG,EAAO,EACrC,OAAO,EAAE,EACP,IAAI,EAAE,WAAW,EACjB,OAAO,EAAE,cAAqB,EAC9B,gBAAgB,EAChB,QAAQ,EACR,GAAG,YAAY,EACX,EACN,YAAiB,EACjB,WAAgB,EAChB,OAAgB,EAChB,IAAY,EACZ,QAAQ,EACR,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,eAAe,2CA2NjB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACzD,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAIf,OAAO,EACL,OAAO,EAQR,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,KAAK,eAAe,EAAoB,MAAM,kBAAkB,CAAC;AAmB1E,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAChF,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IAEpB,OAAO,CAAC,EAAE,cAAc,CAAC;IAEzB,OAAO,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAEzB;;OAEG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,UAAU,cACR,SAAQ,cAAc,CAAC,OAAO,CAAC,EAC7B,IAAI,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,EAAE,kBAAkB,GAAG,UAAU,CAAC;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAC;IAEhD;;OAEG;IACH,IAAI,CAAC,EAAE,mBAAmB,EAAE,GAAG,qBAAqB,GAAG,KAAK,CAAC;IAE7D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,UAAU,CAAC,EACzB,GAAG,EAAE,EAAE,eAAe,EAAE,GAAG,GAAG,EAAO,EACrC,OAAO,EAAE,EACP,IAAI,EAAE,WAAW,EACjB,OAAO,EAAE,cAAqB,EAC9B,gBAAgB,EAChB,QAAQ,EACR,GAAG,YAAY,EACX,EACN,YAAiB,EACjB,WAAgB,EAChB,OAAgB,EAChB,IAAY,EACZ,QAAQ,EACR,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,eAAe,2CA0NjB"}

package/dist/layouts/docs/index.js

@@ -7,7 +7,7 @@ import { Sidebar, SidebarCollapseTrigger, SidebarContent, SidebarDrawer, Sidebar
 import { resolveLinkItems } from '../../layouts/shared/index.js';
 import { LinkItem } from '../../layouts/shared/link-item.js';
 import { LanguageToggle, LanguageToggleText, } from '../../layouts/shared/language-toggle.js';
-import { CollapsibleControl, LayoutTabs, LayoutHeader, LayoutBody, LayoutContextProvider, } from './client.js';
+import { LayoutTabs, LayoutHeader, LayoutBody, LayoutContextProvider, } from './client.js';
 import { TreeContextProvider } from '../../contexts/tree.js';
 import { ThemeToggle } from '../shared/theme-toggle.js';
 import Link from 'fumadocs-core/link';
@@ -36,7 +36,7 @@ export function DocsLayout({ nav: { transparentMode, ...nav } = {}, sidebar: { t
         const viewport = (_jsxs(SidebarViewport, { children: [links
                     .filter((v) => v.type !== 'icon')
                     .map((item, i, list) => (_jsx(SidebarLinkItem, { item: item, className: cn(i === list.length - 1 && 'mb-4') }, i))), _jsx(SidebarPageTree, { ...components })] }));
-        return (_jsxs(_Fragment, { children: [collapsible && _jsx(CollapsibleControl, {}), _jsxs(SidebarContent, { ...rest, children: [_jsxs("div", { className: "flex flex-col gap-3 p-4 pb-2", children: [_jsxs("div", { className: "flex", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex text-[0.9375rem] items-center gap-2.5 font-medium me-auto", children: nav.title }), nav.children, collapsible && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
+        return (_jsxs(_Fragment, { children: [_jsxs(SidebarContent, { ...rest, children: [_jsxs("div", { className: "flex flex-col gap-3 p-4 pb-2", children: [_jsxs("div", { className: "flex", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex text-[0.9375rem] items-center gap-2.5 font-medium me-auto", children: nav.title }), nav.children, collapsible && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
                                                 color: 'ghost',
                                                 size: 'icon-sm',
                                                 className: 'mb-auto text-fd-muted-foreground',

package/dist/layouts/docs/sidebar.d.ts

@@ -1,7 +1,7 @@
 import * as Base from '../../components/sidebar/base.js';
-import type { ComponentProps } from 'react';
+import { type ComponentProps } from 'react';
 export declare const Sidebar: typeof Base.SidebarProvider, SidebarFolder: typeof Base.SidebarFolder, SidebarCollapseTrigger: typeof Base.SidebarCollapseTrigger, SidebarViewport: typeof Base.SidebarViewport, SidebarTrigger: typeof Base.SidebarTrigger;
-export declare function SidebarContent({ className, children, ...props }: ComponentProps<'aside'>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarContent({ ref: refProp, className, children, ...props }: ComponentProps<'aside'>): import("react/jsx-runtime").JSX.Element;
 export declare function SidebarDrawer({ children, className, ...props }: ComponentProps<typeof Base.SidebarDrawerContent>): import("react/jsx-runtime").JSX.Element;
 export declare function SidebarSeparator({ className, style, children, ...props }: ComponentProps<'p'>): import("react/jsx-runtime").JSX.Element;
 export declare function SidebarItem({ className, style, children, ...props }: ComponentProps<typeof Base.SidebarItem>): import("react/jsx-runtime").JSX.Element;

package/dist/layouts/docs/sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/sidebar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,IAAI,MAAM,2BAA2B,CAAC;AAElD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAoB5C,eAAO,MACY,OAAO,+BACxB,aAAa,6BACb,sBAAsB,sCACtB,eAAe,+BACf,cAAc,4BACR,CAAC;AAET,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,CAAC,2CAoBzB;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,oBAAoB,CAAC,2CAelD;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,GAAG,CAAC,2CAerB;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,WAAW,CAAC,2CAezC;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,oBAAoB,CAAC,2CAelD;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,iBAAiB,CAAC,2CAe/C;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,oBAAoB,CAAC,2CAkBlD;AAED,eAAO,MAAM,eAAe,sIAO1B,CAAC;AAEH,eAAO,MAAM,eAAe;;;;6CAM1B,CAAC"}
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/sidebar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,IAAI,MAAM,2BAA2B,CAAC;AAElD,OAAO,EAAU,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AA2BpD,eAAO,MACY,OAAO,+BACxB,aAAa,6BACb,sBAAsB,sCACtB,eAAe,+BACf,cAAc,4BACR,CAAC;AAET,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EAAE,OAAO,EACZ,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,CAAC,2CA+DzB;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,oBAAoB,CAAC,2CAelD;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,GAAG,CAAC,2CAerB;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,WAAW,CAAC,2CAkBzC;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,oBAAoB,CAAC,2CAelD;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,iBAAiB,CAAC,2CAmB/C;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,oBAAoB,CAAC,2CAgBlD;AAED,eAAO,MAAM,eAAe,sIAO1B,CAAC;AAEH,eAAO,MAAM,eAAe;;;;6CAM1B,CAAC"}

package/dist/layouts/docs/sidebar.js

@@ -1,31 +1,44 @@
 '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 * as Base from '../../components/sidebar/base.js';
 import { cn } from '../../utils/cn.js';
+import { useRef } from 'react';
 import { cva } from 'class-variance-authority';
 import { createPageTreeRenderer } from '../../components/sidebar/page-tree.js';
 import { createLinkItemRenderer } from '../../components/sidebar/link-item.js';
+import { buttonVariants } from '../../components/ui/button.js';
+import { SearchToggle } from '../../layouts/shared/search-toggle.js';
+import { Sidebar as SidebarIcon } from '../../icons.js';
+import { mergeRefs } from '../../utils/merge-refs.js';
 const itemVariants = cva('relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none [&_svg]:size-4 [&_svg]:shrink-0', {
     variants: {
         variant: {
             link: 'data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors',
         },
+        highlight: {
+            true: "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",
+        },
     },
 });
 function getItemOffset(depth) {
     return `calc(${2 + 3 * depth} * var(--spacing))`;
 }
 export const { SidebarProvider: Sidebar, SidebarFolder, SidebarCollapseTrigger, SidebarViewport, SidebarTrigger, } = Base;
-export function SidebarContent({ className, children, ...props }) {
-    return (_jsx(Base.SidebarContent, { aside: ({ collapsed, hovered }) => ({
-            className: cn('sticky top-(--fd-docs-row-1) [grid-area:sidebar] h-[calc(var(--fd-docs-height)-var(--fd-docs-row-1))] flex flex-col items-end z-20 bg-fd-card text-sm border-e *:w-(--fd-sidebar-width) md:layout:[--fd-sidebar-width:268px] max-md:hidden', collapsed && [
-                'fixed start-0 inset-y-2 h-auto rounded-xl border transition-[opacity,translate] duration-200',
-                hovered
-                    ? 'z-50 shadow-lg translate-x-2 rtl:-translate-x-2'
-                    : 'opacity-0 -translate-x-[calc(100%-16px)] rtl:translate-x-[calc(100%-16px)]',
-            ], className),
-            ...props,
-        }), children: children }));
+export function SidebarContent({ ref: refProp, className, children, ...props }) {
+    const ref = useRef(null);
+    return (_jsx(Base.SidebarContent, { children: ({ collapsed, hovered, ref: asideRef, ...rest }) => (_jsxs(_Fragment, { children: [_jsxs("div", { "data-sidebar-placeholder": "", className: "sticky top-(--fd-docs-row-1) z-20 [grid-area:sidebar] pointer-events-none *:pointer-events-auto h-[calc(var(--fd-docs-height)-var(--fd-docs-row-1))] md:layout:[--fd-sidebar-width:268px] max-md:hidden", children: [collapsed && (_jsx("div", { className: "absolute start-0 inset-y-0 w-4", ...rest })), _jsx("aside", { id: "nd-sidebar", ref: mergeRefs(ref, refProp, asideRef), "data-collapsed": collapsed, "data-hovered": collapsed && hovered, className: cn('absolute flex flex-col w-full start-0 inset-y-0 items-end bg-fd-card text-sm border-e duration-250 *:w-(--fd-sidebar-width)', collapsed && [
+                                'inset-y-2 rounded-xl transition-transform border w-(--fd-sidebar-width)',
+                                hovered
+                                    ? 'shadow-lg translate-x-2 rtl:-translate-x-2'
+                                    : '-translate-x-(--fd-sidebar-width) rtl:translate-x-full',
+                            ], ref.current &&
+                                (ref.current.getAttribute('data-collapsed') === 'true') !==
+                                    collapsed &&
+                                'transition-[width,inset-block,translate,background-color]', className), ...props, ...rest, children: children })] }), _jsxs("div", { "data-sidebar-panel": "", className: cn('fixed flex top-[calc(--spacing(4)+var(--fd-toc-popover-height))] start-4 shadow-lg transition-opacity rounded-xl p-0.5 border bg-fd-muted text-fd-muted-foreground z-10', (!collapsed || hovered) && 'pointer-events-none opacity-0'), children: [_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
+                                color: 'ghost',
+                                size: 'icon-sm',
+                                className: 'rounded-lg',
+                            })), children: _jsx(SidebarIcon, {}) }), _jsx(SearchToggle, { className: "rounded-lg", hideIfDisabled: true })] })] })) }));
 }
 export function SidebarDrawer({ children, className, ...props }) {
     return (_jsxs(_Fragment, { children: [_jsx(Base.SidebarDrawerOverlay, { className: "fixed z-40 inset-0 backdrop-blur-xs data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out" }), _jsx(Base.SidebarDrawerContent, { className: cn('fixed text-[0.9375rem] 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', className), ...props, children: children })] }));
@@ -39,7 +52,7 @@ export function SidebarSeparator({ className, style, children, ...props }) {
 }
 export function SidebarItem({ className, style, children, ...props }) {
     const depth = Base.useFolderDepth();
-    return (_jsx(Base.SidebarItem, { className: cn(itemVariants({ variant: 'link' }), className), style: {
+    return (_jsx(Base.SidebarItem, { className: cn(itemVariants({ variant: 'link', highlight: depth >= 1 }), className), style: {
             paddingInlineStart: getItemOffset(depth),
             ...style,
         }, ...props, children: children }));
@@ -53,17 +66,15 @@ export function SidebarFolderTrigger({ className, style, ...props }) {
 }
 export function SidebarFolderLink({ className, style, ...props }) {
     const depth = Base.useFolderDepth();
-    return (_jsx(Base.SidebarFolderLink, { className: cn(itemVariants({ variant: 'link' }), 'w-full', className), style: {
+    return (_jsx(Base.SidebarFolderLink, { className: cn(itemVariants({ variant: 'link', highlight: depth > 1 }), 'w-full', className), style: {
             paddingInlineStart: getItemOffset(depth - 1),
             ...style,
         }, ...props, children: props.children }));
 }
 export function SidebarFolderContent({ className, children, ...props }) {
     const depth = Base.useFolderDepth();
-    return (_jsx(Base.SidebarFolderContent, { className: cn('relative', depth === 1 && [
-            "before:content-[''] before:absolute before:w-px before:inset-y-1 before:bg-fd-border before:start-2.5",
-            "**: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",
-        ], className), ...props, children: children }));
+    return (_jsx(Base.SidebarFolderContent, { className: cn('relative', depth === 1 &&
+            "before:content-[''] before:absolute before:w-px before:inset-y-1 before:bg-fd-border before:start-2.5", className), ...props, children: children }));
 }
 export const SidebarPageTree = createPageTreeRenderer({
     SidebarFolder,

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

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../../src/layouts/notebook/client.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EAGnB,KAAK,cAAc,EACnB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAOf,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAMlE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAErE,eAAO,MAAM,aAAa;sBAEF,OAAO;UAGxB,CAAC;AAER,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC9B,OAAO,EAAE,KAAK,GAAG,MAAM,CAAC;CACzB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,kBAA2B,EAC3B,OAAO,EACP,OAAO,EACP,QAAQ,GACT,EAAE,UAAU,GAAG;IACd,kBAAkB,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;IAC/C,QAAQ,EAAE,SAAS,CAAC;CACrB,2CAoBA;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAS3D;AAED,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,2CAuCvB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IACzB,OAAO,EAAE,mBAAmB,EAAE,CAAC;CAChC,2CAmCA;AAED,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IAAE,IAAI,EAAE,YAAY,CAAA;CAAE,GAAG,cAAc,CAAC,WAAW,CAAC,2UAqDtD"}
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../../src/layouts/notebook/client.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EAGnB,KAAK,cAAc,EACnB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAOf,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAMlE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAErE,eAAO,MAAM,aAAa;sBAEF,OAAO;UAGxB,CAAC;AAER,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC9B,OAAO,EAAE,KAAK,GAAG,MAAM,CAAC;CACzB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,kBAA2B,EAC3B,OAAO,EACP,OAAO,EACP,QAAQ,GACT,EAAE,UAAU,GAAG;IACd,kBAAkB,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;IAC/C,QAAQ,EAAE,SAAS,CAAC;CACrB,2CAoBA;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAS3D;AAED,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,2CAqCvB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IACzB,OAAO,EAAE,mBAAmB,EAAE,CAAC;CAChC,2CAmCA;AAED,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IAAE,IAAI,EAAE,YAAY,CAAA;CAAE,GAAG,cAAc,CAAC,WAAW,CAAC,2UAqDtD"}

package/dist/layouts/notebook/client.js

@@ -29,11 +29,11 @@ export function LayoutBody({ className, style, children, ...props }) {
     const { navMode } = use(LayoutContext);
     const { collapsed } = useSidebar();
     const pageCol = 'calc(var(--fd-layout-width,97rem) - var(--fd-sidebar-col) - var(--fd-toc-width))';
-    return (_jsx("div", { id: "nd-notebook-layout", className: cn('grid overflow-x-clip min-h-(--fd-docs-height) [--fd-docs-height:100dvh] [--fd-header-height:0px] [--fd-toc-popover-height:0px] [--fd-sidebar-width:0px] [--fd-toc-width:0px]', className), style: {
+    return (_jsx("div", { id: "nd-notebook-layout", className: cn('grid overflow-x-clip min-h-(--fd-docs-height) transition-[grid-template-columns] auto-cols-auto auto-rows-auto [--fd-docs-height:100dvh] [--fd-header-height:0px] [--fd-toc-popover-height:0px] [--fd-sidebar-width:0px] [--fd-toc-width:0px]', className), style: {
             gridTemplate: navMode === 'top'
                 ? `". header header header ."
         "sidebar sidebar toc-popover toc-popover ."
-        "sidebar sidebar main toc toc" 1fr / minmax(min-content, 1fr) var(--fd-sidebar-col) minmax(0, ${pageCol}) var(--fd-toc-width) minmax(min-content, 1fr)`
+        "sidebar sidebar main toc ." 1fr / minmax(min-content, 1fr) var(--fd-sidebar-col) minmax(0, ${pageCol}) var(--fd-toc-width) minmax(min-content, 1fr)`
                 : `"sidebar sidebar header header ."
         "sidebar sidebar toc-popover toc-popover ."
         "sidebar sidebar main toc ." 1fr / minmax(min-content, 1fr) var(--fd-sidebar-col) minmax(0, ${pageCol}) var(--fd-toc-width) minmax(min-content, 1fr)`,
@@ -41,8 +41,6 @@ export function LayoutBody({ className, style, children, ...props }) {
             '--fd-docs-row-2': 'calc(var(--fd-docs-row-1) + var(--fd-header-height))',
             '--fd-docs-row-3': 'calc(var(--fd-docs-row-2) + var(--fd-toc-popover-height))',
             '--fd-sidebar-col': collapsed ? '0px' : 'var(--fd-sidebar-width)',
-            gridAutoColumns: 'auto',
-            gridAutoRows: 'auto',
             ...style,
         }, ...props, children: children }));
 }

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

@@ -1,7 +1,7 @@
 import * as Base from '../../components/sidebar/base.js';
 import { type ComponentProps } from 'react';
 export declare const Sidebar: typeof Base.SidebarProvider, SidebarFolder: typeof Base.SidebarFolder, SidebarCollapseTrigger: typeof Base.SidebarCollapseTrigger, SidebarViewport: typeof Base.SidebarViewport, SidebarTrigger: typeof Base.SidebarTrigger;
-export declare function SidebarContent({ className, children, ...props }: ComponentProps<'aside'>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarContent({ ref: refProp, className, children, ...props }: ComponentProps<'aside'>): import("react/jsx-runtime").JSX.Element;
 export declare function SidebarDrawer({ children, className, ...props }: ComponentProps<typeof Base.SidebarDrawerContent>): import("react/jsx-runtime").JSX.Element;
 export declare function SidebarSeparator({ className, style, children, ...props }: ComponentProps<'p'>): import("react/jsx-runtime").JSX.Element;
 export declare function SidebarItem({ className, style, children, ...props }: ComponentProps<typeof Base.SidebarItem>): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/layouts/notebook/sidebar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,IAAI,MAAM,2BAA2B,CAAC;AAElD,OAAO,EAAE,KAAK,cAAc,EAAO,MAAM,OAAO,CAAC;AAqBjD,eAAO,MACY,OAAO,+BACxB,aAAa,6BACb,sBAAsB,sCACtB,eAAe,+BACf,cAAc,4BACR,CAAC;AAET,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,CAAC,2CA0BzB;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,oBAAoB,CAAC,2CAelD;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,GAAG,CAAC,2CAerB;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,WAAW,CAAC,2CAezC;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,oBAAoB,CAAC,2CAelD;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,iBAAiB,CAAC,2CAe/C;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,oBAAoB,CAAC,2CAkBlD;AACD,eAAO,MAAM,eAAe,sIAO1B,CAAC;AAEH,eAAO,MAAM,eAAe;;;;6CAM1B,CAAC"}
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/layouts/notebook/sidebar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,IAAI,MAAM,2BAA2B,CAAC;AAElD,OAAO,EAAE,KAAK,cAAc,EAAe,MAAM,OAAO,CAAC;AAyBzD,eAAO,MACY,OAAO,+BACxB,aAAa,6BACb,sBAAsB,sCACtB,eAAe,+BACf,cAAc,4BACR,CAAC;AAET,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EAAE,OAAO,EACZ,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,CAAC,2CAgDzB;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,oBAAoB,CAAC,2CAelD;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,GAAG,CAAC,2CAerB;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,WAAW,CAAC,2CAkBzC;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,oBAAoB,CAAC,2CAelD;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,iBAAiB,CAAC,2CAmB/C;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,oBAAoB,CAAC,2CAgBlD;AACD,eAAO,MAAM,eAAe,sIAO1B,CAAC;AAEH,eAAO,MAAM,eAAe;;;;6CAM1B,CAAC"}

package/dist/layouts/notebook/sidebar.js

@@ -1,36 +1,41 @@
 '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 * as Base from '../../components/sidebar/base.js';
 import { cn } from '../../utils/cn.js';
-import { use } from 'react';
+import { use, useRef } from 'react';
 import { cva } from 'class-variance-authority';
 import { LayoutContext } from './client.js';
 import { createPageTreeRenderer } from '../../components/sidebar/page-tree.js';
 import { createLinkItemRenderer } from '../../components/sidebar/link-item.js';
+import { mergeRefs } from '../../utils/merge-refs.js';
 const itemVariants = cva('relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none [&_svg]:size-4 [&_svg]:shrink-0', {
     variants: {
         variant: {
             link: 'data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors',
         },
+        highlight: {
+            true: "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",
+        },
     },
 });
 function getItemOffset(depth) {
     return `calc(${2 + 3 * depth} * var(--spacing))`;
 }
 export const { SidebarProvider: Sidebar, SidebarFolder, SidebarCollapseTrigger, SidebarViewport, SidebarTrigger, } = Base;
-export function SidebarContent({ className, children, ...props }) {
+export function SidebarContent({ ref: refProp, className, children, ...props }) {
     const { navMode } = use(LayoutContext);
-    return (_jsx(Base.SidebarContent, { aside: ({ collapsed, hovered }) => ({
-            className: cn('sticky [grid-area:sidebar] flex flex-col items-end z-20 text-sm *:w-(--fd-sidebar-width) md:layout:[--fd-sidebar-width:268px] max-md:hidden', (navMode === 'auto' || collapsed) &&
-                'data-[collapsed=true]:bg-fd-card data-[collapsed=true]:border-e', navMode === 'auto'
+    const ref = useRef(null);
+    return (_jsx(Base.SidebarContent, { children: ({ collapsed, hovered, ref: asideRef, ...rest }) => (_jsxs("div", { "data-sidebar-placeholder": "", className: cn('sticky z-20 [grid-area:sidebar] pointer-events-none *:pointer-events-auto md:layout:[--fd-sidebar-width:268px] max-md:hidden', navMode === 'auto'
                 ? 'top-(--fd-docs-row-1) h-[calc(var(--fd-docs-height)-var(--fd-docs-row-1))]'
-                : 'top-(--fd-docs-row-2) h-[calc(var(--fd-docs-height)-var(--fd-docs-row-2))]', collapsed && [
-                'fixed start-0 inset-y-2 h-auto rounded-xl border transition-[opacity,translate] duration-200',
-                hovered
-                    ? 'z-50 shadow-lg translate-x-2 rtl:-translate-x-2'
-                    : 'opacity-0 -translate-x-[calc(100%-16px)] rtl:translate-x-[calc(100%-16px)]',
-            ], className),
-        }), ...props, children: children }));
+                : 'top-(--fd-docs-row-2) h-[calc(var(--fd-docs-height)-var(--fd-docs-row-2))]'), children: [collapsed && (_jsx("div", { className: "absolute start-0 inset-y-0 w-4", ...rest })), _jsx("aside", { id: "nd-sidebar", ref: mergeRefs(ref, refProp, asideRef), "data-collapsed": collapsed, "data-hovered": collapsed && hovered, className: cn('absolute flex flex-col w-full start-0 inset-y-0 items-end text-sm duration-250 *:w-(--fd-sidebar-width)', navMode === 'auto' && 'bg-fd-card border-e', collapsed && [
+                        'inset-y-2 rounded-xl bg-fd-card transition-transform border w-(--fd-sidebar-width)',
+                        hovered
+                            ? 'shadow-lg translate-x-2 rtl:-translate-x-2'
+                            : '-translate-x-(--fd-sidebar-width) rtl:translate-x-full',
+                    ], ref.current &&
+                        (ref.current.getAttribute('data-collapsed') === 'true') !==
+                            collapsed &&
+                        'transition-[width,inset-block,translate,background-color]', className), ...props, ...rest, children: children })] })) }));
 }
 export function SidebarDrawer({ children, className, ...props }) {
     return (_jsxs(_Fragment, { children: [_jsx(Base.SidebarDrawerOverlay, { className: "fixed z-40 inset-0 backdrop-blur-xs data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out" }), _jsx(Base.SidebarDrawerContent, { className: cn('fixed text-[0.9375rem] 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', className), ...props, children: children })] }));
@@ -44,7 +49,7 @@ export function SidebarSeparator({ className, style, children, ...props }) {
 }
 export function SidebarItem({ className, style, children, ...props }) {
     const depth = Base.useFolderDepth();
-    return (_jsx(Base.SidebarItem, { className: cn(itemVariants({ variant: 'link' }), className), style: {
+    return (_jsx(Base.SidebarItem, { className: cn(itemVariants({ variant: 'link', highlight: depth >= 1 }), className), style: {
             paddingInlineStart: getItemOffset(depth),
             ...style,
         }, ...props, children: children }));
@@ -58,17 +63,15 @@ export function SidebarFolderTrigger({ className, style, ...props }) {
 }
 export function SidebarFolderLink({ className, style, ...props }) {
     const depth = Base.useFolderDepth();
-    return (_jsx(Base.SidebarFolderLink, { className: cn(itemVariants({ variant: 'link' }), 'w-full', className), style: {
+    return (_jsx(Base.SidebarFolderLink, { className: cn(itemVariants({ variant: 'link', highlight: depth > 1 }), 'w-full', className), style: {
             paddingInlineStart: getItemOffset(depth - 1),
             ...style,
         }, ...props, children: props.children }));
 }
 export function SidebarFolderContent({ className, children, ...props }) {
     const depth = Base.useFolderDepth();
-    return (_jsx(Base.SidebarFolderContent, { className: cn('relative', depth === 1 && [
-            "before:content-[''] before:absolute before:w-px before:inset-y-1 before:bg-fd-border before:start-2.5",
-            "**: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",
-        ], className), ...props, children: children }));
+    return (_jsx(Base.SidebarFolderContent, { className: cn('relative', depth === 1 &&
+            "before:content-[''] before:absolute before:w-px before:inset-y-1 before:bg-fd-border before:start-2.5", className), ...props, children: children }));
 }
 export const SidebarPageTree = createPageTreeRenderer({
     SidebarFolder,

package/dist/style.css

@@ -317,6 +317,9 @@
   .start-3 {
     inset-inline-start: calc(var(--spacing) * 3);
   }
+  .start-4 {
+    inset-inline-start: calc(var(--spacing) * 4);
+  }
   .end-0 {
     inset-inline-end: calc(var(--spacing) * 0);
   }
@@ -359,8 +362,8 @@
   .top-14 {
     top: calc(var(--spacing) * 14);
   }
-  .top-16 {
-    top: calc(var(--spacing) * 16);
+  .top-\[calc\(--spacing\(4\)\+var\(--fd-toc-popover-height\)\)\] {
+    top: calc(calc(var(--spacing) * 4) + var(--fd-toc-popover-height));
   }
   .right-2 {
     right: calc(var(--spacing) * 2);
@@ -992,9 +995,6 @@
   .h-\[calc\(var\(--fd-docs-height\)-var\(--fd-docs-row-3\)\)\] {
     height: calc(var(--fd-docs-height) - var(--fd-docs-row-3));
   }
-  .h-auto {
-    height: auto;
-  }
   .h-full {
     height: 100%;
   }
@@ -1022,6 +1022,9 @@
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
+  .w-\(--fd-sidebar-width\) {
+    width: var(--fd-sidebar-width);
+  }
   .w-\(--fd-toc-width\) {
     width: var(--fd-toc-width);
   }
@@ -1037,6 +1040,9 @@
   .w-1\.5 {
     width: calc(var(--spacing) * 1.5);
   }
+  .w-4 {
+    width: calc(var(--spacing) * 4);
+  }
   .w-\[25\%\] {
     width: 25%;
   }
@@ -1115,12 +1121,12 @@
   .origin-\[top_center\] {
     transform-origin: top center;
   }
-  .-translate-x-1\/2 {
-    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+  .-translate-x-\(--fd-sidebar-width\) {
+    --tw-translate-x: calc(var(--fd-sidebar-width) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  .-translate-x-\[calc\(100\%-16px\)\] {
-    --tw-translate-x: calc(calc(100% - 16px) * -1);
+  .-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 {
@@ -1160,6 +1166,12 @@
   .list-none {
     list-style-type: none;
   }
+  .auto-cols-auto {
+    grid-auto-columns: auto;
+  }
+  .auto-rows-auto {
+    grid-auto-rows: auto;
+  }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -1714,13 +1726,13 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-\[opacity\,translate\] {
-    transition-property: opacity,translate;
+  .transition-\[width\,height\] {
+    transition-property: width,height;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-\[width\,height\] {
-    transition-property: width,height;
+  .transition-\[width\,inset-block\,translate\,background-color\] {
+    transition-property: width,inset-block,translate,background-color;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
@@ -1752,6 +1764,10 @@
     --tw-duration: 200ms;
     transition-duration: 200ms;
   }
+  .duration-250 {
+    --tw-duration: 250ms;
+    transition-duration: 250ms;
+  }
   .duration-300 {
     --tw-duration: 300ms;
     transition-duration: 300ms;
@@ -1807,6 +1823,11 @@
   .\[scrollbar-width\:none\] {
     scrollbar-width: none;
   }
+  .\*\:pointer-events-auto {
+    :is(& > *) {
+      pointer-events: auto;
+    }
+  }
   .\*\:col-start-1 {
     :is(& > *) {
       grid-column-start: 1;
@@ -2132,63 +2153,51 @@
       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\:absolute {
+    &[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\:inset-y-2\.5 {
+    &[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\:start-2\.5 {
+    &[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\:w-px {
+    &[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\:bg-fd-primary {
+    &[data-active="true"] {
+      &::before {
+        content: var(--tw-content);
+        background-color: var(--color-fd-primary);
       }
     }
   }
-  .\*\*\:data-\[active\=true\]\:before\:content-\[\'\'\] {
-    :is(& *) {
-      &[data-active="true"] {
-        &::before {
-          --tw-content: '';
-          content: var(--tw-content);
-        }
+  .data-\[active\=true\]\:before\:content-\[\'\'\] {
+    &[data-active="true"] {
+      &::before {
+        --tw-content: '';
+        content: var(--tw-content);
       }
     }
   }
@@ -2208,17 +2217,6 @@
       display: none;
     }
   }
-  .data-\[collapsed\=true\]\:border-e {
-    &[data-collapsed="true"] {
-      border-inline-end-style: var(--tw-border-style);
-      border-inline-end-width: 1px;
-    }
-  }
-  .data-\[collapsed\=true\]\:bg-fd-card {
-    &[data-collapsed="true"] {
-      background-color: var(--color-fd-card);
-    }
-  }
   .\*\:data-\[empty\=true\]\:border-b-0 {
     :is(& > *) {
       &[data-empty="true"] {
@@ -2363,11 +2361,6 @@
       }
     }
   }
-  .max-xl\:end-4 {
-    @media (width < 80rem) {
-      inset-inline-end: calc(var(--spacing) * 4);
-    }
-  }
   .max-xl\:hidden {
     @media (width < 80rem) {
       display: none;
@@ -2569,16 +2562,6 @@
       align-items: center;
     }
   }
-  .xl\:start-4 {
-    @media (width >= 80rem) {
-      inset-inline-start: calc(var(--spacing) * 4);
-    }
-  }
-  .xl\:top-4 {
-    @media (width >= 80rem) {
-      top: calc(var(--spacing) * 4);
-    }
-  }
   .xl\:hidden {
     @media (width >= 80rem) {
       display: none;
@@ -2610,9 +2593,9 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
-  .rtl\:translate-x-\[calc\(100\%-16px\)\] {
+  .rtl\:translate-x-full {
     &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-      --tw-translate-x: calc(100% - 16px);
+      --tw-translate-x: 100%;
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "16.2.0",
+  "version": "16.2.1",
   "description": "The React.js documentation framework",
   "keywords": [
     "NextJs",
@@ -108,7 +108,7 @@
     "react-medium-image-zoom": "^5.4.0",
     "scroll-into-view-if-needed": "^3.1.0",
     "tailwind-merge": "^3.4.0",
-    "fumadocs-core": "16.2.0"
+    "fumadocs-core": "16.2.1"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "16.0.3",
@@ -122,7 +122,7 @@
     "tsc-alias": "^1.8.16",
     "@fumadocs/cli": "1.1.0",
     "eslint-config-custom": "0.0.0",
-    "fumadocs-core": "16.2.0",
+    "fumadocs-core": "16.2.1",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {