fumadocs-openapi 6.1.0 → 6.2.0

package/dist/playground/auth/oauth-dialog.d.ts

@@ -0,0 +1,10 @@
+import type { OpenAPIV3_1 } from 'openapi-types';
+export interface AuthDialogProps {
+    flow: keyof OpenAPIV3_1.OAuth2SecurityScheme['flows'];
+    scheme: OpenAPIV3_1.OAuth2SecurityScheme;
+    setToken: (token: string) => void;
+    children: React.ReactNode;
+}
+export declare function OauthDialog({ flow, scheme, setToken, children, }: AuthDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare const OauthDialogTrigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=oauth-dialog.d.ts.map

package/dist/playground/auth/oauth-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"oauth-dialog.d.ts","sourceRoot":"","sources":["../../../src/playground/auth/oauth-dialog.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAQjD,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,WAAW,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC;IACtD,MAAM,EAAE,WAAW,CAAC,oBAAoB,CAAC;IAEzC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAaD,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,QAAQ,GACT,EAAE,eAAe,2CAkKjB;AAED,eAAO,MAAM,kBAAkB,mJAAgB,CAAC"}

package/dist/playground/auth/oauth-dialog.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from '../../ui/components/dialog.js';
+import { useForm } from 'react-hook-form';
+import { Input, labelVariants } from '../../ui/components/input.js';
+import { useQuery } from '../../utils/use-query.js';
+import { useEffect, useState } from 'react';
+import { cn } from 'fumadocs-ui/components/api';
+import { buttonVariants } from 'fumadocs-ui/components/ui/button';
+export function OauthDialog({ flow, scheme, setToken, children, }) {
+    const [open, setOpen] = useState(false);
+    const form = useForm({
+        defaultValues: {
+            clientId: '',
+            clientSecret: '',
+        },
+    });
+    const tokenQuery = useQuery(async (code, state) => {
+        const value = scheme.flows.authorizationCode;
+        const res = await fetch(value.tokenUrl, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+            },
+            body: new URLSearchParams({
+                grant_type: 'authorization_code',
+                code,
+                // note: `state` could be invalid, but server will check it
+                redirect_uri: state.redirect_uri,
+                client_id: state.client_id,
+                client_secret: state.client_secret,
+            }).toString(),
+        });
+        if (!res.ok)
+            throw new Error(await res.text());
+        const { access_token } = (await res.json());
+        setToken(access_token);
+        setOpen(false);
+    });
+    useEffect(() => {
+        const params = new URLSearchParams(window.location.search);
+        const code = params.get('code');
+        const state = params.get('state');
+        if (!code || !state || flow !== 'authorizationCode')
+            return;
+        const parsedState = JSON.parse(state);
+        setOpen(true);
+        form.setValue('clientId', parsedState.client_id);
+        form.setValue('clientSecret', parsedState.client_secret);
+        tokenQuery.start(code, parsedState);
+        window.history.replaceState(null, '', window.location.pathname);
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- first page load only
+    }, []);
+    const authorize = useQuery(async (values) => {
+        if (flow === 'authorizationCode') {
+            const value = scheme.flows[flow];
+            const params = new URLSearchParams();
+            params.set('response_type', 'code');
+            params.set('client_id', values.clientId);
+            params.set('redirect_uri', window.location.href);
+            params.set('scope', Object.keys(value.scopes).join('+'));
+            params.set('state', JSON.stringify({
+                client_id: values.clientId,
+                client_secret: values.clientSecret,
+                redirect_uri: window.location.href,
+            }));
+            window.location.replace(`${value.authorizationUrl}?${params.toString()}`);
+        }
+        if (flow === 'clientCredentials') {
+            const value = scheme.flows[flow];
+            await fetch(value.tokenUrl, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded',
+                },
+                body: new URLSearchParams({
+                    grant_type: 'client_credentials',
+                    scope: Object.keys(value.scopes).join('+'),
+                }).toString(),
+            });
+        }
+    });
+    const onSubmit = form.handleSubmit((values) => {
+        return authorize.start(values);
+    });
+    const isLoading = authorize.isLoading || tokenQuery.isLoading;
+    return (_jsxs(Dialog, { open: open, onOpenChange: setOpen, children: [children, _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Authorization" }), _jsx(DialogDescription, { children: "Obtain the access token for API." })] }), _jsxs("form", { className: "flex flex-col gap-6", onSubmit: onSubmit, children: [(flow === 'authorizationCode' || flow === 'clientCredentials') && (_jsxs(_Fragment, { children: [_jsxs("fieldset", { className: "flex flex-col gap-1.5", children: [_jsx("label", { htmlFor: "client_id", className: cn(labelVariants()), children: "Client ID" }), _jsx("p", { className: "text-fd-muted-foreground text-sm", children: "The client ID of your OAuth application." }), _jsx(Input, { id: "client_id", placeholder: "Enter value", type: "text", disabled: isLoading, ...form.register('clientId', { required: true }) })] }), _jsxs("fieldset", { className: "flex flex-col gap-1.5", children: [_jsx("label", { htmlFor: "client_secret", className: cn(labelVariants()), children: "Client Secret" }), _jsx("p", { className: "text-fd-muted-foreground text-sm", children: "The client secret of your OAuth application." }), _jsx(Input, { id: "client_secret", placeholder: "Enter value", type: "password", disabled: isLoading, ...form.register('clientSecret', { required: true }) })] })] })), tokenQuery.error ? (_jsx("p", { className: "text-red-400 font-medium text-sm", children: String(tokenQuery.error) })) : null, _jsx("button", { disabled: isLoading, className: cn(buttonVariants({
+                                    color: 'primary',
+                                })), children: tokenQuery.isLoading ? 'Fetching token...' : 'Submit' })] })] })] }));
+}
+export const OauthDialogTrigger = DialogTrigger;

package/dist/playground/client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../src/playground/client.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,YAAY,EACjB,KAAK,cAAc,EAInB,KAAK,EAAE,EAGP,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EACV,SAAS,EACT,kBAAkB,EAClB,oBAAoB,EACpB,qBAAqB,EACtB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGxD,OAAO,KAAK,EACV,qBAAqB,EACrB,eAAe,EACf,aAAa,EACd,MAAM,oBAAoB,CAAC;AAa5B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAErD,UAAU,UAAU;IAClB,aAAa,EACT,MAAM,GACN;QACE,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;IACN,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,IAAI,EAAE,OAAO,CAAC;CACf;AAED,MAAM,WAAW,WAAW,CAAC,KAAK,SAAS,SAAS,CAAC,UAAU,CAAC,EAAE,IAAI;IACpE,MAAM,EAAE,CAAC,KAAK,EAAE;QACd;;WAEG;QACH,IAAI,EAAE,IAAI,CAAC;QACX,KAAK,EAAE,qBAAqB,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;QAChD,UAAU,EAAE,oBAAoB,CAAC;QACjC,SAAS,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;KAC3C,KAAK,YAAY,CAAC;CACpB;AAED,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,eAAe,CAAC,GAAG;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB,IAAI,CAAC,EAAE,qBAAqB,EAAE,CAAC;IAC/B,KAAK,CAAC,EAAE,qBAAqB,EAAE,CAAC;IAChC,MAAM,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACjC,IAAI,CAAC,EAAE,aAAa,GAAG;QACrB,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,WAAW,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;QACnD,IAAI,CAAC,EAAE,WAAW,CAAC,QAAQ,MAAM,EAAE,EAAE,qBAAqB,CAAC,CAAC;QAC5D,KAAK,CAAC,EAAE,WAAW,CAAC,SAAS,MAAM,EAAE,EAAE,qBAAqB,CAAC,CAAC;QAC9D,MAAM,CAAC,EAAE,WAAW,CAAC,UAAU,MAAM,EAAE,EAAE,qBAAqB,CAAC,CAAC;QAChE,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;KAC3C,CAAC;IAEF,UAAU,CAAC,EAAE,OAAO,CAAC;QACnB,aAAa,EAAE,EAAE,CAAC;YAAE,IAAI,EAAE,WAAW,CAAA;SAAE,CAAC,CAAC;KAC1C,CAAC,CAAC;CACJ,CAAC;AAEF,UAAU,iBAAiB;IACzB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC1C,OAAO,EAAE,SAAS,CAAC,GAAG,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC;CAC/C;AAED,MAAM,MAAM,YAAY,GACpB;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,UAAU,EAAE,MAAM,EAAE,CAAC;CACtB,GACD;IACE,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,aAAa,GAAG,eAAe,CAAC;CACzC,CAAC;AAIN,wBAAgB,gBAAgB,IAAI,iBAAiB,CAIpD;AAcD,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,MAAc,EACd,aAAa,EACb,IAAS,EACT,MAAW,EACX,KAAU,EACV,IAAI,EACJ,MAAW,EACX,OAAO,EACP,QAAQ,EACR,UAAU,EAAE,EAAE,aAAoC,EAAO,EACzD,GAAG,KAAK,EACT,EAAE,WAAW,2CA2Ob"}
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../src/playground/client.tsx"],"names":[],"mappings":"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"}

package/dist/playground/client.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useRef, useEffect, Fragment, createContext, useContext, } from 'react';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 import { cn, buttonVariants } from 'fumadocs-ui/components/api';
@@ -14,6 +14,7 @@ import { useQuery } from '../utils/use-query.js';
 import ServerSelect from '../ui/server-select.js';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from 'fumadocs-ui/components/ui/collapsible';
 import { ChevronDown } from 'lucide-react';
+import { OauthDialog, OauthDialogTrigger, } from '../playground/auth/oauth-dialog.js';
 const SchemaContext = createContext(undefined);
 export function useSchemaContext() {
     const ctx = useContext(SchemaContext);
@@ -48,36 +49,34 @@ export function Client({ route, method = 'GET', authorization, path = [], header
         const fetcher = await import('./fetcher.js').then((mod) => mod.createBrowserFetcher(body, schemas));
         const query = { ...input.query };
         const header = { ...input.header };
-        if (input.authorization && authorization) {
-            if (authorization.type === 'apiKey') {
-                if (authorization.in === 'header') {
-                    header[authorization.name] = input.authorization;
-                }
-                else if (authorization.in === 'query') {
-                    query[authorization.name] = input.authorization;
-                }
-                else {
-                    if ('cookie' in header) {
-                        header.Cookie = header.cookie;
-                        delete header.cookie;
-                    }
-                    header.Cookie = [
-                        header.Cookie,
-                        `${authorization.name}=${input.authorization}`,
-                    ]
-                        .filter((s) => s.length > 0)
-                        .join('; ');
-                }
+        if (authorization?.type === 'apiKey') {
+            if (authorization.in === 'header') {
+                header[authorization.name] = input.authorization;
             }
-            else if (authorization.type === 'http' &&
-                authorization.scheme === 'basic') {
-                if (typeof input.authorization === 'object')
-                    header.Authorization = `Basic ${btoa(`${input.authorization.username}:${input.authorization.password}`)}`;
+            else if (authorization.in === 'query') {
+                query[authorization.name] = input.authorization;
             }
             else {
-                header.Authorization = input.authorization;
+                if ('cookie' in header) {
+                    header.Cookie = header.cookie;
+                    delete header.cookie;
+                }
+                header.Cookie = [
+                    header.Cookie,
+                    `${authorization.name}=${input.authorization}`,
+                ]
+                    .filter((s) => s.length > 0)
+                    .join('; ');
             }
         }
+        else if (authorization?.type === 'http' &&
+            authorization.scheme === 'basic') {
+            if (typeof input.authorization === 'object')
+                header.Authorization = `Basic ${btoa(`${input.authorization.username}:${input.authorization.password}`)}`;
+        }
+        else if (authorization) {
+            header.Authorization = input.authorization;
+        }
         const serverUrl = serverRef.current
             ? getUrl(serverRef.current.url, serverRef.current.variables)
             : window.location.origin;
@@ -126,34 +125,43 @@ export function Client({ route, method = 'GET', authorization, path = [], header
         }
         return (_jsx(FieldSet, { name: info.name, fieldName: fieldName, field: info }, key));
     }
-    return (_jsx(FormProvider, { ...form, children: _jsx(SchemaContext.Provider, { value: useMemo(() => ({ references: schemas, dynamic: dynamicRef }), [schemas]), children: _jsxs("form", { ...props, className: cn('not-prose flex flex-col gap-2 rounded-xl border p-3 shadow-md', props.className), onSubmit: onSubmit, children: [_jsx(FormHeader, { method: method, route: route, isLoading: testQuery.isLoading }), servers.length > 1 ? (_jsx(CollapsiblePanel, { title: "Server URL", children: _jsx(ServerSelect, {}) })) : null, header.length > 0 || authorization ? (_jsxs(CollapsiblePanel, { title: "Headers", children: [authorization?.type === 'http' &&
-                                authorization.scheme === 'basic'
-                                ? renderCustomField('authorization', {
-                                    name: 'Authorization',
-                                    type: 'object',
-                                    isRequired: true,
-                                    properties: {
-                                        username: {
-                                            type: 'string',
-                                            isRequired: true,
-                                            defaultValue: '',
-                                        },
-                                        password: {
-                                            type: 'string',
-                                            isRequired: true,
-                                            defaultValue: '',
-                                        },
-                                    },
-                                }, fields.auth)
-                                : authorization
-                                    ? renderCustomField('authorization', {
-                                        name: 'Authorization',
-                                        type: 'string',
-                                        isRequired: true,
-                                        description: 'The Authorization access token',
-                                        defaultValue: '',
-                                    }, fields.auth)
-                                    : null, header.map((field) => renderCustomField(`header.${field.name}`, field, fields.header, field.name))] })) : null, path.length > 0 ? (_jsx(CollapsiblePanel, { title: "Path", children: path.map((field) => renderCustomField(`path.${field.name}`, field, fields.path, field.name)) })) : null, query.length > 0 ? (_jsx(CollapsiblePanel, { title: "Query", children: query.map((field) => renderCustomField(`query.${field.name}`, field, fields.query, field.name)) })) : null, body ? (_jsx(CollapsiblePanel, { title: "Body", children: body.type === 'object' && !fields.body ? (_jsx(ObjectInput, { field: body, fieldName: "body" })) : (renderCustomField('body', body, fields.body)) })) : null, testQuery.data ? _jsx(ResultDisplay, { data: testQuery.data }) : null] }) }) }));
+    let authField = null;
+    if (authorization) {
+        authField = (_jsxs(_Fragment, { children: [renderCustomField('authorization', authorization?.type === 'http' && authorization.scheme === 'basic'
+                    ? {
+                        name: 'Authorization',
+                        type: 'object',
+                        isRequired: true,
+                        properties: {
+                            username: {
+                                type: 'string',
+                                isRequired: true,
+                                defaultValue: '',
+                            },
+                            password: {
+                                type: 'string',
+                                isRequired: true,
+                                defaultValue: '',
+                            },
+                        },
+                    }
+                    : {
+                        name: 'Authorization',
+                        type: 'string',
+                        isRequired: true,
+                        description: 'The Authorization access token',
+                        defaultValue: '',
+                    }, fields.auth), authorization?.type === 'oauth2' && (_jsx(OauthDialogTrigger, { type: "button", className: cn(buttonVariants({
+                        color: 'secondary',
+                    })), children: "Open" }))] }));
+    }
+    let children = (_jsxs("form", { ...props, className: cn('not-prose flex flex-col gap-2 rounded-xl border p-3 shadow-md', props.className), onSubmit: onSubmit, children: [_jsx(FormHeader, { method: method, route: route, isLoading: testQuery.isLoading }), servers.length > 1 ? (_jsx(CollapsiblePanel, { title: "Server URL", children: _jsx(ServerSelect, {}) })) : null, header.length > 0 || authorization ? (_jsxs(CollapsiblePanel, { title: "Headers", children: [authField, header.map((field) => renderCustomField(`header.${field.name}`, field, fields.header, field.name))] })) : null, path.length > 0 ? (_jsx(CollapsiblePanel, { title: "Path", children: path.map((field) => renderCustomField(`path.${field.name}`, field, fields.path, field.name)) })) : null, query.length > 0 ? (_jsx(CollapsiblePanel, { title: "Query", children: query.map((field) => renderCustomField(`query.${field.name}`, field, fields.query, field.name)) })) : null, body ? (_jsx(CollapsiblePanel, { title: "Body", children: body.type === 'object' && !fields.body ? (_jsx(ObjectInput, { field: body, fieldName: "body" })) : (renderCustomField('body', body, fields.body)) })) : null, testQuery.data ? _jsx(ResultDisplay, { data: testQuery.data }) : null] }));
+    if (authorization?.type === 'oauth2') {
+        // only the first one, so it looks simpler :)
+        const flow = Object.keys(authorization.flows)[0];
+        children = (_jsx(OauthDialog, { flow: flow, scheme: authorization, setToken: (token) => form.setValue('authorization', `Bearer ${token}`), children: children }));
+    }
+    return (_jsx(FormProvider, { ...form, children: _jsx(SchemaContext.Provider, { value: useMemo(() => ({ references: schemas, dynamic: dynamicRef }), [schemas]), children: children }) }));
 }
 function createPathnameFromInput(route, path, query) {
     let pathname = route;

package/dist/playground/index.js

@@ -48,9 +48,19 @@ function getAuthorizationField(method, { schema: { document } }) {
     if (security.length === 0)
         return;
     const singular = security.find((requirements) => Object.keys(requirements).length === 1);
-    if (!singular)
+    if (!singular) {
+        console.warn(`Cannot find suitable security schema for API Playground from ${JSON.stringify(security, null, 2)}. Only one requirement is allowed`);
         return;
-    return getSecurities(singular, document)[0];
+    }
+    const scheme = getSecurities(singular, document)[0];
+    if (scheme.type === 'oauth2') {
+        const flow = Object.keys(scheme.flows).at(0);
+        if (!flow)
+            throw new Error("security scheme's `flows` must not be empty");
+        if (flow === 'implicit' || flow === 'password')
+            throw new Error(`OAuth 2.0 flow type: ${flow} is not supported, consider other types like \`authorizationCode\` instead.`);
+    }
+    return scheme;
 }
 function getIdFromSchema(schema, required, ctx) {
     const registered = ctx.registered.get(schema);

package/dist/render/codeblock.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as Base from 'fumadocs-ui/components/codeblock';
-import { highlight } from 'fumadocs-core/server';
+import { highlight } from 'fumadocs-core/highlight';
 export async function CodeBlock({ code, lang, options, ...rest }) {
     const rendered = await highlight(code, {
         lang,

package/dist/ui/components/dialog.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DialogFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };
+//# sourceMappingURL=dialog.d.ts.map

package/dist/ui/components/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/ui/components/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAK1D,QAAA,MAAM,MAAM,uCAAuB,CAAC;AAEpC,QAAA,MAAM,aAAa,8GAA0B,CAAC;AAE9C,QAAA,MAAM,YAAY,6CAAyB,CAAC;AAE5C,QAAA,MAAM,WAAW,4GAAwB,CAAC;AAE1C,QAAA,MAAM,aAAa,8JAYjB,CAAC;AAGH,QAAA,MAAM,aAAa,8JAqBjB,CAAC;AAGH,QAAA,MAAM,YAAY;8BAGf,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAQtC,CAAC;AAGF,QAAA,MAAM,YAAY;8BAGf,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAQtC,CAAC;AAGF,QAAA,MAAM,WAAW,oKAYf,CAAC;AAGH,QAAA,MAAM,iBAAiB,8KASrB,CAAC;AAGH,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAC"}

package/dist/ui/components/dialog.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+import { cn } from 'fumadocs-ui/components/api';
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, className: cn('fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out', className), ...props })));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn('fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-fd-popover p-6 shadow-lg duration-200 data-[state=open]:animate-fd-dialog-in data-[state=closed]:animate-fd-dialog-out sm:rounded-lg', className), ...props, children: [children, _jsxs(DialogPrimitive.Close, { className: "absolute end-4 top-4 rounded-sm opacity-70 ring-offset-fd-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-fd-accent data-[state=open]:text-fd-muted-foreground", children: [_jsx(X, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] })));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+const DialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-col space-y-1.5 text-center sm:text-start', className), ...props }));
+DialogHeader.displayName = 'DialogHeader';
+const DialogFooter = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2', className), ...props }));
+DialogFooter.displayName = 'DialogFooter';
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Title, { ref: ref, className: cn('text-lg font-semibold leading-none tracking-tight', className), ...props })));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Description, { ref: ref, className: cn('text-sm text-fd-muted-foreground', className), ...props })));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };

package/dist/ui/components/input.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { cn } from 'fumadocs-ui/components/api';
 import { cva } from 'class-variance-authority';
-export const labelVariants = cva('text-[13px] font-mono text-fd-card-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70');
+export const labelVariants = cva('text-[13px] font-medium text-fd-card-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70');
 const Input = React.forwardRef(({ className, type, ...props }, ref) => {
     return (_jsx("input", { type: type, className: cn('flex h-9 w-full rounded-md border bg-transparent px-2 py-1.5 text-[13px] text-fd-foreground transition-colors placeholder:text-fd-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-fd-ring disabled:cursor-not-allowed disabled:opacity-50', className), ref: ref, ...props }));
 });

package/dist/utils/use-query.d.ts

@@ -1,6 +1,7 @@
-export declare function useQuery<I, T>(fn: (input: I) => Promise<T>): {
-    start: (input: I) => void;
+export declare function useQuery<I extends unknown[], T>(fn: (...input: I) => Promise<T>): {
+    start: (...input: I) => void;
     data?: T;
+    error?: unknown;
     isLoading: boolean;
 };
 //# sourceMappingURL=use-query.d.ts.map

package/dist/utils/use-query.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-query.d.ts","sourceRoot":"","sources":["../../src/utils/use-query.ts"],"names":[],"mappings":"AAEA,wBAAgB,QAAQ,CAAC,CAAC,EAAE,CAAC,EAC3B,EAAE,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,GAC3B;IACD,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC1B,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,SAAS,EAAE,OAAO,CAAC;CACpB,CAyBA"}
+{"version":3,"file":"use-query.d.ts","sourceRoot":"","sources":["../../src/utils/use-query.ts"],"names":[],"mappings":"AAEA,wBAAgB,QAAQ,CAAC,CAAC,SAAS,OAAO,EAAE,EAAE,CAAC,EAC7C,EAAE,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,GAC9B;IACD,KAAK,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;CACpB,CAgCA"}

package/dist/utils/use-query.js

@@ -1,22 +1,29 @@
-import { useMemo, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 export function useQuery(fn) {
     const [loading, setLoading] = useState(false);
     const [data, setData] = useState();
+    const [error, setError] = useState();
+    const fnRef = useRef(fn);
+    fnRef.current = fn;
     return useMemo(() => ({
         isLoading: loading,
         data,
-        start(input) {
+        error,
+        start(...input) {
             setLoading(true);
-            void fn(input)
+            void fnRef
+                .current(...input)
                 .then((res) => {
                 setData(res);
+                setError(undefined);
             })
-                .catch(() => {
+                .catch((err) => {
                 setData(undefined);
+                setError(err);
             })
                 .finally(() => {
                 setLoading(false);
             });
         },
-    }), [data, fn, loading]);
+    }), [error, data, loading]);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-openapi",
-  "version": "6.1.0",
+  "version": "6.2.0",
   "description": "Generate MDX docs for your OpenAPI spec",
   "keywords": [
     "NextJs",
@@ -44,6 +44,7 @@
   ],
   "dependencies": {
     "@fumari/json-schema-to-typescript": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-slot": "^1.1.2",
     "@scalar/openapi-parser": "0.10.8",
@@ -61,8 +62,8 @@
     "remark-rehype": "^11.1.1",
     "shiki": "^3.0.0",
     "xml-js": "^1.6.11",
-    "fumadocs-core": "15.0.11",
-    "fumadocs-ui": "15.0.11"
+    "fumadocs-core": "15.0.13",
+    "fumadocs-ui": "15.0.13"
   },
   "devDependencies": {
     "@scalar/api-client-react": "^1.1.31",