fumadocs-openapi 5.11.0 → 5.11.2

package/dist/ui/{fetcher-B7R5rjLv.js → fetcher-C0NHTJev.js}

@@ -1,4 +1,4 @@
-import { r as resolve } from './index-client-B6op0H4J.js';
+import { r as resolve } from './index-client-wsc_5cAY.js';
 
 /**
  * @param bodySchema - schema of body

package/dist/ui/{index-client-B6op0H4J.js → index-client-wsc_5cAY.js}

@@ -1,15 +1,13 @@
 'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as React from 'react';
 import { forwardRef, useId, createContext, useContext, useState, useCallback, useRef, useEffect, useMemo } from 'react';
 import { FormProvider, Controller, useFormContext, useFieldArray, useForm, useWatch } from 'react-hook-form';
 import { Accordions, Accordion } from 'fumadocs-ui/components/accordion';
 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 useApiContext, d as CircleCheck, e as CircleX, S as SchemaContext } from './client-client-NS2E5Jdn.js';
+import { u as useSchemaContext, T as Trash2, I as Input, S as Select, a as SelectTrigger, b as SelectValue, c as SelectContent, d as SelectItem, P as Plus, C as CircleCheck, e as CircleX, f as useApiContext, g as SchemaContext, h as getUrl } from './client-client-Dxsry8Mu.js';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { useOnChange } from 'fumadocs-core/utils/use-on-change';
-import * as SelectPrimitive from '@radix-ui/react-select';
 import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
 
 const Form = FormProvider;
@@ -56,7 +54,7 @@ const FormItem = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
     });
 });
 FormItem.displayName = 'FormItem';
-const labelVariants = cva('text-xs font-medium text-fd-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70');
+const labelVariants = cva('font-mono text-xs text-fd-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70');
 const FormLabel = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
     const { isError, formItemId } = useFormField();
     return /*#__PURE__*/ jsx("label", {
@@ -123,98 +121,6 @@ function getDefaultValues(field, context) {
         ]));
 }
 
-const Select = SelectPrimitive.Root;
-const SelectValue = SelectPrimitive.Value;
-const SelectTrigger = /*#__PURE__*/ forwardRef(({ className, children, ...props }, ref)=>/*#__PURE__*/ jsxs(SelectPrimitive.Trigger, {
-        ref: ref,
-        className: cn('flex h-10 items-center justify-between rounded-md border px-3 py-2 text-sm text-fd-foreground hover:bg-fd-accent focus:outline-none focus:ring-2 focus:ring-fd-ring disabled:cursor-not-allowed disabled:opacity-50', className),
-        ...props,
-        children: [
-            children,
-            /*#__PURE__*/ jsx(SelectPrimitive.Icon, {
-                asChild: true,
-                children: /*#__PURE__*/ jsx(ChevronDown, {
-                    className: "size-4 text-fd-muted-foreground"
-                })
-            })
-        ]
-    }));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-const SelectScrollUpButton = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(SelectPrimitive.ScrollUpButton, {
-        ref: ref,
-        className: cn('flex items-center justify-center py-1', className),
-        ...props,
-        children: /*#__PURE__*/ jsx(ChevronUp, {
-            className: "size-4"
-        })
-    }));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-const SelectScrollDownButton = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(SelectPrimitive.ScrollDownButton, {
-        ref: ref,
-        className: cn('flex items-center justify-center py-1', className),
-        ...props,
-        children: /*#__PURE__*/ jsx(ChevronDown, {
-            className: "size-4"
-        })
-    }));
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-const SelectContent = /*#__PURE__*/ forwardRef(({ className, children, position = 'popper', ...props }, ref)=>/*#__PURE__*/ jsx(SelectPrimitive.Portal, {
-        children: /*#__PURE__*/ jsxs(SelectPrimitive.Content, {
-            ref: ref,
-            className: cn('z-50 overflow-hidden rounded-lg border bg-fd-popover text-fd-popover-foreground shadow-md data-[state=closed]:animate-fd-popover-out data-[state=open]:animate-fd-popover-in', className),
-            position: position,
-            ...props,
-            children: [
-                /*#__PURE__*/ jsx(SelectScrollUpButton, {}),
-                /*#__PURE__*/ jsx(SelectPrimitive.Viewport, {
-                    className: cn('p-1', position === 'popper' && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'),
-                    children: children
-                }),
-                /*#__PURE__*/ jsx(SelectScrollDownButton, {})
-            ]
-        })
-    }));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-const SelectLabel = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(SelectPrimitive.Label, {
-        ref: ref,
-        className: cn('py-1.5 pe-2 ps-6 text-sm font-semibold', className),
-        ...props
-    }));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-const SelectItem = /*#__PURE__*/ forwardRef(({ className, children, ...props }, ref)=>/*#__PURE__*/ jsxs(SelectPrimitive.Item, {
-        ref: ref,
-        className: cn('flex select-none flex-row items-center rounded-md py-1.5 pe-2 ps-6 text-sm outline-none focus:bg-fd-accent focus:text-fd-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', className),
-        ...props,
-        children: [
-            /*#__PURE__*/ jsx(SelectPrimitive.ItemIndicator, {
-                className: "absolute start-2",
-                children: /*#__PURE__*/ jsx(Check, {
-                    className: "size-4"
-                })
-            }),
-            /*#__PURE__*/ jsx(SelectPrimitive.ItemText, {
-                children: children
-            })
-        ]
-    }));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-const SelectSeparator = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(SelectPrimitive.Separator, {
-        ref: ref,
-        className: cn('my-1 h-px bg-fd-muted', className),
-        ...props
-    }));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-
-const Input = /*#__PURE__*/ React.forwardRef(({ className, type, ...props }, ref)=>{
-    return /*#__PURE__*/ jsx("input", {
-        type: type,
-        className: cn('flex h-9 w-full rounded-md border bg-transparent px-2 py-1.5 text-sm 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
-    });
-});
-Input.displayName = 'Input';
-
 function renderInner({ field, ...props }) {
     if (field.type === 'object') return /*#__PURE__*/ jsx(ObjectInput, {
         field: field,
@@ -240,7 +146,7 @@ function renderInner({ field, ...props }) {
 function InputContainer({ toolbar, name, required, type, description, inline = false, ...props }) {
     return /*#__PURE__*/ jsxs("div", {
         ...props,
-        className: cn('flex flex-col gap-2', props.className),
+        className: cn('flex flex-col gap-1', props.className),
         children: [
             /*#__PURE__*/ jsxs("div", {
                 className: cn(labelVariants(), 'inline-flex items-center gap-1'),
@@ -674,15 +580,6 @@ function ArrayInput({ fieldName, field, ...props }) {
     });
 }
 
-function CodeBlock({ code, lang = 'json' }) {
-    const { shikiOptions } = useApiContext();
-    return /*#__PURE__*/ jsx(DynamicCodeBlock, {
-        lang: lang,
-        code: code,
-        options: shikiOptions
-    });
-}
-
 const statusMap = {
     400: {
         description: 'Bad Request',
@@ -735,8 +632,8 @@ function getStatusInfo(status) {
     };
 }
 
-function APIPlayground({ route, method = 'GET', authorization, path = [], header = [], query = [], body, fields = {}, schemas, proxyUrl }) {
-    const { baseUrl } = useApiContext();
+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: {
@@ -748,14 +645,13 @@ function APIPlayground({ route, method = 'GET', authorization, path = [], header
         }
     });
     const testQuery = useQuery(async (input)=>{
-        const fetcher = await import('./fetcher-B7R5rjLv.js').then((mod)=>mod.createBrowserFetcher(body, schemas));
-        const targetUrl = `${baseUrl ?? window.location.origin}${createPathnameFromInput(route, input.path, input.query)}`;
-        let url;
+        const fetcher = await import('./fetcher-C0NHTJev.js').then((mod)=>mod.createBrowserFetcher(body, schemas));
+        const serverUrl = serverRef.current ? getUrl(serverRef.current.url, serverRef.current.variables) : window.location.origin;
+        let url = `${serverUrl}${createPathnameFromInput(route, input.path, input.query)}`;
         if (proxyUrl) {
-            url = new URL(proxyUrl, window.location.origin);
-            url.searchParams.append('url', targetUrl);
-        } else {
-            url = new URL(targetUrl);
+            const updated = new URL(proxyUrl, window.location.origin);
+            updated.searchParams.append('url', url);
+            url = updated.toString();
         }
         const header = {
             ...input.header
@@ -819,7 +715,8 @@ function APIPlayground({ route, method = 'GET', authorization, path = [], header
                 schemas
             ]),
             children: /*#__PURE__*/ jsxs("form", {
-                className: "not-prose flex flex-col gap-5 rounded-xl border bg-fd-card p-3",
+                ...props,
+                className: cn('not-prose flex flex-col gap-5 rounded-xl border bg-fd-card p-3', props.className),
                 onSubmit: onSubmit,
                 children: [
                     /*#__PURE__*/ jsxs("div", {
@@ -911,10 +808,11 @@ function RouteDisplay({ route }) {
         children: pathname
     });
 }
-function ResultDisplay({ data }) {
+function DefaultResultDisplay({ data }) {
     const statusInfo = useMemo(()=>getStatusInfo(data.status), [
         data.status
     ]);
+    const { shikiOptions } = useApiContext();
     return /*#__PURE__*/ jsxs("div", {
         className: "flex flex-col gap-3 rounded-lg border bg-fd-card p-4",
         children: [
@@ -931,9 +829,10 @@ function ResultDisplay({ data }) {
                 className: "text-sm text-fd-muted-foreground",
                 children: data.status
             }),
-            data.data ? /*#__PURE__*/ jsx(CodeBlock, {
+            data.data ? /*#__PURE__*/ jsx(DynamicCodeBlock, {
                 lang: typeof data.data === 'string' && data.data.length > 50000 ? 'text' : data.type,
-                code: typeof data.data === 'string' ? data.data : JSON.stringify(data.data, null, 2)
+                code: typeof data.data === 'string' ? data.data : JSON.stringify(data.data, null, 2),
+                ...shikiOptions
             }) : null
         ]
     });

package/dist/ui/index.d.ts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, ComponentType, ReactElement, RefObject, HTMLAttributes } from 'react';
-import { FieldPath, ControllerRenderProps, ControllerFieldState, UseFormStateReturn } from 'react-hook-form';
+import { ReactNode, ComponentType, RefObject, ReactElement, HTMLAttributes } from 'react';
 import { OpenAPIV3_1 } from 'openapi-types';
 import Slugger from 'github-slugger';
 import { CodeToHastOptionsCommon, CodeOptionsThemes, BuiltinTheme } from 'shiki';
+import { FieldPath, ControllerRenderProps, ControllerFieldState, UseFormStateReturn } from 'react-hook-form';
 
 type NoReference<T> = T extends (infer I)[] ? NoReference<I>[] : T extends ReferenceObject ? Exclude<T, ReferenceObject> : T extends object ? {
     [K in keyof T]: NoReference<T[K]>;
@@ -48,6 +48,7 @@ interface CodeSample {
 
 type Document = OpenAPIV3_1.Document;
 type ReferenceObject = OpenAPIV3_1.ReferenceObject;
+type ServerObject = NoReference<OpenAPIV3_1.ServerObject>;
 type Awaitable<T> = T | Promise<T>;
 /**
  * Dereferenced value and its original `$ref` value
@@ -64,7 +65,7 @@ interface RenderContext {
      */
     document: NoReference<Document>;
     baseUrl: string;
-    baseUrls: string[];
+    servers: ServerObject[];
     slugger: Slugger;
     dereferenceMap: DereferenceMap;
     /**
@@ -153,7 +154,6 @@ interface ResponseProps {
 interface APIInfoProps {
     method: string;
     route: string;
-    baseUrls: string[];
     head: ReactNode;
     children: ReactNode;
 }
@@ -180,6 +180,7 @@ interface ResponseTypeProps {
 }
 interface RootProps {
     baseUrl?: string;
+    servers: ServerObject[];
     children: ReactNode;
 }
 interface Renderer {
@@ -210,6 +211,25 @@ interface Renderer {
     APIPlayground: ComponentType<APIPlaygroundProps>;
 }
 
+interface SchemaContextType {
+    references: Record<string, RequestSchema>;
+    dynamic: RefObject<Map<string, DynamicField>>;
+}
+type DynamicField = {
+    type: 'object';
+    properties: string[];
+} | {
+    type: 'field';
+    schema: RequestSchema | ReferenceSchema;
+};
+declare function useSchemaContext(): SchemaContextType;
+
+interface FetchResult {
+    status: number;
+    type: 'json' | 'html' | 'text';
+    data: unknown;
+}
+
 interface FormValues {
     authorization: string;
     path: Record<string, unknown>;
@@ -229,19 +249,6 @@ interface CustomField<TName extends FieldPath<FormValues>, Info> {
     }) => ReactElement;
 }
 
-interface SchemaContextType {
-    references: Record<string, RequestSchema>;
-    dynamic: RefObject<Map<string, DynamicField>>;
-}
-type DynamicField = {
-    type: 'object';
-    properties: string[];
-} | {
-    type: 'field';
-    schema: RequestSchema | ReferenceSchema;
-};
-declare function useSchemaContext(): SchemaContextType;
-
 declare const APIPlayground: react.ComponentType<APIPlaygroundProps & {
     fields?: {
         auth?: CustomField<"authorization", PrimitiveRequestField>;
@@ -250,12 +257,17 @@ declare const APIPlayground: react.ComponentType<APIPlaygroundProps & {
         header?: CustomField<`header.${string}`, PrimitiveRequestField>;
         body?: CustomField<"body", RequestSchema>;
     };
+    components?: Partial<{
+        ResultDisplay: react.FC<{
+            data: FetchResult;
+        }>;
+    }>;
 } & HTMLAttributes<HTMLFormElement>>;
-declare function Root({ children, baseUrl, className, shikiOptions, ...props }: RootProps & {
+declare function Root({ children, baseUrl, className, shikiOptions, servers, ...props }: RootProps & {
     shikiOptions: RenderContext['shikiOptions'];
 } & HTMLAttributes<HTMLDivElement>): ReactNode;
 
-declare function APIInfo({ className, route, badgeClassname, baseUrls, method, head, ...props }: APIInfoProps & HTMLAttributes<HTMLDivElement> & {
+declare function APIInfo({ className, route, badgeClassname, method, head, ...props }: APIInfoProps & HTMLAttributes<HTMLDivElement> & {
     badgeClassname?: string;
 }): react_jsx_runtime.JSX.Element;
 declare function API({ children, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;

package/dist/ui/index.js

@@ -3,8 +3,8 @@ import { cn } from 'fumadocs-ui/components/api';
 import { Fragment } from 'react';
 import { Accordions, Accordion } from 'fumadocs-ui/components/accordion';
 import { cva } from 'class-variance-authority';
-import { f as CopyRouteButton, B as BaseUrlSelect } from './client-client-NS2E5Jdn.js';
-export { A as APIPlayground, R as Root, u as useSchemaContext } from './client-client-NS2E5Jdn.js';
+import { i as CopyRouteButton, j as ServerSelect } from './client-client-Dxsry8Mu.js';
+export { A as APIPlayground, R as Root, u as useSchemaContext } from './client-client-Dxsry8Mu.js';
 
 const badgeVariants = cva('rounded-xl border px-1.5 py-1 text-xs font-medium leading-[12px]', {
     variants: {
@@ -53,17 +53,17 @@ function Route({ route }) {
             }, index))
     });
 }
-function APIInfo({ className, route, badgeClassname, baseUrls, method = 'GET', head, ...props }) {
+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: "sticky top-[var(--fd-api-info-top)] z-[4] mb-4 border-b border-fd-foreground/10 bg-fd-card/50 px-4 py-1.5 shadow-lg backdrop-blur-lg max-lg:-mx-3 max-md:-mx-4 md:rounded-xl md:border md:px-1.5",
+                className: "not-prose mb-4 rounded-lg border bg-fd-card p-3 text-fd-card-foreground shadow-lg",
                 children: [
                     /*#__PURE__*/ jsxs("div", {
-                        className: "flex flex-row items-center gap-1.5",
+                        className: "-mx-1 flex flex-row items-center gap-1.5",
                         children: [
                             /*#__PURE__*/ jsx("span", {
                                 className: cn(badgeVariants({
@@ -80,9 +80,7 @@ function APIInfo({ className, route, badgeClassname, baseUrls, method = 'GET', h
                             })
                         ]
                     }),
-                    /*#__PURE__*/ jsx(BaseUrlSelect, {
-                        baseUrls: baseUrls
-                    })
+                    /*#__PURE__*/ jsx(ServerSelect, {})
                 ]
             }),
             /*#__PURE__*/ jsx("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-openapi",
-  "version": "5.11.0",
+  "version": "5.11.2",
   "description": "Generate MDX docs for your OpenAPI spec",
   "keywords": [
     "NextJs",
@@ -47,8 +47,8 @@
     "remark-rehype": "^11.1.1",
     "shiki": "^1.26.1",
     "xml-js": "^1.6.11",
-    "fumadocs-core": "14.7.0",
-    "fumadocs-ui": "14.7.0"
+    "fumadocs-core": "14.7.2",
+    "fumadocs-ui": "14.7.2"
   },
   "devDependencies": {
     "@types/js-yaml": "^4.0.9",