@mcp-b/react-components 0.1.1 → 0.1.2

package/dist/components/Menu.js

@@ -0,0 +1,338 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Menu as Menu$1 } from "@base-ui/react/menu";
+//#region src/components/Menu.tsx
+/**
+* Root component that manages menu state.
+*
+* @example
+* ```tsx
+* <Menu.Root>
+*   <Menu.Trigger>Actions</Menu.Trigger>
+*   <Menu.Portal>
+*     <Menu.Positioner>
+*       <Menu.Popup>
+*         <Menu.Item>Edit</Menu.Item>
+*         <Menu.Item>Delete</Menu.Item>
+*       </Menu.Popup>
+*     </Menu.Positioner>
+*   </Menu.Portal>
+* </Menu.Root>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/menu | Base UI Menu}
+*/
+const MenuRoot = (props) => {
+	return /* @__PURE__ */ jsx(Menu$1.Root, {
+		"data-slot": "dropdown-menu",
+		...props
+	});
+};
+/**
+* Button that toggles the menu visibility.
+*/
+function MenuTrigger({ className = "", ref, ...props }) {
+	const classes = ["menu__trigger", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Menu$1.Trigger, {
+		ref,
+		"data-slot": "dropdown-menu-trigger",
+		className: classes,
+		...props
+	});
+}
+/**
+* Renders menu content in a portal.
+*/
+const MenuPortal = (props) => {
+	return /* @__PURE__ */ jsx(Menu$1.Portal, {
+		"data-slot": "dropdown-menu-portal",
+		...props
+	});
+};
+/**
+* Positions the menu popup relative to the trigger.
+*/
+function MenuPositioner({ className = "", ref, ...props }) {
+	const classes = ["menu__positioner", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Menu$1.Positioner, {
+		ref,
+		"data-slot": "dropdown-menu-positioner",
+		className: classes,
+		...props
+	});
+}
+/**
+* Container for menu items.
+*/
+function MenuPopup({ className = "", ref, ...props }) {
+	const classes = ["menu__popup", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Menu$1.Popup, {
+		ref,
+		"data-slot": "dropdown-menu-content",
+		className: classes,
+		...props
+	});
+}
+function MenuContent({ anchor, positionMethod, side, sideOffset = 4, align, alignOffset, collisionBoundary, collisionPadding, sticky, arrowPadding, disableAnchorTracking, collisionAvoidance, ...props }) {
+	return /* @__PURE__ */ jsx(MenuPortal, { children: /* @__PURE__ */ jsx(MenuPositioner, {
+		anchor,
+		positionMethod,
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		collisionBoundary,
+		collisionPadding,
+		sticky,
+		arrowPadding,
+		disableAnchorTracking,
+		collisionAvoidance,
+		children: /* @__PURE__ */ jsx(MenuPopup, { ...props })
+	}) });
+}
+/**
+* Interactive menu item.
+*/
+function MenuItem({ className = "", inset, variant = "default", ref, ...props }) {
+	const classes = [
+		"menu__item",
+		inset && "menu__item--inset",
+		className
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Menu$1.Item, {
+		ref,
+		"data-slot": "dropdown-menu-item",
+		"data-inset": inset || void 0,
+		"data-variant": variant,
+		className: classes,
+		...props
+	});
+}
+/**
+* Groups related menu items.
+*/
+function MenuGroup({ className = "", ref, ...props }) {
+	const classes = ["menu__group", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Menu$1.Group, {
+		ref,
+		"data-slot": "dropdown-menu-group",
+		className: classes,
+		...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(" ");
+	return /* @__PURE__ */ jsx(Menu$1.GroupLabel, {
+		ref,
+		"data-slot": "dropdown-menu-label",
+		"data-inset": inset || void 0,
+		className: classes,
+		...props
+	});
+}
+const MenuLabel = MenuGroupLabel;
+/**
+* Arrow pointing to the trigger.
+*/
+function MenuArrow({ className = "", ref, ...props }) {
+	const classes = ["menu__arrow", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Menu$1.Arrow, {
+		ref,
+		"data-slot": "dropdown-menu-arrow",
+		className: classes,
+		...props
+	});
+}
+/**
+* Visual separator between menu sections.
+*/
+function MenuSeparator({ className = "", ref, ...props }) {
+	const classes = ["menu__separator", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Menu$1.Separator, {
+		ref,
+		"data-slot": "dropdown-menu-separator",
+		className: classes,
+		...props
+	});
+}
+/**
+* Group for exclusive radio selection.
+*/
+function MenuRadioGroup({ className = "", ref, ...props }) {
+	const classes = ["menu__radio-group", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Menu$1.RadioGroup, {
+		ref,
+		"data-slot": "dropdown-menu-radio-group",
+		className: classes,
+		...props
+	});
+}
+/**
+* Radio item for exclusive selection.
+*/
+function MenuRadioItem({ className = "", children, ref, ...props }) {
+	const classes = ["menu__radio-item", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Menu$1.RadioItem, {
+		ref,
+		"data-slot": "dropdown-menu-radio-item",
+		className: classes,
+		...props,
+		children: hasChildOfType(children, MenuRadioItemIndicator) ? children : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuRadioItemIndicator, {}), children] })
+	});
+}
+/**
+* Indicator for selected radio item.
+*/
+function MenuRadioItemIndicator({ className = "", ref, ...props }) {
+	const classes = ["menu__radio-indicator", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Menu$1.RadioItemIndicator, {
+		ref,
+		"data-slot": "dropdown-menu-radio-item-indicator",
+		className: classes,
+		...props
+	});
+}
+/**
+* Checkbox item for toggling options.
+*/
+function MenuCheckboxItem({ className = "", children, ref, ...props }) {
+	const classes = ["menu__checkbox-item", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Menu$1.CheckboxItem, {
+		ref,
+		"data-slot": "dropdown-menu-checkbox-item",
+		className: classes,
+		...props,
+		children: hasChildOfType(children, MenuCheckboxItemIndicator) ? children : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuCheckboxItemIndicator, {}), children] })
+	});
+}
+/**
+* Indicator for checked checkbox item.
+*/
+function MenuCheckboxItemIndicator({ className = "", ref, ...props }) {
+	const classes = ["menu__checkbox-indicator", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Menu$1.CheckboxItemIndicator, {
+		ref,
+		"data-slot": "dropdown-menu-checkbox-item-indicator",
+		className: classes,
+		...props
+	});
+}
+function MenuShortcut({ className = "", ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		"data-slot": "dropdown-menu-shortcut",
+		className: ["menu__shortcut", className].filter(Boolean).join(" "),
+		...props
+	});
+}
+function MenuSub(props) {
+	return /* @__PURE__ */ jsx(Menu$1.SubmenuRoot, {
+		"data-slot": "dropdown-menu-sub",
+		...props
+	});
+}
+function MenuSubContent({ side = "right", align, sideOffset = 4, ...props }) {
+	return /* @__PURE__ */ jsx(MenuContent, {
+		"data-slot": "dropdown-menu-sub-content",
+		side,
+		align,
+		sideOffset,
+		...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(" ");
+	return /* @__PURE__ */ jsx(Menu$1.SubmenuTrigger, {
+		ref,
+		"data-slot": "dropdown-menu-sub-trigger",
+		"data-inset": inset || void 0,
+		className: classes,
+		...props
+	});
+}
+const MenuSubTrigger = MenuSubmenuTrigger;
+function hasChildOfType(children, type) {
+	return React.Children.toArray(children).some((child) => React.isValidElement(child) && child.type === type);
+}
+/**
+* A dropdown menu with keyboard navigation support.
+* Provides items, groups, checkboxes, radio selections, and nested submenus.
+*
+* @example
+* ```tsx
+* // Basic menu
+* <Menu.Root>
+*   <Menu.Trigger>Actions</Menu.Trigger>
+*   <Menu.Portal>
+*     <Menu.Positioner>
+*       <Menu.Popup>
+*         <Menu.Item onClick={() => console.log('Edit')}>Edit</Menu.Item>
+*         <Menu.Item onClick={() => console.log('Copy')}>Copy</Menu.Item>
+*         <Menu.Separator />
+*         <Menu.Item onClick={() => console.log('Delete')}>Delete</Menu.Item>
+*       </Menu.Popup>
+*     </Menu.Positioner>
+*   </Menu.Portal>
+* </Menu.Root>
+* ```
+*
+* @example
+* ```tsx
+* // Menu with checkbox items
+* <Menu.Root>
+*   <Menu.Trigger>View Options</Menu.Trigger>
+*   <Menu.Portal>
+*     <Menu.Positioner>
+*       <Menu.Popup>
+*         <Menu.CheckboxItem checked={showGrid} onCheckedChange={setShowGrid}>
+*           <Menu.CheckboxItemIndicator />
+*           Show Grid
+*         </Menu.CheckboxItem>
+*       </Menu.Popup>
+*     </Menu.Positioner>
+*   </Menu.Portal>
+* </Menu.Root>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/menu | Base UI Menu}
+*/
+const Menu = Object.assign(MenuRoot, {
+	Root: MenuRoot,
+	Trigger: MenuTrigger,
+	Portal: MenuPortal,
+	Positioner: MenuPositioner,
+	Popup: MenuPopup,
+	Content: MenuContent,
+	Item: MenuItem,
+	Group: MenuGroup,
+	GroupLabel: MenuGroupLabel,
+	Label: MenuLabel,
+	Arrow: MenuArrow,
+	Separator: MenuSeparator,
+	RadioGroup: MenuRadioGroup,
+	RadioItem: MenuRadioItem,
+	RadioItemIndicator: MenuRadioItemIndicator,
+	CheckboxItem: MenuCheckboxItem,
+	CheckboxItemIndicator: MenuCheckboxItemIndicator,
+	Shortcut: MenuShortcut,
+	Sub: MenuSub,
+	SubContent: MenuSubContent,
+	SubTrigger: MenuSubTrigger,
+	SubmenuTrigger: MenuSubmenuTrigger
+});
+//#endregion
+export { Menu, MenuArrow, MenuCheckboxItem, MenuCheckboxItemIndicator, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuLabel, MenuPopup, MenuPortal, MenuPositioner, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuRoot, MenuSeparator, MenuShortcut, MenuSub, MenuSubContent, MenuSubTrigger, MenuSubmenuTrigger, MenuTrigger };

package/dist/components/Menubar.d.ts

@@ -0,0 +1,331 @@
+import * as React from "react";
+import { Menu } from "@base-ui/react/menu";
+import { Menubar as Menubar$1 } from "@base-ui/react/menubar";
+
+//#region src/components/Menubar.d.ts
+/**
+ * Props for the Menubar component.
+ */
+interface MenubarProps extends Omit<React.ComponentPropsWithoutRef<typeof Menubar$1>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Menubar.Menu component.
+ */
+interface MenubarMenuProps extends React.ComponentPropsWithoutRef<typeof Menu.Root> {}
+/**
+ * Props for the Menubar.Trigger component.
+ */
+interface MenubarTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof Menu.Trigger>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Menubar.Portal component.
+ */
+interface MenubarPortalProps extends React.ComponentPropsWithoutRef<typeof Menu.Portal> {}
+/**
+ * Props for the Menubar.Positioner component.
+ */
+interface MenubarPositionerProps extends Omit<React.ComponentPropsWithoutRef<typeof Menu.Positioner>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Menubar.Popup component.
+ */
+interface MenubarPopupProps extends Omit<React.ComponentPropsWithoutRef<typeof Menu.Popup>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Menubar.Item component.
+ */
+interface MenubarItemProps extends Omit<React.ComponentPropsWithoutRef<typeof Menu.Item>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+  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;
+}
+/**
+ * Props for the Menubar.Group component.
+ */
+interface MenubarGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof Menu.Group>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Menubar.GroupLabel component.
+ */
+interface MenubarGroupLabelProps extends Omit<React.ComponentPropsWithoutRef<typeof Menu.GroupLabel>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+  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 MenubarShortcutProps extends React.HTMLAttributes<HTMLSpanElement> {}
+interface MenubarSubProps extends React.ComponentPropsWithoutRef<typeof Menu.SubmenuRoot> {}
+interface MenubarSubTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof Menu.SubmenuTrigger>, "className"> {
+  className?: string;
+  inset?: boolean;
+}
+type MenubarPlacementProps = Pick<MenubarPositionerProps, "anchor" | "positionMethod" | "side" | "sideOffset" | "align" | "alignOffset" | "collisionBoundary" | "collisionPadding" | "sticky" | "arrowPadding" | "disableAnchorTracking" | "collisionAvoidance">;
+type MenubarContentProps = MenubarPopupProps & MenubarPlacementProps;
+type MenubarSubContentProps = MenubarContentProps;
+/**
+ * Root menubar container.
+ *
+ * @example
+ * ```tsx
+ * <Menubar.Root>
+ *   <Menubar.Menu>
+ *     <Menubar.Trigger>File</Menubar.Trigger>
+ *     <Menubar.Portal>
+ *       <Menubar.Positioner>
+ *         <Menubar.Popup>
+ *           <Menubar.Item>New</Menubar.Item>
+ *           <Menubar.Item>Open</Menubar.Item>
+ *           <Menubar.Item>Save</Menubar.Item>
+ *         </Menubar.Popup>
+ *       </Menubar.Positioner>
+ *     </Menubar.Portal>
+ *   </Menubar.Menu>
+ * </Menubar.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/menubar | Base UI Menubar}
+ */
+declare function MenubarRoot({
+  className,
+  ref,
+  ...props
+}: MenubarProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Individual menu within the menubar.
+ */
+declare const MenubarMenu: (props: MenubarMenuProps) => React.JSX.Element;
+/**
+ * Button that opens the menu.
+ */
+declare function MenubarTrigger({
+  className,
+  ref,
+  ...props
+}: MenubarTriggerProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+/**
+ * Renders menu content in a portal.
+ */
+declare const MenubarPortal: (props: MenubarPortalProps) => React.JSX.Element;
+/**
+ * Positions the menu popup.
+ */
+declare function MenubarPositioner({
+  className,
+  ref,
+  ...props
+}: MenubarPositionerProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Container for menu items.
+ */
+declare function MenubarPopup({
+  className,
+  ref,
+  ...props
+}: MenubarPopupProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function MenubarContent({
+  anchor,
+  positionMethod,
+  side,
+  sideOffset,
+  align,
+  alignOffset,
+  collisionBoundary,
+  collisionPadding,
+  sticky,
+  arrowPadding,
+  disableAnchorTracking,
+  collisionAvoidance,
+  ...props
+}: MenubarContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Interactive menu item.
+ */
+declare function MenubarItem({
+  className,
+  inset,
+  variant,
+  ref,
+  ...props
+}: MenubarItemProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Visual separator between menu sections.
+ */
+declare function MenubarSeparator({
+  className,
+  ref,
+  ...props
+}: MenubarSeparatorProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Groups related menu items.
+ */
+declare function MenubarGroup({
+  className,
+  ref,
+  ...props
+}: MenubarGroupProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Label for a menu item group.
+ */
+declare function MenubarGroupLabel({
+  className,
+  inset,
+  ref,
+  ...props
+}: MenubarGroupLabelProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare const MenubarLabel: typeof MenubarGroupLabel;
+declare function MenubarCheckboxItem({
+  className,
+  children,
+  ref,
+  ...props
+}: MenubarCheckboxItemProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function MenubarRadioGroup({
+  className,
+  ref,
+  ...props
+}: MenubarRadioGroupProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function MenubarRadioItem({
+  className,
+  children,
+  ref,
+  ...props
+}: MenubarRadioItemProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function MenubarShortcut({
+  className,
+  ref,
+  ...props
+}: MenubarShortcutProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+declare function MenubarSub(props: MenubarSubProps): React.JSX.Element;
+declare function MenubarSubContent({
+  side,
+  align,
+  sideOffset,
+  ...props
+}: MenubarSubContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function MenubarSubTrigger({
+  className,
+  inset,
+  children,
+  ref,
+  ...props
+}: MenubarSubTriggerProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * A horizontal menu bar component typically used for application menus.
+ * Provides keyboard navigation and supports nested submenus.
+ *
+ * @example
+ * ```tsx
+ * // Application menubar
+ * <Menubar.Root>
+ *   <Menubar.Menu>
+ *     <Menubar.Trigger>File</Menubar.Trigger>
+ *     <Menubar.Portal>
+ *       <Menubar.Positioner>
+ *         <Menubar.Popup>
+ *           <Menubar.Item onClick={() => newFile()}>New</Menubar.Item>
+ *           <Menubar.Item onClick={() => openFile()}>Open</Menubar.Item>
+ *           <Menubar.Separator />
+ *           <Menubar.Item onClick={() => saveFile()}>Save</Menubar.Item>
+ *         </Menubar.Popup>
+ *       </Menubar.Positioner>
+ *     </Menubar.Portal>
+ *   </Menubar.Menu>
+ *   <Menubar.Menu>
+ *     <Menubar.Trigger>Edit</Menubar.Trigger>
+ *     <Menubar.Portal>
+ *       <Menubar.Positioner>
+ *         <Menubar.Popup>
+ *           <Menubar.Item>Undo</Menubar.Item>
+ *           <Menubar.Item>Redo</Menubar.Item>
+ *           <Menubar.Separator />
+ *           <Menubar.Item>Cut</Menubar.Item>
+ *           <Menubar.Item>Copy</Menubar.Item>
+ *           <Menubar.Item>Paste</Menubar.Item>
+ *         </Menubar.Popup>
+ *       </Menubar.Positioner>
+ *     </Menubar.Portal>
+ *   </Menubar.Menu>
+ * </Menubar.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/menubar | Base UI Menubar}
+ */
+declare const Menubar: typeof MenubarRoot & {
+  Root: typeof MenubarRoot;
+  Menu: (props: MenubarMenuProps) => React.JSX.Element;
+  Trigger: typeof MenubarTrigger;
+  Portal: (props: MenubarPortalProps) => React.JSX.Element;
+  Positioner: typeof MenubarPositioner;
+  Popup: typeof MenubarPopup;
+  Content: typeof MenubarContent;
+  Item: typeof MenubarItem;
+  Separator: typeof MenubarSeparator;
+  Group: typeof MenubarGroup;
+  GroupLabel: typeof MenubarGroupLabel;
+  Label: typeof MenubarGroupLabel;
+  CheckboxItem: typeof MenubarCheckboxItem;
+  RadioGroup: typeof MenubarRadioGroup;
+  RadioItem: typeof MenubarRadioItem;
+  Shortcut: typeof MenubarShortcut;
+  Sub: typeof MenubarSub;
+  SubContent: typeof MenubarSubContent;
+  SubTrigger: typeof MenubarSubTrigger;
+};
+//#endregion
+export { Menubar, MenubarCheckboxItem, MenubarCheckboxItemProps, MenubarContent, MenubarContentProps, MenubarGroup, MenubarGroupLabel, MenubarGroupLabelProps, MenubarGroupProps, MenubarItem, MenubarItemProps, MenubarLabel, MenubarMenu, MenubarMenuProps, MenubarPopup, MenubarPopupProps, MenubarPortal, MenubarPortalProps, MenubarPositioner, MenubarPositionerProps, MenubarProps, MenubarRadioGroup, MenubarRadioGroupProps, MenubarRadioItem, MenubarRadioItemProps, MenubarRoot, MenubarSeparator, MenubarSeparatorProps, MenubarShortcut, MenubarShortcutProps, MenubarSub, MenubarSubContent, MenubarSubContentProps, MenubarSubProps, MenubarSubTrigger, MenubarSubTriggerProps, MenubarTrigger, MenubarTriggerProps };