fumadocs-openapi 10.10.3 → 11.0.1

package/dist/ui/operation/index.js

@@ -1,22 +1,28 @@
-import { idToTitle } from "../../utils/id-to-title.js";
-import { createMethod, methodKeys } from "../../utils/schema/index.js";
-import { isMediaTypeSupported } from "../../requests/media/resolve-adapter.js";
-import "../../requests/media/adapter.js";
-import { I18nLabel } from "../client/i18n.js";
+"use client";
+import { methodKeys } from "../../utils/schema.js";
+import { ServerProvider, useRenderContext } from "../contexts/api.js";
 import { cn } from "../../utils/cn.js";
 import { Badge, MethodLabel } from "../components/method-label.js";
-import { CopyTypeScriptPanel, OperationProvider } from "./client.js";
-import { Schema } from "../schema/index.js";
-import { AnchorSection } from "../../utils/auto-anchor.client.js";
-import { AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger, Accordions } from "../components/accordion.js";
-import { UsageTabs } from "./usage-tabs/index.js";
+import { isMediaTypeSupported } from "../../requests/media/resolve-adapter.js";
+import "../../requests/media/adapter.js";
+import { OperationProvider } from "./context.js";
+import PlaygroundClient from "../../playground/client.js";
+import { Markdown } from "../components/markdown.js";
+import { UsageTabs } from "./usage-tabs.js";
 import { RequestTabs } from "./request-tabs.js";
-import { getExampleRequests } from "./get-example-requests.js";
-import { SelectTab, SelectTabTrigger, SelectTabs } from "../components/select-tab.js";
+import { getExampleRequests } from "../../utils/get-example-requests.js";
 import { Heading } from "../components/heading.js";
+import { idToTitle } from "@fumadocs/api-docs/utils/id-to-title";
 import { Fragment, use, useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Check, Copy } from "lucide-react";
+import { useTranslations } from "@fuma-translate/react";
+import { buttonVariants } from "fumadocs-ui/components/ui/button";
+import { AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger, Accordions } from "@fumadocs/api-docs/components/accordion";
+import { SelectTab, SelectTabTrigger, SelectTabs } from "@fumadocs/api-docs/components/select-tab";
 import { Callout } from "fumadocs-ui/components/callout";
+import { AnchorSection } from "@fumadocs/api-docs/auto-anchor/client";
+import { useCopyButton } from "fumadocs-ui/utils/use-copy-button";
 //#region src/ui/operation/index.tsx
 const paramTypeKeys = [
 	"path",
@@ -24,22 +30,33 @@ const paramTypeKeys = [
 	"header",
 	"cookie"
 ];
-function Operation({ type = "operation", path, method, ctx, showTitle, showDescription, headingLevel = 2 }) {
+function Operation({ type = "operation", path, operation, pathItem, method, showTitle, showDescription, headingLevel = 2 }) {
+	const t = useTranslations({ note: "operation page" });
+	const ctx = useRenderContext();
 	const { schema: { dereferenced } } = ctx;
-	const body = method.requestBody;
+	const body = operation.requestBody;
 	let headNode = null;
-	const descriptionNode = showDescription && method.description && ctx.renderMarkdown(method.description);
+	const operationDescription = operation.description ?? pathItem.description;
+	const descriptionNode = showDescription && operationDescription && /* @__PURE__ */ jsx(Markdown, { md: operationDescription });
 	let bodyNode = null;
 	let authNode = null;
 	let responseNode = null;
 	let callbacksNode = null;
-	const exampleRequests = useMemo(() => getExampleRequests(path, method, ctx), [
+	const exampleRequests = useMemo(() => getExampleRequests({
+		path,
+		operation,
+		method,
+		pathItem,
+		ctx
+	}), [
 		ctx,
+		operation,
 		method,
+		pathItem,
 		path
 	]);
 	if (showTitle) {
-		const title = method.summary || (method.operationId ? idToTitle(method.operationId) : path);
+		const title = operation.summary || pathItem.summary || (operation.operationId ? idToTitle(operation.operationId) : path);
 		headNode = /* @__PURE__ */ jsxs("div", {
 			className: "flex gap-2 items-center justify-between",
 			children: [/* @__PURE__ */ jsx(Heading, {
@@ -47,16 +64,16 @@ function Operation({ type = "operation", path, method, ctx, showTitle, showDescr
 				depth: headingLevel,
 				className: "my-0!",
 				children: title
-			}), method.deprecated && /* @__PURE__ */ jsx(Badge, {
+			}), operation.deprecated && /* @__PURE__ */ jsx(Badge, {
 				color: "yellow",
 				className: "text-xs not-prose",
-				children: /* @__PURE__ */ jsx(I18nLabel, { label: "deprecated" })
+				children: t("Deprecated")
 			})]
 		});
 		headingLevel++;
-	} else if (method.deprecated) headNode = /* @__PURE__ */ jsx(Callout, {
+	} else if (operation.deprecated) headNode = /* @__PURE__ */ jsx(Callout, {
 		type: "warn",
-		title: /* @__PURE__ */ jsx(I18nLabel, { label: "deprecated" }),
+		title: t("Deprecated"),
 		className: "mt-0!"
 	});
 	const contentTypes = body?.content ? Object.entries(body.content) : null;
@@ -77,7 +94,7 @@ function Operation({ type = "operation", path, method, ctx, showTitle, showDescr
 						id: "request-body",
 						depth: headingLevel,
 						className: "my-0!",
-						children: /* @__PURE__ */ jsx(I18nLabel, { label: "titleRequestBody" })
+						children: t("Request Body")
 					}), contentTypes.length > 1 ? /* @__PURE__ */ jsx(SelectTabTrigger, {
 						items,
 						className: "font-medium"
@@ -86,7 +103,7 @@ function Operation({ type = "operation", path, method, ctx, showTitle, showDescr
 						children: items[0].label
 					})]
 				}),
-				body.description && ctx.renderMarkdown(body.description),
+				body?.description && /* @__PURE__ */ jsx(Markdown, { md: body.description }),
 				contentTypes.map(([type, content]) => {
 					if (!isMediaTypeSupported(type, ctx.mediaAdapters)) throw new Error(`Media type ${type} is not supported (in ${path})`);
 					return /* @__PURE__ */ jsx(SelectTab, {
@@ -94,41 +111,42 @@ function Operation({ type = "operation", path, method, ctx, showTitle, showDescr
 						value: type,
 						children: /* @__PURE__ */ jsx(RequestBodyContentItem, {
 							content,
-							method,
-							ctx
+							operation,
+							method
 						})
 					}, type);
 				})
 			]
 		});
 	}
-	if (method.responses && ctx.showResponseSchema !== false) {
-		const statuses = Object.keys(method.responses);
+	if (operation.responses && ctx.showResponseSchema !== false) {
+		const statuses = Object.keys(operation.responses);
 		responseNode = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Heading, {
 			id: "response-body",
 			depth: headingLevel,
-			children: /* @__PURE__ */ jsx(I18nLabel, { label: "titleResponseBody" })
+			children: t("Response Body")
 		}), /* @__PURE__ */ jsx(Accordions, {
 			type: "multiple",
 			children: statuses.map((status) => /* @__PURE__ */ jsx(ResponseAccordion, {
 				status,
-				operation: method,
-				ctx
+				operation
 			}, status))
 		})] });
 	}
+	const parameters = [...operation.parameters ?? [], ...pathItem.parameters ?? []];
 	const parameterNode = paramTypeKeys.map((type) => {
-		const params = method.parameters?.filter((param) => param.in === type);
+		const params = parameters.filter((param) => param.in === type);
 		if (!params || params.length === 0) return;
+		const parameterLabel = type === "path" ? t("Path Parameters") : type === "query" ? t("Query Parameters") : type === "header" ? t("Header Parameters") : t("Cookie Parameters");
 		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Heading, {
 			id: `parameters-${type}`,
 			depth: headingLevel,
-			children: /* @__PURE__ */ jsx(I18nLabel, { label: `${type}Parameters` })
+			children: parameterLabel
 		}), /* @__PURE__ */ jsx(AnchorSection, {
 			segments: ["parameters", type],
 			children: /* @__PURE__ */ jsx("div", {
 				className: "flex flex-col",
-				children: params.map((param) => param.schema != null && /* @__PURE__ */ jsx(Schema, {
+				children: params.map((param) => param.schema != null && /* @__PURE__ */ jsx(ctx.SchemaUI, {
 					client: {
 						name: param.name,
 						required: param.required
@@ -138,14 +156,13 @@ function Operation({ type = "operation", path, method, ctx, showTitle, showDescr
 						description: param.description ?? param.schema?.description,
 						deprecated: (param.deprecated ?? false) || (param.schema?.deprecated ?? false)
 					} : param.schema,
-					readOnly: method.method === "get",
-					writeOnly: method.method !== "get",
-					ctx
+					readOnly: method === "get",
+					writeOnly: method !== "get"
 				}, param.name))
 			})
 		})] }, type);
 	});
-	const securities = (method.security ?? dereferenced.security ?? []).filter((v) => Object.keys(v).length > 0);
+	const securities = (operation.security ?? dereferenced.security ?? []).filter((v) => Object.keys(v).length > 0);
 	if (type === "operation" && securities.length > 0) {
 		const securitySchemes = dereferenced.components?.securitySchemes;
 		const items = securities.map((security, i) => {
@@ -178,7 +195,7 @@ function Operation({ type = "operation", path, method, ctx, showTitle, showDescr
 					id: "authorization",
 					depth: headingLevel,
 					className: "my-0!",
-					children: /* @__PURE__ */ jsx(I18nLabel, { label: "authorization" })
+					children: t("Authorization")
 				}), items.length > 1 ? /* @__PURE__ */ jsx(SelectTabTrigger, { items }) : /* @__PURE__ */ jsx("div", {
 					className: "not-prose",
 					children: items[0].label
@@ -190,15 +207,14 @@ function Operation({ type = "operation", path, method, ctx, showTitle, showDescr
 					if (!scheme) return;
 					return /* @__PURE__ */ jsx(AuthScheme, {
 						scheme,
-						scopes,
-						ctx
+						scopes
 					}, key);
 				})
 			}, i))]
 		});
 	}
 	const webhookCallbacks = [];
-	for (const [name, callbacks] of Object.entries(method.callbacks ?? {})) for (const [path, callback] of Object.entries(callbacks)) for (const method of methodKeys) {
+	for (const [name, callbacks] of Object.entries(operation.callbacks ?? {})) for (const [path, callback] of Object.entries(callbacks)) for (const method of methodKeys) {
 		if (!callback[method]) continue;
 		webhookCallbacks.push({
 			name,
@@ -211,7 +227,7 @@ function Operation({ type = "operation", path, method, ctx, showTitle, showDescr
 	if (webhookCallbacks.length > 0) callbacksNode = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Heading, {
 		id: "callbacks",
 		depth: headingLevel,
-		children: /* @__PURE__ */ jsx(I18nLabel, { label: "titleCallbacks" })
+		children: t("Callbacks")
 	}), /* @__PURE__ */ jsx(Accordions, {
 		type: "multiple",
 		children: webhookCallbacks.map((item, i) => /* @__PURE__ */ jsxs(AccordionItem, {
@@ -222,26 +238,27 @@ function Operation({ type = "operation", path, method, ctx, showTitle, showDescr
 				item.path,
 				item.method
 			],
-			children: [/* @__PURE__ */ jsxs(AccordionHeader, {
-				className: "flex-col gap-3",
-				children: [/* @__PURE__ */ jsx(AccordionTrigger, {
-					className: "font-mono",
+			children: [/* @__PURE__ */ jsx(AccordionHeader, { children: /* @__PURE__ */ jsx(AccordionTrigger, {
+				className: "gap-3",
+				children: /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+					className: "font-mono mb-2",
 					children: item.name
 				}), /* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-2 text-xs ps-4.5",
+					className: "flex items-center gap-2 text-xs",
 					children: [/* @__PURE__ */ jsx(MethodLabel, { children: item.method }), /* @__PURE__ */ jsx("code", {
 						className: "text-fd-muted-foreground",
 						children: item.path
 					})]
-				})]
-			}), /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx("div", {
-				className: "border p-3 ps-4.5 mb-2 @container prose-no-margin rounded-xl",
+				})] })
+			}) }), /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx("div", {
+				className: "border p-3 mb-2 @container prose-no-margin rounded-2xl",
 				children: /* @__PURE__ */ jsx(Operation, {
 					type: "webhook",
 					path,
 					headingLevel: headingLevel + 1,
-					method: createMethod(item.method, item.callback, item.operation),
-					ctx
+					method: item.method,
+					pathItem: item.callback,
+					operation: item.operation
 				})
 			}) })]
 		}, i))
@@ -269,7 +286,31 @@ function Operation({ type = "operation", path, method, ctx, showTitle, showDescr
 				})]
 			});
 		};
-		const playgroundEnabled = ctx.playground?.enabled ?? true;
+		let apiPlayground;
+		if (ctx.playground?.enabled ?? true) apiPlayground = ctx.playground?.render ? ctx.playground.render({
+			path,
+			method,
+			operation,
+			pathItem,
+			ctx
+		}) : /* @__PURE__ */ jsx(PlaygroundClient, {
+			operation,
+			pathItem,
+			route: path,
+			method,
+			writeOnly: true,
+			readOnly: false
+		});
+		else apiPlayground = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-row items-center gap-2.5 p-3 rounded-xl border bg-fd-card text-fd-card-foreground not-prose",
+			children: [/* @__PURE__ */ jsx(MethodLabel, {
+				className: "text-xs",
+				children: method
+			}), /* @__PURE__ */ jsx("code", {
+				className: cn("flex-1 overflow-auto text-nowrap text-[0.8125rem] text-fd-muted-foreground", operation.deprecated && "line-through"),
+				children: path
+			})]
+		});
 		let content = renderOperationLayout({
 			header: headNode,
 			description: descriptionNode,
@@ -278,33 +319,26 @@ function Operation({ type = "operation", path, method, ctx, showTitle, showDescr
 			callbacks: callbacksNode,
 			parameters: parameterNode,
 			responses: responseNode,
-			apiPlayground: playgroundEnabled ? ctx.playground?.render?.({
-				path,
-				method,
-				ctx
-			}) : /* @__PURE__ */ jsxs("div", {
-				className: "flex flex-row items-center gap-2.5 p-3 rounded-xl border bg-fd-card text-fd-card-foreground not-prose",
-				children: [/* @__PURE__ */ jsx(MethodLabel, {
-					className: "text-xs",
-					children: method.method
-				}), /* @__PURE__ */ jsx("code", {
-					className: cn("flex-1 overflow-auto text-nowrap text-[0.8125rem] text-fd-muted-foreground", method.deprecated && "line-through"),
-					children: path
-				})]
-			}),
+			apiPlayground,
 			apiExample: /* @__PURE__ */ jsx(UsageTabs, {
 				method,
-				ctx
+				operation,
+				pathItem
 			})
-		}, ctx, method);
+		}, {
+			operation,
+			method,
+			pathItem,
+			ctx
+		});
 		content = /* @__PURE__ */ jsx(OperationProvider, {
-			defaultExampleId: method["x-exclusiveCodeSample"] ?? method["x-selectedCodeSample"],
+			defaultExampleId: operation["x-exclusiveCodeSample"] ?? operation["x-selectedCodeSample"],
 			route: path,
 			examples: exampleRequests,
 			children: content
 		});
-		if (method.servers) content = /* @__PURE__ */ jsx(ctx.clientBoundary.ServerProvider, {
-			servers: method.servers,
+		if (operation.servers || pathItem.servers) content = /* @__PURE__ */ jsx(ServerProvider, {
+			servers: operation.servers ?? pathItem.servers,
 			children: content
 		});
 		return content;
@@ -338,44 +372,40 @@ function Operation({ type = "operation", path, method, ctx, showTitle, showDescr
 			requests: /* @__PURE__ */ jsx(RequestTabs, {
 				examples: exampleRequests,
 				path,
-				operation: method,
-				ctx
+				method,
+				pathItem,
+				operation
 			})
 		});
 	}
 }
-function RequestBodyContentItem({ content, method, ctx }) {
+function RequestBodyContentItem({ content, method, operation }) {
+	const ctx = useRenderContext();
 	let ts = useMemo(() => {
 		if (!content.schema || !ctx.generateTypeScriptDefinitions) return;
 		return ctx.generateTypeScriptDefinitions(content.schema, {
-			operation: method,
 			readOnly: false,
 			writeOnly: true,
-			...ctx
+			ctx
 		});
-	}, [
-		content.schema,
-		ctx,
-		method
-	]);
+	}, [content.schema, ctx]);
 	if (ts instanceof Promise) ts = use(ts);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [ts && /* @__PURE__ */ jsx(CopyTypeScriptPanel, {
 		name: "request body",
 		code: ts,
 		className: "my-4 last:mb-0"
-	}), content.schema && /* @__PURE__ */ jsx(Schema, {
+	}), content.schema && /* @__PURE__ */ jsx(ctx.SchemaUI, {
 		client: {
 			name: "body",
 			as: "body",
-			required: method.requestBody?.required
+			required: operation.requestBody?.required
 		},
 		root: content.schema,
-		readOnly: method.method === "get",
-		writeOnly: method.method !== "get",
-		ctx
+		readOnly: method === "get",
+		writeOnly: method !== "get"
 	})] });
 }
-function ResponseAccordion({ status, operation, ctx }) {
+function ResponseAccordion({ status, operation }) {
 	const response = operation.responses[status];
 	const contentTypes = response.content ? Object.entries(response.content) : [];
 	const items = contentTypes.map(([key]) => ({
@@ -395,71 +425,58 @@ function ResponseAccordion({ status, operation, ctx }) {
 				className: "font-mono",
 				children: status
 			}), items.length === 1 ? /* @__PURE__ */ jsx("p", {
-				className: "text-fd-muted-foreground not-prose",
+				className: "text-fd-muted-foreground not-prose py-2",
 				children: items[0].label
-			}) : items.length > 0 && /* @__PURE__ */ jsx(SelectTabTrigger, { items })] }), /* @__PURE__ */ jsxs(AccordionContent, {
+			}) : items.length > 0 && /* @__PURE__ */ jsx(SelectTabTrigger, {
+				items,
+				className: "my-1.5 py-1"
+			})] }), /* @__PURE__ */ jsxs(AccordionContent, {
 				className: "ps-4.5 pe-3 border rounded-xl",
 				children: [response.description && /* @__PURE__ */ jsx("div", {
 					className: "prose-no-margin mt-3 mb-2",
-					children: ctx.renderMarkdown(response.description)
+					children: /* @__PURE__ */ jsx(Markdown, { md: response.description })
 				}), contentTypes.map(([type, item]) => /* @__PURE__ */ jsx(SelectTab, {
 					value: type,
 					anchorSegments: [type],
-					children: /* @__PURE__ */ jsx(RepsonseAccordionItem, {
-						type,
-						status,
-						item,
-						operation,
-						ctx
-					})
+					children: /* @__PURE__ */ jsx(RepsonseAccordionItem, { item })
 				}, type))]
 			})]
 		})
 	});
 }
-function RepsonseAccordionItem({ type, status, operation, item: { schema }, ctx }) {
+function RepsonseAccordionItem({ item: { schema } }) {
+	const ctx = useRenderContext();
 	let ts = useMemo(() => {
 		if (!schema || !ctx.generateTypeScriptDefinitions) return;
 		return ctx.generateTypeScriptDefinitions(schema, {
 			readOnly: true,
 			writeOnly: false,
-			operation,
-			_internal_legacy: {
-				statusCode: status,
-				contentType: type
-			},
-			...ctx
+			ctx
 		});
-	}, [
-		ctx,
-		operation,
-		schema,
-		status,
-		type
-	]);
+	}, [ctx, schema]);
 	if (ts instanceof Promise) ts = use(ts);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [ts && /* @__PURE__ */ jsx(CopyTypeScriptPanel, {
 		name: "response body",
 		code: ts,
 		className: "mb-2"
-	}), schema && /* @__PURE__ */ jsx(Schema, {
+	}), schema && /* @__PURE__ */ jsx(ctx.SchemaUI, {
 		client: {
 			name: "response",
 			as: "body"
 		},
 		root: schema,
-		readOnly: true,
-		ctx
+		readOnly: true
 	})] });
 }
-function AuthScheme({ scheme, scopes, ctx }) {
+function AuthScheme({ scheme, scopes }) {
+	const t = useTranslations({ note: "security scheme" });
 	if (scheme.type === "http" || scheme.type === "oauth2") return /* @__PURE__ */ jsxs(AuthProperty, {
-		name: /* @__PURE__ */ jsx(I18nLabel, { label: "authorization" }),
-		type: scheme.type === "http" && scheme.scheme === "basic" ? /* @__PURE__ */ jsx(I18nLabel, { label: "authBasicTokenExample" }) : /* @__PURE__ */ jsx(I18nLabel, { label: "authBearerTokenExample" }),
+		name: t("Authorization"),
+		type: scheme.type === "http" && scheme.scheme === "basic" ? t("Basic <token>") : t("Bearer <token>"),
 		deprecated: scheme.deprecated,
 		scopes,
-		children: [scheme.description && ctx.renderMarkdown(scheme.description), /* @__PURE__ */ jsxs("p", { children: [
-			/* @__PURE__ */ jsx(I18nLabel, { label: "authTokenIn" }),
+		children: [scheme.description && /* @__PURE__ */ jsx(Markdown, { md: scheme.description }), /* @__PURE__ */ jsxs("p", { children: [
+			t("In"),
 			": ",
 			/* @__PURE__ */ jsx("code", { children: "header" })
 		] })]
@@ -469,21 +486,22 @@ function AuthScheme({ scheme, scopes, ctx }) {
 		type: "<token>",
 		deprecated: scheme.deprecated,
 		scopes,
-		children: [scheme.description && ctx.renderMarkdown(scheme.description), /* @__PURE__ */ jsxs("p", { children: [
-			/* @__PURE__ */ jsx(I18nLabel, { label: "authTokenIn" }),
+		children: [scheme.description && /* @__PURE__ */ jsx(Markdown, { md: scheme.description }), /* @__PURE__ */ jsxs("p", { children: [
+			t("In"),
 			": ",
 			/* @__PURE__ */ jsx("code", { children: scheme.in })
 		] })]
 	});
 	if (scheme.type === "openIdConnect") return /* @__PURE__ */ jsx(AuthProperty, {
-		name: /* @__PURE__ */ jsx(I18nLabel, { label: "openIdConnect" }),
+		name: t("OpenID Connect"),
 		type: "<token>",
 		deprecated: scheme.deprecated,
 		scopes,
-		children: scheme.description && ctx.renderMarkdown(scheme.description)
+		children: scheme.description && /* @__PURE__ */ jsx(Markdown, { md: scheme.description })
 	});
 }
 function AuthProperty({ name, type, deprecated = false, scopes = [], className, ...props }) {
+	const t = useTranslations({ note: "security scheme" });
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("text-sm border-t my-4 first:border-t-0", className),
 		children: [/* @__PURE__ */ jsxs("div", {
@@ -500,18 +518,42 @@ function AuthProperty({ name, type, deprecated = false, scopes = [], className,
 				deprecated && /* @__PURE__ */ jsx(Badge, {
 					color: "red",
 					className: "text-xs",
-					children: /* @__PURE__ */ jsx(I18nLabel, { label: "deprecated" })
+					children: t("Deprecated")
 				})
 			]
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "prose-no-margin pt-2.5 empty:hidden",
 			children: [props.children, scopes.length > 0 && /* @__PURE__ */ jsxs("p", { children: [
-				/* @__PURE__ */ jsx(I18nLabel, { label: "authScope" }),
+				t("Scope"),
 				": ",
 				/* @__PURE__ */ jsx("code", { children: scopes.join(", ") })
 			] })]
 		})]
 	});
 }
+function CopyTypeScriptPanel({ name, code, className }) {
+	const [isChecked, onCopy] = useCopyButton(() => {
+		navigator.clipboard.writeText(code);
+	});
+	const t = useTranslations({ note: "TypeScript definitions" });
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-start justify-between gap-2 bg-fd-card text-fd-card-foreground border rounded-xl p-3 not-prose", className),
+		children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+			className: "font-medium text-sm mb-2",
+			children: t("TypeScript Definitions")
+		}), /* @__PURE__ */ jsx("p", {
+			className: "text-xs text-fd-muted-foreground",
+			children: t("Use the {name} type in TypeScript.", { variables: { name } })
+		})] }), /* @__PURE__ */ jsxs("button", {
+			onClick: onCopy,
+			className: cn(buttonVariants({
+				color: "secondary",
+				className: "p-2 gap-2",
+				size: "sm"
+			})),
+			children: [isChecked ? /* @__PURE__ */ jsx(Check, { className: "size-3.5" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3.5" }), t("Copy")]
+		})]
+	});
+}
 //#endregion
 export { Operation };

package/dist/ui/operation/request-tabs.d.ts

@@ -1,10 +1,15 @@
-import { MethodInformation, RenderContext } from "../../types.js";
-import { NoReference } from "../../utils/schema/index.js";
+import { ExampleRequestItem } from "../../utils/get-example-requests.js";
+import { HttpMethods, OperationObject, PathItemObject } from "../../types.js";
 import { ReactNode } from "react";
+import { NoReference } from "@fumadocs/api-docs/schema";
+
 //#region src/ui/operation/request-tabs.d.ts
-interface RequestTabsRenderContext extends RenderContext {
+interface RequestTabsRenderOptions {
   route: string;
-  operation: NoReference<MethodInformation>;
+  items: ExampleRequestItem[];
+  method: HttpMethods;
+  pathItem: NoReference<PathItemObject>;
+  operation: NoReference<OperationObject>;
 }
 //#endregion
-export { RequestTabsRenderContext };
+export { RequestTabsRenderOptions };