@fumadocs/base-ui 16.11.0 → 16.11.2

package/dist/layouts/home/slots/header.js

@@ -6,14 +6,14 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../co
 import { LinkItem } from "../../shared/client.js";
 import "../../shared/index.js";
 import { useIsScrollTop } from "../../../utils/use-is-scroll-top.js";
-import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport } from "../../../components/ui/navigation-menu.js";
 import { useHomeLayout } from "../index.js";
 import Link from "fumadocs-core/link";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown, Languages } from "lucide-react";
 import { cva } from "class-variance-authority";
-import { Fragment as Fragment$1, useEffect, useEffectEvent, useRef, useState } from "react";
+import { Fragment as Fragment$1, createContext, use, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
 import { useTranslations } from "@fuma-translate/react";
+import { NavigationMenu } from "@base-ui/react/navigation-menu";
 //#region src/layouts/home/slots/header.tsx
 const navItemVariants = cva("[&_svg]:size-4", {
 	variants: { variant: {
@@ -29,6 +29,7 @@ const navItemVariants = cva("[&_svg]:size-4", {
 	} },
 	defaultVariants: { variant: "main" }
 });
+const MobileNavigationMenuContext = createContext(null);
 function Header(props) {
 	const { navItems, menuItems, slots, props: { nav } } = useHomeLayout();
 	const headerRef = useRef(null);
@@ -49,7 +50,7 @@ function Header(props) {
 			window.removeEventListener("click", onClick);
 		};
 	}, []);
-	const list = /* @__PURE__ */ jsxs(NavigationMenuList, {
+	const list = /* @__PURE__ */ jsxs(NavigationMenu.List, {
 		ref: listRef,
 		className: "flex h-14 w-full mx-auto max-w-(--fd-layout-width) items-center px-4",
 		children: [
@@ -107,42 +108,58 @@ function Header(props) {
 			...props,
 			ref: mergeRefs(headerRef, props.ref),
 			className: cn("sticky h-14 top-0 z-40", props.className),
-			children: /* @__PURE__ */ jsxs(NavigationMenu, {
+			children: /* @__PURE__ */ jsxs(NavigationMenu.Root, {
 				className: (s) => cn("backdrop-blur-lg border-b transition-[box-shadow,background-color,border-radius]", open && "max-lg:shadow-lg max-lg:rounded-b-2xl", (open || !isNavTransparent || s.open) && "bg-fd-background/80"),
 				children: [
 					list,
 					/* @__PURE__ */ jsx(CollapsibleContent, {
 						className: "mx-auto max-w-(--fd-layout-width) lg:hidden",
-						children: /* @__PURE__ */ jsxs("div", {
+						children: /* @__PURE__ */ jsx("div", {
 							className: "flex flex-col pt-2 p-4 sm:flex-row sm:items-center sm:justify-end",
-							children: [menuItems.filter((item) => !isSecondary(item)).map((item, i) => /* @__PURE__ */ jsx(MobileNavigationMenuLinkItem, {
-								item,
-								className: "sm:hidden"
-							}, i)), /* @__PURE__ */ jsxs("div", {
-								className: "-ms-1.5 flex flex-row items-center gap-2 max-sm:mt-2",
-								children: [
-									menuItems.filter(isSecondary).map((item, i) => /* @__PURE__ */ jsx(MobileNavigationMenuLinkItem, {
-										item,
-										className: cn(item.type === "icon" && "-mx-1 first:ms-0")
-									}, i)),
-									/* @__PURE__ */ jsx("div", {
-										role: "separator",
-										className: "flex-1"
-									}),
-									slots.languageSelect && /* @__PURE__ */ jsxs(slots.languageSelect.root, { children: [
-										/* @__PURE__ */ jsx(Languages, { className: "size-5" }),
-										slots.languageSelect.text && /* @__PURE__ */ jsx(slots.languageSelect.text, {}),
-										/* @__PURE__ */ jsx(ChevronDown, { className: "size-3 text-fd-muted-foreground" })
-									] }),
-									slots.themeSwitch && /* @__PURE__ */ jsx(slots.themeSwitch, {})
-								]
-							})]
+							children: /* @__PURE__ */ jsxs(MobileNavigationMenuContext, {
+								value: useMemo(() => ({ setOpen }), []),
+								children: [menuItems.filter((item) => !isSecondary(item)).map((item, i) => /* @__PURE__ */ jsx(MobileNavigationMenuLinkItem, {
+									item,
+									className: "sm:hidden"
+								}, i)), /* @__PURE__ */ jsxs("div", {
+									className: "-ms-1.5 flex flex-row items-center gap-2 max-sm:mt-2",
+									children: [
+										menuItems.filter(isSecondary).map((item, i) => /* @__PURE__ */ jsx(MobileNavigationMenuLinkItem, {
+											item,
+											className: cn(item.type === "icon" && "-mx-1 first:ms-0")
+										}, i)),
+										/* @__PURE__ */ jsx("div", {
+											role: "separator",
+											className: "flex-1"
+										}),
+										slots.languageSelect && /* @__PURE__ */ jsxs(slots.languageSelect.root, { children: [
+											/* @__PURE__ */ jsx(Languages, { className: "size-5" }),
+											slots.languageSelect.text && /* @__PURE__ */ jsx(slots.languageSelect.text, {}),
+											/* @__PURE__ */ jsx(ChevronDown, { className: "size-3 text-fd-muted-foreground" })
+										] }),
+										slots.themeSwitch && /* @__PURE__ */ jsx(slots.themeSwitch, {})
+									]
+								})]
+							})
 						})
 					}),
-					/* @__PURE__ */ jsx(NavigationMenuViewport, {
+					/* @__PURE__ */ jsx(NavigationMenu.Portal, { children: /* @__PURE__ */ jsx(NavigationMenu.Positioner, {
 						side: "bottom",
-						anchor: listRef
-					})
+						anchor: listRef,
+						collisionPadding: {
+							top: 5,
+							bottom: 5
+						},
+						className: "z-40 box-border h-(--positioner-height) w-(--anchor-width) max-w-(--available-width) duration-(--duration) ease-(--easing) before:absolute before:content-[''] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5",
+						style: {
+							["--duration"]: "0.35s",
+							["--easing"]: "cubic-bezier(0.22, 1, 0.36, 1)"
+						},
+						children: /* @__PURE__ */ jsx(NavigationMenu.Popup, {
+							className: "relative border h-(--popup-height) w-full rounded-xl bg-fd-popover/80 text-fd-popover-foreground backdrop-blur-md shadow-lg transition-[opacity,width,height] duration-(--duration) ease-(--easing) data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:opacity-0",
+							children: /* @__PURE__ */ jsx(NavigationMenu.Viewport, { className: "relative size-full overflow-hidden" })
+						})
+					}) })
 				]
 			})
 		})
@@ -152,7 +169,7 @@ function isSecondary(item) {
 	if ("secondary" in item && item.secondary != null) return item.secondary;
 	return item.type === "icon";
 }
-function NavigationMenuLinkItem({ item, ...props }) {
+function NavigationMenuLinkItem({ item, className, ...props }) {
 	if (item.type === "custom") return item.children;
 	if (item.type === "menu") {
 		const children = item.items.map((child, j) => {
@@ -161,7 +178,7 @@ function NavigationMenuLinkItem({ item, ...props }) {
 				className: "w-fit rounded-md border bg-fd-muted p-1 [&_svg]:size-4",
 				children: child.icon
 			}) : null, ...rest } = child.menu ?? {};
-			return /* @__PURE__ */ jsx(NavigationMenuLink, { render: /* @__PURE__ */ jsx(Link, {
+			return /* @__PURE__ */ jsx(NavigationMenu.Link, { render: /* @__PURE__ */ jsx(Link, {
 				href: child.url,
 				external: child.external,
 				...rest,
@@ -179,24 +196,26 @@ function NavigationMenuLinkItem({ item, ...props }) {
 				] })
 			}) }, `${j}-${child.url}`);
 		});
-		return /* @__PURE__ */ jsxs(NavigationMenuItem, {
+		return /* @__PURE__ */ jsxs(NavigationMenu.Item, {
+			className: cn("list-none", className),
 			...props,
-			children: [/* @__PURE__ */ jsx(NavigationMenuTrigger, {
+			children: [/* @__PURE__ */ jsx(NavigationMenu.Trigger, {
 				className: cn(navItemVariants(), "rounded-md"),
 				children: item.url ? /* @__PURE__ */ jsx(Link, {
 					href: item.url,
 					external: item.external,
 					children: item.text
 				}) : item.text
-			}), /* @__PURE__ */ jsx(NavigationMenuContent, {
-				className: "grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3",
+			}), /* @__PURE__ */ jsx(NavigationMenu.Content, {
+				className: cn("h-full w-(--anchor-width) max-w-(--available-width) p-3", "transition-[opacity,transform,translate] duration-(--duration) ease-(--easing)", "data-starting-style:opacity-0 data-ending-style:opacity-0", "data-starting-style:data-[activation-direction=left]:-translate-x-1/2", "data-starting-style:data-[activation-direction=right]:translate-x-1/2", "data-ending-style:data-[activation-direction=left]:translate-x-1/2", "data-ending-style:data-[activation-direction=right]:-translate-x-1/2", "grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3"),
 				children
 			})]
 		});
 	}
-	return /* @__PURE__ */ jsx(NavigationMenuItem, {
+	return /* @__PURE__ */ jsx(NavigationMenu.Item, {
+		className: cn("list-none", className),
 		...props,
-		children: /* @__PURE__ */ jsx(NavigationMenuLink, { render: /* @__PURE__ */ jsx(LinkItem, {
+		children: /* @__PURE__ */ jsx(NavigationMenu.Link, { render: /* @__PURE__ */ jsx(LinkItem, {
 			item,
 			"aria-label": item.type === "icon" ? item.label : void 0,
 			className: cn(navItemVariants({ variant: item.type })),
@@ -205,24 +224,23 @@ function NavigationMenuLinkItem({ item, ...props }) {
 	});
 }
 function MobileNavigationMenuLinkItem({ item, ...props }) {
+	const { setOpen } = use(MobileNavigationMenuContext);
 	if (item.type === "custom") return /* @__PURE__ */ jsx("div", {
 		className: cn("grid", props.className),
 		children: item.children
 	});
-	if (item.type === "menu") {
-		const header = /* @__PURE__ */ jsxs(Fragment, { children: [item.icon, item.text] });
-		return /* @__PURE__ */ jsxs("div", {
-			className: cn("mb-4 flex flex-col", props.className),
-			children: [/* @__PURE__ */ jsx("p", {
-				className: "mb-1 text-sm text-fd-muted-foreground",
-				children: item.url ? /* @__PURE__ */ jsx(Link, {
-					href: item.url,
-					external: item.external,
-					children: header
-				}) : header
-			}), item.items.map((child, i) => /* @__PURE__ */ jsx(MobileNavigationMenuLinkItem, { item: child }, i))]
-		});
-	}
+	if (item.type === "menu") return /* @__PURE__ */ jsxs("div", {
+		className: cn("mb-4 flex flex-col", props.className),
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "mb-1 text-sm text-fd-muted-foreground",
+			children: item.url ? /* @__PURE__ */ jsxs(Link, {
+				href: item.url,
+				external: item.external,
+				onClick: () => setOpen(false),
+				children: [item.icon, item.text]
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [item.icon, item.text] })
+		}), item.items.map((child, i) => /* @__PURE__ */ jsx(MobileNavigationMenuLinkItem, { item: child }, i))]
+	});
 	return /* @__PURE__ */ jsxs(LinkItem, {
 		item,
 		className: cn({
@@ -237,6 +255,7 @@ function MobileNavigationMenuLinkItem({ item, ...props }) {
 			})
 		}[item.type ?? "main"], props.className),
 		"aria-label": item.type === "icon" ? item.label : void 0,
+		onClick: () => setOpen(false),
 		children: [item.icon, item.type === "icon" ? void 0 : item.text]
 	});
 }

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

@@ -3,7 +3,6 @@ import { LayoutTab, LinkItemType } from "../shared/index.js";
 import { SidebarProps, SidebarProviderProps } from "./slots/sidebar.js";
 import { DocsLayoutProps } from "./index.js";
 import { ComponentProps, FC } from "react";
-
 //#region src/layouts/notebook/client.d.ts
 interface DocsSlots extends BaseSlots {
   container: FC<ComponentProps<'div'>>;

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

@@ -3,7 +3,6 @@ import { SidebarProps, SidebarProviderProps } from "./slots/sidebar.js";
 import { DocsSlots, useNotebookLayout } from "./client.js";
 import { HTMLAttributes } from "react";
 import * as PageTree from "fumadocs-core/page-tree";
-
 //#region src/layouts/notebook/index.d.ts
 interface DocsLayoutProps extends Omit<BaseLayoutProps, 'nav'> {
   tree: PageTree.Root;
@@ -22,16 +21,6 @@ interface SidebarOptions extends SidebarProps, SidebarProviderProps {
    */
   tabs?: LayoutTab[] | GetLayoutTabsOptions | false;
 }
-declare function DocsLayout({
-  tree,
-  tabMode,
-  sidebar: {
-    tabs: defaultTabs,
-    ...sidebarProps
-  },
-  children,
-  tabs,
-  ...props
-}: DocsLayoutProps): import("react").JSX.Element;
+declare function DocsLayout({ tree, tabMode, sidebar: { tabs: defaultTabs, ...sidebarProps }, children, tabs, ...props }: DocsLayoutProps): import("react").JSX.Element;
 //#endregion
 export { DocsLayout, DocsLayoutProps, type DocsSlots, useNotebookLayout };

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

@@ -4,7 +4,6 @@ import { Footer, FooterProps } from "./slots/footer.js";
 import { Breadcrumb, BreadcrumbProps } from "./slots/breadcrumb.js";
 import { ComponentProps, FC, ReactNode } from "react";
 import { TOCItemType } from "fumadocs-core/toc";
-
 //#region src/layouts/notebook/page/index.d.ts
 interface DocsPageProps extends ComponentProps<'article'> {
   toc?: TOCItemType[];
@@ -62,53 +61,15 @@ declare function useDocsPage(): {
   full: NonNullable<DocsPageProps["full"]>;
   slots: DocsPageSlots;
 };
-declare function DocsPage({
-  full,
-  tableOfContent: {
-    enabled: tocEnabled,
-    single,
-    ...tocProps
-  },
-  tableOfContentPopover: {
-    enabled: tocPopoverEnabled,
-    ...tocPopoverProps
-  },
-  breadcrumb: {
-    enabled: breadcrumbEnabled,
-    ...breadcrumb
-  },
-  footer: {
-    enabled: footerEnabled,
-    ...footer
-  },
-  toc,
-  slots: defaultSlots,
-  children,
-  ...containerProps
-}: DocsPageProps): import("react").JSX.Element;
+declare function DocsPage({ full, tableOfContent: { enabled: tocEnabled, single, ...tocProps }, tableOfContentPopover: { enabled: tocPopoverEnabled, ...tocPopoverProps }, breadcrumb: { enabled: breadcrumbEnabled, ...breadcrumb }, footer: { enabled: footerEnabled, ...footer }, toc, slots: defaultSlots, children, ...containerProps }: DocsPageProps): import("react").JSX.Element;
 declare function EditOnGitHub(props: ComponentProps<'a'>): import("react").JSX.Element;
 /**
  * Add typography styles
  */
-declare function DocsBody({
-  children,
-  className,
-  ...props
-}: ComponentProps<'div'>): import("react").JSX.Element;
-declare function DocsDescription({
-  children,
-  className,
-  ...props
-}: ComponentProps<'p'>): import("react").JSX.Element | null;
-declare function DocsTitle({
-  children,
-  className,
-  ...props
-}: ComponentProps<'h1'>): import("react").JSX.Element;
-declare function PageLastUpdate({
-  date: value,
-  ...props
-}: Omit<ComponentProps<'p'>, 'children'> & {
+declare function DocsBody({ children, className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+declare function DocsDescription({ children, className, ...props }: ComponentProps<'p'>): import("react").JSX.Element | null;
+declare function DocsTitle({ children, className, ...props }: ComponentProps<'h1'>): import("react").JSX.Element;
+declare function PageLastUpdate({ date: value, ...props }: Omit<ComponentProps<'p'>, 'children'> & {
   date: Date;
 }): import("react").JSX.Element;
 //#endregion

package/dist/layouts/notebook/page/slots/breadcrumb.d.ts

@@ -1,13 +1,7 @@
 import { ComponentProps } from "react";
 import { BreadcrumbOptions } from "fumadocs-core/breadcrumb";
-
 //#region src/layouts/notebook/page/slots/breadcrumb.d.ts
 type BreadcrumbProps = BreadcrumbOptions & ComponentProps<'div'>;
-declare function Breadcrumb({
-  includeRoot,
-  includeSeparator,
-  includePage,
-  ...props
-}: BreadcrumbProps): import("react").JSX.Element | null;
+declare function Breadcrumb({ includeRoot, includeSeparator, includePage, ...props }: BreadcrumbProps): import("react").JSX.Element | null;
 //#endregion
 export { Breadcrumb, BreadcrumbProps };

package/dist/layouts/notebook/page/slots/container.d.ts

@@ -1,5 +1,4 @@
 import { ComponentProps } from "react";
-
 //#region src/layouts/notebook/page/slots/container.d.ts
 declare function Container(props: ComponentProps<'article'>): import("react").JSX.Element;
 //#endregion

package/dist/layouts/notebook/page/slots/footer.d.ts

@@ -1,6 +1,5 @@
 import { ComponentProps } from "react";
 import * as PageTree from "fumadocs-core/page-tree";
-
 //#region src/layouts/notebook/page/slots/footer.d.ts
 type Item = Pick<PageTree.Item, 'name' | 'description' | 'url'>;
 interface FooterProps extends ComponentProps<'div'> {
@@ -12,11 +11,6 @@ interface FooterProps extends ComponentProps<'div'> {
     next?: Item;
   };
 }
-declare function Footer({
-  items,
-  children,
-  className,
-  ...props
-}: FooterProps): import("react").JSX.Element;
+declare function Footer({ items, children, className, ...props }: FooterProps): import("react").JSX.Element;
 //#endregion
 export { Footer, FooterProps };

package/dist/layouts/notebook/page/slots/toc.d.ts

@@ -2,7 +2,6 @@ import { TOCItemsProps } from "../../../../components/toc/clerk.js";
 import { TOCItemsProps as TOCItemsProps$1 } from "../../../../components/toc/default.js";
 import { TOCProviderProps as TOCProviderProps$1 } from "../../../../components/toc/index.js";
 import { ComponentProps, ReactNode } from "react";
-
 //#region src/layouts/notebook/page/slots/toc.d.ts
 type TOCProviderProps = TOCProviderProps$1;
 declare function TOCProvider(props: TOCProviderProps): import("react").JSX.Element;
@@ -23,13 +22,7 @@ type TOCProps = {
   style: 'clerk';
   list?: TOCItemsProps;
 });
-declare function TOC({
-  container,
-  header,
-  footer,
-  style,
-  list
-}: TOCProps): import("react").JSX.Element;
+declare function TOC({ container, header, footer, style, list }: TOCProps): import("react").JSX.Element;
 type TOCPopoverProps = {
   container?: ComponentProps<'div'>;
   trigger?: ComponentProps<'button'>;
@@ -49,14 +42,6 @@ type TOCPopoverProps = {
   style: 'clerk';
   list?: TOCItemsProps;
 });
-declare function TOCPopover({
-  container,
-  trigger,
-  content,
-  header,
-  footer,
-  style,
-  list
-}: TOCPopoverProps): import("react").JSX.Element;
+declare function TOCPopover({ container, trigger, content, header, footer, style, list }: TOCPopoverProps): import("react").JSX.Element;
 //#endregion
 export { TOC, TOCPopover, TOCPopoverProps, TOCProps, TOCProvider, TOCProviderProps };

package/dist/layouts/notebook/slots/container.d.ts

@@ -1,5 +1,4 @@
 import { ComponentProps } from "react";
-
 //#region src/layouts/notebook/slots/container.d.ts
 declare function Container(props: ComponentProps<'div'>): import("react").JSX.Element;
 //#endregion

package/dist/layouts/notebook/slots/header.d.ts

@@ -1,5 +1,4 @@
 import { ComponentProps } from "react";
-
 //#region src/layouts/notebook/slots/header.d.ts
 declare function Header(props: ComponentProps<'header'>): string | number | bigint | true | import("react").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined>;
 //#endregion

package/dist/layouts/notebook/slots/sidebar.d.ts

@@ -2,7 +2,6 @@ import { SidebarProviderProps as SidebarProviderProps$1, useSidebar as useSideba
 import { LayoutTab } from "../../shared/index.js";
 import { SidebarPageTreeComponents } from "../../../components/sidebar/page-tree.js";
 import { ComponentProps, FC, ReactNode } from "react";
-
 //#region src/layouts/notebook/slots/sidebar.d.ts
 interface SidebarProps extends ComponentProps<'aside'> {
   components?: Partial<SidebarPageTreeComponents>;
@@ -20,18 +19,8 @@ declare const useSidebar: typeof useSidebar$1;
 declare function SidebarProvider(props: SidebarProviderProps): import("react").JSX.Element;
 declare function SidebarTrigger(props: ComponentProps<'button'>): import("react").JSX.Element;
 declare function SidebarCollapseTrigger(props: ComponentProps<'button'>): import("react").JSX.Element;
-declare function Sidebar({
-  banner,
-  footer,
-  components,
-  collapsible,
-  ...rest
-}: SidebarProps): import("react").JSX.Element;
-declare function SidebarTabsDropdown({
-  options,
-  placeholder,
-  ...props
-}: {
+declare function Sidebar({ banner, footer, components, collapsible, ...rest }: SidebarProps): import("react").JSX.Element;
+declare function SidebarTabsDropdown({ options, placeholder, ...props }: {
   placeholder?: ReactNode;
   options: LayoutTab[];
 } & ComponentProps<'button'>): import("react").JSX.Element;

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

@@ -3,13 +3,8 @@ import { FullSearchTriggerProps, SearchTriggerProps } from "./slots/search-trigg
 import { ThemeSwitchProps } from "./slots/theme-switch.js";
 import { BaseLayoutProps, LinkItemType } from "./index.js";
 import { ComponentProps, FC } from "react";
-
 //#region src/layouts/shared/client.d.ts
-declare function LinkItem({
-  ref,
-  item,
-  ...props
-}: Omit<ComponentProps<'a'>, 'href'> & {
+declare function LinkItem({ ref, item, ...props }: Omit<ComponentProps<'a'>, 'href'> & {
   item: Extract<LinkItemType, {
     url: string;
   }>;
@@ -30,9 +25,7 @@ interface BaseSlotsProps<P extends BaseLayoutProps = BaseLayoutProps> extends Pi
   themeSwitch: Omit<NonNullable<P['themeSwitch']>, 'enabled'>;
   searchToggle: Omit<NonNullable<P['searchToggle']>, 'enabled'>;
 }
-declare function baseSlots({
-  useProps
-}: {
+declare function baseSlots({ useProps }: {
   useProps: () => BaseSlotsProps;
 }): {
   useProvider(options: BaseLayoutProps): {

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

@@ -4,7 +4,6 @@ import { BaseSlots, BaseSlotsProps, LinkItem, baseSlots } from "./client.js";
 import { ComponentProps, FC, ReactNode } from "react";
 import * as PageTree from "fumadocs-core/page-tree";
 import { I18nConfig } from "fumadocs-core/i18n";
-
 //#region src/layouts/shared/index.d.ts
 interface NavOptions {
   enabled?: boolean;
@@ -82,9 +81,7 @@ interface LayoutTab {
 interface GetLayoutTabsOptions {
   transform?: (option: LayoutTab, node: PageTree.Folder) => LayoutTab | null;
 }
-declare function getLayoutTabs(tree: PageTree.Root, {
-  transform
-}?: GetLayoutTabsOptions): LayoutTab[];
+declare function getLayoutTabs(tree: PageTree.Root, { transform }?: GetLayoutTabsOptions): LayoutTab[];
 declare function isLayoutTabActive(tab: LayoutTab, pathname: string): boolean;
 interface Filterable {
   /**
@@ -161,14 +158,8 @@ type LinkItemType = MainItemType | IconItemType | ButtonItemType | MenuItemType
 /**
  * Get link items with shortcuts
  */
-declare function resolveLinkItems({
-  links,
-  githubUrl
-}: Pick<BaseLayoutProps, 'links' | 'githubUrl'>): LinkItemType[];
-declare function useLinkItems({
-  githubUrl,
-  links
-}: Pick<BaseLayoutProps, 'links' | 'githubUrl'>): {
+declare function resolveLinkItems({ links, githubUrl }: Pick<BaseLayoutProps, 'links' | 'githubUrl'>): LinkItemType[];
+declare function useLinkItems({ githubUrl, links }: Pick<BaseLayoutProps, 'links' | 'githubUrl'>): {
   navItems: LinkItemType[];
   menuItems: LinkItemType[];
   all: LinkItemType[];

package/dist/layouts/shared/page-actions.d.ts

@@ -1,14 +1,10 @@
 import { PopoverTrigger } from "../../components/ui/popover.js";
 import { ComponentProps } from "react";
-
 //#region src/layouts/shared/page-actions.d.ts
 /**
  * see https://fumadocs.dev/docs/integrations/llms#page-actions to customize.
  */
-declare function MarkdownCopyButton({
-  markdownUrl,
-  ...props
-}: ComponentProps<'button'> & {
+declare function MarkdownCopyButton({ markdownUrl, ...props }: ComponentProps<'button'> & {
   /**
    * A URL to fetch the raw Markdown/MDX content of page
    */
@@ -17,11 +13,7 @@ declare function MarkdownCopyButton({
 /**
  * see https://fumadocs.dev/docs/integrations/llms#page-actions to customize.
  */
-declare function ViewOptionsPopover({
-  markdownUrl,
-  githubUrl,
-  ...props
-}: ComponentProps<typeof PopoverTrigger> & {
+declare function ViewOptionsPopover({ markdownUrl, githubUrl, ...props }: ComponentProps<typeof PopoverTrigger> & {
   /**
    * A URL to the raw Markdown/MDX content of page
    */
@@ -31,12 +23,5 @@ declare function ViewOptionsPopover({
    */
   githubUrl?: string;
 }): import("react").JSX.Element;
-declare global {
-  interface ImportMeta {
-    env?: {
-      BASE_URL?: unknown;
-    };
-  }
-}
 //#endregion
 export { MarkdownCopyButton, ViewOptionsPopover };

package/dist/layouts/shared/slots/language-select.d.ts

@@ -1,17 +1,11 @@
 import { buttonVariants } from "../../../components/ui/button.js";
 import { VariantProps } from "class-variance-authority";
 import { ComponentProps } from "react";
-
 //#region src/layouts/shared/slots/language-select.d.ts
 interface LanguageSelectProps extends ComponentProps<'button'> {
   variant?: VariantProps<typeof buttonVariants>['variant'];
 }
-declare function LanguageSelect({
-  className,
-  variant,
-  children,
-  ...rest
-}: LanguageSelectProps): React.ReactElement;
+declare function LanguageSelect({ className, variant, children, ...rest }: LanguageSelectProps): React.ReactElement;
 type LanguageSelectTextProps = ComponentProps<'span'>;
 declare function LanguageSelectText(props: LanguageSelectTextProps): import("react").JSX.Element;
 //#endregion

package/dist/layouts/shared/slots/search-trigger.d.ts

@@ -1,22 +1,13 @@
 import { ButtonProps } from "../../../components/ui/button.js";
 import { ComponentProps } from "react";
-
 //#region src/layouts/shared/slots/search-trigger.d.ts
 interface SearchTriggerProps extends Omit<ComponentProps<'button'>, 'color'>, ButtonProps {
   hideIfDisabled?: boolean;
 }
-declare function SearchTrigger({
-  hideIfDisabled,
-  size,
-  color,
-  ...props
-}: SearchTriggerProps): import("react").JSX.Element | null;
+declare function SearchTrigger({ hideIfDisabled, size, color, ...props }: SearchTriggerProps): import("react").JSX.Element | null;
 interface FullSearchTriggerProps extends ComponentProps<'button'> {
   hideIfDisabled?: boolean;
 }
-declare function FullSearchTrigger({
-  hideIfDisabled,
-  ...props
-}: FullSearchTriggerProps): import("react").JSX.Element | null;
+declare function FullSearchTrigger({ hideIfDisabled, ...props }: FullSearchTriggerProps): import("react").JSX.Element | null;
 //#endregion
 export { FullSearchTrigger, FullSearchTriggerProps, SearchTrigger, SearchTriggerProps };

package/dist/layouts/shared/slots/search-trigger.js

@@ -5,12 +5,14 @@ import { useSearchContext } from "../../../contexts/search.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Search } from "lucide-react";
 import { useTranslations } from "@fuma-translate/react";
+import { Dialog } from "@base-ui/react/dialog";
 //#region src/layouts/shared/slots/search-trigger.tsx
 function SearchTrigger({ hideIfDisabled, size = "icon-sm", color = "ghost", ...props }) {
-	const { setOpenSearch, enabled } = useSearchContext();
+	const { enabled, dialogHandle } = useSearchContext();
 	const t = useTranslations({ note: "search trigger" });
 	if (hideIfDisabled && !enabled) return null;
-	return /* @__PURE__ */ jsx("button", {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		handle: dialogHandle,
 		type: "button",
 		className: cn(buttonVariants({
 			size,
@@ -18,24 +20,19 @@ function SearchTrigger({ hideIfDisabled, size = "icon-sm", color = "ghost", ...p
 		}), props.className),
 		"data-search": "",
 		"aria-label": t("Open Search", { note: "aria-label" }),
-		onClick: () => {
-			setOpenSearch(true);
-		},
 		children: /* @__PURE__ */ jsx(Search, {})
 	});
 }
 function FullSearchTrigger({ hideIfDisabled, ...props }) {
-	const { enabled, hotKey, setOpenSearch } = useSearchContext();
+	const { enabled, hotKey, dialogHandle } = useSearchContext();
 	const t = useTranslations({ note: "search trigger" });
 	if (hideIfDisabled && !enabled) return null;
-	return /* @__PURE__ */ jsxs("button", {
+	return /* @__PURE__ */ jsxs(Dialog.Trigger, {
+		handle: dialogHandle,
 		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: [
 			/* @__PURE__ */ jsx(Search, { className: "size-4" }),
 			t("Search"),