@mcp-b/react-components 0.12.0 → 0.14.0

package/dist/components/PromptInput.js

@@ -1,12 +1,12 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { C as MonitorIcon, E as PencilIcon, F as WarningIcon, L as XIcon, M as SpinnerIcon, N as SquareIcon, O as PlusIcon, h as FileIcon, i as ArrowUpIcon, o as ChevronDownIcon, w as PaperclipIcon } from "../icons-D2Q5n5C1.js";
+import { D as PencilIcon, F as StopIcon, L as WarningIcon, N as SpinnerIcon, P as SquareIcon, R as WrenchIcon, S as MicrophoneIcon, T as PaperclipIcon, h as FileIcon, i as ArrowUpIcon, k as PlusIcon, o as ChevronDownIcon, w as MonitorIcon, z as XIcon } from "../icons-Ba9THQKz.js";
 import { Button } from "./Button.js";
-import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
-import { t as AttachmentPreview } from "../attachment-preview-ChtC3HiU.js";
-import { Combobox, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxList, ComboboxSeparator } from "./Combobox.js";
-import { MenuContent, MenuItem, MenuPopup, MenuPortal, MenuPositioner, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuRoot, MenuTrigger } from "./Menu.js";
-import { Select, SelectContent, SelectItem, SelectPortal, SelectPositioner, SelectTrigger, SelectValue } from "./Select.js";
-import { Tab, TabPanel, TabsList } from "./Tabs.js";
+import { Tooltip } from "./Tooltip.js";
+import { t as AttachmentPreview } from "../attachment-preview-DIs50Q0h.js";
+import { Combobox } from "./Combobox.js";
+import { Menu } from "./Menu.js";
+import { Select } from "./Select.js";
+import { Tabs } from "./Tabs.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { getToolApproval, getToolInput, getToolOutput } from "@cloudflare/think/react";
@@ -450,6 +450,7 @@ function PromptInputButton({ className, tooltip, variant = "ghost", color = "neu
 	const resolvedSize = size ?? (React.Children.count(children) > 1 ? "xs" : "icon-xs");
 	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);
 	const button = /* @__PURE__ */ jsx(Button, {
 		ref,
 		type: "button",
@@ -458,14 +459,15 @@ function PromptInputButton({ className, tooltip, variant = "ghost", color = "neu
 		size: resolvedSize,
 		className: cx("prompt-input__button", className),
 		"aria-label": fallbackLabel,
+		"data-responsive-label": hasResponsiveLabel || void 0,
 		...props,
 		children
 	});
 	if (!tooltipConfig) return button;
-	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: button }), /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipPositioner, {
+	return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { render: button }), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
 		side: tooltipConfig.side,
 		sideOffset: 6,
-		children: /* @__PURE__ */ jsxs(TooltipPopup, { children: [/* @__PURE__ */ jsx("span", {
+		children: /* @__PURE__ */ jsxs(Tooltip.Popup, { children: [/* @__PURE__ */ jsx("span", {
 			className: "prompt-input__tooltip-content",
 			children: tooltipConfig.content
 		}), tooltipConfig.shortcut ? /* @__PURE__ */ jsx("kbd", {
@@ -474,11 +476,236 @@ function PromptInputButton({ className, tooltip, variant = "ghost", color = "neu
 		}) : null] })
 	}) })] });
 }
+/**
+* Voice-dictation control for PromptInput. Final upstream transcripts are
+* appended to the composer while interim text remains ephemeral.
+*/
+function PromptInputDictation({ voice, beforeStart, className, disabled, ref, ...props }) {
+	const controller = useOptionalPromptInputController();
+	const attachments = usePromptInputAttachments();
+	const buttonRef = React.useRef(null);
+	const committedTranscriptRef = React.useRef("");
+	const submitAfterStopRef = React.useRef(false);
+	const recordingStartedAtRef = React.useRef(null);
+	const [elapsedSeconds, setElapsedSeconds] = React.useState(0);
+	const [isStarting, setIsStarting] = React.useState(false);
+	const [startError, setStartError] = React.useState(null);
+	React.useImperativeHandle(ref, () => buttonRef.current, []);
+	React.useEffect(() => {
+		const transcript = voice.transcript;
+		if (!transcript) return;
+		const previous = committedTranscriptRef.current;
+		const addition = transcript.startsWith(previous) ? transcript.slice(previous.length).trim() : transcript.trim();
+		committedTranscriptRef.current = transcript;
+		if (!addition) return;
+		if (controller) {
+			controller.textInput.setInput(appendDictationTranscript(controller.textInput.value, addition));
+			return;
+		}
+		const textarea = buttonRef.current?.form?.querySelector("textarea[data-prompt-input-textarea=\"true\"]");
+		if (!textarea) return;
+		textarea.value = appendDictationTranscript(textarea.value, addition);
+		textarea.dispatchEvent(new Event("input", { bubbles: true }));
+	}, [controller, voice.transcript]);
+	React.useEffect(() => {
+		if (!voice.isListening) {
+			recordingStartedAtRef.current = null;
+			setElapsedSeconds(0);
+			if (submitAfterStopRef.current) {
+				submitAfterStopRef.current = false;
+				window.requestAnimationFrame(() => buttonRef.current?.form?.requestSubmit());
+			}
+			return;
+		}
+		recordingStartedAtRef.current ??= Date.now();
+		const updateElapsed = () => {
+			setElapsedSeconds(Math.floor((Date.now() - (recordingStartedAtRef.current ?? Date.now())) / 1e3));
+		};
+		updateElapsed();
+		const timer = window.setInterval(updateElapsed, 250);
+		return () => window.clearInterval(timer);
+	}, [voice.isListening]);
+	const error = startError ?? voice.error;
+	const listening = voice.isListening;
+	const label = listening ? "Stop dictation" : error ? "Retry dictation" : "Start dictation";
+	const status = error ? `Dictation failed: ${error}` : listening ? voice.interimTranscript ? "Listening. Speech detected." : "Listening for speech." : isStarting ? "Starting dictation." : "";
+	const level = Math.min(Math.max(voice.audioLevel, 0), 1);
+	const elapsed = formatDictationElapsed(elapsedSeconds);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(PromptInputButton, {
+			ref: buttonRef,
+			className: cx("prompt-input__dictation", className),
+			tooltip: {
+				content: label,
+				side: "top"
+			},
+			"aria-label": label,
+			"aria-hidden": listening || void 0,
+			"aria-pressed": listening,
+			"data-error": error ? "true" : void 0,
+			"data-listening": listening ? "true" : void 0,
+			"data-starting": isStarting ? "true" : void 0,
+			disabled: disabled || isStarting || listening,
+			tabIndex: listening ? -1 : void 0,
+			onClick: () => {
+				setStartError(null);
+				if (listening) {
+					voice.stop();
+					return;
+				}
+				setIsStarting(true);
+				Promise.resolve().then(() => beforeStart?.(voice)).then(() => voice.start()).catch((reason) => {
+					setStartError(reason instanceof Error ? reason.message : String(reason));
+				}).finally(() => setIsStarting(false));
+			},
+			...props,
+			children: /* @__PURE__ */ jsx("span", {
+				className: "prompt-input__dictation-icon",
+				style: { "--prompt-input-dictation-level": level },
+				"aria-hidden": "true",
+				children: isStarting ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : listening ? /* @__PURE__ */ jsx(StopIcon, {}) : /* @__PURE__ */ jsx(MicrophoneIcon, {})
+			})
+		}),
+		listening ? /* @__PURE__ */ jsxs("div", {
+			className: "prompt-input__recording",
+			role: "group",
+			"aria-label": "Voice recording controls",
+			children: [
+				/* @__PURE__ */ jsx(PromptInputButton, {
+					className: "prompt-input__recording-add",
+					tooltip: "Add photos or files",
+					onClick: () => attachments.openFileDialog(),
+					children: /* @__PURE__ */ jsx(PlusIcon, {})
+				}),
+				/* @__PURE__ */ jsx(PromptInputRecordingWaveform, {
+					active: true,
+					level
+				}),
+				/* @__PURE__ */ jsx("time", {
+					className: "prompt-input__recording-time",
+					dateTime: `PT${elapsedSeconds}S`,
+					children: elapsed
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					className: "prompt-input__recording-button",
+					type: "button",
+					variant: "normal",
+					color: "neutral",
+					size: "icon",
+					"aria-label": "Stop dictation",
+					onClick: () => voice.stop(),
+					children: /* @__PURE__ */ jsx(SquareIcon, { size: 12 })
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					className: "prompt-input__recording-button",
+					type: "button",
+					color: "primary",
+					size: "icon",
+					"aria-label": "Stop dictation and send",
+					onClick: () => {
+						submitAfterStopRef.current = true;
+						voice.stop();
+					},
+					children: /* @__PURE__ */ jsx(ArrowUpIcon, { size: 18 })
+				})
+			]
+		}) : null,
+		/* @__PURE__ */ jsx("span", {
+			className: "prompt-input__dictation-status",
+			role: "status",
+			"aria-live": "polite",
+			"aria-atomic": "true",
+			children: status
+		})
+	] });
+}
+/**
+* Scrolling canvas waveform adapted from ElevenLabs UI's Waveform component.
+* Cloudflare Voice already owns the microphone stream, so this renderer
+* consumes its upstream `audioLevel` instead of requesting a second stream.
+*/
+function PromptInputRecordingWaveform({ active, level }) {
+	const canvasRef = React.useRef(null);
+	const containerRef = React.useRef(null);
+	const historyRef = React.useRef([]);
+	const levelRef = React.useRef(level);
+	levelRef.current = level;
+	React.useEffect(() => {
+		const canvas = canvasRef.current;
+		const container = containerRef.current;
+		if (!canvas || !container) return;
+		const resize = () => {
+			const rect = container.getBoundingClientRect();
+			const dpr = window.devicePixelRatio || 1;
+			canvas.width = Math.max(1, Math.round(rect.width * dpr));
+			canvas.height = Math.max(1, Math.round(rect.height * dpr));
+			canvas.style.width = `${rect.width}px`;
+			canvas.style.height = `${rect.height}px`;
+			canvas.getContext("2d")?.setTransform(dpr, 0, 0, dpr, 0, 0);
+		};
+		const observer = new ResizeObserver(resize);
+		observer.observe(container);
+		resize();
+		const barWidth = 2;
+		const step = 4;
+		let animationFrame = 0;
+		let lastUpdate = 0;
+		let smoothedLevel = levelRef.current;
+		const draw = (time) => {
+			const context = canvas.getContext("2d");
+			const rect = canvas.getBoundingClientRect();
+			if (!context || rect.width === 0 || rect.height === 0) {
+				animationFrame = window.requestAnimationFrame(draw);
+				return;
+			}
+			const barCount = Math.max(1, Math.floor(rect.width / step));
+			if (active && time - lastUpdate >= 50) {
+				smoothedLevel += (levelRef.current - smoothedLevel) * .45;
+				historyRef.current.push(Math.max(.08, Math.min(1, smoothedLevel)));
+				if (historyRef.current.length > barCount) historyRef.current.shift();
+				lastUpdate = time;
+			}
+			context.clearRect(0, 0, rect.width, rect.height);
+			context.fillStyle = getComputedStyle(canvas).color;
+			const centerY = rect.height / 2;
+			for (let index = 0; index < barCount; index += 1) {
+				const historyIndex = historyRef.current.length - barCount + index;
+				const value = historyIndex >= 0 ? historyRef.current[historyIndex] ?? .08 : .08;
+				const barHeight = Math.max(2, value * rect.height * .9);
+				const x = index * step;
+				context.globalAlpha = .45 + value * .55;
+				context.beginPath();
+				context.roundRect(x, centerY - barHeight / 2, barWidth, barHeight, 1);
+				context.fill();
+			}
+			context.globalAlpha = 1;
+			animationFrame = window.requestAnimationFrame(draw);
+		};
+		animationFrame = window.requestAnimationFrame(draw);
+		return () => {
+			observer.disconnect();
+			window.cancelAnimationFrame(animationFrame);
+		};
+	}, [active]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className: "prompt-input__recording-waveform",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef })
+	});
+}
+function formatDictationElapsed(totalSeconds) {
+	return `${Math.floor(totalSeconds / 60)}:${(totalSeconds % 60).toString().padStart(2, "0")}`;
+}
+function appendDictationTranscript(current, transcript) {
+	if (!current) return transcript;
+	return `${current}${/\s$/u.test(current) ? "" : " "}${transcript}`;
+}
 function PromptInputActionMenu(props) {
-	return /* @__PURE__ */ jsx(MenuRoot, { ...props });
+	return /* @__PURE__ */ jsx(Menu.Root, { ...props });
 }
 function PromptInputActionMenuTrigger({ className, children, ...props }) {
-	return /* @__PURE__ */ jsx(MenuTrigger, {
+	return /* @__PURE__ */ jsx(Menu.Trigger, {
 		unstyled: true,
 		render: /* @__PURE__ */ jsx(PromptInputButton, {
 			className: cx("prompt-input__action-menu-trigger", className),
@@ -487,16 +714,30 @@ function PromptInputActionMenuTrigger({ className, children, ...props }) {
 		})
 	});
 }
-function PromptInputActionMenuContent({ className, children, tabIndex = 0, ...props }) {
-	return /* @__PURE__ */ jsx(MenuContent, {
-		tabIndex,
-		className: cx("prompt-input__action-menu", className),
-		...props,
-		children
-	});
+function PromptInputActionMenuContent({ anchor, positionMethod, side, sideOffset = 4, align, alignOffset, collisionBoundary, collisionPadding, sticky, arrowPadding, disableAnchorTracking, collisionAvoidance, className, children, tabIndex = 0, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+		anchor,
+		positionMethod,
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		collisionBoundary,
+		collisionPadding,
+		sticky,
+		arrowPadding,
+		disableAnchorTracking,
+		collisionAvoidance,
+		children: /* @__PURE__ */ jsx(Menu.Popup, {
+			tabIndex,
+			className: cx("prompt-input__action-menu", className),
+			...props,
+			children
+		})
+	}) });
 }
 function PromptInputActionMenuItem({ className, ...props }) {
-	return /* @__PURE__ */ jsx(MenuItem, {
+	return /* @__PURE__ */ jsx(Menu.Item, {
 		className: cx("prompt-input__action-menu-item", className),
 		...props
 	});
@@ -545,28 +786,47 @@ const PERMISSION_MODES = [{
 * whoever owns the approvals (`AgentChat` wires both ends).
 */
 function PromptInputPermissionSelector({ value, onValueChange, question = "How should agent actions be approved?" }) {
-	return /* @__PURE__ */ jsxs(MenuRoot, { children: [/* @__PURE__ */ jsx(MenuTrigger, { render: /* @__PURE__ */ jsxs(PromptInputButton, {
-		size: "xs",
-		className: "prompt-input__permissions-trigger",
-		"data-mode": value,
-		"aria-label": (PERMISSION_MODES.find((mode) => mode.value === value) ?? PERMISSION_MODES[0]).label,
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "prompt-input__permissions-current",
-			children: PERMISSION_MODES.map((mode) => /* @__PURE__ */ jsxs("span", {
-				className: "prompt-input__permissions-current-option",
-				"data-active": mode.value === value || void 0,
-				children: [mode.value === "bypass" ? /* @__PURE__ */ jsx(WarningIcon, { size: 14 }) : null, mode.label]
-			}, mode.value))
-		}), /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12 })]
-	}) }), /* @__PURE__ */ jsx(MenuPortal, { children: /* @__PURE__ */ jsx(MenuPositioner, { children: /* @__PURE__ */ jsxs(MenuPopup, {
+	const selected = PERMISSION_MODES.find((mode) => mode.value === value) ?? PERMISSION_MODES[0];
+	const trigger = /* @__PURE__ */ jsx(Menu.Trigger, {
+		unstyled: true,
+		render: /* @__PURE__ */ jsxs(PromptInputButton, {
+			size: "xs",
+			className: "prompt-input__permissions-trigger",
+			"data-mode": value,
+			"aria-label": selected.label,
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "prompt-input__permissions-icon",
+					children: value === "bypass" ? /* @__PURE__ */ jsx(WarningIcon, { size: 14 }) : /* @__PURE__ */ jsx(WrenchIcon, { size: 14 })
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "prompt-input__permissions-current",
+					children: PERMISSION_MODES.map((mode) => /* @__PURE__ */ jsx("span", {
+						className: "prompt-input__permissions-current-option",
+						"data-active": mode.value === value || void 0,
+						children: mode.label
+					}, mode.value))
+				}),
+				/* @__PURE__ */ jsx(ChevronDownIcon, {
+					className: "prompt-input__permissions-chevron",
+					size: 12
+				})
+			]
+		})
+	});
+	return /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { render: trigger }), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+		side: "top",
+		sideOffset: 6,
+		children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: selected.label })
+	}) })] }), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { children: /* @__PURE__ */ jsxs(Menu.Popup, {
 		className: "prompt-input__permissions-menu",
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "prompt-input__permissions-question",
 			children: question
-		}), /* @__PURE__ */ jsx(MenuRadioGroup, {
+		}), /* @__PURE__ */ jsx(Menu.RadioGroup, {
 			value,
 			onValueChange: (mode) => onValueChange(mode),
-			children: PERMISSION_MODES.map((mode) => /* @__PURE__ */ jsxs(MenuRadioItem, {
+			children: PERMISSION_MODES.map((mode) => /* @__PURE__ */ jsxs(Menu.RadioItem, {
 				value: mode.value,
 				closeOnClick: true,
 				className: "prompt-input__permissions-option",
@@ -579,7 +839,7 @@ function PromptInputPermissionSelector({ value, onValueChange, question = "How s
 						className: "prompt-input__permissions-option-description",
 						children: mode.description
 					})]
-				}), /* @__PURE__ */ jsx(MenuRadioItemIndicator, { className: "prompt-input__permissions-check" })]
+				}), /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { className: "prompt-input__permissions-check" })]
 			}, mode.value))
 		})]
 	}) }) })] });
@@ -832,14 +1092,6 @@ function PromptInputApproval({ part, approval: durableApproval, onRespond, think
 	});
 }
 const PromptInputSelect = Select;
-function PromptInputSelectTrigger(props) {
-	return /* @__PURE__ */ jsx(SelectTrigger, { ...props });
-}
-function PromptInputSelectContent(props) {
-	return /* @__PURE__ */ jsx(SelectPortal, { children: /* @__PURE__ */ jsx(SelectPositioner, { children: /* @__PURE__ */ jsx(SelectContent, { ...props }) }) });
-}
-const PromptInputSelectItem = SelectItem;
-const PromptInputSelectValue = SelectValue;
 const PromptInputHoverCardContext = React.createContext(null);
 function PromptInputHoverCard({ openDelay = 0, closeDelay = 0, className, children, ref, ...props }) {
 	const [open, setOpen] = React.useState(false);
@@ -896,9 +1148,9 @@ function PromptInputHoverCardContent({ className, ref, ...props }) {
 		...props
 	});
 }
-const PromptInputTabsList = TabsList;
-const PromptInputTab = Tab;
-const PromptInputTabBody = TabPanel;
+const PromptInputTabsList = Tabs.List;
+const PromptInputTab = Tabs.Tab;
+const PromptInputTabBody = Tabs.Panel;
 function PromptInputTabLabel({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("h3", {
 		ref,
@@ -914,18 +1166,18 @@ function PromptInputTabItem({ className, ref, ...props }) {
 	});
 }
 const PromptInputCommand = Combobox;
-const PromptInputCommandInput = ComboboxInput;
+const PromptInputCommandInput = Combobox.Input;
 function PromptInputCommandList({ className, ref, ...props }) {
-	return /* @__PURE__ */ jsx(ComboboxList, {
+	return /* @__PURE__ */ jsx(Combobox.List, {
 		ref,
 		className: cx("prompt-input__command-list", className),
 		...props
 	});
 }
-const PromptInputCommandEmpty = ComboboxEmpty;
-const PromptInputCommandGroup = ComboboxGroup;
-const PromptInputCommandItem = ComboboxItem;
-const PromptInputCommandSeparator = ComboboxSeparator;
+const PromptInputCommandEmpty = Combobox.Empty;
+const PromptInputCommandGroup = Combobox.Group;
+const PromptInputCommandItem = Combobox.Item;
+const PromptInputCommandSeparator = Combobox.Separator;
 function defaultSubmitIcon(status) {
 	switch (status) {
 		case "submitted": return /* @__PURE__ */ jsx(SpinnerIcon, { className: "prompt-input__submit-spinner" });
@@ -1017,4 +1269,4 @@ function createId() {
 	return globalThis.crypto?.randomUUID?.() ?? `prompt-input-${Date.now()}-${Math.random()}`;
 }
 //#endregion
-export { PromptInput, PromptInputActionAddAttachments, PromptInputActionAddScreenshot, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuItem, PromptInputActionMenuTrigger, PromptInputApproval, PromptInputAttachment, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputCommand, PromptInputCommandEmpty, PromptInputCommandGroup, PromptInputCommandInput, PromptInputCommandItem, PromptInputCommandList, PromptInputCommandSeparator, PromptInputFooter, PromptInputHeader, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardTrigger, PromptInputPermissionSelector, PromptInputProvider, PromptInputSelect, PromptInputSelectContent, PromptInputSelectItem, PromptInputSelectTrigger, PromptInputSelectValue, PromptInputSubmit, PromptInputTab, PromptInputTabBody, PromptInputTabItem, PromptInputTabLabel, PromptInputTabsList, PromptInputTextarea, PromptInputTools, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals, usePromptInputAttachments, usePromptInputController, useProviderAttachments };
+export { PromptInput, PromptInputActionAddAttachments, PromptInputActionAddScreenshot, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuItem, PromptInputActionMenuTrigger, PromptInputApproval, PromptInputAttachment, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputCommand, PromptInputCommandEmpty, PromptInputCommandGroup, PromptInputCommandInput, PromptInputCommandItem, PromptInputCommandList, PromptInputCommandSeparator, PromptInputDictation, PromptInputFooter, PromptInputHeader, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardTrigger, PromptInputPermissionSelector, PromptInputProvider, PromptInputSelect, PromptInputSubmit, PromptInputTab, PromptInputTabBody, PromptInputTabItem, PromptInputTabLabel, PromptInputTabsList, PromptInputTextarea, PromptInputTools, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals, usePromptInputAttachments, usePromptInputController, useProviderAttachments };

package/dist/components/Queue.d.ts

@@ -1,6 +1,6 @@
-import { CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps } from "./Collapsible.js";
-import { r as ButtonProps } from "../Button-Ct5I6aTu.js";
-import { ScrollAreaRootProps } from "./ScrollArea.js";
+import { Collapsible } from "./Collapsible.js";
+import { r as ButtonProps } from "../Button-FX_hpqxm.js";
+import { ScrollArea } from "./ScrollArea.js";
 import * as React from "react";
 
 //#region src/components/Queue.d.ts
@@ -61,7 +61,7 @@ declare function Queue({
 }: QueueProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface QueueSectionProps extends Omit<CollapsibleRootProps, "className" | "unstyled"> {
+interface QueueSectionProps extends Omit<React.ComponentProps<typeof Collapsible.Root>, "className" | "unstyled"> {
   className?: string;
 }
 /**
@@ -76,7 +76,7 @@ declare function QueueSection({
 }: QueueSectionProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface QueueSectionTriggerProps extends Omit<CollapsibleTriggerProps, "className" | "unstyled"> {
+interface QueueSectionTriggerProps extends Omit<React.ComponentProps<typeof Collapsible.Trigger>, "className" | "unstyled"> {
   className?: string;
 }
 declare function QueueSectionTrigger({
@@ -104,7 +104,7 @@ declare function QueueSectionLabel({
 }: QueueSectionLabelProps & {
   ref?: React.Ref<HTMLSpanElement>;
 }): React.JSX.Element;
-interface QueueListProps extends Omit<ScrollAreaRootProps, "className"> {
+interface QueueListProps extends Omit<React.ComponentProps<typeof ScrollArea.Root>, "className"> {
   className?: string;
 }
 declare function QueueList({
@@ -115,7 +115,7 @@ declare function QueueList({
 }: QueueListProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface QueueSectionContentProps extends Omit<CollapsiblePanelProps, "className" | "unstyled"> {
+interface QueueSectionContentProps extends Omit<React.ComponentProps<typeof Collapsible.Panel>, "className" | "unstyled"> {
   className?: string;
 }
 declare function QueueSectionContent({

package/dist/components/Queue.js

@@ -1,6 +1,6 @@
-import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
+import { Collapsible } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { a as CheckIcon, c as ChevronRightIcon, h as FileIcon, u as DotIcon } from "../icons-D2Q5n5C1.js";
+import { a as CheckIcon, c as ChevronRightIcon, h as FileIcon, u as DotIcon } from "../icons-Ba9THQKz.js";
 import { Button } from "./Button.js";
 import { Badge } from "./Badge.js";
 import { ScrollArea } from "./ScrollArea.js";
@@ -57,7 +57,7 @@ function Queue({ className, children, ref, ...props }) {
 * of QueueItem children.
 */
 function QueueSection({ className, defaultOpen = true, ref, ...props }) {
-	return /* @__PURE__ */ jsx(CollapsibleRoot, {
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
 		ref,
 		className: cx("queue__section", className),
 		defaultOpen,
@@ -66,7 +66,7 @@ function QueueSection({ className, defaultOpen = true, ref, ...props }) {
 	});
 }
 function QueueSectionTrigger({ className, children, ref, ...props }) {
-	return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
+	return /* @__PURE__ */ jsxs(Collapsible.Trigger, {
 		ref,
 		className: cx("queue__section-trigger", className),
 		...props,
@@ -97,7 +97,7 @@ function QueueSectionLabel({ className, children, count, label, icon, ref, ...pr
 	});
 }
 function QueueList({ className, children, ref, ...props }) {
-	return /* @__PURE__ */ jsxs(ScrollArea, {
+	return /* @__PURE__ */ jsxs(ScrollArea.Root, {
 		ref,
 		className: cx("queue__list", className),
 		...props,
@@ -117,7 +117,7 @@ function QueueList({ className, children, ref, ...props }) {
 	});
 }
 function QueueSectionContent({ className, ref, ...props }) {
-	return /* @__PURE__ */ jsx(CollapsiblePanel, {
+	return /* @__PURE__ */ jsx(Collapsible.Panel, {
 		ref,
 		className: cx("queue__section-content", className),
 		...props,

package/dist/components/RadioGroup.d.ts

@@ -40,7 +40,7 @@ interface RadioIndicatorProps extends Omit<React.ComponentPropsWithRef<typeof Ra
  *
  * @see {@link https://base-ui.com/react/components/radio-group | Base UI Radio Group}
  */
-declare function RadioGroup({
+declare function RadioGroupRoot({
   orientation,
   className,
   ref,
@@ -51,19 +51,13 @@ declare function RadioGroup({
 /**
  * A single radio button within a RadioGroup.
  */
-declare function Radio({
+declare function RadioRoot({
   className,
   ref,
   ...props
 }: RadioProps & {
   ref?: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element;
-declare function RadioGroupItem({
-  children,
-  ...props
-}: RadioProps & {
-  ref?: React.Ref<HTMLButtonElement>;
-}): React.JSX.Element;
 /**
  * The visual indicator for a Radio button.
  */
@@ -74,5 +68,12 @@ declare function RadioIndicator({
 }: RadioIndicatorProps & {
   ref?: React.Ref<HTMLSpanElement>;
 }): React.JSX.Element;
+declare const RadioGroup: {
+  Root: typeof RadioGroupRoot;
+};
+declare const Radio: {
+  Root: typeof RadioRoot;
+  Indicator: typeof RadioIndicator;
+};
 //#endregion
-export { Radio, RadioGroup, RadioGroupItem, RadioGroupProps, RadioIndicator, RadioIndicatorProps, RadioProps };
+export { Radio, RadioGroup, RadioGroupProps, RadioIndicatorProps, RadioProps };

package/dist/components/RadioGroup.js

@@ -26,7 +26,7 @@ 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 RadioGroup({ orientation = "vertical", className = "", ref, ...props }) {
+function RadioGroupRoot({ orientation = "vertical", className = "", ref, ...props }) {
 	return /* @__PURE__ */ jsx(RadioGroup$1, {
 		ref,
 		"data-slot": "radio-group",
@@ -41,7 +41,7 @@ function RadioGroup({ orientation = "vertical", className = "", ref, ...props })
 /**
 * A single radio button within a RadioGroup.
 */
-function Radio({ className = "", ref, ...props }) {
+function RadioRoot({ className = "", ref, ...props }) {
 	const classes = ["radio", className].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(Radio$1.Root, {
 		ref,
@@ -50,12 +50,6 @@ function Radio({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function RadioGroupItem({ children, ...props }) {
-	return /* @__PURE__ */ jsx(Radio, {
-		...props,
-		children: children ?? /* @__PURE__ */ jsx(RadioIndicator, {})
-	});
-}
 /**
 * The visual indicator for a Radio button.
 */
@@ -68,5 +62,10 @@ function RadioIndicator({ className = "", ref, ...props }) {
 		...props
 	});
 }
+const RadioGroup = { Root: RadioGroupRoot };
+const Radio = {
+	Root: RadioRoot,
+	Indicator: RadioIndicator
+};
 //#endregion
-export { Radio, RadioGroup, RadioGroupItem, RadioIndicator };
+export { Radio, RadioGroup };

package/dist/components/Reasoning.d.ts

@@ -1,4 +1,4 @@
-import { CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps } from "./Collapsible.js";
+import { Collapsible } from "./Collapsible.js";
 import * as React from "react";
 
 //#region src/components/Reasoning.d.ts
@@ -9,7 +9,7 @@ interface ReasoningContextValue {
   duration?: number;
 }
 declare function useReasoning(): ReasoningContextValue;
-interface ReasoningProps extends Omit<CollapsibleRootProps, "className" | "onOpenChange" | "unstyled"> {
+interface ReasoningProps extends Omit<React.ComponentProps<typeof Collapsible.Root>, "className" | "onOpenChange" | "unstyled"> {
   className?: string;
   /**
    * Whether the model is currently generating reasoning. When true the
@@ -52,7 +52,7 @@ declare function Reasoning({
 }: ReasoningProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface ReasoningTriggerProps extends Omit<CollapsibleTriggerProps, "className" | "unstyled"> {
+interface ReasoningTriggerProps extends Omit<React.ComponentProps<typeof Collapsible.Trigger>, "className" | "unstyled"> {
   className?: string;
   getThinkingMessage?: (isStreaming: boolean, duration?: number) => React.ReactNode;
 }
@@ -69,7 +69,7 @@ declare function ReasoningTrigger({
 }: ReasoningTriggerProps & {
   ref?: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element;
-interface ReasoningContentProps extends Omit<CollapsiblePanelProps, "className" | "unstyled"> {
+interface ReasoningContentProps extends Omit<React.ComponentProps<typeof Collapsible.Panel>, "className" | "unstyled"> {
   className?: string;
 }
 /**