fumadocs-ui 15.2.8 → 16.0.3

package/dist/components/heading.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Link } from 'lucide-react';
+import { Link } from '../icons.js';
 import { cn } from '../utils/cn.js';
 export function Heading({ as, className, ...props }) {
     const As = as ?? 'h1';

package/dist/components/image-zoom.css

@@ -43,6 +43,10 @@
   inset: 0;
 }
 
+[data-rmiz-modal-overlay='visible'] {
+  background-color: var(--color-fd-background);
+}
+
 [data-rmiz-modal-overlay='hidden'] {
   background-color: transparent;
 }

package/dist/components/inline-toc.d.ts

@@ -1,6 +1,6 @@
-import type { TOCItemType } from 'fumadocs-core/server';
+import type { TOCItemType } from 'fumadocs-core/toc';
 import { Collapsible } from './ui/collapsible.js';
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 export interface InlineTocProps extends ComponentProps<typeof Collapsible> {
     items: TOCItemType[];
 }

package/dist/components/inline-toc.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inline-toc.d.ts","sourceRoot":"","sources":["../../src/components/inline-toc.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EACL,WAAW,EAGZ,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,OAAO,WAAW,CAAC;IACxE,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CA+B5D"}
+{"version":3,"file":"inline-toc.d.ts","sourceRoot":"","sources":["../../src/components/inline-toc.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EACL,WAAW,EAGZ,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,OAAO,WAAW,CAAC;IACxE,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CA+B5D"}

package/dist/components/inline-toc.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronDown } from 'lucide-react';
+import { ChevronDown } from '../icons.js';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from './ui/collapsible.js';
 import { cn } from '../utils/cn.js';
 export function InlineTOC({ items, ...props }) {

package/dist/components/layout/language-toggle.js

@@ -11,7 +11,7 @@ export function LanguageToggle(props) {
     return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { "aria-label": context.text.chooseLanguage, ...props, className: cn(buttonVariants({
                     color: 'ghost',
                     className: 'gap-1.5 p-1.5',
-                }), props.className), children: props.children }), _jsxs(PopoverContent, { className: "flex flex-col overflow-hidden p-0", children: [_jsx("p", { className: "mb-1 p-2 text-xs font-medium text-fd-muted-foreground", children: context.text.chooseLanguage }), context.locales.map((item) => (_jsx("button", { type: "button", className: cn('p-2 text-start text-sm', item.locale === context.locale
+                }), props.className), children: props.children }), _jsxs(PopoverContent, { className: "flex flex-col overflow-x-hidden p-0", children: [_jsx("p", { className: "mb-1 p-2 text-xs font-medium text-fd-muted-foreground", children: context.text.chooseLanguage }), context.locales.map((item) => (_jsx("button", { type: "button", className: cn('p-2 text-start text-sm', item.locale === context.locale
                             ? 'bg-fd-primary/10 font-medium text-fd-primary'
                             : 'hover:bg-fd-accent hover:text-fd-accent-foreground'), onClick: () => {
                             context.onChange?.(item.locale);

package/dist/components/layout/root-toggle.d.ts

@@ -1,20 +1,10 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
-export interface Option {
-    /**
-     * Redirect URL of the folder, usually the index page
-     */
-    url: string;
-    icon?: ReactNode;
-    title: ReactNode;
-    description?: ReactNode;
-    /**
-     * Detect from a list of urls
-     */
-    urls?: Set<string>;
-    props?: HTMLAttributes<HTMLElement>;
+import { type ComponentProps, type ReactNode } from 'react';
+import type { SidebarTab } from '../../utils/get-sidebar-tabs.js';
+export interface Option extends SidebarTab {
+    props?: ComponentProps<'a'>;
 }
 export declare function RootToggle({ options, placeholder, ...props }: {
     placeholder?: ReactNode;
     options: Option[];
-} & HTMLAttributes<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;
+} & ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=root-toggle.d.ts.map

package/dist/components/layout/root-toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"root-toggle.d.ts","sourceRoot":"","sources":["../../../src/components/layout/root-toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AAQ/E,MAAM,WAAW,MAAM;IACrB;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAEnB,KAAK,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;CACrC;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,WAAW,EACX,GAAG,KAAK,EACT,EAAE;IACD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB,GAAG,cAAc,CAAC,iBAAiB,CAAC,2CAyDpC"}
+{"version":3,"file":"root-toggle.d.ts","sourceRoot":"","sources":["../../../src/components/layout/root-toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AAO/E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAE3D,MAAM,WAAW,MAAO,SAAQ,UAAU;IACxC,KAAK,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC;CAC7B;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,WAAW,EACX,GAAG,KAAK,EACT,EAAE;IACD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB,GAAG,cAAc,CAAC,QAAQ,CAAC,2CAkF3B"}

package/dist/components/layout/root-toggle.js

@@ -1,11 +1,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ChevronsUpDown } from 'lucide-react';
+import { Check, ChevronsUpDown } from '../../icons.js';
 import { useMemo, useState } from 'react';
 import Link from 'fumadocs-core/link';
 import { usePathname } from 'fumadocs-core/framework';
 import { cn } from '../../utils/cn.js';
-import { isActive } from '../../utils/is-active.js';
+import { isTabActive } from '../../utils/is-active.js';
 import { useSidebar } from '../../contexts/sidebar.js';
 import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover.js';
 export function RootToggle({ options, placeholder, ...props }) {
@@ -13,19 +13,17 @@ export function RootToggle({ options, placeholder, ...props }) {
     const { closeOnRedirect } = useSidebar();
     const pathname = usePathname();
     const selected = useMemo(() => {
-        return options.findLast((item) => item.urls
-            ? item.urls.has(pathname.endsWith('/') ? pathname.slice(0, -1) : pathname)
-            : isActive(item.url, pathname, true));
+        return options.findLast((item) => isTabActive(item, pathname));
     }, [options, pathname]);
     const onClick = () => {
         closeOnRedirect.current = false;
         setOpen(false);
     };
-    const item = selected ? _jsx(Item, { ...selected }) : placeholder;
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [item ? (_jsxs(PopoverTrigger, { ...props, className: cn('flex flex-row items-center gap-2.5 rounded-lg ps-2 pe-4 py-1.5 hover:text-fd-accent-foreground', props.className), children: [item, _jsx(ChevronsUpDown, { className: "size-4 text-fd-muted-foreground" })] })) : null, _jsx(PopoverContent, { className: "w-(--radix-popover-trigger-width) overflow-hidden p-0", children: options.map((item) => (_jsx(Link, { href: item.url, onClick: onClick, ...item.props, className: cn('flex w-full flex-row items-center gap-2 px-2 py-1.5', selected === item
-                        ? 'bg-fd-accent text-fd-accent-foreground'
-                        : 'hover:bg-fd-accent/50', item.props?.className), children: _jsx(Item, { ...item }) }, item.url))) })] }));
-}
-function Item(props) {
-    return (_jsxs(_Fragment, { children: [_jsx(_Fragment, { children: props.icon }), _jsxs("div", { className: "flex-1 text-start", children: [_jsx("p", { className: "text-sm font-medium", children: props.title }), props.description ? (_jsx("p", { className: "text-xs text-fd-muted-foreground", children: props.description })) : null] })] }));
+    const item = selected ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "size-9 shrink-0 empty:hidden md:size-5", children: selected.icon }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium", children: selected.title }), _jsx("p", { className: "text-[13px] text-fd-muted-foreground empty:hidden md:hidden", children: selected.description })] })] })) : (placeholder);
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [item && (_jsxs(PopoverTrigger, { ...props, className: cn('flex items-center gap-2 rounded-lg p-2 border bg-fd-secondary/50 text-start text-fd-secondary-foreground transition-colors hover:bg-fd-accent data-[state=open]:bg-fd-accent data-[state=open]:text-fd-accent-foreground', props.className), children: [item, _jsx(ChevronsUpDown, { className: "shrink-0 ms-auto size-4 text-fd-muted-foreground" })] })), _jsx(PopoverContent, { className: "flex flex-col gap-1 w-(--radix-popover-trigger-width) p-1 fd-scroll-container", children: options.map((item) => {
+                    const isActive = selected && item.url === selected.url;
+                    if (!isActive && item.unlisted)
+                        return;
+                    return (_jsxs(Link, { href: item.url, onClick: onClick, ...item.props, className: cn('flex items-center gap-2 rounded-lg p-1.5 hover:bg-fd-accent hover:text-fd-accent-foreground', item.props?.className), children: [_jsx("div", { className: "shrink-0 size-9 md:mt-1 md:mb-auto md:size-5 empty:hidden", children: item.icon }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium", children: item.title }), _jsx("p", { className: "text-[13px] text-fd-muted-foreground empty:hidden", children: item.description })] }), _jsx(Check, { className: cn('shrink-0 ms-auto size-3.5 text-fd-primary', !isActive && 'invisible') })] }, item.url));
+                }) })] }));
 }

package/dist/components/layout/search-toggle.d.ts

@@ -1,9 +1,11 @@
-import { type ButtonHTMLAttributes } from 'react';
+import type { ComponentProps } from 'react';
 import { type ButtonProps } from '../../components/ui/button.js';
-export declare function SearchToggle({ hideIfDisabled, size, color, ...props }: ButtonHTMLAttributes<HTMLButtonElement> & ButtonProps & {
+interface SearchToggleProps extends Omit<ComponentProps<'button'>, 'color'>, ButtonProps {
     hideIfDisabled?: boolean;
-}): import("react/jsx-runtime").JSX.Element | null;
-export declare function LargeSearchToggle({ hideIfDisabled, ...props }: ButtonHTMLAttributes<HTMLButtonElement> & {
+}
+export declare function SearchToggle({ hideIfDisabled, size, color, ...props }: SearchToggleProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function LargeSearchToggle({ hideIfDisabled, ...props }: ComponentProps<'button'> & {
     hideIfDisabled?: boolean;
 }): import("react/jsx-runtime").JSX.Element | null;
+export {};
 //# sourceMappingURL=search-toggle.d.ts.map

package/dist/components/layout/search-toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search-toggle.d.ts","sourceRoot":"","sources":["../../../src/components/layout/search-toggle.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAKlD,OAAO,EAAE,KAAK,WAAW,EAAkB,MAAM,wBAAwB,CAAC;AAE1E,wBAAgB,YAAY,CAAC,EAC3B,cAAc,EACd,IAAa,EACb,KAAe,EACf,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,GACxC,WAAW,GAAG;IACZ,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,kDAuBF;AAED,wBAAgB,iBAAiB,CAAC,EAChC,cAAc,EACd,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC3C,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,kDA6BA"}
+{"version":3,"file":"search-toggle.d.ts","sourceRoot":"","sources":["../../../src/components/layout/search-toggle.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,OAAO,EAAE,KAAK,WAAW,EAAkB,MAAM,wBAAwB,CAAC;AAE1E,UAAU,iBACR,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC,EAC7C,WAAW;IACb,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,YAAY,CAAC,EAC3B,cAAc,EACd,IAAgB,EAChB,KAAe,EACf,GAAG,KAAK,EACT,EAAE,iBAAiB,kDAuBnB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,cAAc,EACd,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,kDA6BA"}

package/dist/components/layout/search-toggle.js

@@ -1,11 +1,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SearchIcon } from 'lucide-react';
+import { Search } from '../../icons.js';
 import { useSearchContext } from '../../contexts/search.js';
 import { useI18n } from '../../contexts/i18n.js';
 import { cn } from '../../utils/cn.js';
 import { buttonVariants } from '../../components/ui/button.js';
-export function SearchToggle({ hideIfDisabled, size = 'icon', color = 'ghost', ...props }) {
+export function SearchToggle({ hideIfDisabled, size = 'icon-sm', color = 'ghost', ...props }) {
     const { setOpenSearch, enabled } = useSearchContext();
     if (hideIfDisabled && !enabled)
         return null;
@@ -14,14 +14,14 @@ export function SearchToggle({ hideIfDisabled, size = 'icon', color = 'ghost', .
             color,
         }), props.className), "data-search": "", "aria-label": "Open Search", onClick: () => {
             setOpenSearch(true);
-        }, children: _jsx(SearchIcon, { className: "p-px" }) }));
+        }, children: _jsx(Search, {}) }));
 }
 export function LargeSearchToggle({ hideIfDisabled, ...props }) {
     const { enabled, hotKey, setOpenSearch } = useSearchContext();
     const { text } = useI18n();
     if (hideIfDisabled && !enabled)
         return null;
-    return (_jsxs("button", { type: "button", "data-search-full": "", ...props, className: cn('inline-flex items-center gap-2 rounded-full border bg-fd-secondary/50 p-1.5 text-sm text-fd-muted-foreground transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground', props.className), onClick: () => {
+    return (_jsxs("button", { type: "button", "data-search-full": "", ...props, className: cn('inline-flex items-center gap-2 rounded-lg border bg-fd-secondary/50 p-1.5 ps-2 text-sm text-fd-muted-foreground transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground', props.className), onClick: () => {
             setOpenSearch(true);
-        }, children: [_jsx(SearchIcon, { className: "ms-1 size-4" }), text.search, _jsx("div", { className: "ms-auto inline-flex gap-0.5", children: hotKey.map((k, i) => (_jsx("kbd", { className: "rounded-md border bg-fd-background px-1.5", children: k.display }, i))) })] }));
+        }, children: [_jsx(Search, { className: "size-4" }), text.search, _jsx("div", { className: "ms-auto inline-flex gap-0.5", children: hotKey.map((k, i) => (_jsx("kbd", { className: "rounded-md border bg-fd-background px-1.5", children: k.display }, i))) })] }));
 }

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

@@ -1,9 +1,9 @@
-import { type ButtonHTMLAttributes, type FC, type HTMLAttributes, type ReactNode } from 'react';
+import { type ComponentProps, type FC, 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';
-import type { PageTree } from 'fumadocs-core/server';
-export interface SidebarProps extends HTMLAttributes<HTMLElement> {
+import type * as PageTree from 'fumadocs-core/page-tree';
+export interface SidebarProps {
     /**
      * Open folders by default if their level is lower or equal to a specific level
      * (Starting from 1)
@@ -17,25 +17,33 @@ export interface SidebarProps extends HTMLAttributes<HTMLElement> {
      * @defaultValue true
      */
     prefetch?: boolean;
+    /**
+     * Children to render
+     */
+    Content: ReactNode;
+    /**
+     * Alternative children for mobile
+     */
+    Mobile?: ReactNode;
 }
-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 Sidebar({ defaultOpenLevel, prefetch, Mobile, Content, }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarContent(props: ComponentProps<'aside'>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarContentMobile({ className, children, ...props }: ComponentProps<'aside'>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarHeader(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarFooter(props: ComponentProps<'div'>): 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 SidebarSeparator(props: ComponentProps<'p'>): 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({ defaultOpen, ...props }: HTMLAttributes<HTMLDivElement> & {
+export declare function SidebarFolder({ defaultOpen, ...props }: ComponentProps<'div'> & {
     defaultOpen?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function SidebarFolderTrigger(props: CollapsibleTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarFolderTrigger({ className, ...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;
+export declare function SidebarTrigger({ children, ...props }: ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarCollapseTrigger(props: ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
 export interface SidebarComponents {
     Item: FC<{
         item: PageTree.Item;

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

@@ -1 +1 @@
-{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/layout/sidebar.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,oBAAoB,EAEzB,KAAK,EAAE,EAEP,KAAK,cAAc,EACnB,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AACf,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAU1D,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAGnE,OAAO,KAAK,EACV,uBAAuB,EACvB,uBAAuB,EACxB,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAGrD,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,2CAuDrD;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,2CAkB3E;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,2CAiB/C;AAgBD,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAA;KAAE,CAAC,CAAC;IAClC,MAAM,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IAC1E,SAAS,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;CAC7C;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACzC,2CAuDA"}
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/layout/sidebar.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,EAAE,EAEP,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AACf,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAU1D,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAGnE,OAAO,KAAK,EACV,uBAAuB,EACvB,uBAAuB,EACxB,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AAKzD,MAAM,WAAW,YAAY;IAC3B;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AA2BD,wBAAgB,OAAO,CAAC,EACtB,gBAAoB,EACpB,QAAe,EACf,MAAM,EACN,OAAO,GACR,EAAE,YAAY,2CAed;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC,2CAiE5D;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,CAAC,2CA+BzB;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CASzD;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CASzD;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,eAAe,2CAiBrD;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,2CAY1D;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,KAAK,CAAC,GAAG;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,2CAgBA;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAezB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,2CAiCjD;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,uBAAuB,2CAkClE;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAY1B;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAgBrE;AAgBD,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAA;KAAE,CAAC,CAAC;IAClC,MAAM,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IAC1E,SAAS,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;CAC7C;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACzC,2CAuDA"}

package/dist/components/layout/sidebar.js

@@ -1,7 +1,6 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronDown, ExternalLink } from 'lucide-react';
-import * as Base from 'fumadocs-core/sidebar';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, ExternalLink } from '../../icons.js';
 import { usePathname } from 'fumadocs-core/framework';
 import { createContext, Fragment, useContext, useMemo, useRef, useState, } from 'react';
 import Link from 'fumadocs-core/link';
@@ -13,7 +12,9 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '../../comp
 import { useSidebar } from '../../contexts/sidebar.js';
 import { cva } from 'class-variance-authority';
 import { useTreeContext, useTreePath } from '../../contexts/tree.js';
-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', {
+import { useMediaQuery } from 'fumadocs-core/utils/use-media-query';
+import { Presence } from '@radix-ui/react-presence';
+const itemVariants = cva('relative flex flex-row items-center gap-2 rounded-lg p-2 ps-(--sidebar-item-offset) text-start text-fd-muted-foreground [overflow-wrap:anywhere] [&_svg]:size-4 [&_svg]:shrink-0', {
     variants: {
         active: {
             true: 'bg-fd-primary/10 text-fd-primary',
@@ -23,7 +24,18 @@ const itemVariants = cva('relative flex flex-row items-center gap-2 rounded-md p
 });
 const Context = createContext(null);
 const FolderContext = createContext(null);
-export function CollapsibleSidebar(props) {
+export function Sidebar({ defaultOpenLevel = 0, prefetch = true, Mobile, Content, }) {
+    const isMobile = useMediaQuery('(width < 768px)') ?? false;
+    const context = useMemo(() => {
+        return {
+            defaultOpenLevel,
+            prefetch,
+            level: 1,
+        };
+    }, [defaultOpenLevel, prefetch]);
+    return (_jsx(Context.Provider, { value: context, children: isMobile && Mobile != null ? Mobile : Content }));
+}
+export function SidebarContent(props) {
     const { collapsed } = useSidebar();
     const [hover, setHover] = useState(false);
     const timerRef = useRef(0);
@@ -32,7 +44,20 @@ export function CollapsibleSidebar(props) {
         setHover(false);
         closeTimeRef.current = Date.now() + 150;
     });
-    return (_jsx(Sidebar, { ...props, onPointerEnter: (e) => {
+    return (_jsx("aside", { id: "nd-sidebar", ...props, "data-collapsed": collapsed, className: cn('fixed left-0 rtl:left-auto rtl:right-(--removed-body-scroll-bar-size,0) flex flex-col items-end top-(--fd-sidebar-top) bottom-(--fd-sidebar-margin) z-20 bg-fd-card text-sm border-e transition-[top,opacity,translate,width] duration-200 max-md:hidden *:w-(--fd-sidebar-width)', collapsed && [
+            'rounded-xl border translate-x-(--fd-sidebar-offset) rtl:-translate-x-(--fd-sidebar-offset)',
+            hover ? 'z-50 shadow-lg' : 'opacity-0',
+        ], props.className), style: {
+            ...props.style,
+            '--fd-sidebar-offset': hover
+                ? 'calc(var(--spacing) * 2)'
+                : 'calc(16px - 100%)',
+            '--fd-sidebar-margin': collapsed ? '0.5rem' : '0px',
+            '--fd-sidebar-top': `calc(var(--fd-banner-height) + var(--fd-nav-height) + var(--fd-sidebar-margin))`,
+            width: collapsed
+                ? 'var(--fd-sidebar-width)'
+                : 'calc(var(--spacing) + var(--fd-sidebar-width) + var(--fd-layout-offset))',
+        }, onPointerEnter: (e) => {
             if (!collapsed ||
                 e.pointerType === 'touch' ||
                 closeTimeRef.current > Date.now())
@@ -49,52 +74,33 @@ export function CollapsibleSidebar(props) {
             }, Math.min(e.clientX, document.body.clientWidth - e.clientX) > 100
                 ? 0
                 : 500);
-        }, "data-collapsed": collapsed, className: cn('md:transition-all', collapsed &&
-            'md:-me-(--fd-sidebar-width) md:-translate-x-(--fd-sidebar-offset) rtl:md:translate-x-(--fd-sidebar-offset)', collapsed && hover && 'z-50 md:translate-x-0', collapsed && !hover && 'md:opacity-0', props.className), style: {
-            '--fd-sidebar-offset': 'calc(var(--fd-sidebar-width) - 6px)',
-            ...props.style,
-        } }));
+        }, children: props.children }));
 }
-export function Sidebar({ defaultOpenLevel = 0, prefetch = true, inner, ...props }) {
-    const context = useMemo(() => {
-        return {
-            defaultOpenLevel,
-            prefetch,
-            level: 1,
-        };
-    }, [defaultOpenLevel, prefetch]);
-    return (_jsx(Context.Provider, { value: context, children: _jsx(Base.SidebarList, { id: "nd-sidebar", removeScrollOn: "(width < 768px)" // md
-            , ...props, className: cn('fixed top-[calc(var(--fd-banner-height)+var(--fd-nav-height))] z-20 bg-fd-card text-sm md:sticky md:h-(--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-(--fd-sidebar-width) md:border-e md:pt-4', inner?.className), children: props.children }) }) }));
+export function SidebarContentMobile({ className, children, ...props }) {
+    const { open, setOpen } = useSidebar();
+    const state = open ? 'open' : 'closed';
+    return (_jsxs(_Fragment, { children: [_jsx(Presence, { present: open, children: _jsx("div", { "data-state": state, className: "fixed z-40 inset-0 backdrop-blur-xs data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out", onClick: () => setOpen(false) }) }), _jsx(Presence, { present: open, children: ({ present }) => (_jsx("aside", { id: "nd-sidebar-mobile", ...props, "data-state": state, className: cn('fixed text-[15px] flex flex-col shadow-lg border-s end-0 inset-y-0 w-[85%] max-w-[380px] z-40 bg-fd-background data-[state=open]:animate-fd-sidebar-in data-[state=closed]:animate-fd-sidebar-out', !present && 'invisible', className), children: children })) })] }));
 }
 export function SidebarHeader(props) {
-    return (_jsx("div", { ...props, className: cn('flex flex-col gap-2 px-4 empty:hidden', props.className), children: props.children }));
+    return (_jsx("div", { ...props, className: cn('flex flex-col gap-3 p-4 pb-2', 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 }));
+    return (_jsx("div", { ...props, className: cn('flex flex-col border-t p-4 pt-2', props.className), children: props.children }));
 }
 export function SidebarViewport(props) {
-    return (_jsx(ScrollArea, { ...props, className: cn('h-full', props.className), children: _jsx(ScrollViewport, { className: "p-4", style: {
-                maskImage: 'linear-gradient(to bottom, transparent, white 12px)',
+    return (_jsx(ScrollArea, { ...props, className: cn('h-full', props.className), children: _jsx(ScrollViewport, { className: "p-4 overscroll-contain", style: {
+                '--sidebar-item-offset': 'calc(var(--spacing) * 2)',
+                maskImage: 'linear-gradient(to bottom, transparent, white 12px, white calc(100% - 12px), transparent)',
             }, children: props.children }) }));
 }
 export function SidebarSeparator(props) {
-    const { level } = useInternalContext();
-    return (_jsx("p", { ...props, className: cn('inline-flex items-center gap-2 mb-2 px-2 text-sm font-medium [&_svg]:size-4 [&_svg]:shrink-0', props.className), style: {
-            paddingInlineStart: getOffset(level),
-            ...props.style,
-        }, children: props.children }));
+    return (_jsx("p", { ...props, className: cn('inline-flex items-center gap-2 mb-1.5 px-2 ps-(--sidebar-item-offset) empty:mb-0 [&_svg]:size-4 [&_svg]:shrink-0', 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, 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] }));
+    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] }));
 }
 export function SidebarFolder({ defaultOpen = false, ...props }) {
     const [open, setOpen] = useState(defaultOpen);
@@ -104,38 +110,42 @@ 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();
+export function SidebarFolderTrigger({ className, ...props }) {
     const { open } = useFolderContext();
-    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') })] }));
+    return (_jsxs(CollapsibleTrigger, { className: cn(itemVariants({ active: false }), 'w-full', className), ...props, 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, level } = useInternalContext();
+    const { prefetch } = 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) => {
-            if (e.target.hasAttribute('data-icon')) {
-                setOpen((prev) => !prev);
+            if (e.target instanceof Element &&
+                e.target.matches('[data-icon], [data-icon] *')) {
+                setOpen(!open);
                 e.preventDefault();
             }
             else {
-                setOpen((prev) => !active || !prev);
+                setOpen(active ? !open : true);
             }
-        }, 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') })] }));
+        }, prefetch: prefetch, children: [props.children, _jsx(ChevronDown, { "data-icon": true, className: cn('ms-auto transition-transform', !open && '-rotate-90') })] }));
 }
 export function SidebarFolderContent(props) {
-    const ctx = useInternalContext();
-    return (_jsx(CollapsibleContent, { ...props, className: cn('relative', props.className), children: _jsxs(Context.Provider, { value: useMemo(() => ({
+    const { level, ...ctx } = useInternalContext();
+    return (_jsx(CollapsibleContent, { ...props, className: cn('relative', level === 1 && [
+            "before:content-[''] before:absolute before:w-px before:inset-y-1 before:bg-fd-border before:start-2.5",
+            "**:data-[active=true]:before:content-[''] **:data-[active=true]:before:bg-fd-primary **:data-[active=true]:before:absolute **:data-[active=true]:before:w-px **:data-[active=true]:before:inset-y-2.5 **:data-[active=true]:before:start-2.5",
+        ], props.className), style: {
+            '--sidebar-item-offset': `calc(var(--spacing) * ${(level + 1) * 3})`,
+            ...props.style,
+        }, children: _jsx(Context.Provider, { 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] }) }));
+                level: level + 1,
+            }), [ctx, level]), children: props.children }) }));
+}
+export function SidebarTrigger({ children, ...props }) {
+    const { setOpen } = useSidebar();
+    return (_jsx("button", { ...props, "aria-label": "Open Sidebar", onClick: () => setOpen((prev) => !prev), children: children }));
 }
 export function SidebarCollapseTrigger(props) {
     const { collapsed, setCollapsed } = useSidebar();
@@ -167,7 +177,7 @@ export function SidebarPageTree(props) {
                 if (item.type === 'separator') {
                     if (Separator)
                         return _jsx(Separator, { item: item }, i);
-                    return (_jsxs(SidebarSeparator, { className: cn(i !== 0 && 'mt-8'), children: [item.icon, item.name] }, i));
+                    return (_jsxs(SidebarSeparator, { className: cn(i !== 0 && 'mt-6'), children: [item.icon, item.name] }, i));
                 }
                 if (item.type === 'folder') {
                     const children = renderSidebarList(item.children, level + 1);
@@ -188,11 +198,3 @@ function PageTreeFolder({ item, ...props }) {
     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, ...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/components/layout/theme-toggle.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from 'class-variance-authority';
-import { Moon, Sun, Airplay } from 'lucide-react';
+import { Moon, Sun, Airplay } from '../../icons.js';
 import { useTheme } from 'next-themes';
 import { useLayoutEffect, useState } from 'react';
 import { cn } from '../../utils/cn.js';

package/dist/components/layout/toc-clerk.d.ts

@@ -1,5 +1,3 @@
-import type { TOCItemType } from 'fumadocs-core/server';
-export default function ClerkTOCItems({ items }: {
-    items: TOCItemType[];
-}): import("react/jsx-runtime").JSX.Element;
+import { type ComponentProps } from 'react';
+export default function ClerkTOCItems({ ref, className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=toc-clerk.d.ts.map

package/dist/components/layout/toc-clerk.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toc-clerk.d.ts","sourceRoot":"","sources":["../../../src/components/layout/toc-clerk.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAOxD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,WAAW,EAAE,CAAA;CAAE,2CA2FxE"}
+{"version":3,"file":"toc-clerk.d.ts","sourceRoot":"","sources":["../../../src/components/layout/toc-clerk.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAA+B,MAAM,OAAO,CAAC;AAOzE,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,2CAsGvB"}

package/dist/components/layout/toc-clerk.js

@@ -4,9 +4,13 @@ import * as Primitive from 'fumadocs-core/toc';
 import { useEffect, useRef, useState } from 'react';
 import { cn } from '../../utils/cn.js';
 import { TocThumb } from '../../components/layout/toc-thumb.js';
-import { TocItemsEmpty } from '../../components/layout/toc.js';
-export default function ClerkTOCItems({ items }) {
+import { useTOCItems } from '../../components/layout/toc.js';
+import { mergeRefs } from '../../utils/merge-refs.js';
+import { useI18n } from '../../contexts/i18n.js';
+export default function ClerkTOCItems({ ref, className, ...props }) {
     const containerRef = useRef(null);
+    const items = useTOCItems();
+    const { text } = useI18n();
     const [svg, setSvg] = useState();
     useEffect(() => {
         if (!containerRef.current)
@@ -44,14 +48,14 @@ export default function ClerkTOCItems({ items }) {
         };
     }, [items]);
     if (items.length === 0)
-        return _jsx(TocItemsEmpty, {});
+        return (_jsx("div", { className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground", children: text.tocNoHeadings }));
     return (_jsxs(_Fragment, { children: [svg ? (_jsx("div", { className: "absolute start-0 top-0 rtl:-scale-x-100", style: {
                     width: svg.width,
                     height: svg.height,
                     maskImage: `url("data:image/svg+xml,${
                     // Inline SVG
                     encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svg.width} ${svg.height}"><path d="${svg.path}" stroke="black" stroke-width="1" fill="none" /></svg>`)}")`,
-                }, children: _jsx(TocThumb, { containerRef: containerRef, className: "mt-(--fd-top) h-(--fd-height) bg-fd-primary transition-all" }) })) : null, _jsx("div", { className: "flex flex-col", ref: containerRef, children: items.map((item, i) => (_jsx(TOCItem, { item: item, upper: items[i - 1]?.depth, lower: items[i + 1]?.depth }, item.url))) })] }));
+                }, children: _jsx(TocThumb, { containerRef: containerRef, className: "mt-(--fd-top) h-(--fd-height) bg-fd-primary transition-all" }) })) : null, _jsx("div", { ref: mergeRefs(containerRef, ref), className: cn('flex flex-col', className), ...props, children: items.map((item, i) => (_jsx(TOCItem, { item: item, upper: items[i - 1]?.depth, lower: items[i + 1]?.depth }, item.url))) })] }));
 }
 function getItemOffset(depth) {
     if (depth <= 2)
@@ -67,7 +71,7 @@ function TOCItem({ item, upper = item.depth, lower = item.depth, }) {
     const offset = getLineOffset(item.depth), upperOffset = getLineOffset(upper), lowerOffset = getLineOffset(lower);
     return (_jsxs(Primitive.TOCItem, { href: item.url, style: {
             paddingInlineStart: getItemOffset(item.depth),
-        }, className: "prose relative py-1.5 text-sm text-fd-muted-foreground transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0 data-[active=true]:text-fd-primary", children: [offset !== upperOffset ? (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", className: "absolute -top-1.5 start-0 size-4 rtl:-scale-x-100", children: _jsx("line", { x1: upperOffset, y1: "0", x2: offset, y2: "12", className: "stroke-fd-foreground/10", strokeWidth: "1" }) })) : null, _jsx("div", { className: cn('absolute inset-y-0 w-px bg-fd-foreground/10', offset !== upperOffset && 'top-1.5', offset !== lowerOffset && 'bottom-1.5'), style: {
+        }, className: "prose relative py-1.5 text-sm text-fd-muted-foreground hover:text-fd-accent-foreground transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0 data-[active=true]:text-fd-primary", children: [offset !== upperOffset ? (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", className: "absolute -top-1.5 start-0 size-4 rtl:-scale-x-100", children: _jsx("line", { x1: upperOffset, y1: "0", x2: offset, y2: "12", className: "stroke-fd-foreground/10", strokeWidth: "1" }) })) : null, _jsx("div", { className: cn('absolute inset-y-0 w-px bg-fd-foreground/10', offset !== upperOffset && 'top-1.5', offset !== lowerOffset && 'bottom-1.5'), style: {
                     insetInlineStart: offset,
                 } }), item.title] }));
 }

package/dist/components/layout/toc-thumb.js

@@ -42,7 +42,7 @@ export function TocThumb({ containerRef, ...props }) {
         return () => {
             observer.disconnect();
         };
-    }, [containerRef, onResize]);
+    }, [containerRef]);
     useOnChange(active, () => {
         if (!containerRef.current || !thumbRef.current)
             return;

package/dist/components/layout/toc.d.ts

@@ -1,23 +1,7 @@
-import type { TOCItemType } from 'fumadocs-core/server';
-import { type ComponentProps, type HTMLAttributes, type ReactNode } from 'react';
-import { ScrollArea } from '../ui/scroll-area.js';
-export interface TOCProps {
-    /**
-     * Custom content in TOC container, before the main TOC
-     */
-    header?: ReactNode;
-    /**
-     * Custom content in TOC container, after the main TOC
-     */
-    footer?: ReactNode;
-    children: ReactNode;
-}
-export declare function Toc(props: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-export declare function TocItemsEmpty(): import("react/jsx-runtime").JSX.Element;
-export declare function TOCScrollArea({ isMenu, ...props }: ComponentProps<typeof ScrollArea> & {
-    isMenu?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function TOCItems({ items }: {
-    items: TOCItemType[];
-}): import("react/jsx-runtime").JSX.Element;
+import * as Primitive from 'fumadocs-core/toc';
+import { type ComponentProps } from 'react';
+export declare function useTOCItems(): Primitive.TOCItemType[];
+export declare function TOCProvider({ toc, children, ...props }: ComponentProps<typeof Primitive.AnchorProvider>): import("react/jsx-runtime").JSX.Element;
+export declare function TOCScrollArea({ ref, className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function TOCItems({ ref, className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=toc.d.ts.map

package/dist/components/layout/toc.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toc.d.ts","sourceRoot":"","sources":["../../../src/components/layout/toc.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,UAAU,EAAkB,MAAM,mBAAmB,CAAC;AAG/D,MAAM,WAAW,QAAQ;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,GAAG,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAyBxD;AAED,wBAAgB,aAAa,4CAQ5B;AAED,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,UAAU,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,2CAsB1D;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,WAAW,EAAE,CAAA;CAAE,2CAqB3D"}
+{"version":3,"file":"toc.d.ts","sourceRoot":"","sources":["../../../src/components/layout/toc.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,SAAS,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,KAAK,cAAc,EAAqC,MAAM,OAAO,CAAC;AAQ/E,wBAAgB,WAAW,IAAI,SAAS,CAAC,WAAW,EAAE,CAErD;AAED,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,SAAS,CAAC,cAAc,CAAC,2CAQjD;AAED,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,2CAiBvB;AAED,wBAAgB,QAAQ,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,2CAgC3E"}