fumadocs-openapi 9.0.4 → 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/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"}

package/dist/ui/components/accordion.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Primitive from '@radix-ui/react-accordion';
+import { ChevronRight } from '../../icons.js';
+import { cn } from 'fumadocs-ui/utils/cn';
+export function Accordions(props) {
+    return (_jsx(Primitive.Root, { ...props, className: cn('divide-y divide-fd-border overflow-hidden', props.className) }));
+}
+export function AccordionItem(props) {
+    return (_jsx(Primitive.Item, { ...props, className: cn('scroll-m-20', props.className), children: props.children }));
+}
+export function AccordionContent(props) {
+    return (_jsx(Primitive.Content, { ...props, className: cn('overflow-hidden px-1 data-[state=closed]:animate-fd-accordion-up data-[state=open]:animate-fd-accordion-down', props.className), children: props.children }));
+}
+export function AccordionHeader(props) {
+    return (_jsx(Primitive.Header, { ...props, className: cn('not-prose flex py-2 text-fd-foreground font-medium', props.className), children: props.children }));
+}
+export function AccordionTrigger(props) {
+    return (_jsxs(Primitive.Trigger, { ...props, className: cn('flex flex-1 items-center gap-1 text-start group/accordion focus-visible:outline-none', props.className), children: [_jsx(ChevronRight, { className: "size-3.5 text-fd-muted-foreground shrink-0 transition-transform group-data-[state=open]/accordion:rotate-90" }), props.children] }));
+}

package/dist/ui/components/input.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { cn } from 'fumadocs-ui/utils/cn';
 import { cva } from 'class-variance-authority';
-export const labelVariants = cva('text-xs font-medium text-fd-foreground/80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70');
+export const labelVariants = cva('text-xs font-medium text-fd-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70');
 const Input = React.forwardRef(({ className, type, ...props }, ref) => {
     return (_jsx("input", { type: type, className: cn('flex h-9 w-full rounded-md border bg-fd-secondary px-2 py-1.5 text-[13px] text-fd-secondary-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 }));
 });

package/dist/ui/components/select.js

@@ -6,7 +6,7 @@ import { cn } from 'fumadocs-ui/utils/cn';
 const Select = SelectPrimitive.Root;
 const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
-const SelectTrigger = forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn('flex min-h-10 items-center w-full rounded-md border px-3 py-2 text-start text-[13px] text-fd-secondary-foreground bg-fd-secondary hover:bg-fd-accent focus:outline-none focus:ring focus:ring-fd-ring disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { className: "ms-auto size-3.5 text-fd-muted-foreground" }) })] })));
+const SelectTrigger = forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn('flex items-center w-full rounded-md border p-2 gap-2 text-start text-[13px] text-fd-secondary-foreground bg-fd-secondary hover:bg-fd-accent focus:outline-none focus:ring focus:ring-fd-ring disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { className: "ms-auto size-3.5 text-fd-muted-foreground" }) })] })));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 const SelectScrollUpButton = forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollUpButton, { ref: ref, className: cn('flex items-center justify-center py-1', className), ...props, children: _jsx(ChevronUp, { className: "size-4" }) })));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;

package/dist/ui/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAYlE,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,GAAG,cAAc,CAAC,cAAc,CAAC,2CAmB5C;AAED,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,cAAc,CAAC,2CAMhC;AAED,wBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,cAAc,CAAC,2CAmBzE;AAED,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,MAAM,EACN,GAAG,KAAK,EACT,EAAE,aAAa,2CAyBf;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAY/D;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,SAAS,CAAC;CACrB,2CAmBA;AAED,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAYlE,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,GAAG,cAAc,CAAC,cAAc,CAAC,2CAmB5C;AAED,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,cAAc,CAAC,2CAMhC;AAED,wBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,cAAc,CAAC,2CAmBzE;AAED,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,MAAM,EACN,GAAG,KAAK,EACT,EAAE,aAAa,2CA+Bf;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAY/D;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,SAAS,CAAC;CACrB,2CAiBA;AAED,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/ui/index.js

@@ -18,12 +18,14 @@ export function API({ children, ...props }) {
         }, children: children }));
 }
 export function Property({ name, type, required, deprecated, nested, ...props }) {
-    return (_jsxs("div", { className: cn('flex flex-col gap-3 text-sm', !nested && 'p-3 border rounded-xl bg-fd-card'), children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3 not-prose", children: [_jsxs("span", { className: "px-1 py-0.5 border rounded-md border-fd-primary/10 bg-fd-primary/10 font-mono text-xs text-fd-primary sm:text-[13px]", children: [name, required === false && '?'] }), _jsx("span", { className: "text-xs me-auto font-mono text-fd-muted-foreground", children: type }), deprecated && (_jsx(Badge, { color: "yellow", className: "text-xs", children: "Deprecated" }))] }), _jsx("div", { className: "prose-no-margin empty:hidden", children: props.children })] }));
+    return (_jsxs("div", { className: cn('text-sm border-t', nested
+            ? 'p-3 border-x bg-fd-card last:rounded-b-xl first:rounded-tr-xl last:border-b'
+            : 'py-4 first:border-t-0'), children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 not-prose", children: [_jsxs("span", { className: "font-medium font-mono text-fd-primary", children: [name, required === false && (_jsx("span", { className: "text-fd-muted-foreground", children: "?" }))] }), _jsx("span", { className: "me-auto text-xs font-mono text-fd-muted-foreground", children: type }), deprecated && (_jsx(Badge, { color: "yellow", className: "text-xs", children: "Deprecated" }))] }), _jsx("div", { className: "prose-no-margin pt-2.5 empty:hidden", children: props.children })] }));
 }
 export function APIExample(props) {
     return (_jsx("div", { ...props, className: cn('prose-no-margin md:sticky md:top-(--fd-api-info-top) xl:w-[400px]', props.className), children: props.children }));
 }
 export function ObjectCollapsible(props) {
-    return (_jsxs(Collapsible, { ...props, children: [_jsxs(CollapsibleTrigger, { className: cn(buttonVariants({ color: 'secondary', size: 'sm' }), 'group px-3 py-2 data-[state=open]:rounded-b-none data-[state=open]:border-b-0'), children: [props.name, _jsx(ChevronDown, { className: "size-4 text-fd-muted-foreground group-data-[state=open]:rotate-180" })] }), _jsx(CollapsibleContent, { className: "-me-3", children: _jsx("div", { className: "border-s border-y rounded-b-lg p-3", children: props.children }) })] }));
+    return (_jsxs(Collapsible, { ...props, children: [_jsxs(CollapsibleTrigger, { className: cn(buttonVariants({ color: 'secondary', size: 'sm' }), 'group px-3 py-2 data-[state=open]:rounded-b-none'), children: [props.name, _jsx(ChevronDown, { className: "size-4 text-fd-muted-foreground group-data-[state=open]:rotate-180" })] }), _jsx(CollapsibleContent, { className: "-mt-px *:bg-fd-card", children: props.children })] }));
 }
 export { APIPage } from '../render/api-page.js';

package/dist/ui/select-tabs.d.ts

@@ -0,0 +1,13 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { SelectTrigger } from '../ui/components/select.js';
+export declare function SelectTabs({ defaultValue, children, }: {
+    defaultValue?: string;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SelectTab({ value, ...props }: ComponentProps<'div'> & {
+    value: string;
+}): import("react/jsx-runtime").JSX.Element | undefined;
+export declare function SelectTabTrigger({ items, ...props }: ComponentProps<typeof SelectTrigger> & {
+    items: string[];
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=select-tabs.d.ts.map

package/dist/ui/select-tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-tabs.d.ts","sourceRoot":"","sources":["../../src/ui/select-tabs.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AACf,OAAO,EAIL,aAAa,EAEd,MAAM,wBAAwB,CAAC;AAQhC,wBAAgB,UAAU,CAAC,EACzB,YAAY,EACZ,QAAQ,GACT,EAAE;IACD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;CACrB,2CAQA;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;CACf,uDAKA;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,EAAE,CAAA;CAAE,2CAoB5D"}