fumadocs-ui 14.7.7 → 15.0.0

package/dist/components/dialog/search.js

@@ -17,7 +17,7 @@ export function SearchDialog({ open, onOpenChange, footer, links = [], search, o
         content: name,
         url: link,
     })), [links]);
-    return (_jsxs(Dialog, { open: open, onOpenChange: onOpenChange, children: [_jsx(DialogOverlay, { className: "fixed inset-0 z-50 bg-black/30 backdrop-blur-sm data-[state=closed]:animate-fd-fade-out data-[state=open]:animate-fd-fade-in" }), _jsxs(DialogContent, { "aria-describedby": undefined, className: "fixed left-1/2 top-[10vh] z-50 w-[98vw] max-w-screen-sm origin-left -translate-x-1/2 rounded-lg border bg-fd-popover text-fd-popover-foreground shadow-lg data-[state=closed]:animate-fd-dialog-out data-[state=open]:animate-fd-dialog-in", children: [_jsx(DialogTitle, { className: "hidden", children: text.search }), _jsxs("div", { className: "flex flex-row items-center gap-2 px-3", children: [_jsx(LoadingIndicator, { isLoading: isLoading ?? false }), _jsx("input", { value: search, onChange: (e) => {
+    return (_jsxs(Dialog, { open: open, onOpenChange: onOpenChange, children: [_jsx(DialogOverlay, { className: "fixed inset-0 z-50 bg-black/30 backdrop-blur-sm data-[state=closed]:animate-fd-fade-out data-[state=open]:animate-fd-fade-in" }), _jsxs(DialogContent, { "aria-describedby": undefined, className: "fixed left-1/2 top-[10vh] z-50 w-[98vw] max-w-screen-sm -translate-x-1/2 rounded-lg border bg-fd-popover text-fd-popover-foreground shadow-lg data-[state=closed]:animate-fd-dialog-out data-[state=open]:animate-fd-dialog-in", children: [_jsx(DialogTitle, { className: "hidden", children: text.search }), _jsxs("div", { className: "flex flex-row items-center gap-2 px-3", children: [_jsx(LoadingIndicator, { isLoading: isLoading ?? false }), _jsx("input", { value: search, onChange: (e) => {
                                     onSearchChange(e.target.value);
                                 }, placeholder: text.search, className: "w-0 flex-1 bg-transparent py-3 text-base placeholder:text-fd-muted-foreground focus-visible:outline-none" }), _jsx("button", { type: "button", "aria-label": "Close Search", onClick: () => onOpenChange(false), className: cn(buttonVariants({
                                     color: 'outline',
@@ -38,8 +38,11 @@ function SearchResults({ items, onSelect, ...props }) {
         (!active || items.every((item) => item.id !== active))) {
         setActive(items[0].id);
     }
-    const onOpen = (url) => {
-        router.push(url);
+    const onOpen = ({ external, url }) => {
+        if (external)
+            window.open(url, '_blank')?.focus();
+        else
+            router.push(url);
         onSelect?.(url);
         sidebar.setOpen(false);
     };
@@ -56,7 +59,7 @@ function SearchResults({ items, onSelect, ...props }) {
         if (e.key === 'Enter') {
             const selected = items.find((item) => item.id === active);
             if (selected)
-                onOpen(selected.url);
+                onOpen(selected);
             e.preventDefault();
         }
     }
@@ -70,7 +73,7 @@ function SearchResults({ items, onSelect, ...props }) {
         };
     }, []);
     return (_jsxs("div", { ...props, className: cn('flex max-h-[460px] flex-col overflow-y-auto border-t p-2', props.className), children: [items.length === 0 ? (_jsx("div", { className: "py-12 text-center text-sm", children: text.searchNoResult })) : null, items.map((item) => (_jsxs(CommandItem, { value: item.id, active: active, onActiveChange: setActive, onClick: () => {
-                    onOpen(item.url);
+                    onOpen(item);
                 }, children: [item.type !== 'page' ? (_jsx("div", { role: "none", className: "ms-2 h-full min-h-10 w-px bg-fd-border" })) : null, icons[item.type], _jsx("p", { className: "w-0 flex-1 truncate", children: item.content })] }, item.id)))] }));
 }
 function LoadingIndicator({ isLoading }) {
@@ -93,7 +96,7 @@ const itemVariants = cva('rounded-md border px-2 py-0.5 text-xs font-medium text
     },
 });
 export function TagsList({ tag, onTagChange, items, allowClear, ...props }) {
-    return (_jsxs("div", { ...props, className: cn('flex flex-row items-center gap-1', props.className), children: [items.map((item) => (_jsx("button", { type: "button", "data-active": tag === item.value, className: cn(itemVariants({ active: tag === item.value }), item.props?.className), onClick: () => {
+    return (_jsxs("div", { ...props, className: cn('flex flex-row items-center gap-1 flex-wrap', props.className), children: [items.map((item) => (_jsx("button", { type: "button", "data-active": tag === item.value, className: cn(itemVariants({ active: tag === item.value }), item.props?.className), onClick: () => {
                     if (tag === item.value && allowClear) {
                         onTagChange(undefined);
                     }

package/dist/components/layout/toc.js

@@ -11,7 +11,7 @@ import { ChevronRight, Text } from 'lucide-react';
 import { usePageStyles } from '../../contexts/layout';
 export function Toc(props) {
     const { toc } = usePageStyles();
-    return (_jsx("div", { id: "nd-toc", ...props, className: cn('sticky top-fd-layout-top h-[var(--fd-toc-height)] pb-2 pt-12', toc, props.className), style: {
+    return (_jsx("div", { id: "nd-toc", ...props, className: cn('sticky top-[calc(var(--fd-banner-height)+var(--fd-nav-height))] h-[var(--fd-toc-height)] pb-2 pt-12', toc, props.className), style: {
             ...props.style,
             '--fd-toc-height': 'calc(100dvh - var(--fd-banner-height) - var(--fd-nav-height))',
         }, children: _jsx("div", { className: "flex h-full w-[var(--fd-toc-width)] max-w-full flex-col gap-3 pe-4", children: props.children }) }));

package/dist/components/ui/button.d.ts

@@ -1,5 +1,5 @@
 export declare const buttonVariants: (props?: ({
-    color?: "outline" | "ghost" | "secondary" | null | undefined;
+    color?: "primary" | "outline" | "ghost" | "secondary" | null | undefined;
     size?: "sm" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //# sourceMappingURL=button.d.ts.map

package/dist/components/ui/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc;;;8EAgB1B,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc;;;8EAkB1B,CAAC"}

package/dist/components/ui/button.js

@@ -2,6 +2,7 @@ import { cva } from 'class-variance-authority';
 export const buttonVariants = cva('inline-flex items-center justify-center rounded-md p-2 text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50', {
     variants: {
         color: {
+            primary: 'bg-fd-primary text-fd-primary-foreground hover:bg-fd-primary/80',
             outline: 'border hover:bg-fd-accent hover:text-fd-accent-foreground',
             ghost: 'hover:bg-fd-accent hover:text-fd-accent-foreground',
             secondary: 'border bg-fd-secondary text-fd-secondary-foreground hover:bg-fd-accent hover:text-fd-accent-foreground',

package/dist/components/ui/popover.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { cn } from '../../utils/cn';
 const Popover = PopoverPrimitive.Root;
 const PopoverTrigger = PopoverPrimitive.Trigger;
-const PopoverContent = React.forwardRef(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, side: "bottom", className: cn('z-50 min-w-[220px] max-w-[98vw] rounded-lg border bg-fd-popover p-2 text-sm text-fd-popover-foreground shadow-md focus-visible:outline-none data-[state=closed]:animate-fd-popover-out data-[state=open]:animate-fd-popover-in', className), ...props }) })));
+const PopoverContent = React.forwardRef(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, side: "bottom", className: cn('z-50 min-w-[220px] max-w-[98vw] rounded-lg border bg-fd-popover p-2 text-sm text-fd-popover-foreground shadow-lg focus-visible:outline-none data-[state=closed]:animate-fd-popover-out data-[state=open]:animate-fd-popover-in', className), ...props }) })));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 const PopoverClose = PopoverPrimitive.PopoverClose;
 export { Popover, PopoverTrigger, PopoverContent, PopoverClose };

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":"AAIA,OAAO,EACL,KAAK,oBAAoB,EAEzB,KAAK,cAAc,EAEnB,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AACf,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAU1D,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAInE,OAAO,KAAK,EACV,uBAAuB,EACvB,uBAAuB,EACxB,MAAM,6BAA6B,CAAC;AAGrC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE/D,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC/D;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6BD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,YAAY,2CAqDrD;AAED,wBAAgB,OAAO,CAAC,EACtB,gBAAoB,EACpB,QAAe,EACf,KAAK,EACL,GAAG,KAAK,EACT,EAAE,YAAY,GAAG;IAAE,KAAK,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAA;CAAE,2CAuC3D;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CASlE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAYlE;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,eAAe,2CAarD;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,oBAAoB,CAAC,2CAS3E;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,SAAS,GAAG;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,2CAiBA;AAED,wBAAgB,aAAa,CAAC,EAC5B,WAAmB,EACnB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,2CAgBA;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,uBAAuB,2CAelE;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,2CA8BjD;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,uBAAuB,2CAQlE;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,2CAwB/C;AAgBD;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACzC,eAqDA"}
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/sidebar.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,oBAAoB,EAEzB,KAAK,cAAc,EAEnB,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AACf,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAU1D,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAInE,OAAO,KAAK,EACV,uBAAuB,EACvB,uBAAuB,EACxB,MAAM,6BAA6B,CAAC;AAGrC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE/D,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC/D;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2BD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,YAAY,2CAqDrD;AAED,wBAAgB,OAAO,CAAC,EACtB,gBAAoB,EACpB,QAAe,EACf,KAAK,EACL,GAAG,KAAK,EACT,EAAE,YAAY,GAAG;IAAE,KAAK,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAA;CAAE,2CAwC3D;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CASlE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAYlE;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,eAAe,2CAarD;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,oBAAoB,CAAC,2CAe3E;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,SAAS,GAAG;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,2CAsBA;AAED,wBAAgB,aAAa,CAAC,EAC5B,WAAmB,EACnB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,2CAgBA;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,uBAAuB,2CAqBlE;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,2CAmCjD;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,uBAAuB,2CAmBlE;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,2CAwB/C;AAgBD;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACzC,eAsDA"}

package/dist/layouts/docs/sidebar.js

@@ -14,16 +14,16 @@ import { useSidebar } from '../../contexts/sidebar';
 import { buttonVariants } from '../../components/ui/button';
 import { cva } from 'class-variance-authority';
 import { useTreeContext, useTreePath } from '../../contexts/tree';
-const itemVariants = cva('flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0', {
+const itemVariants = cva('relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0', {
     variants: {
         active: {
-            true: 'bg-fd-primary/10 font-medium text-fd-primary',
+            true: 'bg-fd-primary/10 text-fd-primary',
             false: 'transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none',
         },
     },
 });
-const Context = createContext(undefined);
-const FolderContext = createContext(undefined);
+const Context = createContext(null);
+const FolderContext = createContext(null);
 export function CollapsibleSidebar(props) {
     const { collapsed } = useSidebar();
     const [hover, setHover] = useState(false);
@@ -60,9 +60,10 @@ export function Sidebar({ defaultOpenLevel = 0, prefetch = true, inner, ...props
         return {
             defaultOpenLevel,
             prefetch,
+            level: 1,
         };
     }, [defaultOpenLevel, prefetch]);
-    return (_jsx(Context.Provider, { value: context, children: _jsx(Base.SidebarList, { id: "nd-sidebar", blockScrollingWidth: 768, ...props, className: cn('fixed top-fd-layout-top z-30 bg-fd-card text-sm md:sticky md:h-[var(--fd-sidebar-height)]', 'max-md:inset-x-0 max-md:bottom-0 max-md:bg-fd-background/80 max-md:text-[15px] max-md:backdrop-blur-lg max-md:data-[open=false]:invisible', props.className), style: {
+    return (_jsx(Context.Provider, { value: context, children: _jsx(Base.SidebarList, { id: "nd-sidebar", blockScrollingWidth: 768, ...props, className: cn('fixed top-[calc(var(--fd-banner-height)+var(--fd-nav-height))] z-30 bg-fd-card text-sm md:sticky md:h-[var(--fd-sidebar-height)]', 'max-md:inset-x-0 max-md:bottom-0 max-md:bg-fd-background/80 max-md:text-[15px] max-md:backdrop-blur-lg max-md:data-[open=false]:invisible', props.className), style: {
                 ...props.style,
                 '--fd-sidebar-height': 'calc(100dvh - var(--fd-banner-height) - var(--fd-nav-height))',
             }, children: _jsx("div", { ...inner, className: cn('flex size-full max-w-full flex-col pt-2 md:ms-auto md:w-[var(--fd-sidebar-width)] md:border-e md:pt-4', inner?.className), children: props.children }) }) }));
@@ -79,13 +80,20 @@ export function SidebarViewport(props) {
             }, children: props.children }) }));
 }
 export function SidebarSeparator(props) {
-    return (_jsx("p", { ...props, className: cn('mb-2 px-2 text-sm font-medium', props.className), children: props.children }));
+    const { level } = useInternalContext();
+    return (_jsx("p", { ...props, className: cn('mb-2 px-2 text-sm font-medium', props.className), style: {
+            paddingInlineStart: getOffset(level),
+            ...props.style,
+        }, children: props.children }));
 }
 export function SidebarItem({ icon, ...props }) {
     const pathname = usePathname();
     const active = props.href !== undefined && isActive(props.href, pathname, false);
-    const { prefetch } = useInternalContext();
-    return (_jsxs(Link, { ...props, "data-active": active, className: cn(itemVariants({ active }), props.className), prefetch: prefetch, children: [icon ?? (props.external ? _jsx(ExternalLink, {}) : null), props.children] }));
+    const { prefetch, level } = useInternalContext();
+    return (_jsxs(Link, { ...props, "data-active": active, className: cn(itemVariants({ active }), props.className), prefetch: prefetch, style: {
+            paddingInlineStart: getOffset(level),
+            ...props.style,
+        }, children: [_jsx(Border, { level: level, active: active }), icon ?? (props.external ? _jsx(ExternalLink, {}) : null), props.children] }));
 }
 export function SidebarFolder({ defaultOpen = false, ...props }) {
     const [open, setOpen] = useState(defaultOpen);
@@ -96,12 +104,16 @@ export function SidebarFolder({ defaultOpen = false, ...props }) {
     return (_jsx(Collapsible, { open: open, onOpenChange: setOpen, ...props, children: _jsx(FolderContext.Provider, { value: useMemo(() => ({ open, setOpen }), [open]), children: props.children }) }));
 }
 export function SidebarFolderTrigger(props) {
+    const { level } = useInternalContext();
     const { open } = useFolderContext();
-    return (_jsxs(CollapsibleTrigger, { ...props, className: cn(itemVariants({ active: false }), 'w-full'), children: [props.children, _jsx(ChevronDown, { "data-icon": true, className: cn('ms-auto transition-transform', !open && '-rotate-90') })] }));
+    return (_jsxs(CollapsibleTrigger, { ...props, className: cn(itemVariants({ active: false }), 'w-full'), style: {
+            paddingInlineStart: getOffset(level),
+            ...props.style,
+        }, children: [_jsx(Border, { level: level }), props.children, _jsx(ChevronDown, { "data-icon": true, className: cn('ms-auto transition-transform', !open && '-rotate-90') })] }));
 }
 export function SidebarFolderLink(props) {
     const { open, setOpen } = useFolderContext();
-    const { prefetch } = useInternalContext();
+    const { prefetch, level } = useInternalContext();
     const pathname = usePathname();
     const active = props.href !== undefined && isActive(props.href, pathname, false);
     return (_jsxs(Link, { ...props, "data-active": active, className: cn(itemVariants({ active }), 'w-full', props.className), onClick: (e) => {
@@ -112,10 +124,17 @@ export function SidebarFolderLink(props) {
             else {
                 setOpen((prev) => !active || !prev);
             }
-        }, prefetch: prefetch, children: [props.children, _jsx(ChevronDown, { "data-icon": true, className: cn('ms-auto transition-transform', !open && '-rotate-90') })] }));
+        }, prefetch: prefetch, style: {
+            paddingInlineStart: getOffset(level),
+            ...props.style,
+        }, children: [_jsx(Border, { level: level, active: active }), props.children, _jsx(ChevronDown, { "data-icon": true, className: cn('ms-auto transition-transform', !open && '-rotate-90') })] }));
 }
 export function SidebarFolderContent(props) {
-    return (_jsx(CollapsibleContent, { ...props, children: _jsx("div", { className: "ms-3 border-s py-1.5 ps-1.5 md:ms-2", children: props.children }) }));
+    const ctx = useInternalContext();
+    return (_jsx(CollapsibleContent, { ...props, className: cn('relative', props.className), children: _jsxs(Context, { value: useMemo(() => ({
+                ...ctx,
+                level: ctx.level + 1,
+            }), [ctx]), children: [_jsx("div", { className: "absolute w-px inset-y-0 bg-fd-border start-3" }), props.children] }) }));
 }
 export function SidebarCollapseTrigger(props) {
     const { collapsed, setCollapsed } = useSidebar();
@@ -147,7 +166,7 @@ export function SidebarPageTree(props) {
         const { Separator, Item, Folder } = props.components ?? {};
         function renderSidebarList(items, level) {
             return items.map((item, i) => {
-                const id = `${item.type}_${i.toString()}`;
+                const id = `${item.type}_${i}`;
                 if (item.type === 'separator') {
                     if (Separator)
                         return _jsx(Separator, { item: item }, id);
@@ -157,7 +176,7 @@ export function SidebarPageTree(props) {
                     const children = renderSidebarList(item.children, level + 1);
                     if (Folder)
                         return (_jsx(Folder, { item: item, level: level, children: children }, id));
-                    return (_jsx(PageTreeFolder, { item: item, level: level, children: children }, id));
+                    return (_jsx(PageTreeFolder, { item: item, children: children }, id));
                 }
                 if (Item)
                     return _jsx(Item, { item: item }, item.url);
@@ -167,8 +186,16 @@ export function SidebarPageTree(props) {
         return renderSidebarList(root.children, 1);
     }, [root, props.components]);
 }
-function PageTreeFolder({ item, children, level, }) {
-    const { defaultOpenLevel } = useInternalContext();
+function PageTreeFolder({ item, ...props }) {
+    const { defaultOpenLevel, level } = useInternalContext();
     const path = useTreePath();
-    return (_jsxs(SidebarFolder, { defaultOpen: (item.defaultOpen ?? defaultOpenLevel >= level) || path.includes(item), children: [item.index ? (_jsxs(SidebarFolderLink, { href: item.index.url, external: item.index.external, children: [item.icon, item.name] })) : (_jsxs(SidebarFolderTrigger, { children: [item.icon, item.name] })), _jsx(SidebarFolderContent, { children: children })] }));
+    return (_jsxs(SidebarFolder, { defaultOpen: (item.defaultOpen ?? defaultOpenLevel >= level) || path.includes(item), children: [item.index ? (_jsxs(SidebarFolderLink, { href: item.index.url, external: item.index.external, ...props, children: [item.icon, item.name] })) : (_jsxs(SidebarFolderTrigger, { ...props, children: [item.icon, item.name] })), _jsx(SidebarFolderContent, { children: props.children })] }));
+}
+function getOffset(level) {
+    return `calc(var(--spacing) * ${(level > 1 ? level : 0) * 2 + 2})`;
+}
+function Border({ level, active }) {
+    if (level <= 1)
+        return null;
+    return (_jsx("div", { className: cn('absolute w-px inset-y-2 z-[2] start-3', active && 'bg-fd-primary') }));
 }

package/dist/layouts/docs.js

@@ -21,7 +21,7 @@ export function DocsLayout({ nav: { enabled: navEnabled = true, component: navRe
     const links = getLinks(props.links ?? [], props.githubUrl);
     const Aside = collapsible ? CollapsibleSidebar : Sidebar;
     const tabs = getSidebarTabsFromOptions(tabOptions, props.tree) ?? [];
-    const variables = cn('[--fd-tocnav-height:36px] md:[--fd-sidebar-width:268px] xl:[--fd-toc-width:268px] xl:[--fd-tocnav-height:0px]', !navReplace && navEnabled
+    const variables = cn('[--fd-tocnav-height:36px] md:[--fd-sidebar-width:268px] xl:md:[--fd-sidebar-width:286px] xl:[--fd-toc-width:286px] xl:[--fd-tocnav-height:0px]', !navReplace && navEnabled
         ? '[--fd-nav-height:3.5rem] md:[--fd-nav-height:0px]'
         : undefined);
     const pageStyles = {

package/dist/page.client.js

@@ -17,7 +17,7 @@ export function TocNav(props) {
     const { open } = useSidebar();
     const { tocNav } = usePageStyles();
     const { isTransparent } = useNav();
-    return (_jsx("header", { id: "nd-tocnav", ...props, className: cn('sticky top-fd-layout-top z-10 flex flex-row items-center border-b border-fd-foreground/10 text-sm backdrop-blur-md transition-colors', !isTransparent && 'bg-fd-background/80', open && 'opacity-0', tocNav, props.className), style: {
+    return (_jsx("header", { id: "nd-tocnav", ...props, className: cn('sticky top-[calc(var(--fd-banner-height)+var(--fd-nav-height))] z-10 flex flex-row items-center border-b border-fd-foreground/10 text-sm backdrop-blur-md transition-colors', !isTransparent && 'bg-fd-background/80', open && 'opacity-0', tocNav, props.className), style: {
             ...props.style,
             '--fd-toc-top-with-offset': 'calc(4px + var(--fd-banner-height) + var(--fd-nav-height))',
         }, children: props.children }));