fumadocs-openapi 5.11.8 → 6.0.0

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

@@ -1,93 +1,214 @@
 '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 { Collapsible, CollapsibleTrigger, CollapsibleContent } from 'fumadocs-ui/components/ui/collapsible';
+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 Check, b as ChevronUp, 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-B06fJG48.js';
-import { Slot } from '@radix-ui/react-slot';
-import { cva } from 'class-variance-authority';
-import { useOnChange } from 'fumadocs-core/utils/use-on-change';
+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-CbFencmM.js';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from 'fumadocs-ui/components/ui/collapsible';
 
-const Form = FormProvider;
-const FormFieldContext = /*#__PURE__*/ createContext({
-    name: ''
-});
-const FormItemContext = /*#__PURE__*/ createContext({
-    id: ''
+/**
+ * @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
+        ]
+    ]);
 });
-function FormField({ ...props }) {
-    return /*#__PURE__*/ jsx(FormFieldContext.Provider, {
-        value: {
-            name: props.name
-        },
-        children: /*#__PURE__*/ jsx(Controller, {
-            ...props
-        })
-    });
-}
-function useFormField() {
-    const fieldContext = useContext(FormFieldContext);
-    const { id } = useContext(FormItemContext);
-    const { getFieldState, formState } = useFormContext();
-    const fieldState = getFieldState(fieldContext.name, formState);
-    return {
-        id,
-        name: fieldContext.name,
-        formItemId: `${id}-form-item`,
-        formDescriptionId: `${id}-form-item-description`,
-        isError: Boolean(fieldState.error)
-    };
-}
-const FormItem = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
-    const id = useId();
-    return /*#__PURE__*/ jsx(FormItemContext.Provider, {
-        value: {
-            id
-        },
-        children: /*#__PURE__*/ jsx("div", {
-            ref: ref,
-            className: cn('flex flex-col gap-1', className),
+
+const createLucideIcon = (iconName, iconNode)=>{
+    const Component = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ createElement(Icon, {
+            ref,
+            iconNode,
+            className: mergeClasses(`lucide-${toKebabCase(iconName)}`, className),
             ...props
-        })
-    });
-});
-FormItem.displayName = 'FormItem';
-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", {
-        ref: ref,
-        className: cn(labelVariants(), isError && 'text-red-500', className),
-        htmlFor: formItemId,
-        ...props
-    });
-});
-FormLabel.displayName = 'FormLabel';
-const FormControl = /*#__PURE__*/ forwardRef(({ ...props }, ref)=>{
-    const { isError, formItemId, formDescriptionId } = useFormField();
-    return /*#__PURE__*/ jsx(Slot, {
-        ref: ref,
-        id: formItemId,
-        "aria-describedby": formDescriptionId,
-        "aria-invalid": isError,
-        ...props
-    });
-});
-FormControl.displayName = 'FormControl';
-const FormDescription = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
-    const { formDescriptionId } = useFormField();
-    return /*#__PURE__*/ jsx("p", {
-        ref: ref,
-        id: formDescriptionId,
-        className: cn('text-xs text-fd-muted-foreground', className),
-        ...props
-    });
-});
-FormDescription.displayName = 'FormDescription';
+        }));
+    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
@@ -127,7 +248,7 @@ 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 rounded-md border px-3 py-2 text-start 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),
+        className: cn('flex h-10 items-center w-full rounded-md border px-3 py-2 text-start text-[13px] 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,
@@ -158,16 +279,16 @@ const SelectScrollDownButton = /*#__PURE__*/ forwardRef(({ className, ...props }
         })
     }));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-const SelectContent = /*#__PURE__*/ forwardRef(({ className, children, position = 'popper', ...props }, ref)=>/*#__PURE__*/ jsx(SelectPrimitive.Portal, {
+const SelectContent = /*#__PURE__*/ forwardRef(({ className, children, position, ...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),
+            className: cn('z-50 overflow-hidden rounded-lg border bg-fd-popover text-fd-popover-foreground shadow-md', 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)]'),
+                    className: "p-1",
                     children: children
                 }),
                 /*#__PURE__*/ jsx(SelectScrollDownButton, {})
@@ -183,7 +304,7 @@ const SelectLabel = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#
 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),
+        className: cn('flex select-none flex-row items-center rounded-md py-1.5 pe-2 ps-6 text-[13px] 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, {
@@ -205,64 +326,36 @@ const SelectSeparator = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=
     }));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
+const labelVariants = cva('text-[13px] font-mono text-fd-card-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70');
 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),
+        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
     });
 });
 Input.displayName = 'Input';
 
-function renderInner({ field, ...props }) {
-    if (field.type === 'object') return /*#__PURE__*/ jsx(ObjectInput, {
-        field: field,
+function FieldHeader({ name, required = false, type, ...props }) {
+    return /*#__PURE__*/ jsxs("label", {
         ...props,
-        className: cn('rounded-lg border bg-fd-accent/20 p-3', props.className)
-    });
-    if (field.type === 'switcher') return /*#__PURE__*/ jsx(Switcher, {
-        inline: true,
-        field: field,
-        ...props
-    });
-    if (field.type === 'array') return /*#__PURE__*/ jsx(ArrayInput, {
-        field: field,
-        ...props,
-        className: cn('rounded-lg border bg-fd-background p-3', props.className)
-    });
-    if (field.type === 'null') return null;
-    return /*#__PURE__*/ jsx(NormalInput, {
-        field: field,
-        ...props
-    });
-}
-function InputContainer({ toolbar, name, required, type, description, inline = false, ...props }) {
-    return /*#__PURE__*/ jsxs("div", {
-        ...props,
-        className: cn('flex flex-col gap-1', props.className),
+        className: cn('w-full inline-flex items-center gap-1', props.className),
         children: [
-            /*#__PURE__*/ jsxs("div", {
-                className: cn(labelVariants(), 'inline-flex items-center gap-1'),
-                children: [
-                    name,
-                    required ? /*#__PURE__*/ jsx("span", {
-                        className: "text-red-500",
-                        children: "*"
-                    }) : null,
-                    /*#__PURE__*/ jsx("div", {
-                        className: "flex-1"
-                    }),
-                    type ? /*#__PURE__*/ jsx("code", {
-                        className: "text-xs text-fd-muted-foreground",
-                        children: type
-                    }) : null,
-                    toolbar
-                ]
+            /*#__PURE__*/ jsx("span", {
+                className: cn(labelVariants()),
+                children: name
             }),
-            !inline ? /*#__PURE__*/ jsx("p", {
-                className: "text-xs",
-                children: description
+            required ? /*#__PURE__*/ jsx("span", {
+                className: "text-red-500",
+                children: "*"
+            }) : null,
+            /*#__PURE__*/ jsx("div", {
+                className: "flex-1"
+            }),
+            type ? /*#__PURE__*/ jsx("code", {
+                className: "text-xs text-fd-muted-foreground",
+                children: type
             }) : null,
             props.children
         ]
@@ -272,9 +365,9 @@ function ObjectInput({ field, fieldName, ...props }) {
     const { references } = useSchemaContext();
     return /*#__PURE__*/ jsxs("div", {
         ...props,
-        className: cn('flex flex-col gap-4', props.className),
+        className: cn('flex flex-col gap-6', props.className),
         children: [
-            Object.entries(field.properties).map(([key, child])=>/*#__PURE__*/ jsx(InputField, {
+            Object.entries(field.properties).map(([key, child])=>/*#__PURE__*/ jsx(FieldSet, {
                     name: key,
                     field: resolve(child, references),
                     fieldName: `${fieldName}.${key}`
@@ -295,13 +388,11 @@ function AdditionalProperties({ fieldName, type }) {
         if (d?.type === 'object') return d.properties;
         return [];
     });
-    useOnChange(properties, ()=>{
-        dynamic.current.set(`additional_${fieldName}`, {
-            type: 'object',
-            properties
-        });
+    dynamic.current.set(`additional_${fieldName}`, {
+        type: 'object',
+        properties
     });
-    const onAppend = useCallback(()=>{
+    const onAppend = ()=>{
         const name = nextName.trim();
         if (name.length === 0) return;
         setProperties((p)=>{
@@ -313,15 +404,11 @@ function AdditionalProperties({ fieldName, type }) {
                 name
             ];
         });
-    }, [
-        nextName,
-        setValue,
-        fieldName
-    ]);
+    };
     const types = typeof type === 'string' ? resolveDynamicTypes(references[type], references) : undefined;
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            properties.map((item)=>/*#__PURE__*/ jsx(Switcher, {
+            properties.map((item)=>/*#__PURE__*/ jsx(FieldSet, {
                     name: item,
                     field: {
                         type: 'switcher',
@@ -351,17 +438,15 @@ function AdditionalProperties({ fieldName, type }) {
                     /*#__PURE__*/ jsx(Input, {
                         value: nextName,
                         placeholder: "Enter Property Name",
-                        onChange: useCallback((e)=>{
+                        onChange: (e)=>{
                             setNextName(e.target.value);
-                        }, []),
-                        onKeyDown: useCallback((e)=>{
+                        },
+                        onKeyDown: (e)=>{
                             if (e.key === 'Enter') {
                                 onAppend();
                                 e.preventDefault();
                             }
-                        }, [
-                            onAppend
-                        ])
+                        }
                     }),
                     /*#__PURE__*/ jsx("button", {
                         type: "button",
@@ -417,11 +502,84 @@ anyFields.array = {
         items: anyFields
     }
 };
-function Switcher({ field, fieldName, ...props }) {
+function FieldInput({ field, fieldName, ...props }) {
+    const { control, register } = useFormContext();
+    if (field.type === 'null') return null;
+    if (field.type === 'object') {
+        return /*#__PURE__*/ jsx(ObjectInput, {
+            field: field,
+            fieldName: fieldName,
+            ...props,
+            className: cn('rounded-lg border border-fd-primary/20 bg-fd-card p-3 shadow-sm', props.className)
+        });
+    }
+    if (field.type === 'array') {
+        return /*#__PURE__*/ jsx(ArrayInput, {
+            fieldName: fieldName,
+            field: field,
+            ...props,
+            className: cn('rounded-lg border border-fd-primary/20 bg-fd-background p-3 shadow-sm', props.className)
+        });
+    }
+    if (field.type === 'file' || field.type === 'boolean') {
+        return /*#__PURE__*/ jsx(Controller, {
+            control: control,
+            name: fieldName,
+            render: ({ field: { value, onChange, ...restField } })=>field.type === 'file' ? /*#__PURE__*/ jsx("input", {
+                    id: fieldName,
+                    type: "file",
+                    multiple: false,
+                    onChange: (e)=>{
+                        if (!e.target.files) return;
+                        onChange(e.target.files.item(0));
+                    },
+                    ...props,
+                    ...restField
+                }) : /*#__PURE__*/ jsxs(Select, {
+                    value: value,
+                    onValueChange: onChange,
+                    disabled: restField.disabled,
+                    children: [
+                        /*#__PURE__*/ jsx(SelectTrigger, {
+                            id: fieldName,
+                            className: props.className,
+                            ...restField,
+                            children: /*#__PURE__*/ jsx(SelectValue, {})
+                        }),
+                        /*#__PURE__*/ jsxs(SelectContent, {
+                            children: [
+                                /*#__PURE__*/ jsx(SelectItem, {
+                                    value: "true",
+                                    children: "True"
+                                }),
+                                /*#__PURE__*/ jsx(SelectItem, {
+                                    value: "false",
+                                    children: "False"
+                                }),
+                                field.isRequired ? null : /*#__PURE__*/ jsx(SelectItem, {
+                                    value: "null",
+                                    children: "Null"
+                                })
+                            ]
+                        })
+                    ]
+                })
+        });
+    }
+    return /*#__PURE__*/ jsx(Input, {
+        id: fieldName,
+        placeholder: "Enter value",
+        type: field.type === 'string' ? 'text' : 'number',
+        ...register(fieldName),
+        ...props
+    });
+}
+function FieldSet({ field, fieldName, toolbar, name, ...props }) {
     const { references, dynamic } = useSchemaContext();
-    const items = Object.keys(field.items);
     const [value, setValue] = useState(()=>{
+        if (field.type !== 'switcher') return '';
         const d = dynamic.current.get(fieldName);
+        const items = Object.keys(field.items);
         if (d?.type === 'field') {
             // schemas are passed from server components, they shouldn't be re-constructed
             const cached = items.find((item)=>d.schema === field.items[item]);
@@ -429,193 +587,66 @@ function Switcher({ field, fieldName, ...props }) {
         }
         return items[0];
     });
-    useOnChange(value, ()=>{
-        if (!value) return;
+    if (field.type === 'null') return null;
+    if (value && field.type === 'switcher') {
         dynamic.current.set(fieldName, {
             type: 'field',
             schema: field.items[value]
         });
-    });
-    return /*#__PURE__*/ jsx(InputContainer, {
-        required: field.isRequired,
-        description: field.description,
-        ...props,
-        toolbar: /*#__PURE__*/ jsxs(Fragment, {
+    }
+    if (field.type === 'switcher') {
+        const child = resolve(field.items[value], references);
+        return /*#__PURE__*/ jsxs("fieldset", {
+            ...props,
+            className: cn('flex flex-col gap-1.5', props.className),
             children: [
-                /*#__PURE__*/ jsxs(Select, {
-                    value: value,
-                    onValueChange: setValue,
+                /*#__PURE__*/ jsxs(FieldHeader, {
+                    name: name,
+                    htmlFor: fieldName,
+                    required: field.isRequired,
                     children: [
-                        /*#__PURE__*/ jsx(SelectTrigger, {
-                            className: "h-auto p-1 text-xs",
-                            children: /*#__PURE__*/ jsx(SelectValue, {})
-                        }),
-                        /*#__PURE__*/ jsx(SelectContent, {
-                            children: items.map((item)=>/*#__PURE__*/ jsx(SelectItem, {
+                        /*#__PURE__*/ jsx("select", {
+                            value: value,
+                            onChange: (e)=>setValue(e.target.value),
+                            className: "text-xs",
+                            children: Object.keys(field.items).map((item)=>/*#__PURE__*/ jsx("option", {
                                     value: item,
                                     children: item
                                 }, item))
-                        })
-                    ]
-                }),
-                props.toolbar
-            ]
-        }),
-        children: renderInner({
-            field: resolve(field.items[value], references),
-            fieldName
-        })
-    });
-}
-function InputField({ field, fieldName, ...props }) {
-    const { references } = useSchemaContext();
-    if (field.type === 'null') return null;
-    if (field.type === 'object') {
-        return /*#__PURE__*/ jsx(InputContainer, {
-            required: field.isRequired,
-            type: field.type,
-            description: field.description,
-            ...props,
-            children: /*#__PURE__*/ jsx(ObjectInput, {
-                field: field,
-                fieldName: fieldName,
-                className: "rounded-lg border bg-fd-accent/20 p-3"
-            })
-        });
-    }
-    if (field.type === 'array') {
-        return /*#__PURE__*/ jsx(InputContainer, {
-            required: field.isRequired,
-            description: field.description ?? resolve(field.items, references).description,
-            type: "array",
-            ...props,
-            children: /*#__PURE__*/ jsx(ArrayInput, {
-                fieldName: fieldName,
-                field: field,
-                className: "rounded-lg border bg-fd-background p-3"
-            })
-        });
-    }
-    if (field.type === 'switcher') {
-        return /*#__PURE__*/ jsx(Switcher, {
-            field: field,
-            fieldName: fieldName,
-            ...props
-        });
-    }
-    const { toolbar, inline = false, name, ...rest } = props;
-    return /*#__PURE__*/ jsx(NormalInput, {
-        field: field,
-        fieldName: fieldName,
-        header: /*#__PURE__*/ jsxs(Fragment, {
-            children: [
-                /*#__PURE__*/ jsxs(FormLabel, {
-                    className: "inline-flex items-center gap-1",
-                    children: [
-                        name,
-                        field.isRequired ? /*#__PURE__*/ jsx("span", {
-                            className: "text-red-500",
-                            children: "*"
-                        }) : null,
-                        /*#__PURE__*/ jsx("code", {
-                            className: "ms-auto text-xs text-fd-muted-foreground",
-                            children: field.type
                         }),
                         toolbar
                     ]
                 }),
-                !inline ? /*#__PURE__*/ jsx(FormDescription, {
-                    className: "text-xs",
+                /*#__PURE__*/ jsx("p", {
+                    className: "text-xs text-fd-muted-foreground",
                     children: field.description
-                }) : null
-            ]
-        }),
-        ...rest
-    });
-}
-function NormalInput({ fieldName, header, field, ...props }) {
-    const { control } = useFormContext();
-    if (field.type === 'file') {
-        return /*#__PURE__*/ jsx(FormField, {
-            control: control,
-            name: fieldName,
-            render: ({ field: { value: _value, onChange, ...restField } })=>/*#__PURE__*/ jsxs(FormItem, {
-                    ...props,
-                    children: [
-                        header,
-                        /*#__PURE__*/ jsx(FormControl, {
-                            children: /*#__PURE__*/ jsx("input", {
-                                type: "file",
-                                multiple: false,
-                                onChange: (e)=>{
-                                    if (!e.target.files) return;
-                                    onChange(e.target.files.item(0));
-                                },
-                                ...restField
-                            })
-                        })
-                    ]
-                })
-        });
-    }
-    if (field.type === 'boolean') {
-        return /*#__PURE__*/ jsx(FormField, {
-            control: control,
-            name: fieldName,
-            render: ({ field: { value, onChange, ...restField } })=>/*#__PURE__*/ jsxs(FormItem, {
-                    ...props,
-                    children: [
-                        header,
-                        /*#__PURE__*/ jsxs(Select, {
-                            value: value,
-                            onValueChange: onChange,
-                            disabled: restField.disabled,
-                            children: [
-                                /*#__PURE__*/ jsx(FormControl, {
-                                    children: /*#__PURE__*/ jsx(SelectTrigger, {
-                                        ...restField,
-                                        children: /*#__PURE__*/ jsx(SelectValue, {})
-                                    })
-                                }),
-                                /*#__PURE__*/ jsxs(SelectContent, {
-                                    children: [
-                                        /*#__PURE__*/ jsx(SelectItem, {
-                                            value: "true",
-                                            children: "True"
-                                        }),
-                                        /*#__PURE__*/ jsx(SelectItem, {
-                                            value: "false",
-                                            children: "False"
-                                        }),
-                                        field.isRequired ? null : /*#__PURE__*/ jsx(SelectItem, {
-                                            value: "null",
-                                            children: "Null"
-                                        })
-                                    ]
-                                })
-                            ]
-                        })
-                    ]
+                }),
+                child.type === 'switcher' ? /*#__PURE__*/ jsx(FieldSet, {
+                    field: child,
+                    fieldName: fieldName
+                }) : /*#__PURE__*/ jsx(FieldInput, {
+                    field: child,
+                    fieldName: fieldName
                 })
+            ]
         });
     }
-    return /*#__PURE__*/ jsx(FormField, {
-        control: control,
-        name: fieldName,
-        render: ({ field: { value, ...restField } })=>/*#__PURE__*/ jsxs(FormItem, {
-                ...props,
-                children: [
-                    header,
-                    /*#__PURE__*/ jsx(FormControl, {
-                        children: /*#__PURE__*/ jsx(Input, {
-                            placeholder: "Enter value",
-                            type: field.type === 'string' ? 'text' : 'number',
-                            value: value,
-                            ...restField
-                        })
-                    })
-                ]
+    return /*#__PURE__*/ jsxs("fieldset", {
+        ...props,
+        className: cn('flex flex-col gap-1.5', props.className),
+        children: [
+            /*#__PURE__*/ jsx(FieldHeader, {
+                htmlFor: fieldName,
+                name: name,
+                required: field.isRequired,
+                type: field.type,
+                children: toolbar
+            }),
+            /*#__PURE__*/ jsx(FieldInput, {
+                field: field,
+                fieldName: fieldName
             })
+        ]
     });
 }
 function ArrayInput({ fieldName, field, ...props }) {
@@ -624,23 +655,14 @@ function ArrayInput({ fieldName, field, ...props }) {
     const { fields, append, remove } = useFieldArray({
         name: fieldName
     });
-    const handleAppend = useCallback(()=>{
-        append(getDefaultValue(items, references));
-    }, [
-        append,
-        references,
-        items
-    ]);
     return /*#__PURE__*/ jsxs("div", {
         ...props,
-        className: cn('flex flex-col gap-4', props.className),
+        className: cn('flex flex-col gap-2', props.className),
         children: [
-            fields.map((item, index)=>/*#__PURE__*/ jsx(InputField, {
-                    inline: true,
-                    name: `Item ${String(index + 1)}`,
+            fields.map((item, index)=>/*#__PURE__*/ jsx(FieldSet, {
+                    name: `${fieldName.split('.').at(-1)}[${index}]`,
                     field: items,
-                    fieldName: `${fieldName}.${String(index)}`,
-                    className: "flex-1",
+                    fieldName: `${fieldName}.${index}`,
                     toolbar: /*#__PURE__*/ jsx("button", {
                         type: "button",
                         "aria-label": "Remove Item",
@@ -659,10 +681,13 @@ function ArrayInput({ fieldName, field, ...props }) {
             /*#__PURE__*/ jsxs("button", {
                 type: "button",
                 className: cn(buttonVariants({
-                    color: 'secondary',
-                    className: 'gap-1.5'
+                    color: 'outline',
+                    className: 'gap-1.5 py-2',
+                    size: 'sm'
                 })),
-                onClick: handleAppend,
+                onClick: ()=>{
+                    append(getDefaultValue(items, references));
+                },
                 children: [
                     /*#__PURE__*/ jsx(Plus, {
                         className: "size-4"
@@ -726,12 +751,88 @@ 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: {
+            green: 'text-green-600 dark:text-green-400',
+            yellow: 'text-yellow-600 dark:text-yellow-400',
+            red: 'text-red-600 dark:text-red-400',
+            blue: 'text-blue-600 dark:text-blue-400',
+            orange: 'text-orange-600 dark:text-orange-400'
+        }
+    }
+});
+function getBadgeColor(method) {
+    switch(method.toUpperCase()){
+        case 'PUT':
+            return 'yellow';
+        case 'PATCH':
+            return 'orange';
+        case 'POST':
+            return 'blue';
+        case 'DELETE':
+            return 'red';
+        default:
+            return 'green';
+    }
+}
+function MethodLabel({ children, ...props }) {
+    return /*#__PURE__*/ jsx("span", {
+        ...props,
+        className: cn(variants({
+            color: getBadgeColor(children)
+        }), props.className),
+        children: children.toUpperCase()
+    });
+}
+
+function useQuery(fn) {
+    const [loading, setLoading] = useState(false);
+    const [data, setData] = useState();
+    return useMemo(()=>({
+            isLoading: loading,
+            data,
+            start (input) {
+                setLoading(true);
+                void fn(input).then((res)=>{
+                    setData(res);
+                }).catch(()=>{
+                    setData(undefined);
+                }).finally(()=>{
+                    setLoading(false);
+                });
+            }
+        }), [
+        data,
+        fn,
+        loading
+    ]);
+}
+
+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),
@@ -739,20 +840,42 @@ function APIPlayground({ route, method = 'GET', authorization, path = [], header
         }
     });
     const testQuery = useQuery(async (input)=>{
-        const fetcher = await import('./fetcher-Cc3BieIx.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,
@@ -766,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();
@@ -792,13 +915,13 @@ function APIPlayground({ route, method = 'GET', authorization, path = [], header
                 name: fieldName
             }, key);
         }
-        return /*#__PURE__*/ jsx(InputField, {
+        return /*#__PURE__*/ jsx(FieldSet, {
             name: info.name,
             fieldName: fieldName,
             field: info
         }, key);
     }
-    return /*#__PURE__*/ jsx(Form, {
+    return /*#__PURE__*/ jsx(FormProvider, {
         ...form,
         children: /*#__PURE__*/ jsx(SchemaContext.Provider, {
             value: useMemo(()=>({
@@ -809,26 +932,47 @@ function APIPlayground({ route, method = 'GET', authorization, path = [], header
             ]),
             children: /*#__PURE__*/ jsxs("form", {
                 ...props,
-                className: cn('not-prose flex flex-col gap-5 rounded-xl border bg-fd-card p-3', props.className),
+                className: cn('not-prose flex flex-col gap-2 rounded-xl border p-3 shadow-md', props.className),
                 onSubmit: onSubmit,
                 children: [
-                    /*#__PURE__*/ jsxs("div", {
-                        className: "flex flex-row gap-2",
+                    /*#__PURE__*/ jsx(FormHeader, {
+                        method: method,
+                        route: route,
+                        isLoading: testQuery.isLoading
+                    }),
+                    /*#__PURE__*/ jsx(CollapsiblePanel, {
+                        title: "Server URL",
+                        children: /*#__PURE__*/ jsx(ServerSelect, {})
+                    }),
+                    header.length > 0 || authorization ? /*#__PURE__*/ jsxs(CollapsiblePanel, {
+                        title: "Headers",
                         children: [
-                            /*#__PURE__*/ jsx(RouteDisplay, {
-                                route: route
-                            }),
-                            /*#__PURE__*/ jsx("button", {
-                                type: "submit",
-                                className: cn(buttonVariants({
-                                    color: 'secondary'
-                                })),
-                                disabled: testQuery.isLoading,
-                                children: "Send"
-                            })
+                            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))
                         ]
-                    }),
-                    authorization ? renderCustomField('authorization', authorization, fields.auth) : null,
+                    }) : null,
                     path.length > 0 ? /*#__PURE__*/ jsx(CollapsiblePanel, {
                         title: "Path",
                         children: path.map((field)=>renderCustomField(`path.${field.name}`, field, fields.path, field.name))
@@ -837,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, {
@@ -856,28 +996,6 @@ function APIPlayground({ route, method = 'GET', authorization, path = [], header
         })
     });
 }
-function CollapsiblePanel({ title, children }) {
-    return /*#__PURE__*/ jsxs(Collapsible, {
-        className: "-m-2",
-        children: [
-            /*#__PURE__*/ jsxs(CollapsibleTrigger, {
-                className: "group flex w-full flex-row items-center justify-between p-2 font-medium",
-                children: [
-                    title,
-                    /*#__PURE__*/ jsx(ChevronDown, {
-                        className: "size-4 group-data-[state=open]:rotate-180"
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsx(CollapsibleContent, {
-                children: /*#__PURE__*/ jsx("div", {
-                    className: "flex flex-col gap-4 p-2",
-                    children: children
-                })
-            })
-        ]
-    });
-}
 function createPathnameFromInput(route, path, query) {
     let pathname = route;
     for (const key of Object.keys(path)){
@@ -891,21 +1009,49 @@ function createPathnameFromInput(route, path, query) {
     }
     return searchParams.size > 0 ? `${pathname}?${searchParams.toString()}` : pathname;
 }
-function RouteDisplay({ route }) {
-    const [path, query] = useWatch({
-        name: [
-            'path',
-            'query'
-        ]
+function Route({ route, ...props }) {
+    const segments = route.split('/').filter((part)=>part.length > 0);
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        className: cn('flex flex-row items-center gap-0.5 overflow-auto text-nowrap', props.className),
+        children: segments.map((part, index)=>/*#__PURE__*/ jsxs(Fragment$1, {
+                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))
     });
-    const pathname = useMemo(()=>createPathnameFromInput(route, path, query), [
-        route,
-        path,
-        query
-    ]);
-    return /*#__PURE__*/ jsx("code", {
-        className: "flex-1 overflow-auto text-nowrap rounded-lg border bg-fd-secondary px-2 py-1.5 text-sm text-fd-secondary-foreground",
-        children: pathname
+}
+function FormHeader({ route, method, isLoading }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex flex-row items-center gap-2 text-sm",
+        children: [
+            /*#__PURE__*/ jsx(MethodLabel, {
+                children: method
+            }),
+            /*#__PURE__*/ jsx(Route, {
+                route: route,
+                className: "flex-1"
+            }),
+            /*#__PURE__*/ jsx("button", {
+                type: "submit",
+                className: cn(buttonVariants({
+                    color: 'primary',
+                    size: 'sm'
+                }), 'px-3 py-1.5'),
+                disabled: isLoading,
+                children: "Send"
+            })
+        ]
     });
 }
 function DefaultResultDisplay({ data }) {
@@ -937,32 +1083,34 @@ function DefaultResultDisplay({ data }) {
         ]
     });
 }
-function useQuery(fn) {
-    const [loading, setLoading] = useState(false);
-    const [data, setData] = useState();
-    return useMemo(()=>({
-            isLoading: loading,
-            data,
-            start (input) {
-                setLoading(true);
-                void fn(input).then((res)=>{
-                    setData(res);
-                }).catch(()=>{
-                    setData(undefined);
-                }).finally(()=>{
-                    setLoading(false);
-                });
-            }
-        }), [
-        data,
-        fn,
-        loading
-    ]);
+function CollapsiblePanel({ title, children, ...props }) {
+    return /*#__PURE__*/ jsxs(Collapsible, {
+        ...props,
+        className: "border rounded-xl bg-fd-card text-fd-card-foreground overflow-hidden",
+        children: [
+            /*#__PURE__*/ jsxs(CollapsibleTrigger, {
+                className: "group w-full inline-flex items-center gap-2 justify-between p-3 text-sm font-medium hover:bg-fd-accent",
+                children: [
+                    title,
+                    /*#__PURE__*/ jsx(ChevronDown, {
+                        className: "size-4 group-data-[state=open]:rotate-180"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(CollapsibleContent, {
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "flex flex-col gap-4 p-3",
+                    children: children
+                })
+            })
+        ]
+    });
 }
 
 var index = {
   __proto__: null,
-  APIPlayground: APIPlayground
+  APIPlayground: APIPlayground,
+  CollapsiblePanel: CollapsiblePanel
 };
 
-export { Input as I, Select as S, SelectTrigger as a, SelectValue as b, SelectContent as c, SelectItem as d, index as i, 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 };