@mcp-b/react-components 0.19.0 → 0.20.1

package/dist/{AgentChat-ClxViuUM.d.ts → AgentChat-C-ZyXbJz.d.ts}

@@ -1,5 +1,5 @@
 import { i as AgentMessageRenderPartContext } from "./AgentMessageParts-CyD2UB3V.js";
-import { $ as PromptInputDictationProps, A as PromptInputCommandDefinition, X as PromptInputContextSelectorProps, gt as PromptInputReference, n as PermissionMode, ut as PromptInputMessage } from "./PromptInput-Bdh9pqlo.js";
+import { $ as PromptInputDictationProps, A as PromptInputCommandDefinition, X as PromptInputContextSelectorProps, gt as PromptInputReference, n as PermissionMode, ut as PromptInputMessage } from "./PromptInput-Cq-8RoXD.js";
 import * as React from "react";
 import { ChatAddToolApproveResponseFunction, ChatStatus, UIMessage } from "ai";
 import { PendingApproval, Think } from "@cloudflare/think";
@@ -140,6 +140,8 @@ interface AgentChatProps<MessageT extends UIMessage = UIMessage> {
   onApprovalResponse?: ChatAddToolApproveResponseFunction;
   /** Whole upstream Think stub used to resolve paused and durable execution approvals. */
   thinkStub?: AgentStub<Think>;
+  /** Disable approval scanning, automatic responses, cards, and composer controls. */
+  approvalsEnabled?: boolean;
   /** Parent-owned approval policy. Omit to keep AgentChat's session-local mode. */
   permissionModeControl?: PermissionModeControl;
   /** Called after a Think approve/reject RPC settles, including when it rejects. */
@@ -216,6 +218,7 @@ declare function AgentChat<MessageT extends UIMessage = UIMessage>({
   onEditAndResend,
   onApprovalResponse,
   thinkStub,
+  approvalsEnabled,
   permissionModeControl,
   onExecutionSettled,
   pendingApprovals: durableApprovals,

package/dist/{Button-DLGzHsjc.d.ts → Button-yRInko9u.d.ts}

@@ -92,7 +92,6 @@ declare function Button$1({
   size,
   iconOnly,
   className,
-  nativeButton,
   ref,
   ...props
 }: ButtonProps & {

package/dist/{CodeBlock-gV4kZeCI.d.ts → CodeBlock-Bbls1CnA.d.ts}

@@ -1,5 +1,5 @@
 import { m as SelectProps, t as Select } from "./Select-B_13gg_J.js";
-import { t as CopyButtonProps } from "./copy-button-D7aAYA-2.js";
+import { t as CopyButtonProps } from "./copy-button-BrvQ7z4W.js";
 import * as React from "react";
 import { BundledLanguage, ThemedToken } from "shiki";
 

package/dist/{Combobox-CYc37s5l.d.ts → Combobox-xEEF6fUb.d.ts}

@@ -32,7 +32,6 @@ declare function ComboboxPositioner({
 }): React.JSX.Element;
 declare function ComboboxPopup({
   className,
-  tabIndex,
   ref,
   ...props
 }: React.ComponentPropsWithRef<typeof Combobox.Popup> & {

package/dist/{PromptInput-Bdh9pqlo.d.ts → PromptInput-Cq-8RoXD.d.ts}

@@ -1,7 +1,7 @@
-import { r as ButtonProps } from "./Button-DLGzHsjc.js";
+import { r as ButtonProps } from "./Button-yRInko9u.js";
 import { _ as SelectSeparatorProps, a as SelectIconProps, c as SelectItemTextProps, d as SelectPopupProps, g as SelectScrollUpArrowProps, h as SelectScrollDownArrowProps, i as SelectGroupProps, l as SelectLabelProps, m as SelectProps, n as SelectBackdropProps, o as SelectItemIndicatorProps, p as SelectPositionerProps, r as SelectGroupLabelProps, s as SelectItemProps, t as Select, u as SelectListProps, v as SelectTriggerProps, y as SelectValueProps } from "./Select-B_13gg_J.js";
-import { a as TabsListProps, n as TabProps, r as Tabs, t as TabPanelProps } from "./Tabs-ColWK-XA.js";
-import { t as Combobox } from "./Combobox-CYc37s5l.js";
+import { a as TabsListProps, n as TabProps, r as Tabs, t as TabPanelProps } from "./Tabs-C49J5m0Q.js";
+import { t as Combobox } from "./Combobox-xEEF6fUb.js";
 import { d as MenuProps, s as MenuItemProps, t as Menu } from "./Menu-L6MZm-7N.js";
 import * as React from "react";
 import { ChatAddToolApproveResponseFunction, ChatStatus, DynamicToolUIPart, FileUIPart, ToolUIPart, UIMessage } from "ai";
@@ -578,6 +578,7 @@ type PromptInputTabsListProps = React.ComponentPropsWithoutRef<typeof Tabs.List>
 declare const PromptInputTabsList: ({
   className,
   variant,
+  unstyled,
   ref,
   ...props
 }: TabsListProps & {
@@ -586,6 +587,7 @@ declare const PromptInputTabsList: ({
 type PromptInputTabProps = React.ComponentPropsWithoutRef<typeof Tabs.Tab>;
 declare const PromptInputTab: ({
   className,
+  unstyled,
   ref,
   ...props
 }: TabProps & {
@@ -594,6 +596,7 @@ declare const PromptInputTab: ({
 type PromptInputTabBodyProps = React.ComponentPropsWithoutRef<typeof Tabs.Panel>;
 declare const PromptInputTabBody: ({
   className,
+  unstyled,
   ref,
   ...props
 }: TabPanelProps & {
@@ -649,7 +652,6 @@ declare const PromptInputCommand: {
   }) => React.JSX.Element;
   Popup: ({
     className,
-    tabIndex,
     ref,
     ...props
   }: React.ComponentPropsWithRef<typeof import("@base-ui/react").ComboboxPopup> & {

package/dist/{Tabs-ColWK-XA.d.ts → Tabs-C49J5m0Q.d.ts}

@@ -8,12 +8,22 @@ interface TabsProps extends Tabs.Root.Props {
    * @default 'default'
    */
   variant?: "default" | "bordered";
+  /** Skip the default Tabs classes for internal composition. */
+  unstyled?: boolean;
 }
 interface TabsListProps extends Tabs.List.Props {
   variant?: "default" | "line" | null;
+  /** Skip the default Tabs classes for internal composition. */
+  unstyled?: boolean;
+}
+interface TabProps extends Tabs.Tab.Props {
+  /** Skip the default Tabs classes for internal composition. */
+  unstyled?: boolean;
+}
+interface TabPanelProps extends Tabs.Panel.Props {
+  /** Skip the default Tabs classes for internal composition. */
+  unstyled?: boolean;
 }
-interface TabProps extends Tabs.Tab.Props {}
-interface TabPanelProps extends Tabs.Panel.Props {}
 interface TabsIndicatorProps extends Tabs.Indicator.Props {}
 /**
  * A tabs component for organizing content into separate views.
@@ -36,6 +46,7 @@ declare function TabsRoot({
   orientation,
   variant,
   className,
+  unstyled,
   ref,
   ...props
 }: TabsProps & {
@@ -44,6 +55,7 @@ declare function TabsRoot({
 declare function TabsList({
   className,
   variant,
+  unstyled,
   ref,
   ...props
 }: TabsListProps & {
@@ -51,6 +63,7 @@ declare function TabsList({
 }): React.JSX.Element;
 declare function Tab({
   className,
+  unstyled,
   ref,
   ...props
 }: TabProps & {
@@ -65,6 +78,7 @@ declare function TabsIndicator({
 }): React.JSX.Element;
 declare function TabPanel({
   className,
+  unstyled,
   ref,
   ...props
 }: TabPanelProps & {

package/dist/{ThinkChat-15EhfvYJ.js → ThinkChat-E_HrfH76.js}

@@ -45,9 +45,12 @@ function thinkPendingExecutionApprovalsQueryOptions(stub, sourceKey) {
 		staleTime: 5e3
 	});
 }
-function useThinkPendingExecutionApprovals(stub, sourceKey, refreshSignal) {
+function useThinkPendingExecutionApprovals(stub, sourceKey, refreshSignal, enabled = true) {
 	const queryClient = useQueryClient();
-	const approvalsQuery = useQuery(thinkPendingExecutionApprovalsQueryOptions(stub, sourceKey));
+	const approvalsQuery = useQuery({
+		...thinkPendingExecutionApprovalsQueryOptions(stub, sourceKey),
+		enabled
+	});
 	const refreshState = React.useRef({
 		sourceKey,
 		observedSignal: refreshSignal,
@@ -55,15 +58,20 @@ function useThinkPendingExecutionApprovals(stub, sourceKey, refreshSignal) {
 	});
 	const refetch = React.useEffectEvent(() => approvalsQuery.refetch());
 	const refreshPendingApprovals = React.useCallback(async () => {
+		if (!enabled) return;
 		const filters = {
 			queryKey: thinkPendingExecutionApprovalsQueryKey(sourceKey),
 			exact: true
 		};
 		await queryClient.cancelQueries(filters);
 		await queryClient.invalidateQueries(filters);
-	}, [queryClient, sourceKey]);
+	}, [
+		enabled,
+		queryClient,
+		sourceKey
+	]);
 	React.useEffect(() => {
-		if (refreshState.current.sourceKey !== sourceKey) {
+		if (!enabled || refreshState.current.sourceKey !== sourceKey) {
 			refreshState.current = {
 				sourceKey,
 				observedSignal: refreshSignal,
@@ -80,6 +88,7 @@ function useThinkPendingExecutionApprovals(stub, sourceKey, refreshSignal) {
 		refetch();
 	}, [
 		approvalsQuery.isFetching,
+		enabled,
 		refreshSignal,
 		sourceKey
 	]);
@@ -122,7 +131,7 @@ function ThinkChatProvider({ agentTools, chat, children }) {
 * </QueryClientProvider>
 * ```
 */
-function ThinkChatRoot({ agent: agentOption, name, sourceKey, children }) {
+function ThinkChatRoot({ agent: agentOption, approvalsEnabled = true, name, sourceKey, children }) {
 	const agent = useAgent(typeof agentOption === "string" ? {
 		agent: agentOption,
 		name
@@ -133,7 +142,7 @@ function ThinkChatRoot({ agent: agentOption, name, sourceKey, children }) {
 	const chat = useAgentChat({ agent });
 	const agentTools = useAgentToolEvents({ agent });
 	const agentIdentity = JSON.stringify(agent.path);
-	const approvals = useThinkPendingExecutionApprovals(agent.stub, sourceKey, `${chat.messages.length}:${chat.status}`);
+	const approvals = useThinkPendingExecutionApprovals(agent.stub, sourceKey, `${chat.messages.length}:${chat.status}`, approvalsEnabled);
 	const resetAgentTools = React.useEffectEvent(() => agentTools.resetLocalState());
 	React.useEffect(() => {
 		resetAgentTools();

package/dist/{ThinkChatActivity-Bzot45kX.d.ts → ThinkChatActivity-CdbL0aoA.d.ts}

@@ -1,5 +1,5 @@
 import { i as AgentMessageRenderPartContext } from "./AgentMessageParts-CyD2UB3V.js";
-import { r as AgentChatProps } from "./AgentChat-ClxViuUM.js";
+import { r as AgentChatProps } from "./AgentChat-C-ZyXbJz.js";
 import { l as ThinkChatPart } from "./ThinkChatToolParts-CSzVwMXf.js";
 import * as React from "react";
 import { DynamicToolUIPart, ToolUIPart, UIMessage } from "ai";

package/dist/{Workspace-Jez8ffUj.d.ts → Workspace-CWtust-2.d.ts}

@@ -1,4 +1,4 @@
-import { a as WorkspaceMediaInfo, i as WorkspaceFileState, r as WorkspaceFileAssetResolver, t as WorkspaceFileAsset } from "./WorkspaceFile-CzyHnESE.js";
+import { a as WorkspaceMediaInfo, i as WorkspaceFileState, r as WorkspaceFileAssetResolver, t as WorkspaceFileAsset } from "./WorkspaceFile-D8Un_xge.js";
 import { WorkspaceLike } from "@cloudflare/think";
 import { FileInfo, Workspace } from "@cloudflare/shell";
 

package/dist/{WorkspaceExplorer-B9dQWNVK.d.ts → WorkspaceExplorer-DGigwsgH.d.ts}

@@ -1,5 +1,5 @@
 import { l as WorkspaceNavigationAdapter } from "./WorkspaceLink-O-EBKUJ8.js";
-import { o as WorkspaceState } from "./Workspace-Jez8ffUj.js";
+import { o as WorkspaceState } from "./Workspace-CWtust-2.js";
 import * as React from "react";
 
 //#region src/components/WorkspaceExplorer.d.ts

package/dist/{WorkspaceFile-CzyHnESE.d.ts → WorkspaceFile-D8Un_xge.d.ts}

@@ -1,4 +1,4 @@
-import { A as CodeBlockLanguage } from "./CodeBlock-gV4kZeCI.js";
+import { A as CodeBlockLanguage } from "./CodeBlock-Bbls1CnA.js";
 import { SkillParseResult } from "agent-skills-ts-sdk";
 import { FileInfo } from "@cloudflare/shell";
 

package/dist/components/AgentAttention.d.ts

@@ -1,4 +1,4 @@
-import { r as ButtonProps } from "../Button-DLGzHsjc.js";
+import { r as ButtonProps } from "../Button-yRInko9u.js";
 import * as React from "react";
 
 //#region src/components/AgentAttention.d.ts

package/dist/components/AgentChat.d.ts

@@ -1,2 +1,2 @@
-import { a as PermissionModeControl, i as AgentChatRenderMessageContext, n as AgentChatComposerDraft, r as AgentChatProps, t as AgentChat } from "../AgentChat-ClxViuUM.js";
+import { a as PermissionModeControl, i as AgentChatRenderMessageContext, n as AgentChatComposerDraft, r as AgentChatProps, t as AgentChat } from "../AgentChat-C-ZyXbJz.js";
 export { AgentChat, AgentChatComposerDraft, AgentChatProps, AgentChatRenderMessageContext, PermissionModeControl };

package/dist/components/AgentChat.js

@@ -108,7 +108,7 @@ function getEditableUserText(message) {
 * transport. Product code that talks to a Cloudflare Think agent should render
 * `ThinkChat`; use this directly only for plain AI SDK or read-only messages.
 */
-function AgentChat({ className, messages, status = "ready", onSubmit, showComposer = onSubmit !== void 0, onStop, placeholder = "Ask anything...", disabled, emptyState, composerHeader, composerTools, slashCommands, mentionCommands, contextSelector, composerEndTools, voiceInput, beforeVoiceStart, composerAddMenuItems, notice, onRegenerate, onEditAndResend, onApprovalResponse, thinkStub, permissionModeControl, onExecutionSettled, pendingApprovals: durableApprovals = EMPTY_PENDING_APPROVALS, contextWindow, renderPart, renderMessageAfter, ref }) {
+function AgentChat({ className, messages, status = "ready", onSubmit, showComposer = onSubmit !== void 0, onStop, placeholder = "Ask anything...", disabled, emptyState, composerHeader, composerTools, slashCommands, mentionCommands, contextSelector, composerEndTools, voiceInput, beforeVoiceStart, composerAddMenuItems, notice, onRegenerate, onEditAndResend, onApprovalResponse, thinkStub, approvalsEnabled = true, permissionModeControl, onExecutionSettled, pendingApprovals: durableApprovals = EMPTY_PENDING_APPROVALS, contextWindow, renderPart, renderMessageAfter, ref }) {
 	const [copyAnnouncement, setCopyAnnouncement] = React.useState("");
 	const [composerDraft, setComposerDraft] = React.useState("");
 	const [composerReferences, setComposerReferences] = React.useState([]);
@@ -214,19 +214,21 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 	}, [thinkStub]);
 	const skippedApprovalIdSet = React.useMemo(() => new Set(skippedApprovalIds), [skippedApprovalIds]);
 	const pendingApprovalItems = React.useMemo(() => {
+		if (!approvalsEnabled) return [];
 		return [...getPendingToolApprovals(messages, { pausedExecutions: Boolean(thinkStub) }).filter((part) => {
 			if (part.state === "approval-requested" && !onApprovalResponse) return false;
 			const id = getApprovalStateKey(part);
 			return Boolean(id) && !skippedApprovalIdSet.has(id);
 		}).map((part) => ({ part })), ...thinkStub ? durableApprovals.filter((approval) => approval.source === "action" && !skippedApprovalIdSet.has(approval.executionId)).map((approval) => ({ approval })) : []];
 	}, [
+		approvalsEnabled,
 		durableApprovals,
 		messages,
 		onApprovalResponse,
 		skippedApprovalIdSet,
 		thinkStub
 	]);
-	const approvalsWired = Boolean(onApprovalResponse || thinkStub);
+	const approvalsWired = approvalsEnabled && Boolean(onApprovalResponse || thinkStub);
 	const autoApprovedIds = React.useRef({
 		thinkStub,
 		ids: /* @__PURE__ */ new Set()

package/dist/components/AgentChatMessageEditor.js

@@ -69,6 +69,7 @@ function AgentChatMessageEditor({ message, originalText, onCancel, onSubmit, onS
 				error ? /* @__PURE__ */ jsx(Field.Errors, { errors: [error] }) : null
 			]
 		}), /* @__PURE__ */ jsxs("div", {
+			"data-slot": "message-edit-actions",
 			className: "message__edit-actions",
 			children: [/* @__PURE__ */ jsx(Button, {
 				type: "button",

package/dist/components/AgentConnection.js

@@ -292,17 +292,20 @@ function isCredentialAuthField(field) {
 * Compact popover trigger for showing AgentConnectionPanel inline.
 */
 function AgentConnectionPopover({ className, ...props }) {
-	return /* @__PURE__ */ jsxs(Popover.Root, { children: [/* @__PURE__ */ jsx(Popover.Trigger, { render: /* @__PURE__ */ jsxs(Button, {
-		type: "button",
-		color: "neutral",
-		variant: "outline",
-		size: "sm",
-		className: cx("agent-connect-trigger", className),
-		children: [/* @__PURE__ */ jsx(LinkIcon, {
-			size: 16,
-			strokeWidth: 2
-		}), /* @__PURE__ */ jsx("span", { children: "Connect agent" })]
-	}) }), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+	return /* @__PURE__ */ jsxs(Popover.Root, { children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+		unstyled: true,
+		render: /* @__PURE__ */ jsxs(Button, {
+			type: "button",
+			color: "neutral",
+			variant: "outline",
+			size: "sm",
+			className: cx("agent-connect-trigger", className),
+			children: [/* @__PURE__ */ jsx(LinkIcon, {
+				size: 16,
+				strokeWidth: 2
+			}), /* @__PURE__ */ jsx("span", { children: "Connect agent" })]
+		})
+	}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
 		side: "top",
 		align: "start",
 		sideOffset: 10,

package/dist/components/AgentToolDetail.js

@@ -5,7 +5,7 @@ import { AppTopBar } from "./AppTopBar.js";
 import { NaniteMark } from "./NaniteScene.js";
 import { SubagentRunIndicator, getSubagentRunName } from "./SubagentRunIndicator.js";
 import { SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "./SubagentRunDetails.js";
-import { t as ThinkChat } from "../ThinkChat-15EhfvYJ.js";
+import { t as ThinkChat } from "../ThinkChat-E_HrfH76.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useAgentChat } from "@cloudflare/think/react";

package/dist/components/AlertDialog.d.ts

@@ -1,3 +1,4 @@
+import { a as ButtonVariant, i as ButtonSize, n as ButtonColor } from "../Button-yRInko9u.js";
 import * as React from "react";
 import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
 
@@ -15,12 +16,27 @@ interface AlertDialogPopupProps extends React.ComponentPropsWithRef<typeof Alert
 }
 interface AlertDialogTitleProps extends React.ComponentPropsWithRef<typeof AlertDialog$1.Title> {}
 interface AlertDialogDescriptionProps extends React.ComponentPropsWithRef<typeof AlertDialog$1.Description> {}
-interface AlertDialogCloseProps extends React.ComponentPropsWithRef<typeof AlertDialog$1.Close> {
+type BaseAlertDialogCloseProps = React.ComponentPropsWithRef<typeof AlertDialog$1.Close>;
+/**
+ * Canonical Button axes style the default close element. When `render` is
+ * provided, the composed control owns its visual chrome.
+ */
+interface AlertDialogCloseProps extends Omit<BaseAlertDialogCloseProps, "color"> {
+  /**
+   * The visual style of the default close button.
+   * @default 'normal'
+   */
+  variant?: ButtonVariant;
   /**
-   * The variant of the close button.
-   * @default 'secondary'
+   * The semantic color of the default close button.
+   * @default 'neutral'
    */
-  variant?: "primary" | "secondary" | "destructive" | "outline" | "ghost";
+  color?: ButtonColor;
+  /**
+   * The size of the default close button.
+   * @default 'sm'
+   */
+  size?: ButtonSize;
 }
 interface AlertDialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
 interface AlertDialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
@@ -43,7 +59,7 @@ interface AlertDialogMediaProps extends React.HTMLAttributes<HTMLDivElement> {}
  *       </AlertDialog.Description>
  *       <div style={{ display: "flex", gap: "0.5rem", justifyContent: "flex-end" }}>
  *         <AlertDialog.Close>Cancel</AlertDialog.Close>
- *         <AlertDialog.Close variant="destructive">Delete</AlertDialog.Close>
+ *         <AlertDialog.Close color="destructive">Delete</AlertDialog.Close>
  *       </div>
  *       </AlertDialog.Popup>
  *     </AlertDialog.Viewport>
@@ -119,6 +135,9 @@ declare function AlertDialogDescription({
 }): React.JSX.Element;
 declare function AlertDialogClose({
   variant,
+  color,
+  size,
+  render,
   className,
   ref,
   ...props

package/dist/components/AlertDialog.js

@@ -1,4 +1,5 @@
 import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
+import { buttonVariants } from "./Button.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
@@ -21,7 +22,7 @@ import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
 *       </AlertDialog.Description>
 *       <div style={{ display: "flex", gap: "0.5rem", justifyContent: "flex-end" }}>
 *         <AlertDialog.Close>Cancel</AlertDialog.Close>
-*         <AlertDialog.Close variant="destructive">Delete</AlertDialog.Close>
+*         <AlertDialog.Close color="destructive">Delete</AlertDialog.Close>
 *       </div>
 *       </AlertDialog.Popup>
 *     </AlertDialog.Viewport>
@@ -59,7 +60,11 @@ function AlertDialogViewport({ className, ref, ...props }) {
 	});
 }
 function AlertDialogPopup({ size = "md", className, ref, ...props }) {
-	const classes = mergeBaseClassName(["alert-dialog__popup", size !== "md" && `alert-dialog__popup--${size}`].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName([
+		"alert-dialog__popup",
+		"base-ui-modal-popup",
+		size !== "md" && `alert-dialog__popup--${size}`
+	].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(AlertDialog$1.Popup, {
 		ref,
 		"data-slot": "alert-dialog-content",
@@ -109,11 +114,17 @@ function AlertDialogDescription({ className, ref, ...props }) {
 		...props
 	});
 }
-function AlertDialogClose({ variant = "secondary", className, ref, ...props }) {
-	const classes = mergeBaseClassName(["alert-dialog__action", `alert-dialog__action--${variant}`].filter(Boolean).join(" "), className);
+function AlertDialogClose({ variant = "normal", color = "neutral", size = "sm", render, className, ref, ...props }) {
+	const classes = mergeBaseClassName(render == null ? buttonVariants({
+		variant,
+		color,
+		size,
+		className: "alert-dialog__action"
+	}) : "alert-dialog__action", className);
 	return /* @__PURE__ */ jsx(AlertDialog$1.Close, {
 		ref,
 		"data-slot": "alert-dialog-close",
+		render,
 		className: classes,
 		...props
 	});

package/dist/components/AppTopBar.js

@@ -43,6 +43,7 @@ function AppTopBarTrailing({ className, ...props }) {
 }
 function AppTopBarControl({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Toolbar.Button, {
+		unstyled: true,
 		className: mergeBaseClassName("app-top-bar__button", className),
 		...props
 	});

package/dist/components/Artifact.d.ts

@@ -1,4 +1,4 @@
-import { r as ButtonProps } from "../Button-DLGzHsjc.js";
+import { r as ButtonProps } from "../Button-yRInko9u.js";
 import * as React from "react";
 
 //#region src/components/Artifact.d.ts

package/dist/components/Badge.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/Badge.d.ts
 type BadgeVariant = "normal" | "outline" | "ghost" | "link";
@@ -15,10 +15,12 @@ declare function badgeVariants({
   size,
   className
 }?: BadgeVariantsOptions): string;
-type SlottableBadgeProps = React.HTMLAttributes<HTMLElement> & {
-  ref?: React.Ref<HTMLElement>;
+type BadgeRenderState = {
+  slot: "badge";
+  variant: BadgeVariant;
+  size: "sm" | "md";
 };
-interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+interface BadgeProps extends Omit<useRender.ComponentProps<"span", BadgeRenderState>, "color"> {
   /**
    * The visual rendering style of the badge.
    * @default 'normal'
@@ -34,8 +36,6 @@ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
    * @default 'md'
    */
   size?: "sm" | "md";
-  /** Replaces the default span while preserving badge props and styles. */
-  render?: React.ReactElement<SlottableBadgeProps>;
 }
 /**
  * A badge component for highlighting status, labels, or categories.
@@ -55,11 +55,8 @@ declare function Badge({
   size,
   className,
   render,
-  children,
   ref,
   ...props
-}: BadgeProps & {
-  ref?: React.Ref<HTMLSpanElement>;
-}): React.JSX.Element;
+}: BadgeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion
 export { Badge, BadgeColor, BadgeProps, BadgeVariant, BadgeVariantsOptions, badgeVariants };

package/dist/components/Badge.js

@@ -1,6 +1,4 @@
-import { n as mergeRefs } from "../merge-refs-DF_7w2x_.js";
-import * as React from "react";
-import { jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/components/Badge.tsx
 const BADGE_VARIANT_DEFAULT_COLOR = {
 	normal: "primary",
@@ -18,34 +16,6 @@ function badgeVariants({ variant = "normal", color, size = "md", className } = {
 		className
 	].filter(Boolean).join(" ");
 }
-function isEventHandler(propName, value) {
-	return /^on[A-Z]/.test(propName) && typeof value === "function";
-}
-function mergeSlottedBadgeProps(childProps, badgeProps) {
-	const mergedProps = {
-		...childProps,
-		...badgeProps
-	};
-	const badgePropsRecord = badgeProps;
-	for (const propName of Object.keys(childProps)) {
-		const childValue = childProps[propName];
-		const badgeValue = badgePropsRecord[propName];
-		if (isEventHandler(propName, childValue) && isEventHandler(propName, badgeValue)) mergedProps[propName] = (...args) => {
-			childValue(...args);
-			badgeValue(...args);
-		};
-	}
-	mergedProps.className = [childProps.className, badgeProps.className].filter(Boolean).join(" ");
-	mergedProps.style = childProps.style || badgeProps.style ? {
-		...childProps.style,
-		...badgeProps.style
-	} : void 0;
-	mergedProps.ref = mergeRefs(childProps.ref, badgeProps.ref);
-	mergedProps["data-slot"] = "badge";
-	mergedProps["data-variant"] = badgeProps["data-variant"];
-	mergedProps["data-size"] = badgeProps["data-size"];
-	return mergedProps;
-}
 /**
 * A badge component for highlighting status, labels, or categories.
 *
@@ -58,7 +28,7 @@ function mergeSlottedBadgeProps(childProps, badgeProps) {
 * <Badge render={<a href="/docs" />}>Docs</Badge>
 * ```
 */
-function Badge({ variant = "normal", color, size = "md", className, render, children, ref, ...props }) {
+function Badge({ variant = "normal", color, size = "md", className, render, ref, ...props }) {
 	const badgeVariant = variant ?? "normal";
 	const classes = badgeVariants({
 		variant,
@@ -66,23 +36,19 @@ function Badge({ variant = "normal", color, size = "md", className, render, chil
 		size,
 		className
 	});
-	if (React.isValidElement(render)) return React.cloneElement(render, mergeSlottedBadgeProps(render.props, {
-		...props,
-		ref,
-		className: classes,
-		"data-slot": "badge",
-		"data-variant": badgeVariant,
-		"data-size": size,
-		children
-	}));
-	return /* @__PURE__ */ jsx("span", {
+	return useRender({
+		defaultTagName: "span",
+		render,
 		ref,
-		"data-slot": "badge",
-		"data-variant": badgeVariant,
-		"data-size": size,
-		className: classes,
-		...props,
-		children
+		props: {
+			...props,
+			className: classes
+		},
+		state: {
+			slot: "badge",
+			variant: badgeVariant,
+			size
+		}
 	});
 }
 //#endregion

package/dist/components/Button.d.ts

@@ -1,2 +1,2 @@
-import { a as ButtonVariant, i as ButtonSize, n as ButtonColor, o as ButtonVariantsOptions, r as ButtonProps, s as buttonVariants, t as Button } from "../Button-DLGzHsjc.js";
+import { a as ButtonVariant, i as ButtonSize, n as ButtonColor, o as ButtonVariantsOptions, r as ButtonProps, s as buttonVariants, t as Button } from "../Button-yRInko9u.js";
 export { Button, ButtonColor, ButtonProps, ButtonSize, ButtonVariant, ButtonVariantsOptions, buttonVariants };

package/dist/components/Button.js

@@ -29,19 +29,17 @@ function buttonVariants({ variant = "normal", color = "primary", size = "sm", cl
 *
 * @see {@link https://base-ui.com/react/components/button | Base UI Button}
 */
-function Button({ variant = "normal", color = "primary", size = "sm", iconOnly = false, className, nativeButton, ref, ...props }) {
+function Button({ variant = "normal", color = "primary", size = "sm", iconOnly = false, className, ref, ...props }) {
 	const classes = mergeBaseClassName(buttonVariants({
 		variant,
 		color,
 		size
 	}), className);
-	const resolvedNativeButton = nativeButton ?? props.render == null;
 	return /* @__PURE__ */ jsx(Button$1, {
 		ref,
 		"data-slot": "button",
 		"data-icon-only": iconOnly ? "" : void 0,
 		className: classes,
-		nativeButton: resolvedNativeButton,
 		...props
 	});
 }

package/dist/components/Checkbox.d.ts

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { Checkbox as Checkbox$1, CheckboxRootProps } from "@base-ui/react/checkbox";
 
 //#region src/components/Checkbox.d.ts
@@ -25,14 +24,12 @@ declare function CheckboxRoot({
   className,
   ref,
   ...props
-}: CheckboxProps & {
-  ref?: React.Ref<HTMLButtonElement>;
-}): React.JSX.Element;
+}: CheckboxProps): import("react").JSX.Element;
 declare function CheckboxIndicator({
   children,
   className,
   ...props
-}: Checkbox$1.Indicator.Props): React.JSX.Element;
+}: Checkbox$1.Indicator.Props): import("react").JSX.Element;
 declare const Checkbox: {
   Root: typeof CheckboxRoot;
   Indicator: typeof CheckboxIndicator;

package/dist/components/Checkbox.js

@@ -1,6 +1,5 @@
 import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
 import { u as CheckIcon } from "../icons-DKXiSepE.js";
-import "react";
 import { jsx } from "react/jsx-runtime";
 import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
 //#region src/components/Checkbox.tsx