fumadocs-openapi 11.4.2 → 12.0.0

package/dist/packages/shared-api/dist/components/schema/client.js

@@ -0,0 +1,508 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../select.js";
+import { mergeRefs } from "../../utils/merge-refs.js";
+import { Fragment, Suspense, createContext, use, useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "@fuma-translate/react";
+import { CheckIcon, FilterIcon, LinkIcon } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { buttonVariants } from "fumadocs-ui/components/ui/button";
+import { useCopyButton } from "fumadocs-ui/utils/use-copy-button";
+//#region ../shared-api/dist/components/schema/client.js
+const SchemaUIContext = createContext(null);
+/** roots that already restored their path from the URL */
+const restored = /* @__PURE__ */ new Set();
+function SchemaUIProvider({ rootId, name, generated, children }) {
+	const [path, setPath] = useState(() => [{
+		$ref: generated.$root,
+		name
+	}]);
+	useEffect(() => {
+		if (restored.has(rootId)) return;
+		const url = new URL(window.location.href);
+		const param = url.searchParams.get("path");
+		if (url.hash !== `#${rootId}` || !param) return;
+		const decoded = decodePath(param, url.searchParams.get("s-highlight"));
+		if (decoded.length === 0 || decoded.some((item) => !generated.refs[item.$ref])) return;
+		setPath(decoded);
+		restored.add(rootId);
+		if (!decoded.at(-1).highlighted) document.getElementById(rootId)?.scrollIntoView({ behavior: "smooth" });
+	}, [rootId, generated.refs]);
+	return /* @__PURE__ */ jsx(SchemaUIContext, {
+		value: useMemo(() => ({
+			rootId,
+			path,
+			setPath,
+			generated,
+			open: (name, $ref) => setPath([...path, {
+				name,
+				$ref
+			}]),
+			back: (index) => setPath(path.slice(0, index + 1))
+		}), [
+			rootId,
+			path,
+			generated
+		]),
+		children
+	});
+}
+function usePathState() {
+	const ctx = use(SchemaUIContext);
+	if (!ctx) throw new Error("Component must be used under <SchemaUIProvider />");
+	return ctx;
+}
+function useSchemaUI() {
+	return usePathState();
+}
+/**
+* The selected member of a union schema on the path item at `pathIndex`, `depth` for nested unions.
+*/
+function useSchemaTabs(pathIndex, depth) {
+	const { path, setPath } = usePathState();
+	return [path[pathIndex].tabValues?.[depth] || void 0, (value) => {
+		const tabValues = path[pathIndex].tabValues?.slice(0, depth) ?? [];
+		tabValues[depth] = value;
+		setPath(path.with(pathIndex, {
+			...path[pathIndex],
+			tabValues
+		}));
+	}];
+}
+/**
+* Open state of the popover showing the schema `$ref` of the root property `pathName`.
+*/
+function useSchemaPopover(pathName, $ref) {
+	const { path, setPath } = usePathState();
+	return {
+		open: path.length > 1 && path[1].$ref === $ref && path[1].name === pathName && !path[0].closed,
+		onOpenChange(open) {
+			if (open) setPath([{
+				...path[0],
+				closed: false
+			}, {
+				name: pathName,
+				$ref
+			}]);
+			else setPath(path.map((item, i) => i === 0 ? {
+				...item,
+				closed: true
+			} : item));
+		}
+	};
+}
+/**
+* Whether the property `name` on the path item at `pathIndex` is highlighted by the link it was opened from.
+*
+* @returns the state and a ref to scroll the highlighted element into view
+*/
+function useSchemaHighlight(pathIndex, name) {
+	const { path } = usePathState();
+	const item = path[pathIndex];
+	const highlighted = item.highlighted === name;
+	return [highlighted, useCallback((element) => {
+		if (!element || !highlighted) return;
+		window.setTimeout(() => {
+			element.scrollIntoView({
+				behavior: "smooth",
+				block: "end"
+			});
+			delete item.highlighted;
+		}, 300);
+	}, [item, highlighted])];
+}
+/**
+* Copy the link to the property `name` of the current path.
+*/
+function useCopySchemaLink(name) {
+	const { path, rootId } = usePathState();
+	return useCopyButton(() => {
+		const url = new URL(window.location.href);
+		url.hash = `#${rootId}`;
+		url.searchParams.set("s-highlight", name);
+		url.searchParams.set("path", encodePath(path));
+		return navigator.clipboard.writeText(url.href);
+	});
+}
+function encodePath(path) {
+	return path.map((item) => [
+		item.name,
+		item.$ref,
+		...item.tabValues ?? []
+	].join("\0")).join("|");
+}
+function decodePath(path, highlighted) {
+	const out = [];
+	for (const part of path.split("|")) {
+		const [name, $ref, ...tabValues] = part.split("\0");
+		out.push({
+			name,
+			$ref,
+			tabValues
+		});
+	}
+	if (highlighted && out.length > 0) out[out.length - 1].highlighted = highlighted;
+	return out;
+}
+const typeVariants = cva("text-sm text-start text-fd-muted-foreground font-mono", { variants: { variant: { trigger: "underline hover:text-fd-accent-foreground data-[popup-open]:text-fd-accent-foreground" } } });
+/** how a type opens its schema: a popover from the root, navigation inside the popover */
+const TriggerContext = createContext((props) => /* @__PURE__ */ jsx(RootTypeInfoTrigger, { ...props }));
+const renderPopoverTrigger = (props) => /* @__PURE__ */ jsx(PopoverTypeInfoTrigger, { ...props });
+function SchemaUI({ rootId, name, required = false, as = "property", generated }) {
+	return /* @__PURE__ */ jsx(SchemaUIProvider, {
+		rootId,
+		name,
+		generated,
+		children: /* @__PURE__ */ jsx(SchemaUIContent, {
+			name,
+			required,
+			as
+		})
+	});
+}
+function SchemaUIContent({ name, required, as }) {
+	const { rootId, generated } = useSchemaUI();
+	if (as === "property" || generated.refs[generated.$root].type === "primitive") return /* @__PURE__ */ jsx(ObjectProperty, {
+		id: rootId,
+		name,
+		$type: generated.$root,
+		parentPathIndex: 0,
+		required
+	});
+	return /* @__PURE__ */ jsx("div", {
+		id: rootId,
+		children: /* @__PURE__ */ jsx(PathItemBody, { pathIndex: 0 })
+	});
+}
+function RootTypeInfoTrigger({ pathName, $ref, children }) {
+	const { path, rootId } = useSchemaUI();
+	const { open, onOpenChange } = useSchemaPopover(pathName, $ref);
+	const popoverRef = useCallback((element) => {
+		if (!element) return;
+		element.scrollTop = scrollTops.get(getScrollKey(rootId, path)) ?? 0;
+		const current = parseFloat(element.style.getPropertyValue("--min-height") || "200px");
+		element.style.setProperty("--min-height", Math.max(element.clientHeight + 2, current) + "px");
+	}, [rootId, path]);
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			className: cn(typeVariants({ variant: "trigger" })),
+			children
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			ref: popoverRef,
+			className: "w-[600px] max-w-(--available-width) min-h-(--min-height,200px) fd-scroll-container max-h-[460px] px-3 pt-0",
+			onScrollEnd: (e) => {
+				scrollTops.set(getScrollKey(rootId, path), e.target.scrollTop);
+			},
+			children: /* @__PURE__ */ jsx(SchemaUIPopover, {})
+		})]
+	});
+}
+/** scroll positions of opened schemas, restored when navigating back */
+const scrollTops = /* @__PURE__ */ new Map();
+function getScrollKey(rootId, path) {
+	const last = path.at(-1);
+	return `${rootId}\0${path.length}\0${last.name}\0${last.$ref}`;
+}
+function PopoverTypeInfoTrigger({ pathName, $ref, children }) {
+	const { open } = useSchemaUI();
+	return /* @__PURE__ */ jsx("button", {
+		className: cn(typeVariants({ variant: "trigger" })),
+		onClick: () => open(pathName, $ref),
+		children
+	});
+}
+function SchemaDescription({ schema, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className: cn("prose-no-margin py-2 empty:hidden", props.className),
+		children: [schema.description, schema.infoTags && schema.infoTags.length > 0 && /* @__PURE__ */ jsx("div", {
+			className: "flex flex-row gap-2 flex-wrap mt-2 empty:hidden",
+			children: schema.infoTags.map((tag, i) => /* @__PURE__ */ jsx(Fragment, { children: "node" in tag ? tag.node : "list" in tag ? /* @__PURE__ */ jsx(BlockTag, {
+				label: tag.label,
+				children: /* @__PURE__ */ jsx("ul", { children: tag.list.map((item, i) => /* @__PURE__ */ jsx("li", {
+					className: "font-mono list-disc list-inside ps-1 marker:text-fd-muted-foreground",
+					children: item
+				}, i)) })
+			}) : tag.block ? /* @__PURE__ */ jsx(BlockTag, {
+				label: tag.label,
+				children: tag.value
+			}) : /* @__PURE__ */ jsx(InlineTag, {
+				label: tag.label,
+				prose: tag.prose,
+				children: tag.value
+			}) }, i))
+		})]
+	});
+}
+function ObjectProperty({ name, $type, required, parentPathIndex, ...props }) {
+	const t = useTranslations({ note: "schema UI" });
+	const { generated: { refs } } = useSchemaUI();
+	const schema = refs[$type];
+	const [highlighted, ref] = useSchemaHighlight(parentPathIndex, name);
+	const [isChecked, onClick] = useCopySchemaLink(name);
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		ref: mergeRefs(props.ref, ref),
+		className: cn("text-sm border-t py-4 scroll-m-20 first:border-t-0", props.className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-center gap-2 not-prose",
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "font-medium font-mono",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: cn(highlighted ? "bg-fd-primary text-fd-primary-foreground rounded-sm" : "text-fd-primary", schema.deprecated && "line-through opacity-80"),
+						children: name
+					}), required ? /* @__PURE__ */ jsx("span", {
+						className: "text-red-400",
+						children: "*"
+					}) : /* @__PURE__ */ jsx("span", {
+						className: "text-fd-muted-foreground",
+						children: "?"
+					})]
+				}),
+				schema.type === "primitive" ? /* @__PURE__ */ jsx("span", {
+					className: cn(typeVariants()),
+					children: schema.aliasName
+				}) : /* @__PURE__ */ jsx(TypeInfoTrigger, {
+					pathName: name,
+					$ref: $type,
+					children: schema.aliasName
+				}),
+				/* @__PURE__ */ jsx("div", { className: "flex-1" }),
+				schema.deprecated && /* @__PURE__ */ jsx("span", {
+					className: "text-xs font-mono text-yellow-600 dark:text-yellow-400",
+					children: t("Deprecated")
+				}),
+				/* @__PURE__ */ jsx("button", {
+					className: cn(buttonVariants({
+						size: "icon-xs",
+						variant: "ghost"
+					}), "text-fd-muted-foreground [&_svg]:size-3.5"),
+					onClick,
+					children: isChecked ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(LinkIcon, {})
+				})
+			]
+		}), /* @__PURE__ */ jsx(SchemaDescription, {
+			schema,
+			className: "pb-0"
+		})]
+	});
+}
+function PathItemBody({ pathIndex, asSchema, tabDepth = 0, objectSearchOverrides }) {
+	const { path, generated: { refs } } = useSchemaUI();
+	const [selected, setSelected] = useSchemaTabs(pathIndex, tabDepth);
+	const schema = asSchema ?? refs[path[pathIndex].$ref];
+	if ((schema.type === "or" || schema.type === "and") && schema.items.length > 0) {
+		const value = selected ?? schema.items[0].$type;
+		const items = schema.items.map((item) => ({
+			label: /* @__PURE__ */ jsx("code", {
+				className: "text-xs font-medium",
+				children: item.name
+			}),
+			value: item.$type
+		}));
+		return /* @__PURE__ */ jsxs(Select, {
+			items,
+			value,
+			onValueChange: (v) => v && setSelected(v),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-row my-2 gap-2 items-center",
+				children: [
+					/* @__PURE__ */ jsx(SchemaDescription, {
+						schema,
+						className: "flex-1 py-0"
+					}),
+					/* @__PURE__ */ jsx(SelectTrigger, {
+						className: "not-prose w-fit min-w-0 mb-auto *:min-w-0",
+						children: /* @__PURE__ */ jsx(SelectValue, {})
+					}),
+					/* @__PURE__ */ jsx(SelectContent, { children: items.map(({ label, value }) => /* @__PURE__ */ jsx(SelectItem, {
+						value,
+						children: label
+					}, value)) })
+				]
+			}), /* @__PURE__ */ jsx(PathItemBody, {
+				asSchema: refs[value],
+				pathIndex,
+				tabDepth: tabDepth + 1
+			})]
+		});
+	}
+	if (schema.type === "object" && schema.props.length > 0) return /* @__PURE__ */ jsx(ObjectSearch, {
+		pathIndex,
+		schema,
+		...objectSearchOverrides,
+		children: /* @__PURE__ */ jsx(SchemaDescription, { schema })
+	});
+	if (schema.type === "array") return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SchemaDescription, { schema }), /* @__PURE__ */ jsx(ObjectProperty, {
+		name: "[index: integer]",
+		$type: schema.item.$type,
+		parentPathIndex: pathIndex
+	})] });
+	return /* @__PURE__ */ jsx(SchemaDescription, { schema });
+}
+function ObjectSearch({ variant = "default", schema, pathIndex, children }) {
+	const { open } = useSchemaUI();
+	const [search, setSearch] = useState("");
+	const deferredValue = useDeferredValue(search);
+	const firstItemRef = useRef(null);
+	const t = useTranslations({ note: "schema UI" });
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: cn("flex items-center bg-fd-secondary text-fd-secondary-foreground transition-colors", variant === "in-popover" && "sticky top-10 -mx-3 ps-3 border-b focus-within:[&_svg]:text-fd-primary", variant === "default" && "border rounded-md ps-2 shadow-sm focus-within:ring-2 focus-within:ring-fd-ring"),
+			children: [/* @__PURE__ */ jsx(FilterIcon, { className: "text-fd-muted-foreground size-3.5 transition-colors" }), /* @__PURE__ */ jsx("input", {
+				value: search,
+				"data-object-search-input": "",
+				onChange: (e) => setSearch(e.target.value),
+				placeholder: t("Filter Properties"),
+				className: "text-sm ps-2 py-2 flex-1 outline-none placeholder:text-fd-muted-foreground",
+				onKeyDown: (e) => {
+					if (e.key === "Enter") {
+						const item = firstItemRef.current;
+						if (item) open(item.name, item.$type);
+						e.preventDefault();
+					}
+				}
+			})]
+		}),
+		children,
+		/* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(ObjectSearchContent, {
+			search: deferredValue,
+			properties: schema.props,
+			firstItemRef,
+			empty: () => /* @__PURE__ */ jsxs("p", {
+				className: "text-fd-muted-foreground text-sm my-2!",
+				children: [
+					t("No property matching"),
+					" ",
+					/* @__PURE__ */ jsx("span", {
+						className: "text-fd-foreground font-medium",
+						children: `"${deferredValue}"`
+					})
+				]
+			}),
+			render: (item) => /* @__PURE__ */ jsx(ObjectProperty, {
+				name: item.name,
+				$type: item.$type,
+				required: item.required,
+				parentPathIndex: pathIndex
+			}, item.name)
+		}) })
+	] });
+}
+function ObjectSearchContent({ search: rawSearch, firstItemRef, properties, empty, render }) {
+	const filtered = useMemo(() => {
+		const search = rawSearch.trim().toLowerCase();
+		return search.length > 0 ? properties.filter((prop) => prop.name.toLowerCase().includes(search)) : properties;
+	}, [properties, rawSearch]);
+	firstItemRef.current = filtered[0] ?? null;
+	if (filtered.length === 0) return empty();
+	return filtered.map(render);
+}
+function InlineTag({ label, prose = false, children }) {
+	if (prose) return /* @__PURE__ */ jsxs("div", {
+		className: "inline-flex gap-2 bg-fd-secondary border rounded-lg text-xs p-1.5 shadow-md max-w-full",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "font-medium not-prose",
+			children: label
+		}), /* @__PURE__ */ jsx("span", {
+			className: "min-w-0 flex-1 text-fd-muted-foreground prose-sm prose-no-margin",
+			children
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "inline-flex gap-2 bg-fd-secondary border rounded-lg text-xs p-1.5 shadow-md max-w-full not-prose",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "font-medium",
+			children: label
+		}), /* @__PURE__ */ jsx("code", {
+			className: "min-w-0 flex-1 text-fd-muted-foreground wrap-break-word",
+			children
+		})]
+	});
+}
+function BlockTag({ label, children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col w-full gap-2 bg-fd-secondary border rounded-lg p-1.5 shadow-md not-prose",
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "font-medium text-xs",
+			children: label
+		}), children]
+	});
+}
+function SchemaUIPopover() {
+	const { path, back } = useSchemaUI();
+	const ref = useRef(null);
+	useEffect(() => {
+		ref.current?.querySelector("input[data-object-search-input]")?.focus({ preventScroll: true });
+	}, [path]);
+	return /* @__PURE__ */ jsx(TriggerContext, {
+		value: renderPopoverTrigger,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref,
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "sticky top-0 -mx-3 flex overflow-x-auto overflow-y-hidden items-center text-sm font-medium font-mono bg-fd-secondary text-fd-secondary-foreground px-3 h-10 border-b z-20",
+				children: path.map((item, i) => {
+					if (i === 0) return;
+					const isDuplicated = path.some((other, j) => j !== i && other.$ref === item.$ref);
+					let text;
+					const indexItemMatch = /^\[(\w+): (\w+)]$/.exec(item.name);
+					if (indexItemMatch) text = `[${indexItemMatch[1]}]`;
+					else if (i > 1) text = `.${item.name}`;
+					else text = item.name;
+					return /* @__PURE__ */ jsx("button", {
+						onClick: () => back(i),
+						className: cn("hover:underline hover:text-fd-accent-foreground", isDuplicated && "text-orange-400"),
+						children: text
+					}, i);
+				})
+			}), /* @__PURE__ */ jsx(PathItemBody, {
+				pathIndex: path.length - 1,
+				objectSearchOverrides: { variant: "in-popover" }
+			})]
+		})
+	});
+}
+function TypeInfoTrigger({ pathName, $ref, children }) {
+	const { generated: { refs } } = useSchemaUI();
+	const renderTrigger = use(TriggerContext);
+	const schema = refs[$ref];
+	if (schema.type === "primitive" && !schema.description && (!schema.infoTags || schema.infoTags.length === 0)) return /* @__PURE__ */ jsx("span", {
+		className: cn(typeVariants()),
+		children
+	});
+	if (schema.type === "and" || schema.type === "or") {
+		const sep = schema.type === "and" ? "&" : "|";
+		return /* @__PURE__ */ jsx("span", {
+			className: cn(typeVariants(), "flex flex-row gap-2 items-center flex-wrap"),
+			children: schema.items.map((item, i) => /* @__PURE__ */ jsxs(Fragment, { children: [i > 0 && /* @__PURE__ */ jsx("span", { children: sep }), /* @__PURE__ */ jsx(TypeInfoTrigger, {
+				pathName,
+				$ref: item.$type,
+				children: item.name
+			})] }, item.$type))
+		});
+	}
+	if (schema.type === "array") return /* @__PURE__ */ jsxs("span", {
+		className: cn(typeVariants(), "flex flex-row items-center flex-wrap"),
+		children: [
+			"array<",
+			/* @__PURE__ */ jsx(TypeInfoTrigger, {
+				pathName: `${pathName}[]`,
+				$ref: schema.item.$type,
+				children: refs[schema.item.$type].aliasName
+			}),
+			">"
+		]
+	});
+	return renderTrigger({
+		pathName,
+		$ref,
+		children
+	});
+}
+//#endregion
+export { BlockTag, InlineTag, SchemaUI, SchemaUIProvider, useCopySchemaLink, useSchemaHighlight, useSchemaPopover, useSchemaTabs, useSchemaUI };

package/dist/packages/shared-api/dist/components/schema/index.d.ts

@@ -0,0 +1,9 @@
+import { SchemaUIProps } from "./client.js";
+import { GenerateSchemaUIOptions } from "@fumadocs/json-schema/react";
+//#region ../shared-api/dist/components/schema/index.d.ts
+//#region src/components/schema/index.d.ts
+export interface SchemaUIOptions extends Omit<GenerateSchemaUIOptions, 'translations'> {
+  client: Omit<SchemaUIProps, 'generated'>;
+}
+//#endregion
+export type { SchemaUIProps };

package/dist/packages/shared-api/dist/components/schema/index.js

@@ -0,0 +1,28 @@
+"use client";
+import { SchemaUI } from "./client.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useTranslations } from "@fuma-translate/react";
+import { generateSchemaUI } from "@fumadocs/json-schema/react";
+//#region ../shared-api/dist/components/schema/index.js
+function Schema({ client, ...options }) {
+	const translations = useTranslations().translations;
+	const generated = useMemo(() => generateSchemaUI({
+		...options,
+		translations
+	}), [
+		options.root,
+		options.readOnly,
+		options.writeOnly,
+		options.showExample,
+		options.renderMarkdown,
+		options.renderCodeblock,
+		translations
+	]);
+	return /* @__PURE__ */ jsx(SchemaUI, {
+		...client,
+		generated
+	});
+}
+//#endregion
+export { Schema, SchemaUI };

package/dist/packages/shared-api/dist/components/select-tab.js

@@ -0,0 +1,54 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
+import { anchorIdStartsWith } from "../auto-anchor/index.js";
+import { AnchorSection, useAnchorId } from "../auto-anchor/client.js";
+import { createContext, use, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../shared-api/dist/components/select-tab.js
+const Context = createContext(null);
+function SelectTabs({ defaultValue, children }) {
+	const [value, setValue] = useState(defaultValue ?? null);
+	return /* @__PURE__ */ jsx(Context, {
+		value: useMemo(() => ({
+			value,
+			setValue
+		}), [value]),
+		children
+	});
+}
+function SelectTab({ value, anchorSegments, ...props }) {
+	const { value: currentValue, setValue } = use(Context);
+	const id = useAnchorId(anchorSegments ?? false);
+	useEffect(() => {
+		if (id && anchorIdStartsWith(window.location.hash.slice(1), id)) setValue(value);
+	}, [
+		id,
+		value,
+		setValue
+	]);
+	if (value !== currentValue) return;
+	const content = /* @__PURE__ */ jsx("div", { ...props });
+	return anchorSegments ? /* @__PURE__ */ jsx(AnchorSection, {
+		segments: anchorSegments,
+		children: content
+	}) : content;
+}
+function SelectTabTrigger({ items, className, placeholder, ...props }) {
+	const { value, setValue } = use(Context);
+	return /* @__PURE__ */ jsxs(Select, {
+		items,
+		value,
+		onValueChange: setValue,
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			className: cn("not-prose w-fit min-w-0 *:min-w-0", className),
+			...props,
+			children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
+		}), /* @__PURE__ */ jsx(SelectContent, { children: items.map(({ label, value }) => /* @__PURE__ */ jsx(SelectItem, {
+			value,
+			children: label
+		}, value)) })]
+	});
+}
+//#endregion
+export { SelectTab, SelectTabTrigger, SelectTabs };

package/dist/packages/shared-api/dist/components/select.js

@@ -0,0 +1,70 @@
+import { cn } from "../utils/cn.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import { Select } from "@base-ui/react/select";
+//#region ../shared-api/dist/components/select.js
+const Select$1 = Select.Root;
+Select.Group;
+const SelectValue = Select.Value;
+function SelectTrigger({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsxs(Select.Trigger, {
+		ref,
+		className: cn("flex items-center w-full rounded-md border p-2 gap-2 text-start text-sm text-fd-secondary-foreground bg-fd-secondary hover:bg-fd-accent focus:outline-none focus:ring focus:ring-fd-ring disabled:cursor-not-allowed disabled:opacity-50 data-placeholder:text-fd-muted-foreground", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Select.Icon, {
+			className: "ms-auto text-fd-muted-foreground shrink-0",
+			children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5" })
+		})]
+	});
+}
+function SelectScrollUpButton({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx(Select.ScrollUpArrow, {
+		ref,
+		className: cn("flex items-center justify-center py-1", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ChevronUp, { className: "size-4" })
+	});
+}
+function SelectScrollDownButton({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx(Select.ScrollDownArrow, {
+		ref,
+		className: cn("flex items-center justify-center py-1", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4" })
+	});
+}
+function SelectContent({ className, children, align = "start", side = "bottom", sideOffset = 4, ref, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, {
+		align,
+		side,
+		sideOffset,
+		className: "z-50",
+		children: /* @__PURE__ */ jsxs(Select.Popup, {
+			ref,
+			className: cn("z-50 min-w-[calc(var(--anchor-width)+--spacing(2))] overflow-hidden rounded-lg border bg-fd-popover text-fd-popover-foreground shadow-md", className),
+			...props,
+			children: [
+				/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+				/* @__PURE__ */ jsx(Select.List, {
+					className: "p-1",
+					children
+				}),
+				/* @__PURE__ */ jsx(SelectScrollDownButton, {})
+			]
+		})
+	}) });
+}
+function SelectItem({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsxs(Select.Item, {
+		ref,
+		className: cn("flex select-none flex-row items-center rounded-md py-1.5 px-2 text-sm outline-none data-[highlighted]:bg-fd-accent data-[highlighted]:text-fd-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Select.ItemText, { children }), /* @__PURE__ */ jsx(Select.ItemIndicator, {
+			className: "ms-auto shrink-0",
+			children: /* @__PURE__ */ jsx(Check, { className: "size-3.5 text-fd-primary" })
+		})]
+	});
+}
+//#endregion
+export { Select$1 as Select, SelectContent, SelectItem, SelectScrollDownButton, SelectScrollUpButton, SelectTrigger, SelectValue };

package/dist/packages/shared-api/dist/components/spinner.js

@@ -0,0 +1,14 @@
+import { cn } from "../utils/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { Loader2Icon } from "lucide-react";
+//#region ../shared-api/dist/components/spinner.js
+function Spinner({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Loader2Icon, {
+		role: "status",
+		"aria-label": "Loading",
+		className: cn("size-4 animate-spin", className),
+		...props
+	});
+}
+//#endregion
+export { Spinner };

package/dist/packages/shared-api/dist/i18n.d.ts

@@ -0,0 +1,3 @@
+import { Translations } from "./.translations/index.js";
+import { TranslationExtension } from "fumadocs-core/i18n";
+export type { Translations };