fumadocs-openapi 9.0.3 → 9.0.5

package/dist/playground/inputs.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo, useState, } from 'react';
-import { Plus, Trash2 } from '../icons.js';
+import { ChevronDown, Plus, Trash2 } from '../icons.js';
 import { Controller, useController, useFieldArray, useFormContext, } from 'react-hook-form';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../ui/components/select.js';
 import { Input, labelVariants } from '../ui/components/input.js';
@@ -11,10 +11,13 @@ import { buttonVariants } from 'fumadocs-ui/components/ui/button';
 import { combineSchema } from '../utils/combine-schema.js';
 import { schemaToString } from '../utils/schema-to-string.js';
 import { anyFields, useFieldInfo, useResolvedSchema, } from '../playground/schema.js';
-function FieldHeader({ name, required = false, ...props }) {
-    return (_jsxs("label", { ...props, className: cn('w-full inline-flex items-center gap-1', props.className), children: [_jsxs("span", { className: cn(labelVariants(), 'me-auto'), children: [name, required ? _jsx("span", { className: "text-red-400/80 mx-1", children: "*" }) : null] }), props.children] }));
+function FieldLabel(props) {
+    return (_jsx("label", { ...props, className: cn('w-full inline-flex items-center gap-0.5', props.className), children: props.children }));
 }
-function FieldHeaderCode(props) {
+function FieldLabelName({ required = false, ...props }) {
+    return (_jsxs("span", { ...props, className: cn(labelVariants(), 'font-mono me-auto', props.className), children: [props.children, required && _jsx("span", { className: "text-red-400/80 mx-1", children: "*" })] }));
+}
+function FieldLabelType(props) {
     return (_jsx("code", { ...props, className: cn('text-xs text-fd-muted-foreground', props.className), children: props.children }));
 }
 export function ObjectInput({ field: _field, fieldName, ...props }) {
@@ -22,7 +25,7 @@ export function ObjectInput({ field: _field, fieldName, ...props }) {
     const field = useMemo(() => combineSchema([resolved]), [resolved]);
     if (typeof field === 'boolean')
         return;
-    return (_jsxs("div", { ...props, className: cn('flex flex-col gap-6', props.className), children: [Object.entries(field.properties ?? {}).map(([key, child]) => (_jsx(FieldSet, { name: key, field: child, fieldName: `${fieldName}.${key}`, isRequired: field.required?.includes(key) }, key))), (field.additionalProperties || field.patternProperties) && (_jsx(DynamicProperties, { fieldName: fieldName, filterKey: (v) => !field.properties || !Object.keys(field.properties).includes(v), getType: (key) => {
+    return (_jsxs("div", { ...props, className: cn('grid grid-cols-1 gap-4 @md:grid-cols-2', props.className), children: [Object.entries(field.properties ?? {}).map(([key, child]) => (_jsx(FieldSet, { name: key, field: child, fieldName: `${fieldName}.${key}`, isRequired: field.required?.includes(key) }, key))), (field.additionalProperties || field.patternProperties) && (_jsx(DynamicProperties, { fieldName: fieldName, filterKey: (v) => !field.properties || !Object.keys(field.properties).includes(v), getType: (key) => {
                     for (const pattern in field.patternProperties) {
                         if (key.match(RegExp(pattern))) {
                             return field.patternProperties[pattern];
@@ -73,9 +76,8 @@ function DynamicProperties({ fieldName, filterKey = () => true, getType = () =>
     return (_jsxs(_Fragment, { children: [properties.map((item) => {
                 const type = getType(item);
                 return (_jsx(FieldSet, { name: item, field: type, fieldName: `${fieldName}.${item}`, toolbar: _jsx("button", { type: "button", "aria-label": "Remove Item", className: cn(buttonVariants({
-                            color: 'ghost',
-                            size: 'icon-sm',
-                            className: 'p-1',
+                            color: 'outline',
+                            size: 'icon-xs',
                         })), onClick: () => {
                             setProperties((p) => p.filter((prop) => prop !== item));
                             control.unregister(`${fieldName}.${item}`);
@@ -87,14 +89,18 @@ function DynamicProperties({ fieldName, filterKey = () => true, getType = () =>
                             }
                         } }), _jsx("button", { type: "button", className: cn(buttonVariants({ color: 'secondary', size: 'sm' }), 'px-4'), onClick: onAppend, children: "New" })] })] }));
 }
-function FieldInput({ field, fieldName, isRequired, ...props }) {
+export function FieldInput({ field, fieldName, isRequired, ...props }) {
     const { control, register } = useFormContext();
     if (field.type === 'string' && field.format === 'binary') {
-        return (_jsx(Controller, { control: control, name: fieldName, render: ({ field: { value: _, onChange, ...restField } }) => (_jsx("input", { id: fieldName, type: "file", multiple: false, onChange: (e) => {
-                    if (!e.target.files)
-                        return;
-                    onChange(e.target.files.item(0));
-                }, ...props, className: cn('border rounded-lg bg-fd-background text-fd-muted-foreground p-2 font-medium text-sm', props.className), ...restField })) }));
+        return (_jsx(Controller, { control: control, name: fieldName, render: ({ field: { value, onChange, ...restField } }) => (_jsxs("div", { ...props, children: [_jsx("label", { htmlFor: fieldName, className: cn(buttonVariants({
+                            color: 'secondary',
+                            size: 'sm',
+                            className: 'w-full',
+                        })), children: value ? value.name : 'Upload' }), _jsx("input", { id: fieldName, type: "file", multiple: false, onChange: (e) => {
+                            if (!e.target.files)
+                                return;
+                            onChange(e.target.files.item(0));
+                        }, hidden: true, ...restField })] })) }));
     }
     if (field.type === 'boolean') {
         return (_jsx(Controller, { control: control, name: fieldName, render: ({ field: { value, onChange, ...restField } }) => (_jsxs(Select, { value: String(value), onValueChange: (value) => onChange(value === 'null' ? null : value === 'true'), disabled: restField.disabled, children: [_jsx(SelectTrigger, { id: fieldName, className: props.className, ...restField, children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "true", children: "True" }), _jsx(SelectItem, { value: "false", children: "False" }), !isRequired && _jsx(SelectItem, { value: "null", children: "Null" })] })] })) }));
@@ -105,21 +111,12 @@ function FieldInput({ field, fieldName, isRequired, ...props }) {
             valueAsNumber: field.type === 'number' || field.type === 'integer',
         }), ...props }));
 }
-export function FieldSet({ field: _field, fieldName, toolbar, name, isRequired, depth = 0, slotType, ...props }) {
+export function FieldSet({ field: _field, fieldName, toolbar, name, isRequired, depth = 0, slotType, collapsible = true, ...props }) {
     const field = useResolvedSchema(_field);
-    const [show, setShow] = useState(false);
+    const [show, setShow] = useState(!collapsible);
     const { info, updateInfo } = useFieldInfo(fieldName, field, depth);
     if (_field === false)
         return null;
-    const recursive = typeof _field !== 'boolean' &&
-        _field.$ref &&
-        (field.oneOf || field.type === 'object' || field.allOf || field.anyOf);
-    if (recursive && !show) {
-        return (_jsxs(FieldHeader, { ...props, name: name, required: isRequired, children: [slotType ?? _jsx(FieldHeaderCode, { children: schemaToString(field) }), toolbar, _jsx("button", { type: "button", className: cn(buttonVariants({
-                        size: 'sm',
-                        color: 'secondary',
-                    })), onClick: () => setShow(true), children: "Open" })] }));
-    }
     if (field.oneOf) {
         const showSelect = field.oneOf.length > 1;
         return (_jsx(FieldSet, { ...props, name: name, fieldName: fieldName, isRequired: isRequired, field: field.oneOf[info.oneOf], depth: depth + 1, slotType: showSelect ? false : slotType, toolbar: _jsxs(_Fragment, { children: [showSelect && (_jsx("select", { className: "text-xs font-mono", value: info.oneOf, onChange: (e) => {
@@ -139,13 +136,18 @@ export function FieldSet({ field: _field, fieldName, toolbar, name, isRequired,
                             });
                         }, children: field.type.map((item) => (_jsx("option", { value: item, children: item }, item))) })), toolbar] }) }));
     }
+    const showBn = collapsible && (_jsx("button", { type: "button", onClick: () => setShow((prev) => !prev), className: cn(buttonVariants({
+            size: 'icon-xs',
+            color: 'ghost',
+            className: 'text-fd-muted-foreground -ms-1',
+        })), children: _jsx(ChevronDown, { className: cn(show && 'rotate-180') }) }));
     if (field.type === 'object' || field.anyOf || field.allOf) {
-        return (_jsxs("fieldset", { ...props, className: cn('flex flex-col gap-1.5', props.className), children: [_jsxs(FieldHeader, { htmlFor: fieldName, name: name, required: isRequired, children: [slotType ?? (_jsx(FieldHeaderCode, { children: schemaToString(field) })), toolbar] }), _jsx(ObjectInput, { field: field, fieldName: fieldName, ...props, className: cn('rounded-lg border border-fd-primary/20 bg-fd-background/50 p-3 shadow-sm', props.className) })] }));
+        return (_jsxs("fieldset", { ...props, className: cn('flex flex-col gap-1.5 col-span-full @container', props.className), children: [_jsxs(FieldLabel, { htmlFor: fieldName, children: [showBn, _jsx(FieldLabelName, { required: isRequired, children: name }), slotType ?? _jsx(FieldLabelType, { children: schemaToString(field) }), toolbar] }), show && (_jsx(ObjectInput, { field: field, fieldName: fieldName, ...props, className: cn('rounded-lg border border-fd-primary/20 bg-fd-background/50 p-2 shadow-sm', props.className) }))] }));
     }
     if (field.type === 'array') {
-        return (_jsxs("fieldset", { ...props, className: cn('flex flex-col gap-1.5', props.className), children: [_jsxs(FieldHeader, { htmlFor: fieldName, name: name, required: isRequired, children: [slotType ?? (_jsx(FieldHeaderCode, { children: schemaToString(field) })), toolbar] }), _jsx(ArrayInput, { fieldName: fieldName, items: field.items ?? anyFields, ...props, className: cn('rounded-lg border border-fd-primary/20 bg-fd-background/50 p-3 shadow-sm', props.className) })] }));
+        return (_jsxs("fieldset", { ...props, className: cn('flex flex-col gap-1.5 col-span-full', props.className), children: [_jsxs(FieldLabel, { htmlFor: fieldName, children: [showBn, _jsx(FieldLabelName, { required: isRequired, children: name }), slotType ?? _jsx(FieldLabelType, { children: schemaToString(field) }), toolbar] }), show && (_jsx(ArrayInput, { fieldName: fieldName, items: field.items ?? anyFields, ...props, className: cn('rounded-lg border border-fd-primary/20 bg-fd-background/50 p-2 shadow-sm', props.className) }))] }));
     }
-    return (_jsxs("fieldset", { ...props, className: cn('flex flex-col gap-1.5', props.className), children: [_jsxs(FieldHeader, { htmlFor: fieldName, name: name, required: isRequired, children: [slotType ?? _jsx(FieldHeaderCode, { children: schemaToString(field) }), toolbar] }), _jsx(FieldInput, { field: field, fieldName: fieldName, isRequired: isRequired })] }));
+    return (_jsxs("fieldset", { ...props, className: cn('flex flex-col gap-1.5', props.className), children: [_jsxs(FieldLabel, { htmlFor: fieldName, children: [_jsx(FieldLabelName, { required: isRequired, children: name }), slotType ?? _jsx(FieldLabelType, { children: schemaToString(field) }), toolbar] }), _jsx(FieldInput, { field: field, fieldName: fieldName, isRequired: isRequired })] }));
 }
 function ArrayInput({ fieldName, items, ...props }) {
     const name = fieldName.split('.').at(-1) ?? '';
@@ -153,9 +155,8 @@ function ArrayInput({ fieldName, items, ...props }) {
         name: fieldName,
     });
     return (_jsxs("div", { ...props, className: cn('flex flex-col gap-2', props.className), children: [fields.map((item, index) => (_jsx(FieldSet, { name: _jsxs("span", { className: "text-fd-muted-foreground", children: [name, "[", index, "]"] }), field: items, fieldName: `${fieldName}.${index}`, toolbar: _jsx("button", { type: "button", "aria-label": "Remove Item", className: cn(buttonVariants({
-                        color: 'ghost',
-                        size: 'icon-sm',
-                        className: 'p-1',
+                        color: 'outline',
+                        size: 'icon-xs',
                     })), onClick: () => remove(index), children: _jsx(Trash2, {}) }) }, item.id))), _jsxs("button", { type: "button", className: cn(buttonVariants({
                     color: 'secondary',
                     className: 'gap-1.5 py-2',

package/dist/render/heading.d.ts

@@ -1,4 +1,4 @@
 import type { ReactNode } from 'react';
 import type { RenderContext } from '../types.js';
-export declare function heading(depth: number, child: string, ctx: RenderContext): ReactNode;
+export declare function heading(depth: number, text: string, ctx: RenderContext, children?: ReactNode): ReactNode;
 //# sourceMappingURL=heading.d.ts.map

package/dist/render/heading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../../src/render/heading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,wBAAgB,OAAO,CACrB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,aAAa,GACjB,SAAS,CAQX"}
+{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../../src/render/heading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,wBAAgB,OAAO,CACrB,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,aAAa,EAClB,QAAQ,GAAE,SAAgB,GACzB,SAAS,CAQX"}

package/dist/render/heading.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Heading } from 'fumadocs-ui/components/heading';
-export function heading(depth, child, ctx) {
-    const id = ctx.slugger.slug(child);
-    return (_jsx(Heading, { id: id, as: `h${depth.toString()}`, children: child.trim() }, id));
+export function heading(depth, text, ctx, children = text) {
+    const id = ctx.slugger.slug(text);
+    return (_jsx(Heading, { id: id, as: `h${depth.toString()}`, children: children }, id));
 }

package/dist/render/markdown.d.ts

@@ -1,5 +1,5 @@
 import { type ReactElement } from 'react';
-export declare function Markdown({ text, }: {
+export declare function Markdown({ text }: {
     text: string;
-}): Promise<ReactElement>;
+}): Promise<ReactElement<unknown, string | import("react").JSXElementConstructor<any>>>;
 //# sourceMappingURL=markdown.d.ts.map

package/dist/render/markdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../../src/render/markdown.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAkC1C,wBAAsB,QAAQ,CAAC,EAC7B,IAAI,GACL,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;CACd,GAAG,OAAO,CAAC,YAAY,CAAC,CAIxB"}
+{"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../../src/render/markdown.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAkC1C,wBAAsB,QAAQ,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,uFAMxD"}

package/dist/render/markdown.js

@@ -23,7 +23,9 @@ function rehypeReact() {
         });
     };
 }
-export async function Markdown({ text, }) {
-    const out = await processor.process(text);
+export async function Markdown({ text }) {
+    const out = await processor.process({
+        value: text,
+    });
     return out.result;
 }

package/dist/render/operation/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/render/operation/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,YAAY,EAAkB,MAAM,OAAO,CAAC;AACpE,OAAO,KAAK,EAEV,iBAAiB,EAEjB,aAAa,EAEd,MAAM,SAAS,CAAC;AAkBjB,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAW1D,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,eAAe,GAAG,KAAK,CAAC;CAC3C;AASD,wBAAgB,SAAS,CAAC,EACxB,IAAkB,EAClB,IAAI,EACJ,MAAM,EACN,GAAG,EACH,OAAO,EACP,YAAgB,GACjB,EAAE;IACD,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,iBAAiB,CAAC;IAC1B,GAAG,EAAE,aAAa,CAAC;IAEnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,GAAG,YAAY,CA6Kf"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/render/operation/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,YAAY,EAAkB,MAAM,OAAO,CAAC;AACpE,OAAO,KAAK,EAEV,iBAAiB,EACjB,aAAa,EAEd,MAAM,SAAS,CAAC;AAcjB,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAY1D,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,eAAe,GAAG,KAAK,CAAC;CAC3C;AASD,wBAAgB,SAAS,CAAC,EACxB,IAAkB,EAClB,IAAI,EACJ,MAAM,EACN,GAAG,EACH,OAAO,EACP,YAAgB,GACjB,EAAE;IACD,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,iBAAiB,CAAC;IAC1B,GAAG,EAAE,aAAa,CAAC;IAEnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,GAAG,YAAY,CAgNf"}

package/dist/render/operation/index.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
-import { getPreferredType, } from '../../utils/schema.js';
 import { idToTitle } from '../../utils/id-to-title.js';
 import { Markdown } from '../markdown.js';
 import { heading } from '../heading.js';
@@ -8,10 +7,11 @@ import { Schema } from '../schema.js';
 import { createMethod } from '../../server/create-method.js';
 import { methodKeys } from '../../build-routes.js';
 import { APIExample, APIExampleProvider, getAPIExamples, } from '../../render/operation/api-example.js';
-import { Badge, MethodLabel } from '../../ui/components/method-label.js';
-import { Tab, Tabs, TabsContent, TabsList, TabsTrigger, } from 'fumadocs-ui/components/tabs';
+import { MethodLabel } from '../../ui/components/method-label.js';
 import { getTypescriptSchema } from '../../utils/get-typescript-schema.js';
 import { CopyResponseTypeScript } from '../../ui/client.js';
+import { SelectTab, SelectTabs, SelectTabTrigger } from '../../ui/select-tabs.js';
+import { AccordionContent, AccordionHeader, AccordionItem, Accordions, AccordionTrigger, } from '../../ui/components/accordion.js';
 const ParamTypes = {
     path: 'Path Parameters',
     query: 'Query Parameters',
@@ -22,6 +22,7 @@ export function Operation({ type = 'operation', path, method, ctx, hasHead, head
     const body = method.requestBody;
     let headNode = null;
     let bodyNode = null;
+    let authNode = null;
     let responseNode = null;
     let callbacksNode = null;
     if (hasHead) {
@@ -30,34 +31,48 @@ export function Operation({ type = 'operation', path, method, ctx, hasHead, head
         headNode = (_jsxs(_Fragment, { children: [heading(headingLevel, title, ctx), method.description ? _jsx(Markdown, { text: method.description }) : null] }));
         headingLevel++;
     }
-    if (body) {
-        const type = getPreferredType(body.content);
-        if (!type || !(type in ctx.mediaAdapters))
-            throw new Error(`No supported media type for body content: ${path}, received: ${type}`);
-        bodyNode = (_jsxs(_Fragment, { children: [heading(headingLevel, 'Request Body', ctx), _jsxs("div", { className: "flex justify-between items-center gap-2 mb-4", children: [_jsx("code", { children: type }), body.required ? (_jsx(Badge, { color: "red", className: "text-xs", children: "Required" })) : (_jsx(Badge, { color: "yellow", className: "text-xs", children: "Optional" }))] }), body.description ? _jsx(Markdown, { text: body.description }) : null, _jsx(Schema, { name: "body", as: "body", schema: (body.content[type].schema ?? {}), required: body.required, readOnly: method.method === 'GET', writeOnly: method.method !== 'GET', ctx: ctx })] }));
+    const contentTypes = body ? Object.entries(body.content) : null;
+    if (body && contentTypes && contentTypes.length > 0) {
+        bodyNode = (_jsxs(SelectTabs, { defaultValue: contentTypes[0][0], children: [_jsxs("div", { className: "flex gap-2 items-end justify-between", children: [heading(headingLevel, 'Request Body', ctx), _jsx(SelectTabTrigger, { items: contentTypes.map((v) => v[0]), className: "mb-4" })] }), body.description && _jsx(Markdown, { text: body.description }), contentTypes.map(([type, content]) => {
+                    if (!(type in ctx.mediaAdapters)) {
+                        throw new Error(`Media type ${type} is not supported (in ${path})`);
+                    }
+                    return (_jsx(SelectTab, { value: type, children: _jsx(Schema, { name: "body", as: "body", schema: (content.schema ?? {}), required: body.required, readOnly: method.method === 'GET', writeOnly: method.method !== 'GET', ctx: ctx }) }, type));
+                })] }));
     }
     if (method.responses && ctx.showResponseSchema !== false) {
         const statuses = Object.keys(method.responses);
-        responseNode = (_jsxs(_Fragment, { children: [heading(headingLevel, 'Response Body', ctx), _jsx(Tabs, { items: statuses, groupId: "fumadocs_openapi_responses", children: statuses.map((status) => (_jsx(ResponseTab, { status: status, operation: method, ctx: ctx }, status))) })] }));
+        responseNode = (_jsxs(_Fragment, { children: [heading(headingLevel, 'Response Body', ctx), _jsx(Accordions, { type: "multiple", children: statuses.map((status) => (_jsx(AccordionItem, { value: status, children: _jsx(ResponseAccordion, { status: status, operation: method, ctx: ctx }) }, status))) })] }));
     }
     const parameterNode = Object.entries(ParamTypes).map(([type, title]) => {
         const params = method.parameters?.filter((param) => param.in === type);
         if (!params || params.length === 0)
             return;
-        return (_jsxs(Fragment, { children: [heading(headingLevel, title, ctx), _jsx("div", { className: "flex flex-col gap-4", children: params.map((param) => (_jsx(Schema, { name: param.name, schema: {
+        return (_jsxs(Fragment, { children: [heading(headingLevel, title, ctx), _jsx("div", { className: "flex flex-col", children: params.map((param) => (_jsx(Schema, { name: param.name, schema: {
                             ...param.schema,
                             description: param.description ?? param.schema?.description,
                             deprecated: (param.deprecated ?? false) ||
                                 (param.schema?.deprecated ?? false),
                         }, required: param.required, readOnly: method.method === 'GET', writeOnly: method.method !== 'GET', ctx: ctx }, param.name))) })] }, type));
     });
-    if (method.callbacks) {
-        callbacksNode = (_jsxs(_Fragment, { children: [heading(headingLevel, 'Webhooks', ctx), Object.entries(method.callbacks).map(([name, callback]) => (_jsx(WebhookCallback, { callback: callback, ctx: ctx, headingLevel: headingLevel }, name)))] }));
-    }
-    const security = (method.security ??
+    const securities = (method.security ??
         ctx.schema.document.security ??
         []).filter((v) => Object.keys(v).length > 0);
-    const info = (_jsxs(ctx.renderer.APIInfo, { head: headNode, method: method.method, route: path, children: [type === 'operation' ? (ctx.disablePlayground ? (_jsxs("div", { className: "flex flex-row items-center gap-2.5 p-3 rounded-xl border bg-fd-card text-fd-card-foreground not-prose", children: [_jsx(MethodLabel, { className: "text-xs", children: method.method }), _jsx("code", { className: "flex-1 overflow-auto text-nowrap text-[13px] text-fd-muted-foreground", children: path })] })) : (_jsx(ctx.renderer.APIPlayground, { path: path, method: method, ctx: ctx }))) : null, security.length > 0 ? (_jsxs(_Fragment, { children: [heading(headingLevel, 'Authorization', ctx), _jsx(AuthSection, { requirements: security, ctx: ctx })] })) : null, bodyNode, parameterNode, responseNode, callbacksNode] }));
+    if (type === 'operation' && securities.length > 0) {
+        const securitySchemes = ctx.schema.document.components?.securitySchemes;
+        const names = securities.map((security) => Object.keys(security).join(' & '));
+        authNode = (_jsxs(SelectTabs, { defaultValue: names[0], children: [_jsxs("div", { className: "flex items-end justify-between gap-2", children: [heading(headingLevel, 'Authorization', ctx), _jsx(SelectTabTrigger, { items: names, className: "mb-4" })] }), securities.map((security, i) => (_jsx(SelectTab, { value: names[i], children: Object.entries(security).map(([key, scopes]) => {
+                        const scheme = securitySchemes?.[key];
+                        if (!scheme)
+                            return;
+                        return (_jsx(AuthScheme, { scheme: scheme, scopes: scopes, ctx: ctx }, key));
+                    }) }, i)))] }));
+    }
+    if (method.callbacks) {
+        const callbacks = Object.entries(method.callbacks);
+        callbacksNode = (_jsxs(SelectTabs, { defaultValue: callbacks[0][0], children: [_jsxs("div", { className: "flex justify-between gap-2 items-end", children: [heading(headingLevel, 'Callbacks', ctx), _jsx(SelectTabTrigger, { items: callbacks.map((v) => v[0]), className: "mb-4" })] }), callbacks.map(([name, callback]) => (_jsx(SelectTab, { value: name, children: _jsx(WebhookCallback, { callback: callback, ctx: ctx, headingLevel: headingLevel }) }, name)))] }));
+    }
+    const info = (_jsxs(ctx.renderer.APIInfo, { head: headNode, method: method.method, route: path, children: [type === 'operation' ? (ctx.disablePlayground ? (_jsxs("div", { className: "flex flex-row items-center gap-2.5 p-3 rounded-xl border bg-fd-card text-fd-card-foreground not-prose", children: [_jsx(MethodLabel, { className: "text-xs", children: method.method }), _jsx("code", { className: "flex-1 overflow-auto text-nowrap text-[13px] text-fd-muted-foreground", children: path })] })) : (_jsx(ctx.renderer.APIPlayground, { path: path, method: method, ctx: ctx }))) : null, authNode, parameterNode, bodyNode, responseNode, callbacksNode] }));
     if (type === 'operation') {
         const examples = getAPIExamples(path, method, ctx);
         return (_jsx(ctx.renderer.API, { children: _jsxs(APIExampleProvider, { route: path, examples: examples, method: method, children: [info, _jsx(APIExample, { examples: examples, method: method, ctx: ctx })] }) }));
@@ -66,52 +81,47 @@ export function Operation({ type = 'operation', path, method, ctx, hasHead, head
         return info;
     }
 }
-async function ResponseTab({ status, operation, ctx, }) {
+async function ResponseAccordion({ status, operation, ctx, }) {
     const response = operation.responses[status];
-    const { generateTypeScriptSchema, schema } = ctx;
-    const mediaType = response.content
-        ? getPreferredType(response.content)
+    const { generateTypeScriptSchema, schema: { dereferenceMap }, } = ctx;
+    const contentTypes = response.content
+        ? Object.entries(response.content)
         : null;
-    const responseOfType = mediaType ? response.content?.[mediaType] : null;
-    const description = responseOfType?.schema?.description ?? response.description ?? '';
-    let ts;
-    if (generateTypeScriptSchema) {
-        ts = await generateTypeScriptSchema(operation, status);
-    }
-    else if (generateTypeScriptSchema === undefined && responseOfType?.schema) {
-        ts = await getTypescriptSchema(responseOfType?.schema, schema.dereferenceMap);
-    }
-    return (_jsxs(Tab, { value: status, children: [_jsx(Markdown, { text: description }), ts && _jsx(CopyResponseTypeScript, { code: ts }), responseOfType?.schema && (_jsx(Schema, { name: "response", schema: responseOfType.schema, as: "body", readOnly: true, ctx: ctx }))] }));
+    return (_jsxs(SelectTabs, { defaultValue: contentTypes?.[0][0], children: [_jsxs(AccordionHeader, { children: [_jsx(AccordionTrigger, { className: "font-mono", children: status }), contentTypes && (_jsx(SelectTabTrigger, { items: contentTypes.map((v) => v[0]) }))] }), _jsxs(AccordionContent, { children: [response.description && (_jsx("div", { className: "prose-no-margin", children: _jsx(Markdown, { text: response.description }) })), contentTypes?.map(async ([type, resType]) => {
+                        const schema = resType.schema;
+                        let ts;
+                        if (generateTypeScriptSchema) {
+                            ts = await generateTypeScriptSchema(operation, status);
+                        }
+                        else if (generateTypeScriptSchema === undefined && schema) {
+                            ts = await getTypescriptSchema(schema, dereferenceMap);
+                        }
+                        return (_jsxs(SelectTab, { value: type, className: "mt-2", children: [ts && _jsx(CopyResponseTypeScript, { code: ts }), schema && (_jsx("div", { className: "border px-3 rounded-lg my-2 overflow-auto max-h-[400px]", children: _jsx(Schema, { name: "response", schema: schema, as: "body", readOnly: true, ctx: ctx }) }))] }, type));
+                    })] })] }));
 }
 function WebhookCallback({ callback, ctx, headingLevel, }) {
-    return Object.entries(callback).map(([path, pathItem]) => {
-        const pathNodes = methodKeys.map((method) => {
-            const operation = pathItem[method];
-            if (!operation)
-                return null;
-            return (_jsx(Operation, { type: "webhook", hasHead: true, path: path, headingLevel: headingLevel + 1, method: createMethod(method, pathItem, operation), ctx: ctx }, method));
-        });
-        return _jsx(Fragment, { children: pathNodes }, path);
-    });
+    const pathItems = Object.entries(callback);
+    return (_jsx(Accordions, { type: "single", collapsible: true, children: pathItems.map(([path, pathItem]) => {
+            const pathNodes = methodKeys.map((method) => {
+                const operation = pathItem[method];
+                if (!operation)
+                    return null;
+                return (_jsx("div", { className: "border p-3 my-2 prose-no-margin rounded-lg", children: _jsx(Operation, { type: "webhook", path: path, headingLevel: headingLevel + 1, method: createMethod(method, pathItem, operation), ctx: ctx }) }, method));
+            });
+            return (_jsxs(AccordionItem, { value: path, children: [_jsx(AccordionHeader, { children: _jsx(AccordionTrigger, { className: "font-mono", children: path }) }), _jsx(AccordionContent, { children: pathNodes })] }, path));
+        }) }));
 }
-function AuthSection({ ctx: { schema: { document }, renderer, }, requirements, }) {
-    return (_jsxs(Tabs, { defaultValue: "0", children: [_jsx(TabsList, { children: requirements.map((securities, i) => (_jsx(TabsTrigger, { value: i.toString(), children: Object.keys(securities).join(' & ') }, i))) }), requirements.map((securities, i) => {
-                return (_jsx(TabsContent, { value: i.toString(), className: "flex flex-col gap-4", children: Object.entries(securities).map(([key, scopes]) => {
-                        const schema = document.components?.securitySchemes?.[key];
-                        if (!schema)
-                            return;
-                        const scopeElement = scopes.length > 0 ? (_jsxs("p", { children: ["Scope: ", _jsx("code", { children: scopes.join(', ') })] })) : null;
-                        if (schema.type === 'http' || schema.type === 'oauth2') {
-                            return (_jsxs(renderer.Property, { name: "Authorization", type: schema.type === 'http' && schema.scheme === 'basic'
-                                    ? `Basic <token>`
-                                    : 'Bearer <token>', required: true, children: [schema.description && (_jsx(Markdown, { text: schema.description })), _jsxs("p", { children: ["In: ", _jsx("code", { children: "header" })] }), scopeElement] }, key));
-                        }
-                        if (schema.type === 'apiKey') {
-                            return (_jsxs(renderer.Property, { name: schema.name, type: "<token>", children: [schema.description && (_jsx(Markdown, { text: schema.description })), _jsxs("p", { children: ["In: ", _jsx("code", { children: schema.in }), scopeElement] })] }, key));
-                        }
-                        if (schema.type === 'openIdConnect') {
-                            return (_jsxs(renderer.Property, { name: "OpenID Connect", type: "<token>", required: true, children: [schema.description && (_jsx(Markdown, { text: schema.description })), scopeElement] }, key));
-                        }
-                    }) }, i));
-            })] }));
+function AuthScheme({ scheme: schema, scopes, ctx: { renderer }, }) {
+    const scopeElement = scopes.length > 0 ? (_jsxs("p", { children: ["Scope: ", _jsx("code", { children: scopes.join(', ') })] })) : null;
+    if (schema.type === 'http' || schema.type === 'oauth2') {
+        return (_jsxs(renderer.Property, { name: "Authorization", type: schema.type === 'http' && schema.scheme === 'basic'
+                ? `Basic <token>`
+                : 'Bearer <token>', required: true, children: [schema.description && _jsx(Markdown, { text: schema.description }), _jsxs("p", { children: ["In: ", _jsx("code", { children: "header" })] }), scopeElement] }));
+    }
+    if (schema.type === 'apiKey') {
+        return (_jsxs(renderer.Property, { name: schema.name, type: "<token>", children: [schema.description && _jsx(Markdown, { text: schema.description }), _jsxs("p", { children: ["In: ", _jsx("code", { children: schema.in }), scopeElement] })] }));
+    }
+    if (schema.type === 'openIdConnect') {
+        return (_jsxs(renderer.Property, { name: "OpenID Connect", type: "<token>", required: true, children: [schema.description && _jsx(Markdown, { text: schema.description }), scopeElement] }));
+    }
 }

package/dist/render/renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/render/renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAWtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAGtE,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IAEd,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IAEb,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,SAAS,CAAC;QACxB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;CACL;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,aAAa,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAC/B,GAAG,EAAE,aAAa,CAAC;QAAE,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IAC5C,OAAO,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACrC,UAAU,EAAE,aAAa,CAAC;QAAE,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IAEnD,SAAS,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IACzC,QAAQ,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IACvC,mBAAmB,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACjD,QAAQ,EAAE,aAAa,CAAC;QAAE,KAAK,EAAE,MAAM,EAAE,CAAC;QAAC,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IAClE,OAAO,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACrC,aAAa,EAAE,aAAa,CAAC;QAAE,YAAY,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IAC7E,YAAY,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAE/C;;OAEG;IACH,iBAAiB,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;IACzD,QAAQ,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IACvC,aAAa,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CAClD;AAED,wBAAgB,aAAa,IAAI,QAAQ,CAqCxC"}
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/render/renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAiBtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAGtE,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IAEd,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IAEb,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,SAAS,CAAC;QACxB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;CACL;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,aAAa,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAC/B,GAAG,EAAE,aAAa,CAAC;QAAE,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IAC5C,OAAO,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACrC,UAAU,EAAE,aAAa,CAAC;QAAE,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IAEnD,SAAS,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IACzC,QAAQ,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IACvC,mBAAmB,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACjD,QAAQ,EAAE,aAAa,CAAC;QAAE,KAAK,EAAE,MAAM,EAAE,CAAC;QAAC,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IAClE,OAAO,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACrC,aAAa,EAAE,aAAa,CAAC;QAAE,YAAY,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IAC7E,YAAY,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAE/C;;OAEG;IACH,iBAAiB,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;IACzD,QAAQ,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IACvC,aAAa,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CAClD;AAED,wBAAgB,aAAa,IAAI,QAAQ,CA4CxC"}

package/dist/render/renderer.js

@@ -1,6 +1,6 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
-import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
+import { AccordionContent, AccordionHeader, AccordionItem, Accordions, AccordionTrigger, } from '../ui/components/accordion.js';
 import { API, APIExample, APIInfo, ObjectCollapsible, Property, Root, } from '../ui/index.js';
 import { APIPlayground } from '../playground/index.js';
 import { CodeExampleSelector } from '../ui/lazy.js';
@@ -12,8 +12,8 @@ export function createRenders() {
         APIExample,
         Responses: (props) => (_jsx(Tabs, { ...props, groupId: "fumadocs_openapi_responses" })),
         Response: Tab,
-        ResponseTypes: (props) => (_jsx(Accordions, { type: "single", className: "!-m-4 border-none pt-2", defaultValue: props.defaultValue, children: props.children })),
-        ResponseType: (props) => (_jsx(Accordion, { title: props.label, children: props.children })),
+        ResponseTypes: (props) => (_jsx(Accordions, { type: "single", className: "pt-2", defaultValue: props.defaultValue, children: props.children })),
+        ResponseType: (props) => (_jsxs(AccordionItem, { value: props.label, children: [_jsx(AccordionHeader, { children: _jsx(AccordionTrigger, { children: props.label }) }), _jsx(AccordionContent, { className: "prose-no-margin", children: props.children })] })),
         Property,
         ObjectCollapsible,
         Requests: (props) => (_jsx(Tabs, { groupId: "fumadocs_openapi_requests", ...props })),

package/dist/render/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../src/render/schema.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAwB7C,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,MAAM,EACN,QAAgB,EAChB,QAAgB,EAChB,SAAiB,EACjB,EAAe,EACf,GAAG,EAAE,EAAE,QAAQ,EAAE,GAClB,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,cAAc,CAAC;IACvB,EAAE,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAEzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,EAAE,aAAa,CAAC;CACpB,GAAG,SAAS,CAoSZ"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../src/render/schema.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAwB7C,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,MAAM,EACN,QAAgB,EAChB,QAAgB,EAChB,SAAiB,EACjB,EAAe,EACf,GAAG,EAAE,EAAE,QAAQ,EAAE,GAClB,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,cAAc,CAAC;IACvB,EAAE,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAEzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,EAAE,aAAa,CAAC;CACpB,GAAG,SAAS,CAiSZ"}

package/dist/render/schema.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Fragment } from 'react';
 import { combineSchema } from '../utils/combine-schema.js';
 import { Markdown } from './markdown.js';
@@ -85,7 +85,7 @@ export function Schema({ name, schema, required = false, readOnly = false, write
         }
         if (fields.length === 0)
             return;
-        return (_jsx("div", { className: "flex flex-col border divide-y divide-fd-border bg-fd-muted rounded-lg not-prose", children: fields.map((field) => (_jsxs("div", { className: "flex items-center text-[13px] px-3 py-2.5 justify-between gap-2", children: [_jsx("span", { className: "font-medium", children: field.key }), _jsx("code", { className: "texxt-xs text-fd-muted-foreground", children: field.value })] }, field.key))) }));
+        return (_jsx("div", { className: "flex flex-wrap gap-2 not-prose", children: fields.map((field) => (_jsxs("div", { className: "bg-fd-secondary text-fd-secondary-foreground border rounded-lg text-xs p-1.5 shadow-md", children: [_jsx("span", { className: "font-medium me-2", children: field.key }), _jsx("code", { className: "text-fd-muted-foreground", children: field.value })] }, field.key))) }));
     }
     function primitiveBody(schema, ctx, collapsible, nested) {
         if (schema.type === 'object') {
@@ -99,7 +99,7 @@ export function Schema({ name, schema, required = false, readOnly = false, write
             };
             if (props.length === 0 && patternProps.length === 0)
                 return _jsx("p", { children: "Empty Object" });
-            const children = (_jsxs("div", { className: "flex flex-col gap-4", children: [props.map(([key, value]) => (_jsx(Fragment, { children: property(key, value, next, {
+            const children = (_jsxs(_Fragment, { children: [props.map(([key, value]) => (_jsx(Fragment, { children: property(key, value, next, {
                             required: schema.required?.includes(key) ?? false,
                             nested,
                         }) }, key))), patternProps.map(([key, value]) => (_jsx(Fragment, { children: property(key, value, next, { nested }) }, key))), schema.additionalProperties &&
@@ -114,11 +114,10 @@ export function Schema({ name, schema, required = false, readOnly = false, write
             const items = schema.items;
             if (!items || !isComplexType(items) || ctx.stack.has(items))
                 return;
-            const children = (_jsxs("div", { className: "flex flex-col gap-4", children: [items.description && _jsx(Markdown, { text: items.description }), propertyBody(items, (child, ctx) => primitiveBody(child, ctx, false, true), {
-                        ...ctx,
-                        stack: ctx.stack.next(schema),
-                    })] }));
-            return (_jsx(renderer.ObjectCollapsible, { name: "Array Item", children: children }));
+            return (_jsxs(_Fragment, { children: [items.description && (_jsx(Markdown, { text: 'Item: ' + items.description })), _jsx(renderer.ObjectCollapsible, { name: "Array Item", children: propertyBody(items, (child, ctx) => primitiveBody(child, ctx, false, true), {
+                            ...ctx,
+                            stack: ctx.stack.next(schema),
+                        }) })] }));
         }
     }
     function property(key, schema, ctx, props) {

package/dist/server/proxy.d.ts

@@ -4,9 +4,24 @@ type Proxy = {
     [K in (typeof keys)[number]]: (req: NextRequest) => Promise<Response>;
 };
 interface CreateProxyOptions {
+    /**
+     * Filter by prefixes of request url
+     *
+     * @deprecated Use `allowedOrigins` for filtering origins, or `filterRequest` for more detailed rules.
+     */
     allowedUrls?: string[];
     /**
-     * Override original request/response with yours
+     * List of allowed origins to proxy to.
+     */
+    allowedOrigins?: string[];
+    /**
+     * Determine if the proxied request is allowed.
+     *
+     * @returns true if allowed, otherwise forbidden.
+     */
+    filterRequest?: (request: Request) => boolean;
+    /**
+     * Override proxied request/response with yours
      */
     overrides?: {
         request?: (request: Request) => Request;

package/dist/server/proxy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"proxy.d.ts","sourceRoot":"","sources":["../../src/server/proxy.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,QAAA,MAAM,IAAI,4DAA6D,CAAC;AAExE,KAAK,KAAK,GAAG;KACV,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,WAAW,KAAK,OAAO,CAAC,QAAQ,CAAC;CACtE,CAAC;AAEF,UAAU,kBAAkB;IAC1B,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC;QACxC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,QAAQ,CAAC;KAC7C,CAAC;CACH;AAED,wBAAgB,WAAW,CAAC,OAAO,GAAE,kBAAuB,GAAG,KAAK,CA8EnE"}
+{"version":3,"file":"proxy.d.ts","sourceRoot":"","sources":["../../src/server/proxy.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,QAAA,MAAM,IAAI,4DAA6D,CAAC;AAExE,KAAK,KAAK,GAAG;KACV,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,WAAW,KAAK,OAAO,CAAC,QAAQ,CAAC;CACtE,CAAC;AAEF,UAAU,kBAAkB;IAC1B;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IAEvB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAE1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC;IAE9C;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC;QACxC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,QAAQ,CAAC;KAC7C,CAAC;CACH;AAED,wBAAgB,WAAW,CAAC,OAAO,GAAE,kBAAuB,GAAG,KAAK,CAmGnE"}

package/dist/server/proxy.js

@@ -1,39 +1,53 @@
 const keys = ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'HEAD'];
 export function createProxy(options = {}) {
-    const { allowedUrls, overrides } = options;
+    const { allowedOrigins, allowedUrls, filterRequest = (req) => {
+        return (!allowedUrls || allowedUrls.some((item) => req.url.startsWith(item)));
+    }, overrides, } = options;
     const handlers = {};
     async function handler(req) {
         const url = req.nextUrl.searchParams.get('url');
         if (!url) {
-            return Response.json('A `url` query parameter is required for proxy url', {
+            return Response.json('[Proxy] A `url` query parameter is required for proxy url', {
                 status: 400,
             });
         }
-        if (allowedUrls &&
-            allowedUrls.every((allowedUrl) => !allowedUrl.startsWith(url))) {
-            return Response.json('The given `url` query parameter is not allowed', {
+        let parsedUrl;
+        try {
+            parsedUrl = new URL(url);
+        }
+        catch {
+            return Response.json('[Proxy] Invalid `url` parameter value.', {
+                status: 400,
+            });
+        }
+        if (allowedOrigins && !allowedOrigins.includes(parsedUrl.origin)) {
+            return Response.json(`[Proxy] The origin "${parsedUrl.origin}" is not allowed.`, {
                 status: 400,
             });
         }
-        let clonedReq = new Request(url, {
+        let proxied = new Request(parsedUrl, {
             ...req,
             cache: 'no-cache',
             mode: 'cors',
         });
         if (overrides?.request) {
-            clonedReq = overrides.request(clonedReq);
+            proxied = overrides.request(proxied);
         }
-        clonedReq.headers.forEach((_value, originalKey) => {
+        if (!filterRequest(proxied)) {
+            return Response.json('[Proxy] The proxied request is not allowed', {
+                status: 403,
+            });
+        }
+        proxied.headers.forEach((_value, originalKey) => {
             const key = originalKey.toLowerCase();
-            const notAllowed = key === 'origin';
-            if (notAllowed) {
-                clonedReq.headers.delete(originalKey);
+            if (key === 'origin') {
+                proxied.headers.delete(originalKey);
             }
         });
-        let res = await fetch(clonedReq).catch((e) => new Error(e.toString()));
+        let res = await fetch(proxied).catch((e) => new Error(e.toString()));
         if (res instanceof Error) {
-            return Response.json(`Failed to proxy request: ${res.message}`, {
-                status: 400,
+            return Response.json(`[Proxy] Failed to proxy request: ${res.message}`, {
+                status: 500,
             });
         }
         if (overrides?.response) {
@@ -42,14 +56,14 @@ export function createProxy(options = {}) {
         const headers = new Headers(res.headers);
         headers.forEach((_value, originalKey) => {
             const key = originalKey.toLowerCase();
-            const notAllowed = key.startsWith('access-control-') || key === 'content-encoding';
-            if (notAllowed) {
+            if (key.startsWith('access-control-') || key === 'content-encoding') {
                 headers.delete(originalKey);
             }
         });
         headers.set('X-Forwarded-Host', res.url);
         return new Response(res.body, {
-            ...res,
+            status: res.status,
+            statusText: res.statusText,
             headers,
         });
     }

package/dist/ui/components/accordion.d.ts

@@ -0,0 +1,8 @@
+import * as Primitive from '@radix-ui/react-accordion';
+import type { ComponentProps } from 'react';
+export declare function Accordions(props: ComponentProps<typeof Primitive.Root>): import("react/jsx-runtime").JSX.Element;
+export declare function AccordionItem(props: ComponentProps<typeof Primitive.Item>): import("react/jsx-runtime").JSX.Element;
+export declare function AccordionContent(props: ComponentProps<typeof Primitive.Content>): import("react/jsx-runtime").JSX.Element;
+export declare function AccordionHeader(props: ComponentProps<typeof Primitive.Header>): import("react/jsx-runtime").JSX.Element;
+export declare function AccordionTrigger(props: ComponentProps<typeof Primitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=accordion.d.ts.map

package/dist/ui/components/accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/ui/components/accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,SAAS,MAAM,2BAA2B,CAAC;AAEvD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC,2CAUtE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC,2CAMzE;AAED,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,cAAc,CAAC,OAAO,SAAS,CAAC,OAAO,CAAC,2CAahD;AAED,wBAAgB,eAAe,CAC7B,KAAK,EAAE,cAAc,CAAC,OAAO,SAAS,CAAC,MAAM,CAAC,2CAa/C;AAED,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,cAAc,CAAC,OAAO,SAAS,CAAC,OAAO,CAAC,2CAchD"}