@fumadocs/base-ui 16.2.5

package/dist/layouts/docs/index.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, } from 'react';
+import { Languages, Sidebar as SidebarIcon } from '@fumadocs/ui/icons';
+import { cn } from '@fumadocs/ui/cn';
+import { buttonVariants } from '../../components/ui/button.js';
+import { Sidebar, SidebarCollapseTrigger, SidebarContent, SidebarDrawer, SidebarLinkItem, SidebarPageTree, SidebarTrigger, SidebarViewport, } from './sidebar.js';
+import { resolveLinkItems } from '../../layouts/shared/index.js';
+import { LinkItem } from '@fumadocs/ui/link-item';
+import { LanguageToggle, LanguageToggleText, } from '../../layouts/shared/language-toggle.js';
+import { LayoutBody, LayoutContextProvider, LayoutHeader, LayoutTabs, } from './client.js';
+import { TreeContextProvider } from '../../contexts/tree.js';
+import { ThemeToggle } from '../shared/theme-toggle.js';
+import Link from 'fumadocs-core/link';
+import { LargeSearchToggle, SearchToggle, } from '../../layouts/shared/search-toggle.js';
+import { getSidebarTabs, } from '../../components/sidebar/tabs/index.js';
+import { SidebarTabsDropdown, } from '../../components/sidebar/tabs/dropdown.js';
+export function DocsLayout({ nav: { transparentMode, ...nav } = {}, sidebar: { tabs: sidebarTabs, enabled: sidebarEnabled = true, defaultOpenLevel, prefetch, ...sidebarProps } = {}, searchToggle = {}, themeSwitch = {}, tabMode = 'auto', i18n = false, children, tree, ...props }) {
+    const tabs = useMemo(() => {
+        if (Array.isArray(sidebarTabs)) {
+            return sidebarTabs;
+        }
+        if (typeof sidebarTabs === 'object') {
+            return getSidebarTabs(tree, sidebarTabs);
+        }
+        if (sidebarTabs !== false) {
+            return getSidebarTabs(tree);
+        }
+        return [];
+    }, [tree, sidebarTabs]);
+    const links = resolveLinkItems(props);
+    function sidebar() {
+        const { footer, banner, collapsible = true, component, components, ...rest } = sidebarProps;
+        if (component)
+            return component;
+        const iconLinks = links.filter((item) => item.type === 'icon');
+        const viewport = (_jsxs(SidebarViewport, { children: [links
+                    .filter((v) => v.type !== 'icon')
+                    .map((item, i, list) => (_jsx(SidebarLinkItem, { item: item, className: cn(i === list.length - 1 && 'mb-4') }, i))), _jsx(SidebarPageTree, { ...components })] }));
+        return (_jsxs(_Fragment, { children: [_jsxs(SidebarContent, { ...rest, children: [_jsxs("div", { className: "flex flex-col gap-3 p-4 pb-2", children: [_jsxs("div", { className: "flex", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex text-[0.9375rem] items-center gap-2.5 font-medium me-auto", children: nav.title }), nav.children, collapsible && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
+                                                color: 'ghost',
+                                                size: 'icon-sm',
+                                                className: 'mb-auto text-fd-muted-foreground',
+                                            })), children: _jsx(SidebarIcon, {}) }))] }), searchToggle.enabled !== false &&
+                                    (searchToggle.components?.lg ?? (_jsx(LargeSearchToggle, { hideIfDisabled: true }))), tabs.length > 0 && tabMode === 'auto' && (_jsx(SidebarTabsDropdown, { options: tabs })), banner] }), viewport, (i18n ||
+                            iconLinks.length > 0 ||
+                            themeSwitch?.enabled !== false ||
+                            footer) && (_jsxs("div", { className: "flex flex-col border-t p-4 pt-2 empty:hidden", children: [_jsxs("div", { className: "flex text-fd-muted-foreground items-center empty:hidden", children: [i18n && (_jsx(LanguageToggle, { children: _jsx(Languages, { className: "size-4.5" }) })), iconLinks.map((item, i) => (_jsx(LinkItem, { item: item, className: cn(buttonVariants({ size: 'icon-sm', color: 'ghost' })), "aria-label": item.label, children: item.icon }, i))), themeSwitch.enabled !== false &&
+                                            (themeSwitch.component ?? (_jsx(ThemeToggle, { className: "ms-auto p-0", mode: themeSwitch.mode })))] }), footer] }))] }), _jsxs(SidebarDrawer, { children: [_jsxs("div", { className: "flex flex-col gap-3 p-4 pb-2", children: [_jsxs("div", { className: "flex text-fd-muted-foreground items-center gap-1.5", children: [_jsx("div", { className: "flex flex-1", children: iconLinks.map((item, i) => (_jsx(LinkItem, { item: item, className: cn(buttonVariants({
+                                                    size: 'icon-sm',
+                                                    color: 'ghost',
+                                                    className: 'p-2',
+                                                })), "aria-label": item.label, children: item.icon }, i))) }), i18n && (_jsxs(LanguageToggle, { children: [_jsx(Languages, { className: "size-4.5" }), _jsx(LanguageToggleText, {})] })), themeSwitch.enabled !== false &&
+                                            (themeSwitch.component ?? (_jsx(ThemeToggle, { className: "p-0", mode: themeSwitch.mode }))), _jsx(SidebarTrigger, { className: cn(buttonVariants({
+                                                color: 'ghost',
+                                                size: 'icon-sm',
+                                                className: 'p-2',
+                                            })), children: _jsx(SidebarIcon, {}) })] }), tabs.length > 0 && _jsx(SidebarTabsDropdown, { options: tabs }), banner] }), viewport, _jsx("div", { className: "flex flex-col border-t p-4 pt-2 empty:hidden", children: footer })] })] }));
+    }
+    return (_jsx(TreeContextProvider, { tree: tree, children: _jsx(LayoutContextProvider, { navTransparentMode: transparentMode, children: _jsx(Sidebar, { defaultOpenLevel: defaultOpenLevel, prefetch: prefetch, children: _jsxs(LayoutBody, { ...props.containerProps, children: [nav.enabled !== false &&
+                            (nav.component ?? (_jsxs(LayoutHeader, { id: "nd-subnav", className: "[grid-area:header] sticky top-(--fd-docs-row-1) z-30 flex items-center ps-4 pe-2.5 border-b transition-colors backdrop-blur-sm h-(--fd-header-height) md:hidden max-md:layout:[--fd-header-height:--spacing(14)] data-[transparent=false]:bg-fd-background/80", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex items-center gap-2.5 font-semibold", children: nav.title }), _jsx("div", { className: "flex-1", children: nav.children }), searchToggle.enabled !== false &&
+                                        (searchToggle.components?.sm ?? (_jsx(SearchToggle, { className: "p-2", hideIfDisabled: true }))), sidebarEnabled && (_jsx(SidebarTrigger, { className: cn(buttonVariants({
+                                            color: 'ghost',
+                                            size: 'icon-sm',
+                                            className: 'p-2',
+                                        })), children: _jsx(SidebarIcon, {}) }))] }))), sidebarEnabled && sidebar(), tabMode === 'top' && tabs.length > 0 && (_jsx(LayoutTabs, { options: tabs, className: "z-10 bg-fd-background border-b px-6 pt-3 xl:px-8 max-md:hidden" })), children] }) }) }) }));
+}

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

@@ -0,0 +1,24 @@
+import { type ComponentProps } from 'react';
+import type * as PageTree from 'fumadocs-core/page-tree';
+import { type BreadcrumbOptions } from 'fumadocs-core/breadcrumb';
+export declare function PageTOCPopover({ className, children, ...rest }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function PageTOCPopoverTrigger({ className, ...props }: ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
+export declare function PageTOCPopoverContent(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function PageLastUpdate({ date: value, ...props }: Omit<ComponentProps<'p'>, 'children'> & {
+    date: Date;
+}): import("react/jsx-runtime").JSX.Element;
+type Item = Pick<PageTree.Item, 'name' | 'description' | 'url'>;
+export interface FooterProps extends ComponentProps<'div'> {
+    /**
+     * Items including information for the next and previous page
+     */
+    items?: {
+        previous?: Item;
+        next?: Item;
+    };
+}
+export declare function PageFooter({ items, ...props }: FooterProps): import("react/jsx-runtime").JSX.Element;
+export type BreadcrumbProps = BreadcrumbOptions & ComponentProps<'div'>;
+export declare function PageBreadcrumb({ includeRoot, includeSeparator, includePage, ...props }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=client.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../../../src/layouts/docs/page/client.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EASpB,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AAEzD,OAAO,EACL,KAAK,iBAAiB,EAEvB,MAAM,0BAA0B,CAAC;AAiBlC,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,KAAK,CAAC,2CAqDvB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAqD1B;AA8DD,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAUjE;AAED,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EAAE,KAAK,EACX,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,GAAG;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,2CAiBxD;AAED,KAAK,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,aAAa,GAAG,KAAK,CAAC,CAAC;AAChE,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,KAAK,CAAC;IACxD;;OAEG;IACH,KAAK,CAAC,EAAE;QACN,QAAQ,CAAC,EAAE,IAAI,CAAC;QAChB,IAAI,CAAC,EAAE,IAAI,CAAC;KACb,CAAC;CACH;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CA+B1D;AA8BD,MAAM,MAAM,eAAe,GAAG,iBAAiB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAExE,wBAAgB,cAAc,CAAC,EAC7B,WAAW,EACX,gBAAgB,EAChB,WAAW,EACX,GAAG,KAAK,EACT,EAAE,eAAe,kDA6CjB"}

package/dist/layouts/docs/page/client.js

@@ -0,0 +1,119 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, Fragment, use, useEffect, useEffectEvent, useMemo, useRef, useState, } from 'react';
+import { ChevronDown, ChevronLeft, ChevronRight } from '@fumadocs/ui/icons';
+import Link from 'fumadocs-core/link';
+import { cn } from '@fumadocs/ui/cn';
+import { useI18n } from '../../../contexts/i18n.js';
+import { useTreeContext, useTreePath } from '../../../contexts/tree.js';
+import { usePathname } from 'fumadocs-core/framework';
+import { getBreadcrumbItemsFromPath, } from 'fumadocs-core/breadcrumb';
+import { isActive } from '@fumadocs/ui/urls';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '../../../components/ui/collapsible.js';
+import { useTOCItems } from '../../../components/toc/index.js';
+import { useActiveAnchor } from 'fumadocs-core/toc';
+import { LayoutContext } from '../client.js';
+import { useFooterItems } from '@fumadocs/ui/hooks/use-footer-items';
+const TocPopoverContext = createContext(null);
+export function PageTOCPopover({ className, children, ...rest }) {
+    const ref = useRef(null);
+    const [open, setOpen] = useState(false);
+    const { isNavTransparent } = use(LayoutContext);
+    const onClick = useEffectEvent((e) => {
+        if (!open)
+            return;
+        if (ref.current && !ref.current.contains(e.target))
+            setOpen(false);
+    });
+    useEffect(() => {
+        window.addEventListener('click', onClick);
+        return () => {
+            window.removeEventListener('click', onClick);
+        };
+    }, []);
+    return (_jsx(TocPopoverContext, { value: useMemo(() => ({
+            open,
+            setOpen,
+        }), [setOpen, open]), children: _jsx(Collapsible, { open: open, onOpenChange: setOpen, "data-toc-popover": "", className: cn('sticky top-(--fd-docs-row-2) z-10 [grid-area:toc-popover] h-(--fd-toc-popover-height) xl:hidden max-xl:layout:[--fd-toc-popover-height:--spacing(10)]', className), ...rest, children: _jsx("header", { ref: ref, className: cn('border-b backdrop-blur-sm transition-colors', (!isNavTransparent || open) && 'bg-fd-background/80', open && 'shadow-lg'), children: children }) }) }));
+}
+export function PageTOCPopoverTrigger({ className, ...props }) {
+    const { text } = useI18n();
+    const { open } = use(TocPopoverContext);
+    const items = useTOCItems();
+    const active = useActiveAnchor();
+    const selected = useMemo(() => items.findIndex((item) => active === item.url.slice(1)), [items, active]);
+    const path = useTreePath().at(-1);
+    const showItem = selected !== -1 && !open;
+    return (_jsxs(CollapsibleTrigger, { className: cn('flex w-full h-10 items-center text-sm text-fd-muted-foreground gap-2.5 px-4 py-2.5 text-start focus-visible:outline-none [&_svg]:size-4 md:px-6', className), "data-toc-popover-trigger": "", ...props, children: [_jsx(ProgressCircle, { value: (selected + 1) / Math.max(1, items.length), max: 1, className: cn('shrink-0', open && 'text-fd-primary') }), _jsxs("span", { className: "grid flex-1 *:my-auto *:row-start-1 *:col-start-1", children: [_jsx("span", { className: cn('truncate transition-all', open && 'text-fd-foreground', showItem && 'opacity-0 -translate-y-full pointer-events-none'), children: path?.name ?? text.toc }), _jsx("span", { className: cn('truncate transition-all', !showItem && 'opacity-0 translate-y-full pointer-events-none'), children: items[selected]?.title })] }), _jsx(ChevronDown, { className: cn('shrink-0 transition-transform mx-0.5', open && 'rotate-180') })] }));
+}
+function clamp(input, min, max) {
+    if (input < min)
+        return min;
+    if (input > max)
+        return max;
+    return input;
+}
+function ProgressCircle({ value, strokeWidth = 2, size = 24, min = 0, max = 100, ...restSvgProps }) {
+    const normalizedValue = clamp(value, min, max);
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const progress = (normalizedValue / max) * circumference;
+    const circleProps = {
+        cx: size / 2,
+        cy: size / 2,
+        r: radius,
+        fill: 'none',
+        strokeWidth,
+    };
+    return (_jsxs("svg", { role: "progressbar", viewBox: `0 0 ${size} ${size}`, "aria-valuenow": normalizedValue, "aria-valuemin": min, "aria-valuemax": max, ...restSvgProps, children: [_jsx("circle", { ...circleProps, className: "stroke-current/25" }), _jsx("circle", { ...circleProps, stroke: "currentColor", strokeDasharray: circumference, strokeDashoffset: circumference - progress, strokeLinecap: "round", transform: `rotate(-90 ${size / 2} ${size / 2})`, className: "transition-all" })] }));
+}
+export function PageTOCPopoverContent(props) {
+    return (_jsx(CollapsibleContent, { "data-toc-popover-content": "", ...props, className: cn('flex flex-col px-4 max-h-[50vh] md:px-6', props.className), children: _jsx("div", { children: props.children }) }));
+}
+export function PageLastUpdate({ date: value, ...props }) {
+    const { text } = useI18n();
+    const [date, setDate] = useState('');
+    useEffect(() => {
+        // to the timezone of client
+        setDate(value.toLocaleDateString());
+    }, [value]);
+    return (_jsxs("p", { ...props, className: cn('text-sm text-fd-muted-foreground', props.className), children: [text.lastUpdate, " ", date] }));
+}
+export function PageFooter({ items, ...props }) {
+    const footerList = useFooterItems();
+    const pathname = usePathname();
+    const { previous, next } = useMemo(() => {
+        if (items)
+            return items;
+        const idx = footerList.findIndex((item) => isActive(item.url, pathname, false));
+        if (idx === -1)
+            return {};
+        return {
+            previous: footerList[idx - 1],
+            next: footerList[idx + 1],
+        };
+    }, [footerList, items, pathname]);
+    return (_jsxs("div", { ...props, className: cn('@container grid gap-4', previous && next ? 'grid-cols-2' : 'grid-cols-1', props.className), children: [previous ? _jsx(FooterItem, { item: previous, index: 0 }) : null, next ? _jsx(FooterItem, { item: next, index: 1 }) : null] }));
+}
+function FooterItem({ item, index }) {
+    const { text } = useI18n();
+    const Icon = index === 0 ? ChevronLeft : ChevronRight;
+    return (_jsxs(Link, { href: item.url, className: cn('flex flex-col gap-2 rounded-lg border p-4 text-sm transition-colors hover:bg-fd-accent/80 hover:text-fd-accent-foreground @max-lg:col-span-full', index === 1 && 'text-end'), children: [_jsxs("div", { className: cn('inline-flex items-center gap-1.5 font-medium', index === 1 && 'flex-row-reverse'), children: [_jsx(Icon, { className: "-mx-1 size-4 shrink-0 rtl:rotate-180" }), _jsx("p", { children: item.name })] }), _jsx("p", { className: "text-fd-muted-foreground truncate", children: item.description ?? (index === 0 ? text.previousPage : text.nextPage) })] }));
+}
+export function PageBreadcrumb({ includeRoot, includeSeparator, includePage, ...props }) {
+    const path = useTreePath();
+    const { root } = useTreeContext();
+    const items = useMemo(() => {
+        return getBreadcrumbItemsFromPath(root, path, {
+            includePage,
+            includeSeparator,
+            includeRoot,
+        });
+    }, [includePage, includeRoot, includeSeparator, path, root]);
+    if (items.length === 0)
+        return null;
+    return (_jsx("div", { ...props, className: cn('flex items-center gap-1.5 text-sm text-fd-muted-foreground', props.className), children: items.map((item, i) => {
+            const className = cn('truncate', i === items.length - 1 && 'text-fd-primary font-medium');
+            return (_jsxs(Fragment, { children: [i !== 0 && _jsx(ChevronRight, { className: "size-3.5 shrink-0" }), item.url ? (_jsx(Link, { href: item.url, className: cn(className, 'transition-opacity hover:opacity-80'), children: item.name })) : (_jsx("span", { className: className, children: item.name }))] }, i));
+        }) }));
+}

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

@@ -0,0 +1,58 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { type BreadcrumbProps, type FooterProps } from './client.js';
+import type { AnchorProviderProps, TOCItemType } from 'fumadocs-core/toc';
+interface BreadcrumbOptions extends BreadcrumbProps {
+    enabled: boolean;
+    component: ReactNode;
+}
+interface FooterOptions extends FooterProps {
+    enabled: boolean;
+    component: ReactNode;
+}
+export interface DocsPageProps {
+    toc?: TOCItemType[];
+    tableOfContent?: Partial<TableOfContentOptions>;
+    tableOfContentPopover?: Partial<TableOfContentPopoverOptions>;
+    /**
+     * Extend the page to fill all available space
+     *
+     * @defaultValue false
+     */
+    full?: boolean;
+    /**
+     * Replace or disable breadcrumb
+     */
+    breadcrumb?: Partial<BreadcrumbOptions>;
+    /**
+     * Footer navigation, you can disable it by passing `false`
+     */
+    footer?: Partial<FooterOptions>;
+    children?: ReactNode;
+}
+type TableOfContentOptions = Pick<AnchorProviderProps, 'single'> & {
+    /**
+     * Custom content in TOC container, before the main TOC
+     */
+    header?: ReactNode;
+    /**
+     * Custom content in TOC container, after the main TOC
+     */
+    footer?: ReactNode;
+    enabled: boolean;
+    component: ReactNode;
+    /**
+     * @defaultValue 'normal'
+     */
+    style?: 'normal' | 'clerk';
+};
+type TableOfContentPopoverOptions = Omit<TableOfContentOptions, 'single'>;
+export declare function DocsPage({ breadcrumb: { enabled: breadcrumbEnabled, component: breadcrumb, ...breadcrumbProps }, footer, full, tableOfContentPopover: { enabled: tocPopoverEnabled, component: tocPopover, ...tocPopoverOptions }, tableOfContent: { enabled: tocEnabled, component: tocReplace, ...tocOptions }, toc, children, }: DocsPageProps): ReactNode;
+export declare function EditOnGitHub(props: ComponentProps<'a'>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Add typography styles
+ */
+export declare function DocsBody({ children, className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function DocsDescription({ children, className, ...props }: ComponentProps<'p'>): import("react/jsx-runtime").JSX.Element | null;
+export declare function DocsTitle({ children, className, ...props }: ComponentProps<'h1'>): import("react/jsx-runtime").JSX.Element;
+export { PageLastUpdate, PageBreadcrumb } from './client.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/layouts/docs/page/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvD,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,WAAW,EAMjB,MAAM,UAAU,CAAC;AAClB,OAAO,KAAK,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAK1E,UAAU,iBAAkB,SAAQ,eAAe;IACjD,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;CACtB;AAED,UAAU,aAAc,SAAQ,WAAW;IACzC,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,GAAG,CAAC,EAAE,WAAW,EAAE,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;IAChD,qBAAqB,CAAC,EAAE,OAAO,CAAC,4BAA4B,CAAC,CAAC;IAE9D;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAExC;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAEhC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,KAAK,qBAAqB,GAAG,IAAI,CAAC,mBAAmB,EAAE,QAAQ,CAAC,GAAG;IACjE;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC5B,CAAC;AAEF,KAAK,4BAA4B,GAAG,IAAI,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC;AAE1E,wBAAgB,QAAQ,CAAC,EACvB,UAAU,EAAE,EACV,OAAO,EAAE,iBAAwB,EACjC,SAAS,EAAE,UAAU,EACrB,GAAG,eAAe,EACd,EACN,MAAW,EACX,IAAY,EACZ,qBAAqB,EAAE,EACrB,OAAO,EAAE,iBAAiB,EAC1B,SAAS,EAAE,UAAU,EACrB,GAAG,iBAAiB,EAChB,EACN,cAAc,EAAE,EACd,OAAO,EAAE,UAAU,EACnB,SAAS,EAAE,UAAU,EACrB,GAAG,UAAU,EACT,EACN,GAAQ,EACR,QAAQ,GACT,EAAE,aAAa,aAkFf;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,2CAuBtD;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,2CAMvB;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,GAAG,CAAC,kDAYrB;AAED,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,IAAI,CAAC,2CAMtB;AAED,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC"}

package/dist/layouts/docs/page/index.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from '@fumadocs/ui/cn';
+import { buttonVariants } from '../../../components/ui/button.js';
+import { Edit, Text } from '@fumadocs/ui/icons';
+import { I18nLabel } from '../../../contexts/i18n.js';
+import { PageBreadcrumb, PageFooter, PageTOCPopover, PageTOCPopoverContent, PageTOCPopoverTrigger, } from './client.js';
+import * as TocDefault from '../../../components/toc/default.js';
+import * as TocClerk from '../../../components/toc/clerk.js';
+import { TOCProvider, TOCScrollArea } from '../../../components/toc/index.js';
+export function DocsPage({ breadcrumb: { enabled: breadcrumbEnabled = true, component: breadcrumb, ...breadcrumbProps } = {}, footer = {}, full = false, tableOfContentPopover: { enabled: tocPopoverEnabled, component: tocPopover, ...tocPopoverOptions } = {}, tableOfContent: { enabled: tocEnabled, component: tocReplace, ...tocOptions } = {}, toc = [], children, }) {
+    // disable TOC on full mode, you can still enable it with `enabled` option.
+    tocEnabled ?? (tocEnabled = !full &&
+        (toc.length > 0 ||
+            tocOptions.footer !== undefined ||
+            tocOptions.header !== undefined));
+    tocPopoverEnabled ?? (tocPopoverEnabled = toc.length > 0 ||
+        tocPopoverOptions.header !== undefined ||
+        tocPopoverOptions.footer !== undefined);
+    let wrapper = (children) => children;
+    if (tocEnabled || tocPopoverEnabled) {
+        wrapper = (children) => (_jsx(TOCProvider, { single: tocOptions.single, toc: toc, children: children }));
+    }
+    return wrapper(_jsxs(_Fragment, { children: [tocPopoverEnabled &&
+                (tocPopover ?? (_jsxs(PageTOCPopover, { children: [_jsx(PageTOCPopoverTrigger, {}), _jsxs(PageTOCPopoverContent, { children: [tocPopoverOptions.header, _jsx(TOCScrollArea, { children: tocPopoverOptions.style === 'clerk' ? (_jsx(TocClerk.TOCItems, {})) : (_jsx(TocDefault.TOCItems, {})) }), tocPopoverOptions.footer] })] }))), _jsxs("article", { id: "nd-page", "data-full": full, className: cn('flex flex-col w-full max-w-[900px] mx-auto [grid-area:main] px-4 py-6 gap-4 md:px-6 md:pt-8 xl:px-8 xl:pt-14', full ? 'max-w-[1200px]' : 'xl:layout:[--fd-toc-width:268px]'), children: [breadcrumbEnabled &&
+                        (breadcrumb ?? _jsx(PageBreadcrumb, { ...breadcrumbProps })), children, footer.enabled !== false &&
+                        (footer.component ?? _jsx(PageFooter, { items: footer.items }))] }), tocEnabled &&
+                (tocReplace ?? (_jsxs("div", { id: "nd-toc", className: "sticky top-(--fd-docs-row-1) h-[calc(var(--fd-docs-height)-var(--fd-docs-row-1))] flex flex-col [grid-area:toc] w-(--fd-toc-width) pt-12 pe-4 pb-2 max-xl:hidden", children: [tocOptions.header, _jsxs("h3", { id: "toc-title", className: "inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground", children: [_jsx(Text, { className: "size-4" }), _jsx(I18nLabel, { label: "toc" })] }), _jsx(TOCScrollArea, { children: tocOptions.style === 'clerk' ? (_jsx(TocClerk.TOCItems, {})) : (_jsx(TocDefault.TOCItems, {})) }), tocOptions.footer] })))] }));
+}
+export function EditOnGitHub(props) {
+    return (_jsx("a", { target: "_blank", rel: "noreferrer noopener", ...props, className: cn(buttonVariants({
+            color: 'secondary',
+            size: 'sm',
+            className: 'gap-1.5 not-prose',
+        }), props.className), children: props.children ?? (_jsxs(_Fragment, { children: [_jsx(Edit, { className: "size-3.5" }), _jsx(I18nLabel, { label: "editOnGithub" })] })) }));
+}
+/**
+ * Add typography styles
+ */
+export function DocsBody({ children, className, ...props }) {
+    return (_jsx("div", { ...props, className: cn('prose flex-1', className), children: children }));
+}
+export function DocsDescription({ children, className, ...props }) {
+    // Don't render if no description provided
+    if (children === undefined)
+        return null;
+    return (_jsx("p", { ...props, className: cn('mb-8 text-lg text-fd-muted-foreground', className), children: children }));
+}
+export function DocsTitle({ children, className, ...props }) {
+    return (_jsx("h1", { ...props, className: cn('text-[1.75em] font-semibold', className), children: children }));
+}
+export { PageLastUpdate, PageBreadcrumb } from './client.js';

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

@@ -0,0 +1,17 @@
+import * as Base from '../../components/sidebar/base.js';
+import { type ComponentProps } from 'react';
+export declare const Sidebar: typeof Base.SidebarProvider, SidebarFolder: typeof Base.SidebarFolder, SidebarCollapseTrigger: typeof Base.SidebarCollapseTrigger, SidebarViewport: typeof Base.SidebarViewport, SidebarTrigger: typeof Base.SidebarTrigger;
+export declare function SidebarContent({ ref: refProp, className, children, ...props }: ComponentProps<'aside'>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarDrawer({ children, className, ...props }: ComponentProps<typeof Base.SidebarDrawerContent>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarSeparator({ className, style, children, ...props }: ComponentProps<'p'>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarItem({ className, style, children, ...props }: ComponentProps<typeof Base.SidebarItem>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarFolderTrigger({ className, style, ...props }: ComponentProps<typeof Base.SidebarFolderTrigger>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarFolderLink({ className, style, ...props }: ComponentProps<typeof Base.SidebarFolderLink>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarFolderContent({ className, children, ...props }: ComponentProps<typeof Base.SidebarFolderContent>): import("react/jsx-runtime").JSX.Element;
+export declare const SidebarPageTree: (components: Partial<import("../../components/sidebar/page-tree.js").SidebarPageTreeComponents>) => import("react/jsx-runtime").JSX.Element;
+export declare const SidebarLinkItem: ({ item, ...props }: import("react").HTMLAttributes<HTMLElement> & {
+    item: Exclude<import("@fumadocs/ui/link-item").LinkItemType, {
+        type: "icon";
+    }>;
+}) => 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":"AACA,OAAO,KAAK,IAAI,MAAM,2BAA2B,CAAC;AAElD,OAAO,EAAE,KAAK,cAAc,EAAU,MAAM,OAAO,CAAC;AA6BpD,eAAO,MACY,OAAO,+BACxB,aAAa,6BACb,sBAAsB,sCACtB,eAAe,+BACf,cAAc,4BACR,CAAC;AAET,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EAAE,OAAO,EACZ,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,CAAC,2CA+DzB;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,oBAAoB,CAAC,2CAelD;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,GAAG,CAAC,2CAerB;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,WAAW,CAAC,2CAkBzC;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,oBAAoB,CAAC,2CAqBlD;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,iBAAiB,CAAC,2CAmB/C;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,oBAAoB,CAAC,2CAkBlD;AAED,eAAO,MAAM,eAAe,sIAO1B,CAAC;AAEH,eAAO,MAAM,eAAe;;;;6CAM1B,CAAC"}

package/dist/layouts/docs/sidebar.js

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

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

@@ -0,0 +1,6 @@
+import type { HomeLayoutProps } from './index.js';
+export declare const navItemVariants: (props?: ({
+    variant?: "icon" | "button" | "main" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare function Header({ nav, i18n, links, githubUrl, themeSwitch, searchToggle, }: HomeLayoutProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=client.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../../src/layouts/home/client.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,GAAG,CAAC;AAwBzC,eAAO,MAAM,eAAe;;8EAiB1B,CAAC;AAEH,wBAAgB,MAAM,CAAC,EACrB,GAAQ,EACR,IAAY,EACZ,KAAK,EACL,SAAS,EACT,WAAgB,EAChB,YAAiB,GAClB,EAAE,eAAe,2CAkJjB"}

package/dist/layouts/home/client.js

@@ -0,0 +1,136 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, Fragment, use, useEffect, useEffectEvent, useMemo, useState, } from 'react';
+import { cva } from 'class-variance-authority';
+import Link from 'fumadocs-core/link';
+import { cn } from '@fumadocs/ui/cn';
+import { resolveLinkItems, } from '../../layouts/shared/index.js';
+import { LinkItem } from '@fumadocs/ui/link-item';
+import { NavigationMenuRoot, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, } from '../../components/ui/navigation-menu.js';
+import { buttonVariants } from '../../components/ui/button.js';
+import { LargeSearchToggle, SearchToggle, } from '../../layouts/shared/search-toggle.js';
+import { ThemeToggle } from '../../layouts/shared/theme-toggle.js';
+import { LanguageToggle, LanguageToggleText, } from '../../layouts/shared/language-toggle.js';
+import { ChevronDown, Languages } from '@fumadocs/ui/icons';
+import { useIsScrollTop } from '@fumadocs/ui/hooks/use-is-scroll-top';
+import { NavigationMenu } from '@base-ui/react';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '../../components/ui/collapsible.js';
+const MobileMenuContext = createContext(null);
+export const navItemVariants = cva('[&_svg]:size-4', {
+    variants: {
+        variant: {
+            main: 'inline-flex items-center gap-1 p-2 text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground data-[active=true]:text-fd-primary data-[popup-open]:text-fd-primary',
+            button: buttonVariants({
+                color: 'secondary',
+                className: 'gap-1.5',
+            }),
+            icon: buttonVariants({
+                color: 'ghost',
+                size: 'icon',
+            }),
+        },
+    },
+    defaultVariants: {
+        variant: 'main',
+    },
+});
+export function Header({ nav = {}, i18n = false, links, githubUrl, themeSwitch = {}, searchToggle = {}, }) {
+    const { navItems, menuItems } = useMemo(() => {
+        const navItems = [];
+        const menuItems = [];
+        for (const item of resolveLinkItems({ links, githubUrl })) {
+            switch (item.on ?? 'all') {
+                case 'menu':
+                    menuItems.push(item);
+                    break;
+                case 'nav':
+                    navItems.push(item);
+                    break;
+                default:
+                    navItems.push(item);
+                    menuItems.push(item);
+            }
+        }
+        return { navItems, menuItems };
+    }, [links, githubUrl]);
+    return (_jsx(MobileMenuCollapsible, { render: (_, s) => (_jsxs(HeaderRoot, { transparentMode: nav.transparentMode, className: cn(s.open && 'shadow-lg rounded-b-2xl'), children: [_jsxs(NavigationMenuList, { className: "flex h-14 w-full items-center px-4", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex items-center gap-2.5 font-semibold", children: nav.title }), nav.children, _jsx("ul", { className: "flex flex-row items-center gap-2 px-6 max-sm:hidden", children: navItems
+                                .filter((item) => !isSecondary(item))
+                                .map((item, i) => (_jsx(NavigationMenuLinkItem, { item: item, className: "text-sm" }, i))) }), _jsxs("div", { className: "flex flex-row items-center justify-end gap-1.5 flex-1 max-lg:hidden", children: [searchToggle.enabled !== false &&
+                                    (searchToggle.components?.lg ?? (_jsx(LargeSearchToggle, { className: "w-full rounded-full ps-2.5 max-w-[240px]", hideIfDisabled: true }))), themeSwitch.enabled !== false &&
+                                    (themeSwitch.component ?? (_jsx(ThemeToggle, { mode: themeSwitch?.mode }))), i18n && (_jsx(LanguageToggle, { children: _jsx(Languages, { className: "size-5" }) })), _jsx("ul", { className: "flex flex-row gap-2 items-center empty:hidden", children: navItems.filter(isSecondary).map((item, i) => (_jsx(NavigationMenuLinkItem, { className: cn(item.type === 'icon' && '-mx-1 first:ms-0 last:me-0'), item: item }, i))) })] }), _jsxs("ul", { className: "flex flex-row items-center ms-auto -me-1.5 lg:hidden", children: [searchToggle.enabled !== false &&
+                                    (searchToggle.components?.sm ?? (_jsx(SearchToggle, { className: "p-2", hideIfDisabled: true }))), _jsx(CollapsibleTrigger, { "aria-label": "Toggle Menu", className: cn(buttonVariants({
+                                        size: 'icon',
+                                        color: 'ghost',
+                                        className: 'group [&_svg]:size-5.5',
+                                    })), children: _jsx(ChevronDown, { className: "transition-transform duration-300 group-data-[panel-open]:rotate-180" }) })] })] }), _jsxs(CollapsibleContent, { className: "flex flex-col px-4", children: [menuItems
+                            .filter((item) => !isSecondary(item))
+                            .map((item, i) => (_jsx(MobileMenuLinkItem, { item: item, className: "first:mt-4 sm:hidden" }, i))), _jsxs("div", { className: "-ms-1.5 flex flex-row pt-2 pb-4 items-center justify-end gap-2", children: [menuItems.filter(isSecondary).map((item, i) => (_jsx(MobileMenuLinkItem, { item: item, className: cn(item.type === 'icon' && '-mx-1 first:ms-0') }, i))), _jsx("div", { role: "separator", className: "flex-1 sm:hidden" }), i18n && (_jsxs(LanguageToggle, { children: [_jsx(Languages, { className: "size-5" }), _jsx(LanguageToggleText, {}), _jsx(ChevronDown, { className: "size-3 text-fd-muted-foreground" })] })), themeSwitch.enabled !== false &&
+                                    (themeSwitch.component ?? (_jsx(ThemeToggle, { mode: themeSwitch?.mode })))] })] }), _jsx(NavigationMenu.Portal, { children: _jsx(NavigationMenu.Positioner, { sideOffset: 10, className: "z-20 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[left,right] duration-(--duration) ease-(--easing) data-[instant]:transition-none", style: {
+                            ['--duration']: '0.35s',
+                            ['--easing']: 'cubic-bezier(0.22, 1, 0.36, 1)',
+                        }, children: _jsx(NavigationMenu.Popup, { className: "relative w-(--popup-width) h-(--popup-height) max-w-(--fd-layout-width,1400px) origin-(--transform-origin) rounded-xl bg-fd-background/80  border backdrop-blur-lg shadow-lg transition-[opacity,transform,width,height,scale,translate] duration-(--duration) ease-(--easing) data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0", children: _jsx(NavigationMenu.Viewport, { className: "relative size-full overflow-hidden" }) }) }) })] })) }));
+}
+function MobileMenuCollapsible(props) {
+    const [open, setOpen] = useState(false);
+    const onClick = useEffectEvent((e) => {
+        if (!open)
+            return;
+        const header = document.getElementById('nd-nav');
+        if (header && !header.contains(e.target))
+            setOpen(false);
+    });
+    useEffect(() => {
+        window.addEventListener('click', onClick);
+        return () => {
+            window.removeEventListener('click', onClick);
+        };
+    }, []);
+    return (_jsx(MobileMenuContext, { value: useMemo(() => ({
+            open,
+            setOpen,
+        }), [open]), children: _jsx(Collapsible, { open: open, onOpenChange: setOpen, ...props }) }));
+}
+function isSecondary(item) {
+    if ('secondary' in item && item.secondary != null)
+        return item.secondary;
+    return item.type === 'icon';
+}
+function HeaderRoot({ transparentMode = 'none', children, className, ...props }) {
+    const isTop = useIsScrollTop({ enabled: transparentMode === 'top' }) ?? true;
+    const isTransparent = transparentMode === 'top' ? isTop : transparentMode === 'always';
+    return (_jsx("header", { id: "nd-nav", className: "sticky h-14 top-0 z-40", children: _jsx(NavigationMenuRoot, { render: (_, s) => (_jsx("nav", { className: cn('w-full backdrop-blur-lg border-b transition-colors mx-auto max-w-(--fd-layout-width)', (!isTransparent || s.open) && 'bg-fd-background/80', className), ...props, children: children })) }) }));
+}
+function NavigationMenuLinkItem({ item, ...props }) {
+    if (item.type === 'custom')
+        return _jsx("div", { ...props, children: item.children });
+    if (item.type === 'menu') {
+        const children = item.items.map((child, j) => {
+            if (child.type === 'custom') {
+                return _jsx(Fragment, { children: child.children }, j);
+            }
+            const { banner = child.icon ? (_jsx("div", { className: "w-fit rounded-md border bg-fd-muted p-1 [&_svg]:size-4", children: child.icon })) : null, ...rest } = child.menu ?? {};
+            return (_jsx(NavigationMenuLink, { render: _jsx(Link, { href: child.url, external: child.external, ...rest, className: cn('flex flex-col gap-2 rounded-lg border bg-fd-card p-3 transition-colors hover:bg-fd-accent/80 hover:text-fd-accent-foreground', rest.className), children: rest.children ?? (_jsxs(_Fragment, { children: [banner, _jsx("p", { className: "text-base font-medium", children: child.text }), _jsx("p", { className: "text-sm text-fd-muted-foreground empty:hidden", children: child.description })] })) }) }, `${j}-${child.url}`));
+        });
+        return (_jsxs(NavigationMenuItem, { ...props, children: [_jsx(NavigationMenuTrigger, { className: cn(navItemVariants(), 'rounded-md'), children: item.url ? (_jsx(Link, { href: item.url, external: item.external, children: item.text })) : (item.text) }), _jsx(NavigationMenuContent, { className: "grid grid-cols-1 gap-2 p-4 md:grid-cols-2 lg:grid-cols-3", children: children })] }));
+    }
+    return (_jsx(NavigationMenuItem, { ...props, children: _jsx(NavigationMenuLink, { render: _jsx(LinkItem, { item: item, "aria-label": item.type === 'icon' ? item.label : undefined, className: cn(navItemVariants({ variant: item.type })), children: item.type === 'icon' ? item.icon : item.text }) }) }));
+}
+function MobileMenuLinkItem({ item, className, }) {
+    if (item.type === 'custom')
+        return _jsx("div", { className: cn('grid', className), children: item.children });
+    const { setOpen } = use(MobileMenuContext);
+    if (item.type === 'menu') {
+        const header = (_jsxs(_Fragment, { children: [item.icon, item.text] }));
+        return (_jsxs("div", { className: cn('mb-4 flex flex-col', className), children: [_jsx("p", { className: "mb-1 text-sm text-fd-muted-foreground", children: item.url ? (_jsx(Link, { href: item.url, external: item.external, onClick: () => setOpen(false), children: header })) : (header) }), item.items.map((child, i) => (_jsx(MobileMenuLinkItem, { item: child }, i)))] }));
+    }
+    return (_jsxs(LinkItem, { item: item, className: cn((!item.type || item.type === 'main') &&
+            'inline-flex items-center gap-2 py-1.5 transition-colors hover:text-fd-popover-foreground/50 data-[active=true]:font-medium data-[active=true]:text-fd-primary [&_svg]:size-4', item.type === 'icon' &&
+            buttonVariants({
+                size: 'icon',
+                color: 'ghost',
+            }), item.type === 'button' &&
+            buttonVariants({
+                color: 'secondary',
+                className: 'gap-1.5 [&_svg]:size-4',
+            }), className), "aria-label": item.type === 'icon' ? item.label : undefined, onClick: () => setOpen(false), children: [item.icon, item.type !== 'icon' && item.text] }));
+}

package/dist/layouts/home/index.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentProps } from 'react';
+import { type BaseLayoutProps, type NavOptions } from '../../layouts/shared/index.js';
+export interface HomeLayoutProps extends BaseLayoutProps {
+    nav?: Partial<NavOptions>;
+}
+export declare function HomeLayout(props: HomeLayoutProps & ComponentProps<'main'>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map