@mcp-b/react-components 0.16.1 → 0.18.0

package/dist/components/MediaPreviewCard.d.ts

@@ -0,0 +1,103 @@
+import { CardProps } from "./Card.js";
+import * as React from "react";
+
+//#region src/components/MediaPreviewCard.d.ts
+interface MediaPreviewCardProps extends Omit<CardProps, "hover"> {}
+/**
+ * A media-led card that plays its decorative preview only while a mouse is
+ * hovering the card or keyboard focus is within it. The preview pauses and
+ * resets when both forms of intent leave, and remains poster-only when the
+ * user prefers reduced motion.
+ *
+ * Keep routing and product data in the consumer. Place its link and ordinary
+ * Card content inside this root so the entire composition keeps native link
+ * semantics.
+ */
+declare function MediaPreviewCard({
+  children,
+  className,
+  onBlurCapture,
+  onFocusCapture,
+  onPointerEnter,
+  onPointerLeave,
+  ref,
+  ...props
+}: MediaPreviewCardProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+type FixedVideoProps = "autoPlay" | "controls" | "loop" | "muted" | "playsInline" | "preload";
+interface MediaPreviewCardVideoProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, FixedVideoProps> {
+  /** Lightweight still frame displayed until the user shows intent. */
+  poster: string;
+  /** Intrinsic media width used to reserve layout space. */
+  width: number;
+  /** Intrinsic media height used to reserve layout space. */
+  height: number;
+}
+/**
+ * Decorative, silent preview media for MediaPreviewCard. Native source
+ * children allow callers to provide WebM followed by MP4 without the design
+ * system owning storage or URLs.
+ */
+declare function MediaPreviewCardVideo({
+  children,
+  className,
+  height,
+  onEnded,
+  onPause,
+  onPlaying,
+  poster,
+  ref,
+  style,
+  width,
+  ...props
+}: MediaPreviewCardVideoProps & {
+  ref?: React.Ref<HTMLVideoElement>;
+}): React.JSX.Element;
+interface MediaPreviewCardActionsProps extends React.HTMLAttributes<HTMLDivElement> {}
+/**
+ * Positions sibling controls above the preview without nesting them inside the
+ * card's primary link. Use this slot for compact secondary actions such as a
+ * menu trigger; the consumer remains responsible for each control's behavior
+ * and accessible name.
+ */
+declare function MediaPreviewCardActions({
+  className,
+  ref,
+  ...props
+}: MediaPreviewCardActionsProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface MediaPreviewCardPlaceholderProps extends React.HTMLAttributes<HTMLDivElement> {}
+/**
+ * Reserves the same frame as preview media when a card has no poster or video.
+ * Keep any explanatory copy visually hidden so the quiet fallback remains
+ * useful without competing with the card title.
+ */
+declare function MediaPreviewCardPlaceholder({
+  className,
+  ref,
+  ...props
+}: MediaPreviewCardPlaceholderProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface MediaPreviewCardMetaProps extends React.HTMLAttributes<HTMLDivElement> {}
+/** Compact facts shown immediately below a preview. */
+declare function MediaPreviewCardMeta({
+  className,
+  ref,
+  ...props
+}: MediaPreviewCardMetaProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface MediaPreviewCardFactProps extends React.HTMLAttributes<HTMLSpanElement> {}
+/** A single icon-led fact inside MediaPreviewCardMeta. */
+declare function MediaPreviewCardFact({
+  className,
+  ref,
+  ...props
+}: MediaPreviewCardFactProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+//#endregion
+export { MediaPreviewCard, MediaPreviewCardActions, MediaPreviewCardActionsProps, MediaPreviewCardFact, MediaPreviewCardFactProps, MediaPreviewCardMeta, MediaPreviewCardMetaProps, MediaPreviewCardPlaceholder, MediaPreviewCardPlaceholderProps, MediaPreviewCardProps, MediaPreviewCardVideo, MediaPreviewCardVideoProps };

package/dist/components/MediaPreviewCard.js

@@ -0,0 +1,193 @@
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { z as PlayIcon } from "../icons-CQJ-aMnI.js";
+import { n as mergeRefs } from "../merge-refs-DF_7w2x_.js";
+import { Card } from "./Card.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/MediaPreviewCard.tsx
+const MediaPreviewCardContext = React.createContext(null);
+function useMediaPreviewCardContext() {
+	const context = React.useContext(MediaPreviewCardContext);
+	if (!context) throw new Error("MediaPreviewCardVideo must be rendered inside MediaPreviewCard.");
+	return context;
+}
+/**
+* A media-led card that plays its decorative preview only while a mouse is
+* hovering the card or keyboard focus is within it. The preview pauses and
+* resets when both forms of intent leave, and remains poster-only when the
+* user prefers reduced motion.
+*
+* Keep routing and product data in the consumer. Place its link and ordinary
+* Card content inside this root so the entire composition keeps native link
+* semantics.
+*/
+function MediaPreviewCard({ children, className, onBlurCapture, onFocusCapture, onPointerEnter, onPointerLeave, ref, ...props }) {
+	const videoRef = React.useRef(null);
+	const pointerInsideRef = React.useRef(false);
+	const focusInsideRef = React.useRef(false);
+	const [playing, setPlaying] = React.useState(false);
+	const stopPreview = React.useCallback(() => {
+		const video = videoRef.current;
+		if (!video) return;
+		video.pause();
+		if (video.readyState >= HTMLMediaElement.HAVE_METADATA) try {
+			video.currentTime = 0;
+		} catch {}
+		setPlaying(false);
+	}, []);
+	const startPreview = React.useCallback(() => {
+		const video = videoRef.current;
+		if (!video || typeof window !== "undefined" && (window.matchMedia("(prefers-reduced-motion: reduce)").matches || document.documentElement.dataset.motion === "reduce")) return;
+		video.play().catch(() => {
+			setPlaying(false);
+		});
+	}, []);
+	React.useEffect(() => {
+		const media = window.matchMedia("(prefers-reduced-motion: reduce)");
+		const root = document.documentElement;
+		const stopWhenReduced = () => {
+			if (media.matches || root.dataset.motion === "reduce") stopPreview();
+		};
+		const observer = new MutationObserver(stopWhenReduced);
+		media.addEventListener("change", stopWhenReduced);
+		observer.observe(root, { attributeFilter: ["data-motion"] });
+		return () => {
+			media.removeEventListener("change", stopWhenReduced);
+			observer.disconnect();
+		};
+	}, [stopPreview]);
+	const context = React.useMemo(() => ({
+		setPlaying,
+		videoRef
+	}), []);
+	return /* @__PURE__ */ jsx(MediaPreviewCardContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(Card, {
+			ref,
+			"data-slot": "media-preview-card",
+			"data-playing": playing ? "true" : "false",
+			className: cx("media-preview-card", className),
+			onPointerEnter: (event) => {
+				onPointerEnter?.(event);
+				if (event.defaultPrevented || event.pointerType !== "mouse") return;
+				pointerInsideRef.current = true;
+				startPreview();
+			},
+			onPointerLeave: (event) => {
+				onPointerLeave?.(event);
+				if (event.defaultPrevented) return;
+				pointerInsideRef.current = false;
+				if (!focusInsideRef.current) stopPreview();
+			},
+			onFocusCapture: (event) => {
+				onFocusCapture?.(event);
+				if (event.defaultPrevented) return;
+				focusInsideRef.current = true;
+				startPreview();
+			},
+			onBlurCapture: (event) => {
+				onBlurCapture?.(event);
+				if (event.defaultPrevented) return;
+				if (event.currentTarget.contains(event.relatedTarget)) return;
+				focusInsideRef.current = false;
+				if (!pointerInsideRef.current) stopPreview();
+			},
+			...props,
+			children
+		})
+	});
+}
+/**
+* Decorative, silent preview media for MediaPreviewCard. Native source
+* children allow callers to provide WebM followed by MP4 without the design
+* system owning storage or URLs.
+*/
+function MediaPreviewCardVideo({ children, className, height, onEnded, onPause, onPlaying, poster, ref, style, width, ...props }) {
+	const { setPlaying, videoRef } = useMediaPreviewCardContext();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "media-preview-card-media",
+		className: "media-preview-card__media",
+		style: { "--media-preview-card-aspect-ratio": `${width} / ${height}` },
+		children: [/* @__PURE__ */ jsx("video", {
+			...props,
+			ref: mergeRefs(ref, (node) => {
+				videoRef.current = node;
+			}),
+			"data-slot": "media-preview-card-video",
+			className: cx("media-preview-card__video", className),
+			style,
+			poster,
+			width,
+			height,
+			muted: true,
+			loop: true,
+			playsInline: true,
+			preload: "none",
+			"aria-hidden": "true",
+			onPlaying: (event) => {
+				setPlaying(true);
+				onPlaying?.(event);
+			},
+			onPause: (event) => {
+				setPlaying(false);
+				onPause?.(event);
+			},
+			onEnded: (event) => {
+				setPlaying(false);
+				onEnded?.(event);
+			},
+			children
+		}), /* @__PURE__ */ jsx("span", {
+			className: "media-preview-card__play",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(PlayIcon, {})
+		})]
+	});
+}
+/**
+* Positions sibling controls above the preview without nesting them inside the
+* card's primary link. Use this slot for compact secondary actions such as a
+* menu trigger; the consumer remains responsible for each control's behavior
+* and accessible name.
+*/
+function MediaPreviewCardActions({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "media-preview-card-actions",
+		className: cx("media-preview-card__actions", className),
+		...props
+	});
+}
+/**
+* Reserves the same frame as preview media when a card has no poster or video.
+* Keep any explanatory copy visually hidden so the quiet fallback remains
+* useful without competing with the card title.
+*/
+function MediaPreviewCardPlaceholder({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "media-preview-card-placeholder",
+		className: cx("media-preview-card__placeholder", className),
+		...props
+	});
+}
+/** Compact facts shown immediately below a preview. */
+function MediaPreviewCardMeta({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "media-preview-card-meta",
+		className: cx("media-preview-card__meta", className),
+		...props
+	});
+}
+/** A single icon-led fact inside MediaPreviewCardMeta. */
+function MediaPreviewCardFact({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		"data-slot": "media-preview-card-fact",
+		className: cx("media-preview-card__fact", className),
+		...props
+	});
+}
+//#endregion
+export { MediaPreviewCard, MediaPreviewCardActions, MediaPreviewCardFact, MediaPreviewCardMeta, MediaPreviewCardPlaceholder, MediaPreviewCardVideo };

package/dist/components/Menu.d.ts

@@ -1,2 +1,2 @@
-import { _ as MenuSubmenuRootProps, a as MenuGroupLabelProps, b as MenuViewportProps, c as MenuPopupProps, d as MenuProps, f as MenuRadioGroupProps, g as MenuShortcutProps, h as MenuSeparatorProps, i as MenuCheckboxItemProps, l as MenuPortalProps, m as MenuRadioItemProps, n as MenuArrowProps, o as MenuGroupProps, p as MenuRadioItemIndicatorProps, r as MenuCheckboxItemIndicatorProps, s as MenuItemProps, t as Menu, u as MenuPositionerProps, v as MenuSubmenuTriggerProps, y as MenuTriggerProps } from "../Menu-Bgu-ufb5.js";
+import { _ as MenuSubmenuRootProps, a as MenuGroupLabelProps, b as MenuViewportProps, c as MenuPopupProps, d as MenuProps, f as MenuRadioGroupProps, g as MenuShortcutProps, h as MenuSeparatorProps, i as MenuCheckboxItemProps, l as MenuPortalProps, m as MenuRadioItemProps, n as MenuArrowProps, o as MenuGroupProps, p as MenuRadioItemIndicatorProps, r as MenuCheckboxItemIndicatorProps, s as MenuItemProps, t as Menu, u as MenuPositionerProps, v as MenuSubmenuTriggerProps, y as MenuTriggerProps } from "../Menu-L6MZm-7N.js";
 export { Menu, MenuArrowProps, MenuCheckboxItemIndicatorProps, MenuCheckboxItemProps, MenuGroupLabelProps, MenuGroupProps, MenuItemProps, MenuPopupProps, MenuPortalProps, MenuPositionerProps, MenuProps, MenuRadioGroupProps, MenuRadioItemIndicatorProps, MenuRadioItemProps, MenuSeparatorProps, MenuShortcutProps, MenuSubmenuRootProps, MenuSubmenuTriggerProps, MenuTriggerProps, MenuViewportProps };

package/dist/components/Menu.js

@@ -1,3 +1,4 @@
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Menu as Menu$1 } from "@base-ui/react/menu";
@@ -31,8 +32,8 @@ const MenuRoot = (props) => {
 /**
 * Button that toggles the menu visibility.
 */
-function MenuTrigger({ className = "", unstyled = false, ref, ...props }) {
-	const classes = [!unstyled && "menu__trigger", className].filter(Boolean).join(" ");
+function MenuTrigger({ className, unstyled = false, ref, ...props }) {
+	const classes = mergeBaseClassName([!unstyled && "menu__trigger"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Menu$1.Trigger, {
 		ref,
 		"data-slot": "dropdown-menu-trigger",
@@ -53,12 +54,8 @@ const MenuPortal = (props) => {
 /**
 * Positions the menu popup relative to the trigger.
 */
-function MenuPositioner({ className = "", ref, ...props }) {
-	const classes = [
-		"menu__positioner",
-		"base-ui-positioner",
-		className
-	].filter(Boolean).join(" ");
+function MenuPositioner({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["menu__positioner", "base-ui-positioner"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Menu$1.Positioner, {
 		ref,
 		"data-slot": "dropdown-menu-positioner",
@@ -69,12 +66,8 @@ function MenuPositioner({ className = "", ref, ...props }) {
 /**
 * Container for menu items.
 */
-function MenuPopup({ className = "", ref, ...props }) {
-	const classes = [
-		"menu__popup",
-		"base-ui-popup",
-		className
-	].filter(Boolean).join(" ");
+function MenuPopup({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["menu__popup", "base-ui-popup"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Menu$1.Popup, {
 		ref,
 		"data-slot": "dropdown-menu-content",
@@ -87,8 +80,8 @@ function MenuPopup({ className = "", ref, ...props }) {
 * triggers. Pair the adaptive classes from `base-ui-motion.css` with the
 * positioner, popup, and this viewport when that behavior is needed.
 */
-function MenuViewport({ className = "", ref, ...props }) {
-	const classes = ["menu__viewport", className].filter(Boolean).join(" ");
+function MenuViewport({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["menu__viewport"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Menu$1.Viewport, {
 		ref,
 		"data-slot": "dropdown-menu-viewport",
@@ -99,12 +92,8 @@ function MenuViewport({ className = "", ref, ...props }) {
 /**
 * Interactive menu item.
 */
-function MenuItem({ className = "", inset, variant = "default", ref, ...props }) {
-	const classes = [
-		"menu__item",
-		inset && "menu__item--inset",
-		className
-	].filter(Boolean).join(" ");
+function MenuItem({ className, inset, variant = "default", ref, ...props }) {
+	const classes = mergeBaseClassName(["menu__item", inset && "menu__item--inset"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Menu$1.Item, {
 		ref,
 		"data-slot": "dropdown-menu-item",
@@ -117,8 +106,8 @@ function MenuItem({ className = "", inset, variant = "default", ref, ...props })
 /**
 * Groups related menu items.
 */
-function MenuGroup({ className = "", ref, ...props }) {
-	const classes = ["menu__group", className].filter(Boolean).join(" ");
+function MenuGroup({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["menu__group"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Menu$1.Group, {
 		ref,
 		"data-slot": "dropdown-menu-group",
@@ -129,12 +118,8 @@ function MenuGroup({ className = "", ref, ...props }) {
 /**
 * Label for a group of menu items.
 */
-function MenuGroupLabel({ className = "", inset, ref, ...props }) {
-	const classes = [
-		"menu__group-label",
-		inset && "menu__group-label--inset",
-		className
-	].filter(Boolean).join(" ");
+function MenuGroupLabel({ className, inset, ref, ...props }) {
+	const classes = mergeBaseClassName(["menu__group-label", inset && "menu__group-label--inset"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Menu$1.GroupLabel, {
 		ref,
 		"data-slot": "dropdown-menu-label",
@@ -146,8 +131,8 @@ function MenuGroupLabel({ className = "", inset, ref, ...props }) {
 /**
 * Arrow pointing to the trigger.
 */
-function MenuArrow({ className = "", ref, ...props }) {
-	const classes = ["menu__arrow", className].filter(Boolean).join(" ");
+function MenuArrow({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["menu__arrow"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Menu$1.Arrow, {
 		ref,
 		"data-slot": "dropdown-menu-arrow",
@@ -158,8 +143,8 @@ function MenuArrow({ className = "", ref, ...props }) {
 /**
 * Visual separator between menu sections.
 */
-function MenuSeparator({ className = "", ref, ...props }) {
-	const classes = ["menu__separator", className].filter(Boolean).join(" ");
+function MenuSeparator({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["menu__separator"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Menu$1.Separator, {
 		ref,
 		"data-slot": "dropdown-menu-separator",
@@ -170,8 +155,8 @@ function MenuSeparator({ className = "", ref, ...props }) {
 /**
 * Group for exclusive radio selection.
 */
-function MenuRadioGroup({ className = "", ref, ...props }) {
-	const classes = ["menu__radio-group", className].filter(Boolean).join(" ");
+function MenuRadioGroup({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["menu__radio-group"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Menu$1.RadioGroup, {
 		ref,
 		"data-slot": "dropdown-menu-radio-group",
@@ -182,8 +167,8 @@ function MenuRadioGroup({ className = "", ref, ...props }) {
 /**
 * Radio item for exclusive selection.
 */
-function MenuRadioItem({ className = "", ref, ...props }) {
-	const classes = ["menu__radio-item", className].filter(Boolean).join(" ");
+function MenuRadioItem({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["menu__radio-item"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Menu$1.RadioItem, {
 		ref,
 		"data-slot": "dropdown-menu-radio-item",
@@ -194,8 +179,8 @@ function MenuRadioItem({ className = "", ref, ...props }) {
 /**
 * Indicator for selected radio item.
 */
-function MenuRadioItemIndicator({ className = "", ref, ...props }) {
-	const classes = ["menu__radio-indicator", className].filter(Boolean).join(" ");
+function MenuRadioItemIndicator({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["menu__radio-indicator"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Menu$1.RadioItemIndicator, {
 		ref,
 		"data-slot": "dropdown-menu-radio-item-indicator",
@@ -206,8 +191,8 @@ function MenuRadioItemIndicator({ className = "", ref, ...props }) {
 /**
 * Checkbox item for toggling options.
 */
-function MenuCheckboxItem({ className = "", ref, ...props }) {
-	const classes = ["menu__checkbox-item", className].filter(Boolean).join(" ");
+function MenuCheckboxItem({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["menu__checkbox-item"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Menu$1.CheckboxItem, {
 		ref,
 		"data-slot": "dropdown-menu-checkbox-item",
@@ -218,8 +203,8 @@ function MenuCheckboxItem({ className = "", ref, ...props }) {
 /**
 * Indicator for checked checkbox item.
 */
-function MenuCheckboxItemIndicator({ className = "", ref, ...props }) {
-	const classes = ["menu__checkbox-indicator", className].filter(Boolean).join(" ");
+function MenuCheckboxItemIndicator({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["menu__checkbox-indicator"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Menu$1.CheckboxItemIndicator, {
 		ref,
 		"data-slot": "dropdown-menu-checkbox-item-indicator",
@@ -227,11 +212,11 @@ function MenuCheckboxItemIndicator({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function MenuShortcut({ className = "", ref, ...props }) {
+function MenuShortcut({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		ref,
 		"data-slot": "dropdown-menu-shortcut",
-		className: ["menu__shortcut", className].filter(Boolean).join(" "),
+		className: mergeBaseClassName(["menu__shortcut"].filter(Boolean).join(" "), className),
 		...props
 	});
 }
@@ -244,12 +229,8 @@ function MenuSubmenuRoot(props) {
 /**
 * Trigger that opens a submenu.
 */
-function MenuSubmenuTrigger({ className = "", inset, ref, ...props }) {
-	const classes = [
-		"menu__submenu-trigger",
-		inset && "menu__item--inset",
-		className
-	].filter(Boolean).join(" ");
+function MenuSubmenuTrigger({ className, inset, ref, ...props }) {
+	const classes = mergeBaseClassName(["menu__submenu-trigger", inset && "menu__item--inset"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Menu$1.SubmenuTrigger, {
 		ref,
 		"data-slot": "dropdown-menu-sub-trigger",

package/dist/components/Menubar.d.ts

@@ -6,10 +6,7 @@ import { Menubar as Menubar$1 } from "@base-ui/react/menubar";
 /**
  * Props for the Menubar component.
  */
-interface MenubarProps extends Omit<React.ComponentPropsWithoutRef<typeof Menubar$1>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface MenubarProps extends React.ComponentPropsWithoutRef<typeof Menubar$1> {}
 /**
  * Props for the Menubar.Menu component.
  */
@@ -17,10 +14,7 @@ interface MenubarMenuProps extends React.ComponentPropsWithoutRef<typeof Menu.Ro
 /**
  * Props for the Menubar.Trigger component.
  */
-interface MenubarTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof Menu.Trigger>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface MenubarTriggerProps extends React.ComponentPropsWithoutRef<typeof Menu.Trigger> {}
 /**
  * Props for the Menubar.Portal component.
  */
@@ -28,61 +22,38 @@ interface MenubarPortalProps extends React.ComponentPropsWithoutRef<typeof Menu.
 /**
  * Props for the Menubar.Positioner component.
  */
-interface MenubarPositionerProps extends Omit<React.ComponentPropsWithoutRef<typeof Menu.Positioner>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface MenubarPositionerProps extends React.ComponentPropsWithoutRef<typeof Menu.Positioner> {}
 /**
  * Props for the Menubar.Popup component.
  */
-interface MenubarPopupProps extends Omit<React.ComponentPropsWithoutRef<typeof Menu.Popup>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface MenubarPopupProps extends React.ComponentPropsWithoutRef<typeof Menu.Popup> {}
 /**
  * Props for the Menubar.Item component.
  */
-interface MenubarItemProps extends Omit<React.ComponentPropsWithoutRef<typeof Menu.Item>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
+interface MenubarItemProps extends React.ComponentPropsWithoutRef<typeof Menu.Item> {
   inset?: boolean;
   variant?: "default" | "destructive";
 }
 /**
  * Props for the Menubar.Separator component.
  */
-interface MenubarSeparatorProps extends Omit<React.ComponentPropsWithoutRef<typeof Menu.Separator>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface MenubarSeparatorProps extends React.ComponentPropsWithoutRef<typeof Menu.Separator> {}
 /**
  * Props for the Menubar.Group component.
  */
-interface MenubarGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof Menu.Group>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface MenubarGroupProps extends React.ComponentPropsWithoutRef<typeof Menu.Group> {}
 /**
  * Props for the Menubar.GroupLabel component.
  */
-interface MenubarGroupLabelProps extends Omit<React.ComponentPropsWithoutRef<typeof Menu.GroupLabel>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
+interface MenubarGroupLabelProps extends React.ComponentPropsWithoutRef<typeof Menu.GroupLabel> {
   inset?: boolean;
 }
-interface MenubarCheckboxItemProps extends Omit<React.ComponentPropsWithoutRef<typeof Menu.CheckboxItem>, "className"> {
-  className?: string;
-}
-interface MenubarRadioGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof Menu.RadioGroup>, "className"> {
-  className?: string;
-}
-interface MenubarRadioItemProps extends Omit<React.ComponentPropsWithoutRef<typeof Menu.RadioItem>, "className"> {
-  className?: string;
-}
+interface MenubarCheckboxItemProps extends React.ComponentPropsWithoutRef<typeof Menu.CheckboxItem> {}
+interface MenubarRadioGroupProps extends React.ComponentPropsWithoutRef<typeof Menu.RadioGroup> {}
+interface MenubarRadioItemProps extends React.ComponentPropsWithoutRef<typeof Menu.RadioItem> {}
 interface MenubarShortcutProps extends React.HTMLAttributes<HTMLSpanElement> {}
 interface MenubarSubmenuRootProps extends React.ComponentPropsWithoutRef<typeof Menu.SubmenuRoot> {}
-interface MenubarSubmenuTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof Menu.SubmenuTrigger>, "className"> {
-  className?: string;
+interface MenubarSubmenuTriggerProps extends React.ComponentPropsWithoutRef<typeof Menu.SubmenuTrigger> {
   inset?: boolean;
 }
 /**
@@ -195,7 +166,11 @@ declare function MenubarCheckboxItem({
 }: MenubarCheckboxItemProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-declare function MenubarCheckboxItemIndicator(props: Menu.CheckboxItemIndicator.Props): React.JSX.Element;
+declare function MenubarCheckboxItemIndicator({
+  children,
+  className,
+  ...props
+}: Menu.CheckboxItemIndicator.Props): React.JSX.Element;
 declare function MenubarRadioGroup({
   className,
   ref,
@@ -210,7 +185,11 @@ declare function MenubarRadioItem({
 }: MenubarRadioItemProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-declare function MenubarRadioItemIndicator(props: Menu.RadioItemIndicator.Props): React.JSX.Element;
+declare function MenubarRadioItemIndicator({
+  children,
+  className,
+  ...props
+}: Menu.RadioItemIndicator.Props): React.JSX.Element;
 declare function MenubarShortcut({
   className,
   ref,