fumadocs-openapi 4.4.2 → 5.0.1

package/dist/ui/playground-client-Cn3a3hra.js

@@ -0,0 +1,1033 @@
+'use client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { forwardRef, useId, createContext, useContext, useState, useCallback, useLayoutEffect, useRef, useMemo } from 'react';
+import { FormProvider, Controller, useFormContext, useFieldArray, useForm, useWatch } from 'react-hook-form';
+import useSWRImmutable from 'swr/immutable';
+import { Accordions, Accordion } from 'fumadocs-ui/components/accordion';
+import { cn, buttonVariants } from 'fumadocs-ui/components/api';
+import { u as useSchemaContext, a as useApiContext, S as SchemaContext } from './client-client-CMzXLiVt.js';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { CircleCheckIcon, CircleXIcon, ChevronDown, ChevronUp, Check, Trash2, Plus } from 'lucide-react';
+import { useOnChange } from 'fumadocs-core/utils/use-on-change';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as Base from 'fumadocs-ui/components/codeblock';
+
+const Form = FormProvider;
+const FormFieldContext = /*#__PURE__*/ createContext({
+    name: ''
+});
+const FormItemContext = /*#__PURE__*/ createContext({
+    id: ''
+});
+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),
+            ...props
+        })
+    });
+});
+FormItem.displayName = 'FormItem';
+const labelVariants = cva('text-xs font-medium 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';
+
+/**
+ * Resolve reference
+ */ function resolve(schema, references) {
+    if (typeof schema === 'string') return references[schema];
+    if (schema.type !== 'ref') return schema;
+    return {
+        ...references[schema.schema],
+        description: schema.description,
+        isRequired: schema.isRequired
+    };
+}
+
+/**
+ * Create request body from value
+ */ function createBodyFromValue(type, value, schema, references, dynamic) {
+    const result = convertValue('body', value, schema, references, dynamic);
+    if (type === 'json') {
+        return JSON.stringify(result);
+    }
+    const formData = new FormData();
+    if (typeof result !== 'object' || !result) {
+        throw new Error(`Unsupported body type: ${typeof result}, expected: object`);
+    }
+    for (const key of Object.keys(result)){
+        const prop = result[key];
+        if (typeof prop === 'object' && prop instanceof File) {
+            formData.set(key, prop);
+        }
+        if (Array.isArray(prop) && prop.every((item)=>item instanceof File)) {
+            for (const item of prop){
+                formData.append(key, item);
+            }
+        }
+        formData.set(key, JSON.stringify(prop));
+    }
+    return formData;
+}
+/**
+ * Convert a value (object or string) to the corresponding type of schema
+ *
+ * @param fieldName - field name of value
+ * @param value - the original value
+ * @param schema - the schema of field
+ * @param references - schema references
+ * @param dynamic - Dynamic references
+ */ function convertValue(fieldName, value, schema, references, dynamic) {
+    const isEmpty = value === '' || value === undefined || value === null;
+    if (isEmpty && schema.isRequired) return schema.type === 'boolean' ? false : '';
+    else if (isEmpty) return undefined;
+    if (Array.isArray(value) && schema.type === 'array') {
+        return value.map((item, index)=>convertValue(`${fieldName}.${String(index)}`, item, resolve(schema.items, references), references, dynamic));
+    }
+    if (schema.type === 'switcher') {
+        return convertDynamicValue(fieldName, value, references, dynamic);
+    }
+    if (typeof value === 'object' && schema.type === 'object') {
+        const entries = Object.keys(value).map((key)=>{
+            const prop = value[key];
+            const propFieldName = `${fieldName}.${key}`;
+            if (key in schema.properties) {
+                return [
+                    key,
+                    convertValue(propFieldName, prop, resolve(schema.properties[key], references), references, dynamic)
+                ];
+            }
+            if (schema.additionalProperties) {
+                return [
+                    key,
+                    convertDynamicValue(propFieldName, prop, references, dynamic)
+                ];
+            }
+            console.warn('Could not resolve field', propFieldName, dynamic);
+            return [
+                key,
+                prop
+            ];
+        });
+        return Object.fromEntries(entries);
+    }
+    switch(schema.type){
+        case 'number':
+            return Number(value);
+        case 'boolean':
+            return value === 'null' ? undefined : value === 'true';
+        case 'file':
+            return value; // file
+        default:
+            return String(value);
+    }
+}
+function convertDynamicValue(fieldName, value, references, dynamic) {
+    const fieldDynamic = dynamic.get(fieldName);
+    return convertValue(fieldName, value, fieldDynamic?.type === 'field' ? resolve(fieldDynamic.schema, references) : {
+        type: 'null',
+        isRequired: false
+    }, references, dynamic);
+}
+const statusMap = {
+    400: {
+        description: 'Bad Request',
+        color: 'text-red-500',
+        icon: CircleXIcon
+    },
+    401: {
+        description: 'Unauthorized',
+        color: 'text-red-500',
+        icon: CircleXIcon
+    },
+    403: {
+        description: 'Forbidden',
+        color: 'text-red-500',
+        icon: CircleXIcon
+    },
+    404: {
+        description: 'Not Found',
+        color: 'text-fd-muted-foreground',
+        icon: CircleXIcon
+    },
+    500: {
+        description: 'Internal Server Error',
+        color: 'text-red-500',
+        icon: CircleXIcon
+    }
+};
+function getStatusInfo(status) {
+    if (status in statusMap) {
+        return statusMap[status];
+    }
+    if (status >= 200 && status < 300) {
+        return {
+            description: 'Successful',
+            color: 'text-green-500',
+            icon: CircleCheckIcon
+        };
+    }
+    if (status >= 400) {
+        return {
+            description: 'Error',
+            color: 'text-red-500',
+            icon: CircleXIcon
+        };
+    }
+    return {
+        description: 'No Description',
+        color: 'text-fd-muted-foreground',
+        icon: CircleXIcon
+    };
+}
+
+function getDefaultValue(item, references) {
+    if (item.type === 'object') return Object.fromEntries(Object.entries(item.properties).map(([key, prop])=>[
+            key,
+            getDefaultValue(references[prop.schema], references)
+        ]));
+    if (item.type === 'array') return [];
+    if (item.type === 'null') return null;
+    if (item.type === 'switcher') return getDefaultValue(resolve(Object.values(item.items)[0], references), references);
+    if (item.type === 'file') return undefined;
+    return String(item.defaultValue);
+}
+function getDefaultValues(field, context) {
+    return Object.fromEntries(field.map((p)=>[
+            p.name,
+            getDefaultValue(p, 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-3 py-1 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,
+        ...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-2', 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
+                ]
+            }),
+            !inline ? /*#__PURE__*/ jsx("p", {
+                className: "text-xs",
+                children: description
+            }) : null,
+            props.children
+        ]
+    });
+}
+function ObjectInput({ field, fieldName, ...props }) {
+    const { references } = useSchemaContext();
+    return /*#__PURE__*/ jsxs("div", {
+        ...props,
+        className: cn('flex flex-col gap-4', props.className),
+        children: [
+            Object.entries(field.properties).map(([key, child])=>/*#__PURE__*/ jsx(InputField, {
+                    name: key,
+                    field: resolve(child, references),
+                    fieldName: `${fieldName}.${key}`
+                }, key)),
+            field.additionalProperties ? /*#__PURE__*/ jsx(AdditionalProperties, {
+                fieldName: fieldName,
+                type: field.additionalProperties
+            }) : null
+        ]
+    });
+}
+function AdditionalProperties({ fieldName, type }) {
+    const { control, setValue } = useFormContext();
+    const { references, dynamic } = useSchemaContext();
+    const [nextName, setNextName] = useState('');
+    const [properties, setProperties] = useState(()=>{
+        const d = dynamic.current.get(`additional_${fieldName}`);
+        if (d?.type === 'object') return d.properties;
+        return [];
+    });
+    useOnChange(properties, ()=>{
+        dynamic.current.set(`additional_${fieldName}`, {
+            type: 'object',
+            properties
+        });
+    });
+    const onAppend = useCallback(()=>{
+        const name = nextName.trim();
+        if (name.length === 0) return;
+        setProperties((p)=>{
+            if (p.includes(name)) return p;
+            setValue(`${fieldName}.${name}`, '');
+            setNextName('');
+            return [
+                ...p,
+                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, {
+                    name: item,
+                    field: {
+                        type: 'switcher',
+                        items: types ?? anyFields,
+                        isRequired: false
+                    },
+                    fieldName: `${fieldName}.${item}`,
+                    toolbar: /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        "aria-label": "Remove Item",
+                        className: cn(buttonVariants({
+                            color: 'secondary',
+                            size: 'sm'
+                        })),
+                        onClick: ()=>{
+                            setProperties((p)=>p.filter((prop)=>prop !== item));
+                            control.unregister(`${fieldName}.${item}`);
+                        },
+                        children: /*#__PURE__*/ jsx(Trash2, {
+                            className: "size-4"
+                        })
+                    })
+                }, item)),
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex flex-row gap-1",
+                children: [
+                    /*#__PURE__*/ jsx(Input, {
+                        value: nextName,
+                        placeholder: "Enter Property Name",
+                        onChange: useCallback((e)=>{
+                            setNextName(e.target.value);
+                        }, []),
+                        onKeyDown: useCallback((e)=>{
+                            if (e.key === 'Enter') {
+                                onAppend();
+                                e.preventDefault();
+                            }
+                        }, [
+                            onAppend
+                        ])
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        className: cn(buttonVariants({
+                            color: 'secondary'
+                        })),
+                        onClick: onAppend,
+                        children: "New"
+                    })
+                ]
+            })
+        ]
+    });
+}
+function resolveDynamicTypes(schema, references) {
+    if (schema.type !== 'switcher') return {
+        [schema.type]: schema
+    };
+    return Object.fromEntries(Object.entries(schema.items).map(([key, value])=>[
+            key,
+            resolve(value, references)
+        ]));
+}
+const anyFields = {
+    string: {
+        type: 'string',
+        isRequired: false,
+        defaultValue: ''
+    },
+    boolean: {
+        type: 'boolean',
+        isRequired: false,
+        defaultValue: ''
+    },
+    number: {
+        type: 'number',
+        isRequired: false,
+        defaultValue: ''
+    },
+    object: {
+        type: 'object',
+        properties: {},
+        additionalProperties: true,
+        isRequired: false
+    }
+};
+anyFields.array = {
+    type: 'array',
+    isRequired: false,
+    items: {
+        type: 'switcher',
+        isRequired: false,
+        items: anyFields
+    }
+};
+function Switcher({ field, fieldName, ...props }) {
+    const { references, dynamic } = useSchemaContext();
+    const items = Object.keys(field.items);
+    const [value, setValue] = useState(()=>{
+        const d = dynamic.current.get(fieldName);
+        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]);
+            if (cached) return cached;
+        }
+        return items[0];
+    });
+    useOnChange(value, ()=>{
+        if (!value) return;
+        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, {
+            children: [
+                /*#__PURE__*/ jsxs(Select, {
+                    value: value,
+                    onValueChange: setValue,
+                    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, {
+                                    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",
+                    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"
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                })
+        });
+    }
+    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
+                        })
+                    })
+                ]
+            })
+    });
+}
+function ArrayInput({ fieldName, field, ...props }) {
+    const { references } = useSchemaContext();
+    const items = resolve(field.items, references);
+    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),
+        children: [
+            fields.map((item, index)=>/*#__PURE__*/ jsx(InputField, {
+                    inline: true,
+                    name: `Item ${String(index + 1)}`,
+                    field: items,
+                    fieldName: `${fieldName}.${String(index)}`,
+                    className: "flex-1",
+                    toolbar: /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        "aria-label": "Remove Item",
+                        className: cn(buttonVariants({
+                            color: 'secondary',
+                            size: 'sm'
+                        })),
+                        onClick: ()=>{
+                            remove(index);
+                        },
+                        children: /*#__PURE__*/ jsx(Trash2, {
+                            className: "size-4"
+                        })
+                    })
+                }, item.id)),
+            /*#__PURE__*/ jsxs("button", {
+                type: "button",
+                className: cn(buttonVariants({
+                    color: 'secondary',
+                    className: 'gap-1.5'
+                })),
+                onClick: handleAppend,
+                children: [
+                    /*#__PURE__*/ jsx(Plus, {
+                        className: "size-4"
+                    }),
+                    "New Item"
+                ]
+            })
+        ]
+    });
+}
+
+function CodeBlock({ code, lang = 'json', ...props }) {
+    const { highlighter } = useApiContext();
+    const [html, setHtml] = useState('');
+    useLayoutEffect(()=>{
+        if (!highlighter) return;
+        const themedHtml = highlighter.codeToHtml(code, {
+            lang,
+            defaultColor: false,
+            themes: {
+                light: 'github-light',
+                dark: 'github-dark'
+            }
+        });
+        setHtml(themedHtml);
+    }, [
+        code,
+        lang,
+        highlighter
+    ]);
+    return /*#__PURE__*/ jsx(Base.CodeBlock, {
+        className: "my-0",
+        children: /*#__PURE__*/ jsx(Base.Pre, {
+            ...props,
+            dangerouslySetInnerHTML: {
+                __html: html
+            }
+        })
+    });
+}
+
+function APIPlayground({ route, method = 'GET', bodyType, authorization, path = [], header = [], query = [], body, fields = {}, schemas }) {
+    const { baseUrl } = useApiContext();
+    const dynamicRef = useRef(new Map());
+    const [input, setInput] = useState();
+    const form = useForm({
+        defaultValues: {
+            authorization: authorization?.defaultValue,
+            path: getDefaultValues(path, schemas),
+            query: getDefaultValues(query, schemas),
+            header: getDefaultValues(header, schemas),
+            body: body ? getDefaultValue(body, schemas) : undefined
+        }
+    });
+    const testQuery = useSWRImmutable(input ? [
+        baseUrl,
+        route,
+        method,
+        input,
+        bodyType
+    ] : null, async ()=>{
+        if (!input) return;
+        const url = new URL(`${baseUrl ?? window.location.origin}${createPathnameFromInput(route, input.path)}`);
+        Object.keys(input.query).forEach((key)=>{
+            const paramValue = input.query[key];
+            if (typeof paramValue === 'string' && paramValue.length > 0) url.searchParams.append(key, paramValue);
+        });
+        const headers = new Headers({
+            'Content-Type': 'application/json'
+        });
+        if (input.authorization) {
+            headers.append('Authorization', input.authorization);
+        }
+        Object.keys(input.header).forEach((key)=>{
+            const paramValue = input.header[key];
+            if (typeof paramValue === 'string' && paramValue.length > 0) headers.append(key, paramValue);
+        });
+        const bodyValue = body && input.body && Object.keys(input.body).length > 0 ? createBodyFromValue(bodyType, input.body, body, schemas, dynamicRef.current) : undefined;
+        const response = await fetch(url, {
+            method,
+            headers,
+            body: bodyValue
+        });
+        const data = await response.json().catch(()=>undefined);
+        return {
+            status: response.status,
+            data
+        };
+    }, {
+        shouldRetryOnError: false
+    });
+    const onSubmit = form.handleSubmit((value)=>{
+        setInput(value);
+    });
+    function renderCustomField(fieldName, info, field, key) {
+        if (field) {
+            return /*#__PURE__*/ jsx(Controller, {
+                control: form.control,
+                render: (props)=>field.render({
+                        ...props,
+                        info
+                    }),
+                name: fieldName
+            }, key);
+        }
+        return /*#__PURE__*/ jsx(InputField, {
+            name: info.name,
+            fieldName: fieldName,
+            field: info
+        }, key);
+    }
+    return /*#__PURE__*/ jsx(Form, {
+        ...form,
+        children: /*#__PURE__*/ jsx(SchemaContext.Provider, {
+            value: useMemo(()=>({
+                    references: schemas,
+                    dynamic: dynamicRef
+                }), [
+                schemas
+            ]),
+            children: /*#__PURE__*/ jsxs("form", {
+                className: "not-prose flex flex-col gap-5 rounded-lg border bg-fd-card p-4",
+                onSubmit: onSubmit,
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex flex-row gap-2",
+                        children: [
+                            /*#__PURE__*/ jsx(RouteDisplay, {
+                                route: route
+                            }),
+                            /*#__PURE__*/ jsx("button", {
+                                type: "submit",
+                                className: cn(buttonVariants({
+                                    color: 'secondary'
+                                })),
+                                disabled: testQuery.isLoading,
+                                children: "Send"
+                            })
+                        ]
+                    }),
+                    authorization ? renderCustomField('authorization', authorization, fields.auth) : null,
+                    /*#__PURE__*/ jsxs(Accordions, {
+                        type: "multiple",
+                        className: cn('-m-4 border-0 text-sm', path.length === 0 && query.length === 0 && header.length === 0 && !body && 'hidden'),
+                        children: [
+                            path.length > 0 ? /*#__PURE__*/ jsx(Accordion, {
+                                title: "Path",
+                                children: /*#__PURE__*/ jsx("div", {
+                                    className: "flex flex-col gap-4",
+                                    children: path.map((field)=>renderCustomField(`path.${field.name}`, field, fields.path, field.name))
+                                })
+                            }) : null,
+                            query.length > 0 ? /*#__PURE__*/ jsx(Accordion, {
+                                title: "Query",
+                                children: /*#__PURE__*/ jsx("div", {
+                                    className: "flex flex-col gap-4",
+                                    children: query.map((field)=>renderCustomField(`query.${field.name}`, field, fields.query, field.name))
+                                })
+                            }) : null,
+                            header.length > 0 ? /*#__PURE__*/ jsx(Accordion, {
+                                title: "Headers",
+                                children: /*#__PURE__*/ jsx("div", {
+                                    className: "flex flex-col gap-4",
+                                    children: header.map((field)=>renderCustomField(`header.${field.name}`, field, fields.header, field.name))
+                                })
+                            }) : null,
+                            body ? /*#__PURE__*/ jsx(Accordion, {
+                                title: "Body",
+                                children: body.type === 'object' && !fields.body ? /*#__PURE__*/ jsx(ObjectInput, {
+                                    field: body,
+                                    fieldName: "body"
+                                }) : renderCustomField('body', body, fields.body)
+                            }) : null
+                        ]
+                    }),
+                    testQuery.data ? /*#__PURE__*/ jsx(ResultDisplay, {
+                        data: testQuery.data
+                    }) : null
+                ]
+            })
+        })
+    });
+}
+function createPathnameFromInput(route, input) {
+    let pathname = route;
+    Object.keys(input).forEach((key)=>{
+        const paramValue = input[key];
+        if (typeof paramValue === 'string' && paramValue.length > 0) pathname = pathname.replace(`{${key}}`, paramValue);
+    });
+    return pathname;
+}
+function RouteDisplay({ route }) {
+    const pathInput = useWatch({
+        name: 'path'
+    });
+    const pathname = useMemo(()=>createPathnameFromInput(route, pathInput), [
+        route,
+        pathInput
+    ]);
+    return /*#__PURE__*/ jsx("code", {
+        className: "flex-1 overflow-auto text-nowrap rounded-lg border bg-fd-muted px-3 py-1.5 text-sm text-fd-muted-foreground",
+        children: pathname
+    });
+}
+function ResultDisplay({ data }) {
+    const statusInfo = useMemo(()=>getStatusInfo(data.status), [
+        data.status
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex flex-col gap-3 rounded-lg border bg-fd-card p-4",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "inline-flex items-center gap-1.5 text-sm font-medium text-fd-foreground",
+                children: [
+                    /*#__PURE__*/ jsx(statusInfo.icon, {
+                        className: cn('size-4', statusInfo.color)
+                    }),
+                    statusInfo.description
+                ]
+            }),
+            /*#__PURE__*/ jsx("p", {
+                className: "text-sm text-fd-muted-foreground",
+                children: data.status
+            }),
+            data.data ? /*#__PURE__*/ jsx(CodeBlock, {
+                code: JSON.stringify(data.data, null, 2),
+                className: "max-h-[288px]"
+            }) : null
+        ]
+    });
+}
+
+export { APIPlayground };