@mcp-b/react-components 0.16.0 → 0.17.0

package/dist/components/Collapsible.d.ts

@@ -1,125 +1,2 @@
-import * as React from "react";
-import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
-
-//#region src/components/Collapsible.d.ts
-/**
- * Props for the Collapsible.Root component.
- */
-interface CollapsibleRootProps extends Omit<React.ComponentPropsWithoutRef<typeof Collapsible$1.Root>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-  /** Skip the default design-system Collapsible classes for internal composition. */
-  unstyled?: boolean;
-}
-/**
- * Props for the Collapsible.Trigger component.
- */
-interface CollapsibleTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof Collapsible$1.Trigger>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-  /** Skip the default design-system Collapsible classes for internal composition. */
-  unstyled?: boolean;
-}
-/**
- * Props for the Collapsible.Panel component.
- */
-interface CollapsiblePanelProps extends Omit<React.ComponentPropsWithoutRef<typeof Collapsible$1.Panel>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-  /** Skip the default design-system Collapsible classes for internal composition. */
-  unstyled?: boolean;
-}
-/**
- * Container that groups all collapsible parts. Renders a `<div>` element.
- *
- * @example
- * ```tsx
- * <Collapsible.Root>
- *   <Collapsible.Trigger>Show more</Collapsible.Trigger>
- *   <Collapsible.Panel>Hidden content here</Collapsible.Panel>
- * </Collapsible.Root>
- * ```
- *
- * @see {@link https://base-ui.com/react/components/collapsible | Base UI Collapsible}
- */
-declare function CollapsibleRoot({
-  className,
-  unstyled,
-  ref,
-  ...props
-}: CollapsibleRootProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-/**
- * Button that toggles the panel visibility. Renders a `<button>` element.
- */
-declare function CollapsibleTrigger({
-  className,
-  unstyled,
-  ref,
-  ...props
-}: CollapsibleTriggerProps & {
-  ref?: React.Ref<HTMLButtonElement>;
-}): React.JSX.Element;
-/**
- * The collapsible panel containing hidden content. Renders a `<div>` element.
- * Supports CSS animations via `--collapsible-panel-height` variable.
- */
-declare function CollapsiblePanel({
-  className,
-  unstyled,
-  ref,
-  ...props
-}: CollapsiblePanelProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-/**
- * A collapsible panel controlled by a button.
- * Useful for progressive disclosure of content.
- *
- * @example
- * ```tsx
- * // Basic usage
- * <Collapsible.Root>
- *   <Collapsible.Trigger>Toggle content</Collapsible.Trigger>
- *   <Collapsible.Panel>
- *     <p>This content can be shown or hidden.</p>
- *   </Collapsible.Panel>
- * </Collapsible.Root>
- * ```
- *
- * @example
- * ```tsx
- * // Controlled state
- * const [open, setOpen] = useState(false);
- *
- * <Collapsible.Root open={open} onOpenChange={setOpen}>
- *   <Collapsible.Trigger>
- *     {open ? 'Hide' : 'Show'} details
- *   </Collapsible.Trigger>
- *   <Collapsible.Panel>
- *     <p>Detailed information here.</p>
- *   </Collapsible.Panel>
- * </Collapsible.Root>
- * ```
- *
- * @example
- * ```tsx
- * // Default open
- * <Collapsible.Root defaultOpen>
- *   <Collapsible.Trigger>Collapse</Collapsible.Trigger>
- *   <Collapsible.Panel>
- *     <p>Initially visible content.</p>
- *   </Collapsible.Panel>
- * </Collapsible.Root>
- * ```
- *
- * @see {@link https://base-ui.com/react/components/collapsible | Base UI Collapsible}
- */
-declare const Collapsible: {
-  Root: typeof CollapsibleRoot;
-  Trigger: typeof CollapsibleTrigger;
-  Panel: typeof CollapsiblePanel;
-};
-//#endregion
+import { i as CollapsibleTriggerProps, n as CollapsiblePanelProps, r as CollapsibleRootProps, t as Collapsible } from "../Collapsible-N64ASIQr.js";
 export { Collapsible, CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps };

package/dist/components/Collapsible.js

@@ -1,3 +1,4 @@
+import { n as mergeBaseClassName } from "../class-names-Bk-QLWWI.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
@@ -15,8 +16,8 @@ import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
 *
 * @see {@link https://base-ui.com/react/components/collapsible | Base UI Collapsible}
 */
-function CollapsibleRoot({ className = "", unstyled = false, ref, ...props }) {
-	const classes = unstyled ? className : ["collapsible", className].filter(Boolean).join(" ");
+function CollapsibleRoot({ className, unstyled = false, ref, ...props }) {
+	const classes = unstyled ? className : mergeBaseClassName("collapsible", className);
 	return /* @__PURE__ */ jsx(Collapsible$1.Root, {
 		ref,
 		"data-slot": "collapsible",
@@ -27,8 +28,8 @@ function CollapsibleRoot({ className = "", unstyled = false, ref, ...props }) {
 /**
 * Button that toggles the panel visibility. Renders a `<button>` element.
 */
-function CollapsibleTrigger({ className = "", unstyled = false, ref, ...props }) {
-	const classes = unstyled ? className : ["collapsible__trigger", className].filter(Boolean).join(" ");
+function CollapsibleTrigger({ className, unstyled = false, ref, ...props }) {
+	const classes = unstyled ? className : mergeBaseClassName("collapsible__trigger", className);
 	return /* @__PURE__ */ jsx(Collapsible$1.Trigger, {
 		ref,
 		"data-slot": "collapsible-trigger",
@@ -40,12 +41,8 @@ function CollapsibleTrigger({ className = "", unstyled = false, ref, ...props })
 * The collapsible panel containing hidden content. Renders a `<div>` element.
 * Supports CSS animations via `--collapsible-panel-height` variable.
 */
-function CollapsiblePanel({ className = "", unstyled = false, ref, ...props }) {
-	const classes = [
-		"base-ui-collapsible-panel",
-		!unstyled && "collapsible__panel",
-		className
-	].filter(Boolean).join(" ");
+function CollapsiblePanel({ className, unstyled = false, ref, ...props }) {
+	const classes = mergeBaseClassName(["base-ui-collapsible-panel", !unstyled && "collapsible__panel"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Collapsible$1.Panel, {
 		ref,
 		"data-slot": "collapsible-content",

package/dist/components/Combobox.d.ts

@@ -1,2 +1,2 @@
-import { n as useComboboxAnchor, t as Combobox } from "../Combobox-B9Fcd6q-.js";
+import { n as useComboboxAnchor, t as Combobox } from "../Combobox-CYc37s5l.js";
 export { Combobox, useComboboxAnchor };

package/dist/components/Combobox.js

@@ -1,9 +1,10 @@
+import { n as mergeBaseClassName } from "../class-names-Bk-QLWWI.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
 //#region src/components/Combobox.tsx
-function ComboboxInput({ className = "", ref, ...props }) {
-	const classes = ["combobox__input", className].filter(Boolean).join(" ");
+function ComboboxInput({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["combobox__input"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Combobox$1.Input, {
 		ref,
 		"data-slot": "combobox-input",
@@ -11,8 +12,8 @@ function ComboboxInput({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function ComboboxTrigger({ className = "", ref, ...props }) {
-	const classes = ["combobox__trigger", className].filter(Boolean).join(" ");
+function ComboboxTrigger({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["combobox__trigger"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Combobox$1.Trigger, {
 		ref,
 		"data-slot": "combobox-trigger",
@@ -20,8 +21,8 @@ function ComboboxTrigger({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function Clear({ className = "", ref, ...props }) {
-	const classes = ["combobox__clear", className].filter(Boolean).join(" ");
+function Clear({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["combobox__clear"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Combobox$1.Clear, {
 		ref,
 		"data-slot": "combobox-clear",
@@ -29,12 +30,8 @@ function Clear({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function ComboboxPositioner({ className = "", ref, ...props }) {
-	const classes = [
-		"combobox__positioner",
-		"base-ui-positioner",
-		className
-	].filter(Boolean).join(" ");
+function ComboboxPositioner({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["combobox__positioner", "base-ui-positioner"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Combobox$1.Positioner, {
 		ref,
 		"data-slot": "combobox-positioner",
@@ -42,12 +39,8 @@ function ComboboxPositioner({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function ComboboxPopup({ className = "", tabIndex = 0, ref, ...props }) {
-	const classes = [
-		"combobox__popup",
-		"base-ui-popup",
-		className
-	].filter(Boolean).join(" ");
+function ComboboxPopup({ className, tabIndex = 0, ref, ...props }) {
+	const classes = mergeBaseClassName(["combobox__popup", "base-ui-popup"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Combobox$1.Popup, {
 		ref,
 		"data-slot": "combobox-content",
@@ -56,8 +49,8 @@ function ComboboxPopup({ className = "", tabIndex = 0, ref, ...props }) {
 		...props
 	});
 }
-function ComboboxList({ className = "", ref, ...props }) {
-	const classes = ["combobox__list", className].filter(Boolean).join(" ");
+function ComboboxList({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["combobox__list"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Combobox$1.List, {
 		ref,
 		"data-slot": "combobox-list",
@@ -65,8 +58,8 @@ function ComboboxList({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function ComboboxItem({ className = "", ref, ...props }) {
-	const classes = ["combobox__item", className].filter(Boolean).join(" ");
+function ComboboxItem({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["combobox__item"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Combobox$1.Item, {
 		ref,
 		"data-slot": "combobox-item",
@@ -74,8 +67,8 @@ function ComboboxItem({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function ItemIndicator({ className = "", ref, ...props }) {
-	const classes = ["combobox__item-indicator", className].filter(Boolean).join(" ");
+function ItemIndicator({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["combobox__item-indicator"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, {
 		ref,
 		"data-slot": "combobox-item-indicator",
@@ -83,8 +76,8 @@ function ItemIndicator({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function ComboboxEmpty({ className = "", ref, ...props }) {
-	const classes = ["combobox__empty", className].filter(Boolean).join(" ");
+function ComboboxEmpty({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["combobox__empty"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Combobox$1.Empty, {
 		ref,
 		"data-slot": "combobox-empty",
@@ -92,8 +85,8 @@ function ComboboxEmpty({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function ComboboxGroup({ className = "", ref, ...props }) {
-	const classes = ["combobox__group", className].filter(Boolean).join(" ");
+function ComboboxGroup({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["combobox__group"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Combobox$1.Group, {
 		ref,
 		"data-slot": "combobox-group",
@@ -101,8 +94,8 @@ function ComboboxGroup({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function ComboboxGroupLabel({ className = "", ref, ...props }) {
-	const classes = ["combobox__group-label", className].filter(Boolean).join(" ");
+function ComboboxGroupLabel({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["combobox__group-label"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Combobox$1.GroupLabel, {
 		ref,
 		"data-slot": "combobox-group-label",

package/dist/components/Commit.d.ts

@@ -1,12 +1,10 @@
-import { Collapsible } from "./Collapsible.js";
-import { t as CopyButtonProps } from "../copy-button-DtPMgN7e.js";
+import { t as Collapsible } from "../Collapsible-N64ASIQr.js";
+import { t as CopyButtonProps } from "../copy-button-CQx3LQAC.js";
 import * as React from "react";
 
 //#region src/components/Commit.d.ts
 type CommitFileStatusValue = "added" | "modified" | "deleted" | "renamed";
-interface CommitProps extends Omit<React.ComponentProps<typeof Collapsible.Root>, "className" | "unstyled"> {
-  className?: string;
-}
+interface CommitProps extends Omit<React.ComponentProps<typeof Collapsible.Root>, "unstyled"> {}
 /**
  * A collapsible git commit card. Compose CommitHeader with metadata
  * (CommitAuthor, CommitInfo, etc.) and CommitContent with a CommitFiles list.
@@ -50,9 +48,7 @@ declare function Commit({
 }: CommitProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface CommitHeaderProps extends Omit<React.ComponentProps<typeof Collapsible.Trigger>, "className" | "unstyled"> {
-  className?: string;
-}
+interface CommitHeaderProps extends Omit<React.ComponentProps<typeof Collapsible.Trigger>, "unstyled"> {}
 declare function CommitHeader({
   className,
   children,
@@ -167,9 +163,7 @@ declare function CommitActions({
 }: CommitActionsProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface CommitContentProps extends Omit<React.ComponentProps<typeof Collapsible.Panel>, "className" | "unstyled"> {
-  className?: string;
-}
+interface CommitContentProps extends Omit<React.ComponentProps<typeof Collapsible.Panel>, "unstyled"> {}
 declare function CommitContent({
   className,
   children,

package/dist/components/Commit.js

@@ -1,9 +1,9 @@
+import { t as cx } from "../class-names-Bk-QLWWI.js";
 import { Collapsible } from "./Collapsible.js";
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { l as ChevronRightIcon, v as FileIcon } from "../icons-CpfUer49.js";
-import { t as CopyButton } from "../copy-button-Dejn5heL.js";
-import { Avatar } from "./Avatar.js";
+import { u as ChevronRightIcon, y as FileIcon } from "../icons--FqCZEc3.js";
+import { t as CopyButton } from "../copy-button-cYsJBauI.js";
 import { Badge } from "./Badge.js";
+import { Avatar } from "./Avatar.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Commit.tsx
@@ -60,6 +60,7 @@ function Commit({ className, ref, ...props }) {
 		ref,
 		className: cx("commit", className),
 		...props,
+		"data-recipe": "framed-panel",
 		unstyled: true
 	});
 }
@@ -182,7 +183,7 @@ function CommitContent({ className, children, ref, ...props }) {
 function CommitFiles({ className, children, ref, ...props }) {
 	return /* @__PURE__ */ jsx("ul", {
 		ref,
-		className: cx("commit__files", className),
+		className: cx("commit__files", "sigvelo-stack-list", className),
 		...props,
 		children
 	});

package/dist/components/Context.js

@@ -1,4 +1,4 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
+import { t as cx } from "../class-names-Bk-QLWWI.js";
 import { Popover } from "./Popover.js";
 import { Separator } from "./Separator.js";
 import * as React from "react";

package/dist/components/ContextMenu.d.ts

@@ -9,10 +9,7 @@ interface ContextMenuProps extends React.ComponentPropsWithoutRef<typeof Context
 /**
  * Props for the ContextMenu.Trigger component.
  */
-interface ContextMenuTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenu$1.Trigger>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface ContextMenuTriggerProps extends React.ComponentPropsWithoutRef<typeof ContextMenu$1.Trigger> {}
 /**
  * Props for the ContextMenu.Portal component.
  */
@@ -20,53 +17,32 @@ interface ContextMenuPortalProps extends React.ComponentPropsWithoutRef<typeof C
 /**
  * Props for the ContextMenu.Positioner component.
  */
-interface ContextMenuPositionerProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenu$1.Positioner>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface ContextMenuPositionerProps extends React.ComponentPropsWithoutRef<typeof ContextMenu$1.Positioner> {}
 /**
  * Props for the ContextMenu.Popup component.
  */
-interface ContextMenuPopupProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenu$1.Popup>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface ContextMenuPopupProps extends React.ComponentPropsWithoutRef<typeof ContextMenu$1.Popup> {}
 /**
  * Props for the ContextMenu.Item component.
  */
-interface ContextMenuItemProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenu$1.Item>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
+interface ContextMenuItemProps extends React.ComponentPropsWithoutRef<typeof ContextMenu$1.Item> {
   inset?: boolean;
   variant?: "default" | "destructive";
 }
 /**
  * Props for the ContextMenu.Separator component.
  */
-interface ContextMenuSeparatorProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenu$1.Separator>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
-interface ContextMenuGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenu$1.Group>, "className"> {
-  className?: string;
-}
-interface ContextMenuGroupLabelProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenu$1.GroupLabel>, "className"> {
-  className?: string;
+interface ContextMenuSeparatorProps extends React.ComponentPropsWithoutRef<typeof ContextMenu$1.Separator> {}
+interface ContextMenuGroupProps extends React.ComponentPropsWithoutRef<typeof ContextMenu$1.Group> {}
+interface ContextMenuGroupLabelProps extends React.ComponentPropsWithoutRef<typeof ContextMenu$1.GroupLabel> {
   inset?: boolean;
 }
-interface ContextMenuCheckboxItemProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenu$1.CheckboxItem>, "className"> {
-  className?: string;
-}
-interface ContextMenuRadioGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenu$1.RadioGroup>, "className"> {
-  className?: string;
-}
-interface ContextMenuRadioItemProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenu$1.RadioItem>, "className"> {
-  className?: string;
-}
+interface ContextMenuCheckboxItemProps extends React.ComponentPropsWithoutRef<typeof ContextMenu$1.CheckboxItem> {}
+interface ContextMenuRadioGroupProps extends React.ComponentPropsWithoutRef<typeof ContextMenu$1.RadioGroup> {}
+interface ContextMenuRadioItemProps extends React.ComponentPropsWithoutRef<typeof ContextMenu$1.RadioItem> {}
 interface ContextMenuShortcutProps extends React.HTMLAttributes<HTMLSpanElement> {}
 interface ContextMenuSubmenuRootProps extends React.ComponentPropsWithoutRef<typeof ContextMenu$1.SubmenuRoot> {}
-interface ContextMenuSubmenuTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenu$1.SubmenuTrigger>, "className"> {
-  className?: string;
+interface ContextMenuSubmenuTriggerProps extends React.ComponentPropsWithoutRef<typeof ContextMenu$1.SubmenuTrigger> {
   inset?: boolean;
 }
 /**
@@ -143,7 +119,11 @@ declare function ContextMenuCheckboxItem({
 }: ContextMenuCheckboxItemProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-declare function ContextMenuCheckboxItemIndicator(props: ContextMenu$1.CheckboxItemIndicator.Props): React.JSX.Element;
+declare function ContextMenuCheckboxItemIndicator({
+  children,
+  className,
+  ...props
+}: ContextMenu$1.CheckboxItemIndicator.Props): React.JSX.Element;
 declare function ContextMenuRadioGroup({
   className,
   ref,
@@ -158,7 +138,11 @@ declare function ContextMenuRadioItem({
 }: ContextMenuRadioItemProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-declare function ContextMenuRadioItemIndicator(props: ContextMenu$1.RadioItemIndicator.Props): React.JSX.Element;
+declare function ContextMenuRadioItemIndicator({
+  children,
+  className,
+  ...props
+}: ContextMenu$1.RadioItemIndicator.Props): React.JSX.Element;
 declare function ContextMenuShortcut({
   className,
   ref,

package/dist/components/ContextMenu.js

@@ -1,4 +1,5 @@
-import { o as CheckIcon, p as DotIcon } from "../icons-CpfUer49.js";
+import { n as mergeBaseClassName } from "../class-names-Bk-QLWWI.js";
+import { m as DotIcon, s as CheckIcon } from "../icons--FqCZEc3.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";
@@ -33,8 +34,8 @@ const ContextMenuRoot = (props) => {
 /**
 * Interactive area that activates the menu on right-click or long-press.
 */
-function ContextMenuTrigger({ className = "", ref, ...props }) {
-	const classes = ["context-menu__trigger", className].filter(Boolean).join(" ");
+function ContextMenuTrigger({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["context-menu__trigger"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(ContextMenu$1.Trigger, {
 		ref,
 		"data-slot": "context-menu-trigger",
@@ -54,12 +55,8 @@ const ContextMenuPortal = (props) => {
 /**
 * Positions the menu at the pointer location.
 */
-function ContextMenuPositioner({ className = "", ref, ...props }) {
-	const classes = [
-		"context-menu__positioner",
-		"base-ui-positioner",
-		className
-	].filter(Boolean).join(" ");
+function ContextMenuPositioner({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["context-menu__positioner", "base-ui-positioner"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(ContextMenu$1.Positioner, {
 		ref,
 		"data-slot": "context-menu-positioner",
@@ -70,12 +67,8 @@ function ContextMenuPositioner({ className = "", ref, ...props }) {
 /**
 * Container for menu items.
 */
-function ContextMenuPopup({ className = "", ref, ...props }) {
-	const classes = [
-		"context-menu__popup",
-		"base-ui-popup",
-		className
-	].filter(Boolean).join(" ");
+function ContextMenuPopup({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["context-menu__popup", "base-ui-popup"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(ContextMenu$1.Popup, {
 		ref,
 		"data-slot": "context-menu-content",
@@ -86,12 +79,8 @@ function ContextMenuPopup({ className = "", ref, ...props }) {
 /**
 * Interactive menu item.
 */
-function ContextMenuItem({ className = "", inset, variant = "default", ref, ...props }) {
-	const classes = [
-		"context-menu__item",
-		inset && "context-menu__item--inset",
-		className
-	].filter(Boolean).join(" ");
+function ContextMenuItem({ className, inset, variant = "default", ref, ...props }) {
+	const classes = mergeBaseClassName(["context-menu__item", inset && "context-menu__item--inset"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(ContextMenu$1.Item, {
 		ref,
 		"data-slot": "context-menu-item",
@@ -104,8 +93,8 @@ function ContextMenuItem({ className = "", inset, variant = "default", ref, ...p
 /**
 * Visual separator between menu sections.
 */
-function ContextMenuSeparator({ className = "", ref, ...props }) {
-	const classes = ["context-menu__separator", className].filter(Boolean).join(" ");
+function ContextMenuSeparator({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["context-menu__separator"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(ContextMenu$1.Separator, {
 		ref,
 		"data-slot": "context-menu-separator",
@@ -113,8 +102,8 @@ function ContextMenuSeparator({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function ContextMenuGroup({ className = "", ref, ...props }) {
-	const classes = ["context-menu__group", className].filter(Boolean).join(" ");
+function ContextMenuGroup({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["context-menu__group"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(ContextMenu$1.Group, {
 		ref,
 		"data-slot": "context-menu-group",
@@ -122,12 +111,8 @@ function ContextMenuGroup({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function ContextMenuGroupLabel({ className = "", inset, ref, ...props }) {
-	const classes = [
-		"context-menu__label",
-		inset && "context-menu__label--inset",
-		className
-	].filter(Boolean).join(" ");
+function ContextMenuGroupLabel({ className, inset, ref, ...props }) {
+	const classes = mergeBaseClassName(["context-menu__label", inset && "context-menu__label--inset"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(ContextMenu$1.GroupLabel, {
 		ref,
 		"data-slot": "context-menu-label",
@@ -136,8 +121,8 @@ function ContextMenuGroupLabel({ className = "", inset, ref, ...props }) {
 		...props
 	});
 }
-function ContextMenuCheckboxItem({ className = "", ref, ...props }) {
-	const classes = ["context-menu__checkbox-item", className].filter(Boolean).join(" ");
+function ContextMenuCheckboxItem({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["context-menu__checkbox-item"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(ContextMenu$1.CheckboxItem, {
 		ref,
 		"data-slot": "context-menu-checkbox-item",
@@ -145,15 +130,16 @@ function ContextMenuCheckboxItem({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function ContextMenuCheckboxItemIndicator(props) {
+function ContextMenuCheckboxItemIndicator({ children, className, ...props }) {
 	return /* @__PURE__ */ jsx(ContextMenu$1.CheckboxItemIndicator, {
-		className: "context-menu__indicator",
+		className: mergeBaseClassName("context-menu__indicator", className),
+		"data-slot": "context-menu-item-indicator",
 		...props,
-		children: props.children ?? /* @__PURE__ */ jsx(CheckIcon, {})
+		children: children ?? /* @__PURE__ */ jsx(CheckIcon, {})
 	});
 }
-function ContextMenuRadioGroup({ className = "", ref, ...props }) {
-	const classes = ["context-menu__radio-group", className].filter(Boolean).join(" ");
+function ContextMenuRadioGroup({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["context-menu__radio-group"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(ContextMenu$1.RadioGroup, {
 		ref,
 		"data-slot": "context-menu-radio-group",
@@ -161,8 +147,8 @@ function ContextMenuRadioGroup({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function ContextMenuRadioItem({ className = "", ref, ...props }) {
-	const classes = ["context-menu__radio-item", className].filter(Boolean).join(" ");
+function ContextMenuRadioItem({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["context-menu__radio-item"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(ContextMenu$1.RadioItem, {
 		ref,
 		"data-slot": "context-menu-radio-item",
@@ -170,18 +156,19 @@ function ContextMenuRadioItem({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function ContextMenuRadioItemIndicator(props) {
+function ContextMenuRadioItemIndicator({ children, className, ...props }) {
 	return /* @__PURE__ */ jsx(ContextMenu$1.RadioItemIndicator, {
-		className: "context-menu__indicator",
+		className: mergeBaseClassName("context-menu__indicator", className),
+		"data-slot": "context-menu-item-indicator",
 		...props,
-		children: props.children ?? /* @__PURE__ */ jsx(DotIcon, { size: 8 })
+		children: children ?? /* @__PURE__ */ jsx(DotIcon, { size: 8 })
 	});
 }
-function ContextMenuShortcut({ className = "", ref, ...props }) {
+function ContextMenuShortcut({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		ref,
 		"data-slot": "context-menu-shortcut",
-		className: ["context-menu__shortcut", className].filter(Boolean).join(" "),
+		className: mergeBaseClassName(["context-menu__shortcut"].filter(Boolean).join(" "), className),
 		...props
 	});
 }
@@ -191,12 +178,8 @@ function ContextMenuSubmenuRoot(props) {
 		...props
 	});
 }
-function ContextMenuSubmenuTrigger({ className = "", inset, ref, ...props }) {
-	const classes = [
-		"context-menu__submenu-trigger",
-		inset && "context-menu__item--inset",
-		className
-	].filter(Boolean).join(" ");
+function ContextMenuSubmenuTrigger({ className, inset, ref, ...props }) {
+	const classes = mergeBaseClassName(["context-menu__submenu-trigger", inset && "context-menu__item--inset"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(ContextMenu$1.SubmenuTrigger, {
 		ref,
 		"data-slot": "context-menu-sub-trigger",