fumadocs-openapi 5.12.0 → 6.0.0

package/dist/ui/{index-client-XPLtFTfD.js → index-client-CehDtJk-.js}

@@ -1,18 +1,214 @@
 'use client';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { forwardRef, useState, useMemo, useRef, useEffect, Fragment as Fragment$1 } from 'react';
+import { forwardRef, createElement, useState, useMemo, useRef, useEffect, Fragment as Fragment$1 } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useFormContext, Controller, useFieldArray, useForm, FormProvider } from 'react-hook-form';
 import { cn, buttonVariants } from 'fumadocs-ui/components/api';
-import { C as ChevronDown, a as ChevronUp, b as Check, u as useSchemaContext, T as Trash2, P as Plus, c as CircleCheck, d as CircleX, e as useApiContext, S as SchemaContext, g as getUrl } from './client-client-Die8irpf.js';
+import { u as useSchemaContext, a as useApiContext, S as SchemaContext } from './client-client-CpwKrzlY.js';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { cva } from 'class-variance-authority';
 import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
-import { S as ServerSelect } from './server-select-client-D4GEjFgD.js';
+import { S as ServerSelect } from './server-select-client-CbFencmM.js';
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from 'fumadocs-ui/components/ui/collapsible';
-import { buttonVariants as buttonVariants$1 } from 'fumadocs-ui/components/ui/button';
-import { ApiClientModalProvider, useApiClientModal } from '@scalar/api-client-react';
-import { useTheme } from 'next-themes';
+
+/**
+ * @license lucide-react v0.474.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */ const toKebabCase = (string)=>string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+const mergeClasses = (...classes)=>classes.filter((className, index, array)=>{
+        return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
+    }).join(" ").trim();
+
+/**
+ * @license lucide-react v0.474.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */ var defaultAttributes = {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+};
+
+const Icon = /*#__PURE__*/ forwardRef(({ color = "currentColor", size = 24, strokeWidth = 2, absoluteStrokeWidth, className = "", children, iconNode, ...rest }, ref)=>{
+    return /*#__PURE__*/ createElement("svg", {
+        ref,
+        ...defaultAttributes,
+        width: size,
+        height: size,
+        stroke: color,
+        strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+        className: mergeClasses("lucide", className),
+        ...rest
+    }, [
+        ...iconNode.map(([tag, attrs])=>/*#__PURE__*/ createElement(tag, attrs)),
+        ...Array.isArray(children) ? children : [
+            children
+        ]
+    ]);
+});
+
+const createLucideIcon = (iconName, iconNode)=>{
+    const Component = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ createElement(Icon, {
+            ref,
+            iconNode,
+            className: mergeClasses(`lucide-${toKebabCase(iconName)}`, className),
+            ...props
+        }));
+    Component.displayName = `${iconName}`;
+    return Component;
+};
+
+const __iconNode$6 = [
+    [
+        "path",
+        {
+            d: "M20 6 9 17l-5-5",
+            key: "1gmf2c"
+        }
+    ]
+];
+const Check = createLucideIcon("Check", __iconNode$6);
+
+const __iconNode$5 = [
+    [
+        "path",
+        {
+            d: "m6 9 6 6 6-6",
+            key: "qrunsl"
+        }
+    ]
+];
+const ChevronDown = createLucideIcon("ChevronDown", __iconNode$5);
+
+const __iconNode$4 = [
+    [
+        "path",
+        {
+            d: "m18 15-6-6-6 6",
+            key: "153udz"
+        }
+    ]
+];
+const ChevronUp = createLucideIcon("ChevronUp", __iconNode$4);
+
+const __iconNode$3 = [
+    [
+        "circle",
+        {
+            cx: "12",
+            cy: "12",
+            r: "10",
+            key: "1mglay"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "m9 12 2 2 4-4",
+            key: "dzmm74"
+        }
+    ]
+];
+const CircleCheck = createLucideIcon("CircleCheck", __iconNode$3);
+
+const __iconNode$2 = [
+    [
+        "circle",
+        {
+            cx: "12",
+            cy: "12",
+            r: "10",
+            key: "1mglay"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "m15 9-6 6",
+            key: "1uzhvr"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "m9 9 6 6",
+            key: "z0biqf"
+        }
+    ]
+];
+const CircleX = createLucideIcon("CircleX", __iconNode$2);
+
+const __iconNode$1 = [
+    [
+        "path",
+        {
+            d: "M5 12h14",
+            key: "1ays0h"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M12 5v14",
+            key: "s699le"
+        }
+    ]
+];
+const Plus = createLucideIcon("Plus", __iconNode$1);
+
+const __iconNode = [
+    [
+        "path",
+        {
+            d: "M3 6h18",
+            key: "d0wm0j"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6",
+            key: "4alrt4"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2",
+            key: "v07s0e"
+        }
+    ],
+    [
+        "line",
+        {
+            x1: "10",
+            x2: "10",
+            y1: "11",
+            y2: "17",
+            key: "1uufr5"
+        }
+    ],
+    [
+        "line",
+        {
+            x1: "14",
+            x2: "14",
+            y1: "11",
+            y2: "17",
+            key: "xtxkd"
+        }
+    ]
+];
+const Trash2 = createLucideIcon("Trash2", __iconNode);
 
 /**
  * Resolve reference
@@ -555,6 +751,14 @@ function getStatusInfo(status) {
     };
 }
 
+function getUrl(url, variables) {
+    let out = url;
+    for (const [key, value] of Object.entries(variables)){
+        out = out.replaceAll(`{${key}}`, value);
+    }
+    return out;
+}
+
 const variants = cva('font-mono font-medium', {
     variants: {
         color: {
@@ -613,12 +817,22 @@ function useQuery(fn) {
     ]);
 }
 
+function defaultAuthValue(auth) {
+    if (!auth || auth.type === 'apiKey') return '';
+    if (auth.type === 'http' && auth.scheme === 'basic') {
+        return {
+            username: '',
+            password: ''
+        };
+    }
+    return 'Bearer';
+}
 function APIPlayground({ route, method = 'GET', authorization, path = [], header = [], query = [], body, fields = {}, schemas, proxyUrl, components: { ResultDisplay = DefaultResultDisplay } = {}, ...props }) {
     const { serverRef } = useApiContext();
     const dynamicRef = useRef(new Map());
     const form = useForm({
         defaultValues: {
-            authorization: authorization?.defaultValue,
+            authorization: defaultAuthValue(authorization),
             path: getDefaultValues(path, schemas),
             query: getDefaultValues(query, schemas),
             header: getDefaultValues(header, schemas),
@@ -626,20 +840,42 @@ function APIPlayground({ route, method = 'GET', authorization, path = [], header
         }
     });
     const testQuery = useQuery(async (input)=>{
-        const fetcher = await import('./fetcher-BHk80ZFu.js').then((mod)=>mod.createBrowserFetcher(body, schemas));
+        const fetcher = await import('./fetcher-Cey1qI8X.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('; ');
+                }
+            } else if (authorization.type === 'http' && authorization.scheme === 'basic') {
+                if (typeof input.authorization === 'object') header.Authorization = `Basic ${btoa(`${input.authorization.username}:${input.authorization.password}`)}`;
+            } else {
+                header.Authorization = input.authorization;
+            }
+        }
         const serverUrl = serverRef.current ? getUrl(serverRef.current.url, serverRef.current.variables) : window.location.origin;
-        let url = `${serverUrl}${createPathnameFromInput(route, input.path, input.query)}`;
+        let url = `${serverUrl}${createPathnameFromInput(route, input.path, query)}`;
         if (proxyUrl) {
             const updated = new URL(proxyUrl, window.location.origin);
             updated.searchParams.append('url', url);
             url = updated.toString();
         }
-        const header = {
-            ...input.header
-        };
-        if (input.authorization && authorization) {
-            header[authorization.name] = input.authorization;
-        }
         return fetcher.fetch({
             url: url.toString(),
             header,
@@ -653,12 +889,12 @@ function APIPlayground({ route, method = 'GET', authorization, path = [], header
     });
     useEffect(()=>{
         if (!authorization) return;
-        const key = `__fumadocs_authorization_${authorization.authType}`;
+        const key = `__fumadocs_auth_${JSON.stringify(authorization)}`;
         const cached = localStorage.getItem(key);
-        if (cached) form.setValue('authorization', cached);
+        if (cached) form.setValue('authorization', JSON.parse(cached));
         const subscription = form.watch((value, { name })=>{
-            if (name !== 'authorization' || !value.authorization) return;
-            localStorage.setItem(key, value.authorization);
+            if (!name || !name.startsWith('authorization') || !value.authorization) return;
+            localStorage.setItem(key, JSON.stringify(value.authorization));
         });
         return ()=>{
             subscription.unsubscribe();
@@ -708,9 +944,34 @@ function APIPlayground({ route, method = 'GET', authorization, path = [], header
                         title: "Server URL",
                         children: /*#__PURE__*/ jsx(ServerSelect, {})
                     }),
-                    authorization ? /*#__PURE__*/ jsx(CollapsiblePanel, {
+                    header.length > 0 || authorization ? /*#__PURE__*/ jsxs(CollapsiblePanel, {
                         title: "Headers",
-                        children: renderCustomField('authorization', authorization, fields.auth)
+                        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 ? /*#__PURE__*/ jsx(CollapsiblePanel, {
                         title: "Path",
@@ -720,10 +981,6 @@ function APIPlayground({ route, method = 'GET', authorization, path = [], header
                         title: "Query",
                         children: query.map((field)=>renderCustomField(`query.${field.name}`, field, fields.query, field.name))
                     }) : null,
-                    header.length > 0 ? /*#__PURE__*/ jsx(CollapsiblePanel, {
-                        title: "Headers",
-                        children: header.map((field)=>renderCustomField(`header.${field.name}`, field, fields.header, field.name))
-                    }) : null,
                     body ? /*#__PURE__*/ jsx(CollapsiblePanel, {
                         title: "Body",
                         children: body.type === 'object' && !fields.body ? /*#__PURE__*/ jsx(ObjectInput, {
@@ -850,63 +1107,10 @@ function CollapsiblePanel({ title, children, ...props }) {
     });
 }
 
-var index$1 = {
+var index = {
   __proto__: null,
   APIPlayground: APIPlayground,
   CollapsiblePanel: CollapsiblePanel
 };
 
-function ScalarPlayground({ path, method, spec }) {
-    const { resolvedTheme } = useTheme();
-    const [mounted, setMounted] = useState(false);
-    useEffect(()=>{
-        setMounted(true);
-    }, []);
-    return /*#__PURE__*/ jsxs("div", {
-        className: cn('flex flex-row items-center gap-2.5 p-3 rounded-xl border bg-fd-card text-fd-card-foreground not-prose', mounted ? `${resolvedTheme}-mode` : null),
-        children: [
-            /*#__PURE__*/ jsx(MethodLabel, {
-                className: "text-xs",
-                children: method
-            }),
-            /*#__PURE__*/ jsx("code", {
-                className: "flex-1 overflow-auto text-nowrap text-[13px] text-fd-muted-foreground",
-                children: path
-            }),
-            /*#__PURE__*/ jsx(ApiClientModalProvider, {
-                configuration: {
-                    themeId: 'moon',
-                    spec: {
-                        content: spec
-                    }
-                },
-                children: /*#__PURE__*/ jsx(Trigger, {
-                    path: path,
-                    method: method
-                })
-            })
-        ]
-    });
-}
-function Trigger({ path, method }) {
-    const client = useApiClientModal();
-    return /*#__PURE__*/ jsx("button", {
-        type: "submit",
-        className: cn(buttonVariants$1({
-            color: 'primary',
-            size: 'sm'
-        }), 'px-3 py-1.5'),
-        onClick: ()=>client?.open({
-                path,
-                method
-            }),
-        children: "Test"
-    });
-}
-
-var index = {
-  __proto__: null,
-  default: ScalarPlayground
-};
-
-export { Input as I, Select as S, SelectTrigger as a, SelectValue as b, SelectContent as c, SelectItem as d, index as e, index$1 as i, labelVariants as l, resolve as r };
+export { ChevronDown as C, Input as I, Select as S, SelectTrigger as a, SelectValue as b, SelectContent as c, SelectItem as d, index as i, labelVariants as l, resolve as r };

package/dist/ui/index.d.ts

@@ -53,18 +53,19 @@ type ProcessedDocument = {
 };
 
 type Document = OpenAPIV3_1.Document;
+type OperationObject = OpenAPIV3_1.OperationObject;
+type SecuritySchemeObject = OpenAPIV3_1.SecuritySchemeObject;
 type ReferenceObject = OpenAPIV3_1.ReferenceObject;
 type ServerObject = NoReference<OpenAPIV3_1.ServerObject>;
+type MethodInformation = NoReference<OperationObject> & {
+    method: string;
+};
 type Awaitable<T> = T | Promise<T>;
 /**
  * Dereferenced value and its original `$ref` value
  */
 type DereferenceMap = Map<unknown, string>;
 interface RenderContext {
-    /**
-     * Use Scalar for API Playground
-     */
-    useScalar: boolean;
     /**
      * The url of proxy to avoid CORS issues
      */
@@ -97,6 +98,10 @@ interface RenderContext {
     showResponseSchema?: boolean;
 }
 
+type Security = SecuritySchemeObject & {
+    scopes: string[];
+};
+
 interface BaseRequestField {
     name: string;
     description?: string;
@@ -126,7 +131,7 @@ interface FileSchema extends BaseSchema {
 }
 interface ObjectSchema extends BaseSchema {
     type: 'object';
-    properties: Record<string, ReferenceSchema>;
+    properties: Record<string, RequestSchema | ReferenceSchema>;
     /**
      * Reference to schema, or true if it's `any`
      */
@@ -143,9 +148,7 @@ type RequestSchema = PrimitiveSchema | ArraySchema | ObjectSchema | SwitcherSche
 interface APIPlaygroundProps {
     route: string;
     method: string;
-    authorization?: PrimitiveRequestField & {
-        authType: string;
-    };
+    authorization?: Security;
     path?: PrimitiveRequestField[];
     query?: PrimitiveRequestField[];
     header?: PrimitiveRequestField[];
@@ -221,7 +224,11 @@ interface Renderer {
      */
     ObjectCollapsible: ComponentType<ObjectCollapsibleProps>;
     Property: ComponentType<PropertyProps>;
-    APIPlayground: ComponentType<APIPlaygroundProps>;
+    APIPlayground: ComponentType<{
+        path: string;
+        method: MethodInformation;
+        ctx: RenderContext;
+    }>;
 }
 
 interface SchemaContextType {
@@ -244,7 +251,10 @@ interface FetchResult {
 }
 
 interface FormValues {
-    authorization: string;
+    authorization: string | {
+        username: string;
+        password: string;
+    };
     path: Record<string, unknown>;
     query: Record<string, unknown>;
     header: Record<string, unknown>;
@@ -264,7 +274,7 @@ interface CustomField<TName extends FieldPath<FormValues>, Info> {
 
 declare const APIPlayground: react.ComponentType<APIPlaygroundProps & {
     fields?: {
-        auth?: CustomField<"authorization", PrimitiveRequestField>;
+        auth?: CustomField<"authorization", RequestSchema>;
         path?: CustomField<`path.${string}`, PrimitiveRequestField>;
         query?: CustomField<`query.${string}`, PrimitiveRequestField>;
         header?: CustomField<`header.${string}`, PrimitiveRequestField>;
@@ -276,11 +286,6 @@ declare const APIPlayground: react.ComponentType<APIPlaygroundProps & {
         }>;
     }>;
 } & HTMLAttributes<HTMLFormElement>>;
-declare const ScalarPlayground: react.ComponentType<{
-    spec: object;
-    path: string;
-    method: string;
-}>;
 declare function Root({ children, baseUrl, className, shikiOptions, servers, ...props }: RootProps & {
     shikiOptions: RenderContext['shikiOptions'];
 } & HTMLAttributes<HTMLDivElement>): ReactNode;
@@ -294,4 +299,4 @@ declare function ObjectCollapsible(props: {
     children: ReactNode;
 }): react_jsx_runtime.JSX.Element;
 
-export { API, APIExample, APIInfo, APIPlayground, ObjectCollapsible, Property, Root, ScalarPlayground, useSchemaContext };
+export { API, APIExample, APIInfo, APIPlayground, ObjectCollapsible, Property, Root, useSchemaContext };

package/dist/ui/index.js

@@ -2,8 +2,8 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { cn, buttonVariants } from 'fumadocs-ui/components/api';
 import { cva } from 'class-variance-authority';
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from 'fumadocs-ui/components/ui/collapsible';
-import { C as ChevronDown } from './client-client-Die8irpf.js';
-export { A as APIPlayground, R as Root, h as ScalarPlayground, u as useSchemaContext } from './client-client-Die8irpf.js';
+export { A as APIPlayground, R as Root, u as useSchemaContext } from './client-client-CpwKrzlY.js';
+import { C as ChevronDown } from './index-client-CehDtJk-.js';
 
 const badgeVariants = cva('rounded-xl border px-1.5 py-1 text-xs font-medium leading-[12px]', {
     variants: {

package/dist/ui/{server-select-client-D4GEjFgD.js → server-select-client-CbFencmM.js}

@@ -1,7 +1,7 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { e as useApiContext, f as useServerSelectContext } from './client-client-Die8irpf.js';
-import { S as Select, a as SelectTrigger, b as SelectValue, c as SelectContent, d as SelectItem, l as labelVariants, I as Input } from './index-client-XPLtFTfD.js';
+import { a as useApiContext, b as useServerSelectContext } from './client-client-CpwKrzlY.js';
+import { S as Select, a as SelectTrigger, b as SelectValue, c as SelectContent, d as SelectItem, l as labelVariants, I as Input } from './index-client-CehDtJk-.js';
 import { cn } from 'fumadocs-ui/components/api';
 
 function ServerSelect(props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-openapi",
-  "version": "5.12.0",
+  "version": "6.0.0",
   "description": "Generate MDX docs for your OpenAPI spec",
   "keywords": [
     "NextJs",
@@ -20,6 +20,10 @@
       "import": "./dist/ui/index.js",
       "types": "./dist/ui/index.d.ts"
     },
+    "./scalar": {
+      "import": "./dist/scalar/index.js",
+      "types": "./dist/scalar/index.d.ts"
+    },
     "./server": {
       "import": "./dist/server/index.js",
       "types": "./dist/server/index.d.ts"
@@ -46,24 +50,24 @@
     "react-hook-form": "^7.54.2",
     "remark": "^15.0.1",
     "remark-rehype": "^11.1.1",
-    "shiki": "^2.1.0",
+    "shiki": "^2.2.0",
     "xml-js": "^1.6.11",
     "fumadocs-core": "15.0.0",
     "fumadocs-ui": "15.0.0"
   },
   "devDependencies": {
-    "@scalar/api-client-react": "^1.1.17",
+    "@scalar/api-client-react": "^1.1.22",
     "@types/js-yaml": "^4.0.9",
-    "@types/node": "22.10.9",
+    "@types/node": "22.13.0",
     "@types/openapi-sampler": "^1.0.3",
-    "@types/react": "^19.0.7",
+    "@types/react": "^19.0.8",
     "bunchee": "^6.3.2",
-    "lucide-react": "^0.473.0",
+    "lucide-react": "^0.474.0",
     "next": "15.1.6",
     "openapi-types": "^12.1.3",
-    "tailwindcss": "^4.0.0",
-    "eslint-config-custom": "0.0.0",
-    "tsconfig": "0.0.0"
+    "tailwindcss": "^4.0.2",
+    "tsconfig": "0.0.0",
+    "eslint-config-custom": "0.0.0"
   },
   "peerDependencies": {
     "@scalar/api-client-react": "*",