fumadocs-ui 15.3.2 → 15.3.4

package/dist/components/tabs.js

@@ -4,7 +4,6 @@ import { createContext, useContext, useEffect, useId, useLayoutEffect, useMemo,
 import { cn } from '../utils/cn.js';
 import * as Primitive from './ui/tabs.js';
 import { useEffectEvent } from 'fumadocs-core/utils/use-effect-event';
-export { Primitive };
 const listeners = new Map();
 function addChangeListener(id, listener) {
     const list = listeners.get(id) ?? [];
@@ -22,14 +21,16 @@ function useTabContext() {
         throw new Error('You must wrap your component in <Tabs>');
     return ctx;
 }
-export function Tabs({ groupId, items = [], persist = false, label, defaultIndex = 0, updateAnchor = false, ...props }) {
-    const values = useMemo(() => items.map((item) => toValue(item)), [items]);
-    const [value, setValue] = useState(values[defaultIndex]);
+export const TabsList = Primitive.TabsList;
+export const TabsTrigger = Primitive.TabsTrigger;
+export function Tabs({ groupId, items, persist = false, label, defaultIndex = 0, updateAnchor = false, defaultValue = items ? escapeValue(items[defaultIndex]) : undefined, ...props }) {
+    const [value, setValue] = useState(defaultValue);
     const valueToIdMap = useMemo(() => new Map(), []);
     const collection = useMemo(() => [], []);
     const onUpdate = useEffectEvent((v) => {
-        if (values.includes(v))
-            setValue(v);
+        if (items && !items.some((item) => escapeValue(item) === v))
+            return;
+        setValue(v);
     });
     useLayoutEffect(() => {
         if (!groupId)
@@ -74,23 +75,23 @@ export function Tabs({ groupId, items = [], persist = false, label, defaultIndex
             else {
                 setValue(v);
             }
-        }, ...props, className: cn('my-4', props.className), children: [_jsxs(Primitive.TabsList, { children: [label && (_jsx("span", { className: "text-sm font-medium my-auto me-auto", children: label })), values.map((v, i) => (_jsx(Primitive.TabsTrigger, { value: v, children: items[i] }, v)))] }), _jsx(TabsContext.Provider, { value: useMemo(() => ({ items, valueToIdMap, collection }), [valueToIdMap, collection, items]), children: props.children })] }));
-}
-function toValue(v) {
-    return v.toLowerCase().replace(/\s/, '-');
+        }, ...props, className: cn('my-4', props.className), children: [items && (_jsxs(TabsList, { children: [label && (_jsx("span", { className: "text-sm font-medium my-auto me-auto", children: label })), items.map((item) => (_jsx(TabsTrigger, { value: escapeValue(item), children: item }, item)))] })), _jsx(TabsContext.Provider, { value: useMemo(() => ({ items, valueToIdMap, collection }), [valueToIdMap, collection, items]), children: props.children })] }));
 }
-export function Tab({ value, className, ...props }) {
-    const { items, valueToIdMap } = useTabContext();
-    const resolvedValue = value ??
+export function Tab({ value, ...props }) {
+    const { items } = useTabContext();
+    const resolved = value ??
         // eslint-disable-next-line react-hooks/rules-of-hooks -- `value` is not supposed to change
-        items.at(useCollectionIndex());
-    if (!resolvedValue)
+        items?.at(useCollectionIndex());
+    if (!resolved)
         throw new Error('Failed to resolve tab `value`, please pass a `value` prop to the Tab component.');
-    const v = toValue(resolvedValue);
+    return (_jsx(TabsContent, { value: escapeValue(resolved), ...props, children: props.children }));
+}
+export function TabsContent({ value, className, ...props }) {
+    const { valueToIdMap } = useTabContext();
     if (props.id) {
-        valueToIdMap.set(v, props.id);
+        valueToIdMap.set(value, props.id);
     }
-    return (_jsx(Primitive.TabsContent, { value: v, className: cn('prose-no-margin [&>figure:only-child]:-m-4 [&>figure:only-child]:border-none', className), ...props, children: props.children }));
+    return (_jsx(Primitive.TabsContent, { value: value, forceMount: true, className: cn('prose-no-margin data-[state=inactive]:hidden [&>figure:only-child]:-m-4 [&>figure:only-child]:border-none', className), ...props, children: props.children }));
 }
 /**
  * Inspired by Headless UI.
@@ -112,3 +113,6 @@ function useCollectionIndex() {
         collection.push(key);
     return collection.indexOf(key);
 }
+function escapeValue(v) {
+    return v.toLowerCase().replace(/\s/, '-');
+}

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

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

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

@@ -2,22 +2,19 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Slot } from '@radix-ui/react-slot';
 import { useEffect, useId, useRef, useState } from 'react';
-const init = `function isEmpty(node) {
-  for (let i = 0; i < node.childNodes.length; i++) {
-    const child = node.childNodes.item(i);
-    if (child.nodeType === Node.TEXT_NODE) {
-      return false
-    } else if (
-      child.nodeType === Node.ELEMENT_NODE &&
-      window.getComputedStyle(child).display !== 'none'
-    ) {
-      return false
+function isEmpty(node) {
+    for (let i = 0; i < node.childNodes.length; i++) {
+        const child = node.childNodes.item(i);
+        if (child.nodeType === Node.TEXT_NODE) {
+            return false;
+        }
+        else if (child.nodeType === Node.ELEMENT_NODE &&
+            window.getComputedStyle(child).display !== 'none') {
+            return false;
+        }
     }
-  }
-
-  return true;
-}`;
-const isEmpty = eval(`${init}; isEmpty`);
+    return true;
+}
 /**
  * The built-in CSS `:empty` selector cannot detect if the children is hidden, classes such as `md:hidden` causes it to fail.
  * This component is an enhancement to `empty:hidden` to fix the issue described above.
@@ -43,10 +40,25 @@ export function HideIfEmpty({ children }) {
         };
     }, []);
     const inject = `
-${init}
-const element = document.querySelector('[data-hide-if-empty="${id}"]')
+function isEmpty(node) {
+  for (let i = 0; i < node.childNodes.length; i++) {
+    const child = node.childNodes.item(i);
+    if (child.nodeType === Node.TEXT_NODE) {
+      return false
+    } else if (
+      child.nodeType === Node.ELEMENT_NODE &&
+      window.getComputedStyle(child).display !== 'none'
+    ) {
+      return false
+    }
+  }
+
+  return true;
+}
+
+const element = document.querySelector('[data-fdid="${id}"]')
 if (element) {
   element.setAttribute('data-empty', String(isEmpty(element)))
 }`;
-    return (_jsxs(_Fragment, { children: [empty === undefined && _jsx("script", { children: `{ ${inject} }` }), _jsx(Slot, { ref: ref, "data-hide-if-empty": id, "data-empty": empty, className: "data-[empty=true]:hidden", children: children })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Slot, { ref: ref, "data-fdid": id, "data-empty": empty, className: "data-[empty=true]:hidden", suppressHydrationWarning: true, children: children }), empty === undefined && _jsx("script", { children: `{ ${inject} }` })] }));
 }

package/dist/components/ui/scroll-area.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../../src/components/ui/scroll-area.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAC;AACnE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,QAAA,MAAM,UAAU,+JAad,CAAC;AAIH,QAAA,MAAM,cAAc,uKAWlB,CAAC;AAIH,QAAA,MAAM,SAAS,wKAiBb,CAAC;AAGH,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../../src/components/ui/scroll-area.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAC;AACnE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,QAAA,MAAM,UAAU,+JAcd,CAAC;AAIH,QAAA,MAAM,cAAc,uKAWlB,CAAC;AAIH,QAAA,MAAM,SAAS,wKAiBb,CAAC;AAGH,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/ui/scroll-area.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as React from 'react';
 import { cn } from '../../utils/cn.js';
-const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(ScrollAreaPrimitive.Root, { ref: ref, className: cn('overflow-hidden', className), ...props, children: [children, _jsx(ScrollAreaPrimitive.Corner, {}), _jsx(ScrollBar, { orientation: "vertical" })] })));
+const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(ScrollAreaPrimitive.Root, { ref: ref, type: "scroll", className: cn('overflow-hidden', className), ...props, children: [children, _jsx(ScrollAreaPrimitive.Corner, {}), _jsx(ScrollBar, { orientation: "vertical" })] })));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 const ScrollViewport = React.forwardRef(({ className, children, ...props }, ref) => (_jsx(ScrollAreaPrimitive.Viewport, { ref: ref, className: cn('size-full rounded-[inherit]', className), ...props, children: children })));
 ScrollViewport.displayName = ScrollAreaPrimitive.Viewport.displayName;

package/dist/components/ui/tabs.js

@@ -7,9 +7,9 @@ const Tabs = React.forwardRef((props, ref) => {
     return (_jsx(TabsPrimitive.Root, { ref: ref, ...props, className: cn('flex flex-col overflow-hidden rounded-xl border bg-fd-secondary', props.className) }));
 });
 Tabs.displayName = 'Tabs';
-const TabsList = React.forwardRef((props, ref) => (_jsx(TabsPrimitive.List, { ref: ref, ...props, className: cn('flex gap-3.5 text-fd-secondary-foreground overflow-x-auto px-4', props.className) })));
+const TabsList = React.forwardRef((props, ref) => (_jsx(TabsPrimitive.List, { ref: ref, ...props, className: cn('flex gap-3.5 text-fd-secondary-foreground overflow-x-auto px-4 not-prose', props.className) })));
 TabsList.displayName = 'TabsList';
-const TabsTrigger = React.forwardRef((props, ref) => (_jsx(TabsPrimitive.Trigger, { ref: ref, ...props, className: cn('whitespace-nowrap text-fd-muted-foreground border-b border-transparent py-2 text-sm font-medium transition-colors hover:text-fd-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border-fd-primary data-[state=active]:text-fd-primary', props.className) })));
+const TabsTrigger = React.forwardRef((props, ref) => (_jsx(TabsPrimitive.Trigger, { ref: ref, ...props, className: cn('inline-flex items-center gap-2 whitespace-nowrap text-fd-muted-foreground border-b border-transparent py-2 text-sm font-medium transition-colors [&_svg]:size-4 hover:text-fd-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border-fd-primary data-[state=active]:text-fd-primary', props.className) })));
 TabsTrigger.displayName = 'TabsTrigger';
 const TabsContent = React.forwardRef((props, ref) => (_jsx(TabsPrimitive.Content, { ref: ref, ...props, className: cn('p-4 text-[15px] bg-fd-background rounded-xl outline-none', props.className) })));
 TabsContent.displayName = 'TabsContent';

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

@@ -1,5 +1,5 @@
-import { type ButtonHTMLAttributes, type HTMLAttributes } from 'react';
-export declare function Navbar(props: HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
-export declare function NavbarSidebarTrigger(props: ButtonHTMLAttributes<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;
+import { type ComponentProps } from 'react';
+export declare function Navbar(props: ComponentProps<'header'>): 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;
 //# 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,oBAAoB,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAQvE,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,2CAiBxD;AAED,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,2CAmB/C;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,2CAiBrD;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAmB1B;AAED,wBAAgB,kBAAkB,wDAyBjC"}

package/dist/layouts/docs-client.js

@@ -10,14 +10,15 @@ import { SearchToggle } from '../components/layout/search-toggle.js';
 export function Navbar(props) {
     const { open } = useSidebar();
     const { isTransparent } = useNav();
-    return (_jsx("header", { id: "nd-subnav", ...props, className: cn('sticky top-(--fd-banner-height) z-30 flex h-14 items-center px-4 border-b transition-colors backdrop-blur-sm md:px-6', (!isTransparent || open) && 'bg-fd-background/80', props.className), children: props.children }));
+    return (_jsx("header", { id: "nd-subnav", ...props, className: cn('sticky top-(--fd-banner-height) z-30 flex items-center px-4 border-b transition-colors backdrop-blur-sm', (!isTransparent || open) && 'bg-fd-background/80', props.className), children: props.children }));
 }
-export function NavbarSidebarTrigger(props) {
+export function NavbarSidebarTrigger({ className, ...props }) {
     const { setOpen } = useSidebar();
-    return (_jsx("button", { ...props, className: cn(buttonVariants({
+    return (_jsx("button", { ...props, "aria-label": "Open Sidebar", className: cn(buttonVariants({
             color: 'ghost',
             size: 'icon',
-        }), props.className), onClick: () => setOpen((prev) => !prev), children: _jsx(Menu, {}) }));
+            className,
+        })), onClick: () => setOpen((prev) => !prev), children: _jsx(Menu, {}) }));
 }
 export function CollapsibleControl() {
     const { collapsed } = useSidebar();

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

@@ -1 +1 @@
-{"version":3,"file":"docs.d.ts","sourceRoot":"","sources":["../../src/layouts/docs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAarE,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,YAAY,EAClB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,UAAU,CAAC;AAK1D,OAAO,EACL,kBAAkB,EAClB,MAAM,EACN,oBAAoB,EACrB,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAIL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAa/B,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IAEpB,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG;QAClC,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,SAAS,CAAC,EAAE,SAAS,CAAC;KACvB,CAAC;IAEF;;OAEG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,wBAAgB,UAAU,CAAC,EACzB,GAAG,EAAE,EAAE,eAAe,EAAE,GAAG,GAAG,EAAO,EACrC,OAAY,EACZ,YAAY,EACZ,kBAA0B,EAC1B,WAA8C,EAC9C,IAAY,EACZ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,GAAG,SAAS,CAkG7B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,WAAkB,EAClB,UAAU,EACV,GAAG,EACH,KAAU,EACV,MAAM,EACN,MAAM,EACN,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,GAAG;IAChC,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,GAAG,CAAC,EAAE,SAAS,CAAC;CACjB,2CAgDA;AAED,wBAAgB,uBAAuB,CAAC,EACtC,IAAI,EACJ,WAAW,EACX,KAAU,GACX,EAAE;IACD,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC;CAC9C,2CAgCA;AAED,OAAO,EAAE,kBAAkB,EAAE,MAAM,EAAE,oBAAoB,EAAE,KAAK,YAAY,EAAE,CAAC;AAC/E,OAAO,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"docs.d.ts","sourceRoot":"","sources":["../../src/layouts/docs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAarE,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,YAAY,EAClB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,UAAU,CAAC;AAK1D,OAAO,EACL,kBAAkB,EAClB,MAAM,EACN,oBAAoB,EACrB,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAIL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAa/B,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IAEpB,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG;QAClC,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,SAAS,CAAC,EAAE,SAAS,CAAC;KACvB,CAAC;IAEF;;OAEG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,wBAAgB,UAAU,CAAC,EACzB,GAAG,EAAE,EAAE,eAAe,EAAE,GAAG,GAAG,EAAO,EACrC,OAAY,EACZ,YAAY,EACZ,kBAA0B,EAC1B,WAA8C,EAC9C,IAAY,EACZ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,GAAG,SAAS,CAgG7B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,WAAkB,EAClB,UAAU,EACV,GAAG,EACH,KAAU,EACV,MAAM,EACN,MAAM,EACN,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,GAAG;IAChC,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,GAAG,CAAC,EAAE,SAAS,CAAC;CACjB,2CAmDA;AAED,wBAAgB,uBAAuB,CAAC,EACtC,IAAI,EACJ,WAAW,EACX,KAAU,GACX,EAAE;IACD,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC;CAC9C,2CAgCA;AAED,OAAO,EAAE,kBAAkB,EAAE,MAAM,EAAE,oBAAoB,EAAE,KAAK,YAAY,EAAE,CAAC;AAC/E,OAAO,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAC"}

package/dist/layouts/docs.js

@@ -20,23 +20,23 @@ import { HideIfEmpty } from '../components/ui/hide-if-empty.js';
 export function DocsLayout({ nav: { transparentMode, ...nav } = {}, sidebar = {}, searchToggle, disableThemeSwitch = false, themeSwitch = { enabled: !disableThemeSwitch }, i18n = false, children, ...props }) {
     const tabs = useMemo(() => getSidebarTabsFromOptions(sidebar.tabs, props.tree) ?? [], [sidebar.tabs, props.tree]);
     const links = getLinks(props.links ?? [], props.githubUrl);
-    const variables = cn('[--fd-tocnav-height:36px] md:[--fd-sidebar-width:268px] lg:[--fd-sidebar-width:286px] xl:[--fd-toc-width:286px] xl:[--fd-tocnav-height:0px]', !nav.component && nav.enabled !== false
-        ? '[--fd-nav-height:calc(var(--spacing)*14)] md:[--fd-nav-height:0px]'
+    const variables = cn('[--fd-tocnav-height:36px] md:[--fd-sidebar-width:268px] lg:[--fd-sidebar-width:290px] xl:[--fd-toc-width:290px] xl:[--fd-tocnav-height:0px]', !nav.component && nav.enabled !== false
+        ? '[--fd-nav-height:56px] md:[--fd-nav-height:0px]'
         : undefined);
     const pageStyles = {
         tocNav: cn('xl:hidden'),
         toc: cn('max-xl:hidden'),
     };
-    return (_jsx(TreeContextProvider, { tree: props.tree, children: _jsxs(NavProvider, { transparentMode: transparentMode, children: [slot(nav, _jsxs(Navbar, { className: "md:hidden", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex items-center gap-2.5 font-semibold", children: nav.title }), _jsx("div", { className: "flex flex-1 flex-row items-center gap-1", children: nav.children }), slots('sm', searchToggle, _jsx(SearchToggle, { hideIfDisabled: true })), _jsx(NavbarSidebarTrigger, { className: "-me-2 md:hidden" })] })), _jsxs("main", { id: "nd-docs-layout", ...props.containerProps, className: cn('flex flex-1 flex-row pe-(--fd-layout-offset)', variables, props.containerProps?.className), style: {
+    return (_jsx(TreeContextProvider, { tree: props.tree, children: _jsxs(NavProvider, { transparentMode: transparentMode, children: [slot(nav, _jsxs(Navbar, { className: "h-14 md:hidden", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex items-center gap-2.5 font-semibold", children: nav.title }), _jsx("div", { className: "flex-1", children: nav.children }), slots('sm', searchToggle, _jsx(SearchToggle, { hideIfDisabled: true })), _jsx(NavbarSidebarTrigger, { className: "-me-2 md:hidden" })] })), _jsxs("main", { id: "nd-docs-layout", ...props.containerProps, className: cn('flex flex-1 flex-row pe-(--fd-layout-offset)', variables, props.containerProps?.className), style: {
                         ...layoutVariables,
                         ...props.containerProps?.style,
-                    }, children: [slot(sidebar, _jsx(DocsLayoutSidebar, { ...omit(sidebar, 'enabled', 'component', 'tabs'), links: links, nav: _jsxs(_Fragment, { children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex text-[15px] items-center gap-2.5 font-medium", children: nav.title }), nav.children] }), banner: _jsxs(_Fragment, { children: [tabs.length > 0 ? _jsx(RootToggle, { options: tabs }) : null, slots('lg', searchToggle, _jsx(LargeSearchToggle, { hideIfDisabled: true, className: "rounded-lg max-md:hidden" })), sidebar.banner] }), footer: _jsxs(_Fragment, { children: [_jsx(DocsLayoutSidebarFooter, { links: links.filter((item) => item.type === 'icon'), i18n: i18n, themeSwitch: themeSwitch }), sidebar.footer] }) })), _jsx(StylesProvider, { ...pageStyles, children: children })] })] }) }));
+                    }, children: [slot(sidebar, _jsx(DocsLayoutSidebar, { ...omit(sidebar, 'enabled', 'component', 'tabs'), links: links, nav: _jsxs(_Fragment, { children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex text-[15px] items-center gap-2.5 font-medium", children: nav.title }), nav.children] }), banner: _jsxs(_Fragment, { children: [tabs.length > 0 ? _jsx(RootToggle, { options: tabs }) : null, slots('lg', searchToggle, _jsx(LargeSearchToggle, { hideIfDisabled: true, className: "max-md:hidden" })), sidebar.banner] }), footer: _jsxs(_Fragment, { children: [_jsx(DocsLayoutSidebarFooter, { links: links.filter((item) => item.type === 'icon'), i18n: i18n, themeSwitch: themeSwitch }), sidebar.footer] }) })), _jsx(StylesProvider, { ...pageStyles, children: children })] })] }) }));
 }
 export function DocsLayoutSidebar({ collapsible = true, components, nav, links = [], footer, banner, ...props }) {
-    return (_jsxs(_Fragment, { children: [collapsible ? _jsx(CollapsibleControl, {}) : null, _jsxs(Sidebar, { ...props, collapsible: collapsible, className: cn('md:ps-(--fd-layout-offset)', props.className), children: [_jsx(HideIfEmpty, { children: _jsxs(SidebarHeader, { children: [_jsxs("div", { className: "flex py-1.5 max-md:hidden", children: [nav, collapsible && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
+    return (_jsxs(_Fragment, { children: [collapsible ? _jsx(CollapsibleControl, {}) : null, _jsxs(Sidebar, { ...props, collapsible: collapsible, className: cn('data-[collapsed=false]:w-[calc(var(--fd-sidebar-width)+var(--fd-layout-offset))] data-[collapsed=true]:me-[calc(var(--fd-layout-offset)-var(--fd-sidebar-width))]', props.className), children: [_jsx(HideIfEmpty, { children: _jsxs(SidebarHeader, { children: [_jsxs("div", { className: "flex max-md:hidden", children: [nav, collapsible && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
                                                 color: 'ghost',
                                                 size: 'icon-sm',
-                                            }), 'ms-auto mb-auto -my-1.5 text-fd-muted-foreground max-md:hidden'), children: _jsx(SidebarIcon, {}) }))] }), banner] }) }), _jsxs(SidebarViewport, { children: [links
+                                            }), 'ms-auto mb-auto text-fd-muted-foreground max-md:hidden'), children: _jsx(SidebarIcon, {}) }))] }), banner] }) }), _jsxs(SidebarViewport, { children: [links
                                 .filter((v) => v.type !== 'icon')
                                 .map((item, i, list) => (_jsx(SidebarLinkItem, { item: item, className: cn(i === list.length - 1 && 'mb-4') }, i))), _jsx(SidebarPageTree, { components: components })] }), _jsx(HideIfEmpty, { children: _jsx(SidebarFooter, { children: footer }) })] })] }));
 }

package/dist/layouts/home/navbar.js

@@ -20,7 +20,7 @@ export function Navbar(props) {
 }
 export const NavbarMenu = NavigationMenuItem;
 export function NavbarMenuContent(props) {
-    return (_jsx(NavigationMenuContent, { ...props, className: cn('grid grid-cols-1 gap-3 p-4 md:grid-cols-2 lg:grid-cols-3', props.className), children: props.children }));
+    return (_jsx(NavigationMenuContent, { ...props, className: cn('grid grid-cols-1 gap-2 p-4 md:grid-cols-2 lg:grid-cols-3', props.className), children: props.children }));
 }
 export function NavbarMenuTrigger(props) {
     return (_jsx(NavigationMenuTrigger, { ...props, className: cn(navItemVariants(), 'rounded-md', props.className), children: props.children }));

package/dist/layouts/home.js

@@ -21,7 +21,7 @@ export function Header({ nav = {}, i18n = false, links, githubUrl, themeSwitch,
     const menuItems = finalLinks.filter((item) => ['menu', 'all'].includes(item.on ?? 'all'));
     return (_jsxs(Navbar, { children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex items-center gap-2.5 font-semibold", children: nav.title }), nav.children, _jsx("ul", { className: "flex flex-row items-center gap-2 px-6 max-sm:hidden", children: navItems
                     .filter((item) => !isSecondary(item))
-                    .map((item, i) => (_jsx(NavbarLinkItem, { item: item, className: "text-sm" }, i))) }), _jsxs("div", { className: "flex flex-row items-center justify-end gap-1.5 flex-1", children: [slots('sm', searchToggle, _jsx(SearchToggle, { className: "lg:hidden", hideIfDisabled: true })), slots('lg', searchToggle, _jsx(LargeSearchToggle, { className: "w-full max-w-[240px] max-lg:hidden", hideIfDisabled: true })), slot(themeSwitch, _jsx(ThemeToggle, { className: "max-lg:hidden", mode: themeSwitch?.mode })), i18n ? (_jsx(LanguageToggle, { className: "max-lg:hidden", children: _jsx(Languages, { className: "size-5" }) })) : null] }), _jsxs("ul", { className: "flex flex-row items-center", children: [navItems.filter(isSecondary).map((item, i) => (_jsx(NavbarLinkItem, { item: item, className: "-me-1.5 max-lg:hidden" }, i))), _jsxs(Menu, { className: "lg:hidden", children: [_jsx(MenuTrigger, { "aria-label": "Toggle Menu", className: "group -me-2", enableHover: nav.enableHoverToOpen, children: _jsx(ChevronDown, { className: "size-3 transition-transform duration-300 group-data-[state=open]:rotate-180" }) }), _jsxs(MenuContent, { className: "sm:flex-row sm:items-center sm:justify-end", children: [menuItems
+                    .map((item, i) => (_jsx(NavbarLinkItem, { item: item, className: "text-sm" }, i))) }), _jsxs("div", { className: "flex flex-row items-center justify-end gap-1.5 flex-1", children: [slots('sm', searchToggle, _jsx(SearchToggle, { className: "lg:hidden", hideIfDisabled: true })), slots('lg', searchToggle, _jsx(LargeSearchToggle, { className: "w-full rounded-full ps-2.5 max-w-[240px] max-lg:hidden", hideIfDisabled: true })), slot(themeSwitch, _jsx(ThemeToggle, { className: "max-lg:hidden", mode: themeSwitch?.mode })), i18n ? (_jsx(LanguageToggle, { className: "max-lg:hidden", children: _jsx(Languages, { className: "size-5" }) })) : null] }), _jsxs("ul", { className: "flex flex-row items-center", children: [navItems.filter(isSecondary).map((item, i) => (_jsx(NavbarLinkItem, { item: item, className: "-me-1.5 max-lg:hidden" }, i))), _jsxs(Menu, { className: "lg:hidden", children: [_jsx(MenuTrigger, { "aria-label": "Toggle Menu", className: "group -me-2", enableHover: nav.enableHoverToOpen, children: _jsx(ChevronDown, { className: "size-3 transition-transform duration-300 group-data-[state=open]:rotate-180" }) }), _jsxs(MenuContent, { className: "sm:flex-row sm:items-center sm:justify-end", children: [menuItems
                                         .filter((item) => !isSecondary(item))
                                         .map((item, i) => (_jsx(MenuLinkItem, { item: item, className: "sm:hidden" }, i))), _jsxs("div", { className: "-ms-1.5 flex flex-row items-center gap-1.5 max-sm:mt-2", children: [menuItems.filter(isSecondary).map((item, i) => (_jsx(MenuLinkItem, { item: item, className: "-me-1.5" }, i))), _jsx("div", { role: "separator", className: "flex-1" }), i18n ? (_jsxs(LanguageToggle, { children: [_jsx(Languages, { className: "size-5" }), _jsx(LanguageToggleText, {}), _jsx(ChevronDown, { className: "size-3 text-fd-muted-foreground" })] })) : null, slot(themeSwitch, _jsx(ThemeToggle, { mode: themeSwitch?.mode }))] })] })] })] })] }));
 }

package/dist/layouts/notebook-client.js

@@ -11,7 +11,7 @@ import { isActive } from '../utils/is-active.js';
 export function Navbar({ mode, ...props }) {
     const { open, collapsed } = useSidebar();
     const { isTransparent } = useNav();
-    return (_jsx("header", { id: "nd-subnav", ...props, className: cn('fixed inset-x-0 top-(--fd-banner-height) z-10 px-(--fd-layout-offset) backdrop-blur-sm transition-colors', (!isTransparent || open) && 'bg-fd-background/80', mode === 'auto' &&
+    return (_jsx("header", { id: "nd-subnav", ...props, className: cn('fixed flex flex-col inset-x-0 top-(--fd-banner-height) z-10 px-(--fd-layout-offset) h-(--fd-nav-height) backdrop-blur-sm transition-colors', (!isTransparent || open) && 'bg-fd-background/80', mode === 'auto' &&
             !collapsed &&
             'ps-[calc(var(--fd-layout-offset)+var(--fd-sidebar-width))]', props.className), children: props.children }));
 }

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

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

package/dist/layouts/notebook.js

@@ -22,25 +22,23 @@ export function DocsLayout(props) {
     const navMode = nav.mode ?? 'auto';
     const links = getLinks(props.links ?? [], props.githubUrl);
     const tabs = useMemo(() => getSidebarTabsFromOptions(tabOptions, props.tree) ?? [], [tabOptions, props.tree]);
-    const variables = cn('[--fd-nav-height:calc(var(--spacing)*14)] [--fd-tocnav-height:36px] md:[--fd-sidebar-width:286px] xl:[--fd-toc-width:286px] xl:[--fd-tocnav-height:0px]', tabs.length > 0 &&
-        tabMode === 'navbar' &&
-        'lg:[--fd-nav-height:calc(var(--spacing)*24)]');
+    const variables = cn('[--fd-nav-height:56px] [--fd-tocnav-height:36px] md:[--fd-sidebar-width:286px] md:[--fd-nav-height:64px] xl:[--fd-toc-width:286px] xl:[--fd-tocnav-height:0px]', tabs.length > 0 && tabMode === 'navbar' && 'lg:[--fd-nav-height:104px]');
     const pageStyles = {
         tocNav: cn('xl:hidden'),
         toc: cn('max-xl:hidden'),
         page: cn('mt-(--fd-nav-height)'),
     };
-    const sidebarHeader = navMode === 'auto' && (_jsxs("div", { className: "flex justify-between max-md:hidden", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex items-center gap-2.5 font-medium", children: nav.title }), (sidebar.collapsible ?? true) && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
+    const sidebarHeader = (_jsxs("div", { className: "flex justify-between max-md:hidden", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex items-center gap-2.5 font-medium", children: nav.title }), (sidebar.collapsible ?? true) && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
                     color: 'ghost',
                     size: 'icon-sm',
-                    className: 'mb-auto text-fd-muted-foreground',
+                    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("main", { id: "nd-docs-layout", ...props.containerProps, className: cn('flex w-full flex-1 flex-row pe-(--fd-layout-offset)', variables, props.containerProps?.className), style: {
                     ...layoutVariables,
                     ...props.containerProps?.style,
-                }, children: [_jsxs(Sidebar, { ...sidebar, className: cn('md:ps-(--fd-layout-offset)', navMode === 'top'
+                }, children: [_jsxs(Sidebar, { ...sidebar, className: cn('data-[collapsed=false]:w-[calc(var(--fd-sidebar-width)+var(--fd-layout-offset))] data-[collapsed=true]:me-[calc(var(--fd-layout-offset)-var(--fd-sidebar-width))]', navMode === 'top'
                             ? 'md:bg-transparent'
-                            : 'md:[--fd-nav-height:0px]', sidebar.className), children: [_jsx(HideIfEmpty, { children: _jsxs(SidebarHeader, { children: [sidebarHeader, nav.children, sidebarBanner, tabMode === 'sidebar' && tabs.length > 0 ? (_jsx(RootToggle, { className: "mb-2", options: tabs })) : null, tabMode === 'navbar' && tabs.length > 0 && (_jsx(RootToggle, { options: tabs, className: "lg:hidden" }))] }) }), _jsxs(SidebarViewport, { children: [links
+                            : '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
                                                 .filter((item) => item.type === 'icon')
@@ -54,10 +52,12 @@ function DocsNavbar({ links, tabs, ...props }) {
     const navMode = props.nav?.mode ?? 'auto';
     const sidebarCollapsible = props.sidebar?.collapsible ?? true;
     const nav = (_jsx(Link, { href: props.nav?.url ?? '/', className: cn('inline-flex items-center gap-2.5 font-semibold empty:hidden', navMode === 'auto' && 'md:hidden'), children: props.nav?.title }));
-    return (_jsxs(Navbar, { mode: navMode, children: [_jsxs("div", { className: cn('flex flex-row border-b px-4 h-14', navMode === 'auto' && 'md:px-6'), children: [_jsxs("div", { className: cn('flex flex-row items-center', navMode === 'top' && 'flex-1 pe-4'), children: [sidebarCollapsible && navMode === 'auto' ? (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
+    return (_jsxs(Navbar, { mode: navMode, children: [_jsxs("div", { className: cn('flex border-b px-4 flex-1', navMode === 'auto' && 'md:px-6'), children: [_jsxs("div", { className: cn('flex flex-row items-center', navMode === 'top' && 'flex-1 pe-4'), children: [sidebarCollapsible && navMode === 'auto' ? (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
                                     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] }), slots('lg', props.searchToggle, _jsx(LargeSearchToggle, { hideIfDisabled: true, className: cn('w-full my-auto rounded-xl max-md:hidden', navMode === 'top' ? 'max-w-sm px-2' : '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
+                                }), 'text-fd-muted-foreground -ms-1.5 me-2 data-[collapsed=false]:hidden max-md:hidden'), children: _jsx(SidebarIcon, {}) })) : null, nav] }), slots('lg', props.searchToggle, _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')
                                     .map((item, i) => (_jsx(NavbarLinkItem, { item: item, className: "text-sm text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground" }, i))) }), props.nav?.children, slots('sm', props.searchToggle, _jsx(SearchToggle, { hideIfDisabled: true, className: "md:hidden" })), _jsx(NavbarSidebarTrigger, { className: "-me-1.5 md:hidden" }), links
                                 .filter((item) => item.type === 'icon')

package/dist/page-client.js

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