@mcp-b/react-components 0.16.1 → 0.18.0

package/dist/components/PromptInput.js

@@ -1,5 +1,5 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { B as SpinnerIcon, D as MicrophoneIcon, F as PlusIcon, J as WrenchIcon, N as PencilIcon, U as StopIcon, V as SquareIcon, Y as XIcon, i as ArrowUpIcon, j as PaperclipIcon, k as MonitorIcon, o as CheckIcon, q as WarningIcon, s as ChevronDownIcon, v as FileIcon, y as FolderIcon } from "../icons-CpfUer49.js";
+import { n as mergeBaseClassName, t as cx } from "../class-names-BiMDVpUo.js";
+import { $ as XIcon, B as PlusIcon, G as SpinnerIcon, I as PaperclipIcon, K as SquareIcon, N as MonitorIcon, Q as WrenchIcon, S as FolderIcon, Z as WarningIcon, a as ArrowUpIcon, j as MicrophoneIcon, l as CheckIcon, q as StopIcon, u as ChevronDownIcon, x as FileIcon } from "../icons-CQJ-aMnI.js";
 import { Button } from "./Button.js";
 import { Tooltip } from "./Tooltip.js";
 import { t as AttachmentPreview } from "../attachment-preview-DIs50Q0h.js";
@@ -7,10 +7,12 @@ import { Menu } from "./Menu.js";
 import { Combobox } from "./Combobox.js";
 import { Select } from "./Select.js";
 import { Tabs } from "./Tabs.js";
+import { ThinkExecutionApproval, ThinkPendingApproval, getPausedExecution } from "./ThinkPendingApproval.js";
+import { ToolApproval } from "./ToolApproval.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { getToolApproval, getToolInput, getToolOutput } from "@cloudflare/think/react";
-import { getToolName, isToolUIPart } from "ai";
+import { isToolUIPart } from "ai";
+import { getToolApproval } from "@cloudflare/think/react";
 //#region src/components/PromptInput.tsx
 const PromptInputController = React.createContext(null);
 const LocalAttachmentsContext = React.createContext(null);
@@ -39,7 +41,9 @@ function PromptInputProvider({ initialInput = "", children }) {
 	const fileInputRef = React.useRef(null);
 	const openRef = React.useRef(() => {});
 	const attachmentsRef = React.useRef(attachmentFiles);
-	attachmentsRef.current = attachmentFiles;
+	React.useEffect(() => {
+		attachmentsRef.current = attachmentFiles;
+	}, [attachmentFiles]);
 	React.useEffect(() => () => {
 		revokeFileUrls(attachmentsRef.current);
 	}, []);
@@ -129,7 +133,9 @@ function PromptInput({ className, accept, multiple, globalDrop, syncHiddenInput,
 	const [localFiles, setLocalFiles] = React.useState([]);
 	const files = controller?.attachments.files ?? localFiles;
 	const filesRef = React.useRef(files);
-	filesRef.current = files;
+	React.useEffect(() => {
+		filesRef.current = files;
+	}, [files]);
 	React.useImperativeHandle(ref, () => formRef.current, []);
 	React.useEffect(() => () => {
 		if (!usingProvider) revokeFileUrls(filesRef.current);
@@ -172,6 +178,7 @@ function PromptInput({ className, accept, multiple, globalDrop, syncHiddenInput,
 		maxFiles,
 		onError
 	]);
+	const addDroppedFiles = React.useEffectEvent(add);
 	const remove = React.useCallback((attachmentId) => {
 		if (controller) {
 			controller.attachments.remove(attachmentId);
@@ -211,7 +218,7 @@ function PromptInput({ className, accept, multiple, globalDrop, syncHiddenInput,
 		const onDrop = (event) => {
 			const dragEvent = event;
 			if (dragEvent.dataTransfer?.types.includes("Files")) dragEvent.preventDefault();
-			if (dragEvent.dataTransfer?.files?.length) add(dragEvent.dataTransfer.files);
+			if (dragEvent.dataTransfer?.files?.length) addDroppedFiles(dragEvent.dataTransfer.files);
 		};
 		target.addEventListener("dragover", onDragOver);
 		target.addEventListener("drop", onDrop);
@@ -219,7 +226,7 @@ function PromptInput({ className, accept, multiple, globalDrop, syncHiddenInput,
 			target.removeEventListener("dragover", onDragOver);
 			target.removeEventListener("drop", onDrop);
 		};
-	}, [add, globalDrop]);
+	}, [globalDrop]);
 	const attachmentsCtx = React.useMemo(() => ({
 		add,
 		clear: clearAttachments,
@@ -371,7 +378,7 @@ function PromptInputTextarea({ className, placeholder = "How can I help?", rows
 	const controller = useOptionalPromptInputController();
 	const attachments = usePromptInputAttachments();
 	const innerRef = React.useRef(null);
-	const [isComposing, setIsComposing] = React.useState(false);
+	const isComposingRef = React.useRef(false);
 	React.useImperativeHandle(ref, () => innerRef.current, []);
 	const resize = React.useCallback(() => {
 		const el = innerRef.current;
@@ -404,17 +411,17 @@ function PromptInputTextarea({ className, placeholder = "How can I help?", rows
 		placeholder,
 		rows,
 		onCompositionEnd: (event) => {
-			setIsComposing(false);
+			isComposingRef.current = false;
 			onCompositionEnd?.(event);
 		},
 		onCompositionStart: (event) => {
-			setIsComposing(true);
+			isComposingRef.current = true;
 			onCompositionStart?.(event);
 		},
 		onKeyDown: (event) => {
 			onKeyDown?.(event);
 			if (event.defaultPrevented) return;
-			if (event.key === "Enter" && !event.shiftKey && !isComposing && !event.nativeEvent.isComposing) {
+			if (event.key === "Enter" && !event.shiftKey && !isComposingRef.current && !event.nativeEvent.isComposing) {
 				event.preventDefault();
 				event.currentTarget.form?.requestSubmit();
 			}
@@ -446,8 +453,10 @@ function PromptInputTextarea({ className, placeholder = "How can I help?", rows
 		...controlledProps
 	});
 }
-function PromptInputButton({ className, tooltip, variant = "ghost", color = "neutral", size, children, "aria-label": ariaLabel, ref, ...props }) {
-	const resolvedSize = size ?? (React.Children.count(children) > 1 ? "xs" : "icon-xs");
+function PromptInputButton({ className, tooltip, variant = "ghost", color = "neutral", size, iconOnly, children, "aria-label": ariaLabel, ref, ...props }) {
+	const childCount = React.Children.count(children);
+	const resolvedSize = size ?? "sm";
+	const resolvedIconOnly = iconOnly ?? childCount <= 1;
 	const tooltipConfig = typeof tooltip === "string" ? { content: tooltip } : tooltip;
 	const fallbackLabel = ariaLabel ?? (typeof tooltipConfig?.content === "string" ? tooltipConfig.content : void 0);
 	const hasResponsiveLabel = Boolean(tooltipConfig && React.Children.count(children) > 1);
@@ -457,6 +466,7 @@ function PromptInputButton({ className, tooltip, variant = "ghost", color = "neu
 		variant,
 		color,
 		size: resolvedSize,
+		iconOnly: resolvedIconOnly,
 		className: cx("prompt-input__button", className),
 		"aria-label": fallbackLabel,
 		"data-responsive-label": hasResponsiveLabel || void 0,
@@ -591,7 +601,8 @@ function PromptInputDictation({ voice, beforeStart, className, disabled, ref, ..
 					type: "button",
 					variant: "normal",
 					color: "neutral",
-					size: "icon",
+					size: "sm",
+					iconOnly: true,
 					"aria-label": "Stop dictation",
 					onClick: () => voice.stop(),
 					children: /* @__PURE__ */ jsx(SquareIcon, { size: 12 })
@@ -600,7 +611,8 @@ function PromptInputDictation({ voice, beforeStart, className, disabled, ref, ..
 					className: "prompt-input__recording-button",
 					type: "button",
 					color: "primary",
-					size: "icon",
+					size: "sm",
+					iconOnly: true,
 					"aria-label": "Stop dictation and send",
 					onClick: () => {
 						submitAfterStopRef.current = true;
@@ -611,7 +623,7 @@ function PromptInputDictation({ voice, beforeStart, className, disabled, ref, ..
 			]
 		}) : null,
 		/* @__PURE__ */ jsx("span", {
-			className: "prompt-input__dictation-status",
+			className: "prompt-input__dictation-status sigvelo-visually-hidden",
 			role: "status",
 			"aria-live": "polite",
 			"aria-atomic": "true",
@@ -629,7 +641,9 @@ function PromptInputRecordingWaveform({ active, level }) {
 	const containerRef = React.useRef(null);
 	const historyRef = React.useRef([]);
 	const levelRef = React.useRef(level);
-	levelRef.current = level;
+	React.useEffect(() => {
+		levelRef.current = level;
+	}, [level]);
 	React.useEffect(() => {
 		const canvas = canvasRef.current;
 		const container = containerRef.current;
@@ -730,7 +744,7 @@ function PromptInputActionMenuContent({ anchor, positionMethod, side, sideOffset
 		collisionAvoidance,
 		children: /* @__PURE__ */ jsx(Menu.Popup, {
 			tabIndex,
-			className: cx("prompt-input__action-menu", className),
+			className: mergeBaseClassName("prompt-input__action-menu", className),
 			...props,
 			children
 		})
@@ -738,7 +752,7 @@ function PromptInputActionMenuContent({ anchor, positionMethod, side, sideOffset
 }
 function PromptInputActionMenuItem({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Menu.Item, {
-		className: cx("prompt-input__action-menu-item", className),
+		className: mergeBaseClassName("prompt-input__action-menu-item", className),
 		...props
 	});
 }
@@ -790,7 +804,7 @@ function PromptInputPermissionSelector({ value, onValueChange, question = "How s
 	const trigger = /* @__PURE__ */ jsx(Menu.Trigger, {
 		unstyled: true,
 		render: /* @__PURE__ */ jsxs(PromptInputButton, {
-			size: "xs",
+			size: "sm",
 			className: "prompt-input__permissions-trigger",
 			"data-mode": value,
 			"aria-label": selected.label,
@@ -841,9 +855,9 @@ function PromptInputPermissionSelector({ value, onValueChange, question = "How s
 		})
 	}) }) })] });
 }
-function PromptInputSubmit({ className, status = "ready", onStop, variant = "normal", color = "primary", size = "icon-xs", onClick, children, label, allowSubmitWhileBusy = false, hasContent = false, ref, ...props }) {
+function PromptInputSubmit({ className, status = "ready", onStop, variant = "normal", color = "primary", size = "sm", onClick, children, label, hasContent = false, ref, ...props }) {
 	const isBusy = status === "submitted" || status === "streaming";
-	const isQueueing = isBusy && allowSubmitWhileBusy && hasContent;
+	const isQueueing = isBusy && hasContent;
 	const isStopping = isBusy && !isQueueing;
 	const resolvedLabel = label ?? (isQueueing ? "Queue message" : defaultSubmitLabel(status));
 	return /* @__PURE__ */ jsx(Button, {
@@ -852,6 +866,7 @@ function PromptInputSubmit({ className, status = "ready", onStop, variant = "nor
 		variant,
 		color,
 		size,
+		iconOnly: true,
 		className: cx("prompt-input__submit", className),
 		"data-status": status,
 		"aria-label": resolvedLabel,
@@ -867,11 +882,20 @@ function PromptInputSubmit({ className, status = "ready", onStop, variant = "nor
 		children: children ?? (isQueueing ? /* @__PURE__ */ jsx(ArrowUpIcon, {}) : defaultSubmitIcon(status))
 	});
 }
-function getPausedExecution(part) {
-	if (part.state !== "output-available") return void 0;
-	const output = getToolOutput(part);
-	return output?.status === "paused" && typeof output.executionId === "string" ? output : void 0;
-}
+/**
+* Resolve Think execution approvals that do not use the AI SDK
+* `approval-requested` part: paused codemode executions and durable-pause
+* approvals from `pendingApprovals()`. Pass the whole upstream Think agent
+* stub; the component calls its client-callable RPCs directly:
+*
+* ```tsx
+* <PromptInputApproval part={part} thinkStub={agent.stub} />
+* ```
+*
+* On approve, upstream resumes or runs the parked execution and auto-continues
+* the chat. Both RPCs are idempotent, so a stale click resolves to "already
+* handled".
+*/
 /** The id a response must carry: the approval id, or the paused run's executionId. */
 function getApprovalRequestId(part) {
 	if (part.state === "approval-requested") return getToolApproval(part)?.id;
@@ -888,22 +912,13 @@ function getApprovalStateKey(part) {
 /** Derives pending tool approvals straight from the messages — no app-owned shapes. */
 function getPendingToolApprovals(messages, { pausedExecutions = false } = {}) {
 	const pending = [];
-	messages.forEach((message, messageIndex) => {
-		message.parts.forEach((part, partIndex) => {
-			if (isToolUIPart(part) && (part.state === "approval-requested" || pausedExecutions && getPausedExecution(part))) pending.push({
-				message,
-				messageIndex,
-				part,
-				partIndex
-			});
+	messages.forEach((message) => {
+		message.parts.forEach((part) => {
+			if (isToolUIPart(part) && (part.state === "approval-requested" || pausedExecutions && getPausedExecution(part))) pending.push(part);
 		});
 	});
 	return pending;
 }
-function formatApprovalValue(value) {
-	if (typeof value === "string") return value;
-	return JSON.stringify(value);
-}
 /**
 * The composer's approval state: when a tool call awaits human approval the
 * prompt input area becomes the confirmation. "Yes" approves on click; typing
@@ -912,183 +927,32 @@ function formatApprovalValue(value) {
 * current selection — approve by default.
 */
 function PromptInputApproval({ part, approval: durableApproval, onRespond, thinkStub, onExecutionSettled, onSkip, question, count, className, ref, ...props }) {
-	const [selected, setSelected] = React.useState("approve");
-	const [reason, setReason] = React.useState("");
-	const [busy, setBusy] = React.useState(false);
-	const yesRef = React.useRef(null);
-	const reasonRef = React.useRef(null);
-	const approval = part?.state === "approval-requested" ? part.approval : void 0;
-	const paused = part ? getPausedExecution(part) : void 0;
-	const approvalId = part ? getApprovalStateKey(part) : durableApproval?.executionId;
-	React.useEffect(() => {
-		setSelected("approve");
-		setReason("");
-		setBusy(false);
-	}, [approvalId]);
-	if (!part && !durableApproval) return null;
-	if (approval ? !onRespond : !(thinkStub && (paused || durableApproval))) return null;
-	const toolName = durableApproval?.descriptor.action ?? (part ? getToolName(part) : "action");
-	const respond = async (approved) => {
-		if (busy) return;
-		setBusy(true);
-		const trimmed = reason.trim();
-		const denyReason = !approved && trimmed ? trimmed : void 0;
-		try {
-			if (approval) await onRespond?.({
-				id: approval.id,
-				approved,
-				reason: denyReason
-			});
-			else if (paused && thinkStub) await (approved ? thinkStub.approveExecution(paused.executionId) : thinkStub.rejectExecution(paused.executionId, denyReason));
-			else if (durableApproval && thinkStub) await (approved ? thinkStub.approveExecution(durableApproval.executionId) : thinkStub.rejectExecution(durableApproval.executionId, denyReason));
-		} finally {
-			setBusy(false);
-			if (!approval) onExecutionSettled?.();
-		}
-	};
-	const submit = () => void respond(selected === "approve");
-	const input = durableApproval?.descriptor.input ?? (part ? getToolInput(part) : void 0);
-	const inputEntries = input && typeof input === "object" && !Array.isArray(input) ? Object.entries(input) : void 0;
-	return /* @__PURE__ */ jsxs("div", {
-		ref,
-		role: "group",
-		"aria-label": `Approve ${toolName}`,
+	const shared = {
 		className: cx("prompt-input__approval", className),
-		onKeyDown: (event) => {
-			if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-				event.preventDefault();
-				(selected === "approve" ? reasonRef : yesRef).current?.focus();
-			} else if (event.key === "1" && event.target !== reasonRef.current) yesRef.current?.focus();
-		},
-		...props,
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "prompt-input__approval-question",
-				children: [/* @__PURE__ */ jsx("span", { children: question ?? (durableApproval ? /* @__PURE__ */ jsxs(Fragment, { children: [
-					"Do you want to allow ",
-					/* @__PURE__ */ jsx("code", { children: durableApproval.descriptor.summary }),
-					"?"
-				] }) : paused ? /* @__PURE__ */ jsx(Fragment, { children: "The agent's code is paused on these calls. Allow it to continue?" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-					"Do you want to allow the agent to run ",
-					/* @__PURE__ */ jsx("code", { children: toolName }),
-					"?"
-				] })) }), count && count > 1 ? /* @__PURE__ */ jsxs("span", {
-					className: "prompt-input__approval-count",
-					children: ["1 of ", count]
-				}) : null]
-			}),
-			paused ? /* @__PURE__ */ jsx("div", {
-				className: "prompt-input__approval-preview",
-				children: paused.pending.map((action) => /* @__PURE__ */ jsxs("div", {
-					className: "prompt-input__approval-preview-row",
-					children: [
-						/* @__PURE__ */ jsxs("span", {
-							className: "prompt-input__approval-preview-key",
-							children: [
-								action.connector,
-								".",
-								action.method
-							]
-						}),
-						" ",
-						action.args === void 0 ? null : formatApprovalValue(action.args)
-					]
-				}, action.seq))
-			}) : input !== void 0 ? /* @__PURE__ */ jsx("div", {
-				className: "prompt-input__approval-preview",
-				children: inputEntries ? inputEntries.map(([key, value]) => /* @__PURE__ */ jsxs("div", {
-					className: "prompt-input__approval-preview-row",
-					children: [
-						/* @__PURE__ */ jsx("span", {
-							className: "prompt-input__approval-preview-key",
-							children: key
-						}),
-						" ",
-						formatApprovalValue(value)
-					]
-				}, key)) : /* @__PURE__ */ jsx("div", {
-					className: "prompt-input__approval-preview-row",
-					children: formatApprovalValue(input)
-				})
-			}) : null,
-			/* @__PURE__ */ jsxs("div", {
-				className: "prompt-input__approval-options",
-				children: [/* @__PURE__ */ jsxs("button", {
-					ref: yesRef,
-					type: "button",
-					className: "prompt-input__approval-option",
-					"data-selected": selected === "approve" || void 0,
-					disabled: busy,
-					onClick: () => void respond(true),
-					onFocus: () => setSelected("approve"),
-					children: [
-						/* @__PURE__ */ jsx("span", {
-							className: "prompt-input__approval-key",
-							children: "1"
-						}),
-						"Yes",
-						/* @__PURE__ */ jsx("span", {
-							className: "prompt-input__approval-arrows",
-							"aria-hidden": "true",
-							children: "↑↓"
-						})
-					]
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "prompt-input__approval-option prompt-input__approval-deny",
-					"data-selected": selected === "deny" || void 0,
-					children: [
-						/* @__PURE__ */ jsx("span", {
-							className: "prompt-input__approval-key",
-							"aria-hidden": "true",
-							children: /* @__PURE__ */ jsx(PencilIcon, { size: 11 })
-						}),
-						/* @__PURE__ */ jsx("input", {
-							ref: reasonRef,
-							type: "text",
-							className: "prompt-input__approval-reason",
-							"aria-label": `Deny ${toolName} and tell the agent what to do differently`,
-							placeholder: "No, and tell the agent what to do differently",
-							value: reason,
-							disabled: busy,
-							onFocus: () => setSelected("deny"),
-							onChange: (event) => {
-								setSelected("deny");
-								setReason(event.currentTarget.value);
-							},
-							onKeyDown: (event) => {
-								if (event.key === "Enter" && !event.nativeEvent.isComposing) {
-									event.preventDefault();
-									respond(false);
-								}
-							}
-						}),
-						onSkip ? /* @__PURE__ */ jsx(Button, {
-							type: "button",
-							size: "xs",
-							variant: "ghost",
-							color: "neutral",
-							className: "prompt-input__approval-skip",
-							disabled: busy,
-							onClick: onSkip,
-							children: "Skip"
-						}) : null,
-						/* @__PURE__ */ jsxs(Button, {
-							type: "button",
-							size: "xs",
-							color: "primary",
-							className: "prompt-input__approval-submit",
-							disabled: busy,
-							onClick: submit,
-							children: [selected === "approve" ? "Approve" : "Submit", /* @__PURE__ */ jsx("kbd", {
-								className: "prompt-input__approval-kbd",
-								children: "⏎"
-							})]
-						})
-					]
-				})]
-			})
-		]
+		count,
+		onSkip,
+		question,
+		ref,
+		...props
+	};
+	if (part?.state === "approval-requested" && onRespond) return /* @__PURE__ */ jsx(ToolApproval, {
+		...shared,
+		part,
+		onRespond
+	});
+	if (part && thinkStub && getPausedExecution(part)) return /* @__PURE__ */ jsx(ThinkExecutionApproval, {
+		...shared,
+		part,
+		thinkStub,
+		onSettled: onExecutionSettled
+	});
+	if (durableApproval && thinkStub) return /* @__PURE__ */ jsx(ThinkPendingApproval, {
+		...shared,
+		approval: durableApproval,
+		thinkStub,
+		onSettled: onExecutionSettled
 	});
+	return null;
 }
 const PromptInputSelect = Select;
 const PromptInputHoverCardContext = React.createContext(null);
@@ -1169,7 +1033,7 @@ const PromptInputCommandInput = Combobox.Input;
 function PromptInputCommandList({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx(Combobox.List, {
 		ref,
-		className: cx("prompt-input__command-list", className),
+		className: mergeBaseClassName("prompt-input__command-list", className),
 		...props
 	});
 }
@@ -1240,6 +1104,7 @@ function PromptInputCommandComposer({ commands, mentionCommands, value, onValueC
 			className: "prompt-input__command-positioner",
 			children: /* @__PURE__ */ jsxs(Combobox.Popup, {
 				className: "prompt-input__command-popup",
+				"data-recipe": "composer-command-surface",
 				children: [/* @__PURE__ */ jsx(PromptInputCommandList, {
 					"data-command-trigger": trigger,
 					children: (group) => /* @__PURE__ */ jsxs(PromptInputCommandGroup, {
@@ -1288,7 +1153,7 @@ function PromptInputReferences({ references, onRemove, className, ref, ...props
 			type: "button",
 			variant: "ghost",
 			color: "primary",
-			size: "lg",
+			size: "sm",
 			className: "prompt-input__reference",
 			"aria-label": `Remove ${reference.label}`,
 			onClick: () => onRemove(reference),
@@ -1317,7 +1182,7 @@ function PromptInputContextSelector({ items, value, onValueChange, categoryLabel
 	const trigger = /* @__PURE__ */ jsx(Menu.Trigger, {
 		unstyled: true,
 		render: /* @__PURE__ */ jsxs(PromptInputButton, {
-			size: "xs",
+			size: "sm",
 			className: "prompt-input__context-trigger",
 			"aria-label": `${categoryLabel}: ${fullLabel}`,
 			"data-unavailable": !selected || selected.unavailable || void 0,

package/dist/components/Queue.d.ts

@@ -1,5 +1,5 @@
-import { Collapsible } from "./Collapsible.js";
-import { r as ButtonProps } from "../Button-FX_hpqxm.js";
+import { t as Collapsible } from "../Collapsible-N64ASIQr.js";
+import { r as ButtonProps } from "../Button-DLGzHsjc.js";
 import { ScrollArea } from "./ScrollArea.js";
 import * as React from "react";
 
@@ -61,9 +61,7 @@ declare function Queue({
 }: QueueProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface QueueSectionProps extends Omit<React.ComponentProps<typeof Collapsible.Root>, "className" | "unstyled"> {
-  className?: string;
-}
+interface QueueSectionProps extends Omit<React.ComponentProps<typeof Collapsible.Root>, "unstyled"> {}
 /**
  * A collapsible section within a Queue. Holds a trigger label and a list
  * of QueueItem children.
@@ -76,9 +74,7 @@ declare function QueueSection({
 }: QueueSectionProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface QueueSectionTriggerProps extends Omit<React.ComponentProps<typeof Collapsible.Trigger>, "className" | "unstyled"> {
-  className?: string;
-}
+interface QueueSectionTriggerProps extends Omit<React.ComponentProps<typeof Collapsible.Trigger>, "unstyled"> {}
 declare function QueueSectionTrigger({
   className,
   children,
@@ -104,9 +100,7 @@ declare function QueueSectionLabel({
 }: QueueSectionLabelProps & {
   ref?: React.Ref<HTMLSpanElement>;
 }): React.JSX.Element;
-interface QueueListProps extends Omit<React.ComponentProps<typeof ScrollArea.Root>, "className"> {
-  className?: string;
-}
+interface QueueListProps extends React.ComponentProps<typeof ScrollArea.Root> {}
 declare function QueueList({
   className,
   children,
@@ -115,9 +109,7 @@ declare function QueueList({
 }: QueueListProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface QueueSectionContentProps extends Omit<React.ComponentProps<typeof Collapsible.Panel>, "className" | "unstyled"> {
-  className?: string;
-}
+interface QueueSectionContentProps extends Omit<React.ComponentProps<typeof Collapsible.Panel>, "unstyled"> {}
 declare function QueueSectionContent({
   className,
   ref,
@@ -176,9 +168,7 @@ declare function QueueItemDescription({
   ref?: React.Ref<HTMLParagraphElement>;
 }): React.JSX.Element;
 interface QueueItemActionsProps extends React.HTMLAttributes<HTMLDivElement> {}
-interface QueueItemActionProps extends Omit<ButtonProps, "variant" | "color" | "size" | "className"> {
-  className?: string;
-}
+interface QueueItemActionProps extends Omit<ButtonProps, "variant" | "color" | "size"> {}
 declare function QueueItemActions({
   className,
   children,

package/dist/components/Queue.js

@@ -1,6 +1,6 @@
+import { t as cx } from "../class-names-BiMDVpUo.js";
 import { Collapsible } from "./Collapsible.js";
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { l as ChevronRightIcon, o as CheckIcon, p as DotIcon, v as FileIcon } from "../icons-CpfUer49.js";
+import { f as ChevronRightIcon, g as DotIcon, l as CheckIcon, x as FileIcon } from "../icons-CQJ-aMnI.js";
 import { Button } from "./Button.js";
 import { Badge } from "./Badge.js";
 import { ScrollArea } from "./ScrollArea.js";
@@ -90,7 +90,6 @@ function QueueSectionLabel({ className, children, count, label, icon, ref, ...pr
 			children !== void 0 && count !== void 0 ? /* @__PURE__ */ jsx(Badge, {
 				color: "neutral",
 				size: "sm",
-				className: "queue__section-count",
 				children: count
 			}) : null
 		]

package/dist/components/RadioGroup.d.ts

@@ -3,20 +3,15 @@ import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
 import { Radio as Radio$1 } from "@base-ui/react/radio";
 
 //#region src/components/RadioGroup.d.ts
-interface RadioGroupProps extends Omit<React.ComponentPropsWithRef<typeof RadioGroup$1>, "className"> {
-  className?: string;
+interface RadioGroupProps extends React.ComponentPropsWithRef<typeof RadioGroup$1> {
   /**
    * The orientation of the radio group.
    * @default 'vertical'
    */
   orientation?: "horizontal" | "vertical";
 }
-interface RadioProps extends Omit<React.ComponentPropsWithRef<typeof Radio$1.Root>, "className"> {
-  className?: string;
-}
-interface RadioIndicatorProps extends Omit<React.ComponentPropsWithRef<typeof Radio$1.Indicator>, "className"> {
-  className?: string;
-}
+interface RadioProps extends React.ComponentPropsWithRef<typeof Radio$1.Root> {}
+interface RadioIndicatorProps extends React.ComponentPropsWithRef<typeof Radio$1.Indicator> {}
 /**
  * A radio group component for selecting one option from a list.
  *

package/dist/components/RadioGroup.js

@@ -1,3 +1,4 @@
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
@@ -26,23 +27,19 @@ import { Radio as Radio$1 } from "@base-ui/react/radio";
 *
 * @see {@link https://base-ui.com/react/components/radio-group | Base UI Radio Group}
 */
-function RadioGroupRoot({ orientation = "vertical", className = "", ref, ...props }) {
+function RadioGroupRoot({ orientation = "vertical", className, ref, ...props }) {
 	return /* @__PURE__ */ jsx(RadioGroup$1, {
 		ref,
 		"data-slot": "radio-group",
-		className: [
-			"radio-group",
-			`radio-group--${orientation}`,
-			className
-		].filter(Boolean).join(" "),
+		className: mergeBaseClassName(["radio-group", `radio-group--${orientation}`].filter(Boolean).join(" "), className),
 		...props
 	});
 }
 /**
 * A single radio button within a RadioGroup.
 */
-function RadioRoot({ className = "", ref, ...props }) {
-	const classes = ["radio", className].filter(Boolean).join(" ");
+function RadioRoot({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["radio"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Radio$1.Root, {
 		ref,
 		"data-slot": "radio-group-item",
@@ -53,8 +50,8 @@ function RadioRoot({ className = "", ref, ...props }) {
 /**
 * The visual indicator for a Radio button.
 */
-function RadioIndicator({ className = "", ref, ...props }) {
-	const classes = ["radio__indicator", className].filter(Boolean).join(" ");
+function RadioIndicator({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["radio__indicator"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Radio$1.Indicator, {
 		ref,
 		"data-slot": "radio-group-indicator",