@mcp-b/react-components 0.12.0 → 0.13.0

package/dist/components/PricingPage.js

@@ -1,16 +1,16 @@
-import { Accordion, AccordionItem, AccordionPanel, AccordionTrigger } from "./Accordion.js";
+import { Accordion } from "./Accordion.js";
 import { Separator } from "./Separator.js";
 import { Button } from "./Button.js";
-import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
-import { AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogDescription, AlertDialogPopup, AlertDialogPortal, AlertDialogTitle } from "./AlertDialog.js";
+import { Tooltip } from "./Tooltip.js";
+import { AlertDialog } from "./AlertDialog.js";
 import { Badge } from "./Badge.js";
-import { Slider, SliderControl, SliderIndicator, SliderThumb, SliderTrack } from "./Slider.js";
+import { Slider } from "./Slider.js";
 import { Card } from "./Card.js";
 import { Checkbox } from "./Checkbox.js";
-import { Switch, SwitchThumb } from "./Switch.js";
+import { Switch } from "./Switch.js";
 import { Label } from "./Label.js";
-import { ToggleGroup, ToggleGroupItem } from "./ToggleGroup.js";
-import { Progress, ProgressIndicator, ProgressTrack } from "./Progress.js";
+import { ToggleGroup } from "./ToggleGroup.js";
+import { Progress } from "./Progress.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/PricingPage.tsx
@@ -226,11 +226,12 @@ function PricingPage({ title = "Simple, transparent pricing", subtitle, plans, f
 						className: "pricing-page__billing-toggle",
 						children: [!billingToggleVariant && /* @__PURE__ */ jsxs("div", {
 							className: "pricing-page__toggle-options",
-							children: [/* @__PURE__ */ jsx(Checkbox, {
+							children: [/* @__PURE__ */ jsx(Checkbox.Root, {
 								checked: useSwitchToggle,
 								onCheckedChange: (checked) => setUseSwitchToggle(!!checked),
 								id: "toggle-type",
-								"aria-label": "Use switch style"
+								"aria-label": "Use switch style",
+								children: /* @__PURE__ */ jsx(Checkbox.Indicator, {})
 							}), /* @__PURE__ */ jsx(Label, {
 								htmlFor: "toggle-type",
 								style: { fontSize: "0.75rem" },
@@ -243,11 +244,11 @@ function PricingPage({ title = "Simple, transparent pricing", subtitle, plans, f
 									className: `pricing-page__period-label ${!isYearly ? "pricing-page__period-label--active" : ""}`,
 									children: "Monthly"
 								}),
-								/* @__PURE__ */ jsx(Switch, {
+								/* @__PURE__ */ jsx(Switch.Root, {
 									checked: isYearly,
 									onCheckedChange: (checked) => setBillingPeriod(checked ? "yearly" : "monthly"),
 									"aria-label": "Toggle yearly billing",
-									children: /* @__PURE__ */ jsx(SwitchThumb, {})
+									children: /* @__PURE__ */ jsx(Switch.Thumb, {})
 								}),
 								/* @__PURE__ */ jsxs("span", {
 									className: `pricing-page__period-label ${isYearly ? "pricing-page__period-label--active" : ""}`,
@@ -263,13 +264,13 @@ function PricingPage({ title = "Simple, transparent pricing", subtitle, plans, f
 									})]
 								})
 							]
-						}) : /* @__PURE__ */ jsxs(ToggleGroup, {
+						}) : /* @__PURE__ */ jsxs(ToggleGroup.Root, {
 							value: [billingPeriod],
 							onValueChange: (v) => v.length > 0 && setBillingPeriod(v[0]),
-							children: [/* @__PURE__ */ jsx(ToggleGroupItem, {
+							children: [/* @__PURE__ */ jsx(ToggleGroup.Item, {
 								value: "monthly",
 								children: "Monthly"
-							}), /* @__PURE__ */ jsxs(ToggleGroupItem, {
+							}), /* @__PURE__ */ jsxs(ToggleGroup.Item, {
 								value: "yearly",
 								children: ["Yearly", /* @__PURE__ */ jsxs(Badge, {
 									color: "success",
@@ -356,11 +357,11 @@ function PricingPage({ title = "Simple, transparent pricing", subtitle, plans, f
 											]
 										})]
 									}),
-									feature.tooltip && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+									feature.tooltip && /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
 										className: "pricing-page__feature-info",
 										"aria-label": `More information about ${feature.name}`,
 										children: /* @__PURE__ */ jsx(InfoIcon, {})
-									}), /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipPositioner, { children: /* @__PURE__ */ jsx(TooltipPopup, { children: feature.tooltip }) }) })] })
+									}), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, { children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: feature.tooltip }) }) })] })
 								]
 							}, index))
 						})
@@ -378,7 +379,7 @@ function PricingPage({ title = "Simple, transparent pricing", subtitle, plans, f
 						className: "pricing-page__calculator-description",
 						children: ["Adjust the slider to see pricing based on your expected ", usageUnit]
 					}),
-					/* @__PURE__ */ jsxs(Slider, {
+					/* @__PURE__ */ jsxs(Slider.Root, {
 						value: usage,
 						onValueChange: (v) => setUsage(Array.isArray(v) ? v[0] : v),
 						min: 0,
@@ -393,7 +394,7 @@ function PricingPage({ title = "Simple, transparent pricing", subtitle, plans, f
 									children: formatNumber(usage)
 								})]
 							}),
-							/* @__PURE__ */ jsx(SliderControl, { children: /* @__PURE__ */ jsxs(SliderTrack, { children: [/* @__PURE__ */ jsx(SliderIndicator, {}), /* @__PURE__ */ jsx(SliderThumb, { "aria-label": `Monthly ${usageUnit}` })] }) }),
+							/* @__PURE__ */ jsx(Slider.Control, { children: /* @__PURE__ */ jsxs(Slider.Track, { children: [/* @__PURE__ */ jsx(Slider.Indicator, {}), /* @__PURE__ */ jsx(Slider.Thumb, { "aria-label": `Monthly ${usageUnit}` })] }) }),
 							/* @__PURE__ */ jsxs("div", {
 								className: "pricing-page__calculator-range",
 								children: [/* @__PURE__ */ jsx("span", { children: "0" }), /* @__PURE__ */ jsx("span", { children: formatNumber(maxUsage) })]
@@ -436,11 +437,11 @@ function PricingPage({ title = "Simple, transparent pricing", subtitle, plans, f
 											"/mo"
 										]
 									})]
-								}), /* @__PURE__ */ jsx(Progress, {
+								}), /* @__PURE__ */ jsx(Progress.Root, {
 									"aria-label": `Progress toward ${tier.label}`,
 									value: isActive ? 100 : tier.limit > 0 ? usage / tier.limit * 100 : 0,
 									color: isActive ? "success" : "primary",
-									children: /* @__PURE__ */ jsx(ProgressTrack, { children: /* @__PURE__ */ jsx(ProgressIndicator, {}) })
+									children: /* @__PURE__ */ jsx(Progress.Track, { children: /* @__PURE__ */ jsx(Progress.Indicator, {}) })
 								})]
 							}, index);
 						})
@@ -452,20 +453,20 @@ function PricingPage({ title = "Simple, transparent pricing", subtitle, plans, f
 				children: [/* @__PURE__ */ jsx("h2", {
 					className: "pricing-page__faq-title",
 					children: "Frequently Asked Questions"
-				}), /* @__PURE__ */ jsx(Accordion, {
+				}), /* @__PURE__ */ jsx(Accordion.Root, {
 					className: "pricing-page__faq-accordion",
-					children: faq.map((item, index) => /* @__PURE__ */ jsxs(AccordionItem, {
+					children: faq.map((item, index) => /* @__PURE__ */ jsxs(Accordion.Item, {
 						value: `faq-${index}`,
-						children: [/* @__PURE__ */ jsx(AccordionTrigger, { children: item.question }), /* @__PURE__ */ jsx(AccordionPanel, { children: /* @__PURE__ */ jsx("p", { children: item.answer }) })]
+						children: [/* @__PURE__ */ jsx(Accordion.Header, { children: /* @__PURE__ */ jsx(Accordion.Trigger, { children: item.question }) }), /* @__PURE__ */ jsx(Accordion.Panel, { children: /* @__PURE__ */ jsx("p", { children: item.answer }) })]
 					}, index))
 				})]
 			}),
-			/* @__PURE__ */ jsx(AlertDialog, {
+			/* @__PURE__ */ jsx(AlertDialog.Root, {
 				open: confirmDialogOpen,
 				onOpenChange: setConfirmDialogOpen,
-				children: /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogBackdrop, {}), /* @__PURE__ */ jsxs(AlertDialogPopup, { children: [
-					/* @__PURE__ */ jsx(AlertDialogTitle, { children: isSubscribed && selectedPlan ? `${getSwitchDirection(selectedPlan) === "upgrade" ? "Upgrade" : getSwitchDirection(selectedPlan) === "downgrade" ? "Downgrade" : "Switch"} to ${selectedPlan.name}?` : `Subscribe to ${selectedPlan?.name}?` }),
-					/* @__PURE__ */ jsx(AlertDialogDescription, { children: isSubscribed && selectedPlan ? getSwitchDirection(selectedPlan) === "downgrade" ? `You'll be downgraded to the ${selectedPlan.name} plan. A prorated credit will be applied to your next invoice.` : `You'll be upgraded to the ${selectedPlan.name} plan. The prorated difference will be added to your next invoice.` : `You're about to subscribe to the ${selectedPlan?.name} plan at $${selectedPlan ? getPrice(selectedPlan) : 0}/month${isYearly ? " (billed yearly)" : ""}.` }),
+				children: /* @__PURE__ */ jsxs(AlertDialog.Portal, { children: [/* @__PURE__ */ jsx(AlertDialog.Backdrop, {}), /* @__PURE__ */ jsx(AlertDialog.Viewport, { children: /* @__PURE__ */ jsxs(AlertDialog.Popup, { children: [
+					/* @__PURE__ */ jsx(AlertDialog.Title, { children: isSubscribed && selectedPlan ? `${getSwitchDirection(selectedPlan) === "upgrade" ? "Upgrade" : getSwitchDirection(selectedPlan) === "downgrade" ? "Downgrade" : "Switch"} to ${selectedPlan.name}?` : `Subscribe to ${selectedPlan?.name}?` }),
+					/* @__PURE__ */ jsx(AlertDialog.Description, { children: isSubscribed && selectedPlan ? getSwitchDirection(selectedPlan) === "downgrade" ? `You'll be downgraded to the ${selectedPlan.name} plan. A prorated credit will be applied to your next invoice.` : `You'll be upgraded to the ${selectedPlan.name} plan. The prorated difference will be added to your next invoice.` : `You're about to subscribe to the ${selectedPlan?.name} plan at $${selectedPlan ? getPrice(selectedPlan) : 0}/month${isYearly ? " (billed yearly)" : ""}.` }),
 					selectedPlan && /* @__PURE__ */ jsxs("div", {
 						className: "pricing-page__confirm-summary",
 						children: [/* @__PURE__ */ jsxs("div", {
@@ -487,7 +488,7 @@ function PricingPage({ title = "Simple, transparent pricing", subtitle, plans, f
 					}),
 					/* @__PURE__ */ jsxs("div", {
 						className: "pricing-page__confirm-actions",
-						children: [/* @__PURE__ */ jsx(AlertDialogClose, {
+						children: [/* @__PURE__ */ jsx(AlertDialog.Close, {
 							disabled: switching,
 							children: "Cancel"
 						}), /* @__PURE__ */ jsx(Button, {
@@ -497,7 +498,7 @@ function PricingPage({ title = "Simple, transparent pricing", subtitle, plans, f
 							children: switching ? "Switching…" : isSubscribed && selectedPlan ? `Confirm ${getSwitchDirection(selectedPlan) === "upgrade" ? "Upgrade" : getSwitchDirection(selectedPlan) === "downgrade" ? "Downgrade" : "Switch"}` : "Confirm"
 						})]
 					})
-				] })] })
+				] }) })] })
 			})
 		]
 	});

package/dist/components/Progress.d.ts

@@ -31,10 +31,9 @@ interface ProgressIndicatorProps extends Omit<React.ComponentPropsWithRef<typeof
  *
  * @see {@link https://base-ui.com/react/components/progress | Base UI Progress}
  */
-declare function Progress({
+declare function ProgressRoot({
   color,
   className,
-  children,
   ref,
   ...props
 }: ProgressProps & {
@@ -54,5 +53,10 @@ declare function ProgressIndicator({
 }: ProgressIndicatorProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
+declare const Progress: {
+  Root: typeof ProgressRoot;
+  Track: typeof ProgressTrack;
+  Indicator: typeof ProgressIndicator;
+};
 //#endregion
-export { Progress, ProgressColor, ProgressIndicator, ProgressIndicatorProps, ProgressProps, ProgressTrack, ProgressTrackProps };
+export { Progress, ProgressColor, ProgressIndicatorProps, ProgressProps, ProgressTrackProps };

package/dist/components/Progress.js

@@ -16,7 +16,7 @@ import { Progress as Progress$1 } from "@base-ui/react/progress";
 *
 * @see {@link https://base-ui.com/react/components/progress | Base UI Progress}
 */
-function Progress({ color = "primary", className = "", children, ref, ...props }) {
+function ProgressRoot({ color = "primary", className = "", ref, ...props }) {
 	const classes = [
 		"progress",
 		`progress--${color}`,
@@ -26,14 +26,14 @@ function Progress({ color = "primary", className = "", children, ref, ...props }
 		ref,
 		"data-slot": "progress",
 		className: classes,
-		...props,
-		children: children ?? /* @__PURE__ */ jsx(ProgressTrack, { children: /* @__PURE__ */ jsx(ProgressIndicator, {}) })
+		...props
 	});
 }
 function ProgressTrack({ className = "", ref, ...props }) {
 	const classes = ["progress__track", className].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(Progress$1.Track, {
 		ref,
+		"data-slot": "progress-track",
 		className: classes,
 		...props
 	});
@@ -47,5 +47,10 @@ function ProgressIndicator({ className = "", ref, ...props }) {
 		...props
 	});
 }
+const Progress = {
+	Root: ProgressRoot,
+	Track: ProgressTrack,
+	Indicator: ProgressIndicator
+};
 //#endregion
-export { Progress, ProgressIndicator, ProgressTrack };
+export { Progress };

package/dist/components/PromptInput.d.ts

@@ -1,2 +1,2 @@
-import { $ as PromptInputMessage, A as PromptInputCommandEmptyProps, At as PromptInputToolsProps, B as PromptInputCommandSeparator, C as PromptInputBody, Ct as PromptInputTabLabelProps, D as PromptInputButtonTooltip, Dt as PromptInputTextarea, E as PromptInputButtonProps, Et as PromptInputTabsListProps, F as PromptInputCommandItem, Ft as getApprovalStateKey, G as PromptInputHeader, H as PromptInputControllerProps, I as PromptInputCommandItemProps, It as getPendingToolApprovals, J as PromptInputHoverCardContent, K as PromptInputHeaderProps, L as PromptInputCommandList, Lt as usePromptInputAttachments, M as PromptInputCommandGroupProps, Mt as TextInputContext, N as PromptInputCommandInput, Nt as TooltipSide, O as PromptInputCommand, Ot as PromptInputTextareaProps, P as PromptInputCommandInputProps, Pt as getApprovalRequestId, Q as PromptInputHoverCardTriggerProps, R as PromptInputCommandListProps, Rt as usePromptInputController, S as PromptInputAttachmentsProps, St as PromptInputTabLabel, T as PromptInputButton, Tt as PromptInputTabsList, U as PromptInputFooter, V as PromptInputCommandSeparatorProps, W as PromptInputFooterProps, X as PromptInputHoverCardProps, Y as PromptInputHoverCardContentProps, Z as PromptInputHoverCardTrigger, _ as PromptInputApproval, _t as PromptInputTab, a as PromptInputActionAddAttachments, at as PromptInputSelect, b as PromptInputAttachmentProps, bt as PromptInputTabItem, c as PromptInputActionAddScreenshotProps, ct as PromptInputSelectItem, d as PromptInputActionMenuContentProps, dt as PromptInputSelectTrigger, et as PromptInputPermissionSelector, f as PromptInputActionMenuItem, ft as PromptInputSelectTriggerProps, g as PromptInputActionMenuTriggerProps, gt as PromptInputSubmitProps, h as PromptInputActionMenuTrigger, ht as PromptInputSubmit, i as PromptInput, it as PromptInputProviderProps, j as PromptInputCommandGroup, jt as PromptInputTooltipConfig, k as PromptInputCommandEmpty, kt as PromptInputTools, l as PromptInputActionMenu, lt as PromptInputSelectItemProps, m as PromptInputActionMenuProps, mt as PromptInputSelectValueProps, n as PendingToolApproval, nt as PromptInputProps, o as PromptInputActionAddAttachmentsProps, ot as PromptInputSelectContent, p as PromptInputActionMenuItemProps, pt as PromptInputSelectValue, q as PromptInputHoverCard, r as PermissionMode, rt as PromptInputProvider, s as PromptInputActionAddScreenshot, st as PromptInputSelectContentProps, t as AttachmentsContext, tt as PromptInputPermissionSelectorProps, u as PromptInputActionMenuContent, ut as PromptInputSelectProps, v as PromptInputApprovalProps, vt as PromptInputTabBody, w as PromptInputBodyProps, wt as PromptInputTabProps, x as PromptInputAttachments, xt as PromptInputTabItemProps, y as PromptInputAttachment, yt as PromptInputTabBodyProps, z as PromptInputCommandProps, zt as useProviderAttachments } from "../PromptInput-IyM6ZETj.js";
-export { AttachmentsContext, PendingToolApproval, PermissionMode, PromptInput, PromptInputActionAddAttachments, PromptInputActionAddAttachmentsProps, PromptInputActionAddScreenshot, PromptInputActionAddScreenshotProps, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuContentProps, PromptInputActionMenuItem, PromptInputActionMenuItemProps, PromptInputActionMenuProps, PromptInputActionMenuTrigger, PromptInputActionMenuTriggerProps, PromptInputApproval, PromptInputApprovalProps, PromptInputAttachment, PromptInputAttachmentProps, PromptInputAttachments, PromptInputAttachmentsProps, PromptInputBody, PromptInputBodyProps, PromptInputButton, PromptInputButtonProps, PromptInputButtonTooltip, PromptInputCommand, PromptInputCommandEmpty, PromptInputCommandEmptyProps, PromptInputCommandGroup, PromptInputCommandGroupProps, PromptInputCommandInput, PromptInputCommandInputProps, PromptInputCommandItem, PromptInputCommandItemProps, PromptInputCommandList, PromptInputCommandListProps, PromptInputCommandProps, PromptInputCommandSeparator, PromptInputCommandSeparatorProps, PromptInputControllerProps, PromptInputFooter, PromptInputFooterProps, PromptInputHeader, PromptInputHeaderProps, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardContentProps, PromptInputHoverCardProps, PromptInputHoverCardTrigger, PromptInputHoverCardTriggerProps, PromptInputMessage, PromptInputPermissionSelector, PromptInputPermissionSelectorProps, PromptInputProps, PromptInputProvider, PromptInputProviderProps, PromptInputSelect, PromptInputSelectContent, PromptInputSelectContentProps, PromptInputSelectItem, PromptInputSelectItemProps, PromptInputSelectProps, PromptInputSelectTrigger, PromptInputSelectTriggerProps, PromptInputSelectValue, PromptInputSelectValueProps, PromptInputSubmit, PromptInputSubmitProps, PromptInputTab, PromptInputTabBody, PromptInputTabBodyProps, PromptInputTabItem, PromptInputTabItemProps, PromptInputTabLabel, PromptInputTabLabelProps, PromptInputTabProps, PromptInputTabsList, PromptInputTabsListProps, PromptInputTextarea, PromptInputTextareaProps, PromptInputTools, PromptInputToolsProps, PromptInputTooltipConfig, TextInputContext, TooltipSide, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals, usePromptInputAttachments, usePromptInputController, useProviderAttachments };
+import { $ as PromptInputHoverCardTrigger, A as PromptInputCommandEmptyProps, At as getPendingToolApprovals, B as PromptInputCommandSeparator, C as PromptInputBody, Ct as PromptInputTools, D as PromptInputButtonTooltip, Dt as TooltipSide, E as PromptInputButtonProps, Et as TextInputContext, F as PromptInputCommandItem, G as PromptInputFooter, H as PromptInputControllerProps, I as PromptInputCommandItemProps, J as PromptInputHeaderProps, K as PromptInputFooterProps, L as PromptInputCommandList, M as PromptInputCommandGroupProps, Mt as usePromptInputController, N as PromptInputCommandInput, Nt as useProviderAttachments, O as PromptInputCommand, Ot as getApprovalRequestId, P as PromptInputCommandInputProps, Q as PromptInputHoverCardProps, R as PromptInputCommandListProps, S as PromptInputAttachmentsProps, St as PromptInputTextareaProps, T as PromptInputButton, Tt as PromptInputTooltipConfig, U as PromptInputDictation, V as PromptInputCommandSeparatorProps, W as PromptInputDictationProps, X as PromptInputHoverCardContent, Y as PromptInputHoverCard, Z as PromptInputHoverCardContentProps, _ as PromptInputApproval, _t as PromptInputTabLabelProps, a as PromptInputActionAddAttachments, at as PromptInputProvider, b as PromptInputAttachmentProps, bt as PromptInputTabsListProps, c as PromptInputActionAddScreenshotProps, ct as PromptInputSelectProps, d as PromptInputActionMenuContentProps, dt as PromptInputTab, et as PromptInputHoverCardTriggerProps, f as PromptInputActionMenuItem, ft as PromptInputTabBody, g as PromptInputActionMenuTriggerProps, gt as PromptInputTabLabel, h as PromptInputActionMenuTrigger, ht as PromptInputTabItemProps, i as PromptInput, it as PromptInputProps, j as PromptInputCommandGroup, jt as usePromptInputAttachments, k as PromptInputCommandEmpty, kt as getApprovalStateKey, l as PromptInputActionMenu, lt as PromptInputSubmit, m as PromptInputActionMenuProps, mt as PromptInputTabItem, n as PendingToolApproval, nt as PromptInputPermissionSelector, o as PromptInputActionAddAttachmentsProps, ot as PromptInputProviderProps, p as PromptInputActionMenuItemProps, pt as PromptInputTabBodyProps, q as PromptInputHeader, r as PermissionMode, rt as PromptInputPermissionSelectorProps, s as PromptInputActionAddScreenshot, st as PromptInputSelect, t as AttachmentsContext, tt as PromptInputMessage, u as PromptInputActionMenuContent, ut as PromptInputSubmitProps, v as PromptInputApprovalProps, vt as PromptInputTabProps, w as PromptInputBodyProps, wt as PromptInputToolsProps, x as PromptInputAttachments, xt as PromptInputTextarea, y as PromptInputAttachment, yt as PromptInputTabsList, z as PromptInputCommandProps } from "../PromptInput-p5KmOmt1.js";
+export { AttachmentsContext, PendingToolApproval, PermissionMode, PromptInput, PromptInputActionAddAttachments, PromptInputActionAddAttachmentsProps, PromptInputActionAddScreenshot, PromptInputActionAddScreenshotProps, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuContentProps, PromptInputActionMenuItem, PromptInputActionMenuItemProps, PromptInputActionMenuProps, PromptInputActionMenuTrigger, PromptInputActionMenuTriggerProps, PromptInputApproval, PromptInputApprovalProps, PromptInputAttachment, PromptInputAttachmentProps, PromptInputAttachments, PromptInputAttachmentsProps, PromptInputBody, PromptInputBodyProps, PromptInputButton, PromptInputButtonProps, PromptInputButtonTooltip, PromptInputCommand, PromptInputCommandEmpty, PromptInputCommandEmptyProps, PromptInputCommandGroup, PromptInputCommandGroupProps, PromptInputCommandInput, PromptInputCommandInputProps, PromptInputCommandItem, PromptInputCommandItemProps, PromptInputCommandList, PromptInputCommandListProps, PromptInputCommandProps, PromptInputCommandSeparator, PromptInputCommandSeparatorProps, PromptInputControllerProps, PromptInputDictation, PromptInputDictationProps, PromptInputFooter, PromptInputFooterProps, PromptInputHeader, PromptInputHeaderProps, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardContentProps, PromptInputHoverCardProps, PromptInputHoverCardTrigger, PromptInputHoverCardTriggerProps, PromptInputMessage, PromptInputPermissionSelector, PromptInputPermissionSelectorProps, PromptInputProps, PromptInputProvider, PromptInputProviderProps, PromptInputSelect, PromptInputSelectProps, PromptInputSubmit, PromptInputSubmitProps, PromptInputTab, PromptInputTabBody, PromptInputTabBodyProps, PromptInputTabItem, PromptInputTabItemProps, PromptInputTabLabel, PromptInputTabLabelProps, PromptInputTabProps, PromptInputTabsList, PromptInputTabsListProps, PromptInputTextarea, PromptInputTextareaProps, PromptInputTools, PromptInputToolsProps, PromptInputTooltipConfig, TextInputContext, TooltipSide, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals, usePromptInputAttachments, usePromptInputController, useProviderAttachments };

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, 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";
@@ -462,10 +462,10 @@ function PromptInputButton({ className, tooltip, variant = "ghost", color = "neu
 		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 +474,86 @@ 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, className, disabled, ref, ...props }) {
+	const controller = useOptionalPromptInputController();
+	const buttonRef = React.useRef(null);
+	const committedTranscriptRef = React.useRef("");
+	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]);
+	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);
+	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-pressed": listening,
+		"data-error": error ? "true" : void 0,
+		"data-listening": listening ? "true" : void 0,
+		"data-starting": isStarting ? "true" : void 0,
+		disabled: disabled || isStarting,
+		onClick: () => {
+			setStartError(null);
+			if (listening) {
+				voice.stop();
+				return;
+			}
+			setIsStarting(true);
+			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, {})
+		})
+	}), /* @__PURE__ */ jsx("span", {
+		className: "prompt-input__dictation-status",
+		role: "status",
+		"aria-live": "polite",
+		"aria-atomic": "true",
+		children: status
+	})] });
+}
+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 +562,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 +634,32 @@ 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];
+	return /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__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-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(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 +672,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 +925,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 +981,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 +999,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 +1102,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,