fumadocs-openapi 10.0.11 → 10.1.0

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

@@ -0,0 +1,18 @@
+import type { MethodInformation, RenderContext } from '../../types.js';
+import { type NoReference } from '../../utils/schema.js';
+import type { ReactNode } from 'react';
+import type { RawRequestData, RequestData } from '../../requests/types.js';
+export interface ExampleRequestItem {
+    id: string;
+    name: string;
+    description?: string;
+    data: RawRequestData;
+    encoded: RequestData;
+}
+export declare function getExampleRequests(path: string, operation: NoReference<MethodInformation>, ctx: RenderContext): ExampleRequestItem[];
+export declare function RequestTabs({ path, operation, ctx, }: {
+    path: string;
+    operation: NoReference<MethodInformation>;
+    ctx: RenderContext;
+}): Promise<string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined>;
+//# sourceMappingURL=request-tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"request-tabs.d.ts","sourceRoot":"","sources":["../../../src/ui/operation/request-tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAChE,OAAO,EAAE,KAAK,WAAW,EAAoB,MAAM,gBAAgB,CAAC;AASpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAWpE,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,cAAc,CAAC;IACrB,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE,WAAW,CAAC,iBAAiB,CAAC,EACzC,GAAG,EAAE,aAAa,GACjB,kBAAkB,EAAE,CA0CtB;AAkFD,wBAAsB,WAAW,CAAC,EAChC,IAAI,EACJ,SAAS,EACT,GAAG,GACJ,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,WAAW,CAAC,iBAAiB,CAAC,CAAC;IAC1C,GAAG,EAAE,aAAa,CAAC;CACpB,kIASA"}

package/dist/ui/operation/request-tabs.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { getPreferredType } from '../../utils/schema.js';
+import { Accordions, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent, } from '../../ui/components/accordion.js';
+import { sample } from 'openapi-sampler';
+import { encodeRequestData } from '../../requests/media/encode.js';
+import { Tabs, TabsContent, TabsList, TabsTrigger, } from 'fumadocs-ui/components/tabs';
+import { resolveRequestData } from '../../utils/url.js';
+import { MethodLabel } from '../components/method-label.js';
+export function getExampleRequests(path, operation, ctx) {
+    const media = operation.requestBody
+        ? getPreferredType(operation.requestBody.content)
+        : null;
+    const bodyOfType = media ? operation.requestBody?.content[media] : null;
+    if (bodyOfType?.examples) {
+        const result = [];
+        for (const [key, value] of Object.entries(bodyOfType.examples)) {
+            const data = getRequestData(path, operation, key, ctx);
+            result.push({
+                id: key,
+                name: value.summary ?? key,
+                description: value.description,
+                data,
+                encoded: encodeRequestData(data, ctx.mediaAdapters, operation.parameters ?? []),
+            });
+        }
+        if (result.length > 0)
+            return result;
+    }
+    const data = getRequestData(path, operation, null, ctx);
+    return [
+        {
+            id: '_default',
+            name: 'Default',
+            description: bodyOfType?.schema?.description,
+            data,
+            encoded: encodeRequestData(data, ctx.mediaAdapters, operation.parameters ?? []),
+        },
+    ];
+}
+function getRequestData(path, method, sampleKey, _ctx) {
+    const result = {
+        path: {},
+        cookie: {},
+        header: {},
+        query: {},
+        method: method.method,
+    };
+    for (const param of method.parameters ?? []) {
+        let schema = param.schema;
+        let value;
+        if (!schema && param.content) {
+            const type = getPreferredType(param.content);
+            const content = type ? param.content[type] : undefined;
+            if (!content || !content.schema)
+                throw new Error(`Cannot find parameter schema for ${param.name} in ${path} ${method.method}`);
+            schema = content.schema;
+            value = content.example ?? param.example;
+        }
+        else {
+            value = param.example;
+        }
+        if (param.required) {
+            value ?? (value = sample(schema));
+        }
+        else if (value === undefined) {
+            continue;
+        }
+        switch (param.in) {
+            case 'cookie':
+                result.cookie[param.name] = value;
+                break;
+            case 'header':
+                result.header[param.name] = value;
+                break;
+            case 'query':
+                result.query[param.name] = value;
+                break;
+            default:
+                result.path[param.name] = value;
+        }
+    }
+    if (method.requestBody) {
+        const body = method.requestBody.content;
+        const type = getPreferredType(body);
+        if (!type)
+            throw new Error(`Cannot find body schema for ${path} ${method.method}: missing media type`);
+        result.bodyMediaType = type;
+        const bodyOfType = body[type];
+        if (bodyOfType.examples && sampleKey) {
+            result.body = bodyOfType.examples[sampleKey].value;
+        }
+        else if (bodyOfType.example) {
+            result.body = bodyOfType.example;
+        }
+        else {
+            result.body = sample((bodyOfType?.schema ?? {}), {
+                skipReadOnly: method.method !== 'GET',
+                skipWriteOnly: method.method === 'GET',
+                skipNonRequired: true,
+            });
+        }
+    }
+    return result;
+}
+export async function RequestTabs({ path, operation, ctx, }) {
+    if (!operation.requestBody)
+        return null;
+    const { renderRequestTabs = renderRequestTabsDefault } = ctx.content ?? {};
+    return renderRequestTabs(getExampleRequests(path, operation, ctx), {
+        ...ctx,
+        route: path,
+        operation,
+    });
+}
+function renderRequestTabsDefault(items, ctx) {
+    function renderItem(item) {
+        const requestData = item.data;
+        const displayNames = {
+            body: (_jsxs(_Fragment, { children: ["Body", _jsx("code", { className: "text-xs text-fd-muted-foreground ms-auto", children: requestData.bodyMediaType })] })),
+            cookie: 'Cookie',
+            header: 'Header',
+            query: 'Query Parameters',
+            path: 'Path Parameters',
+        };
+        return (_jsxs(_Fragment, { children: [item.description && ctx.renderMarkdown(item.description), _jsxs("div", { className: "flex flex-row gap-2 items-center justify-between", children: [_jsx(MethodLabel, { children: requestData.method }), _jsx("code", { children: resolveRequestData(ctx.route, item.encoded) })] }), _jsx(Accordions, { type: "multiple", className: "mt-2", children: Object.entries(displayNames).map(([k, v]) => {
+                        const data = requestData[k];
+                        if (!data || Object.keys(data).length === 0)
+                            return;
+                        return (_jsxs(AccordionItem, { value: k, children: [_jsx(AccordionHeader, { children: _jsx(AccordionTrigger, { children: v }) }), _jsx(AccordionContent, { className: "prose-no-margin", children: ctx.renderCodeBlock('json', JSON.stringify(data, null, 2)) })] }, k));
+                    }) })] }));
+    }
+    let children;
+    if (items.length > 1) {
+        children = (_jsxs(Tabs, { defaultValue: items[0].id, children: [_jsx(TabsList, { children: items.map((item) => (_jsx(TabsTrigger, { value: item.id, children: item.name }, item.id))) }), items.map((item) => (_jsx(TabsContent, { value: item.id, children: renderItem(item) }, item.id)))] }));
+    }
+    else if (items.length === 1) {
+        children = renderItem(items[0]);
+    }
+    else {
+        children = _jsx("p", { className: "text-fd-muted-foreground text-xs", children: "Empty" });
+    }
+    return (_jsxs("div", { className: "p-3 rounded-xl border prose-no-margin bg-fd-card text-fd-card-foreground shadow-md", children: [_jsx("p", { className: "font-semibold border-b pb-2", children: "Example Requests" }), children] }));
+}

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

@@ -0,0 +1,32 @@
+import type { MethodInformation, RenderContext, ResponseObject } from '../../types.js';
+import { type NoReference } from '../../utils/schema.js';
+import type { ReactNode } from 'react';
+export interface ResponseTab {
+    /**
+     * HTTP response code
+     */
+    code: string;
+    response: NoReference<ResponseObject>;
+    /**
+     * media type of response
+     */
+    mediaType: string | null;
+    examples?: ResponseExample[];
+}
+interface ResponseExample {
+    /**
+     * generated/defined example data
+     */
+    sample: unknown;
+    label: string;
+    /**
+     * description (in Markdown)
+     */
+    description?: string;
+}
+export declare function ResponseTabs({ operation, ctx, }: {
+    operation: NoReference<MethodInformation>;
+    ctx: RenderContext;
+}): ReactNode | Promise<ReactNode>;
+export {};
+//# sourceMappingURL=response-tabs.d.ts.map

package/dist/ui/operation/response-tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"response-tabs.d.ts","sourceRoot":"","sources":["../../../src/ui/operation/response-tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAChF,OAAO,EAAE,KAAK,WAAW,EAAoB,MAAM,gBAAgB,CAAC;AAUpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb,QAAQ,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;IACtC;;OAEG;IACH,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzB,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAC;CAC9B;AAED,UAAU,eAAe;IACvB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,GAAG,GACJ,EAAE;IACD,SAAS,EAAE,WAAW,CAAC,iBAAiB,CAAC,CAAC;IAC1C,GAAG,EAAE,aAAa,CAAC;CACpB,kCAwCA"}

package/dist/ui/operation/response-tabs.js

@@ -0,0 +1,59 @@
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { getPreferredType } from '../../utils/schema.js';
+import { Accordions, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent, } from '../../ui/components/accordion.js';
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+import { sample } from 'openapi-sampler';
+export function ResponseTabs({ operation, ctx, }) {
+    if (!operation.responses)
+        return null;
+    const tabs = [];
+    for (const [code, response] of Object.entries(operation.responses)) {
+        const media = response.content ? getPreferredType(response.content) : null;
+        const responseOfType = media ? response.content?.[media] : null;
+        const tab = {
+            code,
+            response,
+            mediaType: media,
+        };
+        if (responseOfType?.examples) {
+            tab.examples ?? (tab.examples = []);
+            for (const [key, sample] of Object.entries(responseOfType.examples)) {
+                const title = sample?.summary ?? `Example ${key}`;
+                tab.examples.push({
+                    label: title,
+                    sample: sample.value,
+                    description: sample?.description,
+                });
+            }
+        }
+        else if (responseOfType?.example || responseOfType?.schema) {
+            tab.examples ?? (tab.examples = []);
+            tab.examples.push({
+                label: 'Example',
+                sample: responseOfType.example ?? sample(responseOfType.schema),
+            });
+        }
+        tabs.push(tab);
+    }
+    const { renderResponseTabs = renderResponseTabsDefault } = ctx.content ?? {};
+    return renderResponseTabs(tabs, ctx);
+}
+function renderResponseTabsDefault(tabs, ctx) {
+    function renderExampleContent(example) {
+        return (_jsxs(_Fragment, { children: [example.description && ctx.renderMarkdown(example.description), ctx.renderCodeBlock('json', JSON.stringify(example.sample, null, 2))] }));
+    }
+    async function renderResponse(tab) {
+        const { examples = [] } = tab;
+        let slot = 'Empty';
+        if (examples.length > 1) {
+            slot = (_jsx(Accordions, { type: "single", className: "pt-2", defaultValue: examples[0].label, children: examples.map((example, i) => (_jsxs(AccordionItem, { value: example.label, children: [_jsx(AccordionHeader, { children: _jsx(AccordionTrigger, { children: example.label }) }), _jsx(AccordionContent, { className: "prose-no-margin", children: renderExampleContent(example) })] }, i))) }));
+        }
+        else if (examples.length === 1) {
+            slot = renderExampleContent(examples[0]);
+        }
+        return _jsx(Tab, { value: tab.code, children: slot });
+    }
+    if (tabs.length === 0)
+        return null;
+    return (_jsx(Tabs, { groupId: "fumadocs_openapi_responses", items: tabs.map((tab) => tab.code), children: tabs.map(renderResponse) }));
+}

package/dist/ui/operation/usage-tabs/client.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import type { CodeUsageGenerator } from './index.js';
+import type { ExampleRequestItem } from '../request-tabs.js';
+import type { RawRequestData, RequestData } from '../../../requests/types.js';
+export type ExampleUpdateListener = (data: RawRequestData, encoded: RequestData) => void;
+export declare function UsageTabsProvider({ route, examples, defaultExampleId, children, }: {
+    route: string;
+    examples: ExampleRequestItem[];
+    defaultExampleId?: string;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useExampleRequests(): {
+    route: string;
+    examples: ExampleRequestItem[];
+    example: string | undefined;
+    setExample: (id: string) => void;
+    setExampleData: (data: RawRequestData, encoded: RequestData) => void;
+    addListener: (listener: ExampleUpdateListener) => void;
+    removeListener: (listener: ExampleUpdateListener) => void;
+};
+export declare function UsageTabsSelector(): import("react/jsx-runtime").JSX.Element | null;
+export declare function UsageTab(sample: CodeUsageGenerator): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=client.d.ts.map

package/dist/ui/operation/usage-tabs/client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../../../src/ui/operation/usage-tabs/client.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAKL,SAAS,EAGV,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,GAAG,CAAC;AAC5C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpE,MAAM,MAAM,qBAAqB,GAAG,CAClC,IAAI,EAAE,cAAc,EACpB,OAAO,EAAE,WAAW,KACjB,IAAI,CAAC;AAaV,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAC/B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB,2CAwDA;AAED,wBAAgB,kBAAkB;WA9EzB,MAAM;cACH,kBAAkB,EAAE;aACrB,MAAM,GAAG,SAAS;gBACf,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI;oBAChB,CAAC,IAAI,EAAE,cAAc,EAAE,OAAO,EAAE,WAAW,KAAK,IAAI;iBAEvD,CAAC,QAAQ,EAAE,qBAAqB,KAAK,IAAI;oBACtC,CAAC,QAAQ,EAAE,qBAAqB,KAAK,IAAI;EAyE1D;AAED,wBAAgB,iBAAiB,mDAkChC;AAED,wBAAgB,QAAQ,CAAC,MAAM,EAAE,kBAAkB,kDAkDlD"}

package/dist/ui/operation/{example-panel → usage-tabs}/client.js

@@ -1,13 +1,57 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useApiContext, useServerSelectContext } from '../../../ui/contexts/api.js';
-import { useOperationContext, } from '../../../ui/contexts/operation.js';
 import { joinURL, withBase, resolveServerUrl, resolveRequestData, } from '../../../utils/url.js';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, } from '../../../ui/components/select.js';
 import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
-import { useState, useEffect, useMemo } from 'react';
-export function APIExampleSelector() {
-    const { example: key, setExample: setKey, examples } = useOperationContext();
+import { useState, useEffect, useMemo, createContext, useRef, use, } from 'react';
+const Context = createContext(null);
+export function UsageTabsProvider({ route, examples, defaultExampleId, children, }) {
+    const [example, setExample] = useState(() => defaultExampleId ?? examples.at(0)?.id);
+    const listeners = useRef([]);
+    return (_jsx(Context, { value: useMemo(() => ({
+            example,
+            route,
+            setExample: (newKey) => {
+                const example = examples.find((example) => example.id === newKey);
+                if (!example)
+                    return;
+                setExample(newKey);
+                for (const listener of listeners.current) {
+                    listener(example.data, example.encoded);
+                }
+            },
+            examples,
+            setExampleData(data, encoded) {
+                for (const item of examples) {
+                    if (item.id === example) {
+                        // persistent changes
+                        item.data = data;
+                        item.encoded = encoded;
+                        break;
+                    }
+                }
+                for (const listener of listeners.current) {
+                    listener(data, encoded);
+                }
+            },
+            removeListener(listener) {
+                listeners.current = listeners.current.filter((item) => item !== listener);
+            },
+            addListener(listener) {
+                // initial call to listeners to ensure their data is the latest
+                // this is necessary to avoid race conditions between `useEffect()`
+                const active = examples.find((item) => item.id === example);
+                listener(active.data, active.encoded);
+                listeners.current.push(listener);
+            },
+        }), [example, route, examples]), children: children }));
+}
+export function useExampleRequests() {
+    return use(Context);
+}
+export function UsageTabsSelector() {
+    const { example: key, setExample: setKey, examples } = useExampleRequests();
     const { APIExampleSelector: Override } = useApiContext().client.operation ?? {};
     if (Override) {
         return _jsx(Override, { items: examples, value: key, onValueChange: setKey });
@@ -20,9 +64,9 @@ export function APIExampleSelector() {
     const selected = examples.find((item) => item.id === key);
     return (_jsxs(Select, { value: key, onValueChange: setKey, children: [_jsx(SelectTrigger, { className: "not-prose mb-2", children: selected && _jsx(SelectValue, { asChild: true, children: renderItem(selected) }) }), _jsx(SelectContent, { children: examples.map((item) => (_jsx(SelectItem, { value: item.id, children: renderItem(item) }, item.id))) })] }));
 }
-export function APIExampleUsageTab(sample) {
+export function UsageTab(sample) {
     const { shikiOptions, mediaAdapters } = useApiContext();
-    const { examples, example: selectedExampleId, route, addListener, removeListener, } = useOperationContext();
+    const { examples, example: selectedExampleId, route, addListener, removeListener, } = useExampleRequests();
     const { server } = useServerSelectContext();
     const [data, setData] = useState(() => examples.find((example) => example.id === selectedExampleId)?.encoded);
     useEffect(() => {

package/dist/ui/operation/usage-tabs/index.d.ts

@@ -0,0 +1,26 @@
+import type { MethodInformation, RenderContext } from '../../../types.js';
+import type { SampleGenerator } from '../../../requests/types.js';
+/**
+ * Generate code example for given programming language
+ */
+export interface CodeUsageGenerator<T = unknown> {
+    id: string;
+    lang: string;
+    label?: string;
+    /**
+     * either:
+     * - code
+     * - a function imported from a file with "use client" directive
+     * - false (disabled)
+     */
+    source?: string | SampleGenerator<T> | false;
+    /**
+     * Pass extra context to client-side source generator
+     */
+    serverContext?: T;
+}
+export declare function UsageTabs({ method, ctx, }: {
+    method: MethodInformation;
+    ctx: RenderContext;
+}): 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)>;
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/operation/usage-tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/operation/usage-tabs/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAChE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAWxD;;GAEG;AACH,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,OAAO;IAC7C,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;IAE7C;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,CAAC;CACnB;AAED,wBAAsB,SAAS,CAAC,EAC9B,MAAM,EACN,GAAG,GACJ,EAAE;IACD,MAAM,EAAE,iBAAiB,CAAC;IAC1B,GAAG,EAAE,aAAa,CAAC;CACpB,wWAmEA"}

package/dist/ui/operation/usage-tabs/index.js

@@ -0,0 +1,52 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { defaultSamples } from '../../../requests/generators/index.js';
+import { CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger, } from 'fumadocs-ui/components/codeblock';
+import { UsageTabsSelectorLazy, UsageTabLazy } from './lazy.js';
+import { ResponseTabs } from '../response-tabs.js';
+export async function UsageTabs({ method, ctx, }) {
+    let { renderAPIExampleUsageTabs, renderAPIExampleLayout } = ctx.content ?? {};
+    renderAPIExampleLayout ?? (renderAPIExampleLayout = (slots) => {
+        return (_jsxs("div", { className: "prose-no-margin", children: [slots.selector, slots.usageTabs, slots.responseTabs] }));
+    });
+    renderAPIExampleUsageTabs ?? (renderAPIExampleUsageTabs = (generators) => {
+        if (generators.length === 0)
+            return null;
+        return (_jsxs(CodeBlockTabs, { groupId: "fumadocs_openapi_requests", defaultValue: generators[0].id, children: [_jsx(CodeBlockTabsList, { children: generators.map((item) => (_jsx(CodeBlockTabsTrigger, { value: item.id, children: item.label ?? item.lang }, item.id))) }), generators.map((item) => (_jsx(CodeBlockTab, { value: item.id, children: _jsx(UsageTabLazy, { ...item }) }, item.id)))] }));
+    });
+    let generators = [...defaultSamples];
+    if (ctx.generateCodeSamples) {
+        generators.push(...(await ctx.generateCodeSamples(method)));
+    }
+    if (method['x-codeSamples']) {
+        for (const sample of method['x-codeSamples']) {
+            generators.push('id' in sample && typeof sample.id === 'string'
+                ? sample
+                : {
+                    id: sample.lang,
+                    ...sample,
+                });
+        }
+    }
+    generators = dedupe(generators);
+    return renderAPIExampleLayout({
+        selector: method['x-exclusiveCodeSample'] ? null : (_jsx(UsageTabsSelectorLazy, {})),
+        usageTabs: await renderAPIExampleUsageTabs(generators, ctx),
+        responseTabs: _jsx(ResponseTabs, { operation: method, ctx: ctx }),
+    }, ctx);
+}
+/**
+ * Remove duplicated ids
+ */
+function dedupe(samples) {
+    const set = new Set();
+    const out = [];
+    for (let i = samples.length - 1; i >= 0; i--) {
+        const item = samples[i];
+        if (set.has(item.id))
+            continue;
+        set.add(item.id);
+        if (item.source !== false)
+            out.unshift(item);
+    }
+    return out;
+}

package/dist/ui/operation/usage-tabs/lazy.d.ts

@@ -0,0 +1,4 @@
+export declare const UsageTabsSelectorLazy: typeof import("./client.js").UsageTabsSelector;
+export declare const UsageTabLazy: typeof import("./client.js").UsageTab;
+export declare const UsageTabsProviderLazy: typeof import("./client.js").UsageTabsProvider;
+//# sourceMappingURL=lazy.d.ts.map

package/dist/ui/operation/usage-tabs/lazy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazy.d.ts","sourceRoot":"","sources":["../../../../src/ui/operation/usage-tabs/lazy.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,qBAAqB,6CAEjC,CAAC;AAEF,eAAO,MAAM,YAAY,oCAExB,CAAC;AAEF,eAAO,MAAM,qBAAqB,6CAEjC,CAAC"}

package/dist/ui/operation/usage-tabs/lazy.js

@@ -0,0 +1,5 @@
+'use client';
+import { wrapLazy } from '../../../utils/lazy.js';
+export const UsageTabsSelectorLazy = wrapLazy(() => import('./client.js').then((mod) => ({ default: mod.UsageTabsSelector })));
+export const UsageTabLazy = wrapLazy(() => import('./client.js').then((mod) => ({ default: mod.UsageTab })));
+export const UsageTabsProviderLazy = wrapLazy(() => import('./client.js').then((mod) => ({ default: mod.UsageTabsProvider })));

package/dist/ui/schema/client.d.ts

@@ -3,9 +3,7 @@ export interface SchemaUIProps {
     name: string;
     required?: boolean;
     as?: 'property' | 'body';
-    readOnly?: boolean;
-    writeOnly?: boolean;
     generated: SchemaUIGeneratedData;
 }
-export declare function SchemaUI({ name, required, as, generated, readOnly, writeOnly, }: SchemaUIProps): import("react/jsx-runtime").JSX.Element;
+export declare function SchemaUI({ name, required, as, generated, }: SchemaUIProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=client.d.ts.map

package/dist/ui/schema/client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../../src/ui/schema/client.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAc,qBAAqB,EAAE,MAAM,aAAa,CAAC;AA0DrE,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAEzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,qBAAqB,CAAC;CAClC;AAED,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,QAAgB,EAChB,EAAe,EACf,SAAS,EACT,QAAQ,EACR,SAAS,GACV,EAAE,aAAa,2CA2Bf"}
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../../src/ui/schema/client.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAc,qBAAqB,EAAE,MAAM,aAAa,CAAC;AAuDrE,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAEzB,SAAS,EAAE,qBAAqB,CAAC;CAClC;AAED,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,QAAgB,EAChB,EAAe,EACf,SAAS,GACV,EAAE,aAAa,2CAoBf"}

package/dist/ui/schema/client.js

@@ -26,23 +26,17 @@ function useData() {
 function useProperty() {
     return use(PropertyContext);
 }
-export function SchemaUI({ name, required = false, as = 'property', generated, readOnly, writeOnly, }) {
+export function SchemaUI({ name, required = false, as = 'property', generated, }) {
     const schema = generated.refs[generated.$root];
-    const context = useMemo(() => ({
-        ...generated,
-        readOnly,
-        writeOnly,
-    }), [generated, readOnly, writeOnly]);
+    const context = useMemo(() => generated, [generated]);
     const isProperty = as === 'property' || !isExpandable(schema);
     return (_jsx(DataContext, { value: context, children: isProperty ? (_jsx(SchemaUIProperty, { name: name, "$type": generated.$root, overrides: {
                 required,
             } })) : (_jsx(SchemaUIContent, { "$type": generated.$root })) }));
 }
 function SchemaUIContent({ $type }) {
-    const { refs, readOnly, writeOnly } = useData();
+    const { refs } = useData();
     const schema = refs[$type];
-    if ((schema.readOnly && !readOnly) || (schema.writeOnly && !writeOnly))
-        return;
     let child = null;
     if (schema.type === 'or' && schema.items.length > 0) {
         child = (_jsxs(_Fragment, { children: [child, _jsxs(Tabs, { defaultValue: schema.items[0].$type, children: [_jsx(TabsList, { children: schema.items.map((item) => (_jsx(TabsTrigger, { value: item.$type, children: item.name }, item.$type))) }), schema.items.map((item) => (_jsx(TabsContent, { value: item.$type, forceMount: undefined, className: "py-0", children: _jsx(SchemaUIContent, { ...item }) }, item.$type)))] })] }));
@@ -51,16 +45,14 @@ function SchemaUIContent({ $type }) {
         child = (_jsxs(_Fragment, { children: [child, schema.props.map((prop) => (_jsx(SchemaUIProperty, { name: prop.name, "$type": prop.$type, overrides: { required: prop.required } }, prop.name)))] }));
     }
     if (schema.type === 'array') {
-        child = (_jsxs(_Fragment, { children: [child, _jsx(ObjectCollapsible, { name: "Array item", children: _jsx(SchemaUIContent, { "$type": schema.item.$type }) })] }));
+        child = (_jsxs(_Fragment, { children: [child, _jsxs(Collapsible, { className: "my-2", children: [_jsxs(CollapsibleTrigger, { className: cn(buttonVariants({ color: 'secondary', size: 'sm' }), 'group px-3 py-2 data-[state=open]:rounded-b-none'), children: ["Array Item", _jsx(ChevronDown, { className: "size-4 text-fd-muted-foreground group-data-[state=open]:rotate-180" })] }), _jsx(CollapsibleContent, { className: "-mt-px bg-fd-card px-3 rounded-lg rounded-tl-none border shadow-sm", children: _jsx(SchemaUIContent, { "$type": schema.item.$type }) })] })] }));
     }
     return child;
 }
 function SchemaUIProperty({ name, $type, overrides, }) {
     const { renderRef } = useProperty();
-    const { refs, readOnly, writeOnly } = useData();
+    const { refs } = useData();
     const schema = refs[$type];
-    if ((schema.readOnly && !readOnly) || (schema.writeOnly && !writeOnly))
-        return;
     let type = schema.typeName;
     if (schema.type === 'or' && schema.items.length > 0) {
         type = (_jsx("span", { className: cn(typeVariants(), 'flex flex-row gap-2 items-center'), children: schema.items.map((item, i) => (_jsxs(Fragment, { children: [i > 0 && _jsx("span", { children: "|" }), renderRef({
@@ -69,6 +61,13 @@ function SchemaUIProperty({ name, $type, overrides, }) {
                         $ref: item.$type,
                     })] }, item.$type))) }));
     }
+    if (schema.type === 'and' && schema.items.length > 0) {
+        type = (_jsx("span", { className: cn(typeVariants(), 'flex flex-row gap-2 items-center'), children: schema.items.map((item, i) => (_jsxs(Fragment, { children: [i > 0 && _jsx("span", { children: "&" }), renderRef({
+                        pathName: name,
+                        text: item.name,
+                        $ref: item.$type,
+                    })] }, item.$type))) }));
+    }
     if (schema.type === 'object' && schema.props.length > 0) {
         type = renderRef({
             text: schema.aliasName,
@@ -136,13 +135,10 @@ function LinkRef({ $ref, pathName, onInsert, text, }) {
             onInsert(pathName, $ref);
         }, children: text }));
 }
-function ObjectCollapsible(props) {
-    return (_jsxs(Collapsible, { className: "my-2", ...props, children: [_jsxs(CollapsibleTrigger, { className: cn(buttonVariants({ color: 'secondary', size: 'sm' }), 'group px-3 py-2 data-[state=open]:rounded-b-none'), children: [props.name, _jsx(ChevronDown, { className: "size-4 text-fd-muted-foreground group-data-[state=open]:rotate-180" })] }), _jsx(CollapsibleContent, { className: "-mt-px *:bg-fd-card", children: props.children })] }));
-}
 function Property({ name, type, required, deprecated, nested = false, ...props }) {
     return (_jsxs("div", { className: cn('text-sm border-t', nested
             ? 'p-3 border-x bg-fd-card last:rounded-b-xl first:rounded-tr-xl last:border-b'
-            : 'py-4 first:border-t-0', props.className), children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3 not-prose", children: [_jsxs("span", { className: "font-medium font-mono text-fd-primary", children: [name, required === false && (_jsx("span", { className: "text-fd-muted-foreground", children: "?" }))] }), typeof type === 'string' ? (_jsx("span", { className: "text-sm font-mono text-fd-muted-foreground", children: type })) : (type), deprecated && (_jsx(Badge, { color: "yellow", className: "ms-auto text-xs", children: "Deprecated" }))] }), _jsx("div", { className: "prose-no-margin pt-2.5 empty:hidden", children: props.children })] }));
+            : 'py-4 first:border-t-0', props.className), children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3 not-prose", children: [_jsxs("span", { className: "font-medium font-mono text-fd-primary", children: [name, required ? (_jsx("span", { className: "text-red-400", children: "*" })) : (_jsx("span", { className: "text-fd-muted-foreground", children: "?" }))] }), typeof type === 'string' ? (_jsx("span", { className: "text-sm font-mono text-fd-muted-foreground", children: type })) : (type), deprecated && (_jsx(Badge, { color: "yellow", className: "ms-auto text-xs", children: "Deprecated" }))] }), _jsx("div", { className: "prose-no-margin pt-2.5 empty:hidden", children: props.children })] }));
 }
 function isExpandable(schema) {
     return schema.type !== 'primitive';

package/dist/ui/schema/index.d.ts

@@ -8,8 +8,6 @@ export interface FieldBase {
     typeName: string;
     aliasName: string;
     deprecated?: boolean;
-    writeOnly?: boolean;
-    readOnly?: boolean;
 }
 export type SchemaData = FieldBase & ({
     type: 'primitive';
@@ -31,15 +29,31 @@ export type SchemaData = FieldBase & ({
         name: string;
         $type: string;
     }[];
+} | {
+    type: 'and';
+    items: {
+        name: string;
+        $type: string;
+    }[];
 });
 export interface SchemaUIOptions {
     root: ResolvedSchema;
-    ctx: RenderContext;
+    client: Omit<SchemaUIProps, 'generated'>;
+    /**
+     * include read only props
+     */
+    readOnly?: boolean;
+    /**
+     * include write only props
+     */
+    writeOnly?: boolean;
 }
 export interface SchemaUIGeneratedData {
     $root: string;
     refs: Record<string, SchemaData>;
 }
-export declare function Schema({ ctx, root, ...props }: SchemaUIOptions & Omit<SchemaUIProps, 'generated'>): string | number | bigint | boolean | Iterable<ReactNode> | Promise<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
-export declare function generateSchemaUI({ ctx, root, }: SchemaUIOptions): SchemaUIGeneratedData;
+export declare function Schema({ ctx, ...options }: SchemaUIOptions & {
+    ctx: RenderContext;
+}): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<ReactNode> | null | undefined;
+export declare function generateSchemaUI({ root, readOnly, writeOnly }: SchemaUIOptions, ctx: RenderContext): SchemaUIGeneratedData;
 //# sourceMappingURL=index.d.ts.map

package/dist/ui/schema/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/schema/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG7C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGxD,MAAM,WAAW,SAAS;IACxB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,EAAE,CAAC;IAEvB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAElB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,UAAU,GAAG,SAAS,GAChC,CACI;IACE,IAAI,EAAE,WAAW,CAAC;CACnB,GACD;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,OAAO,CAAC;KACnB,EAAE,CAAC;CACL,GACD;IACE,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;CACH,GACD;IACE,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;CACL,CACJ,CAAC;AAEJ,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,cAAc,CAAC;IACrB,GAAG,EAAE,aAAa,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;CAClC;AAED,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,eAAe,GAAG,IAAI,CAAC,aAAa,EAAE,WAAW,CAAC,8IAQpD;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,IAAI,GACL,EAAE,eAAe,GAAG,qBAAqB,CA0PzC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/schema/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG7C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGxD,MAAM,WAAW,SAAS;IACxB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,EAAE,CAAC;IAEvB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAElB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,UAAU,GAAG,SAAS,GAChC,CACI;IACE,IAAI,EAAE,WAAW,CAAC;CACnB,GACD;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,OAAO,CAAC;KACnB,EAAE,CAAC;CACL,GACD;IACE,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;CACH,GACD;IACE,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;CACL,GACD;IACE,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;CACL,CACJ,CAAC;AAEJ,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,cAAc,CAAC;IACrB,MAAM,EAAE,IAAI,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;IAEzC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;CAClC;AAED,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,GAAG,OAAO,EACX,EAAE,eAAe,GAAG;IACnB,GAAG,EAAE,aAAa,CAAC;CACpB,8IAWA;AAED,wBAAgB,gBAAgB,CAC9B,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,eAAe,EAC9C,GAAG,EAAE,aAAa,GACjB,qBAAqB,CAuSvB"}