fumadocs-ui 14.2.1 → 14.3.0

package/dist/i18n.js

@@ -1,50 +1,32 @@
-"use client";
-import {
-  I18nContext,
-  useI18n
-} from "./chunk-EFMHXXHW.js";
-import "./chunk-MLKGABMK.js";
-
-// src/i18n.tsx
-import { useCallback } from "react";
-import { useRouter, usePathname } from "next/navigation";
-import { jsx } from "react/jsx-runtime";
-function I18nProvider({
-  locales = [],
-  locale,
-  ...props
-}) {
-  const context = useI18n();
-  const router = useRouter();
-  const segments = usePathname().split("/").filter((v) => v.length > 0);
-  const onChange = useCallback(
-    (v) => {
-      if (segments[0] !== locale) {
-        segments.unshift(v);
-      } else {
-        segments[0] = v;
-      }
-      router.push(`/${segments.join("/")}`);
-      router.refresh();
-    },
-    [locale, segments, router]
-  );
-  return /* @__PURE__ */ jsx(
-    I18nContext.Provider,
-    {
-      value: {
-        locale,
-        locales,
-        text: {
-          ...context.text,
-          ...props.translations
-        },
-        onChange: props.onChange ?? onChange
-      },
-      children: props.children
-    }
-  );
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { useRouter, usePathname } from 'next/navigation';
+import { useI18n, I18nContext, } from './contexts/i18n';
+export function I18nProvider({ locales = [], locale, ...props }) {
+    const context = useI18n();
+    const router = useRouter();
+    const segments = usePathname()
+        .split('/')
+        .filter((v) => v.length > 0);
+    const onChange = useCallback((v) => {
+        // If locale prefix hidden
+        if (segments[0] !== locale) {
+            segments.unshift(v);
+        }
+        else {
+            segments[0] = v;
+        }
+        router.push(`/${segments.join('/')}`);
+        router.refresh();
+    }, [locale, segments, router]);
+    return (_jsx(I18nContext.Provider, { value: {
+            locale,
+            locales,
+            text: {
+                ...context.text,
+                ...props.translations,
+            },
+            onChange: props.onChange ?? onChange,
+        }, children: props.children }));
 }
-export {
-  I18nProvider
-};

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

@@ -0,0 +1,4 @@
+import { type HTMLAttributes } from 'react';
+export declare function Navbar(props: HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
+export declare function NavbarSidebarTrigger(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=navbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navbar.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/navbar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAc,MAAM,OAAO,CAAC;AAOxD,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,2CAiBxD;AAED,wBAAgB,oBAAoB,4CAgBnC"}

package/dist/layouts/docs/navbar.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSidebar } from '../../contexts/sidebar';
+import { useContext } from 'react';
+import { NavContext } from '../../components/layout/nav';
+import { cn } from '../../utils/cn';
+import { SidebarTrigger } from 'fumadocs-core/sidebar';
+import { buttonVariants } from '../../components/ui/button';
+import { Menu, X } from 'lucide-react';
+export function Navbar(props) {
+    const { open } = useSidebar();
+    const { isTransparent } = useContext(NavContext);
+    return (_jsx("header", { id: "nd-subnav", ...props, className: cn('sticky top-[var(--fd-banner-height)] z-40 flex flex-row items-center border-b border-fd-foreground/10 px-4 transition-colors', (!isTransparent || open) && 'bg-fd-background/80 backdrop-blur-lg', props.className), children: props.children }));
+}
+export function NavbarSidebarTrigger() {
+    const { open } = useSidebar();
+    return (_jsx(SidebarTrigger, { className: cn(buttonVariants({
+            color: 'ghost',
+            size: 'icon',
+            className: '-me-2 md:hidden',
+        })), children: open ? _jsx(X, {}) : _jsx(Menu, {}) }));
+}

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

@@ -0,0 +1,40 @@
+import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } 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';
+export interface SidebarProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Open folders by default if their level is lower or equal to a specific level
+     * (Starting from 1)
+     *
+     * @defaultValue 0
+     */
+    defaultOpenLevel?: number;
+    /**
+     * Prefetch links
+     *
+     * @defaultValue true
+     */
+    prefetch?: boolean;
+}
+export declare function CollapsibleSidebar(props: SidebarProps): import("react/jsx-runtime").JSX.Element;
+export declare function Sidebar({ defaultOpenLevel, prefetch, inner, ...props }: SidebarProps & {
+    inner?: HTMLAttributes<HTMLDivElement>;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarHeader(props: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarFooter(props: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarViewport(props: ScrollAreaProps): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarSeparator(props: HTMLAttributes<HTMLParagraphElement>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarItem({ icon, ...props }: LinkProps & {
+    icon?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarFolder({ level, defaultOpen, ...props }: {
+    children: ReactNode;
+    defaultOpen?: boolean;
+    level: number;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarFolderTrigger(props: CollapsibleTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarFolderLink(props: LinkProps): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarFolderContent(props: CollapsibleContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarCollapseTrigger(props: ButtonHTMLAttributes<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=sidebar.d.ts.map

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

@@ -0,0 +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,EAOf,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;AAErC,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,2CA4DrD;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,2CAYlE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAYlE;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,eAAe,2CAYrD;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,oBAAoB,CAAC,2CAY3E;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,KAAK,EACL,WAAW,EACX,GAAG,KAAK,EACT,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;CACf,2CAkBA;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,uBAAuB,2CAelE;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,2CA0CjD;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,uBAAuB,2CAQlE;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,2CAuB/C"}

package/dist/layouts/docs/sidebar.js

@@ -0,0 +1,146 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, ExternalLink, SidebarIcon } from 'lucide-react';
+import * as Base from 'fumadocs-core/sidebar';
+import { usePathname } from 'next/navigation';
+import { createContext, useCallback, useContext, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import Link from 'fumadocs-core/link';
+import { useOnChange } from 'fumadocs-core/utils/use-on-change';
+import { cn } from '../../utils/cn';
+import { ScrollArea, ScrollViewport } from '../../components/ui/scroll-area';
+import { isActive } from '../../utils/is-active';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '../../components/ui/collapsible';
+import { useSidebar } from '../../contexts/sidebar';
+import { buttonVariants } from '../../components/ui/button';
+import { cva } from 'class-variance-authority';
+const itemVariants = cva('flex flex-row items-center gap-2 rounded-md px-3 py-2 text-fd-muted-foreground transition-colors duration-100 [overflow-wrap:anywhere] md:px-2 md:py-1.5 [&_svg]:size-4', {
+    variants: {
+        active: {
+            true: 'bg-fd-primary/10 font-medium text-fd-primary',
+            false: 'hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none',
+        },
+    },
+});
+const Context = createContext(undefined);
+const FolderContext = createContext(undefined);
+export function CollapsibleSidebar(props) {
+    const { collapsed } = useSidebar();
+    const [hover, setHover] = useState(false);
+    const timerRef = useRef(0);
+    const closeTimeRef = useRef(0);
+    useOnChange(collapsed, () => {
+        setHover(false);
+        closeTimeRef.current = Date.now() + 150;
+    });
+    const onEnter = useCallback((e) => {
+        if (e.pointerType === 'touch' || closeTimeRef.current > Date.now())
+            return;
+        window.clearTimeout(timerRef.current);
+        setHover(true);
+    }, []);
+    const onLeave = useCallback((e) => {
+        if (e.pointerType === 'touch')
+            return;
+        window.clearTimeout(timerRef.current);
+        timerRef.current = window.setTimeout(() => {
+            setHover(false);
+            closeTimeRef.current = Date.now() + 150;
+        }, Math.min(e.clientX, document.body.clientWidth - e.clientX) > 100
+            ? 0
+            : 500);
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx(SidebarCollapseTrigger, { className: cn('fixed bottom-3 start-2 z-20 transition-opacity max-md:hidden', (!collapsed || hover) && 'opacity-0') }), _jsx(Sidebar, { ...props, onPointerEnter: onEnter, onPointerLeave: onLeave, className: cn('transition-[flex,margin,opacity,transform]', collapsed &&
+                    'md:-me-[var(--fd-sidebar-offset)] md:flex-initial md:translate-x-[calc(var(--fd-sidebar-offset)*-1)] rtl:md:translate-x-[var(--fd-sidebar-offset)]', collapsed && hover && 'md:translate-x-0', collapsed && !hover && 'md:z-10 md:opacity-0', props.className), style: {
+                    '--fd-sidebar-offset': 'calc(var(--fd-sidebar-width) - 30px)',
+                } })] }));
+}
+export function Sidebar({ defaultOpenLevel = 0, prefetch = true, inner, ...props }) {
+    const context = useMemo(() => {
+        return {
+            defaultOpenLevel,
+            prefetch,
+        };
+    }, [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)] md:flex-1', '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 flex-col pt-2 md:ms-auto md:w-[var(--fd-sidebar-width)] md:border-e md:pt-4', inner?.className), children: props.children }) }) }));
+}
+export function SidebarHeader(props) {
+    return (_jsx("div", { ...props, className: cn('flex flex-col gap-2 px-4 empty:hidden md:px-3', props.className), children: props.children }));
+}
+export function SidebarFooter(props) {
+    return (_jsx("div", { ...props, className: cn('flex flex-col border-t px-4 py-3 empty:hidden', props.className), children: props.children }));
+}
+export function SidebarViewport(props) {
+    return (_jsx(ScrollArea, { ...props, className: cn('h-full', props.className), children: _jsx(ScrollViewport, { style: {
+                maskImage: 'linear-gradient(to bottom, transparent 2px, white 16px)',
+            }, children: props.children }) }));
+}
+export function SidebarSeparator(props) {
+    return (_jsx("p", { ...props, className: cn('mb-2 mt-8 px-3 text-sm font-medium first:mt-0 md:px-2', props.className), children: props.children }));
+}
+export function SidebarItem({ icon, ...props }) {
+    const pathname = usePathname();
+    const active = props.href !== undefined && isActive(props.href, pathname, false);
+    const { prefetch } = useInternalContext();
+    return (_jsxs(Link, { ...props, "data-active": active, className: cn(itemVariants({ active })), prefetch: prefetch, children: [icon ?? (props.external ? _jsx(ExternalLink, {}) : null), props.children] }));
+}
+export function SidebarFolder({ level, defaultOpen, ...props }) {
+    const { defaultOpenLevel } = useInternalContext();
+    const shouldExtend = defaultOpen ?? defaultOpenLevel >= level;
+    const [open, setOpen] = useState(shouldExtend);
+    useOnChange(shouldExtend, (v) => {
+        if (v)
+            setOpen(v);
+    });
+    return (_jsx(Collapsible, { open: open, onOpenChange: setOpen, children: _jsx(FolderContext.Provider, { value: useMemo(() => ({ open, setOpen }), [open]), children: props.children }) }));
+}
+export function SidebarFolderTrigger(props) {
+    const { open } = useFolderContext();
+    return (_jsxs(CollapsibleTrigger, { ...props, className: cn(itemVariants({ active: false }), 'w-full pe-3.5 md:pe-1.5'), children: [props.children, _jsx(ChevronDown, { "data-icon": true, className: cn('ms-auto transition-transform', !open && '-rotate-90') })] }));
+}
+export function SidebarFolderLink(props) {
+    const { open, setOpen } = useFolderContext();
+    const { prefetch } = useInternalContext();
+    const pathname = usePathname();
+    const active = props.href !== undefined && isActive(props.href, pathname, false);
+    useLayoutEffect(() => {
+        if (active) {
+            setOpen(true);
+        }
+    }, [active, setOpen]);
+    return (_jsxs(Link, { ...props, "data-active": active, className: cn(itemVariants({ active }), 'w-full pe-3.5 md:pe-1.5', props.className), onClick: (e) => {
+            if (
+            // clicking on icon
+            e.target.hasAttribute('data-icon') ||
+                active) {
+                setOpen((prev) => !prev);
+                e.preventDefault();
+            }
+        }, prefetch: prefetch, children: [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 md:ps-2", children: props.children }) }));
+}
+export function SidebarCollapseTrigger(props) {
+    const { setCollapsed } = useSidebar();
+    return (_jsx("button", { type: "button", "aria-label": "Collapse Sidebar", ...props, className: cn(buttonVariants({
+            color: 'ghost',
+            size: 'icon',
+        }), props.className), onClick: () => {
+            setCollapsed((prev) => !prev);
+        }, children: _jsx(SidebarIcon, {}) }));
+}
+function useFolderContext() {
+    const ctx = useContext(FolderContext);
+    if (!ctx)
+        throw new Error('Missing sidebar folder');
+    return ctx;
+}
+function useInternalContext() {
+    const ctx = useContext(Context);
+    if (!ctx)
+        throw new Error('<Sidebar /> component required.');
+    return ctx;
+}

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

@@ -1,27 +1,16 @@
-import { ReactNode, ButtonHTMLAttributes } from 'react';
-import { L as LinkItemType, S as SharedNavProps } from '../shared-SScCiV7b.js';
-export { I as IconItem, N as NavProvider } from '../shared-SScCiV7b.js';
-export { RootToggle } from '../components/layout/root-toggle.js';
-export { a as Sidebar } from '../sidebar-CQ4HmzQl.js';
-export { T as TreeContextProvider } from '../tree-06ley65N.js';
-export { LanguageToggle, LanguageToggleText } from '../components/layout/language-toggle.js';
-import 'react/jsx-runtime';
-import 'fumadocs-core/server';
-
-interface MenuItemProps extends React.HTMLAttributes<HTMLElement> {
-    item: LinkItemType;
+import { type ButtonHTMLAttributes, type HTMLAttributes } from 'react';
+import { type LinkItemType } from '../layouts/links';
+import type { SidebarComponents } from '../layouts/docs';
+interface LinksMenuProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    items: LinkItemType[];
 }
-declare function MenuItem({ item, ...props }: MenuItemProps): ReactNode;
-
-declare function ThemeToggle({ className, ...props }: ButtonHTMLAttributes<HTMLButtonElement>): React.ReactElement;
-
-declare function SubNav({ title, url, enableSearch, ...props }: Omit<SharedNavProps, 'transparentMode'> & {
-    className?: string;
-}): React.ReactElement;
-declare function SidebarCollapseTrigger(props: ButtonHTMLAttributes<HTMLButtonElement>): React.ReactElement;
-interface LinksMenuProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    items?: ReactNode;
+export declare function LinksMenu({ items, ...props }: LinksMenuProps): import("react/jsx-runtime").JSX.Element;
+interface MenuItemProps extends HTMLAttributes<HTMLElement> {
+    item: LinkItemType;
 }
-declare function LinksMenu({ items, ...props }: LinksMenuProps): ReactNode;
-
-export { LinksMenu, MenuItem, SidebarCollapseTrigger, SubNav, ThemeToggle };
+export declare function MenuItem({ item, ...props }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarItems(props: {
+    components?: Partial<SidebarComponents>;
+}): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=docs.client.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"docs.client.d.ts","sourceRoot":"","sources":["../../src/layouts/docs.client.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,cAAc,EAGpB,MAAM,OAAO,CAAC;AASf,OAAO,EAAgB,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAQlE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAgBxD,UAAU,cAAe,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IACtE,KAAK,EAAE,YAAY,EAAE,CAAC;CACvB;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAgB5D;AAED,UAAU,aAAc,SAAQ,cAAc,CAAC,WAAW,CAAC;IACzD,IAAI,EAAE,YAAY,CAAC;CACpB;AAED,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAgDzD;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACzC,2CAQA"}

package/dist/layouts/docs.client.js

@@ -1,200 +1,58 @@
-"use client";
-import {
-  RootToggle
-} from "../chunk-IL64LMKR.js";
-import {
-  Sidebar,
-  itemVariants
-} from "../chunk-J6XGK6ZG.js";
-import {
-  BaseLinkItem,
-  ButtonItem,
-  IconItem,
-  ThemeToggle
-} from "../chunk-AFMXKA2S.js";
-import {
-  SearchToggle
-} from "../chunk-W36BQGMB.js";
-import "../chunk-CDPVENXR.js";
-import {
-  LanguageToggle,
-  LanguageToggleText
-} from "../chunk-KZTWSBYY.js";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger
-} from "../chunk-TQJ6YPJ3.js";
-import {
-  buttonVariants
-} from "../chunk-QKOA6KEZ.js";
-import {
-  NavContext,
-  NavProvider,
-  Title
-} from "../chunk-MCX7E6ZW.js";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger
-} from "../chunk-IVBHRX3O.js";
-import "../chunk-2FLZOPQN.js";
-import {
-  ChevronDown,
-  Menu,
-  PanelLeft,
-  X
-} from "../chunk-VPJMNIJX.js";
-import {
-  twMerge
-} from "../chunk-TK3TM3MR.js";
-import {
-  useSearchContext
-} from "../chunk-UUGCW3UP.js";
-import {
-  TreeContextProvider
-} from "../chunk-YL3MZH7N.js";
-import {
-  useSidebar
-} from "../chunk-27HFSL7N.js";
-import "../chunk-EFMHXXHW.js";
-import "../chunk-MLKGABMK.js";
-
-// src/layouts/docs.client.tsx
-import { SidebarTrigger } from "fumadocs-core/sidebar";
-import {
-  useContext,
-  useState
-} from "react";
-import { usePathname } from "next/navigation";
-import { useOnChange } from "fumadocs-core/utils/use-on-change";
-
-// src/layouts/menu-item.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-function MenuItem({ item, ...props }) {
-  if (item.type === "custom")
-    return /* @__PURE__ */ jsx("div", { ...props, className: twMerge("grid", props.className), children: item.children });
-  if (item.type === "menu") {
-    return /* @__PURE__ */ jsxs(Collapsible, { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsxs(
-        CollapsibleTrigger,
-        {
-          ...props,
-          "data-active": false,
-          className: twMerge(itemVariants(), "group/link", props.className),
-          children: [
-            item.icon,
-            item.text,
-            /* @__PURE__ */ jsx(ChevronDown, { className: "ms-auto transition-transform group-data-[state=closed]/link:-rotate-90" })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "ms-2 flex flex-col border-s py-2 ps-2", children: item.items.map((child, i) => /* @__PURE__ */ jsx(MenuItem, { item: child }, i)) }) })
-    ] });
-  }
-  if (item.type === "button") {
-    return /* @__PURE__ */ jsx(ButtonItem, { item, ...props });
-  }
-  return /* @__PURE__ */ jsxs(
-    BaseLinkItem,
-    {
-      item,
-      ...props,
-      className: twMerge(itemVariants(), props.className),
-      children: [
-        item.icon,
-        item.text
-      ]
-    }
-  );
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown } from 'lucide-react';
+import { useState, } from 'react';
+import { usePathname } from 'next/navigation';
+import { useOnChange } from 'fumadocs-core/utils/use-on-change';
+import { cn } from '../utils/cn';
+import { Popover, PopoverContent, PopoverTrigger, } from '../components/ui/popover';
+import { BaseLinkItem } from '../layouts/links';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '../components/ui/collapsible';
+import { cva } from 'class-variance-authority';
+import { SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarItem, SidebarSeparator, } from '../layouts/docs/sidebar';
+import { useTreeContext, useTreePath } from '../contexts/tree';
+import { buttonVariants } from '../components/ui/button';
+const itemVariants = cva('flex flex-row items-center gap-2 rounded-md px-3 py-2.5 text-fd-muted-foreground transition-colors duration-100 [overflow-wrap:anywhere] hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none md:px-2 md:py-1.5 [&_svg]:size-4');
+export function LinksMenu({ items, ...props }) {
+    const [open, setOpen] = useState(false);
+    const pathname = usePathname();
+    useOnChange(pathname, () => {
+        setOpen(false);
+    });
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { ...props }), _jsx(PopoverContent, { className: "flex flex-col p-1", children: items?.map((item, i) => _jsx(MenuItem, { item: item }, i)) })] }));
 }
-
-// src/layouts/docs.client.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function SubNav({
-  title,
-  url,
-  enableSearch = true,
-  ...props
-}) {
-  const { open } = useSidebar();
-  const { isTransparent } = useContext(NavContext);
-  const search = useSearchContext();
-  return /* @__PURE__ */ jsxs2(
-    "header",
-    {
-      id: "nd-subnav",
-      ...props,
-      className: twMerge(
-        "sticky top-[var(--fd-banner-height)] z-40 flex flex-row items-center border-b border-fd-foreground/10 px-4 transition-colors",
-        (!isTransparent || open) && "bg-fd-background/80 backdrop-blur-lg",
-        props.className
-      ),
-      children: [
-        /* @__PURE__ */ jsx2(Title, { url, title }),
-        /* @__PURE__ */ jsx2("div", { className: "flex flex-1 flex-row items-center gap-1", children: props.children }),
-        search.enabled && enableSearch ? /* @__PURE__ */ jsx2(SearchToggle, {}) : null,
-        /* @__PURE__ */ jsx2(
-          SidebarTrigger,
-          {
-            className: twMerge(
-              buttonVariants({
-                color: "ghost",
-                size: "icon",
-                className: "-me-2 md:hidden"
-              })
-            ),
-            children: open ? /* @__PURE__ */ jsx2(X, {}) : /* @__PURE__ */ jsx2(Menu, {})
-          }
-        )
-      ]
+export function MenuItem({ item, ...props }) {
+    if (item.type === 'custom')
+        return (_jsx("div", { ...props, className: cn('grid', props.className), children: item.children }));
+    if (item.type === 'menu') {
+        return (_jsxs(Collapsible, { className: "flex flex-col", children: [_jsxs(CollapsibleTrigger, { ...props, className: cn(itemVariants(), 'group/link', props.className), children: [item.icon, item.text, _jsx(ChevronDown, { className: "ms-auto transition-transform group-data-[state=closed]/link:-rotate-90" })] }), _jsx(CollapsibleContent, { children: _jsx("div", { className: "flex flex-col py-2 ps-2", children: item.items.map((child, i) => (_jsx(MenuItem, { item: child }, i))) }) })] }));
     }
-  );
+    return (_jsxs(BaseLinkItem, { item: item, ...props, className: cn(item.type === 'button'
+            ? buttonVariants({
+                color: 'secondary',
+                className: 'gap-1.5 [&_svg]:size-4',
+            })
+            : itemVariants(), props.className), children: [item.icon, item.text] }));
 }
-function SidebarCollapseTrigger(props) {
-  const { setCollapsed } = useSidebar();
-  return /* @__PURE__ */ jsx2(
-    "button",
-    {
-      type: "button",
-      "aria-label": "Collapse Sidebar",
-      ...props,
-      className: twMerge(
-        buttonVariants({
-          color: "ghost",
-          size: "icon"
-        }),
-        props.className
-      ),
-      onClick: () => {
-        setCollapsed((prev) => !prev);
-      },
-      children: /* @__PURE__ */ jsx2(PanelLeft, {})
-    }
-  );
+export function SidebarItems(props) {
+    const { root } = useTreeContext();
+    return (_jsx("div", { className: "px-2 py-4 md:px-3", children: renderSidebarList(root.children, 1, props?.components ?? {}) }));
 }
-function LinksMenu({ items, ...props }) {
-  const [open, setOpen] = useState(false);
-  const pathname = usePathname();
-  useOnChange(pathname, () => {
-    setOpen(false);
-  });
-  return /* @__PURE__ */ jsxs2(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx2(PopoverTrigger, { ...props }),
-    /* @__PURE__ */ jsx2(PopoverContent, { className: "flex flex-col p-1", children: items })
-  ] });
+function PageTreeFolder({ item, children, level, }) {
+    const path = useTreePath();
+    return (_jsx(SidebarFolder, { defaultOpen: item.defaultOpen || path.includes(item), level: level + 1, children: children }));
+}
+function renderSidebarList(items, level, customComps) {
+    const { Separator, Item, Folder } = customComps;
+    return items.map((item, i) => {
+        const id = `${item.type}_${i.toString()}`;
+        switch (item.type) {
+            case 'separator':
+                return Separator ? (_jsx(Separator, { item: item }, id)) : (_jsx(SidebarSeparator, { children: item.name }, id));
+            case 'folder':
+                return Folder ? (_jsx(Folder, { item: item, level: level + 1 }, id)) : (_jsxs(PageTreeFolder, { item: item, level: level + 1, 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: renderSidebarList(item.children, level + 1, customComps) })] }, id));
+            default:
+                return Item ? (_jsx(Item, { item: item }, item.url)) : (_jsx(SidebarItem, { href: item.url, external: item.external, icon: item.icon, children: item.name }, item.url));
+        }
+    });
 }
-export {
-  IconItem,
-  LanguageToggle,
-  LanguageToggleText,
-  LinksMenu,
-  MenuItem,
-  NavProvider,
-  RootToggle,
-  Sidebar,
-  SidebarCollapseTrigger,
-  SubNav,
-  ThemeToggle,
-  TreeContextProvider
-};