@mcp-b/react-components 0.16.1 → 0.17.0

package/dist/components/Menubar.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 { Menu } from "@base-ui/react/menu";
@@ -27,11 +28,11 @@ import { Menubar as Menubar$1 } from "@base-ui/react/menubar";
 *
 * @see {@link https://base-ui.com/react/components/menubar | Base UI Menubar}
 */
-function MenubarRoot({ className = "", ref, ...props }) {
+function MenubarRoot({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx(Menubar$1, {
 		ref,
 		"data-slot": "menubar",
-		className: ["menubar", className].filter(Boolean).join(" "),
+		className: mergeBaseClassName(["menubar"].filter(Boolean).join(" "), className),
 		...props
 	});
 }
@@ -44,8 +45,8 @@ const MenubarMenu = (props) => {
 /**
 * Button that opens the menu.
 */
-function MenubarTrigger({ className = "", ref, ...props }) {
-	const classes = ["menubar__trigger", className].filter(Boolean).join(" ");
+function MenubarTrigger({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["menubar__trigger"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Menu.Trigger, {
 		ref,
 		"data-slot": "menubar-trigger",
@@ -65,12 +66,8 @@ const MenubarPortal = (props) => {
 /**
 * Positions the menu popup.
 */
-function MenubarPositioner({ className = "", ref, ...props }) {
-	const classes = [
-		"menubar__positioner",
-		"base-ui-positioner",
-		className
-	].filter(Boolean).join(" ");
+function MenubarPositioner({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["menubar__positioner", "base-ui-positioner"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Menu.Positioner, {
 		ref,
 		"data-slot": "menubar-positioner",
@@ -81,12 +78,8 @@ function MenubarPositioner({ className = "", ref, ...props }) {
 /**
 * Container for menu items.
 */
-function MenubarPopup({ className = "", ref, ...props }) {
-	const classes = [
-		"menubar__popup",
-		"base-ui-popup",
-		className
-	].filter(Boolean).join(" ");
+function MenubarPopup({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["menubar__popup", "base-ui-popup"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Menu.Popup, {
 		ref,
 		"data-slot": "menubar-content",
@@ -97,12 +90,8 @@ function MenubarPopup({ className = "", ref, ...props }) {
 /**
 * Interactive menu item.
 */
-function MenubarItem({ className = "", inset, variant = "default", ref, ...props }) {
-	const classes = [
-		"menubar__item",
-		inset && "menubar__item--inset",
-		className
-	].filter(Boolean).join(" ");
+function MenubarItem({ className, inset, variant = "default", ref, ...props }) {
+	const classes = mergeBaseClassName(["menubar__item", inset && "menubar__item--inset"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Menu.Item, {
 		ref,
 		"data-slot": "menubar-item",
@@ -115,8 +104,8 @@ function MenubarItem({ className = "", inset, variant = "default", ref, ...props
 /**
 * Visual separator between menu sections.
 */
-function MenubarSeparator({ className = "", ref, ...props }) {
-	const classes = ["menubar__separator", className].filter(Boolean).join(" ");
+function MenubarSeparator({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["menubar__separator"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Menu.Separator, {
 		ref,
 		"data-slot": "menubar-separator",
@@ -127,8 +116,8 @@ function MenubarSeparator({ className = "", ref, ...props }) {
 /**
 * Groups related menu items.
 */
-function MenubarGroup({ className = "", ref, ...props }) {
-	const classes = ["menubar__group", className].filter(Boolean).join(" ");
+function MenubarGroup({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["menubar__group"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Menu.Group, {
 		ref,
 		"data-slot": "menubar-group",
@@ -139,12 +128,8 @@ function MenubarGroup({ className = "", ref, ...props }) {
 /**
 * Label for a menu item group.
 */
-function MenubarGroupLabel({ className = "", inset, ref, ...props }) {
-	const classes = [
-		"menubar__group-label",
-		inset && "menubar__group-label--inset",
-		className
-	].filter(Boolean).join(" ");
+function MenubarGroupLabel({ className, inset, ref, ...props }) {
+	const classes = mergeBaseClassName(["menubar__group-label", inset && "menubar__group-label--inset"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Menu.GroupLabel, {
 		ref,
 		"data-slot": "menubar-label",
@@ -153,8 +138,8 @@ function MenubarGroupLabel({ className = "", inset, ref, ...props }) {
 		...props
 	});
 }
-function MenubarCheckboxItem({ className = "", ref, ...props }) {
-	const classes = ["menubar__checkbox-item", className].filter(Boolean).join(" ");
+function MenubarCheckboxItem({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["menubar__checkbox-item"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Menu.CheckboxItem, {
 		ref,
 		"data-slot": "menubar-checkbox-item",
@@ -162,15 +147,16 @@ function MenubarCheckboxItem({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function MenubarCheckboxItemIndicator(props) {
+function MenubarCheckboxItemIndicator({ children, className, ...props }) {
 	return /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, {
-		className: "menubar__indicator",
+		className: mergeBaseClassName("menubar__indicator", className),
+		"data-slot": "menubar-item-indicator",
 		...props,
-		children: props.children ?? /* @__PURE__ */ jsx(CheckIcon, {})
+		children: children ?? /* @__PURE__ */ jsx(CheckIcon, {})
 	});
 }
-function MenubarRadioGroup({ className = "", ref, ...props }) {
-	const classes = ["menubar__radio-group", className].filter(Boolean).join(" ");
+function MenubarRadioGroup({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["menubar__radio-group"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Menu.RadioGroup, {
 		ref,
 		"data-slot": "menubar-radio-group",
@@ -178,8 +164,8 @@ function MenubarRadioGroup({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function MenubarRadioItem({ className = "", ref, ...props }) {
-	const classes = ["menubar__radio-item", className].filter(Boolean).join(" ");
+function MenubarRadioItem({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["menubar__radio-item"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Menu.RadioItem, {
 		ref,
 		"data-slot": "menubar-radio-item",
@@ -187,30 +173,27 @@ function MenubarRadioItem({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function MenubarRadioItemIndicator(props) {
+function MenubarRadioItemIndicator({ children, className, ...props }) {
 	return /* @__PURE__ */ jsx(Menu.RadioItemIndicator, {
-		className: "menubar__indicator",
+		className: mergeBaseClassName("menubar__indicator", className),
+		"data-slot": "menubar-item-indicator",
 		...props,
-		children: props.children ?? /* @__PURE__ */ jsx(DotIcon, { size: 8 })
+		children: children ?? /* @__PURE__ */ jsx(DotIcon, { size: 8 })
 	});
 }
-function MenubarShortcut({ className = "", ref, ...props }) {
+function MenubarShortcut({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		ref,
 		"data-slot": "menubar-shortcut",
-		className: ["menubar__shortcut", className].filter(Boolean).join(" "),
+		className: mergeBaseClassName(["menubar__shortcut"].filter(Boolean).join(" "), className),
 		...props
 	});
 }
 function MenubarSubmenuRoot(props) {
 	return /* @__PURE__ */ jsx(Menu.SubmenuRoot, { ...props });
 }
-function MenubarSubmenuTrigger({ className = "", inset, ref, ...props }) {
-	const classes = [
-		"menubar__submenu-trigger",
-		inset && "menubar__item--inset",
-		className
-	].filter(Boolean).join(" ");
+function MenubarSubmenuTrigger({ className, inset, ref, ...props }) {
+	const classes = mergeBaseClassName(["menubar__submenu-trigger", inset && "menubar__item--inset"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Menu.SubmenuTrigger, {
 		ref,
 		"data-slot": "menubar-sub-trigger",

package/dist/components/Message.d.ts

@@ -89,8 +89,7 @@ declare function MessageActions({
 }: MessageActionsProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface MessageActionProps extends Omit<ButtonProps, "children" | "className"> {
-  className?: string;
+interface MessageActionProps extends Omit<ButtonProps, "children"> {
   /** Accessible name for the button. Required when no visible text children. */
   label?: string;
   /** Optional tooltip text shown on hover/focus. Defaults to {@link label}. */
@@ -178,8 +177,7 @@ declare function MessageBranchSelector({
 }: MessageBranchSelectorProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element | null;
-interface MessageBranchPreviousProps extends Omit<ButtonProps, "children" | "className"> {
-  className?: string;
+interface MessageBranchPreviousProps extends Omit<ButtonProps, "children"> {
   label?: string;
   children?: React.ReactNode;
 }
@@ -197,8 +195,7 @@ declare function MessageBranchPrevious({
 }: MessageBranchPreviousProps & {
   ref?: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element;
-interface MessageBranchNextProps extends Omit<ButtonProps, "children" | "className"> {
-  className?: string;
+interface MessageBranchNextProps extends Omit<ButtonProps, "children"> {
   label?: string;
   children?: React.ReactNode;
 }

package/dist/components/Message.js

@@ -1,2 +1,2 @@
-import { a as MessageBranch, c as MessageBranchPage, d as MessageContent, f as MessageResponse, i as MessageAttachment, l as MessageBranchPrevious, n as MessageAction, o as MessageBranchContent, p as MessageToolbar, r as MessageActions, s as MessageBranchNext, t as Message, u as MessageBranchSelector } from "../Message-BkMdE3bS.js";
+import { a as MessageBranch, c as MessageBranchPage, d as MessageContent, f as MessageResponse, i as MessageAttachment, l as MessageBranchPrevious, n as MessageAction, o as MessageBranchContent, p as MessageToolbar, r as MessageActions, s as MessageBranchNext, t as Message, u as MessageBranchSelector } from "../Message-C4eYRogZ.js";
 export { Message, MessageAction, MessageActions, MessageAttachment, MessageBranch, MessageBranchContent, MessageBranchNext, MessageBranchPage, MessageBranchPrevious, MessageBranchSelector, MessageContent, MessageResponse, MessageToolbar };

package/dist/components/MessageScroller.d.ts

@@ -33,7 +33,7 @@ declare function MessageScrollerItem({
   scrollAnchor,
   ...props
 }: MessageScrollerItemProps): React.JSX.Element;
-interface MessageScrollerButtonProps extends Omit<React.ComponentProps<typeof MessageScroller$1.Button>, "children" | "className" | "color" | "render">, Pick<ButtonProps, "color" | "size" | "variant"> {
+interface MessageScrollerButtonProps extends Omit<React.ComponentProps<typeof MessageScroller$1.Button>, "children" | "color" | "render">, Pick<ButtonProps, "color" | "size" | "variant"> {
   className?: string;
   children?: React.ReactNode;
   render?: React.ComponentProps<typeof MessageScroller$1.Button>["render"];

package/dist/components/MessageScroller.js

@@ -1,5 +1,5 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { t as ArrowDownIcon } from "../icons-CpfUer49.js";
+import { t as cx } from "../class-names-Bk-QLWWI.js";
+import { t as ArrowDownIcon } from "../icons--FqCZEc3.js";
 import { Button } from "./Button.js";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -53,7 +53,7 @@ function MessageScrollerButton({ className, children, color = "neutral", directi
 		}),
 		...props,
 		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ArrowDownIcon, {}), /* @__PURE__ */ jsx("span", {
-			className: "message-scroller__button-label",
+			className: "message-scroller__button-label sigvelo-visually-hidden",
 			children: direction === "end" ? "Scroll to end" : "Scroll to start"
 		})] })
 	});

package/dist/components/Meter.d.ts

@@ -5,38 +5,23 @@ import { Meter as Meter$1 } from "@base-ui/react/meter";
 /**
  * Props for the Meter.Root component.
  */
-interface MeterRootProps extends Omit<React.ComponentPropsWithoutRef<typeof Meter$1.Root>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface MeterRootProps extends React.ComponentPropsWithoutRef<typeof Meter$1.Root> {}
 /**
  * Props for the Meter.Track component.
  */
-interface MeterTrackProps extends Omit<React.ComponentPropsWithoutRef<typeof Meter$1.Track>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface MeterTrackProps extends React.ComponentPropsWithoutRef<typeof Meter$1.Track> {}
 /**
  * Props for the Meter.Indicator component.
  */
-interface MeterIndicatorProps extends Omit<React.ComponentPropsWithoutRef<typeof Meter$1.Indicator>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface MeterIndicatorProps extends React.ComponentPropsWithoutRef<typeof Meter$1.Indicator> {}
 /**
  * Props for the Meter.Label component.
  */
-interface MeterLabelProps extends Omit<React.ComponentPropsWithoutRef<typeof Meter$1.Label>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface MeterLabelProps extends React.ComponentPropsWithoutRef<typeof Meter$1.Label> {}
 /**
  * Props for the Meter.Value component.
  */
-interface MeterValueProps extends Omit<React.ComponentPropsWithoutRef<typeof Meter$1.Value>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface MeterValueProps extends React.ComponentPropsWithoutRef<typeof Meter$1.Value> {}
 /**
  * Container that groups all meter parts. Renders a `<div>` element.
  *

package/dist/components/Meter.js

@@ -1,3 +1,4 @@
+import { n as mergeBaseClassName } from "../class-names-Bk-QLWWI.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Meter as Meter$1 } from "@base-ui/react/meter";
@@ -18,8 +19,8 @@ import { Meter as Meter$1 } from "@base-ui/react/meter";
 *
 * @see {@link https://base-ui.com/react/components/meter | Base UI Meter}
 */
-function MeterRoot({ className = "", ref, ...props }) {
-	const classes = ["meter", className].filter(Boolean).join(" ");
+function MeterRoot({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["meter"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Meter$1.Root, {
 		ref,
 		"data-slot": "meter",
@@ -30,8 +31,8 @@ function MeterRoot({ className = "", ref, ...props }) {
 /**
 * The track that contains the indicator. Represents the full range.
 */
-function MeterTrack({ className = "", ref, ...props }) {
-	const classes = ["meter__track", className].filter(Boolean).join(" ");
+function MeterTrack({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["meter__track"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Meter$1.Track, {
 		ref,
 		"data-slot": "meter-track",
@@ -42,8 +43,8 @@ function MeterTrack({ className = "", ref, ...props }) {
 /**
 * The indicator that visualizes the current value.
 */
-function MeterIndicator({ className = "", ref, ...props }) {
-	const classes = ["meter__indicator", className].filter(Boolean).join(" ");
+function MeterIndicator({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["meter__indicator"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Meter$1.Indicator, {
 		ref,
 		"data-slot": "meter-indicator",
@@ -54,8 +55,8 @@ function MeterIndicator({ className = "", ref, ...props }) {
 /**
 * Accessible label for the meter.
 */
-function MeterLabel({ className = "", ref, ...props }) {
-	const classes = ["meter__label", className].filter(Boolean).join(" ");
+function MeterLabel({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["meter__label"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Meter$1.Label, {
 		ref,
 		"data-slot": "meter-label",
@@ -66,8 +67,8 @@ function MeterLabel({ className = "", ref, ...props }) {
 /**
 * Displays the current value as text.
 */
-function MeterValue({ className = "", ref, ...props }) {
-	const classes = ["meter__value", className].filter(Boolean).join(" ");
+function MeterValue({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["meter__value"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Meter$1.Value, {
 		ref,
 		"data-slot": "meter-value",

package/dist/components/ModelSelector.d.ts

@@ -124,9 +124,7 @@ declare function CloudflareModelSelector({
   onOpenChange,
   ...props
 }: CloudflareModelSelectorProps): React.JSX.Element;
-interface ModelSelectorTriggerProps extends Omit<ButtonProps, "variant" | "color" | "className"> {
-  className?: string;
-}
+interface ModelSelectorTriggerProps extends Omit<ButtonProps, "variant" | "color"> {}
 declare function ModelSelectorTrigger({
   className,
   children,
@@ -210,9 +208,7 @@ declare function ModelSelectorEmpty({
 }: ModelSelectorEmptyProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface ModelSelectorSeparatorProps extends Omit<SeparatorProps, "className"> {
-  className?: string;
-}
+interface ModelSelectorSeparatorProps extends SeparatorProps {}
 declare function ModelSelectorSeparator({
   className,
   ref,

package/dist/components/ModelSelector.js

@@ -1,2 +1,2 @@
-import { _ as getCloudflareModelProvider, a as ModelSelectorEmpty, b as normalizeCloudflareModelSelectorModels, c as ModelSelectorItem, d as ModelSelectorLogoGroup, f as ModelSelectorName, g as formatCloudflareModelProvider, h as ModelSelectorTrigger, i as ModelSelectorDialog, l as ModelSelectorList, m as ModelSelectorShortcut, n as ModelSelector, o as ModelSelectorGroup, p as ModelSelectorSeparator, r as ModelSelectorContent, s as ModelSelectorInput, t as CloudflareModelSelector, u as ModelSelectorLogo, v as isCloudflareRunnableModelId, x as readCloudflareModelId, y as listCloudflareModelSelectorOptions } from "../ModelSelector-SlJNgwKY.js";
+import { _ as getCloudflareModelProvider, a as ModelSelectorEmpty, b as normalizeCloudflareModelSelectorModels, c as ModelSelectorItem, d as ModelSelectorLogoGroup, f as ModelSelectorName, g as formatCloudflareModelProvider, h as ModelSelectorTrigger, i as ModelSelectorDialog, l as ModelSelectorList, m as ModelSelectorShortcut, n as ModelSelector, o as ModelSelectorGroup, p as ModelSelectorSeparator, r as ModelSelectorContent, s as ModelSelectorInput, t as CloudflareModelSelector, u as ModelSelectorLogo, v as isCloudflareRunnableModelId, x as readCloudflareModelId, y as listCloudflareModelSelectorOptions } from "../ModelSelector-BNrZlY_Y.js";
 export { CloudflareModelSelector, ModelSelector, ModelSelectorContent, ModelSelectorDialog, ModelSelectorEmpty, ModelSelectorGroup, ModelSelectorInput, ModelSelectorItem, ModelSelectorList, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorName, ModelSelectorSeparator, ModelSelectorShortcut, ModelSelectorTrigger, formatCloudflareModelProvider, getCloudflareModelProvider, isCloudflareRunnableModelId, listCloudflareModelSelectorOptions, normalizeCloudflareModelSelectorModels, readCloudflareModelId };

package/dist/components/NavigationMenu.d.ts

@@ -5,45 +5,31 @@ import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react/navigation-me
 /**
  * Props for the NavigationMenu.Root component.
  */
-interface NavigationMenuProps extends Omit<React.ComponentPropsWithRef<typeof NavigationMenu$1.Root>, "className"> {
-  className?: string;
-}
+interface NavigationMenuProps extends React.ComponentPropsWithRef<typeof NavigationMenu$1.Root> {}
 /**
  * Props for the NavigationMenu.List component.
  */
-interface NavigationMenuListProps extends Omit<React.ComponentPropsWithRef<typeof NavigationMenu$1.List>, "className"> {
-  className?: string;
-}
+interface NavigationMenuListProps extends React.ComponentPropsWithRef<typeof NavigationMenu$1.List> {}
 /**
  * Props for the NavigationMenu.Item component.
  */
-interface NavigationMenuItemProps extends Omit<React.ComponentPropsWithRef<typeof NavigationMenu$1.Item>, "className"> {
-  className?: string;
-}
+interface NavigationMenuItemProps extends React.ComponentPropsWithRef<typeof NavigationMenu$1.Item> {}
 /**
  * Props for the NavigationMenu.Trigger component.
  */
-interface NavigationMenuTriggerProps extends Omit<React.ComponentPropsWithRef<typeof NavigationMenu$1.Trigger>, "className"> {
-  className?: string;
-}
+interface NavigationMenuTriggerProps extends React.ComponentPropsWithRef<typeof NavigationMenu$1.Trigger> {}
 /**
  * Props for the NavigationMenu.Icon component.
  */
-interface NavigationMenuIconProps extends Omit<React.ComponentPropsWithRef<typeof NavigationMenu$1.Icon>, "className"> {
-  className?: string;
-}
+interface NavigationMenuIconProps extends React.ComponentPropsWithRef<typeof NavigationMenu$1.Icon> {}
 /**
  * Props for the NavigationMenu.Content component.
  */
-interface NavigationMenuContentProps extends Omit<React.ComponentPropsWithRef<typeof NavigationMenu$1.Content>, "className"> {
-  className?: string;
-}
+interface NavigationMenuContentProps extends React.ComponentPropsWithRef<typeof NavigationMenu$1.Content> {}
 /**
  * Props for the NavigationMenu.Link component.
  */
-interface NavigationMenuLinkProps extends Omit<React.ComponentPropsWithRef<typeof NavigationMenu$1.Link>, "className"> {
-  className?: string;
-}
+interface NavigationMenuLinkProps extends React.ComponentPropsWithRef<typeof NavigationMenu$1.Link> {}
 /**
  * Props for the NavigationMenu.Portal component.
  */
@@ -51,27 +37,19 @@ type NavigationMenuPortalProps = React.ComponentPropsWithoutRef<typeof Navigatio
 /**
  * Props for the NavigationMenu.Positioner component.
  */
-interface NavigationMenuPositionerProps extends Omit<React.ComponentPropsWithRef<typeof NavigationMenu$1.Positioner>, "className"> {
-  className?: string;
-}
+interface NavigationMenuPositionerProps extends React.ComponentPropsWithRef<typeof NavigationMenu$1.Positioner> {}
 /**
  * Props for the NavigationMenu.Popup component.
  */
-interface NavigationMenuPopupProps extends Omit<React.ComponentPropsWithRef<typeof NavigationMenu$1.Popup>, "className"> {
-  className?: string;
-}
+interface NavigationMenuPopupProps extends React.ComponentPropsWithRef<typeof NavigationMenu$1.Popup> {}
 /**
  * Props for the NavigationMenu.Viewport component.
  */
-interface NavigationMenuViewportProps extends Omit<React.ComponentPropsWithRef<typeof NavigationMenu$1.Viewport>, "className"> {
-  className?: string;
-}
+interface NavigationMenuViewportProps extends React.ComponentPropsWithRef<typeof NavigationMenu$1.Viewport> {}
 /**
  * Props for the NavigationMenu.Arrow component.
  */
-interface NavigationMenuArrowProps extends Omit<React.ComponentPropsWithRef<typeof NavigationMenu$1.Arrow>, "className"> {
-  className?: string;
-}
+interface NavigationMenuArrowProps extends React.ComponentPropsWithRef<typeof NavigationMenu$1.Arrow> {}
 /**
  * Navigation landmark for top-level or section-level links. Compose with
  * NavigationMenu.List, NavigationMenu.Item, NavigationMenu.Trigger, and

package/dist/components/NavigationMenu.js

@@ -1,3 +1,4 @@
+import { n as mergeBaseClassName } from "../class-names-Bk-QLWWI.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react/navigation-menu";
@@ -37,8 +38,8 @@ import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react/navigation-me
 *
 * @see {@link https://base-ui.com/react/components/navigation-menu | Base UI NavigationMenu}
 */
-function Root({ className = "", ref, ...props }) {
-	const classes = ["navigation-menu", className].filter(Boolean).join(" ");
+function Root({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["navigation-menu"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(NavigationMenu$1.Root, {
 		ref,
 		render: /* @__PURE__ */ jsx("nav", {}),
@@ -47,8 +48,8 @@ function Root({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function NavigationMenuList({ className = "", ref, ...props }) {
-	const classes = ["navigation-menu__list", className].filter(Boolean).join(" ");
+function NavigationMenuList({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["navigation-menu__list"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(NavigationMenu$1.List, {
 		ref,
 		"data-slot": "navigation-menu-list",
@@ -57,8 +58,8 @@ function NavigationMenuList({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function NavigationMenuItem({ className = "", ref, ...props }) {
-	const classes = ["navigation-menu__item", className].filter(Boolean).join(" ");
+function NavigationMenuItem({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["navigation-menu__item"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(NavigationMenu$1.Item, {
 		ref,
 		"data-slot": "navigation-menu-item",
@@ -66,8 +67,8 @@ function NavigationMenuItem({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function NavigationMenuTrigger({ className = "", ref, ...props }) {
-	const classes = ["navigation-menu__trigger", className].filter(Boolean).join(" ");
+function NavigationMenuTrigger({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["navigation-menu__trigger"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(NavigationMenu$1.Trigger, {
 		ref,
 		"data-slot": "navigation-menu-trigger",
@@ -75,8 +76,8 @@ function NavigationMenuTrigger({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function NavigationMenuIcon({ className = "", ref, ...props }) {
-	const classes = ["navigation-menu__icon", className].filter(Boolean).join(" ");
+function NavigationMenuIcon({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["navigation-menu__icon"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(NavigationMenu$1.Icon, {
 		ref,
 		"data-slot": "navigation-menu-icon",
@@ -84,8 +85,8 @@ function NavigationMenuIcon({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function NavigationMenuContent({ className = "", ref, ...props }) {
-	const classes = ["navigation-menu__content", className].filter(Boolean).join(" ");
+function NavigationMenuContent({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["navigation-menu__content"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(NavigationMenu$1.Content, {
 		ref,
 		"data-slot": "navigation-menu-content",
@@ -93,8 +94,8 @@ function NavigationMenuContent({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function NavigationMenuLink({ className = "", ref, ...props }) {
-	const classes = ["navigation-menu__link", className].filter(Boolean).join(" ");
+function NavigationMenuLink({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["navigation-menu__link"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(NavigationMenu$1.Link, {
 		ref,
 		"data-slot": "navigation-menu-link",
@@ -108,12 +109,8 @@ function NavigationMenuPortal(props) {
 		...props
 	});
 }
-function NavigationMenuPositioner({ className = "", ref, ...props }) {
-	const classes = [
-		"navigation-menu__positioner",
-		"base-ui-positioner",
-		className
-	].filter(Boolean).join(" ");
+function NavigationMenuPositioner({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["navigation-menu__positioner", "base-ui-positioner"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(NavigationMenu$1.Positioner, {
 		ref,
 		"data-slot": "navigation-menu-positioner",
@@ -121,12 +118,8 @@ function NavigationMenuPositioner({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function NavigationMenuPopup({ className = "", ref, ...props }) {
-	const classes = [
-		"navigation-menu__popup",
-		"base-ui-popup",
-		className
-	].filter(Boolean).join(" ");
+function NavigationMenuPopup({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["navigation-menu__popup", "base-ui-popup"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(NavigationMenu$1.Popup, {
 		ref,
 		"data-slot": "navigation-menu-popup",
@@ -134,8 +127,8 @@ function NavigationMenuPopup({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function NavigationMenuViewport({ className = "", ref, ...props }) {
-	const classes = ["navigation-menu__viewport", className].filter(Boolean).join(" ");
+function NavigationMenuViewport({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["navigation-menu__viewport"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(NavigationMenu$1.Viewport, {
 		ref,
 		"data-slot": "navigation-menu-viewport",
@@ -143,8 +136,8 @@ function NavigationMenuViewport({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function NavigationMenuArrow({ className = "", ref, ...props }) {
-	const classes = ["navigation-menu__arrow", className].filter(Boolean).join(" ");
+function NavigationMenuArrow({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["navigation-menu__arrow"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(NavigationMenu$1.Arrow, {
 		ref,
 		"data-slot": "navigation-menu-arrow",