fumadocs-openapi 5.11.8 → 6.0.0

package/dist/ui/index.d.ts

@@ -46,9 +46,20 @@ interface CodeSample {
     source: string | ((endpoint: EndpointSample) => string | undefined) | false;
 }
 
+type ProcessedDocument = {
+    document: NoReference<Document>;
+    dereferenceMap: DereferenceMap;
+    downloaded: Document;
+};
+
 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
@@ -60,14 +71,13 @@ interface RenderContext {
      */
     proxyUrl?: string;
     renderer: Renderer;
-    /**
-     * dereferenced schema
-     */
-    document: NoReference<Document>;
     baseUrl: string;
     servers: ServerObject[];
     slugger: Slugger;
-    dereferenceMap: DereferenceMap;
+    /**
+     * dereferenced schema
+     */
+    schema: ProcessedDocument;
     /**
      * Generate TypeScript definitions from response schema.
      *
@@ -88,6 +98,10 @@ interface RenderContext {
     showResponseSchema?: boolean;
 }
 
+type Security = SecuritySchemeObject & {
+    scopes: string[];
+};
+
 interface BaseRequestField {
     name: string;
     description?: string;
@@ -117,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`
      */
@@ -134,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[];
@@ -212,7 +224,11 @@ interface Renderer {
      */
     ObjectCollapsible: ComponentType<ObjectCollapsibleProps>;
     Property: ComponentType<PropertyProps>;
-    APIPlayground: ComponentType<APIPlaygroundProps>;
+    APIPlayground: ComponentType<{
+        path: string;
+        method: MethodInformation;
+        ctx: RenderContext;
+    }>;
 }
 
 interface SchemaContextType {
@@ -235,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>;
@@ -255,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>;
@@ -271,9 +290,7 @@ declare function Root({ children, baseUrl, className, shikiOptions, servers, ...
     shikiOptions: RenderContext['shikiOptions'];
 } & HTMLAttributes<HTMLDivElement>): ReactNode;
 
-declare function APIInfo({ className, route, badgeClassname, method, head, ...props }: APIInfoProps & HTMLAttributes<HTMLDivElement> & {
-    badgeClassname?: string;
-}): react_jsx_runtime.JSX.Element;
+declare function APIInfo({ className, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
 declare function API({ children, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
 declare function Property({ name, type, required, deprecated, children, }: PropertyProps): react_jsx_runtime.JSX.Element;
 declare function APIExample(props: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;

package/dist/ui/index.js

@@ -1,10 +1,9 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { cn } from 'fumadocs-ui/components/api';
-import { Fragment } from 'react';
-import { Accordions, Accordion } from 'fumadocs-ui/components/accordion';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cn, buttonVariants } from 'fumadocs-ui/components/api';
 import { cva } from 'class-variance-authority';
-import { h as CopyRouteButton, i as ServerSelect } from './client-client-B06fJG48.js';
-export { A as APIPlayground, R as Root, u as useSchemaContext } from './client-client-B06fJG48.js';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from 'fumadocs-ui/components/ui/collapsible';
+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: {
@@ -17,77 +16,12 @@ const badgeVariants = cva('rounded-xl border px-1.5 py-1 text-xs font-medium lea
         }
     }
 });
-function getBadgeColor(method) {
-    switch(method){
-        case 'PUT':
-            return 'yellow';
-        case 'PATCH':
-            return 'orange';
-        case 'POST':
-            return 'blue';
-        case 'DELETE':
-            return 'red';
-        default:
-            return 'green';
-    }
-}
 
-function Route({ route }) {
-    const segments = route.split('/').filter((part)=>part.length > 0);
+function APIInfo({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
-        className: "not-prose flex flex-row items-center gap-0.5 overflow-auto text-nowrap text-xs",
-        children: segments.map((part, index)=>/*#__PURE__*/ jsxs(Fragment, {
-                children: [
-                    /*#__PURE__*/ jsx("span", {
-                        className: "text-fd-muted-foreground",
-                        children: "/"
-                    }),
-                    part.startsWith('{') && part.endsWith('}') ? /*#__PURE__*/ jsx("code", {
-                        className: "bg-fd-primary/10 text-fd-primary",
-                        children: part
-                    }) : /*#__PURE__*/ jsx("code", {
-                        className: "text-fd-foreground",
-                        children: part
-                    })
-                ]
-            }, index))
-    });
-}
-function APIInfo({ className, route, badgeClassname, method = 'GET', head, ...props }) {
-    return /*#__PURE__*/ jsxs("div", {
         className: cn('min-w-0 flex-1', className),
         ...props,
-        children: [
-            head,
-            /*#__PURE__*/ jsxs("div", {
-                className: "not-prose mb-4 rounded-lg border bg-fd-card p-3 text-fd-card-foreground shadow-lg",
-                children: [
-                    /*#__PURE__*/ jsxs("div", {
-                        className: "-mx-1 flex flex-row items-center gap-1.5",
-                        children: [
-                            /*#__PURE__*/ jsx("span", {
-                                className: cn(badgeVariants({
-                                    color: getBadgeColor(method)
-                                }), badgeClassname),
-                                children: method
-                            }),
-                            /*#__PURE__*/ jsx(Route, {
-                                route: route
-                            }),
-                            /*#__PURE__*/ jsx(CopyRouteButton, {
-                                className: "ms-auto size-6 p-1.5",
-                                route: route
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsx(ServerSelect, {})
-                ]
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: "prose-no-margin",
-                children: props.children
-            })
-        ]
+        children: props.children
     });
 }
 function API({ children, ...props }) {
@@ -103,9 +37,9 @@ function API({ children, ...props }) {
 }
 function Property({ name, type, required, deprecated, children }) {
     return /*#__PURE__*/ jsxs("div", {
-        className: "mb-4 rounded-lg border bg-fd-card p-3 prose-no-margin",
+        className: "rounded-xl border bg-fd-card p-3 prose-no-margin",
         children: [
-            /*#__PURE__*/ jsxs("h4", {
+            /*#__PURE__*/ jsxs("div", {
                 className: "flex flex-row flex-wrap items-center gap-4",
                 children: [
                     /*#__PURE__*/ jsx("code", {
@@ -124,7 +58,7 @@ function Property({ name, type, required, deprecated, children }) {
                         children: "Deprecated"
                     }) : null,
                     /*#__PURE__*/ jsx("span", {
-                        className: "ms-auto font-mono text-[13px] text-fd-muted-foreground",
+                        className: "ms-auto text-xs font-mono text-fd-muted-foreground",
                         children: type
                     })
                 ]
@@ -141,12 +75,29 @@ function APIExample(props) {
     });
 }
 function ObjectCollapsible(props) {
-    return /*#__PURE__*/ jsx(Accordions, {
-        type: "single",
-        children: /*#__PURE__*/ jsx(Accordion, {
-            title: props.name,
-            children: props.children
-        })
+    return /*#__PURE__*/ jsxs(Collapsible, {
+        ...props,
+        children: [
+            /*#__PURE__*/ jsxs(CollapsibleTrigger, {
+                className: cn(buttonVariants({
+                    color: 'outline',
+                    size: 'sm'
+                }), 'group rounded-full px-2 py-1.5 text-fd-muted-foreground'),
+                children: [
+                    props.name,
+                    /*#__PURE__*/ jsx(ChevronDown, {
+                        className: "size-4 group-data-[state=open]:rotate-180"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(CollapsibleContent, {
+                className: "-mx-2",
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "flex flex-col gap-2 p-2",
+                    children: props.children
+                })
+            })
+        ]
     });
 }
 

package/dist/ui/server-select-client-CbFencmM.js

@@ -0,0 +1,86 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+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) {
+    const { servers } = useApiContext();
+    const { server, setServer, setServerVariables } = useServerSelectContext();
+    if (servers.length <= 1) return null;
+    const schema = server ? servers.find((item)=>item.url === server.url) : undefined;
+    return /*#__PURE__*/ jsxs("div", {
+        ...props,
+        className: cn('flex flex-col gap-4', props.className),
+        children: [
+            /*#__PURE__*/ jsxs(Select, {
+                value: server?.url,
+                onValueChange: setServer,
+                children: [
+                    /*#__PURE__*/ jsx(SelectTrigger, {
+                        className: "h-auto break-all",
+                        children: /*#__PURE__*/ jsx(SelectValue, {})
+                    }),
+                    /*#__PURE__*/ jsx(SelectContent, {
+                        children: servers.map((item)=>/*#__PURE__*/ jsxs(SelectItem, {
+                                value: item.url,
+                                children: [
+                                    item.url,
+                                    /*#__PURE__*/ jsx("p", {
+                                        className: "text-start text-fd-muted-foreground",
+                                        children: item.description
+                                    })
+                                ]
+                            }, item.url))
+                    })
+                ]
+            }),
+            Object.entries(schema?.variables ?? {}).map(([key, variable])=>{
+                if (!server) return;
+                const id = `fd_server_select_${key}`;
+                return /*#__PURE__*/ jsxs("fieldset", {
+                    className: "flex flex-col gap-1",
+                    children: [
+                        /*#__PURE__*/ jsx("label", {
+                            className: cn(labelVariants()),
+                            htmlFor: id,
+                            children: key
+                        }),
+                        /*#__PURE__*/ jsx("p", {
+                            className: "text-xs text-fd-muted-foreground empty:hidden",
+                            children: variable.description
+                        }),
+                        variable.enum ? /*#__PURE__*/ jsxs(Select, {
+                            value: server.variables[key],
+                            onValueChange: (v)=>setServerVariables({
+                                    ...server?.variables,
+                                    [key]: v
+                                }),
+                            children: [
+                                /*#__PURE__*/ jsx(SelectTrigger, {
+                                    id: id,
+                                    children: /*#__PURE__*/ jsx(SelectValue, {})
+                                }),
+                                /*#__PURE__*/ jsx(SelectContent, {
+                                    children: variable.enum.map((value)=>/*#__PURE__*/ jsx(SelectItem, {
+                                            value: value,
+                                            children: value
+                                        }, value))
+                                })
+                            ]
+                        }) : /*#__PURE__*/ jsx(Input, {
+                            id: id,
+                            value: server.variables[key],
+                            onChange: (e)=>setServerVariables({
+                                    ...server?.variables,
+                                    [key]: e.target.value
+                                })
+                        })
+                    ]
+                }, key);
+            })
+        ]
+    });
+}
+
+export { ServerSelect as S };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-openapi",
-  "version": "5.11.8",
+  "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"
@@ -32,7 +36,7 @@
   ],
   "dependencies": {
     "@fumari/json-schema-to-typescript": "^1.1.2",
-    "@radix-ui/react-select": "^2.1.4",
+    "@radix-ui/react-select": "^2.1.5",
     "@radix-ui/react-slot": "^1.1.1",
     "@scalar/openapi-parser": "0.10.4",
     "ajv-draft-04": "^1.0.0",
@@ -41,32 +45,41 @@
     "github-slugger": "^2.0.0",
     "hast-util-to-jsx-runtime": "^2.3.2",
     "js-yaml": "^4.1.0",
+    "next-themes": "^0.4.4",
     "openapi-sampler": "^1.6.1",
     "react-hook-form": "^7.54.2",
     "remark": "^15.0.1",
     "remark-rehype": "^11.1.1",
-    "shiki": "^2.0.3",
+    "shiki": "^2.2.0",
     "xml-js": "^1.6.11",
-    "fumadocs-core": "14.7.7",
-    "fumadocs-ui": "14.7.7"
+    "fumadocs-core": "15.0.0",
+    "fumadocs-ui": "15.0.0"
   },
   "devDependencies": {
+    "@scalar/api-client-react": "^1.1.22",
     "@types/js-yaml": "^4.0.9",
-    "@types/node": "22.10.7",
+    "@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",
-    "next": "15.1.5",
+    "lucide-react": "^0.474.0",
+    "next": "15.1.6",
     "openapi-types": "^12.1.3",
-    "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": "*",
     "next": "14.x.x || 15.x.x",
     "react": "18.x.x || 19.x.x",
     "react-dom": "18.x.x || 19.x.x"
   },
+  "peerDependenciesMeta": {
+    "@scalar/api-client-react": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "access": "public"
   },