@vx-oss/docs-react 1.0.3

package/dist/components/banner.d.ts

@@ -0,0 +1,25 @@
+import { HTMLAttributes } from "react";
+//#region src/components/banner.d.ts
+type BannerVariant = 'rainbow' | 'normal';
+declare function Banner({ id, variant, changeLayout, height, rainbowColors, ...props }: HTMLAttributes<HTMLDivElement> & {
+  /**
+   * @defaultValue 3rem
+   */
+  height?: string;
+  /**
+   * @defaultValue 'normal'
+   */
+  variant?: BannerVariant;
+  /**
+   * For rainbow variant only, customize the colors
+   */
+  rainbowColors?: string[];
+  /**
+   * Change Fumadocs layout styles
+   *
+   * @defaultValue true
+   */
+  changeLayout?: boolean;
+}): import("react").JSX.Element | null;
+//#endregion
+export { Banner };

package/dist/components/banner.js

@@ -0,0 +1,85 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { buttonVariants } from "./ui/button.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useTranslations } from "@fuma-translate/react";
+//#region src/components/banner.tsx
+function Banner({ id, variant = "normal", changeLayout = true, height = "3rem", rainbowColors = [
+	"rgba(0,149,255,0.56)",
+	"rgba(231,77,255,0.77)",
+	"rgba(255,0,0,0.73)",
+	"rgba(131,255,166,0.66)"
+], ...props }) {
+	const t = useTranslations({ note: "banner" });
+	const [open, setOpen] = useState(true);
+	const globalKey = id ? `nd-banner-${encodeBase32(id)}` : null;
+	useEffect(() => {
+		if (globalKey && localStorage.getItem(globalKey) === "true") setOpen(false);
+	}, [globalKey]);
+	function onClose() {
+		setOpen(false);
+		if (globalKey) localStorage.setItem(globalKey, "true");
+	}
+	if (!open) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		...props,
+		className: cn("sticky top-0 z-40 flex flex-row items-center justify-center px-4 text-center text-sm font-medium", variant === "normal" && "bg-fd-secondary", variant === "rainbow" && "bg-fd-background", !open && "hidden", props.className),
+		style: { height },
+		children: [
+			changeLayout && open ? /* @__PURE__ */ jsx("style", { children: globalKey ? `:root:not(.${globalKey}) { --fd-banner-height: ${height}; }` : `:root { --fd-banner-height: ${height}; }` }) : null,
+			globalKey ? /* @__PURE__ */ jsx("style", { children: `.${globalKey} #${id} { display: none; }` }) : null,
+			globalKey ? /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: `if (localStorage.getItem('${globalKey}') === 'true') document.documentElement.classList.add('${globalKey}');` } }) : null,
+			variant === "rainbow" ? flow({ colors: rainbowColors }) : null,
+			props.children,
+			id ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": t("Close Banner", { note: "aria-label" }),
+				onClick: onClose,
+				className: cn(buttonVariants({
+					color: "ghost",
+					className: "absolute inset-e-2 top-1/2 -translate-y-1/2 text-fd-muted-foreground/50",
+					size: "icon-sm"
+				})),
+				children: /* @__PURE__ */ jsx(X, {})
+			}) : null
+		]
+	});
+}
+const maskImage = "linear-gradient(to bottom,white,transparent), radial-gradient(circle at top center, white, transparent)";
+function flow({ colors }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		className: "absolute inset-0 -z-1",
+		style: {
+			maskImage,
+			maskComposite: "intersect",
+			animation: "fd-moving-banner 20s linear infinite",
+			backgroundImage: `repeating-linear-gradient(70deg, ${[...colors, colors[0]].map((color, i) => `${color} ${i * 50 / colors.length}%`).join(", ")})`,
+			backgroundSize: "200% 100%",
+			filter: "saturate(2)"
+		}
+	}), /* @__PURE__ */ jsx("style", { children: `@keyframes fd-moving-banner {
+            from { background-position: 0% 0;  }
+            to { background-position: 100% 0;  }
+         }` })] });
+}
+function encodeBase32(str) {
+	const alphabet = "abcdefghijklmnopqrstuvwxyz234567";
+	let encoded = "";
+	let buffer = 0;
+	let bitsLeft = 0;
+	for (let i = 0; i < str.length; i++) {
+		buffer = buffer << 8 | str.charCodeAt(i);
+		bitsLeft += 8;
+		while (bitsLeft >= 5) {
+			bitsLeft -= 5;
+			encoded += alphabet[buffer >> bitsLeft & 31];
+		}
+	}
+	if (bitsLeft > 0) encoded += alphabet[buffer << 5 - bitsLeft & 31];
+	return encoded;
+}
+//#endregion
+export { Banner };

package/dist/components/callout.d.ts

@@ -0,0 +1,21 @@
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/callout.d.ts
+type CalloutType = 'info' | 'warn' | 'error' | 'success' | 'warning' | 'idea';
+declare function Callout({ children, title, ...props }: {
+  title?: ReactNode;
+} & Omit<CalloutContainerProps, 'title'>): import("react").JSX.Element;
+interface CalloutContainerProps extends ComponentProps<'div'> {
+  /**
+   * @defaultValue info
+   */
+  type?: CalloutType;
+  /**
+   * Force an icon
+   */
+  icon?: ReactNode;
+}
+declare function CalloutContainer({ type: inputType, icon, children, className, style, ...props }: CalloutContainerProps): import("react").JSX.Element;
+declare function CalloutTitle({ children, className, ...props }: ComponentProps<'p'>): import("react").JSX.Element;
+declare function CalloutDescription({ children, className, ...props }: ComponentProps<'p'>): import("react").JSX.Element;
+//#endregion
+export { Callout, CalloutContainer, CalloutContainerProps, CalloutDescription, CalloutTitle, CalloutType };

package/dist/components/callout.js

@@ -0,0 +1,60 @@
+import { cn } from "../utils/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CircleCheck, CircleX, Info, Lightbulb, TriangleAlert } from "lucide-react";
+//#region src/components/callout.tsx
+const iconClass = "size-5 -me-0.5 fill-(--callout-color) text-fd-card";
+function Callout({ children, title, ...props }) {
+	return /* @__PURE__ */ jsxs(CalloutContainer, {
+		...props,
+		children: [title && /* @__PURE__ */ jsx(CalloutTitle, { children: title }), /* @__PURE__ */ jsx(CalloutDescription, { children })]
+	});
+}
+function resolveAlias(type) {
+	if (type === "warn") return "warning";
+	if (type === "tip") return "info";
+	return type;
+}
+function CalloutContainer({ type: inputType = "info", icon, children, className, style, ...props }) {
+	const type = resolveAlias(inputType);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex gap-2 my-4 rounded-xl border bg-fd-card p-3 ps-1 text-sm text-fd-card-foreground shadow-md", className),
+		style: {
+			"--callout-color": `var(--color-fd-${type}, var(--color-fd-muted))`,
+			...style
+		},
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				role: "none",
+				className: "w-0.5 bg-(--callout-color)/50 rounded-sm"
+			}),
+			icon ?? {
+				info: /* @__PURE__ */ jsx(Info, { className: iconClass }),
+				warning: /* @__PURE__ */ jsx(TriangleAlert, { className: iconClass }),
+				error: /* @__PURE__ */ jsx(CircleX, { className: iconClass }),
+				success: /* @__PURE__ */ jsx(CircleCheck, { className: iconClass }),
+				idea: /* @__PURE__ */ jsx(Lightbulb, { className: "size-5 -me-0.5 fill-(--callout-color) text-(--callout-color)" })
+			}[type],
+			/* @__PURE__ */ jsx("div", {
+				className: "flex flex-col gap-2 min-w-0 flex-1",
+				children
+			})
+		]
+	});
+}
+function CalloutTitle({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		className: cn("font-medium my-0!", className),
+		...props,
+		children
+	});
+}
+function CalloutDescription({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("text-fd-muted-foreground prose-no-margin empty:hidden", className),
+		...props,
+		children
+	});
+}
+//#endregion
+export { Callout, CalloutContainer, CalloutDescription, CalloutTitle };

package/dist/components/card.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/card.d.ts
+declare function Cards(props: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+type CardProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
+  icon?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  href?: string;
+  external?: boolean;
+};
+declare function Card({ icon, title, description, ...props }: CardProps): import("react").JSX.Element;
+//#endregion
+export { Card, CardProps, Cards };

package/dist/components/card.js

@@ -0,0 +1,39 @@
+import { cn } from "../utils/cn.js";
+import Link from "@vx-oss/docs-core/link";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/card.tsx
+function Cards(props) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("grid grid-cols-2 gap-3 @container", props.className),
+		children: props.children
+	});
+}
+function Card({ icon, title, description, ...props }) {
+	const E = props.href ? Link : "div";
+	return /* @__PURE__ */ jsxs(E, {
+		...props,
+		"data-card": true,
+		className: cn("block rounded-xl border bg-fd-card p-4 text-fd-card-foreground transition-colors @max-lg:col-span-full", props.href && "hover:bg-fd-accent/80", props.className),
+		children: [
+			icon ? /* @__PURE__ */ jsx("div", {
+				className: "not-prose mb-2 w-fit shadow-md rounded-lg border bg-fd-muted p-1.5 text-fd-muted-foreground [&_svg]:size-4",
+				children: icon
+			}) : null,
+			/* @__PURE__ */ jsx("h3", {
+				className: "not-prose mb-1 text-sm font-medium",
+				children: title
+			}),
+			description ? /* @__PURE__ */ jsx("p", {
+				className: "my-0! text-sm text-fd-muted-foreground",
+				children: description
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				className: "text-sm text-fd-muted-foreground prose-no-margin empty:hidden",
+				children: props.children
+			})
+		]
+	});
+}
+//#endregion
+export { Card, Cards };

package/dist/components/codeblock.d.ts

@@ -0,0 +1,45 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs.js";
+import { ComponentProps, HTMLAttributes, ReactNode } from "react";
+//#region src/components/codeblock.d.ts
+interface CodeBlockProps extends Omit<ComponentProps<'figure'>, 'title'> {
+  title?: ReactNode;
+  /**
+   * Icon of code block
+   *
+   * When passed as a string, it assumes the value is the HTML of icon
+   */
+  icon?: ReactNode;
+  /**
+   * Allow to copy code with copy button
+   *
+   * @defaultValue true
+   */
+  allowCopy?: boolean | 'true' | 'false';
+  /**
+   * Keep original background color generated by Shiki or Rehype Code
+   *
+   * @defaultValue false
+   */
+  keepBackground?: boolean;
+  viewportProps?: HTMLAttributes<HTMLElement>;
+  /**
+   * show line numbers
+   */
+  'data-line-numbers'?: boolean;
+  /**
+   * @defaultValue 1
+   */
+  'data-line-numbers-start'?: number;
+  Actions?: (props: {
+    className?: string;
+    children?: ReactNode;
+  }) => ReactNode;
+}
+declare function Pre(props: ComponentProps<'pre'>): import("react").JSX.Element;
+declare function CodeBlock({ ref, title, allowCopy, keepBackground, icon, viewportProps, children, Actions, ...props }: CodeBlockProps): import("react").JSX.Element;
+declare function CodeBlockTabs({ ref, ...props }: ComponentProps<typeof Tabs>): import("react").JSX.Element;
+declare function CodeBlockTabsList(props: ComponentProps<typeof TabsList>): import("react").JSX.Element;
+declare function CodeBlockTabsTrigger({ children, ...props }: ComponentProps<typeof TabsTrigger>): import("react").JSX.Element;
+declare function CodeBlockTab(props: ComponentProps<typeof TabsContent>): import("react").JSX.Element;
+//#endregion
+export { CodeBlock, CodeBlockProps, CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger, Pre };

package/dist/components/codeblock.js

@@ -0,0 +1,126 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { buttonVariants } from "./ui/button.js";
+import { useCopyButton } from "../utils/use-copy-button.js";
+import { mergeRefs } from "../utils/merge-refs.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Clipboard } from "lucide-react";
+import { createContext, use, useMemo, useRef } from "react";
+import { useTranslations } from "@fuma-translate/react";
+//#region src/components/codeblock.tsx
+const TabsContext = createContext(null);
+function Pre(props) {
+	return /* @__PURE__ */ jsx("pre", {
+		...props,
+		className: cn("min-w-full w-max *:flex *:flex-col", props.className),
+		children: props.children
+	});
+}
+function CodeBlock({ ref, title, allowCopy = true, keepBackground = false, icon, viewportProps = {}, children, Actions = (props) => /* @__PURE__ */ jsx("div", {
+	...props,
+	className: cn("empty:hidden", props.className)
+}), ...props }) {
+	const inTab = use(TabsContext) !== null;
+	const areaRef = useRef(null);
+	if (allowCopy === "true") allowCopy = true;
+	else if (allowCopy === "false") allowCopy = false;
+	return /* @__PURE__ */ jsxs("figure", {
+		ref,
+		dir: "ltr",
+		...props,
+		tabIndex: -1,
+		className: cn(inTab ? "bg-fd-secondary -mx-px -mb-px last:rounded-b-xl" : "my-4 bg-fd-card rounded-xl", keepBackground && "bg-(--shiki-light-bg) dark:bg-(--shiki-dark-bg)", "shiki relative border shadow-sm not-prose overflow-hidden text-sm", props.className),
+		children: [title ? /* @__PURE__ */ jsxs("div", {
+			className: "flex text-fd-muted-foreground items-center gap-2 h-9.5 border-b px-4",
+			children: [
+				typeof icon === "string" ? /* @__PURE__ */ jsx("div", {
+					className: "[&_svg]:size-3.5",
+					dangerouslySetInnerHTML: { __html: icon }
+				}) : icon,
+				/* @__PURE__ */ jsx("figcaption", {
+					className: "flex-1 truncate",
+					children: title
+				}),
+				Actions({
+					className: "-me-2",
+					children: allowCopy && /* @__PURE__ */ jsx(CopyButton, { containerRef: areaRef })
+				})
+			]
+		}) : Actions({
+			className: "absolute top-3 right-2 z-2 backdrop-blur-lg rounded-lg text-fd-muted-foreground",
+			children: allowCopy && /* @__PURE__ */ jsx(CopyButton, { containerRef: areaRef })
+		}), /* @__PURE__ */ jsx("div", {
+			ref: areaRef,
+			...viewportProps,
+			role: "region",
+			tabIndex: 0,
+			className: cn("text-[0.8125rem] py-3.5 overflow-auto max-h-[600px] fd-scroll-container focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-fd-ring", viewportProps.className),
+			style: {
+				"--padding-right": !title ? "calc(var(--spacing) * 8)" : void 0,
+				counterSet: props["data-line-numbers"] ? `line ${Number(props["data-line-numbers-start"] ?? 1) - 1}` : void 0,
+				...viewportProps.style
+			},
+			children
+		})]
+	});
+}
+function CopyButton({ className, containerRef, ...props }) {
+	const t = useTranslations({ note: "code block" });
+	const [checked, onClick] = useCopyButton(() => {
+		const pre = containerRef.current?.getElementsByTagName("pre").item(0);
+		if (!pre) return;
+		const clone = pre.cloneNode(true);
+		clone.querySelectorAll(".nd-copy-ignore").forEach((node) => {
+			node.replaceWith("\n");
+		});
+		navigator.clipboard.writeText(clone.textContent ?? "");
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-checked": checked || void 0,
+		className: cn(buttonVariants({
+			className: "hover:text-fd-accent-foreground data-checked:text-fd-accent-foreground",
+			size: "icon-xs"
+		}), className),
+		"aria-label": checked ? t("Copied Text", { note: "aria-label" }) : t("Copy Text", { note: "aria-label" }),
+		onClick,
+		...props,
+		children: checked ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Clipboard, {})
+	});
+}
+function CodeBlockTabs({ ref, ...props }) {
+	const containerRef = useRef(null);
+	const nested = use(TabsContext) !== null;
+	return /* @__PURE__ */ jsx(Tabs, {
+		ref: mergeRefs(containerRef, ref),
+		...props,
+		className: cn("bg-fd-card rounded-xl border", !nested && "my-4", props.className),
+		children: /* @__PURE__ */ jsx(TabsContext, {
+			value: useMemo(() => ({
+				containerRef,
+				nested
+			}), [nested]),
+			children: props.children
+		})
+	});
+}
+function CodeBlockTabsList(props) {
+	return /* @__PURE__ */ jsx(TabsList, {
+		...props,
+		className: cn("flex flex-row px-2 overflow-x-auto text-fd-muted-foreground", props.className),
+		children: props.children
+	});
+}
+function CodeBlockTabsTrigger({ children, ...props }) {
+	return /* @__PURE__ */ jsxs(TabsTrigger, {
+		...props,
+		className: cn("relative group inline-flex text-sm font-medium text-nowrap items-center transition-colors gap-2 px-2 py-1.5 hover:text-fd-accent-foreground data-[state=active]:text-fd-primary [&_svg]:size-3.5", props.className),
+		children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-x-2 bottom-0 h-px group-data-[state=active]:bg-fd-primary" }), children]
+	});
+}
+function CodeBlockTab(props) {
+	return /* @__PURE__ */ jsx(TabsContent, { ...props });
+}
+//#endregion
+export { CodeBlock, CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger, Pre };

package/dist/components/codeblock.rsc.d.ts

@@ -0,0 +1,15 @@
+import { CodeBlockProps } from "./codeblock.js";
+import { HighlightOptions } from "@vx-oss/docs-core/highlight";
+//#region src/components/codeblock.rsc.d.ts
+type ServerCodeBlockProps = HighlightOptions & {
+  code: string;
+  /**
+   * Extra props for the underlying `<CodeBlock />` component.
+   *
+   * Ignored if you defined your own `pre` component in `components`.
+   */
+  codeblock?: CodeBlockProps;
+};
+declare function ServerCodeBlock({ code, codeblock, ...options }: ServerCodeBlockProps): Promise<import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | (string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined)>;
+//#endregion
+export { ServerCodeBlock, ServerCodeBlockProps };

package/dist/components/codeblock.rsc.js

@@ -0,0 +1,22 @@
+import { cn } from "../utils/cn.js";
+import { CodeBlock, Pre } from "./codeblock.js";
+import { jsx } from "react/jsx-runtime";
+import { highlight } from "@vx-oss/docs-core/highlight";
+//#region src/components/codeblock.rsc.tsx
+async function ServerCodeBlock({ code, codeblock, ...options }) {
+	return await highlight(code, {
+		defaultColor: false,
+		...options,
+		components: {
+			pre: (props) => /* @__PURE__ */ jsx(CodeBlock, {
+				...props,
+				...codeblock,
+				className: cn("my-0", props.className, codeblock?.className),
+				children: /* @__PURE__ */ jsx(Pre, { children: props.children })
+			}),
+			...options.components
+		}
+	});
+}
+//#endregion
+export { ServerCodeBlock };

package/dist/components/dialog/search-algolia.d.ts

@@ -0,0 +1,27 @@
+import { SearchLink, SharedProps, TagItem } from "../../contexts/search.js";
+import "./search.js";
+import { ReactNode } from "react";
+import { AlgoliaOptions } from "@vx-oss/docs-core/search/client";
+//#region src/components/dialog/search-algolia.d.ts
+interface AlgoliaSearchDialogProps extends SharedProps {
+  searchOptions: AlgoliaOptions;
+  links?: SearchLink[];
+  footer?: ReactNode;
+  defaultTag?: string;
+  tags?: TagItem[];
+  /**
+   * Add the "Powered by Algolia" label, this is useful for free tier users
+   *
+   * @defaultValue false
+   */
+  showAlgolia?: boolean;
+  /**
+   * Allow to clear tag filters
+   *
+   * @defaultValue false
+   */
+  allowClear?: boolean;
+}
+declare function AlgoliaSearchDialog({ searchOptions, tags, defaultTag, showAlgolia, allowClear, links, footer, ...props }: AlgoliaSearchDialogProps): import("react").JSX.Element;
+//#endregion
+export { AlgoliaSearchDialogProps, AlgoliaSearchDialog as default };

package/dist/components/dialog/search-algolia.js

@@ -0,0 +1,64 @@
+"use client";
+import { useI18n } from "../../contexts/i18n.js";
+import { SearchDialog, SearchDialogClose, SearchDialogContent, SearchDialogFooter, SearchDialogHeader, SearchDialogIcon, SearchDialogInput, SearchDialogList, SearchDialogOverlay, TagsList, TagsListItem } from "./search.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { useOnChange } from "@vx-oss/docs-core/utils/use-on-change";
+import { useDocsSearch } from "@vx-oss/docs-core/search/client";
+import { algoliaClient } from "@vx-oss/docs-core/search/client/algolia";
+//#region src/components/dialog/search-algolia.tsx
+function AlgoliaSearchDialog({ searchOptions, tags = [], defaultTag, showAlgolia = false, allowClear = false, links = [], footer, ...props }) {
+	const [tag, setTag] = useState(defaultTag);
+	const { locale } = useI18n();
+	const { search, setSearch, query } = useDocsSearch({ client: algoliaClient({
+		tag,
+		locale,
+		...searchOptions
+	}) });
+	const defaultItems = useMemo(() => {
+		if (links.length === 0) return null;
+		return links.map(([name, link]) => ({
+			type: "page",
+			id: name,
+			content: name,
+			url: link
+		}));
+	}, [links]);
+	useOnChange(defaultTag, (v) => {
+		setTag(v);
+	});
+	const label = showAlgolia && /* @__PURE__ */ jsx(AlgoliaTitle, {});
+	return /* @__PURE__ */ jsxs(SearchDialog, {
+		search,
+		onSearchChange: setSearch,
+		isLoading: query.isLoading,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(SearchDialogOverlay, {}),
+			/* @__PURE__ */ jsxs(SearchDialogContent, { children: [/* @__PURE__ */ jsxs(SearchDialogHeader, { children: [
+				/* @__PURE__ */ jsx(SearchDialogIcon, {}),
+				/* @__PURE__ */ jsx(SearchDialogInput, {}),
+				/* @__PURE__ */ jsx(SearchDialogClose, {})
+			] }), /* @__PURE__ */ jsx(SearchDialogList, { items: query.data !== "empty" ? query.data : defaultItems })] }),
+			/* @__PURE__ */ jsxs(SearchDialogFooter, { children: [tags.length > 0 ? /* @__PURE__ */ jsxs(TagsList, {
+				tag,
+				onTagChange: setTag,
+				allowClear,
+				children: [tags.map((tag) => /* @__PURE__ */ jsx(TagsListItem, {
+					value: tag.value,
+					children: tag.name
+				}, tag.value)), label]
+			}) : label, footer] })
+		]
+	});
+}
+function AlgoliaTitle() {
+	return /* @__PURE__ */ jsx("a", {
+		href: "https://algolia.com",
+		rel: "noreferrer noopener",
+		className: "ms-auto text-xs text-fd-muted-foreground",
+		children: "Search powered by Algolia"
+	});
+}
+//#endregion
+export { AlgoliaSearchDialog as default };

package/dist/components/dialog/search-default.d.ts

@@ -0,0 +1,29 @@
+import { SearchLink, SharedProps, TagItem } from "../../contexts/search.js";
+import "./search.js";
+import { ReactNode } from "react";
+//#region src/components/dialog/search-default.d.ts
+interface DefaultSearchDialogProps extends SharedProps {
+  /** @deprecated re-create the dialog instead for other clients, see https://fumadocs.dev/docs/search/orama */
+  type?: 'static';
+  links?: SearchLink[];
+  defaultTag?: string;
+  tags?: TagItem[];
+  /**
+   * Search API URL
+   */
+  api?: string;
+  /**
+   * The debounced delay for performing a search.
+   */
+  delayMs?: number;
+  footer?: ReactNode;
+  /**
+   * Allow to clear tag filters
+   *
+   * @defaultValue false
+   */
+  allowClear?: boolean;
+}
+declare function DefaultSearchDialog({ type, defaultTag, tags, api, delayMs, allowClear, links, footer, ...props }: DefaultSearchDialogProps): import("react").JSX.Element;
+//#endregion
+export { DefaultSearchDialogProps, DefaultSearchDialog as default };

package/dist/components/dialog/search-default.js

@@ -0,0 +1,66 @@
+"use client";
+import { useI18n } from "../../contexts/i18n.js";
+import { SearchDialog, SearchDialogClose, SearchDialogContent, SearchDialogFooter, SearchDialogHeader, SearchDialogIcon, SearchDialogInput, SearchDialogList, SearchDialogOverlay, TagsList, TagsListItem } from "./search.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { use, useMemo, useState } from "react";
+import { useOnChange } from "@vx-oss/docs-core/utils/use-on-change";
+import { useDocsSearch } from "@vx-oss/docs-core/search/client";
+import { fetchClient } from "@vx-oss/docs-core/search/client/fetch";
+//#region src/components/dialog/search-default.tsx
+let STATIC;
+function DefaultSearchDialog({ type, defaultTag, tags = [], api, delayMs, allowClear = false, links = [], footer, ...props }) {
+	const { locale } = useI18n();
+	const [tag, setTag] = useState(defaultTag);
+	let client;
+	if (type === "static") client = use(STATIC ??= import("@vx-oss/docs-core/search/client/orama-static")).staticClient({
+		from: api,
+		locale,
+		tag
+	});
+	else client = fetchClient({
+		api,
+		locale,
+		tag
+	});
+	const { search, setSearch, query } = useDocsSearch({
+		client,
+		delayMs
+	});
+	const defaultItems = useMemo(() => {
+		if (links.length === 0) return null;
+		return links.map(([name, link]) => ({
+			type: "page",
+			id: name,
+			content: name,
+			url: link
+		}));
+	}, [links]);
+	useOnChange(defaultTag, (v) => {
+		setTag(v);
+	});
+	return /* @__PURE__ */ jsxs(SearchDialog, {
+		search,
+		onSearchChange: setSearch,
+		isLoading: query.isLoading,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(SearchDialogOverlay, {}),
+			/* @__PURE__ */ jsxs(SearchDialogContent, { children: [/* @__PURE__ */ jsxs(SearchDialogHeader, { children: [
+				/* @__PURE__ */ jsx(SearchDialogIcon, {}),
+				/* @__PURE__ */ jsx(SearchDialogInput, {}),
+				/* @__PURE__ */ jsx(SearchDialogClose, {})
+			] }), /* @__PURE__ */ jsx(SearchDialogList, { items: query.data !== "empty" ? query.data : defaultItems })] }),
+			/* @__PURE__ */ jsxs(SearchDialogFooter, { children: [tags.length > 0 && /* @__PURE__ */ jsx(TagsList, {
+				tag,
+				onTagChange: setTag,
+				allowClear,
+				children: tags.map((tag) => /* @__PURE__ */ jsx(TagsListItem, {
+					value: tag.value,
+					children: tag.name
+				}, tag.value))
+			}), footer] })
+		]
+	});
+}
+//#endregion
+export { DefaultSearchDialog as default };