fumadocs-openapi 5.11.0 → 5.11.2

package/dist/index.d.ts

@@ -73,7 +73,6 @@ interface ResponseProps {
 interface APIInfoProps {
     method: string;
     route: string;
-    baseUrls: string[];
     head: ReactNode;
     children: ReactNode;
 }
@@ -100,6 +99,7 @@ interface ResponseTypeProps {
 }
 interface RootProps {
     baseUrl?: string;
+    servers: ServerObject[];
     children: ReactNode;
 }
 interface Renderer {
@@ -178,12 +178,7 @@ type SecuritySchemeObject = OpenAPIV3_1.SecuritySchemeObject;
 type ReferenceObject = OpenAPIV3_1.ReferenceObject;
 type PathItemObject = OpenAPIV3_1.PathItemObject;
 type TagObject = OpenAPIV3_1.TagObject;
-interface RouteInformation {
-    path: string;
-    summary?: string;
-    description?: string;
-    methods: MethodInformation[];
-}
+type ServerObject = NoReference<OpenAPIV3_1.ServerObject>;
 type MethodInformation = NoReference<OperationObject> & {
     method: string;
 };
@@ -203,7 +198,7 @@ interface RenderContext {
      */
     document: NoReference<Document>;
     baseUrl: string;
-    baseUrls: string[];
+    servers: ServerObject[];
     slugger: Slugger;
     dereferenceMap: DereferenceMap;
     /**
@@ -322,4 +317,4 @@ interface Config extends GenerateOptions {
 }
 declare function generateFiles(options: Config): Promise<void>;
 
-export { type Config, type DereferenceMap, type Document, type GenerateOptions, type GeneratePageOutput, type GenerateTagOutput, type MethodInformation, type OperationObject, type ParameterObject, type PathItemObject, type ReferenceObject, type RenderContext, type RouteInformation, type SecurityRequirementObject, type SecuritySchemeObject, type TagObject, generateAll, generateFiles, generatePages, generateTags };
+export { type Config, type DereferenceMap, type Document, type GenerateOptions, type GeneratePageOutput, type GenerateTagOutput, type MethodInformation, type OperationObject, type ParameterObject, type PathItemObject, type ReferenceObject, type RenderContext, type SecurityRequirementObject, type SecuritySchemeObject, type ServerObject, type TagObject, generateAll, generateFiles, generatePages, generateTags };

package/dist/server/index.d.ts

@@ -75,7 +75,6 @@ interface ResponseProps {
 interface APIInfoProps {
     method: string;
     route: string;
-    baseUrls: string[];
     head: ReactNode;
     children: ReactNode;
 }
@@ -102,6 +101,7 @@ interface ResponseTypeProps {
 }
 interface RootProps {
     baseUrl?: string;
+    servers: ServerObject[];
     children: ReactNode;
 }
 interface Renderer {
@@ -174,6 +174,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
@@ -190,7 +191,7 @@ interface RenderContext {
      */
     document: NoReference<Document>;
     baseUrl: string;
-    baseUrls: string[];
+    servers: ServerObject[];
     slugger: Slugger;
     dereferenceMap: DereferenceMap;
     /**

package/dist/server/index.js

@@ -24,26 +24,6 @@ function getPreferredType(body) {
     if ('application/json' in body) return 'application/json';
     return Object.keys(body)[0];
 }
-/**
- * Convert input to string (with quotes)
- */ function inputToString(value, mediaType = 'application/json', multiLine = 'none') {
-    const getStr = (v)=>{
-        if (multiLine === 'none') return JSON.stringify(v);
-        const delimit = multiLine === 'backtick' ? `\`` : `'`;
-        return `${delimit}${v.replaceAll(delimit, `\\${delimit}`)}${delimit}`;
-    };
-    if (typeof value === 'string') return getStr(value);
-    if (mediaType === 'application/json' || mediaType === 'multipart/form-data') {
-        return getStr(JSON.stringify(value, null, 2));
-    }
-    if (mediaType === 'application/xml') {
-        return getStr(js2xml(value, {
-            compact: true,
-            spaces: 2
-        }));
-    }
-    throw new Error(`Unsupported media type: ${mediaType}`);
-}
 function isNullable(schema, includeOneOf = true) {
     if (Array.isArray(schema.type) && schema.type.includes('null')) return true;
     if (includeOneOf && (schema.anyOf || schema.oneOf)) {
@@ -159,6 +139,27 @@ function generateBody(method, schema) {
     });
 }
 
+/**
+ * Convert input value to hardcoded string (with quotes)
+ */ function inputToString(value, mediaType = 'application/json', multiLine = 'none') {
+    const getStr = (v)=>{
+        if (multiLine === 'none') return JSON.stringify(v);
+        const delimit = multiLine === 'backtick' ? `\`` : `'`;
+        return `${delimit}${v.replaceAll(delimit, `\\${delimit}`)}${delimit}`;
+    };
+    if (typeof value === 'string') return getStr(value);
+    if (mediaType === 'application/json' || mediaType === 'multipart/form-data') {
+        return getStr(JSON.stringify(value, null, 2));
+    }
+    if (mediaType === 'application/xml') {
+        return getStr(js2xml(value, {
+            compact: true,
+            spaces: 2
+        }));
+    }
+    throw new Error(`Unsupported media type: ${mediaType}`);
+}
+
 function getSampleRequest$3(endpoint) {
     const s = [];
     s.push(`curl -X ${endpoint.method} "${endpoint.url}"`);
@@ -791,7 +792,6 @@ const methodKeys = [
 ];
 
 function Operation({ type = 'operation', path, method, ctx, hasHead, headingLevel = 2 }) {
-    const { baseUrls } = ctx;
     const body = method.requestBody;
     const security = method.security ?? ctx.document.security;
     let headNode = null;
@@ -906,7 +906,6 @@ function Operation({ type = 'operation', path, method, ctx, hasHead, headingLeve
         head: headNode,
         method: method.method,
         route: path,
-        baseUrls: type === 'operation' ? baseUrls : [],
         children: [
             type === 'operation' ? /*#__PURE__*/ jsx(Playground, {
                 path: path,
@@ -1259,6 +1258,7 @@ async function APIPage(props) {
     const { document } = processed;
     return /*#__PURE__*/ jsxs(ctx.renderer.Root, {
         baseUrl: ctx.baseUrl,
+        servers: ctx.servers,
         children: [
             operations?.map((item)=>{
                 const pathItem = document.paths?.[item.path];
@@ -1306,7 +1306,7 @@ async function getContext({ document, dereferenceMap }, options = {}) {
         generateTypeScriptSchema: options.generateTypeScriptSchema,
         generateCodeSamples: options.generateCodeSamples,
         baseUrl: document.servers?.[0].url ?? 'https://example.com',
-        baseUrls: document.servers?.map((s)=>s.url) ?? [],
+        servers: document.servers ?? [],
         slugger: new Slugger()
     };
 }

package/dist/ui/client-client-Dxsry8Mu.js

@@ -0,0 +1,538 @@
+'use client';
+import * as React from 'react';
+import { forwardRef, createElement, useContext, createContext, useState, useRef, useEffect, useMemo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cn, useCopyButton, buttonVariants } from 'fumadocs-ui/components/api';
+import dynamic from 'next/dynamic';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from 'fumadocs-ui/components/ui/collapsible';
+
+/**
+ * @license lucide-react v0.469.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.469.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 Check = createLucideIcon("Check", [
+    [
+        "path",
+        {
+            d: "M20 6 9 17l-5-5",
+            key: "1gmf2c"
+        }
+    ]
+]);
+
+const ChevronDown = createLucideIcon("ChevronDown", [
+    [
+        "path",
+        {
+            d: "m6 9 6 6 6-6",
+            key: "qrunsl"
+        }
+    ]
+]);
+
+const ChevronUp = createLucideIcon("ChevronUp", [
+    [
+        "path",
+        {
+            d: "m18 15-6-6-6 6",
+            key: "153udz"
+        }
+    ]
+]);
+
+const CircleCheck = createLucideIcon("CircleCheck", [
+    [
+        "circle",
+        {
+            cx: "12",
+            cy: "12",
+            r: "10",
+            key: "1mglay"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "m9 12 2 2 4-4",
+            key: "dzmm74"
+        }
+    ]
+]);
+
+const CircleX = createLucideIcon("CircleX", [
+    [
+        "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 Copy = createLucideIcon("Copy", [
+    [
+        "rect",
+        {
+            width: "14",
+            height: "14",
+            x: "8",
+            y: "8",
+            rx: "2",
+            ry: "2",
+            key: "17jyea"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2",
+            key: "zix9uf"
+        }
+    ]
+]);
+
+const Plus = createLucideIcon("Plus", [
+    [
+        "path",
+        {
+            d: "M5 12h14",
+            key: "1ays0h"
+        }
+    ],
+    [
+        "path",
+        {
+            d: "M12 5v14",
+            key: "s699le"
+        }
+    ]
+]);
+
+const Trash2 = createLucideIcon("Trash2", [
+    [
+        "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 ApiContext = /*#__PURE__*/ createContext(undefined);
+const ServerSelectContext = /*#__PURE__*/ createContext(undefined);
+function useApiContext() {
+    const ctx = useContext(ApiContext);
+    if (!ctx) throw new Error('Component must be used under <ApiProvider />');
+    return ctx;
+}
+function useServerSelectContext() {
+    const ctx = useContext(ServerSelectContext);
+    if (!ctx) throw new Error('Component must be used under <ApiProvider />');
+    return ctx;
+}
+function ApiProvider({ defaultBaseUrl, children, ...props }) {
+    const [server, setServer] = useState(()=>{
+        const defaultItem = defaultBaseUrl ? props.servers.find((item)=>item.url === defaultBaseUrl) : undefined;
+        return defaultItem ? {
+            url: defaultItem.url,
+            variables: getDefaultValues(defaultItem)
+        } : null;
+    });
+    const serverRef = useRef(server);
+    serverRef.current = server;
+    useEffect(()=>{
+        const cached = localStorage.getItem('apiBaseUrl');
+        if (!cached) return;
+        try {
+            const obj = JSON.parse(cached);
+            if (!obj || typeof obj !== 'object') return;
+            setServer(obj);
+        } catch  {
+        // ignore
+        }
+    }, []);
+    return /*#__PURE__*/ jsx(ApiContext.Provider, {
+        value: useMemo(()=>({
+                ...props,
+                serverRef
+            }), [
+            props
+        ]),
+        children: /*#__PURE__*/ jsx(ServerSelectContext.Provider, {
+            value: useMemo(()=>({
+                    server,
+                    setServerVariables (variables) {
+                        setServer((prev)=>{
+                            if (!prev) return null;
+                            const updated = {
+                                ...prev,
+                                variables
+                            };
+                            localStorage.setItem('apiBaseUrl', JSON.stringify(updated));
+                            return updated;
+                        });
+                    },
+                    setServer (value) {
+                        const obj = props.servers.find((item)=>item.url === value);
+                        if (!obj) return;
+                        const result = {
+                            url: value,
+                            variables: getDefaultValues(obj)
+                        };
+                        localStorage.setItem('apiBaseUrl', JSON.stringify(result));
+                        setServer(result);
+                    }
+                }), [
+                server,
+                props.servers
+            ]),
+            children: children
+        })
+    });
+}
+function getDefaultValues(server) {
+    return Object.fromEntries(Object.entries(server.variables ?? {}).map(([k, v])=>[
+            k,
+            v.default
+        ]));
+}
+
+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';
+
+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;
+
+function getUrl(url, variables) {
+    let out = url;
+    for (const [key, value] of Object.entries(variables)){
+        out = out.replaceAll(`{${key}}`, value);
+    }
+    return out;
+}
+
+const SchemaContext = /*#__PURE__*/ createContext(undefined);
+function useSchemaContext() {
+    const ctx = useContext(SchemaContext);
+    if (!ctx) throw new Error('Missing provider');
+    return ctx;
+}
+
+const APIPlayground = dynamic(()=>import('./index-client-wsc_5cAY.js').then(function (n) { return n.i; }).then((mod)=>mod.APIPlayground));
+function Root({ children, baseUrl, className, shikiOptions, servers, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn('flex flex-col gap-24 text-sm text-fd-muted-foreground', className),
+        ...props,
+        children: /*#__PURE__*/ jsx(ApiProvider, {
+            servers: servers,
+            shikiOptions: shikiOptions,
+            defaultBaseUrl: baseUrl,
+            children: children
+        })
+    });
+}
+function CopyRouteButton({ className, route, ...props }) {
+    const { serverRef } = useApiContext();
+    const [checked, onCopy] = useCopyButton(()=>{
+        void navigator.clipboard.writeText(`${serverRef.current ? getUrl(serverRef.current.url, serverRef.current.variables) : ''}${route}`);
+    });
+    return /*#__PURE__*/ jsx("button", {
+        type: "button",
+        className: cn(buttonVariants({
+            color: 'ghost',
+            className
+        })),
+        onClick: onCopy,
+        "aria-label": "Copy route path",
+        ...props,
+        children: checked ? /*#__PURE__*/ jsx(Check, {
+            className: "size-full"
+        }) : /*#__PURE__*/ jsx(Copy, {
+            className: "size-full"
+        })
+    });
+}
+function ServerSelect() {
+    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(Collapsible, {
+        className: "-m-2 mt-2",
+        children: [
+            /*#__PURE__*/ jsxs(CollapsibleTrigger, {
+                className: "flex w-full flex-row items-center justify-between p-2 text-xs font-medium",
+                children: [
+                    "Configure Server",
+                    /*#__PURE__*/ jsx(ChevronDown, {
+                        className: "size-4 text-fd-muted-foreground"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(CollapsibleContent, {
+                children: /*#__PURE__*/ jsxs("div", {
+                    className: "flex flex-col gap-4 p-2",
+                    children: [
+                        /*#__PURE__*/ jsxs(Select, {
+                            value: server?.url,
+                            onValueChange: setServer,
+                            children: [
+                                /*#__PURE__*/ jsx(SelectTrigger, {
+                                    className: "h-auto",
+                                    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-xs 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: "font-mono text-xs text-fd-foreground",
+                                        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 { APIPlayground as A, CircleCheck as C, Input as I, Plus as P, Root as R, Select as S, Trash2 as T, SelectTrigger as a, SelectValue as b, SelectContent as c, SelectItem as d, CircleX as e, useApiContext as f, SchemaContext as g, getUrl as h, CopyRouteButton as i, ServerSelect as j, useSchemaContext as u };