fumadocs-openapi 11.4.2 → 12.0.0

package/dist/ui/playground/client.js

@@ -0,0 +1,432 @@
+"use client";
+import { pathnameFromRequest } from "../../requests/generators/index.js";
+import { useQuery } from "../../packages/shared-api/dist/utils/use-query.js";
+import { useAuthFields, usePlaygroundAuth } from "../../playground/auth.js";
+import { useServer } from "../../utils/use-server.js";
+import { useOpenAPI } from "../../utils/create-page.js";
+import { encodeRequestData } from "../../requests/media/encode.js";
+import { useExampleRequests, useOperation } from "../../operation.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../packages/shared-api/dist/components/select.js";
+import { MethodLabel } from "../components/method-label.js";
+import { cn } from "../../utils/cn.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../packages/shared-api/dist/components/collapsible.js";
+import { DefaultResultDisplay } from "./components/result-display.js";
+import { SchemaProvider, anyFields, useResolvedSchema } from "../../packages/shared-api/dist/components/playground/schema.js";
+import { Label } from "../../packages/shared-api/dist/components/label.js";
+import ServerSelect from "./components/server-select.js";
+import { FieldInput, FieldSet, JsonInput, ObjectInput } from "../../packages/shared-api/dist/components/playground/inputs.js";
+import { OAuthDialog, OAuthDialogContent, OAuthDialogTrigger } from "./components/oauth-dialog.js";
+import { Spinner } from "../../packages/shared-api/dist/components/spinner.js";
+import { Fragment, createContext, use, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { StfProvider, useDataEngine, useFieldValue, useListener, useStf } from "@fumari/stf";
+import { stringifyFieldKey } from "@fumari/stf/lib/utils";
+import { useOnChange } from "fumadocs-core/utils/use-on-change";
+import { useTranslations } from "@fuma-translate/react";
+import { ChevronDown, LoaderCircle, PlusIcon } from "lucide-react";
+import { buttonVariants } from "fumadocs-ui/components/ui/button";
+//#region src/ui/playground/client.tsx
+const OptionsContext = createContext({});
+function usePlaygroundOptions() {
+	return use(OptionsContext);
+}
+function PlaygroundClient({ writeOnly, readOnly, transformAuthInputs, fetchOptions, components, renderParameterField, renderBodyField, ...rest }) {
+	const t = useTranslations({ note: "playground" });
+	const { doc, mediaAdapters, proxyUrl } = useOpenAPI();
+	const { dereferenced } = doc;
+	const { path: route, method, operation, parameters: groups, requestBody } = useOperation();
+	const options = useMemo(() => ({
+		transformAuthInputs,
+		fetchOptions,
+		components,
+		renderParameterField,
+		renderBodyField
+	}), [
+		transformAuthInputs,
+		fetchOptions,
+		components,
+		renderParameterField,
+		renderBodyField
+	]);
+	const parameters = useMemo(() => groups.flatMap((group) => group.items), [groups]);
+	const body = useMemo(() => {
+		if (!requestBody) return;
+		const mediaType = "application/json" in requestBody.content ? "application/json" : Object.keys(requestBody.content)[0];
+		return {
+			mediaType,
+			schema: requestBody.content[mediaType].schema ?? true
+		};
+	}, [requestBody]);
+	const { items: examples, selected: exampleId, update } = useExampleRequests();
+	const { resolveUrl } = useServer();
+	const { ResultDisplay = DefaultResultDisplay, CollapsiblePanel = DefaultCollapsiblePanel } = components ?? {};
+	const defaultValues = useMemo(() => {
+		const requestData = examples.find((example) => example.id === exampleId)?.data;
+		return {
+			path: requestData?.path ?? {},
+			query: requestData?.query ?? {},
+			header: requestData?.header ?? {},
+			body: requestData?.body ?? {},
+			cookie: requestData?.cookie ?? {}
+		};
+	}, [examples, exampleId]);
+	const stf = useStf({ defaultValues });
+	const auth = useAuthFields(stf.dataEngine, {
+		operation,
+		transform: transformAuthInputs
+	});
+	const testQuery = useQuery(async (input) => {
+		const fetcher = await import("../../playground/fetcher.js").then((mod) => mod.createBrowserFetcher(mediaAdapters, {
+			proxyUrl,
+			...fetchOptions
+		}));
+		const encoded = encodeRequestData({
+			...auth.mapValues(input),
+			method,
+			bodyMediaType: body?.mediaType
+		}, mediaAdapters, parameters);
+		return fetcher.fetch(resolveUrl(pathnameFromRequest(route, encoded)), encoded);
+	});
+	const timerRef = useRef(null);
+	const stfSync = useRef(false);
+	function triggerExampleUpdate() {
+		const data = {
+			...auth.mapValues(stf.dataEngine.getData()),
+			method,
+			bodyMediaType: body?.mediaType
+		};
+		update(data);
+	}
+	useListener({
+		stf,
+		onUpdate() {
+			if (!stfSync.current) return;
+			if (timerRef.current) window.clearTimeout(timerRef.current);
+			timerRef.current = window.setTimeout(triggerExampleUpdate, 400);
+		}
+	});
+	useEffect(() => {
+		if (stf.dataEngine.getData() === defaultValues) return;
+		stf.dataEngine.reset(defaultValues);
+	}, [defaultValues]);
+	useEffect(() => {
+		const reset = auth.init();
+		triggerExampleUpdate();
+		stfSync.current = true;
+		return () => {
+			stfSync.current = false;
+			reset();
+		};
+	}, [defaultValues, auth.init]);
+	return /* @__PURE__ */ jsx(OptionsContext, {
+		value: options,
+		children: /* @__PURE__ */ jsx(StfProvider, {
+			value: stf,
+			children: /* @__PURE__ */ jsx(SchemaProvider, {
+				docRoot: dereferenced,
+				writeOnly,
+				readOnly,
+				children: /* @__PURE__ */ jsxs("form", {
+					...rest,
+					className: cn("not-prose flex flex-col rounded-xl border shadow-md overflow-hidden bg-fd-card text-fd-card-foreground", rest.className),
+					onSubmit: (e) => {
+						testQuery.start(stf.dataEngine.getData());
+						e.preventDefault();
+					},
+					children: [
+						/* @__PURE__ */ jsx(ServerSelect, { className: "border-b" }),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-row items-center gap-2 text-sm p-3 not-last:pb-0",
+							children: [
+								/* @__PURE__ */ jsx(MethodLabel, { children: method }),
+								/* @__PURE__ */ jsx(Route, {
+									route,
+									className: cn("flex-1", operation.deprecated && "line-through")
+								}),
+								/* @__PURE__ */ jsx("button", {
+									type: "submit",
+									className: cn(buttonVariants({
+										variant: "default",
+										size: "sm"
+									}), "w-14 py-1.5"),
+									disabled: testQuery.isLoading,
+									children: testQuery.isLoading ? /* @__PURE__ */ jsx(LoaderCircle, { className: "size-4 animate-spin" }) : t("Send")
+								})
+							]
+						}),
+						testQuery.data ? /* @__PURE__ */ jsx(ResultDisplay, {
+							data: testQuery.data,
+							reset: testQuery.reset
+						}) : null,
+						auth.requirements.length > 0 && /* @__PURE__ */ jsx(SecurityRequirements, {
+							requirements: auth.requirements,
+							selected: auth.selected,
+							select: auth.select,
+							children: auth.fields.map((field) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(AuthInput, { field }) }, stringifyFieldKey(field.fieldName)))
+						}),
+						/* @__PURE__ */ jsx(ParametersForm, { parameters }),
+						body && /* @__PURE__ */ jsx(CollapsiblePanel, {
+							"data-type": "body",
+							title: t("Body"),
+							children: renderBodyField ? renderBodyField("body", body) : /* @__PURE__ */ jsx(BodyInput, { field: body.schema })
+						})
+					]
+				})
+			})
+		})
+	});
+}
+function SecurityRequirements({ requirements, select, selected, children }) {
+	const t = useTranslations({ note: "playground" });
+	const { isLoading, error } = usePlaygroundAuth();
+	const defaultOpen = isLoading || error != null;
+	const [open, setOpen] = useState(defaultOpen);
+	const { CollapsiblePanel = DefaultCollapsiblePanel } = usePlaygroundOptions().components ?? {};
+	useOnChange(defaultOpen, () => {
+		if (defaultOpen) setOpen(true);
+	});
+	const items = requirements.map((requirement, i) => {
+		if (requirement.length === 1) {
+			const { id, scheme } = requirement[0];
+			return {
+				value: i,
+				label: /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+					className: cn("font-mono font-medium", scheme.deprecated && "text-fd-muted-foreground line-through"),
+					children: id
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-fd-muted-foreground whitespace-pre-wrap",
+					children: scheme.description
+				})] })
+			};
+		}
+		return {
+			value: i,
+			label: /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+				className: "inline-flex items-center gap-1 font-mono font-medium",
+				children: requirement.map((item, i) => /* @__PURE__ */ jsxs(Fragment, { children: [i > 0 && /* @__PURE__ */ jsx(PlusIcon, { className: "text-fd-muted-foreground size-3.5" }), /* @__PURE__ */ jsx("span", {
+					className: cn(item.scheme.deprecated && "text-fd-muted-foreground line-through"),
+					children: item.id
+				})] }, i))
+			}), /* @__PURE__ */ jsx("ul", {
+				className: "text-fd-muted-foreground whitespace-pre-wrap list-disc list-inside",
+				children: requirement.map((item, i) => /* @__PURE__ */ jsx("li", {
+					className: "empty:hidden",
+					children: item.scheme.description
+				}, i))
+			})] })
+		};
+	});
+	return /* @__PURE__ */ jsxs(CollapsiblePanel, {
+		title: /* @__PURE__ */ jsxs(Fragment$1, { children: [t("Authorization"), isLoading && /* @__PURE__ */ jsxs("span", {
+			className: "border-s ps-2 inline-flex items-center gap-1.5 text-fd-muted-foreground text-xs font-mono",
+			children: [
+				/* @__PURE__ */ jsx(Spinner, {}),
+				" ",
+				t("Fetching token...")
+			]
+		})] }),
+		"data-type": "authorization",
+		open,
+		onOpenChange: setOpen,
+		children: [
+			error != null && /* @__PURE__ */ jsxs("div", {
+				className: "p-2 border rounded-lg bg-fd-secondary",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-fd-muted-foreground font-medium mb-1",
+					children: t("Failed to fetch token")
+				}), /* @__PURE__ */ jsx("p", { children: String(error) })]
+			}),
+			/* @__PURE__ */ jsxs(Select, {
+				items,
+				value: selected,
+				onValueChange: (v) => v !== null && select(v),
+				children: [/* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, {}) }), /* @__PURE__ */ jsx(SelectContent, { children: items.map(({ value, label }) => /* @__PURE__ */ jsx(SelectItem, {
+					value,
+					children: label
+				}, value)) })]
+			}),
+			children
+		]
+	});
+}
+const ParamTypes = [
+	"path",
+	"header",
+	"cookie",
+	"query"
+];
+function ParameterItem({ type, parameters }) {
+	const { renderParameterField } = usePlaygroundOptions();
+	return parameters.map((field) => {
+		const fieldName = [type, field.name];
+		if (renderParameterField) return renderParameterField(fieldName, field);
+		const contentTypes = field.content && Object.keys(field.content);
+		const schema = field.content && contentTypes && contentTypes.length > 0 ? field.content[contentTypes[0]].schema : field.schema;
+		return /* @__PURE__ */ jsx(FieldSet, {
+			name: field.name,
+			fieldName,
+			field: schema ?? anyFields,
+			isRequired: field.required
+		}, stringifyFieldKey(fieldName));
+	});
+}
+function ParametersForm({ parameters }) {
+	const { CollapsiblePanel = DefaultCollapsiblePanel } = usePlaygroundOptions().components ?? {};
+	const t = useTranslations({ note: "playground" });
+	const displayNames = {
+		header: t("Header"),
+		cookie: t("Cookies"),
+		query: t("Query"),
+		path: t("Path")
+	};
+	return ParamTypes.map((type) => {
+		const items = parameters.filter((v) => v.in === type);
+		if (items.length === 0) return;
+		return /* @__PURE__ */ jsx(CollapsiblePanel, {
+			"data-type": type,
+			title: displayNames[type],
+			children: /* @__PURE__ */ jsx(ParameterItem, {
+				parameters: items,
+				type
+			})
+		}, type);
+	});
+}
+function BodyInput({ field: _field }) {
+	const field = useResolvedSchema(_field);
+	const [isJson, setIsJson] = useState(false);
+	const t = useTranslations({ note: "playground" });
+	if (field.format === "binary") return /* @__PURE__ */ jsx(FieldSet, {
+		field,
+		fieldName: ["body"],
+		isRequired: true
+	});
+	if (isJson) return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
+		className: cn(buttonVariants({
+			variant: "secondary",
+			size: "sm",
+			className: "w-fit font-mono p-2"
+		})),
+		onClick: () => setIsJson(false),
+		type: "button",
+		children: t("Close JSON Editor")
+	}), /* @__PURE__ */ jsx(JsonInput, { fieldName: ["body"] })] });
+	return /* @__PURE__ */ jsx(FieldSet, {
+		field,
+		fieldName: ["body"],
+		collapsible: false,
+		isRequired: true,
+		name: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: cn(buttonVariants({
+				variant: "secondary",
+				size: "sm",
+				className: "p-2"
+			})),
+			onClick: () => setIsJson(true),
+			children: t("Open JSON Editor")
+		})
+	});
+}
+function AuthInput({ field }) {
+	const t = useTranslations({ note: "playground" });
+	const { fieldName, scheme } = field;
+	if (scheme.type === "oauth2") return /* @__PURE__ */ jsx(OAuth2Input, { field });
+	if (scheme.type === "http" && scheme.scheme === "basic") return /* @__PURE__ */ jsx(ObjectInput, {
+		field: {
+			type: "object",
+			properties: {
+				username: { type: "string" },
+				password: { type: "string" }
+			}
+		},
+		fieldName
+	});
+	if (scheme.type === "apiKey") return /* @__PURE__ */ jsx(FieldSet, {
+		fieldName,
+		name: `${scheme.name} (${scheme.in})`,
+		field: { type: "string" }
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FieldSet, {
+		name: `${t("Authorization")} (${t("Header")})`,
+		fieldName,
+		field: { type: "string" }
+	}), scheme.type !== "http" && /* @__PURE__ */ jsx("p", {
+		className: "text-fd-muted-foreground text-xs",
+		children: t("OpenID Connect is not supported at the moment, you can still set an access token here.")
+	})] });
+}
+function OAuth2Input({ field }) {
+	const { fieldName } = field;
+	const [open, setOpen] = useState(false);
+	const engine = useDataEngine();
+	const t = useTranslations({ note: "playground" });
+	return /* @__PURE__ */ jsxs("fieldset", {
+		className: "flex flex-col gap-2",
+		children: [/* @__PURE__ */ jsx(Label, {
+			htmlFor: stringifyFieldKey(fieldName),
+			children: t("Access Token")
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ jsx(FieldInput, {
+				fieldName,
+				field: { type: "string" },
+				className: "flex-1"
+			}), /* @__PURE__ */ jsxs(OAuthDialog, {
+				open,
+				onOpenChange: setOpen,
+				children: [/* @__PURE__ */ jsx(OAuthDialogTrigger, {
+					type: "button",
+					className: cn(buttonVariants({
+						size: "sm",
+						variant: "secondary"
+					})),
+					children: t("Authorize")
+				}), /* @__PURE__ */ jsx(OAuthDialogContent, {
+					setOpen,
+					schemeId: field.schemeId,
+					scopes: field.scopes,
+					setToken: (token) => engine.update(["header", "Authorization"], token)
+				})]
+			})]
+		})]
+	});
+}
+function Route({ route, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("flex flex-row items-center gap-0.5 overflow-auto text-nowrap", props.className),
+		children: route.split("/").map((part, index) => /* @__PURE__ */ jsxs(Fragment, { children: [index > 0 && /* @__PURE__ */ jsx("span", {
+			className: "text-fd-muted-foreground",
+			children: "/"
+		}), part.startsWith("{") && part.endsWith("}") ? /* @__PURE__ */ jsx("code", {
+			className: "bg-fd-primary/10 text-fd-primary",
+			children: part
+		}) : /* @__PURE__ */ jsx("code", {
+			className: "text-fd-foreground",
+			children: part
+		})] }, index))
+	});
+}
+function DefaultCollapsiblePanel({ title, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Collapsible, {
+		...props,
+		className: cn("border-b last:border-b-0", props.className),
+		children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
+			className: "group w-full flex items-center gap-2 p-3 text-sm font-medium",
+			children: [title, /* @__PURE__ */ jsx(ChevronDown, { className: "ms-auto size-3.5 text-fd-muted-foreground group-data-[panel-open]:rotate-180" })]
+		}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col gap-3 p-3 pt-1",
+			children
+		}) })]
+	});
+}
+const Custom = { useController(fieldName, options) {
+	const [value, setValue] = useFieldValue(fieldName, options);
+	return {
+		value,
+		setValue
+	};
+} };
+//#endregion
+export { Custom, DefaultCollapsiblePanel, DefaultResultDisplay, PlaygroundClient as default };

package/dist/{playground → ui/playground}/components/oauth-dialog.js

@@ -1,24 +1,25 @@
-import { useRenderContext } from "../../ui/contexts/api.js";
-import { cn } from "../../utils/cn.js";
-import { useQuery } from "../../utils/use-query.js";
-import { useAuth } from "../auth.js";
+import { useQuery } from "../../../packages/shared-api/dist/utils/use-query.js";
+import { requestOAuthToken, usePlaygroundAuth } from "../../../playground/auth.js";
+import { useOpenAPI } from "../../../utils/create-page.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../packages/shared-api/dist/components/select.js";
+import { cn } from "../../../utils/cn.js";
+import { Label } from "../../../packages/shared-api/dist/components/label.js";
+import { Input } from "../../../packages/shared-api/dist/components/input.js";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "../../../packages/shared-api/dist/components/dialog.js";
 import { useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useTranslations } from "@fuma-translate/react";
 import { buttonVariants } from "fumadocs-ui/components/ui/button";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@fumadocs/api-docs/components/select";
-import { Input, labelVariants } from "@fumadocs/api-docs/components/input";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@fumadocs/api-docs/components/dialog";
-//#region src/playground/components/oauth-dialog.tsx
+//#region src/ui/playground/components/oauth-dialog.tsx
 const OAuthDialog = Dialog;
 function OAuthDialogContent(props) {
 	const t = useTranslations({ note: "OAuth dialog" });
 	return /* @__PURE__ */ jsxs(DialogContent, { children: [/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: t("Authorization") }), /* @__PURE__ */ jsx(DialogDescription, { children: t("Obtain the access token for API.") })] }), /* @__PURE__ */ jsx(Content, { ...props })] });
 }
 function Content({ schemeId, scopes, setToken, setOpen }) {
-	const { dereferenced, resolve } = useRenderContext().schema;
+	const { dereferenced, resolve } = useOpenAPI().doc;
 	const schemes = dereferenced.components?.securitySchemes;
-	const tokenInfo = useAuth().store[schemeId];
+	const tokenInfo = usePlaygroundAuth().store[schemeId];
 	const scheme = resolve(schemes?.[schemeId]);
 	if (!scheme || scheme.type !== "oauth2") throw new Error("unexpected schemaId: must be type oauth2");
 	const [type, setType] = useState(() => {
@@ -72,77 +73,16 @@ function Content({ schemeId, scopes, setToken, setOpen }) {
 		};
 	}, [tokenInfo]);
 	const authorize = useQuery(async (values) => {
-		if (type === "implicit") {
-			const value = scheme.flows[type];
-			const params = new URLSearchParams();
-			params.set("response_type", "token");
-			params.set("client_id", values.clientId);
-			params.set("redirect_uri", window.location.href);
-			params.set("scope", scopes.join("+"));
-			params.set("state", JSON.stringify({
-				scheme: schemeId,
-				client_id: values.clientId,
-				redirect_uri: window.location.href
-			}));
-			window.location.replace(`${value.authorizationUrl}?${params.toString()}`);
-			return;
-		}
-		if (type === "authorizationCode") {
-			const value = scheme.flows[type];
-			const params = new URLSearchParams();
-			params.set("response_type", "code");
-			params.set("client_id", values.clientId);
-			params.set("redirect_uri", window.location.href);
-			params.set("scope", scopes.join("+"));
-			params.set("state", JSON.stringify({
-				client_id: values.clientId,
-				client_secret: values.clientSecret,
-				redirect_uri: window.location.href,
-				scheme: schemeId
-			}));
-			window.location.replace(`${value.authorizationUrl}?${params.toString()}`);
-			return;
-		}
-		let res;
-		if (type === "password") {
-			const value = scheme.flows[type];
-			const body = new URLSearchParams({
-				grant_type: "password",
-				username: values.username,
-				password: values.password,
-				scope: scopes.join("+")
-			});
-			const headers = { "Content-Type": "application/x-www-form-urlencoded" };
-			if (clientAuth === "header") headers.Authorization = `Basic ${btoa(`${values.clientId}:${values.clientSecret}`)}`;
-			else {
-				if (values.clientId) body.set("client_id", values.clientId);
-				if (values.clientSecret) body.set("client_secret", values.clientSecret);
-			}
-			res = await fetch(value.tokenUrl, {
-				method: "POST",
-				headers,
-				body
-			});
-		}
-		if (type === "clientCredentials") {
-			const value = scheme.flows[type];
-			res = await fetch(value.tokenUrl, {
-				method: "POST",
-				headers: { "Content-Type": "application/x-www-form-urlencoded" },
-				body: new URLSearchParams({
-					grant_type: "client_credentials",
-					client_id: values.clientId,
-					client_secret: values.clientSecret,
-					scope: scopes.join("+")
-				})
-			});
-		}
-		if (res) {
-			if (!res.ok) throw new Error(await res.text());
-			const { access_token, token_type = "Bearer" } = await res.json();
-			setToken(`${token_type} ${access_token}`);
-			setOpen(false);
-		}
+		if (!type) return;
+		const token = await requestOAuthToken(scheme, type, {
+			...values,
+			schemeId,
+			scopes,
+			clientAuth
+		});
+		if (!token) return;
+		setToken(token);
+		setOpen(false);
 	});
 	const isLoading = authorize.isLoading;
 	return /* @__PURE__ */ jsxs("form", {
@@ -187,9 +127,8 @@ function Content({ schemeId, scopes, setToken, setOpen }) {
 			(type === "authorizationCode" || type === "clientCredentials" || type === "implicit" || type === "password") && /* @__PURE__ */ jsxs("fieldset", {
 				className: "flex flex-col gap-1.5",
 				children: [
-					/* @__PURE__ */ jsx("label", {
+					/* @__PURE__ */ jsx(Label, {
 						htmlFor: "client_id",
-						className: cn(labelVariants()),
 						children: t("Client ID")
 					}),
 					/* @__PURE__ */ jsx("p", {
@@ -211,9 +150,8 @@ function Content({ schemeId, scopes, setToken, setOpen }) {
 			(type === "authorizationCode" || type === "clientCredentials" || type === "password") && /* @__PURE__ */ jsxs("fieldset", {
 				className: "flex flex-col gap-1.5",
 				children: [
-					/* @__PURE__ */ jsx("label", {
+					/* @__PURE__ */ jsx(Label, {
 						htmlFor: "client_secret",
-						className: cn(labelVariants()),
 						children: t("Client Secret")
 					}),
 					/* @__PURE__ */ jsx("p", {
@@ -235,9 +173,8 @@ function Content({ schemeId, scopes, setToken, setOpen }) {
 			type === "password" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsxs("fieldset", {
 					className: "flex flex-col gap-1.5",
-					children: [/* @__PURE__ */ jsx("label", {
+					children: [/* @__PURE__ */ jsx(Label, {
 						htmlFor: "client_auth",
-						className: cn(labelVariants()),
 						children: t("Client Authentication")
 					}), /* @__PURE__ */ jsxs(Select, {
 						items: Object.entries(clientAuthMethods).map(([key, method]) => ({
@@ -270,9 +207,8 @@ function Content({ schemeId, scopes, setToken, setOpen }) {
 				}),
 				/* @__PURE__ */ jsxs("fieldset", {
 					className: "flex flex-col gap-1.5",
-					children: [/* @__PURE__ */ jsx("label", {
+					children: [/* @__PURE__ */ jsx(Label, {
 						htmlFor: "username",
-						className: cn(labelVariants()),
 						children: t("Username")
 					}), /* @__PURE__ */ jsx(Input, {
 						id: "username",
@@ -287,9 +223,8 @@ function Content({ schemeId, scopes, setToken, setOpen }) {
 				}),
 				/* @__PURE__ */ jsxs("fieldset", {
 					className: "flex flex-col gap-1.5",
-					children: [/* @__PURE__ */ jsx("label", {
+					children: [/* @__PURE__ */ jsx(Label, {
 						htmlFor: "password",
-						className: cn(labelVariants()),
 						children: t("Password")
 					}), /* @__PURE__ */ jsx(Input, {
 						id: "password",
@@ -308,7 +243,7 @@ function Content({ schemeId, scopes, setToken, setOpen }) {
 				children: String(authorize.error)
 			}) : null, /* @__PURE__ */ jsx("button", {
 				type: "submit",
-				className: cn(buttonVariants({ color: "primary" })),
+				className: cn(buttonVariants({ variant: "default" })),
 				children: t("Submit")
 			})] }) : /* @__PURE__ */ jsx("p", {
 				className: "text-fd-muted-foreground bg-fd-muted p-2 rounded-lg border",

package/dist/{playground → ui/playground}/components/result-display.d.ts

@@ -1,6 +1,6 @@
-import { FetchResult } from "../fetcher.js";
+import { FetchResult } from "../../../playground/fetcher.js";
 import { ComponentProps } from "react";
-//#region src/playground/components/result-display.d.ts
+//#region src/ui/playground/components/result-display.d.ts
 export interface ResultDisplayProps extends ComponentProps<'div'> {
   data: FetchResult;
   reset: () => void;

package/dist/{playground → ui/playground}/components/result-display.js

@@ -1,16 +1,16 @@
 "use client";
+import { ClientCodeBlock } from "../../components/codeblock.js";
+import { cn } from "../../../utils/cn.js";
 import { useStatusInfo } from "../status-info.js";
-import { cn } from "../../utils/cn.js";
-import { ClientCodeBlock } from "../../ui/components/codeblock.js";
-import { require_fast_content_type_parse } from "../../node_modules/.pnpm/fast-content-type-parse@4.0.0/node_modules/fast-content-type-parse/index.js";
+import { require_fast_content_type_parse } from "../../../node_modules/.pnpm/fast-content-type-parse@4.0.0/node_modules/fast-content-type-parse/index.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../packages/shared-api/dist/components/collapsible.js";
 import { Fragment, useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronDown, CircleX, SignpostIcon } from "lucide-react";
 import { useTranslations } from "@fuma-translate/react";
-import { buttonVariants } from "fumadocs-ui/components/ui/button";
+import { ChevronDown, CircleX, SignpostIcon } from "lucide-react";
 import { cva } from "class-variance-authority";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@fumadocs/api-docs/components/collapsible";
-//#region src/playground/components/result-display.tsx
+import { buttonVariants } from "fumadocs-ui/components/ui/button";
+//#region src/ui/playground/components/result-display.tsx
 var import_fast_content_type_parse = require_fast_content_type_parse();
 const panelVariants = cva("flex flex-col gap-3 mt-2 px-3 py-2 border-y bg-fd-secondary text-fd-secondary-foreground");
 function DefaultResultDisplay({ data, reset, ...rest }) {