@gitbook/react-openapi 1.5.1 → 1.5.3

package/dist/OpenAPIMediaType.js

@@ -0,0 +1,58 @@
+'use client';
+
+
+import { OpenAPIEmptyExample } from "./OpenAPIExample.js";
+import { StaticSection } from "./StaticSection.js";
+import { OpenAPISelect, OpenAPISelectItem, useSelectState } from "./OpenAPISelect.js";
+
+//#region src/OpenAPIMediaType.tsx
+/**
+* Get the state of the response examples select.
+*/
+function useMediaTypesState(stateKey, initialKey = "default") {
+	return useSelectState(stateKey, initialKey);
+}
+function useMediaTypeExamplesState(stateKey, initialKey = "default") {
+	return useSelectState(stateKey, initialKey);
+}
+function OpenAPIMediaTypeContent(props) {
+	const { stateKey, items, selectIcon, context } = props;
+	const state = useMediaTypesState(stateKey, items[0]?.key);
+	const examples = items.find((item) => item.key === state.key)?.examples ?? [];
+	if (!items.length && !examples.length) return null;
+	return <StaticSection footer={items.length > 1 || examples.length > 1 ? <OpenAPIMediaTypeFooter items={items} examples={examples} selectIcon={selectIcon} stateKey={stateKey} /> : null} className="openapi-response-media-types-examples">
+            <OpenAPIMediaTypeBody context={context} stateKey={stateKey} items={items} examples={examples} />
+        </StaticSection>;
+}
+function OpenAPIMediaTypeFooter(props) {
+	const { items, examples, stateKey, selectIcon } = props;
+	return <>
+            {items.length > 1 && <OpenAPISelect icon={selectIcon} items={items} stateKey={stateKey} placement="bottom start">
+                    {items.map((item) => <OpenAPISelectItem key={item.key} id={item.key} value={item}>
+                            <span>{item.label}</span>
+                        </OpenAPISelectItem>)}
+                </OpenAPISelect>}
+
+            {examples && examples.length > 1 ? <OpenAPISelect icon={selectIcon} items={examples} stateKey={`${stateKey}-examples`} placement="bottom start">
+                    {examples.map((example) => <OpenAPISelectItem key={example.key} id={example.key} value={example}>
+                            <span>{example.label}</span>
+                        </OpenAPISelectItem>)}
+                </OpenAPISelect> : null}
+        </>;
+}
+function OpenAPIMediaTypeBody(props) {
+	const { stateKey, items, examples, context } = props;
+	const state = useMediaTypesState(stateKey, items[0]?.key);
+	const selectedItem = items.find((item) => item.key === state.key) ?? items[0];
+	const exampleState = useMediaTypeExamplesState(`${stateKey}-examples`, selectedItem?.examples?.[0]?.key);
+	if (!selectedItem) return null;
+	if (examples) {
+		const selectedExample = examples.find((example) => example.key === exampleState.key) ?? examples[0];
+		if (!selectedExample) return <OpenAPIEmptyExample context={context} />;
+		return selectedExample.body;
+	}
+	return selectedItem.body;
+}
+
+//#endregion
+export { OpenAPIMediaTypeContent };

package/dist/OpenAPIOperation.d.ts

@@ -0,0 +1,15 @@
+import { OpenAPIContextInput } from "./context.js";
+import { OpenAPIOperationData } from "./types.js";
+import * as react0 from "react";
+
+//#region src/OpenAPIOperation.d.ts
+/**
+ * Display an interactive OpenAPI operation.
+ */
+declare function OpenAPIOperation(props: {
+  className?: string;
+  data: OpenAPIOperationData;
+  context: OpenAPIContextInput;
+}): react0.JSX.Element;
+//#endregion
+export { OpenAPIOperation };

package/dist/OpenAPIOperation.js

@@ -0,0 +1,30 @@
+import { resolveOpenAPIContext } from "./context.js";
+import { OpenAPICodeSample } from "./OpenAPICodeSample.js";
+import { OpenAPIResponseExample } from "./OpenAPIResponseExample.js";
+import { OpenAPIColumnSpec } from "./common/OpenAPIColumnSpec.js";
+import { OpenAPISummary } from "./common/OpenAPISummary.js";
+import clsx from "classnames";
+
+//#region src/OpenAPIOperation.tsx
+/**
+* Display an interactive OpenAPI operation.
+*/
+function OpenAPIOperation(props) {
+	const { className, data, context: contextInput } = props;
+	const context = resolveOpenAPIContext(contextInput);
+	return <div className={clsx("openapi-operation", className)}>
+            <OpenAPISummary data={data} context={context} />
+            <div className="openapi-columns">
+                <OpenAPIColumnSpec data={data} context={context} />
+                <div className="openapi-column-preview">
+                    <div className="openapi-column-preview-body">
+                        <OpenAPICodeSample data={data} context={context} />
+                        <OpenAPIResponseExample data={data} context={context} />
+                    </div>
+                </div>
+            </div>
+        </div>;
+}
+
+//#endregion
+export { OpenAPIOperation };

package/dist/OpenAPIOperationContext.d.ts

@@ -0,0 +1,20 @@
+import * as react1 from "react";
+
+//#region src/OpenAPIOperationContext.d.ts
+interface OpenAPIOperationPointer {
+  path: string;
+  method: string;
+}
+interface OpenAPIOperationContextValue {
+  onOpenClient: (pointer: OpenAPIOperationPointer) => void;
+}
+/**
+ * Provider for the OpenAPIOperationContext.
+ */
+declare function OpenAPIOperationContextProvider(props: React.PropsWithChildren<Partial<OpenAPIOperationContextValue>>): react1.JSX.Element;
+/**
+ * Hook to access the OpenAPIOperationContext.
+ */
+declare function useOpenAPIOperationContext(): OpenAPIOperationContextValue;
+//#endregion
+export { OpenAPIOperationContextProvider, useOpenAPIOperationContext };

package/dist/OpenAPIOperationContext.js

@@ -0,0 +1,30 @@
+'use client';
+
+
+import { createContext, useContext, useMemo } from "react";
+import { useEventCallback } from "usehooks-ts";
+
+//#region src/OpenAPIOperationContext.tsx
+const OpenAPIOperationContext = createContext({ onOpenClient: () => {} });
+/**
+* Provider for the OpenAPIOperationContext.
+*/
+function OpenAPIOperationContextProvider(props) {
+	const { children } = props;
+	const onOpenClient = useEventCallback((pointer) => {
+		props.onOpenClient?.(pointer);
+	});
+	const value = useMemo(() => ({ onOpenClient }), [onOpenClient]);
+	return <OpenAPIOperationContext.Provider value={value}>
+            {children}
+        </OpenAPIOperationContext.Provider>;
+}
+/**
+* Hook to access the OpenAPIOperationContext.
+*/
+function useOpenAPIOperationContext() {
+	return useContext(OpenAPIOperationContext);
+}
+
+//#endregion
+export { OpenAPIOperationContextProvider, useOpenAPIOperationContext };

package/dist/OpenAPIPath.js

@@ -0,0 +1,25 @@
+import { getOpenAPIClientContext } from "./context.js";
+import { OpenAPIPathItem } from "./OpenAPIPathItem.js";
+import { formatPath } from "./formatPath.js";
+import { getDefaultServerURL } from "./util/server.js";
+import { OpenAPIPathMultipleServers } from "./OpenAPIPathMultipleServers.js";
+
+//#region src/OpenAPIPath.tsx
+/**
+* Display the path of an operation.
+*/
+function OpenAPIPath(props) {
+	const { data, withServer = true, context } = props;
+	const { path } = data;
+	const clientContext = getOpenAPIClientContext(context);
+	if (withServer && data.servers.length > 1) return <OpenAPIPathMultipleServers {...props} context={clientContext} />;
+	const formattedPath = formatPath(path);
+	const defaultServer = getDefaultServerURL(data.servers);
+	return <OpenAPIPathItem {...props} value={`${defaultServer}${path}`} context={clientContext}>
+            {withServer ? <span className="openapi-path-server">{defaultServer}</span> : null}
+            {formattedPath}
+        </OpenAPIPathItem>;
+}
+
+//#endregion
+export { OpenAPIPath };

package/dist/OpenAPIPathItem.js

@@ -0,0 +1,22 @@
+import { OpenAPICopyButton } from "./OpenAPICopyButton.js";
+
+//#region src/OpenAPIPathItem.tsx
+function OpenAPIPathItem(props) {
+	const { value, canCopy = true, context, children, data, copyType = "children" } = props;
+	const { operation, method } = data;
+	const title = <span className="openapi-path-title">{children}</span>;
+	return <div className="openapi-path">
+            <div className={`openapi-method openapi-method-${method}`}>{method}</div>
+            {canCopy && value ? copyType === "children" ? <OpenAPICopyButton value={value} data-deprecated={operation.deprecated} isDisabled={!canCopy} context={context} className="openapi-path-copy-button">
+                        {title}
+                    </OpenAPICopyButton> : <>
+                        {title}
+                        <OpenAPICopyButton value={value} data-deprecated={operation.deprecated} isDisabled={!canCopy} context={context} className="openapi-path-copy-button openapi-path-copy-button-icon">
+                            {context.icons.copy}
+                        </OpenAPICopyButton>
+                    </> : title}
+        </div>;
+}
+
+//#endregion
+export { OpenAPIPathItem };

package/dist/OpenAPIPathMultipleServers.js

@@ -0,0 +1,43 @@
+'use client';
+
+
+import { OpenAPITooltip } from "./OpenAPITooltip.js";
+import { createStateKey } from "./utils.js";
+import { OpenAPISelect, OpenAPISelectItem, useSelectState } from "./OpenAPISelect.js";
+import { OpenAPIPathItem } from "./OpenAPIPathItem.js";
+import { formatPath } from "./formatPath.js";
+import { getDefaultServerURL } from "./util/server.js";
+import { Text } from "react-aria-components";
+
+//#region src/OpenAPIPathMultipleServers.tsx
+const serversStateKey = createStateKey("servers");
+/**
+* Display the path of an operation.
+*/
+function OpenAPIPathMultipleServers(props) {
+	const { data, withServer = true, context } = props;
+	const { path, servers } = data;
+	const defaultServer = getDefaultServerURL(servers);
+	const { key, setKey } = useSelectState(serversStateKey, defaultServer);
+	const formattedPath = formatPath(path);
+	const items = servers.filter((server) => !!server.url).map((server) => ({
+		key: server.url,
+		label: server.url,
+		description: server.description
+	}));
+	return <OpenAPIPathItem copyType="button" {...props} value={`${withServer ? key : ""}${path}`} context={context}>
+            {withServer ? <OpenAPITooltip>
+                    <OpenAPISelect className="openapi-select openapi-select-unstyled" items={items} stateKey={serversStateKey} placement="bottom start" icon={context.icons.chevronDown} defaultValue={defaultServer} onChange={setKey}>
+                        {items.map((item) => <OpenAPISelectItem textValue={item.label} key={item.key} id={item.key} value={item} className="openapi-select-item-column">
+                                <Text slot="label">{item.label}</Text>
+                                {item.description ? <Text slot="description">{item.description}</Text> : null}
+                            </OpenAPISelectItem>)}
+                    </OpenAPISelect>
+                    <OpenAPITooltip.Content>Click to select a server</OpenAPITooltip.Content>
+                </OpenAPITooltip> : null}
+            {formattedPath}
+        </OpenAPIPathItem>;
+}
+
+//#endregion
+export { OpenAPIPathMultipleServers };

package/dist/OpenAPIPrefillContextProvider.d.ts

@@ -0,0 +1,26 @@
+import * as React$1 from "react";
+
+//#region src/OpenAPIPrefillContextProvider.d.ts
+
+/**
+ * Prefill data that can be used to dynamically inject info into OpenAPI operation blocks.
+ *
+ * This is typically dynamic input context, such as visitor data or environment info.
+ */
+type PrefillInputContextData = Record<string, unknown>;
+/**
+ * Context value is function that returns prefill data.
+ */
+type PrefillContextValue = () => PrefillInputContextData | null;
+/**
+ * Provide context to help prefill dynamic info like visitor data in OpenAPI blocks.
+ */
+declare function OpenAPIPrefillContextProvider(props: React$1.PropsWithChildren<{
+  getPrefillInputContextData: () => PrefillInputContextData | null;
+}>): React$1.JSX.Element;
+/**
+ * Hook to access the prefill context function.
+ */
+declare function useOpenAPIPrefillContext(): PrefillContextValue;
+//#endregion
+export { OpenAPIPrefillContextProvider, PrefillInputContextData, useOpenAPIPrefillContext };

package/dist/OpenAPIPrefillContextProvider.js

@@ -0,0 +1,25 @@
+'use client';
+
+
+import * as React$1 from "react";
+
+//#region src/OpenAPIPrefillContextProvider.tsx
+const OpenAPIPrefillContext = React$1.createContext(null);
+/**
+* Provide context to help prefill dynamic info like visitor data in OpenAPI blocks.
+*/
+function OpenAPIPrefillContextProvider(props) {
+	const { getPrefillInputContextData, children } = props;
+	return <OpenAPIPrefillContext.Provider value={getPrefillInputContextData}>
+            {children}
+        </OpenAPIPrefillContext.Provider>;
+}
+/**
+* Hook to access the prefill context function.
+*/
+function useOpenAPIPrefillContext() {
+	return React$1.useContext(OpenAPIPrefillContext) ?? (() => null);
+}
+
+//#endregion
+export { OpenAPIPrefillContextProvider, useOpenAPIPrefillContext };

package/dist/OpenAPIRequestBody.js

@@ -0,0 +1,28 @@
+import { t } from "./translate.js";
+import { checkIsReference, createStateKey } from "./utils.js";
+import { OpenAPIRootSchema } from "./OpenAPISchemaServer.js";
+import { InteractiveSection } from "./InteractiveSection.js";
+import { OpenAPIRequestBodyHeaderType } from "./OpenAPIRequestBodyHeaderType.js";
+
+//#region src/OpenAPIRequestBody.tsx
+/**
+* Display an interactive request body.
+*/
+function OpenAPIRequestBody(props) {
+	const { requestBody, context, data } = props;
+	if (checkIsReference(requestBody)) return null;
+	const stateKey = createStateKey("request-body-media-type", context.blockKey);
+	return <InteractiveSection header={<>
+                    <span>{t(context.translation, "name" in data ? "payload" : "body")}</span>
+                    <OpenAPIRequestBodyHeaderType requestBody={requestBody} stateKey={stateKey} />
+                </>} className="openapi-requestbody" stateKey={stateKey} selectIcon={context.icons.chevronDown} tabs={Object.entries(requestBody.content ?? {}).map(([contentType, mediaTypeObject]) => {
+		return {
+			key: contentType,
+			label: contentType,
+			body: <OpenAPIRootSchema schema={mediaTypeObject.schema ?? {}} context={context} key={contentType} />
+		};
+	})} />;
+}
+
+//#endregion
+export { OpenAPIRequestBody };

package/dist/OpenAPIRequestBodyHeaderType.js

@@ -0,0 +1,23 @@
+'use client';
+
+
+import { getSchemaTitle } from "./utils.js";
+import { useSelectState } from "./OpenAPISelect.js";
+
+//#region src/OpenAPIRequestBodyHeaderType.tsx
+/**
+* Display the type of a request body. It only displays the type if the selected content is an array.
+*/
+function OpenAPIRequestBodyHeaderType(props) {
+	const { requestBody, stateKey } = props;
+	const content = requestBody.content ?? {};
+	const state = useSelectState(stateKey, Object.keys(content)[0]);
+	const selectedContentMediaType = Object.entries(content).find(([contentType]) => contentType === state.key)?.[1];
+	if (!selectedContentMediaType || !selectedContentMediaType.schema?.type || selectedContentMediaType.schema.type !== "array") return null;
+	return <span className="openapi-requestbody-header-type">
+            {`${getSchemaTitle(selectedContentMediaType.schema)}`}
+        </span>;
+}
+
+//#endregion
+export { OpenAPIRequestBodyHeaderType };

package/dist/OpenAPIRequiredScopes.js

@@ -0,0 +1,67 @@
+'use client';
+
+
+import { t } from "./translate.js";
+import { OpenAPICopyButton } from "./OpenAPICopyButton.js";
+import { useSelectState } from "./OpenAPISelect.js";
+import { OpenAPIDisclosureGroup } from "./OpenAPIDisclosureGroup.js";
+
+//#region src/OpenAPIRequiredScopes.tsx
+/**
+* Present securities authorization that can be used for this operation.
+*/
+function OpenAPIRequiredScopes(props) {
+	const { securities, stateKey, context } = props;
+	const { key: selectedKey } = useSelectState(stateKey, securities[0]?.key);
+	const selectedSecurity = securities.find((security) => security.key === selectedKey);
+	if (!selectedSecurity) return null;
+	const scopes = selectedSecurity.schemes.flatMap((scheme) => {
+		return scheme.scopes ?? [];
+	});
+	if (!scopes.length) return null;
+	return <OpenAPIDisclosureGroup className="openapi-required-scopes" icon={context.icons.chevronRight} stateKey="required-scopes" defaultExpandedKeys={["required-scopes"]} groups={[{
+		key: "required-scopes",
+		label: <div className="openapi-required-scopes-header">
+                            {context.icons.lock}
+                            <span>{t(context.translation, "required_scopes")}</span>
+                        </div>,
+		tabs: [{
+			key: "scopes",
+			label: "",
+			body: <OpenAPISchemaScopes scopes={scopes} context={context} />
+		}]
+	}]} />;
+}
+function OpenAPISchemaScopes(props) {
+	const { scopes, context, isOAuth2 } = props;
+	return <div className="openapi-securities-scopes openapi-markdown">
+            <div className="openapi-required-scopes-description">
+                {t(context.translation, isOAuth2 ? "available_scopes" : "required_scopes_description")}
+            </div>
+            <ul>
+                {scopes.map((scope) => <OpenAPIScopeItem key={scope[0]} scope={scope} context={context} />)}
+            </ul>
+        </div>;
+}
+/**
+* Display a scope item. Either a key-value pair or a single string.
+*/
+function OpenAPIScopeItem(props) {
+	const { scope, context } = props;
+	return <li>
+            <OpenAPIScopeItemKey name={scope[0]} context={context} />
+            {scope[1] ? <span>: {scope[1]}</span> : null}
+        </li>;
+}
+/**
+* Displays the scope name within a copyable button.
+*/
+function OpenAPIScopeItemKey(props) {
+	const { name, context } = props;
+	return <OpenAPICopyButton value={name} context={context} withTooltip>
+            <code>{name}</code>
+        </OpenAPICopyButton>;
+}
+
+//#endregion
+export { OpenAPIRequiredScopes, OpenAPISchemaScopes };

package/dist/OpenAPIResponse.js

@@ -0,0 +1,39 @@
+import { tString } from "./translate.js";
+import { OpenAPIDisclosure } from "./OpenAPIDisclosure.js";
+import { parameterToProperty, resolveDescription } from "./utils.js";
+import { OpenAPISchemaPresentation } from "./OpenAPISchema.js";
+import { OpenAPISchemaProperties } from "./OpenAPISchemaServer.js";
+
+//#region src/OpenAPIResponse.tsx
+/**
+* Display an interactive response body.
+*/
+function OpenAPIResponse(props) {
+	const { response, context, mediaType } = props;
+	const headers = Object.entries(response.headers ?? {}).map(([name, header]) => [name, header ?? {}]);
+	const content = Object.entries(mediaType?.schema ?? {});
+	const description = resolveDescription(response);
+	if (content.length === 0 && !description && headers.length === 0) return null;
+	return <div className="openapi-response-body">
+            {headers.length > 0 ? <OpenAPIDisclosure header={<OpenAPISchemaPresentation context={context} property={{
+		propertyName: tString(context.translation, "headers"),
+		schema: { type: "object" },
+		required: null
+	}} />} icon={context.icons.plus} label={(isExpanded) => tString(context.translation, isExpanded ? "hide" : "show", tString(context.translation, headers.length === 1 ? "header" : "headers"))}>
+                    <OpenAPISchemaProperties properties={headers.map(([name, header]) => parameterToProperty({
+		name,
+		...header
+	}))} context={context} />
+                </OpenAPIDisclosure> : null}
+            {mediaType?.schema && <div className="openapi-responsebody">
+                    <OpenAPISchemaProperties id={`response-${context.blockKey}`} properties={[{
+		schema: mediaType.schema,
+		propertyName: tString(context.translation, "response"),
+		required: null
+	}]} context={context} />
+                </div>}
+        </div>;
+}
+
+//#endregion
+export { OpenAPIResponse };

package/dist/OpenAPIResponseExample.js

@@ -0,0 +1,75 @@
+import { OpenAPIEmptyExample, OpenAPIExample } from "./OpenAPIExample.js";
+import { Markdown } from "./Markdown.js";
+import { checkIsReference, createStateKey, getStatusCodeDefaultLabel, resolveDescription } from "./utils.js";
+import { getOpenAPIClientContext } from "./context.js";
+import { getExampleFromReference, getExamples } from "./util/example.js";
+import { OpenAPIMediaTypeContent } from "./OpenAPIMediaType.js";
+import { OpenAPIResponseExampleContent } from "./OpenAPIResponseExampleContent.js";
+
+//#region src/OpenAPIResponseExample.tsx
+/**
+* Display an example of the response content.
+*/
+function OpenAPIResponseExample(props) {
+	const { data, context } = props;
+	if (!data.operation.responses) return null;
+	const responses = Object.entries(data.operation.responses);
+	responses.sort(([a], [b]) => {
+		if (a === "default") return 1;
+		if (b === "default") return -1;
+		if (a === "200") return -1;
+		if (b === "200") return 1;
+		return Number(a) - Number(b);
+	});
+	const tabs = responses.filter(([_, responseObject]) => responseObject && typeof responseObject === "object" && !responseObject["x-hideSample"]).map(([key, responseObject]) => {
+		const description = resolveDescription(responseObject);
+		const label = description ? <Markdown key={`response-description-${key}`} source={description} /> : getStatusCodeDefaultLabel(key, context);
+		if (checkIsReference(responseObject)) return {
+			key,
+			label,
+			statusCode: key,
+			body: <OpenAPIExample example={getExampleFromReference(responseObject, context)} context={context} syntax="json" />
+		};
+		if (!responseObject.content || Object.keys(responseObject.content).length === 0) return {
+			key,
+			label,
+			statusCode: key,
+			body: <OpenAPIEmptyExample context={context} />
+		};
+		return {
+			key,
+			label,
+			statusCode: key,
+			body: <OpenAPIResponse context={context} content={responseObject.content} />
+		};
+	});
+	if (tabs.length === 0) return null;
+	return <OpenAPIResponseExampleContent selectIcon={context.icons.chevronDown} blockKey={context.blockKey} items={tabs} />;
+}
+function OpenAPIResponse(props) {
+	const { context, content } = props;
+	const entries = Object.entries(content);
+	if (!entries[0]) throw new Error("One media type is required");
+	const tabs = entries.map((entry) => {
+		const [mediaType, mediaTypeObject] = entry;
+		if (!mediaTypeObject) return {
+			key: mediaType,
+			label: mediaType,
+			body: <OpenAPIEmptyExample context={context} />
+		};
+		return {
+			key: mediaType,
+			label: mediaType,
+			body: <></>,
+			examples: getExamples({
+				mediaTypeObject,
+				mediaType,
+				context
+			})
+		};
+	});
+	return <OpenAPIMediaTypeContent selectIcon={context.icons.chevronDown} stateKey={createStateKey("response-media-types", context.blockKey)} items={tabs} context={getOpenAPIClientContext(context)} />;
+}
+
+//#endregion
+export { OpenAPIResponseExample };

package/dist/OpenAPIResponseExampleContent.js

@@ -0,0 +1,61 @@
+'use client';
+
+
+import { createStateKey, getStatusCodeClassName } from "./utils.js";
+import { StaticSection } from "./StaticSection.js";
+import { OpenAPISelect, OpenAPISelectItem, useSelectState } from "./OpenAPISelect.js";
+import clsx from "classnames";
+
+//#region src/OpenAPIResponseExampleContent.tsx
+/**
+* Get the state of the response examples select.
+*/
+function useResponseExamplesState(blockKey, initialKey = "default") {
+	return useSelectState(getResponseExampleStateKey(blockKey), initialKey);
+}
+function OpenAPIResponseExampleContent(props) {
+	const { blockKey, items, selectIcon } = props;
+	return <StaticSection header={<OpenAPIResponseExampleHeader selectIcon={selectIcon} blockKey={blockKey} items={items} />} className="openapi-response-examples">
+            <OpenAPIResponseExampleBody blockKey={blockKey} items={items} />
+        </StaticSection>;
+}
+function OpenAPIResponseExampleHeader(props) {
+	const { items, blockKey, selectIcon } = props;
+	if (items.length === 1) {
+		const item = items[0];
+		if (!item) return null;
+		return <span className="openapi-response-examples-statuscode-title">
+                <OpenAPIResponseExampleItem item={item} />
+            </span>;
+	}
+	return <OpenAPISelect items={items} icon={selectIcon} stateKey={getResponseExampleStateKey(blockKey)} placement="bottom start">
+            {items.map((item) => <OpenAPISelectItem key={item.key} id={item.key} value={item}>
+                    <OpenAPIResponseExampleItem item={item} />
+                </OpenAPISelectItem>)}
+        </OpenAPISelect>;
+}
+function OpenAPIResponseExampleItem(props) {
+	const { item } = props;
+	return <>
+            <span className={clsx("openapi-statuscode", `openapi-statuscode-${getStatusCodeClassName(item.statusCode)}`, "openapi-response-examples-statuscode")}>
+                {item.statusCode}
+            </span>
+            <span className="openapi-response-examples-statuscode-label">{item.label}</span>
+        </>;
+}
+function OpenAPIResponseExampleBody(props) {
+	const { blockKey, items } = props;
+	const state = useResponseExamplesState(blockKey, items[0]?.key);
+	const selectedItem = items.find((item) => item.key === state.key) ?? items[0];
+	if (!selectedItem) return null;
+	return <div className="openapi-response-examples-panel">{selectedItem.body}</div>;
+}
+/**
+* Return the state key for the response examples.
+*/
+function getResponseExampleStateKey(blockKey) {
+	return createStateKey("openapi-responses", blockKey);
+}
+
+//#endregion
+export { OpenAPIResponseExampleContent, useResponseExamplesState };

package/dist/OpenAPIResponses.js

@@ -0,0 +1,61 @@
+'use client';
+
+
+import { t } from "./translate.js";
+import { Markdown } from "./Markdown.js";
+import { createStateKey, getStatusCodeClassName, getStatusCodeDefaultLabel, resolveDescription } from "./utils.js";
+import { StaticSection } from "./StaticSection.js";
+import { useResponseExamplesState } from "./OpenAPIResponseExampleContent.js";
+import { OpenAPIDisclosureGroup } from "./OpenAPIDisclosureGroup.js";
+import { OpenAPIResponse } from "./OpenAPIResponse.js";
+import clsx from "classnames";
+
+//#region src/OpenAPIResponses.tsx
+/**
+* Display an interactive response body.
+*/
+function OpenAPIResponses(props) {
+	const { responses, context } = props;
+	const groups = Object.entries(responses).filter(([_, response]) => response && typeof response === "object").map(([statusCode, response]) => {
+		const tabs = (() => {
+			if ((!response.content || !Object.keys(response.content).length) && response.headers && Object.keys(response.headers).length) return [{
+				key: "default",
+				label: "",
+				body: <OpenAPIResponse response={response} mediaType={{}} context={context} />
+			}];
+			if (!response.content) return [{
+				key: "default",
+				label: "",
+				body: <pre className="openapi-example-empty">
+                                    <p>{t(context.translation, "no_content")}</p>
+                                </pre>
+			}];
+			return Object.entries(response.content ?? {}).map(([contentType, mediaType]) => ({
+				key: contentType,
+				label: contentType,
+				body: <OpenAPIResponse response={response} mediaType={mediaType} context={context} />
+			}));
+		})();
+		const description = resolveDescription(response);
+		return {
+			key: statusCode,
+			label: <div className="openapi-response-tab-content">
+                        <span className={clsx("openapi-statuscode", `openapi-statuscode-${getStatusCodeClassName(statusCode)}`)}>
+                            {statusCode}
+                        </span>
+                        {description ? <Markdown source={description} className="openapi-response-description" /> : getStatusCodeDefaultLabel(statusCode, context)}
+                    </div>,
+			tabs
+		};
+	});
+	const state = useResponseExamplesState(context.blockKey, groups[0]?.key);
+	return <StaticSection header={t(context.translation, "responses")} className="openapi-responses">
+            <OpenAPIDisclosureGroup icon={context.icons.chevronRight} expandedKeys={state.key ? new Set([state.key]) : /* @__PURE__ */ new Set()} onExpandedChange={(keys) => {
+		const key = keys.values().next().value ?? null;
+		state.setKey(key);
+	}} groups={groups} selectIcon={context.icons.chevronDown} selectStateKey={createStateKey("response-media-types", context.blockKey)} />
+        </StaticSection>;
+}
+
+//#endregion
+export { OpenAPIResponses };