fumadocs-openapi 3.3.0 → 4.0.1

package/dist/playground-XE3Y6DRJ.js

@@ -0,0 +1,963 @@
+import {
+  getDefaultValue,
+  getDefaultValues,
+  resolve,
+  useApiContext
+} from "./chunk-RSFOKBAM.js";
+
+// src/ui/playground.tsx
+import { useMemo, useRef, useState as useState3 } from "react";
+import { 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";
+
+// src/ui/components/form.tsx
+import { Slot } from "@radix-ui/react-slot";
+import {
+  Controller,
+  FormProvider,
+  useFormContext
+} from "react-hook-form";
+import { cva } from "class-variance-authority";
+import { createContext, forwardRef, useContext, useId } from "react";
+import { cn } from "fumadocs-ui/components/api";
+import { jsx } from "react/jsx-runtime";
+var Form = FormProvider;
+var FormFieldContext = createContext({
+  name: ""
+});
+var FormItemContext = createContext({ id: "" });
+function FormField({ ...props }) {
+  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
+}
+function useFormField() {
+  const fieldContext = useContext(FormFieldContext);
+  const { id } = useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+  const fieldState = getFieldState(fieldContext.name, formState);
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    isError: Boolean(fieldState.error)
+  };
+}
+var FormItem = forwardRef(({ className, ...props }, ref) => {
+  const id = useId();
+  return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col gap-1", className),
+      ...props
+    }
+  ) });
+});
+FormItem.displayName = "FormItem";
+var labelVariants = cva(
+  "text-xs font-medium text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var FormLabel = forwardRef(({ className, ...props }, ref) => {
+  const { isError, formItemId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    "label",
+    {
+      ref,
+      className: cn(labelVariants(), isError && "text-red-500", className),
+      htmlFor: formItemId,
+      ...props
+    }
+  );
+});
+FormLabel.displayName = "FormLabel";
+var FormControl = forwardRef(({ ...props }, ref) => {
+  const { isError, formItemId, formDescriptionId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Slot,
+    {
+      ref,
+      id: formItemId,
+      "aria-describedby": formDescriptionId,
+      "aria-invalid": isError,
+      ...props
+    }
+  );
+});
+FormControl.displayName = "FormControl";
+var FormDescription = forwardRef(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      id: formDescriptionId,
+      className: cn("text-xs text-muted-foreground", className),
+      ...props
+    }
+  );
+});
+FormDescription.displayName = "FormDescription";
+
+// src/ui/fetcher.ts
+import { CircleCheckIcon, CircleXIcon } from "lucide-react";
+function createBodyFromValue(value, schema, references, dynamic) {
+  return convertValue("body", value, schema, references, dynamic);
+}
+function convertValue(fieldName, value, schema, references, dynamic) {
+  const isEmpty = value === "" || value === void 0 || value === null;
+  if (isEmpty && schema.isRequired)
+    return schema.type === "boolean" ? false : "";
+  else if (isEmpty) return void 0;
+  if (Array.isArray(value) && schema.type === "array") {
+    return value.map(
+      (item, index) => convertValue(
+        `${fieldName}.${String(index)}`,
+        item,
+        resolve(schema.items, references),
+        references,
+        dynamic
+      )
+    );
+  }
+  if (schema.type === "switcher") {
+    return convertDynamicValue(fieldName, value, references, dynamic);
+  }
+  if (typeof value === "object" && schema.type === "object") {
+    const entries = Object.keys(value).map((key) => {
+      const prop = value[key];
+      const propFieldName = `${fieldName}.${key}`;
+      if (key in schema.properties) {
+        return [
+          key,
+          convertValue(
+            propFieldName,
+            prop,
+            resolve(schema.properties[key], references),
+            references,
+            dynamic
+          )
+        ];
+      }
+      if (schema.additionalProperties) {
+        return [
+          key,
+          convertDynamicValue(propFieldName, prop, references, dynamic)
+        ];
+      }
+      console.warn("Could not resolve field", propFieldName, dynamic);
+      return [key, prop];
+    });
+    return Object.fromEntries(entries);
+  }
+  switch (schema.type) {
+    case "number":
+      return Number(value);
+    case "boolean":
+      return value === "null" ? void 0 : value === "true";
+    default:
+      return String(value);
+  }
+}
+function convertDynamicValue(fieldName, value, references, dynamic) {
+  const fieldDynamic = dynamic.get(fieldName);
+  return convertValue(
+    fieldName,
+    value,
+    fieldDynamic?.type === "field" ? resolve(fieldDynamic.schema, references) : { type: "null", isRequired: false },
+    references,
+    dynamic
+  );
+}
+var statusMap = {
+  400: { description: "Bad Request", color: "text-red-500", icon: CircleXIcon },
+  401: {
+    description: "Unauthorized",
+    color: "text-red-500",
+    icon: CircleXIcon
+  },
+  403: { description: "Forbidden", color: "text-red-500", icon: CircleXIcon },
+  404: {
+    description: "Not Found",
+    color: "text-muted-foreground",
+    icon: CircleXIcon
+  },
+  500: {
+    description: "Internal Server Error",
+    color: "text-red-500",
+    icon: CircleXIcon
+  }
+};
+function getStatusInfo(status) {
+  if (status in statusMap) {
+    return statusMap[status];
+  }
+  if (status >= 200 && status < 300) {
+    return {
+      description: "Successful",
+      color: "text-green-500",
+      icon: CircleCheckIcon
+    };
+  }
+  if (status >= 400) {
+    return { description: "Error", color: "text-red-500", icon: CircleXIcon };
+  }
+  return {
+    description: "No Description",
+    color: "text-muted-foreground",
+    icon: CircleXIcon
+  };
+}
+
+// src/ui/inputs.tsx
+import {
+  useCallback,
+  useState
+} from "react";
+import { Plus, Trash2 } from "lucide-react";
+import { useFieldArray, useFormContext as useFormContext2 } from "react-hook-form";
+import { cn as cn4, buttonVariants, useOnChange } from "fumadocs-ui/components/api";
+
+// src/ui/components/select.tsx
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import { forwardRef as forwardRef2 } from "react";
+import { cn as cn2 } from "fumadocs-ui/components/api";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var Select = SelectPrimitive.Root;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = forwardRef2(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Trigger,
+  {
+    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",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx2(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx2(ChevronDown, { className: "size-4 text-muted-foreground" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn2("flex items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx2(ChevronUp, { className: "size-4" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn2("flex items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx2(ChevronDown, { className: "size-4" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = forwardRef2(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx2(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+  SelectPrimitive.Content,
+  {
+    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",
+      className
+    ),
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx2(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx2(
+        SelectPrimitive.Viewport,
+        {
+          className: cn2(
+            "p-1",
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx2(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: cn2("py-1.5 pe-2 ps-6 text-sm font-semibold", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = forwardRef2(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Item,
+  {
+    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",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx2(SelectPrimitive.ItemIndicator, { className: "absolute start-2", children: /* @__PURE__ */ jsx2(Check, { className: "size-4" }) }),
+      /* @__PURE__ */ jsx2(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn2("my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+// src/ui/components/input.tsx
+import * as React from "react";
+import { cn as cn3 } from "fumadocs-ui/components/api";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Input = React.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsx3(
+      "input",
+      {
+        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",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+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 }) {
+  if (field.type === "object")
+    return /* @__PURE__ */ jsx4(
+      ObjectInput,
+      {
+        field,
+        ...props,
+        className: cn4("rounded-lg border bg-accent/20 p-3", props.className)
+      }
+    );
+  if (field.type === "switcher")
+    return /* @__PURE__ */ jsx4(Switcher, { inline: true, field, ...props });
+  if (field.type === "array")
+    return /* @__PURE__ */ jsx4(
+      ArrayInput,
+      {
+        field,
+        ...props,
+        className: cn4("rounded-lg border bg-background p-3", props.className)
+      }
+    );
+  if (field.type === "null") return null;
+  return /* @__PURE__ */ jsx4(NormalInput, { field, ...props });
+}
+function InputContainer({
+  toolbar,
+  name,
+  required,
+  type,
+  description,
+  inline = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs2("div", { ...props, className: cn4("flex flex-col gap-2", props.className), children: [
+    /* @__PURE__ */ jsxs2("div", { className: cn4(labelVariants(), "inline-flex items-center gap-1"), children: [
+      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,
+      toolbar
+    ] }),
+    !inline ? /* @__PURE__ */ jsx4("p", { className: "text-xs", children: description }) : null,
+    props.children
+  ] });
+}
+function ObjectInput({
+  field,
+  fieldName,
+  ...props
+}) {
+  const { references } = useSchemaContext();
+  return /* @__PURE__ */ jsxs2("div", { ...props, className: cn4("flex flex-col gap-4", props.className), children: [
+    Object.entries(field.properties).map(([key, child]) => /* @__PURE__ */ jsx4(
+      InputField,
+      {
+        name: key,
+        field: resolve(child, references),
+        fieldName: `${fieldName}.${key}`
+      },
+      key
+    )),
+    field.additionalProperties ? /* @__PURE__ */ jsx4(
+      AdditionalProperties,
+      {
+        fieldName,
+        type: field.additionalProperties
+      }
+    ) : null
+  ] });
+}
+function AdditionalProperties({
+  fieldName,
+  type
+}) {
+  const { control, setValue } = useFormContext2();
+  const { references, dynamic } = useSchemaContext();
+  const [nextName, setNextName] = useState("");
+  const [properties, setProperties] = useState(() => {
+    const d = dynamic.current.get(`additional_${fieldName}`);
+    if (d?.type === "object") return d.properties;
+    return [];
+  });
+  useOnChange(properties, () => {
+    dynamic.current.set(`additional_${fieldName}`, {
+      type: "object",
+      properties
+    });
+  });
+  const onAppend = useCallback(() => {
+    const name = nextName.trim();
+    if (name.length === 0) return;
+    setProperties((p) => {
+      if (p.includes(name)) return p;
+      setValue(`${fieldName}.${name}`, "");
+      setNextName("");
+      return [...p, name];
+    });
+  }, [nextName, setValue, fieldName]);
+  const types = typeof type === "string" ? resolveDynamicTypes(references[type], references) : void 0;
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    properties.map((item) => /* @__PURE__ */ jsx4(
+      Switcher,
+      {
+        name: item,
+        field: {
+          type: "switcher",
+          items: types ?? anyFields,
+          isRequired: false
+        },
+        fieldName: `${fieldName}.${item}`,
+        toolbar: /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Remove Item",
+            className: cn4(
+              buttonVariants({
+                color: "secondary",
+                size: "sm"
+              })
+            ),
+            onClick: () => {
+              setProperties((p) => p.filter((prop) => prop !== item));
+              control.unregister(`${fieldName}.${item}`);
+            },
+            children: /* @__PURE__ */ jsx4(Trash2, { className: "size-4" })
+          }
+        )
+      },
+      item
+    )),
+    /* @__PURE__ */ jsxs2("div", { className: "flex flex-row gap-1", children: [
+      /* @__PURE__ */ jsx4(
+        Input,
+        {
+          value: nextName,
+          placeholder: "Enter Property Name",
+          onChange: useCallback((e) => {
+            setNextName(e.target.value);
+          }, []),
+          onKeyDown: useCallback(
+            (e) => {
+              if (e.key === "Enter") {
+                onAppend();
+                e.preventDefault();
+              }
+            },
+            [onAppend]
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: cn4(buttonVariants({ color: "secondary" })),
+          onClick: onAppend,
+          children: "New"
+        }
+      )
+    ] })
+  ] });
+}
+function resolveDynamicTypes(schema, references) {
+  if (schema.type !== "switcher") return { [schema.type]: schema };
+  return Object.fromEntries(
+    Object.entries(schema.items).map(([key, value]) => [
+      key,
+      resolve(value, references)
+    ])
+  );
+}
+var anyFields = {
+  string: {
+    type: "string",
+    isRequired: false,
+    defaultValue: ""
+  },
+  boolean: {
+    type: "boolean",
+    isRequired: false,
+    defaultValue: ""
+  },
+  number: {
+    type: "number",
+    isRequired: false,
+    defaultValue: ""
+  },
+  object: {
+    type: "object",
+    properties: {},
+    additionalProperties: true,
+    isRequired: false
+  }
+};
+anyFields.array = {
+  type: "array",
+  isRequired: false,
+  items: {
+    type: "switcher",
+    isRequired: false,
+    items: anyFields
+  }
+};
+function Switcher({
+  field,
+  fieldName,
+  ...props
+}) {
+  const { references, dynamic } = useSchemaContext();
+  const items = Object.keys(field.items);
+  const [value, setValue] = useState(() => {
+    const d = dynamic.current.get(fieldName);
+    if (d?.type === "field") {
+      const cached = items.find((item) => d.schema === field.items[item]);
+      if (cached) return cached;
+    }
+    return items[0];
+  });
+  useOnChange(value, () => {
+    if (!value) return;
+    dynamic.current.set(fieldName, {
+      type: "field",
+      schema: field.items[value]
+    });
+  });
+  return /* @__PURE__ */ jsx4(
+    InputContainer,
+    {
+      required: field.isRequired,
+      description: field.description,
+      ...props,
+      toolbar: /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsxs2(Select, { value, onValueChange: setValue, children: [
+          /* @__PURE__ */ jsx4(SelectTrigger, { className: "h-auto p-1 text-xs", children: /* @__PURE__ */ jsx4(SelectValue, {}) }),
+          /* @__PURE__ */ jsx4(SelectContent, { children: items.map((item) => /* @__PURE__ */ jsx4(SelectItem, { value: item, children: item }, item)) })
+        ] }),
+        props.toolbar
+      ] }),
+      children: renderInner({
+        field: resolve(field.items[value], references),
+        fieldName
+      })
+    }
+  );
+}
+function InputField({
+  field,
+  fieldName,
+  ...props
+}) {
+  const { references } = useSchemaContext();
+  if (field.type === "null") return null;
+  if (field.type === "object") {
+    return /* @__PURE__ */ jsx4(
+      InputContainer,
+      {
+        required: field.isRequired,
+        type: field.type,
+        description: field.description,
+        ...props,
+        children: /* @__PURE__ */ jsx4(
+          ObjectInput,
+          {
+            field,
+            fieldName,
+            className: "rounded-lg border bg-accent/20 p-3"
+          }
+        )
+      }
+    );
+  }
+  if (field.type === "array") {
+    return /* @__PURE__ */ jsx4(
+      InputContainer,
+      {
+        required: field.isRequired,
+        description: field.description ?? resolve(field.items, references).description,
+        type: "array",
+        ...props,
+        children: /* @__PURE__ */ jsx4(
+          ArrayInput,
+          {
+            fieldName,
+            field,
+            className: "rounded-lg border bg-background p-3"
+          }
+        )
+      }
+    );
+  }
+  if (field.type === "switcher") {
+    return /* @__PURE__ */ jsx4(Switcher, { field, fieldName, ...props });
+  }
+  const { toolbar, inline = false, name, ...rest } = props;
+  return /* @__PURE__ */ jsx4(
+    NormalInput,
+    {
+      field,
+      fieldName,
+      header: /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__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 }),
+          toolbar
+        ] }),
+        !inline ? /* @__PURE__ */ jsx4(FormDescription, { className: "text-xs", children: field.description }) : null
+      ] }),
+      ...rest
+    }
+  );
+}
+function NormalInput({
+  fieldName,
+  header,
+  field,
+  ...props
+}) {
+  const { control } = useFormContext2();
+  if (field.type === "boolean") {
+    return /* @__PURE__ */ jsx4(
+      FormField,
+      {
+        control,
+        name: fieldName,
+        render: ({ field: { value, onChange, ...restField } }) => /* @__PURE__ */ jsxs2(FormItem, { ...props, children: [
+          header,
+          /* @__PURE__ */ jsxs2(
+            Select,
+            {
+              value,
+              onValueChange: onChange,
+              disabled: restField.disabled,
+              children: [
+                /* @__PURE__ */ jsx4(FormControl, { children: /* @__PURE__ */ jsx4(SelectTrigger, { ...restField, children: /* @__PURE__ */ jsx4(SelectValue, {}) }) }),
+                /* @__PURE__ */ jsxs2(SelectContent, { children: [
+                  /* @__PURE__ */ jsx4(SelectItem, { value: "true", children: "True" }),
+                  /* @__PURE__ */ jsx4(SelectItem, { value: "false", children: "False" }),
+                  field.isRequired ? null : /* @__PURE__ */ jsx4(SelectItem, { value: "null", children: "Null" })
+                ] })
+              ]
+            }
+          )
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx4(
+    FormField,
+    {
+      control,
+      name: fieldName,
+      render: ({ field: { value, ...restField } }) => /* @__PURE__ */ jsxs2(FormItem, { ...props, children: [
+        header,
+        /* @__PURE__ */ jsx4(FormControl, { children: /* @__PURE__ */ jsx4(
+          Input,
+          {
+            placeholder: "Enter value",
+            type: field.type === "string" ? "text" : "number",
+            value,
+            ...restField
+          }
+        ) })
+      ] })
+    }
+  );
+}
+function ArrayInput({
+  fieldName,
+  field,
+  ...props
+}) {
+  const { references } = useSchemaContext();
+  const items = resolve(field.items, references);
+  const { fields, append, remove } = useFieldArray({
+    name: fieldName
+  });
+  const handleAppend = useCallback(() => {
+    append(getDefaultValue(items, references));
+  }, [append, references, items]);
+  return /* @__PURE__ */ jsxs2("div", { ...props, className: cn4("flex flex-col gap-4", props.className), children: [
+    fields.map((item, index) => /* @__PURE__ */ jsx4(
+      InputField,
+      {
+        inline: true,
+        name: `Item ${String(index + 1)}`,
+        field: items,
+        fieldName: `${fieldName}.${String(index)}`,
+        className: "flex-1",
+        toolbar: /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Remove Item",
+            className: cn4(
+              buttonVariants({
+                color: "secondary",
+                size: "sm"
+              })
+            ),
+            onClick: () => {
+              remove(index);
+            },
+            children: /* @__PURE__ */ jsx4(Trash2, { className: "size-4" })
+          }
+        )
+      },
+      item.id
+    )),
+    /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        type: "button",
+        className: cn4(
+          buttonVariants({ color: "secondary", className: "gap-1.5" })
+        ),
+        onClick: handleAppend,
+        children: [
+          /* @__PURE__ */ jsx4(Plus, { className: "size-4" }),
+          "New Item"
+        ]
+      }
+    )
+  ] });
+}
+
+// src/ui/components/codeblock.tsx
+import { useLayoutEffect, useState as useState2 } from "react";
+import * as Base from "fumadocs-ui/components/codeblock";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function CodeBlock2({
+  code,
+  lang = "json",
+  ...props
+}) {
+  const { highlighter } = useApiContext();
+  const [html, setHtml] = useState2("");
+  useLayoutEffect(() => {
+    if (!highlighter) return;
+    const themedHtml = highlighter.codeToHtml(code, {
+      lang,
+      defaultColor: false,
+      themes: { light: "github-light", dark: "github-dark" }
+    });
+    setHtml(themedHtml);
+  }, [code, lang, highlighter]);
+  return /* @__PURE__ */ jsx5(Base.CodeBlock, { className: "my-0", children: /* @__PURE__ */ jsx5(Base.Pre, { ...props, dangerouslySetInnerHTML: { __html: html } }) });
+}
+
+// src/ui/playground.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function APIPlayground({
+  route,
+  method = "GET",
+  authorization,
+  path = [],
+  header = [],
+  query = [],
+  body,
+  schemas
+}) {
+  const { baseUrl } = useApiContext();
+  const dynamicRef = useRef(/* @__PURE__ */ new Map());
+  const [input, setInput] = useState3();
+  const form = useForm({
+    defaultValues: {
+      authorization: authorization?.defaultValue,
+      path: getDefaultValues(path, schemas),
+      query: getDefaultValues(query, schemas),
+      header: getDefaultValues(header, schemas),
+      body: body ? getDefaultValue(body, schemas) : void 0
+    }
+  });
+  const testQuery = useSWRImmutable(
+    input ? [baseUrl, route, method, input] : null,
+    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);
+      });
+      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);
+      });
+      const headers = new Headers({
+        "Content-Type": "application/json"
+      });
+      if (input.authorization) {
+        headers.append("Authorization", input.authorization);
+      }
+      Object.keys(input.header ?? {}).forEach((key) => {
+        const paramValue = input.header?.[key];
+        if (paramValue) 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, {
+        method,
+        headers,
+        body: bodyValue ? JSON.stringify(bodyValue) : void 0
+      });
+      const data = await response.json().catch(() => void 0);
+      return { status: response.status, data };
+    },
+    {
+      shouldRetryOnError: false
+    }
+  );
+  const statusInfo = testQuery.data ? getStatusInfo(testQuery.data.status) : void 0;
+  const onSubmit = form.handleSubmit((value) => {
+    setInput(value);
+  });
+  return /* @__PURE__ */ jsx6(Form, { ...form, children: /* @__PURE__ */ jsx6(
+    SchemaContext.Provider,
+    {
+      value: useMemo(
+        () => ({ references: schemas, dynamic: dynamicRef }),
+        [schemas]
+      ),
+      children: /* @__PURE__ */ jsxs3(
+        "form",
+        {
+          className: "not-prose flex flex-col gap-4 rounded-lg border bg-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(
+                "button",
+                {
+                  type: "submit",
+                  className: cn5(buttonVariants2({ color: "secondary" })),
+                  disabled: testQuery.isLoading,
+                  children: "Send"
+                }
+              )
+            ] }),
+            /* @__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
+          ]
+        }
+      )
+    }
+  ) });
+}
+export {
+  APIPlayground
+};