@teamix-evo/ui 0.1.1

package/src/components/mentions/mentions.tsx

@@ -0,0 +1,237 @@
+import * as React from 'react';
+
+import { cn } from '@/utils/cn';
+import { Textarea } from '@/components/textarea/textarea';
+
+export interface MentionsOption {
+  /** 真实插入到文本中的 value(不含前缀)。 */
+  value: string;
+  /** 候选列表显示文本(不传则用 value)。 */
+  label?: React.ReactNode;
+  /** 禁用此选项。 */
+  disabled?: boolean;
+}
+
+export interface MentionsProps
+  extends Omit<
+    React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    'onChange' | 'value' | 'defaultValue' | 'onSelect'
+  > {
+  /** 候选项(antd `options` 并集)。 */
+  options: MentionsOption[];
+  /** 受控值。 */
+  value?: string;
+  /** uncontrolled 初值。 */
+  defaultValue?: string;
+  /** 文本变化回调。 */
+  onChange?: (value: string) => void;
+  /**
+   * 触发符(antd `prefix` 并集) — 通常是 `@` 或 `#`。
+   * @default "@"
+   */
+  prefix?: string;
+  /**
+   * 选中候选项后插入文本的尾随分隔(对齐 antd `split` 默认空格)。
+   * @default " "
+   */
+  split?: string;
+  /**
+   * 用户在 prefix 后输入时的搜索回调,用于业务侧异步刷新 `options`。
+   */
+  onSearch?: (query: string, prefix: string) => void;
+  /**
+   * 选中候选项时回调。
+   */
+  onSelect?: (option: MentionsOption, prefix: string) => void;
+  /**
+   * 文本框尺寸传透传 Textarea(行数)。
+   * @default 3
+   */
+  rows?: number;
+  /** 禁用。 */
+  disabled?: boolean;
+}
+
+interface TriggerCtx {
+  /** prefix 在 value 中的索引(`@` 的位置)。 */
+  start: number;
+  /** prefix 后到光标位置的查询字符串。 */
+  query: string;
+}
+
+function getTriggerContext(
+  value: string,
+  caret: number,
+  prefix: string,
+): TriggerCtx | null {
+  if (caret <= 0) return null;
+  // Walk backwards from caret until we hit a whitespace, newline, or `prefix`.
+  for (let i = caret - 1; i >= 0; i--) {
+    const ch = value[i];
+    if (ch === prefix) {
+      // The char immediately before prefix must be start-of-string / whitespace / newline,
+      // otherwise we'd trigger on emails like a@b.
+      const prev = i === 0 ? '' : value[i - 1];
+      if (prev === '' || /\s/.test(prev)) {
+        return { start: i, query: value.slice(i + 1, caret) };
+      }
+      return null;
+    }
+    if (/\s/.test(ch)) return null;
+  }
+  return null;
+}
+
+const Mentions = React.forwardRef<HTMLTextAreaElement, MentionsProps>(
+  (
+    {
+      options,
+      value,
+      defaultValue,
+      onChange,
+      prefix = '@',
+      split = ' ',
+      onSearch,
+      onSelect,
+      rows = 3,
+      disabled,
+      className,
+      onKeyDown,
+      ...props
+    },
+    ref,
+  ) => {
+    const isControlled = value !== undefined;
+    const [internal, setInternal] = React.useState<string>(defaultValue ?? '');
+    const current = isControlled ? value! : internal;
+
+    const innerRef = React.useRef<HTMLTextAreaElement | null>(null);
+    React.useImperativeHandle(ref, () => innerRef.current as HTMLTextAreaElement);
+
+    const [ctx, setCtx] = React.useState<TriggerCtx | null>(null);
+    const [activeIdx, setActiveIdx] = React.useState(0);
+
+    const filtered = React.useMemo(() => {
+      if (!ctx) return [];
+      const q = ctx.query.toLowerCase();
+      return options.filter((o) =>
+        q === '' ? true : o.value.toLowerCase().includes(q),
+      );
+    }, [ctx, options]);
+
+    React.useEffect(() => {
+      setActiveIdx(0);
+    }, [ctx?.query]);
+
+    const update = (next: string) => {
+      if (!isControlled) setInternal(next);
+      onChange?.(next);
+    };
+
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const next = e.target.value;
+      update(next);
+      const caret = e.target.selectionStart ?? next.length;
+      const t = getTriggerContext(next, caret, prefix);
+      setCtx(t);
+      if (t) onSearch?.(t.query, prefix);
+    };
+
+    const insertOption = (opt: MentionsOption) => {
+      if (!ctx || opt.disabled) return;
+      const el = innerRef.current;
+      const before = current.slice(0, ctx.start);
+      const after = current.slice(
+        (el?.selectionStart ?? ctx.start + 1 + ctx.query.length),
+      );
+      const inserted = `${prefix}${opt.value}${split}`;
+      const next = `${before}${inserted}${after}`;
+      update(next);
+      onSelect?.(opt, prefix);
+      setCtx(null);
+      // Restore caret right after the inserted mention.
+      window.requestAnimationFrame(() => {
+        if (!el) return;
+        const pos = (before + inserted).length;
+        el.focus();
+        el.setSelectionRange(pos, pos);
+      });
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (ctx && filtered.length > 0) {
+        if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          setActiveIdx((i) => (i + 1) % filtered.length);
+          return;
+        }
+        if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          setActiveIdx((i) => (i - 1 + filtered.length) % filtered.length);
+          return;
+        }
+        if (e.key === 'Enter' || e.key === 'Tab') {
+          const opt = filtered[activeIdx];
+          if (opt && !opt.disabled) {
+            e.preventDefault();
+            insertOption(opt);
+            return;
+          }
+        }
+        if (e.key === 'Escape') {
+          e.preventDefault();
+          setCtx(null);
+          return;
+        }
+      }
+      onKeyDown?.(e);
+    };
+
+    return (
+      <div className={cn('relative', className)}>
+        <Textarea
+          ref={innerRef}
+          value={current}
+          rows={rows}
+          disabled={disabled}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          onBlur={() => {
+            // Delay so click-on-option can fire first.
+            window.setTimeout(() => setCtx(null), 120);
+          }}
+          {...props}
+        />
+        {ctx && filtered.length > 0 ? (
+          <ul
+            role="listbox"
+            className="absolute left-0 top-full z-50 mt-1 max-h-60 w-56 overflow-auto rounded-md border bg-popover p-1 text-sm text-popover-foreground shadow-md"
+          >
+            {filtered.map((opt, i) => (
+              <li
+                key={opt.value}
+                role="option"
+                aria-selected={i === activeIdx}
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                  insertOption(opt);
+                }}
+                onMouseEnter={() => setActiveIdx(i)}
+                className={cn(
+                  'cursor-pointer rounded-sm px-2 py-1.5',
+                  i === activeIdx && !opt.disabled && 'bg-accent text-accent-foreground',
+                  opt.disabled && 'cursor-not-allowed opacity-50',
+                )}
+              >
+                {opt.label ?? opt.value}
+              </li>
+            ))}
+          </ul>
+        ) : null}
+      </div>
+    );
+  },
+);
+Mentions.displayName = 'Mentions';
+
+export { Mentions };

package/src/components/menubar/menubar.meta.md

@@ -0,0 +1,100 @@
+---
+id: menubar
+name: Menubar
+type: component
+category: navigation
+since: 0.1.0
+package: "@teamix-evo/ui"
+---
+
+# Menubar
+
+应用顶部菜单栏 — Radix Menubar(典型 macOS 风格,文件 / 编辑 / 视图 / 帮助)。
+**与 DropdownMenu 区别**:Menubar 是**横排多个一级菜单**,鼠标 hover 切换;DropdownMenu 是单个独立下拉。
+
+## When to use
+
+- 桌面应用 / 编辑器顶部菜单(VS Code / Figma 风格)
+- 多组关联操作的横向汇总
+
+## When NOT to use
+
+- 单按钮触发 → `DropdownMenu`
+- 右键 → `ContextMenu`
+- 主导航(分类页面入口)→ `NavigationMenu`
+
+## Props
+
+> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。下表是 `Menubar`(Root) 的 props。
+
+<!-- auto:props:begin -->
+_(组件无 `<Name>Props` interface — props 详见 [`menubar.tsx`](./menubar.tsx))_
+<!-- auto:props:end -->
+
+## 依赖
+
+> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
+
+<!-- auto:deps:begin -->
+### 同库依赖
+
+> `teamix-evo ui add menubar` 时,以下 entry 会被自动连带安装(无需手动 add)。
+
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+
+### npm 依赖
+
+> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
+
+```bash
+pnpm add @radix-ui/react-menubar@^1.1.0 lucide-react@^0.460.0
+```
+<!-- auto:deps:end -->
+
+> 完整子组件:`Menubar` / `MenubarMenu` / `MenubarTrigger` / `MenubarContent` / `MenubarItem` / `MenubarCheckboxItem` / `MenubarRadioItem` / `MenubarLabel` / `MenubarSeparator` / `MenubarShortcut` / `MenubarSub` / `MenubarSubTrigger` / `MenubarSubContent` / `MenubarGroup` / `MenubarRadioGroup` / `MenubarPortal`。
+
+## AI 生成纪律
+
+- **Menubar 内必有 MenubarMenu**:每个一级菜单一个 `<MenubarMenu>`
+- **行业惯例顺序**:文件 / 编辑 / 视图 / 工具 / 帮助 — 不要打乱
+- **快捷键用 `<MenubarShortcut>`**:右对齐,与平台风格一致(macOS ⌘ / Windows Ctrl)
+- **避免太深的 Sub 嵌套**:超过 2 级的子菜单影响可用性
+
+## Examples
+
+```tsx
+import {
+  Menubar, MenubarMenu, MenubarTrigger, MenubarContent,
+  MenubarItem, MenubarSeparator, MenubarShortcut,
+  MenubarSub, MenubarSubTrigger, MenubarSubContent,
+} from '@/components/ui/menubar';
+
+<Menubar>
+  <MenubarMenu>
+    <MenubarTrigger>文件</MenubarTrigger>
+    <MenubarContent>
+      <MenubarItem>新建文件 <MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>
+      <MenubarItem>打开 <MenubarShortcut>⌘O</MenubarShortcut></MenubarItem>
+      <MenubarSeparator />
+      <MenubarSub>
+        <MenubarSubTrigger>分享</MenubarSubTrigger>
+        <MenubarSubContent>
+          <MenubarItem>邮件</MenubarItem>
+          <MenubarItem>消息</MenubarItem>
+        </MenubarSubContent>
+      </MenubarSub>
+      <MenubarSeparator />
+      <MenubarItem>退出 <MenubarShortcut>⌘Q</MenubarShortcut></MenubarItem>
+    </MenubarContent>
+  </MenubarMenu>
+  <MenubarMenu>
+    <MenubarTrigger>编辑</MenubarTrigger>
+    <MenubarContent>
+      <MenubarItem>撤销 <MenubarShortcut>⌘Z</MenubarShortcut></MenubarItem>
+      <MenubarItem>重做 <MenubarShortcut>⇧⌘Z</MenubarShortcut></MenubarItem>
+    </MenubarContent>
+  </MenubarMenu>
+</Menubar>
+```

package/src/components/menubar/menubar.stories.tsx

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+} from './menubar';
+
+const meta: Meta<typeof Menubar> = {
+  title: '导航 · Navigation/Menubar',
+  component: Menubar,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Menubar>;
+
+export const Default: Story = {
+  render: () => (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>文件</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            新建文件 <MenubarShortcut>⌘N</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            打开 <MenubarShortcut>⌘O</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>分享</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>邮件</MenubarItem>
+              <MenubarItem>消息</MenubarItem>
+              <MenubarItem>复制链接</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem>
+            退出 <MenubarShortcut>⌘Q</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>编辑</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            撤销 <MenubarShortcut>⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            重做 <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>
+            剪切 <MenubarShortcut>⌘X</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            复制 <MenubarShortcut>⌘C</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            粘贴 <MenubarShortcut>⌘V</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>视图</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>侧边栏</MenubarItem>
+          <MenubarItem>状态栏</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  ),
+};

package/src/components/menubar/menubar.tsx

@@ -0,0 +1,232 @@
+import * as React from 'react';
+import * as MenubarPrimitive from '@radix-ui/react-menubar';
+import { Check, ChevronRight, Circle } from 'lucide-react';
+
+import { cn } from '@/utils/cn';
+
+// Explicit `typeof` annotations sidestep TS2742 — without them the inferred
+// types reference deep `.pnpm/@radix-ui/react-context/...` paths which are
+// "not portable" and break declaration emit / consumer typechecks.
+const MenubarMenu: typeof MenubarPrimitive.Menu = MenubarPrimitive.Menu;
+const MenubarGroup: typeof MenubarPrimitive.Group = MenubarPrimitive.Group;
+const MenubarPortal: typeof MenubarPrimitive.Portal = MenubarPrimitive.Portal;
+const MenubarSub: typeof MenubarPrimitive.Sub = MenubarPrimitive.Sub;
+const MenubarRadioGroup: typeof MenubarPrimitive.RadioGroup =
+  MenubarPrimitive.RadioGroup;
+
+const Menubar = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Root
+    ref={ref}
+    className={cn(
+      'flex h-9 items-center gap-1 rounded-md border bg-background p-1 shadow-sm',
+      className,
+    )}
+    {...props}
+  />
+));
+Menubar.displayName = MenubarPrimitive.Root.displayName;
+
+const MenubarTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      className,
+    )}
+    {...props}
+  />
+));
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
+
+const MenubarSubTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <MenubarPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      inset && 'pl-8',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto size-4" />
+  </MenubarPrimitive.SubTrigger>
+));
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
+
+const MenubarSubContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+      className,
+    )}
+    {...props}
+  />
+));
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
+
+const MenubarContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+>(
+  (
+    { className, align = 'start', alignOffset = -4, sideOffset = 8, ...props },
+    ref,
+  ) => (
+    <MenubarPrimitive.Portal>
+      <MenubarPrimitive.Content
+        ref={ref}
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+          className,
+        )}
+        {...props}
+      />
+    </MenubarPrimitive.Portal>
+  ),
+);
+MenubarContent.displayName = MenubarPrimitive.Content.displayName;
+
+const MenubarItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      className,
+    )}
+    {...props}
+  />
+));
+MenubarItem.displayName = MenubarPrimitive.Item.displayName;
+
+const MenubarCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <MenubarPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex size-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Check className="size-4" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.CheckboxItem>
+));
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
+
+const MenubarRadioItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <MenubarPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex size-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Circle className="size-2 fill-current" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.RadioItem>
+));
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
+
+const MenubarLabel = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Label
+    ref={ref}
+    className={cn(
+      'px-2 py-1.5 text-sm font-semibold',
+      inset && 'pl-8',
+      className,
+    )}
+    {...props}
+  />
+));
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
+
+const MenubarSeparator = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
+
+const MenubarShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => (
+  <span
+    className={cn(
+      'ml-auto text-xs tracking-widest text-muted-foreground',
+      className,
+    )}
+    {...props}
+  />
+);
+MenubarShortcut.displayName = 'MenubarShortcut';
+
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarPortal,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarGroup,
+  MenubarSub,
+  MenubarShortcut,
+};