@mcp-b/react-components 0.11.0 → 0.13.0

package/dist/components/AlertDialog.d.ts

@@ -9,6 +9,9 @@ interface AlertDialogTriggerProps extends Omit<React.ComponentPropsWithRef<typeo
 interface AlertDialogBackdropProps extends Omit<React.ComponentPropsWithRef<typeof AlertDialog$1.Backdrop>, "className"> {
   className?: string;
 }
+interface AlertDialogViewportProps extends Omit<React.ComponentPropsWithRef<typeof AlertDialog$1.Viewport>, "className"> {
+  className?: string;
+}
 interface AlertDialogPopupProps extends Omit<React.ComponentPropsWithRef<typeof AlertDialog$1.Popup>, "className"> {
   className?: string;
   /**
@@ -31,10 +34,6 @@ interface AlertDialogCloseProps extends Omit<React.ComponentPropsWithRef<typeof
    */
   variant?: "primary" | "secondary" | "destructive" | "outline" | "ghost";
 }
-type AlertDialogOverlayProps = AlertDialogBackdropProps;
-type AlertDialogContentProps = AlertDialogPopupProps;
-type AlertDialogActionProps = AlertDialogCloseProps;
-type AlertDialogCancelProps = AlertDialogCloseProps;
 interface AlertDialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
 interface AlertDialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
 interface AlertDialogMediaProps extends React.HTMLAttributes<HTMLDivElement> {}
@@ -44,27 +43,28 @@ interface AlertDialogMediaProps extends React.HTMLAttributes<HTMLDivElement> {}
  *
  * @example
  * ```tsx
- * <AlertDialog>
- *   <AlertDialogTrigger>Delete Account</AlertDialogTrigger>
- *   <AlertDialogPortal>
- *     <AlertDialogBackdrop />
- *     <AlertDialogPopup>
- *       <AlertDialogTitle>Are you sure?</AlertDialogTitle>
- *       <AlertDialogDescription>
+ * <AlertDialog.Root>
+ *   <AlertDialog.Trigger>Delete Account</AlertDialog.Trigger>
+ *   <AlertDialog.Portal>
+ *     <AlertDialog.Backdrop />
+ *     <AlertDialog.Viewport>
+ *       <AlertDialog.Popup>
+ *       <AlertDialog.Title>Are you sure?</AlertDialog.Title>
+ *       <AlertDialog.Description>
  *         This action cannot be undone.
- *       </AlertDialogDescription>
+ *       </AlertDialog.Description>
  *       <div style={{ display: "flex", gap: "0.5rem", justifyContent: "flex-end" }}>
- *         <AlertDialogClose>Cancel</AlertDialogClose>
- *         <AlertDialogClose variant="destructive">Delete</AlertDialogClose>
+ *         <AlertDialog.Close>Cancel</AlertDialog.Close>
+ *         <AlertDialog.Close variant="destructive">Delete</AlertDialog.Close>
  *       </div>
- *     </AlertDialogPopup>
- *   </AlertDialogPortal>
- * </AlertDialog>
+ *       </AlertDialog.Popup>
+ *     </AlertDialog.Viewport>
+ *   </AlertDialog.Portal>
+ * </AlertDialog.Root>
  * ```
  *
  * @see {@link https://base-ui.com/react/components/alert-dialog | Base UI Alert Dialog}
  */
-declare const AlertDialog: typeof AlertDialog$1.Root;
 declare function AlertDialogTrigger({
   className,
   ref,
@@ -72,7 +72,6 @@ declare function AlertDialogTrigger({
 }: AlertDialogTriggerProps & {
   ref?: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element;
-declare const AlertDialogPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare function AlertDialogBackdrop({
   className,
   ref,
@@ -80,19 +79,19 @@ declare function AlertDialogBackdrop({
 }: AlertDialogBackdropProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-declare const AlertDialogOverlay: typeof AlertDialogBackdrop;
-declare function AlertDialogPopup({
-  size,
+declare function AlertDialogViewport({
   className,
   ref,
   ...props
-}: AlertDialogPopupProps & {
+}: AlertDialogViewportProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-declare function AlertDialogContent({
+declare function AlertDialogPopup({
+  size,
+  className,
   ref,
   ...props
-}: AlertDialogContentProps & {
+}: AlertDialogPopupProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 declare function AlertDialogHeader({
@@ -138,11 +137,20 @@ declare function AlertDialogClose({
 }: AlertDialogCloseProps & {
   ref?: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element;
-declare function AlertDialogAction(props: AlertDialogActionProps & {
-  ref?: React.Ref<HTMLButtonElement>;
-}): React.JSX.Element;
-declare function AlertDialogCancel(props: AlertDialogCancelProps & {
-  ref?: React.Ref<HTMLButtonElement>;
-}): React.JSX.Element;
+declare const AlertDialog: {
+  Root: typeof AlertDialog$1.Root;
+  Trigger: typeof AlertDialogTrigger;
+  Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Backdrop: typeof AlertDialogBackdrop;
+  Viewport: typeof AlertDialogViewport;
+  Popup: typeof AlertDialogPopup;
+  Header: typeof AlertDialogHeader;
+  Footer: typeof AlertDialogFooter;
+  Media: typeof AlertDialogMedia;
+  Title: typeof AlertDialogTitle;
+  Description: typeof AlertDialogDescription;
+  Close: typeof AlertDialogClose;
+  createHandle: typeof AlertDialog$1.createHandle;
+};
 //#endregion
-export { AlertDialog, AlertDialogAction, AlertDialogActionProps, AlertDialogBackdrop, AlertDialogBackdropProps, AlertDialogCancel, AlertDialogCancelProps, AlertDialogClose, AlertDialogCloseProps, AlertDialogContent, AlertDialogContentProps, AlertDialogDescription, AlertDialogDescriptionProps, AlertDialogFooter, AlertDialogFooterProps, AlertDialogHeader, AlertDialogHeaderProps, AlertDialogMedia, AlertDialogMediaProps, AlertDialogOverlay, AlertDialogOverlayProps, AlertDialogPopup, AlertDialogPopupProps, AlertDialogPortal, AlertDialogProps, AlertDialogTitle, AlertDialogTitleProps, AlertDialogTrigger, AlertDialogTriggerProps };
+export { AlertDialog, AlertDialogBackdropProps, AlertDialogCloseProps, AlertDialogDescriptionProps, AlertDialogFooterProps, AlertDialogHeaderProps, AlertDialogMediaProps, AlertDialogPopupProps, AlertDialogProps, AlertDialogTitleProps, AlertDialogTriggerProps, AlertDialogViewportProps };

package/dist/components/AlertDialog.js

@@ -1,5 +1,5 @@
 import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
 //#region src/components/AlertDialog.tsx
 /**
@@ -8,27 +8,28 @@ import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
 *
 * @example
 * ```tsx
-* <AlertDialog>
-*   <AlertDialogTrigger>Delete Account</AlertDialogTrigger>
-*   <AlertDialogPortal>
-*     <AlertDialogBackdrop />
-*     <AlertDialogPopup>
-*       <AlertDialogTitle>Are you sure?</AlertDialogTitle>
-*       <AlertDialogDescription>
+* <AlertDialog.Root>
+*   <AlertDialog.Trigger>Delete Account</AlertDialog.Trigger>
+*   <AlertDialog.Portal>
+*     <AlertDialog.Backdrop />
+*     <AlertDialog.Viewport>
+*       <AlertDialog.Popup>
+*       <AlertDialog.Title>Are you sure?</AlertDialog.Title>
+*       <AlertDialog.Description>
 *         This action cannot be undone.
-*       </AlertDialogDescription>
+*       </AlertDialog.Description>
 *       <div style={{ display: "flex", gap: "0.5rem", justifyContent: "flex-end" }}>
-*         <AlertDialogClose>Cancel</AlertDialogClose>
-*         <AlertDialogClose variant="destructive">Delete</AlertDialogClose>
+*         <AlertDialog.Close>Cancel</AlertDialog.Close>
+*         <AlertDialog.Close variant="destructive">Delete</AlertDialog.Close>
 *       </div>
-*     </AlertDialogPopup>
-*   </AlertDialogPortal>
-* </AlertDialog>
+*       </AlertDialog.Popup>
+*     </AlertDialog.Viewport>
+*   </AlertDialog.Portal>
+* </AlertDialog.Root>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/alert-dialog | Base UI Alert Dialog}
 */
-const AlertDialog = AlertDialog$1.Root;
 function AlertDialogTrigger({ className = "", ref, ...props }) {
 	const classes = ["alert-dialog__trigger", className].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(AlertDialog$1.Trigger, {
@@ -38,9 +39,12 @@ function AlertDialogTrigger({ className = "", ref, ...props }) {
 		...props
 	});
 }
-const AlertDialogPortal = AlertDialog$1.Portal;
 function AlertDialogBackdrop({ className = "", ref, ...props }) {
-	const classes = ["alert-dialog__backdrop", className].filter(Boolean).join(" ");
+	const classes = [
+		"alert-dialog__backdrop",
+		"base-ui-backdrop",
+		className
+	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(AlertDialog$1.Backdrop, {
 		ref,
 		"data-slot": "alert-dialog-overlay",
@@ -48,7 +52,15 @@ function AlertDialogBackdrop({ className = "", ref, ...props }) {
 		...props
 	});
 }
-const AlertDialogOverlay = AlertDialogBackdrop;
+function AlertDialogViewport({ className = "", ref, ...props }) {
+	const classes = ["alert-dialog__viewport", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(AlertDialog$1.Viewport, {
+		ref,
+		"data-slot": "alert-dialog-viewport",
+		className: classes,
+		...props
+	});
+}
 function AlertDialogPopup({ size = "md", className = "", ref, ...props }) {
 	const classes = [
 		"alert-dialog__popup",
@@ -62,12 +74,6 @@ function AlertDialogPopup({ size = "md", className = "", ref, ...props }) {
 		...props
 	});
 }
-function AlertDialogContent({ ref, ...props }) {
-	return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogBackdrop, {}), /* @__PURE__ */ jsx(AlertDialogPopup, {
-		ref,
-		...props
-	})] });
-}
 function AlertDialogHeader({ className = "", ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
@@ -123,19 +129,20 @@ function AlertDialogClose({ variant = "secondary", className = "", ref, ...props
 		...props
 	});
 }
-function AlertDialogAction(props) {
-	return /* @__PURE__ */ jsx(AlertDialogClose, {
-		"data-slot": "alert-dialog-action",
-		variant: "primary",
-		...props
-	});
-}
-function AlertDialogCancel(props) {
-	return /* @__PURE__ */ jsx(AlertDialogClose, {
-		"data-slot": "alert-dialog-cancel",
-		variant: "outline",
-		...props
-	});
-}
+const AlertDialog = {
+	Root: AlertDialog$1.Root,
+	Trigger: AlertDialogTrigger,
+	Portal: AlertDialog$1.Portal,
+	Backdrop: AlertDialogBackdrop,
+	Viewport: AlertDialogViewport,
+	Popup: AlertDialogPopup,
+	Header: AlertDialogHeader,
+	Footer: AlertDialogFooter,
+	Media: AlertDialogMedia,
+	Title: AlertDialogTitle,
+	Description: AlertDialogDescription,
+	Close: AlertDialogClose,
+	createHandle: AlertDialog$1.createHandle
+};
 //#endregion
-export { AlertDialog, AlertDialogAction, AlertDialogBackdrop, AlertDialogCancel, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPopup, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };
+export { AlertDialog };

package/dist/components/Artifact.d.ts

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

package/dist/components/Artifact.js

@@ -1,7 +1,7 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { L as XIcon } from "../icons-D2Q5n5C1.js";
+import { z as XIcon } from "../icons-Ba9THQKz.js";
 import { Button } from "./Button.js";
-import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
+import { Tooltip } from "./Tooltip.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Artifact.tsx
@@ -91,17 +91,17 @@ function ArtifactAction({ className, label, tooltip, icon, children, ...props })
 		}) : null]
 	});
 	if (!tooltip) return button;
-	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: button }), /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipPositioner, { children: /* @__PURE__ */ jsx(TooltipPopup, { children: tooltip }) }) })] });
+	return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { render: button }), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, { children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: tooltip }) }) })] });
 }
 function ArtifactClose({ className, label = "Close", children, ...props }) {
-	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(Button, {
+	return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { render: /* @__PURE__ */ jsx(Button, {
 		variant: "ghost",
 		size: "icon",
 		"aria-label": label,
 		className: cx("artifact__close", className),
 		...props,
 		children: children ?? /* @__PURE__ */ jsx(XIcon, {})
-	}) }), /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipPositioner, { children: /* @__PURE__ */ jsx(TooltipPopup, { children: label }) }) })] });
+	}) }), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, { children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: label }) }) })] });
 }
 function ArtifactContent({ className, children, ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {

package/dist/components/Autocomplete.js

@@ -30,7 +30,11 @@ function Clear({ className = "", ref, ...props }) {
 	});
 }
 function Positioner({ className = "", ref, ...props }) {
-	const classes = ["autocomplete__positioner", className].filter(Boolean).join(" ");
+	const classes = [
+		"autocomplete__positioner",
+		"base-ui-positioner",
+		className
+	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(Autocomplete$1.Positioner, {
 		ref,
 		"data-slot": "autocomplete-positioner",
@@ -39,7 +43,11 @@ function Positioner({ className = "", ref, ...props }) {
 	});
 }
 function Popup({ className = "", ref, ...props }) {
-	const classes = ["autocomplete__popup", className].filter(Boolean).join(" ");
+	const classes = [
+		"autocomplete__popup",
+		"base-ui-popup",
+		className
+	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(Autocomplete$1.Popup, {
 		ref,
 		"data-slot": "autocomplete-content",

package/dist/components/Avatar.d.ts

@@ -122,7 +122,7 @@ declare function AvatarBadge({
  *
  * @see {@link https://base-ui.com/react/components/avatar | Base UI Avatar}
  */
-declare const Avatar: typeof AvatarRoot & {
+declare const Avatar: {
   Root: typeof AvatarRoot;
   Image: typeof AvatarImage;
   Fallback: typeof AvatarFallback;
@@ -131,4 +131,4 @@ declare const Avatar: typeof AvatarRoot & {
   Badge: typeof AvatarBadge;
 };
 //#endregion
-export { Avatar, AvatarBadge, AvatarBadgeProps, AvatarFallback, AvatarFallbackProps, AvatarGroup, AvatarGroupCount, AvatarGroupCountProps, AvatarGroupProps, AvatarImage, AvatarImageProps, AvatarRoot, AvatarRootProps };
+export { Avatar, AvatarBadgeProps, AvatarFallbackProps, AvatarGroupCountProps, AvatarGroupProps, AvatarImageProps, AvatarRootProps };

package/dist/components/Avatar.js

@@ -106,13 +106,13 @@ function AvatarBadge({ className = "", ref, ...props }) {
 *
 * @see {@link https://base-ui.com/react/components/avatar | Base UI Avatar}
 */
-const Avatar = Object.assign(AvatarRoot, {
+const Avatar = {
 	Root: AvatarRoot,
 	Image: AvatarImage,
 	Fallback: AvatarFallback,
 	Group: AvatarGroup,
 	GroupCount: AvatarGroupCount,
 	Badge: AvatarBadge
-});
+};
 //#endregion
-export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, AvatarRoot };
+export { Avatar };

package/dist/components/Badge.d.ts

@@ -3,9 +3,8 @@ import * as React from "react";
 //#region src/components/Badge.d.ts
 type BadgeVariant = "normal" | "outline" | "ghost" | "link";
 type BadgeColor = "neutral" | "primary" | "success" | "destructive" | "warning";
-type ShadcnBadgeVariant = "default" | "secondary" | "destructive" | "outline" | "ghost" | "link";
 interface BadgeVariantsOptions {
-  variant?: ShadcnBadgeVariant | BadgeVariant | null;
+  variant?: BadgeVariant | null;
   color?: BadgeColor | null;
   size?: "sm" | "md" | null;
   className?: string;
@@ -16,12 +15,15 @@ declare function badgeVariants({
   size,
   className
 }?: BadgeVariantsOptions): string;
+type SlottableBadgeProps = React.HTMLAttributes<HTMLElement> & {
+  ref?: React.Ref<HTMLElement>;
+};
 interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
   /**
    * The visual rendering style of the badge.
-   * @default 'default'
+   * @default 'normal'
    */
-  variant?: ShadcnBadgeVariant | BadgeVariant;
+  variant?: BadgeVariant;
   /**
    * The semantic color intent of the badge.
    * @default 'primary'
@@ -32,13 +34,8 @@ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
    * @default 'md'
    */
   size?: "sm" | "md";
-  /**
-   * Render the badge styles onto the child element.
-   *
-   * Mirrors shadcn's `asChild` API for link badges and custom elements.
-   * @default false
-   */
-  asChild?: boolean;
+  /** Replaces the default span while preserving badge props and styles. */
+  render?: React.ReactElement<SlottableBadgeProps>;
 }
 /**
  * A badge component for highlighting status, labels, or categories.
@@ -49,7 +46,7 @@ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
  * <Badge color="success">Active</Badge>
  * <Badge color="warning">Pending</Badge>
  * <Badge variant="outline">Info</Badge>
- * <Badge asChild><a href="/docs">Docs</a></Badge>
+ * <Badge render={<a href="/docs" />}>Docs</Badge>
  * ```
  */
 declare function Badge({
@@ -57,7 +54,7 @@ declare function Badge({
   color,
   size,
   className,
-  asChild,
+  render,
   children,
   ref,
   ...props
@@ -65,4 +62,4 @@ declare function Badge({
   ref?: React.Ref<HTMLSpanElement>;
 }): React.JSX.Element;
 //#endregion
-export { Badge, BadgeColor, BadgeProps, BadgeVariant, BadgeVariantsOptions, ShadcnBadgeVariant, badgeVariants };
+export { Badge, BadgeColor, BadgeProps, BadgeVariant, BadgeVariantsOptions, badgeVariants };

package/dist/components/Badge.js

@@ -1,46 +1,23 @@
+import { n as mergeRefs } from "../merge-refs-DF_7w2x_.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Badge.tsx
-const SHADCN_BADGE_VARIANT = {
-	default: ["normal", "primary"],
-	secondary: ["normal", "neutral"],
-	destructive: ["normal", "destructive"],
-	outline: ["outline", "neutral"],
-	ghost: ["ghost", "neutral"],
-	link: ["link", "primary"]
-};
 const BADGE_VARIANT_DEFAULT_COLOR = {
 	normal: "primary",
 	outline: "neutral",
 	ghost: "neutral",
 	link: "primary"
 };
-function badgeVariants({ variant = "default", color, size = "md", className } = {}) {
-	const badgeVariant = variant ?? "default";
-	const mapped = badgeVariant === "normal" || badgeVariant === "outline" || badgeVariant === "ghost" || badgeVariant === "link" ? [badgeVariant, color ?? BADGE_VARIANT_DEFAULT_COLOR[badgeVariant]] : SHADCN_BADGE_VARIANT[badgeVariant];
+function badgeVariants({ variant = "normal", color, size = "md", className } = {}) {
+	const badgeVariant = variant ?? "normal";
 	return [
 		"badge",
-		`badge--${mapped[0]}`,
-		`badge--${color ?? mapped[1]}`,
+		`badge--${badgeVariant}`,
+		`badge--${color ?? BADGE_VARIANT_DEFAULT_COLOR[badgeVariant]}`,
 		size !== "md" && `badge--${size}`,
 		className
 	].filter(Boolean).join(" ");
 }
-function assignRef(ref, value) {
-	if (!ref) return;
-	if (typeof ref === "function") {
-		ref(value);
-		return;
-	}
-	ref.current = value;
-}
-function mergeRefs(...refs) {
-	const activeRefs = refs.filter(Boolean);
-	if (activeRefs.length === 0) return;
-	return (value) => {
-		for (const activeRef of activeRefs) assignRef(activeRef, value);
-	};
-}
 function isEventHandler(propName, value) {
 	return /^on[A-Z]/.test(propName) && typeof value === "function";
 }
@@ -77,23 +54,24 @@ function mergeSlottedBadgeProps(childProps, badgeProps) {
 * <Badge color="success">Active</Badge>
 * <Badge color="warning">Pending</Badge>
 * <Badge variant="outline">Info</Badge>
-* <Badge asChild><a href="/docs">Docs</a></Badge>
+* <Badge render={<a href="/docs" />}>Docs</Badge>
 * ```
 */
-function Badge({ variant = "default", color, size = "md", className, asChild = false, children, ref, ...props }) {
-	const badgeVariant = variant ?? "default";
+function Badge({ variant = "normal", color, size = "md", className, render, children, ref, ...props }) {
+	const badgeVariant = variant ?? "normal";
 	const classes = badgeVariants({
 		variant,
 		color,
 		size,
 		className
 	});
-	if (asChild && React.isValidElement(children)) return React.cloneElement(children, mergeSlottedBadgeProps(children.props, {
+	if (React.isValidElement(render)) return React.cloneElement(render, mergeSlottedBadgeProps(render.props, {
 		...props,
 		ref,
 		className: classes,
 		"data-slot": "badge",
-		"data-variant": badgeVariant
+		"data-variant": badgeVariant,
+		children
 	}));
 	return /* @__PURE__ */ jsx("span", {
 		ref,

package/dist/components/BrowserLiveView.d.ts

@@ -1,2 +1,2 @@
-import { n as BrowserLiveViewProps, t as BrowserLiveView } from "../BrowserLiveView-ZktFZiMD.js";
+import { n as BrowserLiveViewProps, t as BrowserLiveView } from "../BrowserLiveView-BV5qgFgI.js";
 export { BrowserLiveView, BrowserLiveViewProps };

package/dist/components/BrowserLiveView.js

@@ -1,7 +1,7 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { M as SpinnerIcon, x as MaximizeIcon } from "../icons-D2Q5n5C1.js";
+import { N as SpinnerIcon, x as MaximizeIcon } from "../icons-Ba9THQKz.js";
 import { Button } from "./Button.js";
-import { Dialog, DialogContent, DialogTitle } from "./Dialog.js";
+import { Dialog } from "./Dialog.js";
 import { Badge } from "./Badge.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -22,8 +22,8 @@ function EndedState({ title, detail }) {
 /**
 * Embeds a Browser Run Live View — a real-time, interactive view of the
 * agent's browser session. Links expire (~5 minutes), so the iframe swaps to
-* `fallback` (e.g. the last screenshot) once `expiresAt` passes. While the
-* hosted viewer connects, a quiet loading overlay hides the frame; if it
+* `fallback` (e.g. the last screenshot) once `source.expiresInMs` passes.
+* While the hosted viewer connects, a quiet loading overlay hides the frame; if it
 * never loads, the view degrades to `fallback` or an unavailable state. An
 * expand button opens the same view in a fullscreen dialog.
 *
@@ -39,13 +39,11 @@ function EndedState({ title, detail }) {
 * The iframe is unsandboxed by design: the hosted Live View UI needs scripts
 * and its own origin to stream the session. Only pass trusted Live View URLs.
 */
-function BrowserLiveView({ url, expiresAt, pageTitle, fallback, className, ...props }) {
-	const [expired, setExpired] = React.useState(() => expiresAt !== void 0 && expiresAt <= Date.now());
+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 [expandedOpen, setExpandedOpen] = React.useState(false);
 	React.useEffect(() => {
-		if (expiresAt === void 0) return;
-		const remaining = expiresAt - Date.now();
+		const remaining = (receivedAt ?? Date.now()) + source.expiresInMs - Date.now();
 		if (remaining <= 0) {
 			setExpired(true);
 			return;
@@ -53,10 +51,15 @@ function BrowserLiveView({ url, expiresAt, pageTitle, fallback, className, ...pr
 		setExpired(false);
 		const timer = setTimeout(() => setExpired(true), remaining);
 		return () => clearTimeout(timer);
-	}, [expiresAt]);
+	}, [
+		receivedAt,
+		source.expiresInMs,
+		source.targetId,
+		source.url
+	]);
 	React.useEffect(() => {
 		setFrameState("loading");
-	}, [url]);
+	}, [source.url]);
 	React.useEffect(() => {
 		if (frameState !== "loading") return;
 		const timer = setTimeout(() => setFrameState("failed"), FRAME_LOAD_TIMEOUT_MS);
@@ -77,7 +80,7 @@ function BrowserLiveView({ url, expiresAt, pageTitle, fallback, className, ...pr
 		}),
 		/* @__PURE__ */ jsx("iframe", {
 			className: "browser-live-view__frame",
-			src: url,
+			src: source.url,
 			title: frameTitle,
 			allow: "clipboard-read; clipboard-write",
 			onLoad: () => setFrameState("ready")
@@ -95,40 +98,31 @@ function BrowserLiveView({ url, expiresAt, pageTitle, fallback, className, ...pr
 		...props,
 		className: cx("browser-live-view", className),
 		"data-expired": expired || failed || void 0,
-		children: [
-			view,
-			/* @__PURE__ */ jsx(Button, {
-				variant: "ghost",
-				color: "neutral",
-				size: "icon-xs",
-				className: "browser-live-view__expand",
-				"aria-label": "Expand browser view",
-				onClick: () => setExpandedOpen(true),
-				children: /* @__PURE__ */ jsx(MaximizeIcon, {})
-			}),
-			/* @__PURE__ */ jsx(Dialog, {
-				open: expandedOpen,
-				onOpenChange: setExpandedOpen,
-				children: /* @__PURE__ */ jsxs(DialogContent, {
-					size: "fullscreen",
-					className: "browser-live-view__dialog",
-					children: [/* @__PURE__ */ jsx(DialogTitle, {
-						className: "browser-live-view__dialog-title",
-						children: frameTitle
-					}), /* @__PURE__ */ jsx("div", {
-						className: "browser-live-view__dialog-body",
-						children: live ? /* @__PURE__ */ jsx("iframe", {
-							src: url,
-							title: frameTitle,
-							allow: "clipboard-read; clipboard-write"
-						}) : fallback ?? /* @__PURE__ */ jsx(EndedState, {
-							title: failed ? "Live view unavailable" : "Live view ended",
-							detail: pageTitle
-						})
-					})]
+		children: [view, /* @__PURE__ */ jsxs(Dialog.Root, { children: [/* @__PURE__ */ jsx(Dialog.Trigger, { render: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			color: "neutral",
+			size: "icon-xs",
+			className: "browser-live-view__expand",
+			"aria-label": "Expand browser view",
+			children: /* @__PURE__ */ jsx(MaximizeIcon, {})
+		}) }), /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {}), /* @__PURE__ */ jsx(Dialog.Viewport, { children: /* @__PURE__ */ jsxs(Dialog.Popup, {
+			size: "fullscreen",
+			className: "browser-live-view__dialog",
+			children: [/* @__PURE__ */ jsx(Dialog.Title, {
+				className: "browser-live-view__dialog-title",
+				children: frameTitle
+			}), /* @__PURE__ */ jsx("div", {
+				className: "browser-live-view__dialog-body",
+				children: live ? /* @__PURE__ */ jsx("iframe", {
+					src: source.url,
+					title: frameTitle,
+					allow: "clipboard-read; clipboard-write"
+				}) : fallback ?? /* @__PURE__ */ jsx(EndedState, {
+					title: failed ? "Live view unavailable" : "Live view ended",
+					detail: pageTitle
 				})
-			})
-		]
+			})]
+		}) })] })] })]
 	});
 }
 //#endregion

package/dist/components/BrowserReplay.d.ts

@@ -1,2 +1,2 @@
-import { n as BrowserReplayProps, t as BrowserReplay } from "../BrowserReplay-6G-mnwcn.js";
+import { n as BrowserReplayProps, t as BrowserReplay } from "../BrowserReplay-xWvRjRAC.js";
 export { BrowserReplay, BrowserReplayProps };