fumadocs-openapi 4.0.5 → 4.1.0

package/dist/{chunk-RSFOKBAM.js → chunk-BYW6XCQ2.js}

@@ -104,6 +104,17 @@ function ApiProvider({
   return /* @__PURE__ */ jsx(ApiContext.Provider, { value: { baseUrl, setBaseUrl, highlighter }, children });
 }
 
+// src/ui/contexts/schema.tsx
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var SchemaContext = createContext2(
+  void 0
+);
+function useSchemaContext() {
+  const ctx = useContext2(SchemaContext);
+  if (!ctx) throw new Error("Missing provider");
+  return ctx;
+}
+
 export {
   badgeVariants,
   getBadgeColor,
@@ -111,5 +122,7 @@ export {
   getDefaultValues,
   resolve,
   useApiContext,
-  ApiProvider
+  ApiProvider,
+  SchemaContext,
+  useSchemaContext
 };

package/dist/index.d.ts

@@ -51,6 +51,25 @@ interface Renderer {
 
 declare const defaultRenderer: Renderer;
 
+interface Endpoint {
+    /**
+     * URL, including path and query parameters
+     */
+    url: string;
+    method: string;
+    body?: unknown;
+    responses: Record<string, Response>;
+    parameters: Parameter[];
+}
+interface Response {
+    schema: OpenAPIV3.SchemaObject;
+}
+interface Parameter {
+    name: string;
+    in: string;
+    schema: OpenAPIV3.SchemaObject;
+}
+
 interface CodeSample {
     lang: string;
     label: string;
@@ -67,33 +86,27 @@ interface MethodInformation extends OpenAPIV3.OperationObject {
     parameters: OpenAPIV3.ParameterObject[];
     method: string;
 }
+type Awaitable<T> = T | Promise<T>;
 interface RenderContext {
     renderer: Renderer;
     document: OpenAPIV3.Document;
     baseUrl: string;
-    generateCodeSamples?: (endpoint: Endpoint) => CodeSample[];
-}
-
-interface Endpoint {
     /**
-     * URL, including path and query parameters
+     * Generate TypeScript definitions from response schema.
+     *
+     * Pass `false` to disable it.
+     *
+     * @param endpoint - the API endpoint
+     * @param code - status code
      */
-    url: string;
-    method: string;
-    body?: unknown;
-    responses: Record<string, Response>;
-    parameters: Parameter[];
-}
-interface Response {
-    schema: OpenAPIV3.SchemaObject;
-}
-interface Parameter {
-    name: string;
-    in: string;
-    schema: OpenAPIV3.SchemaObject;
+    generateTypeScriptSchema?: ((endpoint: Endpoint, code: string) => Awaitable<string>) | false;
+    /**
+     * Generate code samples for endpoint.
+     */
+    generateCodeSamples?: (endpoint: Endpoint) => Awaitable<CodeSample[]>;
 }
 
-interface GenerateOptions {
+interface GenerateOptions extends Pick<RenderContext, 'generateCodeSamples' | 'generateTypeScriptSchema'> {
     /**
      * The imports of your MDX components.
      *
@@ -109,10 +122,6 @@ interface GenerateOptions {
      * A `full: true` property will be added by default.
      */
     frontmatter?: (title: string, description: string | undefined) => Record<string, unknown>;
-    /**
-     * Generate code samples for endpoint
-     */
-    generateCodeSamples?: (endpoint: Endpoint) => CodeSample[];
     renderer?: Partial<Renderer>;
 }
 interface GenerateTagOutput {

package/dist/index.js

@@ -621,6 +621,7 @@ async function renderOperation(path, method, ctx, noTitle = false) {
     level++;
   }
   if (method.description) info.push(p(method.description));
+  info.push(renderPlayground(path, method, ctx));
   if (security) {
     info.push(heading(level, "Authorization"));
     info.push(getAuthSection(security, ctx));
@@ -676,7 +677,6 @@ async function renderOperation(path, method, ctx, noTitle = false) {
     info.push(heading(level, group), ...parameters);
   }
   info.push(getResponseTable(method));
-  info.push(renderPlayground(path, method, ctx));
   const samples = dedupe([
     {
       label: "cURL",
@@ -688,7 +688,7 @@ async function renderOperation(path, method, ctx, noTitle = false) {
       source: getSampleRequest2(endpoint),
       lang: "js"
     },
-    ...ctx.generateCodeSamples?.(endpoint) ?? [],
+    ...ctx.generateCodeSamples ? await ctx.generateCodeSamples(endpoint) : [],
     ...method["x-codeSamples"] ?? []
   ]);
   example.push(
@@ -792,21 +792,26 @@ function getResponseTable(operation) {
   });
   return table.join("\n");
 }
-async function getResponseTabs(endpoint, operation, { renderer }) {
+async function getResponseTabs(endpoint, operation, { renderer, generateTypeScriptSchema }) {
   const items = [];
   const child = [];
   for (const code of Object.keys(operation.responses)) {
     const example = getExampleResponse(endpoint, code);
-    const ts = await getTypescriptSchema(endpoint, code);
+    let ts;
+    if (generateTypeScriptSchema) {
+      ts = await generateTypeScriptSchema(endpoint, code);
+    } else if (generateTypeScriptSchema === void 0) {
+      ts = await getTypescriptSchema(endpoint, code);
+    }
     const description = code in endpoint.responses ? endpoint.responses[code].schema.description : void 0;
-    if (example && ts) {
+    if (example) {
       items.push(code);
       child.push(
         renderer.Response({ value: code }, [
           p(description),
           renderer.ResponseTypes([
             renderer.ExampleResponse(example),
-            renderer.TypeScriptResponse(ts)
+            ...ts ? [renderer.TypeScriptResponse(ts)] : []
           ])
         ])
       );
@@ -896,6 +901,8 @@ function getContext(document, options) {
       ...defaultRenderer,
       ...options.renderer
     },
+    generateTypeScriptSchema: options.generateTypeScriptSchema,
+    generateCodeSamples: options.generateCodeSamples,
     baseUrl: document.servers?.[0].url ?? "https://example.com"
   };
 }

package/dist/{playground-7UGUJXDH.js → playground-EVJUDTB3.js}

@@ -1,13 +1,19 @@
 import {
+  SchemaContext,
   getDefaultValue,
   getDefaultValues,
   resolve,
-  useApiContext
-} from "./chunk-RSFOKBAM.js";
+  useApiContext,
+  useSchemaContext
+} from "./chunk-BYW6XCQ2.js";
 
 // src/ui/playground.tsx
-import { useMemo, useRef, useState as useState3 } from "react";
-import { useForm } from "react-hook-form";
+import {
+  useMemo,
+  useRef,
+  useState as useState3
+} from "react";
+import { Controller as Controller2, useForm } from "react-hook-form";
 import useSWRImmutable from "swr/immutable";
 import { Accordion, Accordions } from "fumadocs-ui/components/accordion";
 import { cn as cn5, buttonVariants as buttonVariants2 } from "fumadocs-ui/components/api";
@@ -57,7 +63,7 @@ var FormItem = forwardRef(({ className, ...props }, ref) => {
 });
 FormItem.displayName = "FormItem";
 var labelVariants = cva(
-  "text-xs font-medium text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  "text-xs font-medium text-fd-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
 var FormLabel = forwardRef(({ className, ...props }, ref) => {
   const { isError, formItemId } = useFormField();
@@ -93,7 +99,7 @@ var FormDescription = forwardRef(({ className, ...props }, ref) => {
     {
       ref,
       id: formDescriptionId,
-      className: cn("text-xs text-muted-foreground", className),
+      className: cn("text-xs text-fd-muted-foreground", className),
       ...props
     }
   );
@@ -180,7 +186,7 @@ var statusMap = {
   403: { description: "Forbidden", color: "text-red-500", icon: CircleXIcon },
   404: {
     description: "Not Found",
-    color: "text-muted-foreground",
+    color: "text-fd-muted-foreground",
     icon: CircleXIcon
   },
   500: {
@@ -205,7 +211,7 @@ function getStatusInfo(status) {
   }
   return {
     description: "No Description",
-    color: "text-muted-foreground",
+    color: "text-fd-muted-foreground",
     icon: CircleXIcon
   };
 }
@@ -233,13 +239,13 @@ var SelectTrigger = forwardRef2(({ className, children, ...props }, ref) => /* @
   {
     ref,
     className: cn2(
-      "flex h-10 items-center justify-between rounded-md border px-3 py-2 text-sm text-foreground hover:bg-accent focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+      "flex h-10 items-center justify-between rounded-md border px-3 py-2 text-sm text-fd-foreground hover:bg-fd-accent focus:outline-none focus:ring-2 focus:ring-fd-ring disabled:cursor-not-allowed disabled:opacity-50",
       className
     ),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx2(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx2(ChevronDown, { className: "size-4 text-muted-foreground" }) })
+      /* @__PURE__ */ jsx2(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx2(ChevronDown, { className: "size-4 text-fd-muted-foreground" }) })
     ]
   }
 ));
@@ -269,7 +275,7 @@ var SelectContent = forwardRef2(({ className, children, position = "popper", ...
   {
     ref,
     className: cn2(
-      "z-50 overflow-hidden rounded-lg border bg-popover text-popover-foreground shadow-md data-[state=closed]:animate-popover-out data-[state=open]:animate-popover-in",
+      "z-50 overflow-hidden rounded-lg border bg-fd-popover text-fd-popover-foreground shadow-md data-[state=closed]:animate-fd-popover-out data-[state=open]:animate-fd-popover-in",
       className
     ),
     position,
@@ -305,7 +311,7 @@ var SelectItem = forwardRef2(({ className, children, ...props }, ref) => /* @__P
   {
     ref,
     className: cn2(
-      "flex select-none flex-row items-center rounded-md py-1.5 pe-2 ps-6 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "flex select-none flex-row items-center rounded-md py-1.5 pe-2 ps-6 text-sm outline-none focus:bg-fd-accent focus:text-fd-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
@@ -320,7 +326,7 @@ var SelectSeparator = forwardRef2(({ className, ...props }, ref) => /* @__PURE__
   SelectPrimitive.Separator,
   {
     ref,
-    className: cn2("my-1 h-px bg-muted", className),
+    className: cn2("my-1 h-px bg-fd-muted", className),
     ...props
   }
 ));
@@ -337,7 +343,7 @@ var Input = React.forwardRef(
       {
         type,
         className: cn3(
-          "flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm text-foreground transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm text-fd-foreground transition-colors placeholder:text-fd-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-fd-ring disabled:cursor-not-allowed disabled:opacity-50",
           className
         ),
         ref,
@@ -348,17 +354,6 @@ var Input = React.forwardRef(
 );
 Input.displayName = "Input";
 
-// src/ui/contexts/schema.tsx
-import { createContext as createContext2, useContext as useContext2 } from "react";
-var SchemaContext = createContext2(
-  void 0
-);
-function useSchemaContext() {
-  const ctx = useContext2(SchemaContext);
-  if (!ctx) throw new Error("Missing provider");
-  return ctx;
-}
-
 // src/ui/inputs.tsx
 import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function renderInner({ field, ...props }) {
@@ -368,7 +363,7 @@ function renderInner({ field, ...props }) {
       {
         field,
         ...props,
-        className: cn4("rounded-lg border bg-accent/20 p-3", props.className)
+        className: cn4("rounded-lg border bg-fd-accent/20 p-3", props.className)
       }
     );
   if (field.type === "switcher")
@@ -379,7 +374,10 @@ function renderInner({ field, ...props }) {
       {
         field,
         ...props,
-        className: cn4("rounded-lg border bg-background p-3", props.className)
+        className: cn4(
+          "rounded-lg border bg-fd-background p-3",
+          props.className
+        )
       }
     );
   if (field.type === "null") return null;
@@ -399,7 +397,7 @@ function InputContainer({
       name,
       required ? /* @__PURE__ */ jsx4("span", { className: "text-red-500", children: "*" }) : null,
       /* @__PURE__ */ jsx4("div", { className: "flex-1" }),
-      type ? /* @__PURE__ */ jsx4("code", { className: "text-xs text-muted-foreground", children: type }) : null,
+      type ? /* @__PURE__ */ jsx4("code", { className: "text-xs text-fd-muted-foreground", children: type }) : null,
       toolbar
     ] }),
     !inline ? /* @__PURE__ */ jsx4("p", { className: "text-xs", children: description }) : null,
@@ -627,7 +625,7 @@ function InputField({
           {
             field,
             fieldName,
-            className: "rounded-lg border bg-accent/20 p-3"
+            className: "rounded-lg border bg-fd-accent/20 p-3"
           }
         )
       }
@@ -646,7 +644,7 @@ function InputField({
           {
             fieldName,
             field,
-            className: "rounded-lg border bg-background p-3"
+            className: "rounded-lg border bg-fd-background p-3"
           }
         )
       }
@@ -665,7 +663,7 @@ function InputField({
         /* @__PURE__ */ jsxs2(FormLabel, { className: "inline-flex items-center gap-1", children: [
           name,
           field.isRequired ? /* @__PURE__ */ jsx4("span", { className: "text-red-500", children: "*" }) : null,
-          /* @__PURE__ */ jsx4("code", { className: "ms-auto text-xs text-muted-foreground", children: field.type }),
+          /* @__PURE__ */ jsx4("code", { className: "ms-auto text-xs text-fd-muted-foreground", children: field.type }),
           toolbar
         ] }),
         !inline ? /* @__PURE__ */ jsx4(FormDescription, { className: "text-xs", children: field.description }) : null
@@ -821,6 +819,7 @@ function APIPlayground({
   header = [],
   query = [],
   body,
+  fields = {},
   schemas
 }) {
   const { baseUrl } = useApiContext();
@@ -840,14 +839,16 @@ function APIPlayground({
     async () => {
       if (!input) return;
       let pathname = route;
-      Object.keys(input.path ?? {}).forEach((key) => {
-        const paramValue = input.path?.[key];
-        if (paramValue) pathname = pathname.replace(`{${key}}`, paramValue);
+      Object.keys(input.path).forEach((key) => {
+        const paramValue = input.path[key];
+        if (typeof paramValue === "string")
+          pathname = pathname.replace(`{${key}}`, paramValue);
       });
       const url = new URL(pathname, baseUrl ?? window.location.origin);
-      Object.keys(input.query ?? {}).forEach((key) => {
-        const paramValue = input.query?.[key];
-        if (paramValue) url.searchParams.append(key, paramValue);
+      Object.keys(input.query).forEach((key) => {
+        const paramValue = input.query[key];
+        if (typeof paramValue === "string")
+          url.searchParams.append(key, paramValue);
       });
       const headers = new Headers({
         "Content-Type": "application/json"
@@ -855,9 +856,9 @@ function APIPlayground({
       if (input.authorization) {
         headers.append("Authorization", input.authorization);
       }
-      Object.keys(input.header ?? {}).forEach((key) => {
-        const paramValue = input.header?.[key];
-        if (paramValue) headers.append(key, paramValue);
+      Object.keys(input.header).forEach((key) => {
+        const paramValue = input.header[key];
+        if (typeof paramValue === "string") headers.append(key, paramValue);
       });
       const bodyValue = body && input.body && Object.keys(input.body).length > 0 ? createBodyFromValue(input.body, body, schemas, dynamicRef.current) : void 0;
       const response = await fetch(url, {
@@ -872,10 +873,31 @@ function APIPlayground({
       shouldRetryOnError: false
     }
   );
-  const statusInfo = testQuery.data ? getStatusInfo(testQuery.data.status) : void 0;
   const onSubmit = form.handleSubmit((value) => {
     setInput(value);
   });
+  function renderCustomField(fieldName, info, field, key) {
+    if (field) {
+      return /* @__PURE__ */ jsx6(
+        Controller2,
+        {
+          control: form.control,
+          render: (props) => field.render({ ...props, info }),
+          name: fieldName
+        },
+        key
+      );
+    }
+    return /* @__PURE__ */ jsx6(
+      InputField,
+      {
+        name: info.name,
+        fieldName,
+        field: info
+      },
+      key
+    );
+  }
   return /* @__PURE__ */ jsx6(Form, { ...form, children: /* @__PURE__ */ jsx6(
     SchemaContext.Provider,
     {
@@ -886,11 +908,11 @@ function APIPlayground({
       children: /* @__PURE__ */ jsxs3(
         "form",
         {
-          className: "not-prose flex flex-col gap-4 rounded-lg border bg-card p-4",
+          className: "not-prose flex flex-col gap-4 rounded-lg border bg-fd-card p-4",
           onSubmit,
           children: [
             /* @__PURE__ */ jsxs3("div", { className: "flex flex-row gap-2", children: [
-              /* @__PURE__ */ jsx6("code", { className: "flex-1 overflow-auto rounded-lg border bg-secondary px-3 py-1.5 text-sm", children: route }),
+              /* @__PURE__ */ jsx6("code", { className: "flex-1 overflow-auto rounded-lg border bg-fd-secondary px-3 py-1.5 text-sm", children: route }),
               /* @__PURE__ */ jsx6(
                 "button",
                 {
@@ -901,64 +923,70 @@ function APIPlayground({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs3(Accordions, { type: "multiple", className: "-m-4 mt-2 border-0 text-sm", children: [
-              authorization ? /* @__PURE__ */ jsx6(Accordion, { title: "Authorization", children: /* @__PURE__ */ jsx6(
-                InputField,
-                {
-                  name: "Authorization",
-                  fieldName: "authorization",
-                  field: authorization
-                }
-              ) }) : null,
-              path.length > 0 ? /* @__PURE__ */ jsx6(Accordion, { title: "Path", children: path.map((field) => /* @__PURE__ */ jsx6(
-                InputField,
-                {
-                  field,
-                  name: field.name,
-                  fieldName: `path.${field.name}`
-                },
-                field.name
-              )) }) : null,
-              query.length > 0 ? /* @__PURE__ */ jsx6(Accordion, { title: "Query", children: /* @__PURE__ */ jsx6("div", { className: "flex flex-col gap-2", children: query.map((field) => /* @__PURE__ */ jsx6(
-                InputField,
-                {
-                  field,
-                  name: field.name,
-                  fieldName: `query.${field.name}`
-                },
-                field.name
-              )) }) }) : null,
-              header.length > 0 ? /* @__PURE__ */ jsx6(Accordion, { title: "Headers", children: header.map((field) => /* @__PURE__ */ jsx6(
-                InputField,
-                {
-                  field,
-                  name: field.name,
-                  fieldName: `header.${field.name}`
-                },
-                field.name
-              )) }) : null,
-              body ? /* @__PURE__ */ jsx6(Accordion, { title: "Body", children: body.type === "object" ? /* @__PURE__ */ jsx6(ObjectInput, { field: body, fieldName: "body" }) : /* @__PURE__ */ jsx6(InputField, { name: "Body", field: body, fieldName: "body" }) }) : null
-            ] }),
-            testQuery.data && statusInfo ? /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-3 rounded-lg border bg-card p-4", children: [
-              /* @__PURE__ */ jsxs3("div", { className: "inline-flex items-center gap-1.5 text-sm font-medium text-foreground", children: [
-                /* @__PURE__ */ jsx6(statusInfo.icon, { className: cn5("size-4", statusInfo.color) }),
-                statusInfo.description
-              ] }),
-              /* @__PURE__ */ jsx6("p", { className: "text-sm text-muted-foreground", children: testQuery.data.status }),
-              testQuery.data.data ? /* @__PURE__ */ jsx6(
-                CodeBlock2,
-                {
-                  code: JSON.stringify(testQuery.data.data, null, 2),
-                  className: "max-h-[288px]"
-                }
-              ) : null
-            ] }) : null
+            authorization ? renderCustomField("authorization", authorization, fields.auth) : null,
+            /* @__PURE__ */ jsxs3(
+              Accordions,
+              {
+                type: "multiple",
+                className: cn5(
+                  "-m-4 border-0 text-sm",
+                  path.length === 0 && query.length === 0 && header.length === 0 && !body && "hidden"
+                ),
+                children: [
+                  path.length > 0 ? /* @__PURE__ */ jsx6(Accordion, { title: "Path", children: path.map(
+                    (field) => renderCustomField(
+                      `path.${field.name}`,
+                      field,
+                      fields.path,
+                      field.name
+                    )
+                  ) }) : null,
+                  query.length > 0 ? /* @__PURE__ */ jsx6(Accordion, { title: "Query", children: query.map(
+                    (field) => renderCustomField(
+                      `query.${field.name}`,
+                      field,
+                      fields.query,
+                      field.name
+                    )
+                  ) }) : null,
+                  header.length > 0 ? /* @__PURE__ */ jsx6(Accordion, { title: "Headers", children: header.map(
+                    (field) => renderCustomField(
+                      `header.${field.name}`,
+                      field,
+                      fields.header,
+                      field.name
+                    )
+                  ) }) : null,
+                  body ? /* @__PURE__ */ jsx6(Accordion, { title: "Body", children: body.type === "object" && !fields.body ? /* @__PURE__ */ jsx6(ObjectInput, { field: body, fieldName: "body" }) : renderCustomField("body", body, fields.body) }) : null
+                ]
+              }
+            ),
+            testQuery.data ? /* @__PURE__ */ jsx6(ResultDisplay, { data: testQuery.data }) : null
           ]
         }
       )
     }
   ) });
 }
+function ResultDisplay({
+  data
+}) {
+  const statusInfo = useMemo(() => getStatusInfo(data.status), [data.status]);
+  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-3 rounded-lg border bg-fd-card p-4", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "inline-flex items-center gap-1.5 text-sm font-medium text-fd-foreground", children: [
+      /* @__PURE__ */ jsx6(statusInfo.icon, { className: cn5("size-4", statusInfo.color) }),
+      statusInfo.description
+    ] }),
+    /* @__PURE__ */ jsx6("p", { className: "text-sm text-fd-muted-foreground", children: data.status }),
+    data.data ? /* @__PURE__ */ jsx6(
+      CodeBlock2,
+      {
+        code: JSON.stringify(data.data, null, 2),
+        className: "max-h-[288px]"
+      }
+    ) : null
+  ] });
+}
 export {
   APIPlayground
 };

package/dist/ui/index.d.ts

@@ -1,8 +1,28 @@
 import * as react from 'react';
-import { HTMLAttributes, ReactNode } from 'react';
-import { A as APIPlaygroundProps } from '../playground-D8pYn13F.js';
+import { ReactElement, HTMLAttributes, ReactNode, MutableRefObject } from 'react';
+import { FieldPath, ControllerRenderProps, ControllerFieldState, UseFormStateReturn } from 'react-hook-form';
+import { R as RequestSchema, a as ReferenceSchema, A as APIPlaygroundProps, P as PrimitiveRequestField } from '../playground-D8pYn13F.js';
 import { Tabs, Tab } from 'fumadocs-ui/components/tabs';
 
+interface FormValues {
+    authorization: string;
+    path: Record<string, unknown>;
+    query: Record<string, unknown>;
+    header: Record<string, unknown>;
+    body: unknown;
+}
+interface CustomField<TName extends FieldPath<FormValues>, Info> {
+    render: (props: {
+        /**
+         * Field Info
+         */
+        info: Info;
+        field: ControllerRenderProps<FormValues, TName>;
+        fieldState: ControllerFieldState;
+        formState: UseFormStateReturn<FormValues>;
+    }) => ReactElement;
+}
+
 interface RootProps extends HTMLAttributes<HTMLDivElement> {
     baseUrl?: string;
 }
@@ -37,10 +57,31 @@ declare function ObjectCollapsible(props: {
     children: ReactNode;
 }): React.ReactElement;
 
-declare const APIPlayground: react.ComponentType<APIPlaygroundProps & react.HTMLAttributes<HTMLFormElement>>;
+interface SchemaContextType {
+    references: Record<string, RequestSchema>;
+    dynamic: MutableRefObject<Map<string, DynamicField>>;
+}
+type DynamicField = {
+    type: 'object';
+    properties: string[];
+} | {
+    type: 'field';
+    schema: RequestSchema | ReferenceSchema;
+};
+declare function useSchemaContext(): SchemaContextType;
+
+declare const APIPlayground: react.ComponentType<APIPlaygroundProps & {
+    fields?: {
+        auth?: CustomField<"authorization", PrimitiveRequestField>;
+        path?: CustomField<`path.${string}`, PrimitiveRequestField>;
+        query?: CustomField<`query.${string}`, PrimitiveRequestField>;
+        header?: CustomField<`header.${string}`, PrimitiveRequestField>;
+        body?: CustomField<"body", RequestSchema>;
+    };
+} & react.HTMLAttributes<HTMLFormElement>>;
 declare const Responses: typeof Tabs;
 declare const Response: typeof Tab;
 declare const Requests: typeof Tabs;
 declare const Request: typeof Tab;
 
-export { API, APIExample, APIInfo, type APIInfoProps, APIPlayground, ExampleResponse, ObjectCollapsible, Property, Request, Requests, Response, ResponseTypes, Responses, Root, type RootProps, TypeScriptResponse };
+export { API, APIExample, APIInfo, type APIInfoProps, APIPlayground, ExampleResponse, ObjectCollapsible, Property, Request, Requests, Response, ResponseTypes, Responses, Root, type RootProps, TypeScriptResponse, useSchemaContext };

package/dist/ui/index.js

@@ -3,8 +3,9 @@ import {
   ApiProvider,
   badgeVariants,
   getBadgeColor,
-  useApiContext
-} from "../chunk-RSFOKBAM.js";
+  useApiContext,
+  useSchemaContext
+} from "../chunk-BYW6XCQ2.js";
 
 // src/ui/index.ts
 import { Tab, Tabs } from "fumadocs-ui/components/tabs";
@@ -28,7 +29,7 @@ function Root({
     "div",
     {
       className: cn(
-        "flex flex-col gap-24 text-sm text-muted-foreground",
+        "flex flex-col gap-24 text-sm text-fd-muted-foreground",
         className
       ),
       ...props,
@@ -55,9 +56,9 @@ function API({
 }
 function Route({ route }) {
   const segments = route.split("/").filter((part) => part.length > 0);
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center gap-1 text-sm", children: segments.map((part, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "/" }),
-    /* @__PURE__ */ jsx("span", { className: "text-foreground", children: part })
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-row flex-wrap items-center gap-1 text-sm", children: segments.map((part, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "text-fd-muted-foreground", children: "/" }),
+    part.startsWith("{") && part.endsWith("}") ? /* @__PURE__ */ jsx("code", { className: "text-fd-primary", children: part }) : /* @__PURE__ */ jsx("span", { className: "text-fd-foreground", children: part })
   ] }, index)) });
 }
 function APIInfo({
@@ -73,7 +74,7 @@ function APIInfo({
       "div",
       {
         className: cn(
-          "sticky top-24 z-[2] flex flex-row items-center gap-2 rounded-lg border bg-card p-3 md:top-10"
+          "sticky top-24 z-[2] flex flex-row items-center gap-2 rounded-lg border bg-fd-card p-3 md:top-10"
         ),
         children: [
           /* @__PURE__ */ jsx(
@@ -101,12 +102,12 @@ function Property({
   deprecated,
   children
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "mb-4 flex flex-col rounded-lg border bg-card p-3 prose-no-margin", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "mb-4 flex flex-col rounded-lg border bg-fd-card p-3 prose-no-margin", children: [
     /* @__PURE__ */ jsxs("h4", { className: "inline-flex items-center gap-4", children: [
       /* @__PURE__ */ jsx("code", { children: name }),
       required ? /* @__PURE__ */ jsx("div", { className: cn(badgeVariants({ color: "red" })), children: "Required" }) : null,
       deprecated ? /* @__PURE__ */ jsx("div", { className: cn(badgeVariants({ color: "yellow" })), children: "Deprecated" }) : null,
-      /* @__PURE__ */ jsx("span", { className: "ms-auto font-mono text-[13px] text-muted-foreground", children: type })
+      /* @__PURE__ */ jsx("span", { className: "ms-auto font-mono text-[13px] text-fd-muted-foreground", children: type })
     ] }),
     children
   ] });
@@ -173,7 +174,7 @@ function CopyRouteButton({
 
 // src/ui/index.ts
 var APIPlayground = dynamic(
-  () => import("../playground-7UGUJXDH.js").then((mod) => mod.APIPlayground)
+  () => import("../playground-EVJUDTB3.js").then((mod) => mod.APIPlayground)
 );
 var Responses = Tabs;
 var Response = Tab;
@@ -193,5 +194,6 @@ export {
   ResponseTypes,
   Responses,
   Root,
-  TypeScriptResponse
+  TypeScriptResponse,
+  useSchemaContext
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-openapi",
-  "version": "4.0.5",
+  "version": "4.1.0",
   "description": "Generate MDX docs for your OpenAPI spec",
   "keywords": [
     "NextJs",
@@ -47,14 +47,14 @@
     "lucide-react": "^0.414.0",
     "openapi-sampler": "^1.5.1",
     "react-hook-form": "^7.52.1",
-    "shiki": "^1.11.0",
+    "shiki": "^1.11.1",
     "swr": "^2.2.5",
-    "fumadocs-core": "12.5.5",
-    "fumadocs-ui": "12.5.5"
+    "fumadocs-core": "13.0.0",
+    "fumadocs-ui": "13.0.0"
   },
   "devDependencies": {
     "@types/js-yaml": "^4.0.9",
-    "@types/node": "20.14.11",
+    "@types/node": "20.14.12",
     "@types/openapi-sampler": "^1.0.3",
     "@types/react": "^18.3.3",
     "next": "^14.2.5",