@fumadocs/base-ui 16.6.16 → 16.7.0

package/dist/layouts/shared/index.js

@@ -1,7 +1,48 @@
+import { isActive, normalize } from "../../utils/urls.js";
+import { LinkItem, baseSlots } from "./client.js";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-import Link from "fumadocs-core/link";
+import * as PageTree from "fumadocs-core/page-tree";
 //#region src/layouts/shared/index.tsx
+const defaultTransform = (option, node) => {
+	if (!node.icon) return option;
+	return {
+		...option,
+		icon: /* @__PURE__ */ jsx("div", {
+			className: "size-full [&_svg]:size-full max-md:p-1.5 max-md:rounded-md max-md:border max-md:bg-fd-secondary",
+			children: node.icon
+		})
+	};
+};
+function getLayoutTabs(tree, { transform = defaultTransform } = {}) {
+	const results = [];
+	function next(node, unlisted) {
+		if ("root" in node && node.root) {
+			const url = node.index?.url ?? node.children.find((node) => node.type === "page")?.url;
+			if (url) {
+				const option = {
+					title: node.name,
+					icon: node.icon,
+					description: node.description,
+					url,
+					unlisted,
+					$folder: node
+				};
+				const mapped = transform ? transform(option, node) : option;
+				if (mapped) results.push(mapped);
+			}
+		}
+		for (const child of node.children) if (child.type === "folder") next(child, unlisted);
+	}
+	next(tree);
+	if (tree.fallback) next(tree.fallback, true);
+	return results;
+}
+function isLayoutTabActive(tab, pathname) {
+	if (tab.$folder) return PageTree.findPath(tab.$folder.children, (node) => node.type === "page" && isActive(node.url, pathname)) !== null;
+	if (tab.urls) return tab.urls.has(normalize(pathname));
+	return isActive(tab.url, pathname, true);
+}
 /**
 * Get link items with shortcuts
 */
@@ -22,17 +63,6 @@ function resolveLinkItems({ links = [], githubUrl }) {
 	});
 	return result;
 }
-function renderTitleNav({ title, url = "/" }, props) {
-	if (typeof title === "function") return title({
-		href: url,
-		...props
-	});
-	return /* @__PURE__ */ jsx(Link, {
-		href: url,
-		...props,
-		children: title
-	});
-}
 function useLinkItems({ githubUrl, links }) {
 	return useMemo(() => {
 		const all = resolveLinkItems({
@@ -41,7 +71,7 @@ function useLinkItems({ githubUrl, links }) {
 		});
 		const navItems = [];
 		const menuItems = [];
-		for (const item of all) switch (item.on ?? "all") {
+		for (const item of all) switch (item.on) {
 			case "menu":
 				menuItems.push(item);
 				break;
@@ -59,7 +89,10 @@ function useLinkItems({ githubUrl, links }) {
 		};
 	}, [links, githubUrl]);
 }
+function isLinkItemActive(link, pathname) {
+	if (link.type === "custom" || !link.url) return false;
+	if (link.active === "none") return false;
+	return isActive(link.url, pathname, link.active === "nested-url");
+}
 //#endregion
-export { renderTitleNav, resolveLinkItems, useLinkItems };
-
-//# sourceMappingURL=index.js.map
+export { LinkItem, baseSlots, getLayoutTabs, isLayoutTabActive, isLinkItemActive, resolveLinkItems, useLinkItems };

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

@@ -33,5 +33,4 @@ declare function ViewOptionsPopover({
   githubUrl: string;
 }): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { MarkdownCopyButton, ViewOptionsPopover };
-//# sourceMappingURL=page-actions.d.ts.map
+export { MarkdownCopyButton, ViewOptionsPopover };

package/dist/layouts/shared/page-actions.js

@@ -4,6 +4,7 @@ import { useCopyButton } from "../../utils/use-copy-button.js";
 import { buttonVariants } from "../../components/ui/button.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../../components/ui/popover.js";
 import { useMemo, useState } from "react";
+import { usePathname } from "fumadocs-core/framework";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown, Copy, ExternalLinkIcon, TextIcon } from "lucide-react";
 //#region src/layouts/shared/page-actions.tsx
@@ -41,8 +42,9 @@ function MarkdownCopyButton({ markdownUrl, ...props }) {
 * see https://fumadocs.dev/docs/integrations/llms#page-actions to customise.
 */
 function ViewOptionsPopover({ markdownUrl, githubUrl, ...props }) {
+	const pathname = usePathname();
 	const items = useMemo(() => {
-		const q = `Read ${typeof window !== "undefined" ? window.location.href : "loading"}, I want to ask questions about it.`;
+		const q = `Read ${typeof window === "undefined" ? pathname : new URL(pathname, window.location.origin)}, I want to ask questions about it.`;
 		return [
 			{
 				title: "Open in GitHub",
@@ -157,13 +159,17 @@ function ViewOptionsPopover({ markdownUrl, githubUrl, ...props }) {
 				href: `https://cursor.com/link/prompt?${new URLSearchParams({ text: q })}`
 			}
 		];
-	}, [githubUrl, markdownUrl]);
+	}, [
+		githubUrl,
+		markdownUrl,
+		pathname
+	]);
 	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
 		...props,
-		className: (s) => cn(buttonVariants({
+		className: (state) => cn(buttonVariants({
 			color: "secondary",
 			size: "sm"
-		}), "gap-2", s.open && "bg-fd-accent text-fd-accent-foreground", typeof props.className === "function" ? props.className(s) : props.className),
+		}), "gap-2 data-[state=open]:bg-fd-accent data-[state=open]:text-fd-accent-foreground", typeof props.className === "function" ? props.className(state) : props.className),
 		children: [props.children ?? "Open", /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5 text-fd-muted-foreground" })]
 	}), /* @__PURE__ */ jsx(PopoverContent, {
 		className: "flex flex-col",
@@ -182,5 +188,3 @@ function ViewOptionsPopover({ markdownUrl, githubUrl, ...props }) {
 }
 //#endregion
 export { MarkdownCopyButton, ViewOptionsPopover };
-
-//# sourceMappingURL=page-actions.js.map

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

@@ -0,0 +1,10 @@
+import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/layouts/shared/slots/language-select.d.ts
+type LanguageSelectProps = ComponentProps<'button'>;
+declare function LanguageSelect(props: LanguageSelectProps): React.ReactElement;
+type LanguageSelectTextProps = ComponentProps<'span'>;
+declare function LanguageSelectText(props: LanguageSelectTextProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { LanguageSelect, LanguageSelectProps, LanguageSelectText, LanguageSelectTextProps };

package/dist/layouts/shared/{language-toggle.js → slots/language-select.js}

@@ -1,11 +1,11 @@
 "use client";
-import { useI18n } from "../../contexts/i18n.js";
-import { cn } from "../../utils/cn.js";
-import { buttonVariants } from "../../components/ui/button.js";
-import { Popover, PopoverContent, PopoverTrigger } from "../../components/ui/popover.js";
+import { useI18n } from "../../../contexts/i18n.js";
+import { cn } from "../../../utils/cn.js";
+import { buttonVariants } from "../../../components/ui/button.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../components/ui/popover.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/layouts/shared/language-toggle.tsx
-function LanguageToggle(props) {
+//#region src/layouts/shared/slots/language-select.tsx
+function LanguageSelect(props) {
 	const context = useI18n();
 	if (!context.locales) throw new Error("Missing `<I18nProvider />`");
 	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
@@ -31,15 +31,13 @@ function LanguageToggle(props) {
 		}, item.locale))]
 	})] });
 }
-function LanguageToggleText(props) {
-	const context = useI18n();
-	const text = context.locales?.find((item) => item.locale === context.locale)?.name;
+function LanguageSelectText(props) {
+	const { locales, locale } = useI18n();
+	const text = locales?.find((item) => item.locale === locale)?.name;
 	return /* @__PURE__ */ jsx("span", {
 		...props,
 		children: text
 	});
 }
 //#endregion
-export { LanguageToggle, LanguageToggleText };
-
-//# sourceMappingURL=language-toggle.js.map
+export { LanguageSelect, LanguageSelectText };

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

@@ -0,0 +1,23 @@
+import { ButtonProps } from "../../../components/ui/button.js";
+import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#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): react_jsx_runtime0.JSX.Element | null;
+interface FullSearchTriggeProps extends ComponentProps<'button'> {
+  hideIfDisabled?: boolean;
+}
+declare function FullSearchTrigger({
+  hideIfDisabled,
+  ...props
+}: FullSearchTriggeProps): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { FullSearchTriggeProps, FullSearchTrigger, SearchTrigger, SearchTriggerProps };

package/dist/layouts/shared/{search-toggle.js → slots/search-trigger.js}

@@ -1,12 +1,12 @@
 "use client";
-import { useI18n } from "../../contexts/i18n.js";
-import { cn } from "../../utils/cn.js";
-import { buttonVariants } from "../../components/ui/button.js";
-import { useSearchContext } from "../../contexts/search.js";
+import { useI18n } from "../../../contexts/i18n.js";
+import { cn } from "../../../utils/cn.js";
+import { buttonVariants } from "../../../components/ui/button.js";
+import { useSearchContext } from "../../../contexts/search.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Search } from "lucide-react";
-//#region src/layouts/shared/search-toggle.tsx
-function SearchToggle({ hideIfDisabled, size = "icon-sm", color = "ghost", ...props }) {
+//#region src/layouts/shared/slots/search-trigger.tsx
+function SearchTrigger({ hideIfDisabled, size = "icon-sm", color = "ghost", ...props }) {
 	const { setOpenSearch, enabled } = useSearchContext();
 	if (hideIfDisabled && !enabled) return null;
 	return /* @__PURE__ */ jsx("button", {
@@ -23,7 +23,7 @@ function SearchToggle({ hideIfDisabled, size = "icon-sm", color = "ghost", ...pr
 		children: /* @__PURE__ */ jsx(Search, {})
 	});
 }
-function LargeSearchToggle({ hideIfDisabled, ...props }) {
+function FullSearchTrigger({ hideIfDisabled, ...props }) {
 	const { enabled, hotKey, setOpenSearch } = useSearchContext();
 	const { text } = useI18n();
 	if (hideIfDisabled && !enabled) return null;
@@ -31,7 +31,7 @@ function LargeSearchToggle({ hideIfDisabled, ...props }) {
 		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 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring", props.className),
+		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);
 		},
@@ -49,6 +49,4 @@ function LargeSearchToggle({ hideIfDisabled, ...props }) {
 	});
 }
 //#endregion
-export { LargeSearchToggle, SearchToggle };
-
-//# sourceMappingURL=search-toggle.js.map
+export { FullSearchTrigger, SearchTrigger };

package/dist/layouts/shared/slots/theme-switch.d.ts

@@ -0,0 +1,14 @@
+import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/layouts/shared/slots/theme-switch.d.ts
+interface ThemeSwitchProps extends ComponentProps<'div'> {
+  mode?: 'light-dark' | 'light-dark-system';
+}
+declare function ThemeSwitch({
+  className,
+  mode,
+  ...props
+}: ThemeSwitchProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ThemeSwitch, ThemeSwitchProps };

package/dist/layouts/shared/{theme-toggle.js → slots/theme-switch.js}

@@ -1,11 +1,11 @@
 "use client";
-import { cn } from "../../utils/cn.js";
+import { cn } from "../../../utils/cn.js";
 import { useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Airplay, Moon, Sun } from "lucide-react";
 import { cva } from "class-variance-authority";
 import { useTheme } from "next-themes";
-//#region src/layouts/shared/theme-toggle.tsx
+//#region src/layouts/shared/slots/theme-switch.tsx
 const itemVariants = cva("size-6.5 p-1.5 text-fd-muted-foreground", { variants: { active: {
 	true: "bg-fd-accent text-fd-accent-foreground",
 	false: "text-fd-muted-foreground"
@@ -15,7 +15,7 @@ const full = [
 	["dark", Moon],
 	["system", Airplay]
 ];
-function ThemeToggle({ className, mode = "light-dark", ...props }) {
+function ThemeSwitch({ className, mode = "light-dark", ...props }) {
 	const { setTheme, theme, resolvedTheme } = useTheme();
 	const [mounted, setMounted] = useState(false);
 	useEffect(() => {
@@ -55,6 +55,4 @@ function ThemeToggle({ className, mode = "light-dark", ...props }) {
 	});
 }
 //#endregion
-export { ThemeToggle };
-
-//# sourceMappingURL=theme-toggle.js.map
+export { ThemeSwitch };

package/dist/mdx.d.ts

@@ -45,5 +45,4 @@ declare const defaultMdxComponents: {
 };
 declare const createRelativeLink: typeof createRelativeLink$1;
 //#endregion
-export { createRelativeLink, defaultMdxComponents as default };
-//# sourceMappingURL=mdx.d.ts.map
+export { createRelativeLink, defaultMdxComponents as default };

package/dist/mdx.js

@@ -68,5 +68,3 @@ const createRelativeLink = () => {
 };
 //#endregion
 export { createRelativeLink, defaultMdxComponents as default };
-
-//# sourceMappingURL=mdx.js.map

package/dist/mdx.server.d.ts

@@ -12,5 +12,4 @@ import { LoaderConfig, LoaderOutput, Page } from "fumadocs-core/source";
  */
 declare function createRelativeLink<C extends LoaderConfig>(source: LoaderOutput<C>, page: Page, OverrideLink?: FC<ComponentProps<'a'>>): FC<ComponentProps<'a'>>;
 //#endregion
-export { createRelativeLink, defaultMdxComponents as default };
-//# sourceMappingURL=mdx.server.d.ts.map
+export { createRelativeLink, defaultMdxComponents as default };

package/dist/mdx.server.js

@@ -18,5 +18,3 @@ function createRelativeLink(source, page, OverrideLink = defaultMdxComponents.a)
 }
 //#endregion
 export { createRelativeLink, defaultMdxComponents as default };
-
-//# sourceMappingURL=mdx.server.js.map

package/dist/og/takumi.d.ts

@@ -18,5 +18,4 @@ declare function generate({
   ...props
 }: GenerateProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { generate, generateOGImage };
-//# sourceMappingURL=takumi.d.ts.map
+export { generate, generateOGImage };

package/dist/og/takumi.js

@@ -68,5 +68,3 @@ function generate({ primaryColor = "rgba(255,150,255,0.3)", primaryTextColor = "
 }
 //#endregion
 export { generate, generateOGImage };
-
-//# sourceMappingURL=takumi.js.map

package/dist/og.d.ts

@@ -19,5 +19,4 @@ declare function generate({
   ...props
 }: GenerateProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { generate, generateOGImage };
-//# sourceMappingURL=og.d.ts.map
+export { generate, generateOGImage };

package/dist/og.js

@@ -68,5 +68,3 @@ function generate({ primaryColor = "rgba(255,150,255,0.3)", primaryTextColor = "
 }
 //#endregion
 export { generate, generateOGImage };
-
-//# sourceMappingURL=og.js.map

package/dist/page.d.ts

@@ -1,5 +1,6 @@
-import { PageBreadcrumb, PageLastUpdate } from "./layouts/docs/page/client.js";
-import { DocsBody, DocsDescription, DocsPageProps as DocsPageProps$1, DocsTitle, EditOnGitHub } from "./layouts/docs/page/index.js";
+import { Breadcrumb } from "./layouts/docs/page/slots/breadcrumb.js";
+import { DocsPageProps as DocsPageProps$1, PageLastUpdate } from "./layouts/docs/page/client.js";
+import { DocsBody, DocsDescription, DocsTitle, EditOnGitHub } from "./layouts/docs/page/index.js";
 import { ComponentProps } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -33,5 +34,4 @@ declare function DocsPage({
   ...props
 }: DocsPageProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { DocsBody, DocsDescription, DocsPage, DocsPageProps, DocsTitle, EditOnGitHub, PageBreadcrumb, PageLastUpdate, withArticle };
-//# sourceMappingURL=page.d.ts.map
+export { DocsBody, DocsDescription, DocsPage, DocsPageProps, DocsTitle, EditOnGitHub, Breadcrumb as PageBreadcrumb, PageLastUpdate, withArticle };

package/dist/page.js

@@ -1,10 +1,10 @@
 "use client";
 import { cn } from "./utils/cn.js";
-import { LayoutContext } from "./layouts/docs/client.js";
-import { PageBreadcrumb, PageLastUpdate } from "./layouts/docs/page/client.js";
+import { useIsDocsLayout } from "./layouts/docs/client.js";
+import { Breadcrumb } from "./layouts/docs/page/slots/breadcrumb.js";
+import { PageLastUpdate } from "./layouts/docs/page/client.js";
 import { DocsBody, DocsDescription, DocsTitle, EditOnGitHub, page_exports } from "./layouts/docs/page/index.js";
 import { page_exports as page_exports$1 } from "./layouts/notebook/page/index.js";
-import { use } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/page.tsx
 /**
@@ -21,7 +21,7 @@ function withArticle(props) {
 	});
 }
 function DocsPage({ lastUpdate, editOnGithub, children, ...props }) {
-	const { DocsPage, EditOnGitHub, PageLastUpdate } = use(LayoutContext) ? page_exports : page_exports$1;
+	const { DocsPage, EditOnGitHub, PageLastUpdate } = useIsDocsLayout() ? page_exports : page_exports$1;
 	return /* @__PURE__ */ jsxs(DocsPage, {
 		...props,
 		children: [children, /* @__PURE__ */ jsxs("div", {
@@ -31,6 +31,4 @@ function DocsPage({ lastUpdate, editOnGithub, children, ...props }) {
 	});
 }
 //#endregion
-export { DocsBody, DocsDescription, DocsPage, DocsTitle, EditOnGitHub, PageBreadcrumb, PageLastUpdate, withArticle };
-
-//# sourceMappingURL=page.js.map
+export { DocsBody, DocsDescription, DocsPage, DocsTitle, EditOnGitHub, Breadcrumb as PageBreadcrumb, PageLastUpdate, withArticle };

package/dist/provider/base.d.ts

@@ -46,5 +46,4 @@ declare function RootProvider({
   i18n
 }: RootProviderProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { RootProvider, RootProviderProps };
-//# sourceMappingURL=base.d.ts.map
+export { RootProvider, RootProviderProps };

package/dist/provider/base.js

@@ -3,8 +3,8 @@ import { I18nProvider } from "../contexts/i18n.js";
 import { SearchProvider } from "../contexts/search.js";
 import { lazy } from "react";
 import { jsx } from "react/jsx-runtime";
-import { DirectionProvider } from "@base-ui/react/direction-provider";
 import { ThemeProvider } from "next-themes";
+import { DirectionProvider } from "@base-ui/react/direction-provider";
 //#region src/provider/base.tsx
 const DefaultSearchDialog = lazy(() => import("../components/dialog/search-default.js"));
 function RootProvider({ children, dir = "ltr", theme = {}, search, i18n }) {
@@ -33,5 +33,3 @@ function RootProvider({ children, dir = "ltr", theme = {}, search, i18n }) {
 }
 //#endregion
 export { RootProvider };
-
-//# sourceMappingURL=base.js.map

package/dist/provider/next.d.ts

@@ -18,5 +18,4 @@ declare function RootProvider({
   ...props
 }: RootProviderProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { RootProvider, RootProviderProps };
-//# sourceMappingURL=next.d.ts.map
+export { RootProvider, RootProviderProps };

package/dist/provider/next.js

@@ -15,5 +15,3 @@ function RootProvider({ components, ...props }) {
 }
 //#endregion
 export { RootProvider };
-
-//# sourceMappingURL=next.js.map

package/dist/provider/react-router.d.ts

@@ -18,5 +18,4 @@ declare function RootProvider({
   ...props
 }: RootProviderProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { RootProvider, RootProviderProps };
-//# sourceMappingURL=react-router.d.ts.map
+export { RootProvider, RootProviderProps };

package/dist/provider/react-router.js

@@ -15,5 +15,3 @@ function RootProvider({ components, ...props }) {
 }
 //#endregion
 export { RootProvider };
-
-//# sourceMappingURL=react-router.js.map

package/dist/provider/tanstack.d.ts

@@ -18,5 +18,4 @@ declare function RootProvider({
   ...props
 }: RootProviderProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { RootProvider, RootProviderProps };
-//# sourceMappingURL=tanstack.d.ts.map
+export { RootProvider, RootProviderProps };

package/dist/provider/tanstack.js

@@ -15,5 +15,3 @@ function RootProvider({ components, ...props }) {
 }
 //#endregion
 export { RootProvider };
-
-//# sourceMappingURL=tanstack.js.map

package/dist/provider/waku.d.ts

@@ -18,5 +18,4 @@ declare function RootProvider({
   ...props
 }: RootProviderProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { RootProvider, RootProviderProps };
-//# sourceMappingURL=waku.d.ts.map
+export { RootProvider, RootProviderProps };

package/dist/provider/waku.js

@@ -15,5 +15,3 @@ function RootProvider({ components, ...props }) {
 }
 //#endregion
 export { RootProvider };
-
-//# sourceMappingURL=waku.js.map