@mcp-b/react-components 0.16.1 → 0.18.0

package/dist/components/Avatar.js

@@ -1,3 +1,4 @@
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
@@ -15,8 +16,8 @@ import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
 *
 * @see {@link https://base-ui.com/react/components/avatar | Base UI Avatar}
 */
-function AvatarRoot({ className = "", size = "default", ref, ...props }) {
-	const classes = ["avatar", className].filter(Boolean).join(" ");
+function AvatarRoot({ className, size = "md", ref, ...props }) {
+	const classes = mergeBaseClassName(["avatar"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Avatar$1.Root, {
 		ref,
 		"data-slot": "avatar",
@@ -28,8 +29,8 @@ function AvatarRoot({ className = "", size = "default", ref, ...props }) {
 /**
 * Displays the avatar image. Renders an `<img>` element.
 */
-function AvatarImage({ className = "", ref, ...props }) {
-	const classes = ["avatar__image", className].filter(Boolean).join(" ");
+function AvatarImage({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["avatar__image"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Avatar$1.Image, {
 		ref,
 		"data-slot": "avatar-image",
@@ -41,8 +42,8 @@ function AvatarImage({ className = "", ref, ...props }) {
 * Displays when the image fails to load or isn't provided.
 * Typically contains initials or an icon. Renders a `<span>` element.
 */
-function AvatarFallback({ className = "", ref, ...props }) {
-	const classes = ["avatar__fallback", className].filter(Boolean).join(" ");
+function AvatarFallback({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["avatar__fallback"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Avatar$1.Fallback, {
 		ref,
 		"data-slot": "avatar-fallback",
@@ -50,27 +51,27 @@ function AvatarFallback({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function AvatarGroup({ className = "", ref, ...props }) {
+function AvatarGroup({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		"data-slot": "avatar-group",
-		className: ["avatar-group", className].filter(Boolean).join(" "),
+		className: mergeBaseClassName(["avatar-group"].filter(Boolean).join(" "), className),
 		...props
 	});
 }
-function AvatarGroupCount({ className = "", ref, ...props }) {
+function AvatarGroupCount({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		"data-slot": "avatar-group-count",
-		className: ["avatar-group__count", className].filter(Boolean).join(" "),
+		className: mergeBaseClassName(["avatar-group__count"].filter(Boolean).join(" "), className),
 		...props
 	});
 }
-function AvatarBadge({ className = "", ref, ...props }) {
+function AvatarBadge({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		ref,
 		"data-slot": "avatar-badge",
-		className: ["avatar__badge", className].filter(Boolean).join(" "),
+		className: mergeBaseClassName(["avatar__badge"].filter(Boolean).join(" "), className),
 		...props
 	});
 }

package/dist/components/Badge.js

@@ -43,6 +43,7 @@ function mergeSlottedBadgeProps(childProps, badgeProps) {
 	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;
 }
 /**
@@ -71,12 +72,14 @@ function Badge({ variant = "normal", color, size = "md", className, render, chil
 		className: classes,
 		"data-slot": "badge",
 		"data-variant": badgeVariant,
+		"data-size": size,
 		children
 	}));
 	return /* @__PURE__ */ jsx("span", {
 		ref,
 		"data-slot": "badge",
 		"data-variant": badgeVariant,
+		"data-size": size,
 		className: classes,
 		...props,
 		children

package/dist/components/BrowserLiveView.js

@@ -1,7 +1,8 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { B as SpinnerIcon, w as MaximizeIcon } from "../icons-CpfUer49.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { G as SpinnerIcon, O as MaximizeIcon } from "../icons-CQJ-aMnI.js";
 import { Button } from "./Button.js";
 import { Dialog } from "./Dialog.js";
+import { TransitionSurface } from "./TransitionSurface.js";
 import { Badge } from "./Badge.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -41,7 +42,15 @@ function EndedState({ title, detail }) {
 */
 function BrowserLiveView({ source, receivedAt, pageTitle, fallback, className, ...props }) {
 	const [expired, setExpired] = React.useState(() => receivedAt !== void 0 && receivedAt + source.expiresInMs <= Date.now());
-	const [frameState, setFrameState] = React.useState("loading");
+	const [reportedFrameState, setReportedFrameState] = React.useState(() => ({
+		url: source.url,
+		value: "loading"
+	}));
+	if (reportedFrameState.url !== source.url) setReportedFrameState({
+		url: source.url,
+		value: "loading"
+	});
+	const frameState = reportedFrameState.url === source.url ? reportedFrameState.value : "loading";
 	React.useEffect(() => {
 		const remaining = (receivedAt ?? Date.now()) + source.expiresInMs - Date.now();
 		if (remaining <= 0) {
@@ -57,14 +66,15 @@ function BrowserLiveView({ source, receivedAt, pageTitle, fallback, className, .
 		source.targetId,
 		source.url
 	]);
-	React.useEffect(() => {
-		setFrameState("loading");
-	}, [source.url]);
 	React.useEffect(() => {
 		if (frameState !== "loading") return;
-		const timer = setTimeout(() => setFrameState("failed"), FRAME_LOAD_TIMEOUT_MS);
+		const url = source.url;
+		const timer = setTimeout(() => setReportedFrameState({
+			url,
+			value: "failed"
+		}), FRAME_LOAD_TIMEOUT_MS);
 		return () => clearTimeout(timer);
-	}, [frameState]);
+	}, [frameState, source.url]);
 	const failed = frameState === "failed";
 	const live = !expired && !failed;
 	const frameTitle = pageTitle ? `Live browser view — ${pageTitle}` : "Live browser view";
@@ -83,9 +93,12 @@ function BrowserLiveView({ source, receivedAt, pageTitle, fallback, className, .
 			src: source.url,
 			title: frameTitle,
 			allow: "clipboard-read; clipboard-write",
-			onLoad: () => setFrameState("ready")
-		}),
-		frameState === "loading" ? /* @__PURE__ */ jsxs("div", {
+			onLoad: () => setReportedFrameState({
+				url: source.url,
+				value: "ready"
+			})
+		}, source.url),
+		frameState === "loading" ? /* @__PURE__ */ jsxs(TransitionSurface, {
 			className: "browser-live-view__state",
 			role: "status",
 			children: [/* @__PURE__ */ jsx(SpinnerIcon, { className: "browser-live-view__state-spinner" }), "Connecting live view…"]
@@ -98,10 +111,12 @@ function BrowserLiveView({ source, receivedAt, pageTitle, fallback, className, .
 		...props,
 		className: cx("browser-live-view", className),
 		"data-expired": expired || failed || void 0,
+		"data-frame-state": frameState,
 		children: [view, /* @__PURE__ */ jsxs(Dialog.Root, { children: [/* @__PURE__ */ jsx(Dialog.Trigger, { render: /* @__PURE__ */ jsx(Button, {
 			variant: "ghost",
 			color: "neutral",
-			size: "icon-xs",
+			size: "sm",
+			iconOnly: true,
 			className: "browser-live-view__expand",
 			"aria-label": "Expand browser view",
 			children: /* @__PURE__ */ jsx(MaximizeIcon, {})

package/dist/components/BrowserReplay.js

@@ -1,5 +1,5 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { M as PauseIcon, P as PlayIcon } from "../icons-CpfUer49.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { L as PauseIcon, z as PlayIcon } from "../icons-CQJ-aMnI.js";
 import { Button } from "./Button.js";
 import { Slider } from "./Slider.js";
 import * as React from "react";
@@ -154,7 +154,8 @@ function BrowserReplay({ className, events, autoPlay, ref, ...props }) {
 				/* @__PURE__ */ jsx(Button, {
 					variant: "ghost",
 					color: "neutral",
-					size: "icon-sm",
+					size: "sm",
+					iconOnly: true,
 					className: "browser-replay__toggle",
 					"aria-label": isPlaying ? "Pause replay" : "Play replay",
 					disabled,

package/dist/components/BrowserRunPanel.js

@@ -1,6 +1,7 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { B as SpinnerIcon, Y as XIcon } from "../icons-CpfUer49.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { $ as XIcon, G as SpinnerIcon } from "../icons-CQJ-aMnI.js";
 import { Button } from "./Button.js";
+import { Tabs } from "./Tabs.js";
 import { BrowserLiveView } from "./BrowserLiveView.js";
 import { WebPreview, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewUrl } from "./WebPreview.js";
 import * as React from "react";
@@ -35,76 +36,68 @@ function BrowserRunPanelState({ children, role, tone = "neutral" }) {
 * data and calls app-provided refresh/close callbacks.
 */
 function BrowserRunPanel({ liveView, onRefresh, onCloseSession, loading, error, label = "Browser", empty = "No live browser session", fallback, className, ref, ...props }) {
-	const [selectedTargetId, setSelectedTargetId] = React.useState();
+	const [requestedTargetId, setRequestedTargetId] = React.useState();
 	const [receivedAt, setReceivedAt] = React.useState(() => Date.now());
-	const tabRefs = React.useRef(/* @__PURE__ */ new Map());
-	const tabListId = React.useId();
 	React.useEffect(() => {
 		if (liveView) setReceivedAt(Date.now());
 	}, [liveView]);
 	const targets = liveView?.targets ?? [];
-	const target = pickTarget(targets, selectedTargetId);
+	const target = pickTarget(targets, requestedTargetId);
 	const pageUrl = target?.pageUrl ?? "";
-	const selectTarget = React.useCallback((nextTarget) => {
-		setSelectedTargetId(nextTarget.targetId);
-	}, []);
-	const handleTabListKeyDown = (event) => {
-		const currentIndex = targets.findIndex((candidate) => candidate.targetId === target?.targetId);
-		if (currentIndex < 0) return;
-		let nextIndex;
-		if (event.key === "ArrowRight") nextIndex = (currentIndex + 1) % targets.length;
-		if (event.key === "ArrowLeft") nextIndex = (currentIndex - 1 + targets.length) % targets.length;
-		if (event.key === "Home") nextIndex = 0;
-		if (event.key === "End") nextIndex = targets.length - 1;
-		if (nextIndex === void 0) return;
-		event.preventDefault();
-		const nextTarget = targets[nextIndex];
-		if (!nextTarget) return;
-		selectTarget(nextTarget);
-		tabRefs.current.get(nextTarget.targetId)?.focus();
+	const body = target && liveView ? /* @__PURE__ */ jsx(BrowserLiveView, {
+		source: {
+			url: target.url,
+			targetId: target.targetId,
+			expiresInMs: liveView.expiresInMs
+		},
+		receivedAt,
+		pageTitle: target.title ?? target.pageUrl,
+		fallback,
+		className: "browser-run-panel__live-view"
+	}) : loading ? /* @__PURE__ */ jsxs(BrowserRunPanelState, {
+		role: "status",
+		children: [/* @__PURE__ */ jsx(SpinnerIcon, { className: "browser-run-panel__spinner" }), "Loading browser session"]
+	}) : /* @__PURE__ */ jsx(BrowserRunPanelState, { children: empty });
+	const bodyProps = {
+		className: "web-preview__body browser-run-panel__body",
+		"aria-busy": loading || void 0
 	};
-	return /* @__PURE__ */ jsxs(WebPreview, {
-		ref,
+	return /* @__PURE__ */ jsxs(Tabs.Root, {
 		className: cx("browser-run-panel", className),
-		url: pageUrl,
-		role: "region",
-		"aria-label": typeof label === "string" ? label : "Browser",
-		...props,
+		value: target?.targetId ?? null,
+		onValueChange: (value) => {
+			if (typeof value === "string") setRequestedTargetId(value);
+		},
+		render: /* @__PURE__ */ jsx(WebPreview, {
+			ref,
+			url: pageUrl,
+			role: "region",
+			"aria-label": typeof label === "string" ? label : "Browser",
+			...props
+		}),
 		children: [
-			targets.length > 1 ? /* @__PURE__ */ jsx(WebPreviewNavigation, { children: /* @__PURE__ */ jsx("div", {
-				id: tabListId,
+			targets.length > 1 ? /* @__PURE__ */ jsx(WebPreviewNavigation, { children: /* @__PURE__ */ jsxs(Tabs.List, {
 				className: "browser-run-panel__tabs",
-				role: "tablist",
 				"aria-label": "Open browser pages",
-				onKeyDown: handleTabListKeyDown,
-				children: targets.map((candidate) => {
-					const selected = candidate.targetId === target?.targetId;
-					return /* @__PURE__ */ jsxs(Button, {
-						ref: (node) => {
-							if (node) tabRefs.current.set(candidate.targetId, node);
-							else tabRefs.current.delete(candidate.targetId);
-						},
+				activateOnFocus: true,
+				children: [targets.map((candidate) => /* @__PURE__ */ jsxs(Tabs.Tab, {
+					value: candidate.targetId,
+					className: "browser-run-panel__tab",
+					render: /* @__PURE__ */ jsx(Button, {
 						type: "button",
 						variant: "ghost",
 						color: "neutral",
-						size: "sm",
-						className: "browser-run-panel__tab",
-						role: "tab",
-						id: `${tabListId}-${candidate.targetId}`,
-						"aria-selected": selected,
-						"aria-controls": `${tabListId}-panel`,
-						tabIndex: selected ? 0 : -1,
-						onClick: () => selectTarget(candidate),
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "browser-run-panel__tab-glyph",
-							"aria-hidden": "true",
-							children: targetGlyph(candidate)
-						}), /* @__PURE__ */ jsx("span", {
-							className: "browser-run-panel__tab-title",
-							children: targetLabel(candidate)
-						})]
-					}, candidate.targetId);
-				})
+						size: "sm"
+					}),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "browser-run-panel__tab-glyph",
+						"aria-hidden": "true",
+						children: targetGlyph(candidate)
+					}), /* @__PURE__ */ jsx("span", {
+						className: "browser-run-panel__tab-title",
+						children: targetLabel(candidate)
+					})]
+				}, candidate.targetId)), /* @__PURE__ */ jsx(Tabs.Indicator, {})]
 			}) }) : null,
 			/* @__PURE__ */ jsxs(WebPreviewNavigation, {
 				className: "browser-run-panel__address-bar",
@@ -131,26 +124,13 @@ function BrowserRunPanel({ liveView, onRefresh, onCloseSession, loading, error,
 				tone: "danger",
 				children: error
 			}) : null,
-			/* @__PURE__ */ jsx("div", {
-				id: `${tabListId}-panel`,
-				className: "web-preview__body browser-run-panel__body",
-				role: targets.length > 1 ? "tabpanel" : void 0,
-				"aria-labelledby": targets.length > 1 && target ? `${tabListId}-${target.targetId}` : void 0,
-				"aria-busy": loading || void 0,
-				children: target && liveView ? /* @__PURE__ */ jsx(BrowserLiveView, {
-					source: {
-						url: target.url,
-						targetId: target.targetId,
-						expiresInMs: liveView.expiresInMs
-					},
-					receivedAt,
-					pageTitle: target.title ?? target.pageUrl,
-					fallback,
-					className: "browser-run-panel__live-view"
-				}) : loading ? /* @__PURE__ */ jsxs(BrowserRunPanelState, {
-					role: "status",
-					children: [/* @__PURE__ */ jsx(SpinnerIcon, { className: "browser-run-panel__spinner" }), "Loading browser session"]
-				}) : /* @__PURE__ */ jsx(BrowserRunPanelState, { children: empty })
+			targets.length > 1 && target ? /* @__PURE__ */ jsx(Tabs.Panel, {
+				...bodyProps,
+				value: target.targetId,
+				children: body
+			}) : /* @__PURE__ */ jsx("div", {
+				...bodyProps,
+				children: body
 			})
 		]
 	});

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-FX_hpqxm.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-DLGzHsjc.js";
 export { Button, ButtonColor, ButtonProps, ButtonSize, ButtonVariant, ButtonVariantsOptions, buttonVariants };

package/dist/components/Button.js

@@ -1,12 +1,13 @@
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
 import { jsx } from "react/jsx-runtime";
 import { Button as Button$1 } from "@base-ui/react/button";
 //#region src/components/Button.tsx
-function buttonVariants({ variant = "normal", color = "primary", size = "md", className } = {}) {
+function buttonVariants({ variant = "normal", color = "primary", size = "sm", className } = {}) {
 	return [
 		"button",
 		`button--${variant ?? "normal"}`,
 		`button--${color ?? "primary"}`,
-		`button--${size ?? "md"}`,
+		`button--${size ?? "sm"}`,
 		className
 	].filter(Boolean).join(" ");
 }
@@ -23,27 +24,24 @@ function buttonVariants({ variant = "normal", color = "primary", size = "md", cl
 * <Button color="primary">Save changes</Button>
 * <Button color="destructive">Delete account</Button>
 * <Button variant="outline">Cancel</Button>
-* <Button variant="ghost" size="icon"><SearchIcon /></Button>
+* <Button variant="ghost" size="sm" iconOnly aria-label="Search"><SearchIcon /></Button>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/button | Base UI Button}
 */
-function Button({ variant = "normal", color = "primary", size = "md", className, nativeButton, ref, ...props }) {
+function Button({ variant = "normal", color = "primary", size = "sm", iconOnly = false, className, nativeButton, 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",
-		className: typeof className === "function" ? (state) => buttonVariants({
-			variant,
-			color,
-			size,
-			className: className(state)
-		}) : buttonVariants({
-			variant,
-			color,
-			size,
-			className
-		}),
-		nativeButton: nativeButton ?? props.render == null,
+		"data-icon-only": iconOnly ? "" : void 0,
+		className: classes,
+		nativeButton: resolvedNativeButton,
 		...props
 	});
 }

package/dist/components/Card.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/Card.d.ts
 /**
@@ -14,8 +15,8 @@ interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   size?: "default" | "sm";
 }
 interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
-interface CardTitleProps extends React.HTMLAttributes<HTMLDivElement> {}
-interface CardDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface CardTitleProps extends useRender.ComponentProps<"div"> {}
+interface CardDescriptionProps extends useRender.ComponentProps<"div"> {}
 interface CardActionProps extends React.HTMLAttributes<HTMLDivElement> {}
 interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}
 interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
@@ -53,18 +54,16 @@ declare function CardHeader({
 }): React.JSX.Element;
 declare function CardTitle({
   className,
+  render,
   ref,
   ...props
-}: CardTitleProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
+}: CardTitleProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare function CardDescription({
   className,
+  render,
   ref,
   ...props
-}: CardDescriptionProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
+}: CardDescriptionProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare function CardAction({
   className,
   ref,

package/dist/components/Card.js

@@ -1,5 +1,6 @@
 import "react";
 import { jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/components/Card.tsx
 /**
 * A container component that provides consistent styling and elevation.
@@ -38,20 +39,28 @@ function CardHeader({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function CardTitle({ className = "", ref, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
+function CardTitle({ className = "", render, ref, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
 		ref,
-		"data-slot": "card-title",
-		className: ["card__title", className].filter(Boolean).join(" "),
-		...props
+		props: {
+			...props,
+			"data-slot": "card-title",
+			className: ["card__title", className].filter(Boolean).join(" ")
+		}
 	});
 }
-function CardDescription({ className = "", ref, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
+function CardDescription({ className = "", render, ref, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
 		ref,
-		"data-slot": "card-description",
-		className: ["card__description", className].filter(Boolean).join(" "),
-		...props
+		props: {
+			...props,
+			"data-slot": "card-description",
+			className: ["card__description", className].filter(Boolean).join(" ")
+		}
 	});
 }
 function CardAction({ className = "", ref, ...props }) {

package/dist/components/ChainOfThought.d.ts

@@ -1,11 +1,9 @@
-import { Collapsible } from "./Collapsible.js";
-import { S as IconProps } from "../icons-GQd1xF4e.js";
+import { t as Collapsible } from "../Collapsible-N64ASIQr.js";
+import { E as IconProps } from "../icons-CYXmvKlJ.js";
 import * as React from "react";
 
 //#region src/components/ChainOfThought.d.ts
-interface ChainOfThoughtProps extends Omit<React.ComponentProps<typeof Collapsible.Root>, "className" | "unstyled"> {
-  className?: string;
-}
+interface ChainOfThoughtProps extends Omit<React.ComponentProps<typeof Collapsible.Root>, "unstyled"> {}
 /**
  * A collapsible display of an AI's step-by-step reasoning trace. Compose
  * ChainOfThoughtHeader with ChainOfThoughtContent, then nest
@@ -38,9 +36,7 @@ declare function ChainOfThought({
 }: ChainOfThoughtProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface ChainOfThoughtHeaderProps extends Omit<React.ComponentProps<typeof Collapsible.Trigger>, "className" | "unstyled"> {
-  className?: string;
-}
+interface ChainOfThoughtHeaderProps extends Omit<React.ComponentProps<typeof Collapsible.Trigger>, "unstyled"> {}
 /**
  * Clickable header row that toggles the reasoning trace.
  */
@@ -52,9 +48,7 @@ declare function ChainOfThoughtHeader({
 }: ChainOfThoughtHeaderProps & {
   ref?: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element;
-interface ChainOfThoughtContentProps extends Omit<React.ComponentProps<typeof Collapsible.Panel>, "className" | "unstyled"> {
-  className?: string;
-}
+interface ChainOfThoughtContentProps extends Omit<React.ComponentProps<typeof Collapsible.Panel>, "unstyled"> {}
 /**
  * Collapsible panel containing step rows.
  */

package/dist/components/ChainOfThought.js

@@ -1,6 +1,6 @@
+import { t as cx } from "../class-names-BiMDVpUo.js";
 import { Collapsible } from "./Collapsible.js";
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { B as SpinnerIcon, l as ChevronRightIcon, o as CheckIcon, p as DotIcon } from "../icons-CpfUer49.js";
+import { G as SpinnerIcon, f as ChevronRightIcon, g as DotIcon, l as CheckIcon } from "../icons-CQJ-aMnI.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ChainOfThought.tsx
@@ -34,6 +34,7 @@ function ChainOfThought({ className, ref, ...props }) {
 		ref,
 		className: cx("chain-of-thought", className),
 		...props,
+		"data-recipe": "disclosure-stack",
 		unstyled: true
 	});
 }

package/dist/components/ChatGptSignInScreen.js

@@ -1,7 +1,7 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { B as SpinnerIcon } from "../icons-CpfUer49.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { G as SpinnerIcon } from "../icons-CQJ-aMnI.js";
 import { Button } from "./Button.js";
-import { u as ModelSelectorLogo } from "../ModelSelector-SlJNgwKY.js";
+import { u as ModelSelectorLogo } from "../ModelSelector-Cqw_qrUG.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ChatGptSignInScreen.tsx
@@ -16,9 +16,6 @@ function ChatGptSignInScreen({ busy = false, error = false, label = "Sign in wit
 		onPointerLeave?.(event);
 		delete event.currentTarget.dataset.pointerActive;
 	};
-	const handleButtonPointerMove = (event) => {
-		setPointerPosition(event.currentTarget, event, "chatgpt-sign-in-button");
-	};
 	return /* @__PURE__ */ jsx("main", {
 		ref,
 		className: cx("chatgpt-sign-in", className),
@@ -42,12 +39,12 @@ function ChatGptSignInScreen({ busy = false, error = false, label = "Sign in wit
 				type: "button",
 				variant: "normal",
 				color: error ? "destructive" : "primary",
-				size: "lg",
+				size: "sm",
 				className: "chatgpt-sign-in__button",
 				"data-busy": busy ? "true" : void 0,
 				disabled: busy,
 				onClick: onSignIn,
-				onPointerMove: handleButtonPointerMove,
+				onPointerMove: handleSignInButtonPointerMove,
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "chatgpt-sign-in__button-icon",
 					children: busy ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 16 }) : /* @__PURE__ */ jsx(ModelSelectorLogo, {
@@ -62,6 +59,9 @@ function ChatGptSignInScreen({ busy = false, error = false, label = "Sign in wit
 		})
 	});
 }
+function handleSignInButtonPointerMove(event) {
+	setPointerPosition(event.currentTarget, event, "chatgpt-sign-in-button");
+}
 function setPointerPosition(element, event, name) {
 	const rect = element.getBoundingClientRect();
 	if (rect.width === 0 || rect.height === 0) return;

package/dist/components/Checkbox.d.ts

@@ -5,10 +5,7 @@ import { Checkbox as Checkbox$1, CheckboxRootProps } from "@base-ui/react/checkb
 /**
  * Props for the Checkbox component.
  */
-interface CheckboxProps extends Omit<CheckboxRootProps, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface CheckboxProps extends CheckboxRootProps {}
 /**
  * An accessible checkbox component with custom styling.
  *
@@ -33,6 +30,7 @@ declare function CheckboxRoot({
 }): React.JSX.Element;
 declare function CheckboxIndicator({
   children,
+  className,
   ...props
 }: Checkbox$1.Indicator.Props): React.JSX.Element;
 declare const Checkbox: {