fumadocs-ui 14.2.1 → 14.3.0

package/dist/layouts/docs.d.ts

@@ -1,30 +1,45 @@
-import { PageTree } from 'fumadocs-core/server';
-import { HTMLAttributes, ReactNode } from 'react';
-import { S as SidebarProps } from '../sidebar-CQ4HmzQl.js';
-import { B as BaseLayoutProps } from '../shared-SScCiV7b.js';
-export { L as LinkItemType } from '../shared-SScCiV7b.js';
-import { Option } from '../components/layout/root-toggle.js';
-import 'react/jsx-runtime';
-
-interface TabOptions {
-    transform?: (option: Option, node: PageTree.Folder) => Option | null;
-}
-declare function getSidebarTabs(pageTree: PageTree.Root, { transform }?: TabOptions): Option[];
-
-interface SidebarOptions extends Omit<SidebarProps, 'children'> {
+import type { PageTree } from 'fumadocs-core/server';
+import { type ReactNode, type HTMLAttributes, type FC } from 'react';
+import { type SidebarProps } from '../layouts/docs/sidebar';
+import { type LinkItemType } from '../layouts/links';
+import { getSidebarTabs, type TabOptions } from '../utils/get-sidebar-tabs';
+import { type Option } from '../components/layout/root-toggle';
+import { type BaseLayoutProps } from './shared';
+interface SidebarOptions extends SidebarProps {
     enabled: boolean;
     component: ReactNode;
-    collapsible: boolean;
+    collapsible?: boolean;
+    components?: Partial<SidebarComponents>;
     /**
      * Root Toggle options
      */
     tabs?: Option[] | TabOptions | false;
+    banner?: ReactNode;
+    footer?: ReactNode;
+    /**
+     * Hide search trigger
+     *
+     * @defaultValue false
+     */
+    hideSearch?: boolean;
+}
+export interface SidebarComponents {
+    Item: FC<{
+        item: PageTree.Item;
+    }>;
+    Folder: FC<{
+        item: PageTree.Folder;
+        level: number;
+    }>;
+    Separator: FC<{
+        item: PageTree.Separator;
+    }>;
 }
-interface DocsLayoutProps extends BaseLayoutProps {
+export interface DocsLayoutProps extends BaseLayoutProps {
     tree: PageTree.Root;
     sidebar?: Partial<SidebarOptions>;
     containerProps?: HTMLAttributes<HTMLDivElement>;
 }
-declare function DocsLayout({ nav: { enabled: navEnabled, component: navReplace, transparentMode, ...nav }, sidebar: { enabled: sidebarEnabled, collapsible, component: sidebarReplace, tabs: tabOptions, ...sidebar }, i18n, ...props }: DocsLayoutProps): ReactNode;
-
-export { DocsLayout, type DocsLayoutProps, type TabOptions, getSidebarTabs };
+export declare function DocsLayout({ nav: { enabled: navEnabled, component: navReplace, transparentMode, ...nav }, sidebar: { enabled: sidebarEnabled, collapsible, component: sidebarReplace, tabs: tabOptions, banner: sidebarBanner, footer: sidebarFooter, components: sidebarComponents, ...sidebar }, i18n, ...props }: DocsLayoutProps): ReactNode;
+export { getSidebarTabs, type TabOptions, type LinkItemType };
+//# sourceMappingURL=docs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"docs.d.ts","sourceRoot":"","sources":["../../src/layouts/docs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,cAAc,EAAY,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAM/E,OAAO,EAML,KAAK,YAAY,EAOlB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EACL,KAAK,YAAY,EAGlB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,cAAc,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,EAAE,KAAK,MAAM,EAAc,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,UAAU,CAAC;AAgB1D,UAAU,cAAe,SAAQ,YAAY;IAC3C,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;IAErB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAExC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,UAAU,GAAG,KAAK,CAAC;IAErC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,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,CAAA;KAAE,CAAC,CAAC;IACrD,SAAS,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;CAC7C;AAED,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IAEpB,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IAElC,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,wBAAgB,UAAU,CAAC,EACzB,GAAG,EAAE,EACH,OAAO,EAAE,UAAiB,EAC1B,SAAS,EAAE,UAAU,EACrB,eAAe,EACf,GAAG,GAAG,EACF,EACN,OAAO,EAAE,EACP,OAAO,EAAE,cAAqB,EAC9B,WAAkB,EAClB,SAAS,EAAE,cAAc,EACzB,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,aAAa,EACrB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,iBAAiB,EAC7B,GAAG,OAAO,EACN,EACN,IAAY,EACZ,GAAG,KAAK,EACT,EAAE,eAAe,GAAG,SAAS,CAqF7B;AAiID,OAAO,EAAE,cAAc,EAAE,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,CAAC"}

package/dist/layouts/docs.js

@@ -1,207 +1,72 @@
-import {
-  TreeContextProvider,
-  SidebarCollapseTrigger,
-  ThemeToggle,
-  SubNav,
-  LanguageToggle,
-  LanguageToggleText,
-  LinksMenu,
-  RootToggle,
-  Sidebar,
-  IconItem,
-  MenuItem,
-  NavProvider,
-} from "./docs.client"
-import {
-  buttonVariants
-} from "../chunk-QKOA6KEZ.js";
-import {
-  Ellipsis,
-  Languages
-} from "../chunk-VPJMNIJX.js";
-import {
-  getLinks,
-  replaceOrDefault
-} from "../chunk-E3VO2QQT.js";
-import {
-  twMerge
-} from "../chunk-TK3TM3MR.js";
-import "../chunk-MLKGABMK.js";
-
-// src/layouts/docs.tsx
-import Link from "next/link";
-import { notFound } from "next/navigation";
-import dynamic from "next/dynamic";
-
-// src/utils/get-sidebar-tabs.tsx
-function getSidebarTabs(pageTree, { transform } = {}) {
-  const options = [];
-  function traverse(node) {
-    if (node.type === "folder" && node.root && node.index) {
-      const option = {
-        url: node.index.url,
-        title: node.name,
-        icon: node.icon,
-        description: node.description
-      };
-      const mapped = transform ? transform(option, node) : option;
-      if (mapped) options.push(mapped);
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import Link from 'next/link';
+import { Languages, MoreHorizontal } from 'lucide-react';
+import { notFound } from 'next/navigation';
+import { cn } from '../utils/cn';
+import { buttonVariants } from '../components/ui/button';
+import { CollapsibleSidebar, Sidebar, SidebarFooter, SidebarHeader, SidebarCollapseTrigger, SidebarViewport, SidebarItem, SidebarFolder, SidebarFolderLink, SidebarFolderTrigger, SidebarFolderContent, } from '../layouts/docs/sidebar';
+import { replaceOrDefault } from '../layouts/shared';
+import { BaseLinkItem, } from '../layouts/links';
+import { getSidebarTabs } from '../utils/get-sidebar-tabs';
+import { RootToggle } from '../components/layout/root-toggle';
+import { getLinks } from './shared';
+import { LanguageToggle, LanguageToggleText, } from '../components/layout/language-toggle';
+import { SidebarItems, LinksMenu } from '../layouts/docs.client';
+import { TreeContextProvider } from '../contexts/tree';
+import { NavProvider, Title } from '../components/layout/nav';
+import { ThemeToggle } from '../components/layout/theme-toggle';
+import { Navbar, NavbarSidebarTrigger } from '../layouts/docs/navbar';
+import { LargeSearchToggle, SearchToggle, } from '../components/layout/search-toggle';
+import { SearchOnly } from '../contexts/search';
+export function DocsLayout({ nav: { enabled: navEnabled = true, component: navReplace, transparentMode, ...nav } = {}, sidebar: { enabled: sidebarEnabled = true, collapsible = true, component: sidebarReplace, tabs: tabOptions, banner: sidebarBanner, footer: sidebarFooter, components: sidebarComponents, ...sidebar } = {}, i18n = false, ...props }) {
+    const links = getLinks(props.links ?? [], props.githubUrl);
+    const Aside = collapsible ? CollapsibleSidebar : Sidebar;
+    if (props.tree === undefined)
+        notFound();
+    let tabs = [];
+    if (Array.isArray(tabOptions)) {
+        tabs = tabOptions;
     }
-    if (node.type === "folder") node.children.forEach(traverse);
-  }
-  pageTree.children.forEach(traverse);
-  return options;
+    else if (typeof tabOptions === 'object') {
+        tabs = getSidebarTabs(props.tree, tabOptions);
+    }
+    else if (tabOptions !== false) {
+        tabs = getSidebarTabs(props.tree);
+    }
+    return (_jsx(TreeContextProvider, { tree: props.tree, children: _jsxs(NavProvider, { transparentMode: transparentMode, children: [replaceOrDefault({ enabled: navEnabled, component: navReplace }, _jsxs(Navbar, { className: "h-14 md:hidden", children: [_jsx(Title, { url: nav.url, title: nav.title }), _jsx("div", { className: "flex flex-1 flex-row items-center gap-1", children: nav.children }), _jsx(SearchOnly, { children: _jsx(SearchToggle, {}) }), _jsx(NavbarSidebarTrigger, {})] }), nav), _jsxs("main", { id: "nd-docs-layout", ...props.containerProps, className: cn('flex flex-1 flex-row', !navReplace && navEnabled
+                        ? '[--fd-nav-height:3.5rem] md:[--fd-nav-height:0px]'
+                        : null, props.containerProps?.className), children: [replaceOrDefault({ enabled: sidebarEnabled, component: sidebarReplace }, _jsxs(Aside, { ...sidebar, children: [_jsxs(SidebarHeader, { children: [_jsx(SidebarHeaderItems, { ...nav, links: links }), sidebarBanner, tabs.length > 0 ? (_jsx(RootToggle, { options: tabs, className: "-mx-2" })) : null, _jsx(SearchOnly, { children: _jsx(LargeSearchToggle, { className: "rounded-lg max-md:hidden" }) })] }), _jsxs(SidebarViewport, { children: [_jsx("div", { className: "px-2 pt-4 empty:hidden md:hidden", children: links
+                                                .filter((v) => v.type !== 'icon')
+                                                .map((item, i) => (_jsx(Fragment, { children: renderLinkItem(item) }, i))) }), _jsx(SidebarItems, { components: sidebarComponents })] }), _jsxs(SidebarFooter, { children: [_jsx(SidebarFooterItems, { sidebarCollapsible: collapsible, i18n: i18n, disableThemeSwitch: props.disableThemeSwitch ?? false, iconItems: links.filter((v) => v.type === 'icon') }), sidebarFooter] })] }), {
+                            ...sidebar,
+                            tabs,
+                        }), props.children] })] }) }));
 }
-
-// src/layouts/docs.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var DynamicSidebar = dynamic(
-  () => import("../dynamic-sidebar-SYEETGZL.js")
-);
-function DocsLayout({
-  nav: {
-    enabled: navEnabled = true,
-    component: navReplace,
-    transparentMode,
-    ...nav
-  } = {},
-  sidebar: {
-    enabled: sidebarEnabled = true,
-    collapsible = true,
-    component: sidebarReplace,
-    tabs: tabOptions,
-    ...sidebar
-  } = {},
-  i18n = false,
-  ...props
-}) {
-  const links = getLinks(props.links ?? [], props.githubUrl);
-  const Aside = collapsible ? DynamicSidebar : Sidebar;
-  if (props.tree === void 0) notFound();
-  let tabs = [];
-  if (Array.isArray(tabOptions)) {
-    tabs = tabOptions;
-  } else if (typeof tabOptions === "object") {
-    tabs = getSidebarTabs(props.tree, tabOptions);
-  } else if (tabOptions !== false) {
-    tabs = getSidebarTabs(props.tree);
-  }
-  const banner = /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 px-4 empty:hidden md:px-3 md:pb-2", children: [
-    /* @__PURE__ */ jsx(SidebarHeader, { ...nav, links }),
-    tabs.length > 0 ? /* @__PURE__ */ jsx(RootToggle, { className: "-mx-1", options: tabs }) : null,
-    sidebar.banner
-  ] });
-  const footer = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center border-t py-2 empty:hidden max-md:gap-1.5 max-md:px-3 md:mx-3", children: /* @__PURE__ */ jsx(
-      SidebarFooter,
-      {
-        sidebarCollapsible: collapsible,
-        i18n,
-        disableThemeSwitch: props.disableThemeSwitch ?? false,
-        iconItems: links.filter((v) => v.type === "icon")
-      }
-    ) }),
-    sidebar.footer
-  ] });
-  return /* @__PURE__ */ jsx(TreeContextProvider, { tree: props.tree, children: /* @__PURE__ */ jsxs(NavProvider, { transparentMode, children: [
-    replaceOrDefault(
-      { enabled: navEnabled, component: navReplace },
-      /* @__PURE__ */ jsx(SubNav, { className: "h-14 md:hidden", ...nav }),
-      nav
-    ),
-    /* @__PURE__ */ jsxs(
-      "main",
-      {
-        id: "nd-docs-layout",
-        ...props.containerProps,
-        className: twMerge(
-          "flex flex-1 flex-row",
-          !navReplace && navEnabled ? "[--fd-nav-height:3.5rem] md:[--fd-nav-height:0px]" : null,
-          props.containerProps?.className
-        ),
-        children: [
-          replaceOrDefault(
-            { enabled: sidebarEnabled, component: sidebarReplace },
-            /* @__PURE__ */ jsx(Aside, { ...sidebar, banner, footer, children: /* @__PURE__ */ jsx("div", { className: "flex flex-col px-2 pt-4 empty:hidden md:hidden", children: links.filter((v) => v.type !== "icon").map((item, i) => /* @__PURE__ */ jsx(MenuItem, { item }, i)) }) }),
-            {
-              ...sidebar,
-              banner,
-              footer
-            }
-          ),
-          props.children
-        ]
-      }
-    )
-  ] }) });
+function renderLinkItem(item) {
+    if (!item.type || item.type === 'main' || item.type === 'icon')
+        return (_jsx(SidebarItem, { href: item.url, icon: item.icon, external: item.external, children: item.text }));
+    if (item.type === 'menu')
+        return (_jsxs(SidebarFolder, { level: 1, children: [item.url ? (_jsxs(SidebarFolderLink, { href: item.url, children: [item.icon, item.text] })) : (_jsxs(SidebarFolderTrigger, { children: [item.icon, item.text] })), _jsx(SidebarFolderContent, { children: item.items.map((child, i) => (_jsx(Fragment, { children: renderLinkItem(child) }, i))) })] }));
+    if (item.type === 'button') {
+        return (_jsxs(BaseLinkItem, { item: item, className: cn(buttonVariants({
+                color: 'secondary',
+                className: 'gap-1.5 [&_svg]:size-4',
+            })), children: [item.icon, item.text] }));
+    }
+    if (item.type === 'custom')
+        return item.children;
 }
-function SidebarHeader({
-  links,
-  ...props
-}) {
-  if (!props.title && !props.children && links.length === 0) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center border-b pb-2 max-md:hidden", children: [
-    props.title ? /* @__PURE__ */ jsx(
-      Link,
-      {
-        href: props.url ?? "/",
-        className: "inline-flex items-center gap-2.5 py-1 font-medium",
-        children: props.title
-      }
-    ) : null,
-    props.children,
-    links.length > 0 ? /* @__PURE__ */ jsx(
-      LinksMenu,
-      {
-        items: links.map((item, i) => /* @__PURE__ */ jsx(MenuItem, { item }, i)),
-        className: twMerge(
-          buttonVariants({
-            size: "icon",
-            color: "ghost"
-          }),
-          "ms-auto"
-        ),
-        children: /* @__PURE__ */ jsx(Ellipsis, {})
-      }
-    ) : null
-  ] });
+function SidebarHeaderItems({ links, ...props }) {
+    const isEmpty = !props.title && !props.children && links.length === 0;
+    if (isEmpty)
+        return null;
+    return (_jsxs("div", { className: "flex flex-row items-center max-md:hidden", children: [props.title ? (_jsx(Link, { href: props.url ?? '/', className: "inline-flex items-center gap-2.5 py-1 font-medium", children: props.title })) : null, props.children, links.length > 0 ? (_jsx(LinksMenu, { items: links, className: cn(buttonVariants({
+                    size: 'icon',
+                    color: 'ghost',
+                }), 'ms-auto'), children: _jsx(MoreHorizontal, {}) })) : null] }));
 }
-function SidebarFooter({
-  iconItems,
-  ...props
-}) {
-  if (props.i18n) {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      iconItems.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center md:hidden", children: iconItems.map((item, i) => /* @__PURE__ */ jsx(
-        IconItem,
-        {
-          item,
-          className: "text-fd-muted-foreground"
-        },
-        i
-      )) }) : null,
-      !props.disableThemeSwitch ? /* @__PURE__ */ jsx(ThemeToggle, {}) : null,
-      /* @__PURE__ */ jsxs(LanguageToggle, { className: "max-md:order-first max-md:me-auto md:ms-auto", children: [
-        /* @__PURE__ */ jsx(Languages, { className: "size-5" }),
-        /* @__PURE__ */ jsx(LanguageToggleText, { className: "md:hidden" })
-      ] }),
-      props.sidebarCollapsible ? /* @__PURE__ */ jsx(SidebarCollapseTrigger, { className: "max-md:hidden" }) : null
-    ] });
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    iconItems.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center md:hidden", children: iconItems.map((item, i) => /* @__PURE__ */ jsx(
-      IconItem,
-      {
-        item,
-        className: "text-fd-muted-foreground"
-      },
-      i
-    )) }) : null,
-    !props.disableThemeSwitch ? /* @__PURE__ */ jsx(ThemeToggle, { className: "max-md:ms-auto" }) : null,
-    props.sidebarCollapsible ? /* @__PURE__ */ jsx(SidebarCollapseTrigger, { className: "ms-auto max-md:hidden" }) : null
-  ] });
+function SidebarFooterItems({ iconItems, ...props }) {
+    return (_jsxs("div", { className: "flex flex-row items-center", children: [iconItems.map((item, i) => (_jsx(BaseLinkItem, { item: item, className: cn(buttonVariants({ size: 'icon', color: 'ghost' }), 'text-fd-muted-foreground md:hidden'), "aria-label": item.label, children: item.icon }, i))), _jsx("div", { role: "separator", className: "flex-1" }), props.i18n ? (_jsxs(LanguageToggle, { className: "me-1.5", children: [_jsx(Languages, { className: "size-5" }), _jsx(LanguageToggleText, { className: "md:hidden" })] })) : null, !props.disableThemeSwitch ? (_jsx(ThemeToggle, { className: "p-0 md:order-first" })) : null, props.sidebarCollapsible ? (_jsx(SidebarCollapseTrigger, { className: "-me-1.5 max-md:hidden" })) : null] }));
 }
-export {
-  DocsLayout,
-  getSidebarTabs
-};
+export { getSidebarTabs };

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

@@ -0,0 +1,6 @@
+import { type LinkItemType } from '../../layouts/links';
+export declare function MenuLinkItem({ item, ...props }: {
+    item: LinkItemType;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=menu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../src/layouts/home/menu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAgB,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AA0BlE,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,GAAG,KAAK,EACT,EAAE;IACD,IAAI,EAAE,YAAY,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CA2CA"}

package/dist/layouts/home/menu.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { BaseLinkItem } from '../../layouts/links';
+import { cn } from '../../utils/cn';
+import { NavigationMenuLink } from '../../components/ui/navigation-menu';
+import Link from 'fumadocs-core/link';
+import { cva } from 'class-variance-authority';
+import { buttonVariants } from '../../components/ui/button';
+const menuItemVariants = cva('', {
+    variants: {
+        variant: {
+            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',
+            icon: buttonVariants({
+                size: 'icon',
+                color: 'ghost',
+            }),
+            button: buttonVariants({
+                color: 'secondary',
+                className: 'gap-1.5 [&_svg]:size-4',
+            }),
+        },
+    },
+    defaultVariants: {
+        variant: 'main',
+    },
+});
+export function MenuLinkItem({ item, ...props }) {
+    if (item.type === 'custom')
+        return _jsx("div", { className: cn('grid', props.className), children: item.children });
+    if (item.type === 'menu')
+        return (_jsxs("div", { className: cn('mb-4 flex flex-col', props.className), children: [_jsx("p", { className: "mb-1 text-sm text-fd-muted-foreground", children: item.url ? (_jsx(NavigationMenuLink, { asChild: true, children: _jsxs(Link, { href: item.url, children: [item.icon, item.text] }) })) : (_jsxs(_Fragment, { children: [item.icon, item.text] })) }), item.items.map((child, i) => (_jsx(MenuLinkItem, { item: child }, i)))] }));
+    return (_jsx(NavigationMenuLink, { asChild: true, children: _jsxs(BaseLinkItem, { item: item, className: cn(menuItemVariants({ variant: item.type }), props.className), "aria-label": item.type === 'icon' ? item.label : undefined, children: [item.icon, item.type === 'icon' ? undefined : item.text] }) }));
+}

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

@@ -0,0 +1,16 @@
+import { type ComponentProps, type HTMLAttributes } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { type LinkProps } from 'fumadocs-core/link';
+import { BaseLinkItem } from '../../layouts/links';
+import type { NavigationMenuContentProps, NavigationMenuTriggerProps } from '@radix-ui/react-navigation-menu';
+export declare function Navbar(props: HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
+export declare const NavbarMenu: import("react").ForwardRefExoticComponent<import("@radix-ui/react-navigation-menu").NavigationMenuItemProps & import("react").RefAttributes<HTMLLIElement>>;
+export declare function NavbarMenuContent(props: NavigationMenuContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function NavbarMenuTrigger(props: NavigationMenuTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare const linkVariants: (props?: ({
+    variant?: "button" | "main" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare function NavbarLink({ item, variant, ...props }: ComponentProps<typeof BaseLinkItem> & VariantProps<typeof linkVariants>): import("react/jsx-runtime").JSX.Element;
+export declare function NavbarMenuItem(props: LinkProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=navbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navbar.d.ts","sourceRoot":"","sources":["../../../src/layouts/home/navbar.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,cAAc,EAGpB,MAAM,OAAO,CAAC;AACf,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAU/C,OAAO,KAAK,EACV,0BAA0B,EAC1B,0BAA0B,EAC3B,MAAM,iCAAiC,CAAC;AAOzC,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,2CAwBxD;AAED,eAAO,MAAM,UAAU,6JAAqB,CAAC;AAE7C,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,0BAA0B,2CAYlE;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,0BAA0B,2CASlE;AAED,QAAA,MAAM,YAAY;;8EAiBhB,CAAC;AAEH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAO,EACP,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,YAAY,CAAC,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,2CAczE;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,SAAS,2CAY9C"}

package/dist/layouts/home/navbar.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useState, } from 'react';
+import { cva } from 'class-variance-authority';
+import Link from 'fumadocs-core/link';
+import { cn } from '../../utils/cn';
+import { BaseLinkItem } from '../../layouts/links';
+import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuTrigger, NavigationMenuViewport, } from '../../components/ui/navigation-menu';
+import { NavContext } from '../../components/layout/nav';
+import { buttonVariants } from '../../components/ui/button';
+const navItemVariants = cva('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 [&_svg]:size-4');
+export function Navbar(props) {
+    const [value, setValue] = useState('');
+    const { isTransparent } = useContext(NavContext);
+    return (_jsx(NavigationMenu, { value: value, onValueChange: setValue, asChild: true, children: _jsxs("header", { id: "nd-nav", ...props, className: cn('fixed left-1/2 top-[var(--fd-banner-height)] z-40 w-full max-w-fd-container -translate-x-1/2 border-b border-fd-foreground/10 transition-colors lg:mt-2 lg:w-[calc(100%-1rem)] lg:rounded-2xl lg:border', value.length > 0 ? 'shadow-lg' : 'shadow-sm', (!isTransparent || value.length > 0) &&
+                'bg-fd-background/80 backdrop-blur-lg', props.className), children: [_jsx("nav", { className: "flex h-14 w-full flex-row items-center gap-6 px-4 lg:h-12", children: props.children }), _jsx(NavigationMenuViewport, {})] }) }));
+}
+export const NavbarMenu = NavigationMenuItem;
+export function NavbarMenuContent(props) {
+    return (_jsx(NavigationMenuContent, { ...props, className: cn('grid grid-cols-1 gap-3 px-4 pb-4 md:grid-cols-2 lg:grid-cols-3', props.className), children: props.children }));
+}
+export function NavbarMenuTrigger(props) {
+    return (_jsx(NavigationMenuTrigger, { ...props, className: cn(navItemVariants(), 'rounded-md', props.className), children: props.children }));
+}
+const linkVariants = cva(undefined, {
+    variants: {
+        variant: {
+            main: navItemVariants(),
+            button: buttonVariants({
+                color: 'secondary',
+                className: 'gap-1.5 [&_svg]:size-4',
+            }),
+            icon: buttonVariants({
+                color: 'ghost',
+                size: 'icon',
+            }),
+        },
+    },
+    defaultVariants: {
+        variant: 'main',
+    },
+});
+export function NavbarLink({ item, variant, ...props }) {
+    return (_jsx(NavigationMenuItem, { className: "list-none", children: _jsx(NavigationMenuLink, { asChild: true, children: _jsx(BaseLinkItem, { ...props, item: item, className: cn(linkVariants({ variant }), props.className), children: props.children }) }) }));
+}
+export function NavbarMenuItem(props) {
+    return (_jsx(NavigationMenuLink, { asChild: true, children: _jsx(Link, { ...props, 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', props.className) }) }));
+}

package/dist/layouts/home.d.ts

@@ -1,7 +1,5 @@
-import { HTMLAttributes } from 'react';
-import { B as BaseLayoutProps } from '../shared-SScCiV7b.js';
-
-type HomeLayoutProps = BaseLayoutProps & HTMLAttributes<HTMLElement>;
-declare function HomeLayout({ nav: { transparentMode, ...nav }, links, githubUrl, i18n, disableThemeSwitch, ...props }: HomeLayoutProps): React.ReactElement;
-
-export { HomeLayout, type HomeLayoutProps };
+import type { HTMLAttributes, ReactNode } from 'react';
+import { type BaseLayoutProps } from './shared';
+export type HomeLayoutProps = BaseLayoutProps & HTMLAttributes<HTMLElement>;
+export declare function HomeLayout({ nav: { transparentMode, enableSearch, ...nav }, links, githubUrl, i18n, disableThemeSwitch, ...props }: HomeLayoutProps): ReactNode;
+//# sourceMappingURL=home.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"home.d.ts","sourceRoot":"","sources":["../../src/layouts/home.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,OAAO,EAAY,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAgC1D,MAAM,MAAM,eAAe,GAAG,eAAe,GAAG,cAAc,CAAC,WAAW,CAAC,CAAC;AAE5E,wBAAgB,UAAU,CAAC,EACzB,GAAG,EAAE,EAAE,eAAe,EAAE,YAAmB,EAAE,GAAG,GAAG,EAAO,EAC1D,KAAU,EACV,SAAS,EACT,IAAY,EACZ,kBAAkB,EAClB,GAAG,KAAK,EACT,EAAE,eAAe,GAAG,SAAS,CAkH7B"}

package/dist/layouts/home.js

@@ -1,61 +1,53 @@
-import { Nav, NavProvider } from "./home.client"
-import {
-  getLinks,
-  replaceOrDefault
-} from "../chunk-E3VO2QQT.js";
-import {
-  twMerge
-} from "../chunk-TK3TM3MR.js";
-import "../chunk-MLKGABMK.js";
-
-// src/layouts/home.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-function HomeLayout({
-  nav: { transparentMode, ...nav } = {},
-  links = [],
-  githubUrl,
-  i18n,
-  disableThemeSwitch,
-  ...props
-}) {
-  const finalLinks = getLinks(links, githubUrl);
-  return /* @__PURE__ */ jsx(NavProvider, { transparentMode, children: /* @__PURE__ */ jsxs(
-    "main",
-    {
-      id: "nd-home-layout",
-      ...props,
-      className: twMerge(
-        "flex flex-1 flex-col pt-[var(--fd-nav-height)]",
-        props.className
-      ),
-      style: {
-        "--fd-nav-height": "54px",
-        ...props.style
-      },
-      children: [
-        replaceOrDefault(
-          nav,
-          /* @__PURE__ */ jsx(
-            Nav,
-            {
-              items: finalLinks,
-              i18n,
-              disableThemeSwitch,
-              ...nav
-            }
-          ),
-          {
-            items: finalLinks,
-            i18n,
-            disableThemeSwitch,
-            ...nav
-          }
-        ),
-        props.children
-      ]
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { replaceOrDefault } from '../layouts/shared';
+import { cn } from '../utils/cn';
+import { getLinks } from './shared';
+import { NavProvider, Title } from '../components/layout/nav';
+import { NavigationMenuContent, NavigationMenuItem, NavigationMenuList, NavigationMenuTrigger, } from '../components/ui/navigation-menu';
+import { Navbar, NavbarLink, NavbarMenu, NavbarMenuContent, NavbarMenuItem, NavbarMenuTrigger, } from '../layouts/home/navbar';
+import { LargeSearchToggle, SearchToggle, } from '../components/layout/search-toggle';
+import { ThemeToggle } from '../components/layout/theme-toggle';
+import { LanguageToggle, LanguageToggleText, } from '../components/layout/language-toggle';
+import { ChevronDown, Languages } from 'lucide-react';
+import { buttonVariants } from '../components/ui/button';
+import { SearchOnly } from '../contexts/search';
+import Link from 'fumadocs-core/link';
+import { MenuLinkItem } from '../layouts/home/menu';
+export function HomeLayout({ nav: { transparentMode, enableSearch = true, ...nav } = {}, links = [], githubUrl, i18n = false, disableThemeSwitch, ...props }) {
+    const finalLinks = getLinks(links, githubUrl);
+    const navItems = finalLinks.filter((item) => ['nav', 'all'].includes(item.on ?? 'all'));
+    const menuItems = finalLinks.filter((item) => ['menu', 'all'].includes(item.on ?? 'all'));
+    return (_jsx(NavProvider, { transparentMode: transparentMode, children: _jsxs("main", { id: "nd-home-layout", ...props, className: cn('flex flex-1 flex-col pt-[var(--fd-nav-height)] [--fd-nav-height:56px]', props.className), children: [replaceOrDefault(nav, _jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": "true", className: "fixed inset-x-0 top-[var(--fd-banner-height)] z-40 h-6 bg-fd-background", style: {
+                                maskImage: 'linear-gradient(to bottom,white,transparent)',
+                            } }), _jsxs(Navbar, { children: [_jsx(Title, { title: nav.title, url: nav.url }), nav.children, _jsx(NavigationMenuList, { className: "flex flex-row items-center gap-2 max-sm:hidden", children: navItems
+                                        .filter((item) => !isSecondary(item))
+                                        .map((item, i) => (_jsx(NavbarLinkItem, { item: item, className: "text-sm" }, i))) }), _jsxs("div", { className: "flex flex-1 flex-row items-center justify-end lg:gap-1.5", children: [enableSearch ? (_jsxs(SearchOnly, { children: [_jsx(SearchToggle, { className: "lg:hidden" }), _jsx(LargeSearchToggle, { className: "w-full max-w-[240px] max-lg:hidden" })] })) : null, !disableThemeSwitch ? (_jsx(ThemeToggle, { className: "max-lg:hidden" })) : null, i18n ? (_jsx(LanguageToggle, { className: "-me-1.5 max-lg:hidden", children: _jsx(Languages, { className: "size-5" }) })) : null, navItems.filter(isSecondary).map((item, i) => (_jsx(NavbarLinkItem, { item: item, className: "-me-1.5 list-none max-lg:hidden" }, i))), _jsxs(NavigationMenuItem, { className: "list-none lg:hidden", children: [_jsx(NavigationMenuTrigger, { className: cn(buttonVariants({
+                                                        size: 'icon',
+                                                        color: 'ghost',
+                                                    }), 'group -me-2'), children: _jsx(ChevronDown, { className: "size-3 transition-transform duration-300 group-data-[state=open]:rotate-180" }) }), _jsxs(NavigationMenuContent, { className: "flex flex-col p-4 sm:flex-row sm:items-center sm:justify-end", children: [menuItems
+                                                            .filter((item) => !isSecondary(item))
+                                                            .map((item, i) => (_jsx(MenuLinkItem, { item: item, className: "sm:hidden" }, i))), _jsxs("div", { className: "-ms-1.5 flex flex-row items-center gap-1.5 max-sm:mt-2", children: [menuItems.filter(isSecondary).map((item, i) => (_jsx(MenuLinkItem, { item: item, className: "-me-1.5" }, i))), _jsx("div", { role: "separator", className: "flex-1" }), i18n ? (_jsxs(LanguageToggle, { children: [_jsx(Languages, { className: "size-5" }), _jsx(LanguageToggleText, {}), _jsx(ChevronDown, { className: "size-3 text-fd-muted-foreground" })] })) : null, !disableThemeSwitch ? _jsx(ThemeToggle, {}) : null] })] })] })] })] })] }), {
+                    items: finalLinks,
+                    i18n,
+                    enableSearch,
+                    disableThemeSwitch,
+                    ...nav,
+                }), props.children] }) }));
+}
+function NavbarLinkItem({ item, ...props }) {
+    if (item.type === 'custom')
+        return _jsx("div", { ...props, children: item.children });
+    if (item.type === 'menu') {
+        return (_jsxs(NavbarMenu, { children: [_jsx(NavbarMenuTrigger, { ...props, children: item.url ? _jsx(Link, { href: item.url, children: item.text }) : item.text }), _jsx(NavbarMenuContent, { children: item.items.map((child, j) => {
+                        if (child.type === 'custom')
+                            return _jsx("div", { children: child.children }, j);
+                        const { banner, footer, ...rest } = child.menu ?? {};
+                        return (_jsxs(NavbarMenuItem, { href: child.url, ...rest, children: [banner ??
+                                    (child.icon ? (_jsx("div", { className: "w-fit rounded-md border bg-fd-muted p-1 [&_svg]:size-4", children: child.icon })) : null), _jsx("p", { className: "-mb-1 text-sm font-medium", children: child.text }), child.description ? (_jsx("p", { className: "text-[13px] text-fd-muted-foreground", children: child.description })) : null, footer] }, j));
+                    }) })] }));
     }
-  ) });
+    return (_jsx(NavbarLink, { ...props, item: item, variant: item.type, "aria-label": item.type === 'icon' ? item.label : undefined, children: item.type === 'icon' ? item.icon : item.text }));
+}
+function isSecondary(item) {
+    return (('secondary' in item && item.secondary === true) || item.type === 'icon');
 }
-export {
-  HomeLayout
-};