@mcp-b/react-components 0.16.1 → 0.17.0

package/dist/components/InlineCitation.js

@@ -0,0 +1,142 @@
+import { t as cx } from "../class-names-Bk-QLWWI.js";
+import { Popover } from "./Popover.js";
+import { PreviewCard } from "./PreviewCard.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/InlineCitation.tsx
+/**
+* Keeps claim text and an app-placed citation in one inline presentation group.
+*
+* AI SDK source parts do not include text offsets. The app must place this
+* component beside the claim it supports; this component never parses message
+* text or guesses an anchor position.
+*
+* @see ../../node_modules/ai/src/ui/ui-messages.ts (`SourceUrlUIPart`,
+* `SourceDocumentUIPart`)
+* @see https://elements.ai-sdk.dev/components/inline-citation
+*/
+function InlineCitation({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		"data-slot": "inline-citation",
+		className: cx("inline-citation", className),
+		...props
+	});
+}
+/** Claim text whose citation is placed by the consuming app. */
+function InlineCitationText({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		"data-slot": "inline-citation-text",
+		className: cx("inline-citation__text", className),
+		...props
+	});
+}
+/** Compact presentation container for citation details inside an existing overlay. */
+function InlineCitationCard({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "inline-citation-card",
+		className: cx("inline-citation__card", className),
+		...props
+	});
+}
+/**
+* Adapts a whole AI SDK URL or document source part to an inline citation.
+* URL sources use a safe external link and PreviewCard. Document sources have
+* no URL, so they use a Popover button and never fabricate a download target.
+*/
+function InlineCitationSource({ source, index, className, ref, ...props }) {
+	const visibleLabel = index == null ? defaultLabel(source) : `[${index}]`;
+	const accessibleName = `${visibleLabel}: ${source.title || visibleLabel}`;
+	if (source.type === "source-url") {
+		const href = safeSourceUrl(source.url);
+		if (href) return /* @__PURE__ */ jsx("span", {
+			ref,
+			className: cx("inline-citation__source", className),
+			...props,
+			"data-slot": "inline-citation-source",
+			"data-source-id": source.sourceId,
+			"data-source-type": source.type,
+			children: /* @__PURE__ */ jsxs(PreviewCard.Root, { children: [/* @__PURE__ */ jsx(PreviewCard.Trigger, {
+				delay: 0,
+				closeDelay: 0,
+				href,
+				target: "_blank",
+				rel: "noreferrer",
+				className: "inline-citation__trigger",
+				"aria-label": `${accessibleName} (opens in a new tab)`,
+				children: visibleLabel
+			}), /* @__PURE__ */ jsx(PreviewCard.Portal, { children: /* @__PURE__ */ jsx(PreviewCard.Positioner, {
+				sideOffset: 8,
+				children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
+					className: "inline-citation__popup",
+					children: /* @__PURE__ */ jsx(CitationDetails, { source })
+				})
+			}) })] })
+		});
+	}
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: cx("inline-citation__source", className),
+		...props,
+		"data-slot": "inline-citation-source",
+		"data-source-id": source.sourceId,
+		"data-source-type": source.type,
+		children: /* @__PURE__ */ jsxs(Popover.Root, { children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+			className: "inline-citation__trigger",
+			"aria-label": accessibleName,
+			children: visibleLabel
+		}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+			sideOffset: 8,
+			children: /* @__PURE__ */ jsx(Popover.Popup, {
+				className: "inline-citation__popup",
+				children: /* @__PURE__ */ jsx(CitationDetails, {
+					source,
+					titlePart: "popover"
+				})
+			})
+		}) })] })
+	});
+}
+function CitationDetails({ source, titlePart }) {
+	const title = source.title || defaultLabel(source);
+	return /* @__PURE__ */ jsxs(InlineCitationCard, { children: [
+		titlePart ? /* @__PURE__ */ jsx(Popover.Title, {
+			className: "inline-citation__title",
+			children: title
+		}) : /* @__PURE__ */ jsx("strong", {
+			className: "inline-citation__title",
+			children: title
+		}),
+		source.type === "source-url" ? /* @__PURE__ */ jsx("span", {
+			className: "inline-citation__location",
+			children: source.url
+		}) : /* @__PURE__ */ jsxs("span", {
+			className: "inline-citation__metadata",
+			children: [source.filename ? /* @__PURE__ */ jsx("span", { children: source.filename }) : null, /* @__PURE__ */ jsx("span", { children: source.mediaType })]
+		}),
+		/* @__PURE__ */ jsxs("span", {
+			className: "inline-citation__id",
+			children: ["Source ID: ", source.sourceId]
+		})
+	] });
+}
+function defaultLabel(source) {
+	if (source.type === "source-document") return "Document";
+	try {
+		return new URL(source.url).hostname.replace(/^www\./, "") || "Source";
+	} catch {
+		return "Source";
+	}
+}
+function safeSourceUrl(value) {
+	try {
+		const parsed = new URL(value);
+		return parsed.protocol === "https:" || parsed.protocol === "http:" ? parsed.href : null;
+	} catch {
+		return null;
+	}
+}
+//#endregion
+export { InlineCitation, InlineCitationCard, InlineCitationSource, InlineCitationText };

package/dist/components/Input.d.ts

@@ -5,10 +5,7 @@ import { InputProps as InputProps$1 } from "@base-ui/react/input";
 /**
  * Props for the Input component.
  */
-interface InputProps extends Omit<InputProps$1, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface InputProps extends InputProps$1 {}
 /**
  * An accessible text input component with consistent styling.
  *

package/dist/components/Input.js

@@ -1,3 +1,4 @@
+import { n as mergeBaseClassName } from "../class-names-Bk-QLWWI.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Input as Input$1 } from "@base-ui/react/input";
@@ -15,11 +16,11 @@ import { Input as Input$1 } from "@base-ui/react/input";
 *
 * @see {@link https://base-ui.com/react/components/input | Base UI Input}
 */
-function Input({ className = "", ref, ...props }) {
+function Input({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx(Input$1, {
 		ref,
 		"data-slot": "input",
-		className: ["input", className].filter(Boolean).join(" "),
+		className: mergeBaseClassName(["input"].filter(Boolean).join(" "), className),
 		...props
 	});
 }

package/dist/components/Marker.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 { n as mergeRefs } from "../merge-refs-DF_7w2x_.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/McpConnectionRequest.js

@@ -1,5 +1,5 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { B as SpinnerIcon, T as McpIcon, o as CheckIcon, q as WarningIcon } from "../icons-CpfUer49.js";
+import { t as cx } from "../class-names-Bk-QLWWI.js";
+import { E as McpIcon, J as WarningIcon, V as SpinnerIcon, s as CheckIcon } from "../icons--FqCZEc3.js";
 import { Button } from "./Button.js";
 import { AgentAttention, AgentAttentionActions, AgentAttentionBody, AgentAttentionHeader } from "./AgentAttention.js";
 import { getMcpServerEntry, getMcpServerRuntimeState } from "../utils/mcp-server-catalog.js";

package/dist/components/McpServerPicker.d.ts

@@ -1,4 +1,4 @@
-import { s as MenuItemProps, t as Menu } from "../Menu-Bgu-ufb5.js";
+import { s as MenuItemProps, t as Menu } from "../Menu-L6MZm-7N.js";
 import { McpServerCard } from "../utils/mcp-server-catalog.js";
 import { McpConnectorFormProps } from "./AgentConnection.js";
 import { DialogProps } from "./Dialog.js";

package/dist/components/McpServerPicker.js

@@ -1,5 +1,5 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { B as SpinnerIcon, O as MinusIcon, o as CheckIcon, q as WarningIcon } from "../icons-CpfUer49.js";
+import { n as mergeBaseClassName } from "../class-names-Bk-QLWWI.js";
+import { J as WarningIcon, V as SpinnerIcon, k as MinusIcon, s as CheckIcon } from "../icons--FqCZEc3.js";
 import { buttonVariants } from "./Button.js";
 import { Dialog } from "./Dialog.js";
 import { Menu } from "./Menu.js";
@@ -63,6 +63,7 @@ function McpServerPicker({ servers, onConnect, mcp, onDisconnect, sideOffset = 1
 		align: "start",
 		className: "mcp-server-picker__popup",
 		collisionPadding: 8,
+		"data-recipe": "wide-scroll-picker",
 		side: "top",
 		sideOffset,
 		children: /* @__PURE__ */ jsx(McpServerPickerItems, {
@@ -111,7 +112,7 @@ function McpServerPickerItems({ servers, onConnect, mcp, onDisconnect }) {
 }
 function McpServerPickerGroup({ label, children, className, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu.Group, {
-		className: cx("mcp-server-picker__group", className),
+		className: mergeBaseClassName("mcp-server-picker__group", className),
 		...props,
 		children: [/* @__PURE__ */ jsx(Menu.GroupLabel, {
 			className: "mcp-server-picker__group-label",
@@ -121,7 +122,7 @@ function McpServerPickerGroup({ label, children, className, ...props }) {
 }
 function McpServerPickerAction({ icon, label, description, className, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu.Item, {
-		className: cx("mcp-server-picker__row", "mcp-server-picker__custom-action", className),
+		className: mergeBaseClassName("mcp-server-picker__row mcp-server-picker__custom-action", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "mcp-server-picker__icon",
@@ -202,7 +203,7 @@ function McpServerPickerRow({ row, onConnect, onDisconnect, pendingAction }) {
 				onClick: pendingAction !== null ? void 0 : () => void onDisconnect(connectedServerId),
 				title: disconnectLabel,
 				children: [/* @__PURE__ */ jsx(MinusIcon, {}), /* @__PURE__ */ jsx("span", {
-					className: "mcp-server-picker__status-label",
+					className: "mcp-server-picker__status-label sigvelo-visually-hidden",
 					children: disconnectLabel
 				})]
 			}) : null]

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-Bk-QLWWI.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,