@mcp-b/react-components 0.11.0 → 0.13.0

package/dist/components/ContextMenu.js

@@ -1,6 +1,6 @@
-import { a as CheckIcon, c as ChevronRightIcon, u as DotIcon } from "../icons-D2Q5n5C1.js";
+import { a as CheckIcon, u as DotIcon } from "../icons-Ba9THQKz.js";
 import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";
 //#region src/components/ContextMenu.tsx
 /**
@@ -55,7 +55,11 @@ const ContextMenuPortal = (props) => {
 * Positions the menu at the pointer location.
 */
 function ContextMenuPositioner({ className = "", ref, ...props }) {
-	const classes = ["context-menu__positioner", className].filter(Boolean).join(" ");
+	const classes = [
+		"context-menu__positioner",
+		"base-ui-positioner",
+		className
+	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(ContextMenu$1.Positioner, {
 		ref,
 		"data-slot": "context-menu-positioner",
@@ -67,7 +71,11 @@ function ContextMenuPositioner({ className = "", ref, ...props }) {
 * Container for menu items.
 */
 function ContextMenuPopup({ className = "", ref, ...props }) {
-	const classes = ["context-menu__popup", className].filter(Boolean).join(" ");
+	const classes = [
+		"context-menu__popup",
+		"base-ui-popup",
+		className
+	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(ContextMenu$1.Popup, {
 		ref,
 		"data-slot": "context-menu-content",
@@ -75,23 +83,6 @@ function ContextMenuPopup({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function ContextMenuContent({ anchor, positionMethod, side, sideOffset, align, alignOffset, collisionBoundary, collisionPadding, sticky, arrowPadding, disableAnchorTracking, collisionAvoidance, ...props }) {
-	return /* @__PURE__ */ jsx(ContextMenuPortal, { children: /* @__PURE__ */ jsx(ContextMenuPositioner, {
-		anchor,
-		positionMethod,
-		side,
-		sideOffset,
-		align,
-		alignOffset,
-		collisionBoundary,
-		collisionPadding,
-		sticky,
-		arrowPadding,
-		disableAnchorTracking,
-		collisionAvoidance,
-		children: /* @__PURE__ */ jsx(ContextMenuPopup, { ...props })
-	}) });
-}
 /**
 * Interactive menu item.
 */
@@ -131,7 +122,7 @@ function ContextMenuGroup({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function ContextMenuLabel({ className = "", inset, ref, ...props }) {
+function ContextMenuGroupLabel({ className = "", inset, ref, ...props }) {
 	const classes = [
 		"context-menu__label",
 		inset && "context-menu__label--inset",
@@ -145,17 +136,20 @@ function ContextMenuLabel({ className = "", inset, ref, ...props }) {
 		...props
 	});
 }
-function ContextMenuCheckboxItem({ className = "", children, ref, ...props }) {
+function ContextMenuCheckboxItem({ className = "", ref, ...props }) {
 	const classes = ["context-menu__checkbox-item", className].filter(Boolean).join(" ");
-	return /* @__PURE__ */ jsxs(ContextMenu$1.CheckboxItem, {
+	return /* @__PURE__ */ jsx(ContextMenu$1.CheckboxItem, {
 		ref,
 		"data-slot": "context-menu-checkbox-item",
 		className: classes,
+		...props
+	});
+}
+function ContextMenuCheckboxItemIndicator(props) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.CheckboxItemIndicator, {
+		className: "context-menu__indicator",
 		...props,
-		children: [/* @__PURE__ */ jsx(ContextMenu$1.CheckboxItemIndicator, {
-			className: "context-menu__indicator",
-			children: /* @__PURE__ */ jsx(CheckIcon, {})
-		}), children]
+		children: props.children ?? /* @__PURE__ */ jsx(CheckIcon, {})
 	});
 }
 function ContextMenuRadioGroup({ className = "", ref, ...props }) {
@@ -167,17 +161,20 @@ function ContextMenuRadioGroup({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function ContextMenuRadioItem({ className = "", children, ref, ...props }) {
+function ContextMenuRadioItem({ className = "", ref, ...props }) {
 	const classes = ["context-menu__radio-item", className].filter(Boolean).join(" ");
-	return /* @__PURE__ */ jsxs(ContextMenu$1.RadioItem, {
+	return /* @__PURE__ */ jsx(ContextMenu$1.RadioItem, {
 		ref,
 		"data-slot": "context-menu-radio-item",
 		className: classes,
+		...props
+	});
+}
+function ContextMenuRadioItemIndicator(props) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.RadioItemIndicator, {
+		className: "context-menu__indicator",
 		...props,
-		children: [/* @__PURE__ */ jsx(ContextMenu$1.RadioItemIndicator, {
-			className: "context-menu__indicator",
-			children: /* @__PURE__ */ jsx(DotIcon, { size: 8 })
-		}), children]
+		children: props.children ?? /* @__PURE__ */ jsx(DotIcon, { size: 8 })
 	});
 }
 function ContextMenuShortcut({ className = "", ref, ...props }) {
@@ -188,34 +185,24 @@ function ContextMenuShortcut({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function ContextMenuSub(props) {
+function ContextMenuSubmenuRoot(props) {
 	return /* @__PURE__ */ jsx(ContextMenu$1.SubmenuRoot, {
 		"data-slot": "context-menu-sub",
 		...props
 	});
 }
-function ContextMenuSubContent({ side = "right", align = "start", sideOffset = 4, ...props }) {
-	return /* @__PURE__ */ jsx(ContextMenuContent, {
-		"data-slot": "context-menu-sub-content",
-		side,
-		align,
-		sideOffset,
-		...props
-	});
-}
-function ContextMenuSubTrigger({ className = "", inset, children, ref, ...props }) {
+function ContextMenuSubmenuTrigger({ className = "", inset, ref, ...props }) {
 	const classes = [
 		"context-menu__submenu-trigger",
 		inset && "context-menu__item--inset",
 		className
 	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ jsxs(ContextMenu$1.SubmenuTrigger, {
+	return /* @__PURE__ */ jsx(ContextMenu$1.SubmenuTrigger, {
 		ref,
 		"data-slot": "context-menu-sub-trigger",
 		"data-inset": inset || void 0,
 		className: classes,
-		...props,
-		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "context-menu__submenu-icon" })]
+		...props
 	});
 }
 /**
@@ -247,24 +234,27 @@ function ContextMenuSubTrigger({ className = "", inset, children, ref, ...props
 *
 * @see {@link https://base-ui.com/react/components/context-menu | Base UI ContextMenu}
 */
-const ContextMenu = Object.assign(ContextMenuRoot, {
+const ContextMenu = {
 	Root: ContextMenuRoot,
 	Trigger: ContextMenuTrigger,
 	Portal: ContextMenuPortal,
 	Positioner: ContextMenuPositioner,
 	Popup: ContextMenuPopup,
-	Content: ContextMenuContent,
+	Backdrop: ContextMenu$1.Backdrop,
+	Arrow: ContextMenu$1.Arrow,
 	Item: ContextMenuItem,
 	Separator: ContextMenuSeparator,
 	Group: ContextMenuGroup,
-	Label: ContextMenuLabel,
+	GroupLabel: ContextMenuGroupLabel,
+	LinkItem: ContextMenu$1.LinkItem,
 	CheckboxItem: ContextMenuCheckboxItem,
+	CheckboxItemIndicator: ContextMenuCheckboxItemIndicator,
 	RadioGroup: ContextMenuRadioGroup,
 	RadioItem: ContextMenuRadioItem,
+	RadioItemIndicator: ContextMenuRadioItemIndicator,
 	Shortcut: ContextMenuShortcut,
-	Sub: ContextMenuSub,
-	SubContent: ContextMenuSubContent,
-	SubTrigger: ContextMenuSubTrigger
-});
+	SubmenuRoot: ContextMenuSubmenuRoot,
+	SubmenuTrigger: ContextMenuSubmenuTrigger
+};
 //#endregion
-export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPopup, ContextMenuPortal, ContextMenuPositioner, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRoot, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };
+export { ContextMenu };

package/dist/components/Conversation.d.ts

@@ -1,15 +1,11 @@
-import { t as Button } from "../Button-Ct5I6aTu.js";
+import { t as Button } from "../Button-FX_hpqxm.js";
 import { MessageScrollerButtonProps, MessageScrollerItemProps } from "./MessageScroller.js";
 import * as React from "react";
 import { UIMessage } from "ai";
 
 //#region src/components/Conversation.d.ts
-/** AI SDK `UIMessage`, or a plain text fallback for non-chat exports. */
-type ConversationMessage = UIMessage | {
-  id?: string;
-  role: string;
-  content?: string;
-};
+/** Whole AI SDK message accepted by transcript export helpers. */
+type ConversationMessage = UIMessage;
 interface ConversationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
   /** Additional class names for layout only; do not override scroll behavior from apps. */
   className?: string;

package/dist/components/Conversation.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { d as DownloadIcon, t as ArrowDownIcon } from "../icons-D2Q5n5C1.js";
+import { d as DownloadIcon, t as ArrowDownIcon } from "../icons-Ba9THQKz.js";
 import { Button } from "./Button.js";
 import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport } from "./MessageScroller.js";
 import * as React from "react";
@@ -133,11 +133,10 @@ function ConversationScrollButton({ className, variant = "outline", color = "neu
 const ROLE_HEADING = {
 	user: "### User",
 	assistant: "### Assistant",
-	system: "### System",
-	tool: "### Tool"
+	system: "### System"
 };
 function defaultFormatMessage(message) {
-	return `${ROLE_HEADING[message.role] ?? `### ${message.role}`}\n\n${("parts" in message ? message.parts.filter((part) => isTextUIPart(part) || isReasoningUIPart(part)).map((part) => part.text).join("") : message.content ?? "").trim()}`;
+	return `${ROLE_HEADING[message.role]}\n\n${message.parts.filter((part) => isTextUIPart(part) || isReasoningUIPart(part)).map((part) => part.text).join("").trim()}`;
 }
 /**
 * Converts a conversation to a Markdown document with a heading per message.

package/dist/components/Dialog.d.ts

@@ -8,6 +8,9 @@ interface DialogPortalProps extends Dialog$1.Portal.Props {}
 interface DialogBackdropProps extends Omit<Dialog$1.Backdrop.Props, "className"> {
   className?: string;
 }
+interface DialogViewportProps extends Omit<Dialog$1.Viewport.Props, "className"> {
+  className?: string;
+}
 interface DialogPopupProps extends Omit<Dialog$1.Popup.Props, "className"> {
   className?: string;
   /**
@@ -25,36 +28,31 @@ interface DialogDescriptionProps extends Omit<Dialog$1.Description.Props, "class
 interface DialogCloseProps extends Omit<Dialog$1.Close.Props, "className"> {
   className?: string;
 }
-type DialogOverlayProps = DialogBackdropProps;
-type DialogContentProps = DialogPopupProps & {
-  showCloseButton?: boolean;
-};
 interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
-interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
-  showCloseButton?: boolean;
-}
+interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
 /**
  * A dialog component for modal interactions.
  *
  * @example
  * ```tsx
- * <Dialog open={isOpen} onOpenChange={setIsOpen}>
- *   <DialogPortal>
- *     <DialogBackdrop />
- *     <DialogPopup>
- *       <DialogTitle>Confirm</DialogTitle>
- *       <DialogDescription>Are you sure?</DialogDescription>
- *       <DialogClose>Cancel</DialogClose>
- *     </DialogPopup>
- *   </DialogPortal>
- * </Dialog>
+ * <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
+ *   <Dialog.Trigger render={<Button />}>Open</Dialog.Trigger>
+ *   <Dialog.Portal>
+ *     <Dialog.Backdrop />
+ *     <Dialog.Viewport>
+ *       <Dialog.Popup>
+ *         <Dialog.Title>Confirm</Dialog.Title>
+ *         <Dialog.Description>Are you sure?</Dialog.Description>
+ *         <Dialog.Close>Cancel</Dialog.Close>
+ *       </Dialog.Popup>
+ *     </Dialog.Viewport>
+ *   </Dialog.Portal>
+ * </Dialog.Root>
  * ```
  *
  * @see {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
  */
-declare const Dialog: typeof Dialog$1.Root;
 declare function DialogTrigger(props: DialogTriggerProps): React.JSX.Element;
-declare const DialogPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare function DialogBackdrop({
   className,
   ref,
@@ -62,21 +60,19 @@ declare function DialogBackdrop({
 }: DialogBackdropProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-declare const DialogOverlay: typeof DialogBackdrop;
-declare function DialogPopup({
-  size,
+declare function DialogViewport({
   className,
   ref,
   ...props
-}: DialogPopupProps & {
+}: DialogViewportProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-declare function DialogContent({
-  children,
-  showCloseButton,
+declare function DialogPopup({
+  size,
+  className,
   ref,
   ...props
-}: DialogContentProps & {
+}: DialogPopupProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 declare function DialogHeader({
@@ -88,8 +84,6 @@ declare function DialogHeader({
 }): React.JSX.Element;
 declare function DialogFooter({
   className,
-  showCloseButton,
-  children,
   ref,
   ...props
 }: DialogFooterProps & {
@@ -116,5 +110,19 @@ declare function DialogClose({
 }: DialogCloseProps & {
   ref?: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element;
+declare const Dialog: {
+  Root: typeof Dialog$1.Root;
+  Trigger: typeof DialogTrigger;
+  Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Backdrop: typeof DialogBackdrop;
+  Viewport: typeof DialogViewport;
+  Popup: typeof DialogPopup;
+  Header: typeof DialogHeader;
+  Footer: typeof DialogFooter;
+  Title: typeof DialogTitle;
+  Description: typeof DialogDescription;
+  Close: typeof DialogClose;
+  createHandle: typeof Dialog$1.createHandle;
+};
 //#endregion
-export { Dialog, DialogBackdrop, DialogBackdropProps, DialogClose, DialogCloseProps, DialogContent, DialogContentProps, DialogDescription, DialogDescriptionProps, DialogFooter, DialogFooterProps, DialogHeader, DialogHeaderProps, DialogOverlay, DialogOverlayProps, DialogPopup, DialogPopupProps, DialogPortal, DialogPortalProps, DialogProps, DialogTitle, DialogTitleProps, DialogTrigger, DialogTriggerProps };
+export { Dialog, DialogBackdropProps, DialogCloseProps, DialogDescriptionProps, DialogFooterProps, DialogHeaderProps, DialogPopupProps, DialogPortalProps, DialogProps, DialogTitleProps, DialogTriggerProps, DialogViewportProps };

package/dist/components/Dialog.js

@@ -1,6 +1,5 @@
-import { L as XIcon } from "../icons-D2Q5n5C1.js";
 import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 //#region src/components/Dialog.tsx
 /**
@@ -8,30 +7,35 @@ import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 *
 * @example
 * ```tsx
-* <Dialog open={isOpen} onOpenChange={setIsOpen}>
-*   <DialogPortal>
-*     <DialogBackdrop />
-*     <DialogPopup>
-*       <DialogTitle>Confirm</DialogTitle>
-*       <DialogDescription>Are you sure?</DialogDescription>
-*       <DialogClose>Cancel</DialogClose>
-*     </DialogPopup>
-*   </DialogPortal>
-* </Dialog>
+* <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
+*   <Dialog.Trigger render={<Button />}>Open</Dialog.Trigger>
+*   <Dialog.Portal>
+*     <Dialog.Backdrop />
+*     <Dialog.Viewport>
+*       <Dialog.Popup>
+*         <Dialog.Title>Confirm</Dialog.Title>
+*         <Dialog.Description>Are you sure?</Dialog.Description>
+*         <Dialog.Close>Cancel</Dialog.Close>
+*       </Dialog.Popup>
+*     </Dialog.Viewport>
+*   </Dialog.Portal>
+* </Dialog.Root>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
 */
-const Dialog = Dialog$1.Root;
 function DialogTrigger(props) {
 	return /* @__PURE__ */ jsx(Dialog$1.Trigger, {
 		"data-slot": "dialog-trigger",
 		...props
 	});
 }
-const DialogPortal = Dialog$1.Portal;
 function DialogBackdrop({ className = "", ref, ...props }) {
-	const classes = ["dialog__backdrop", className].filter(Boolean).join(" ");
+	const classes = [
+		"dialog__backdrop",
+		"base-ui-backdrop",
+		className
+	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(Dialog$1.Backdrop, {
 		ref,
 		"data-slot": "dialog-overlay",
@@ -39,7 +43,15 @@ function DialogBackdrop({ className = "", ref, ...props }) {
 		...props
 	});
 }
-const DialogOverlay = DialogBackdrop;
+function DialogViewport({ className = "", ref, ...props }) {
+	const classes = ["dialog__viewport", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Dialog$1.Viewport, {
+		ref,
+		"data-slot": "dialog-viewport",
+		className: classes,
+		...props
+	});
+}
 function DialogPopup({ size = "md", className = "", ref, ...props }) {
 	const classes = [
 		"dialog__popup",
@@ -53,19 +65,6 @@ function DialogPopup({ size = "md", className = "", ref, ...props }) {
 		...props
 	});
 }
-function DialogContent({ children, showCloseButton = true, ref, ...props }) {
-	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, {}), /* @__PURE__ */ jsxs(DialogPopup, {
-		ref,
-		...props,
-		children: [children, showCloseButton ? /* @__PURE__ */ jsxs(DialogClose, {
-			className: "dialog__close--icon",
-			children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
-				className: "dialog__close-label",
-				children: "Close"
-			})]
-		}) : null]
-	})] });
-}
 function DialogHeader({ className = "", ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
@@ -74,13 +73,12 @@ function DialogHeader({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function DialogFooter({ className = "", showCloseButton = false, children, ref, ...props }) {
-	return /* @__PURE__ */ jsxs("div", {
+function DialogFooter({ className = "", ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
 		ref,
 		"data-slot": "dialog-footer",
 		className: ["dialog__footer", className].filter(Boolean).join(" "),
-		...props,
-		children: [children, showCloseButton ? /* @__PURE__ */ jsx(DialogClose, { children: "Close" }) : null]
+		...props
 	});
 }
 function DialogTitle({ className = "", ref, ...props }) {
@@ -110,5 +108,19 @@ function DialogClose({ className = "", ref, ...props }) {
 		...props
 	});
 }
+const Dialog = {
+	Root: Dialog$1.Root,
+	Trigger: DialogTrigger,
+	Portal: Dialog$1.Portal,
+	Backdrop: DialogBackdrop,
+	Viewport: DialogViewport,
+	Popup: DialogPopup,
+	Header: DialogHeader,
+	Footer: DialogFooter,
+	Title: DialogTitle,
+	Description: DialogDescription,
+	Close: DialogClose,
+	createHandle: Dialog$1.createHandle
+};
 //#endregion
-export { Dialog, DialogBackdrop, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPopup, DialogPortal, DialogTitle, DialogTrigger };
+export { Dialog };

package/dist/components/EnvironmentVariables.d.ts

@@ -1,4 +1,4 @@
-import { r as ButtonProps } from "../Button-Ct5I6aTu.js";
+import { t as CopyButtonProps } from "../copy-button-DtPMgN7e.js";
 import * as React from "react";
 
 //#region src/components/EnvironmentVariables.d.ts
@@ -142,15 +142,10 @@ declare function EnvironmentVariableValue({
   ref?: React.Ref<HTMLSpanElement>;
 }): React.JSX.Element;
 type EnvironmentVariableCopyFormat = "name" | "value" | "export";
-interface EnvironmentVariableCopyButtonProps extends Omit<ButtonProps, "children" | "variant" | "size" | "color" | "className" | "onClick" | "onError"> {
+interface EnvironmentVariableCopyButtonProps extends Omit<CopyButtonProps, "label" | "stopPropagation" | "text"> {
   format?: EnvironmentVariableCopyFormat;
   copyFormat?: EnvironmentVariableCopyFormat;
   label?: string;
-  className?: string;
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  onCopy?: () => void;
-  onError?: (error: Error) => void;
-  timeout?: number;
 }
 declare function EnvironmentVariableCopyButton({
   className,

package/dist/components/EnvironmentVariables.js

@@ -1,9 +1,8 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { a as CheckIcon, l as CopyIcon, m as EyeOffIcon, p as EyeIcon } from "../icons-D2Q5n5C1.js";
-import { Button } from "./Button.js";
-import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
+import { m as EyeOffIcon, p as EyeIcon } from "../icons-Ba9THQKz.js";
+import { t as CopyButton } from "../copy-button-DUMLYdsk.js";
 import { Badge } from "./Badge.js";
-import { Switch, SwitchThumb } from "./Switch.js";
+import { Switch } from "./Switch.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/EnvironmentVariables.tsx
@@ -106,11 +105,11 @@ function EnvironmentVariablesToggle({ className, label = "Show values", ref, ...
 				className: "environment-variables__toggle-label",
 				children: label
 			}),
-			/* @__PURE__ */ jsx(Switch, {
+			/* @__PURE__ */ jsx(Switch.Root, {
 				checked: showValues,
 				onCheckedChange: setShowValues,
 				size: "sm",
-				children: /* @__PURE__ */ jsx(SwitchThumb, {})
+				children: /* @__PURE__ */ jsx(Switch.Thumb, {})
 			})
 		]
 	});
@@ -171,41 +170,19 @@ function EnvironmentVariableValue({ className, children, ref, ...props }) {
 }
 function EnvironmentVariableCopyButton({ className, format = "value", copyFormat, label, onClick, onCopy, onError, timeout = 1500, ...props }) {
 	const { name, value } = useVariableContext();
-	const [copied, setCopied] = React.useState(false);
-	const timeoutRef = React.useRef(null);
 	const resolvedFormat = copyFormat ?? format;
 	const text = resolvedFormat === "name" ? name : resolvedFormat === "export" ? `export ${name}="${value}"` : value;
 	const buttonLabel = label ?? `Copy ${resolvedFormat}`;
-	const handleClick = React.useCallback(async (e) => {
-		try {
-			await navigator.clipboard.writeText(text);
-			setCopied(true);
-			onCopy?.();
-			if (timeoutRef.current !== null) window.clearTimeout(timeoutRef.current);
-			timeoutRef.current = window.setTimeout(() => setCopied(false), timeout);
-		} catch (error) {
-			onError?.(error);
-		}
-		onClick?.(e);
-	}, [
-		onClick,
-		onCopy,
-		onError,
+	return /* @__PURE__ */ jsx(CopyButton, {
+		...props,
 		text,
-		timeout
-	]);
-	React.useEffect(() => () => {
-		if (timeoutRef.current !== null) window.clearTimeout(timeoutRef.current);
-	}, []);
-	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(Button, {
-		variant: "ghost",
-		size: "icon",
-		"aria-label": buttonLabel,
+		label: buttonLabel,
+		timeout,
 		className: cx("environment-variables__copy", className),
-		...props,
-		onClick: handleClick,
-		children: copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {})
-	}) }), /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipPositioner, { children: /* @__PURE__ */ jsx(TooltipPopup, { children: copied ? "Copied" : buttonLabel }) }) })] });
+		onCopy,
+		onError,
+		onClick
+	});
 }
 function EnvironmentVariableRequired({ className, children, ref, ...props }) {
 	return /* @__PURE__ */ jsx(Badge, {

package/dist/components/Field.d.ts

@@ -186,7 +186,6 @@ declare function FieldError({
  * </Field.Root>
  * ```
  */
-declare const FieldValidity: React.FC<import("@base-ui/react").FieldValidityProps>;
 declare function FieldSet({
   className,
   ref,
@@ -263,12 +262,13 @@ declare function FieldSeparator({
  *
  * @see {@link https://base-ui.com/react/components/field | Base UI Field}
  */
-declare const Field: typeof FieldRoot & {
+declare const Field: {
   Root: typeof FieldRoot;
   Label: typeof FieldLabel;
   Control: typeof FieldControl;
   Description: typeof FieldDescription;
   Error: typeof FieldError;
+  Item: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").FieldItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
   Validity: React.FC<import("@base-ui/react").FieldValidityProps>;
   Set: typeof FieldSet;
   Legend: typeof FieldLegend;
@@ -278,4 +278,4 @@ declare const Field: typeof FieldRoot & {
   Separator: typeof FieldSeparator;
 };
 //#endregion
-export { Field, FieldContent, FieldContentProps, FieldControl, FieldControlProps, FieldDescription, FieldDescriptionProps, FieldError, FieldErrorProps, FieldGroup, FieldGroupProps, FieldLabel, FieldLabelProps, FieldLegend, FieldLegendProps, FieldRoot, FieldRootProps, FieldSeparator, FieldSeparatorProps, FieldSet, FieldSetProps, FieldTitle, FieldTitleProps, FieldValidity, FieldValidityProps };
+export { Field, FieldContentProps, FieldControlProps, FieldDescriptionProps, FieldErrorProps, FieldGroupProps, FieldLabelProps, FieldLegendProps, FieldRootProps, FieldSeparatorProps, FieldSetProps, FieldTitleProps, FieldValidityProps };

package/dist/components/Field.js

@@ -163,7 +163,6 @@ function FieldError({ className = "", errors, children, ref, ...props }) {
 * </Field.Root>
 * ```
 */
-const FieldValidity = Field$1.Validity;
 function FieldSet({ className = "", ref, ...props }) {
 	return /* @__PURE__ */ jsx("fieldset", {
 		ref,
@@ -192,7 +191,7 @@ function FieldContent({ className = "", ref, ...props }) {
 function FieldTitle({ className = "", ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
-		"data-slot": "field-label",
+		"data-slot": "field-title",
 		className: ["field-title", className].filter(Boolean).join(" "),
 		...props
 	});
@@ -206,12 +205,11 @@ function FieldGroup({ className = "", ref, ...props }) {
 	});
 }
 function FieldSeparator({ className = "", children, ref, ...props }) {
-	const classes = ["field-separator", className].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		"data-slot": "field-separator",
 		"data-content": Boolean(children),
-		className: classes,
+		className: ["field-separator", className].filter(Boolean).join(" "),
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
@@ -256,19 +254,20 @@ function FieldSeparator({ className = "", children, ref, ...props }) {
 *
 * @see {@link https://base-ui.com/react/components/field | Base UI Field}
 */
-const Field = Object.assign(FieldRoot, {
+const Field = {
 	Root: FieldRoot,
 	Label: FieldLabel,
 	Control: FieldControl,
 	Description: FieldDescription,
 	Error: FieldError,
-	Validity: FieldValidity,
+	Item: Field$1.Item,
+	Validity: Field$1.Validity,
 	Set: FieldSet,
 	Legend: FieldLegend,
 	Content: FieldContent,
 	Title: FieldTitle,
 	Group: FieldGroup,
 	Separator: FieldSeparator
-});
+};
 //#endregion
-export { Field, FieldContent, FieldControl, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldRoot, FieldSeparator, FieldSet, FieldTitle, FieldValidity };
+export { Field };