@momentumworld/ui-react 0.17.0

package/src/components/ui/kbd.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      className={cn(
+        "pointer-events-none inline-flex h-5 min-w-5 select-none items-center justify-center gap-1 rounded bg-muted px-1 font-medium font-sans text-muted-foreground text-xs [&_svg:not([class*='size-'])]:size-3",
+        className,
+      )}
+      data-slot="kbd"
+      {...props}
+    />
+  );
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      className={cn("inline-flex items-center gap-1", className)}
+      data-slot="kbd-group"
+      {...props}
+    />
+  );
+}
+
+export { Kbd, KbdGroup };

package/src/components/ui/label.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { cn } from "../../lib/utils/css";
+
+function Label({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"label">) {
+  const defaultProps = {
+    className: cn(
+      "inline-flex items-center gap-2 text-base/4.5 sm:text-sm/4 font-medium text-foreground",
+      className,
+    ),
+    "data-slot": "label",
+  };
+
+  return useRender({
+    defaultTagName: "label",
+    props: mergeProps<"label">(defaultProps, props),
+    render,
+  });
+}
+
+export { Label };

package/src/components/ui/markdown.tsx

@@ -0,0 +1,188 @@
+"use client";
+
+import type * as React from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+import { cn } from "../../lib/utils/css";
+
+/** Common LaTeX command → readable-text replacements. */
+const LATEX_SYMBOLS: Record<string, string> = {
+  times: "×",
+  cdot: "·",
+  div: "÷",
+  approx: "≈",
+  neq: "≠",
+  ne: "≠",
+  leq: "≤",
+  le: "≤",
+  geq: "≥",
+  ge: "≥",
+  pm: "±",
+  to: "→",
+  rightarrow: "→",
+  Rightarrow: "⇒",
+  infty: "∞",
+  cdots: "⋯",
+  ldots: "…",
+  deg: "°",
+};
+
+/** Wrap a fraction side in parens only when it holds an operator, so
+ *  `\frac{116}{22}` → `116/22` but `\frac{a+b}{2}` → `(a+b)/2`. */
+const wrapFracSide = (x: string): string => {
+  const t = x.trim();
+  return /[+\-*/×÷·\s]/.test(t) ? `(${t})` : t;
+};
+
+/**
+ * LLMs sometimes emit LaTeX math (`\( \frac{116}{22} \times 100 \approx 527\% \)`),
+ * which react-markdown renders as raw gibberish. We don't ship a full math
+ * engine (KaTeX + fonts) — assistant chat rarely needs typeset math — so this
+ * downgrades the common LaTeX constructs to readable plain text instead. Plain
+ * text with no backslash / `$` is returned untouched (fast path), and lone `$`
+ * amounts like "$100" are left alone (only `$…$` containing a command unwraps).
+ */
+function normalizeLatex(src: string): string {
+  if (!src.includes("\\") && !src.includes("$")) return src;
+
+  let s = src;
+
+  // Unwrap math delimiters. `$$…$$` display + `\(…\)`/`\[…\]` inline always;
+  // single `$…$` only when the body looks like math (has a backslash).
+  s = s.replace(/\$\$([\s\S]*?)\$\$/g, " $1 ");
+  s = s.replace(/\$([^$\n]*\\[^$\n]*)\$/g, " $1 ");
+  s = s.replace(/\\[()[\]]/g, " ");
+
+  // \frac{a}{b} → a/b (a few passes for nesting), \sqrt{x} → √(x).
+  for (let i = 0; i < 3; i++) {
+    const next = s.replace(
+      /\\[dt]?frac\s*\{([^{}]*)\}\s*\{([^{}]*)\}/g,
+      (_m, a: string, b: string) => `${wrapFracSide(a)}/${wrapFracSide(b)}`,
+    );
+    if (next === s) break;
+    s = next;
+  }
+  s = s.replace(/\\sqrt\s*\{([^{}]*)\}/g, "√($1)");
+  s = s.replace(/\\(?:text|mathrm|mathbf|mathit|operatorname)\s*\{([^{}]*)\}/g, "$1");
+
+  // Known symbols → unicode; \left/\right dropped.
+  s = s.replace(/\\([a-zA-Z]+)/g, (m, name: string) => LATEX_SYMBOLS[name] ?? m);
+  s = s.replace(/\\(left|right)\b/g, "");
+
+  // Escaped chars (\% \$ \_ \{ …) and thin spaces (\, \; \!).
+  s = s.replace(/\\([%$&#_{}])/g, "$1");
+  s = s.replace(/\\[,;:!]/g, "");
+  s = s.replace(/\\ /g, " ");
+
+  // Any leftover unknown \command → keep the word, drop the backslash.
+  s = s.replace(/\\([a-zA-Z]+)/g, "$1");
+
+  // Collapse grouping braces ({x} → x) and runs of spaces.
+  for (let i = 0; i < 3; i++) {
+    const next = s.replace(/\{([^{}]*)\}/g, "$1");
+    if (next === s) break;
+    s = next;
+  }
+  return s.replace(/[ \t]{2,}/g, " ");
+}
+
+export interface MarkdownProps {
+  /** The markdown source to render. */
+  children: string;
+  className?: string;
+}
+
+/**
+ * Markdown renderer for assistant/chat content (GitHub-flavored markdown).
+ * Raw HTML in the source is NOT rendered — output is limited to markdown
+ * elements, which keeps untrusted model output safe to display.
+ */
+function Markdown({ children, className }: MarkdownProps) {
+  return (
+    <div
+      className={cn(
+        "space-y-2 break-words text-foreground text-sm leading-relaxed",
+        className,
+      )}
+      data-slot="markdown"
+    >
+      <ReactMarkdown
+        components={{
+          a: ({ node: _node, ...props }) => (
+            <a
+              className="font-medium text-primary underline underline-offset-2 hover:opacity-80"
+              rel="noreferrer noopener"
+              target="_blank"
+              {...props}
+            />
+          ),
+          blockquote: ({ node: _node, ...props }) => (
+            <blockquote
+              className="border-border border-l-2 pl-3 text-muted-foreground italic"
+              {...props}
+            />
+          ),
+          code: ({ node: _node, className: codeClassName, ...props }) => {
+            const isBlock = /language-/.test(codeClassName ?? "");
+            return (
+              <code
+                className={cn(
+                  "rounded bg-muted font-mono text-[0.85em]",
+                  isBlock ? "block overflow-x-auto p-3" : "px-1 py-0.5",
+                  codeClassName,
+                )}
+                {...props}
+              />
+            );
+          },
+          h1: ({ node: _node, ...props }) => (
+            <h1 className="font-semibold text-base" {...props} />
+          ),
+          h2: ({ node: _node, ...props }) => (
+            <h2 className="font-semibold text-base" {...props} />
+          ),
+          h3: ({ node: _node, ...props }) => (
+            <h3 className="font-semibold text-sm" {...props} />
+          ),
+          hr: ({ node: _node, ...props }) => (
+            <hr className="border-border" {...props} />
+          ),
+          li: ({ node: _node, ...props }) => <li className="my-0.5" {...props} />,
+          ol: ({ node: _node, ...props }) => (
+            <ol className="list-decimal space-y-1 pl-5" {...props} />
+          ),
+          pre: ({ node: _node, ...props }) => (
+            <pre
+              className="overflow-x-auto rounded-lg bg-muted p-0 text-[0.85em]"
+              {...props}
+            />
+          ),
+          table: ({ node: _node, ...props }) => (
+            <div className="overflow-x-auto rounded-lg border border-border">
+              <table className="w-full text-left text-sm" {...props} />
+            </div>
+          ),
+          td: ({ node: _node, ...props }) => (
+            <td className="border-border border-t px-3 py-1.5 align-top" {...props} />
+          ),
+          th: ({ node: _node, ...props }) => (
+            <th
+              className="bg-muted px-3 py-1.5 font-medium text-muted-foreground"
+              {...props}
+            />
+          ),
+          ul: ({ node: _node, ...props }) => (
+            <ul className="list-disc space-y-1 pl-5" {...props} />
+          ),
+        }}
+        remarkPlugins={[remarkGfm]}
+        skipHtml
+      >
+        {normalizeLatex(children)}
+      </ReactMarkdown>
+    </div>
+  );
+}
+
+export { Markdown };

package/src/components/ui/menu.tsx

@@ -0,0 +1,312 @@
+"use client";
+
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { ChevronRightIcon } from "lucide-react";
+import type * as React from "react";
+import { cn } from "../../lib/utils/css";
+
+const MenuCreateHandle = MenuPrimitive.createHandle;
+
+const Menu = MenuPrimitive.Root;
+
+const MenuPortal = MenuPrimitive.Portal;
+
+function MenuTrigger(props: MenuPrimitive.Trigger.Props) {
+  return <MenuPrimitive.Trigger data-slot="menu-trigger" {...props} />;
+}
+
+function MenuPopup({
+  children,
+  className,
+  sideOffset = 4,
+  align = "center",
+  alignOffset,
+  side = "bottom",
+  ...props
+}: MenuPrimitive.Popup.Props & {
+  align?: MenuPrimitive.Positioner.Props["align"];
+  sideOffset?: MenuPrimitive.Positioner.Props["sideOffset"];
+  alignOffset?: MenuPrimitive.Positioner.Props["alignOffset"];
+  side?: MenuPrimitive.Positioner.Props["side"];
+}) {
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        className="z-50"
+        data-slot="menu-positioner"
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <MenuPrimitive.Popup
+          className={cn(
+            "relative flex not-[class*='w-']:min-w-32 origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 outline-none transition-[transform,scale,opacity] duration-150 ease-out before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/6%)] focus:outline-none data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+            className,
+          )}
+          data-slot="menu-popup"
+          {...props}
+        >
+          <div className="max-h-(--available-height) w-full overflow-y-auto p-1">
+            {children}
+          </div>
+        </MenuPrimitive.Popup>
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  );
+}
+
+function MenuGroup(props: MenuPrimitive.Group.Props) {
+  return <MenuPrimitive.Group data-slot="menu-group" {...props} />;
+}
+
+function MenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: MenuPrimitive.Item.Props & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <MenuPrimitive.Item
+      className={cn(
+        "[&>svg]:-mx-0.5 flex min-h-8 cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-inset:ps-8 data-[variant=destructive]:text-destructive-foreground data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4 [&>svg]:pointer-events-none [&>svg]:shrink-0",
+        className,
+      )}
+      data-inset={inset}
+      data-slot="menu-item"
+      data-variant={variant}
+      {...props}
+    />
+  );
+}
+
+function MenuCheckboxItem({
+  className,
+  children,
+  checked,
+  variant = "default",
+  ...props
+}: MenuPrimitive.CheckboxItem.Props & {
+  variant?: "default" | "switch";
+}) {
+  return (
+    <MenuPrimitive.CheckboxItem
+      checked={checked}
+      className={cn(
+        "grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default items-center gap-2 rounded-sm py-1 ps-2 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        variant === "switch"
+          ? "grid-cols-[1fr_auto] gap-4 pe-1.5"
+          : "grid-cols-[1rem_1fr] pe-4",
+        className,
+      )}
+      data-slot="menu-checkbox-item"
+      {...props}
+    >
+      {variant === "switch" ? (
+        <>
+          <span className="col-start-1">{children}</span>
+          <MenuPrimitive.CheckboxItemIndicator
+            className="inset-shadow-[0_1px_--theme(--color-black/6%)] inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 [--thumb-size:--spacing(4)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input data-disabled:opacity-64 sm:[--thumb-size:--spacing(3)]"
+            keepMounted
+          >
+            <span className="pointer-events-none block aspect-square h-full in-[[data-slot=menu-checkbox-item][data-checked]]:origin-[var(--thumb-size)_50%] origin-left in-[[data-slot=menu-checkbox-item][data-checked]]:translate-x-[calc(var(--thumb-size)-4px)] in-[[data-slot=menu-checkbox-item]:active]:not-data-disabled:scale-x-110 in-[[data-slot=menu-checkbox-item]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.10)] rounded-(--thumb-size) bg-background shadow-sm/5 will-change-transform [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s]" />
+          </MenuPrimitive.CheckboxItemIndicator>
+        </>
+      ) : (
+        <>
+          <MenuPrimitive.CheckboxItemIndicator className="col-start-1">
+            <svg
+              fill="none"
+              height="24"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>Check</title>
+              <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
+            </svg>
+          </MenuPrimitive.CheckboxItemIndicator>
+          <span className="col-start-2">{children}</span>
+        </>
+      )}
+    </MenuPrimitive.CheckboxItem>
+  );
+}
+
+function MenuRadioGroup(props: MenuPrimitive.RadioGroup.Props) {
+  return <MenuPrimitive.RadioGroup data-slot="menu-radio-group" {...props} />;
+}
+
+function MenuRadioItem({
+  className,
+  children,
+  ...props
+}: MenuPrimitive.RadioItem.Props) {
+  return (
+    <MenuPrimitive.RadioItem
+      className={cn(
+        "grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      data-slot="menu-radio-item"
+      {...props}
+    >
+      <MenuPrimitive.RadioItemIndicator className="col-start-1">
+        <svg
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title>Check</title>
+          <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
+        </svg>
+      </MenuPrimitive.RadioItemIndicator>
+      <span className="col-start-2">{children}</span>
+    </MenuPrimitive.RadioItem>
+  );
+}
+
+function MenuGroupLabel({
+  className,
+  inset,
+  ...props
+}: MenuPrimitive.GroupLabel.Props & {
+  inset?: boolean;
+}) {
+  return (
+    <MenuPrimitive.GroupLabel
+      className={cn(
+        "px-2 py-1.5 font-medium text-muted-foreground text-xs data-inset:ps-9 sm:data-inset:ps-8",
+        className,
+      )}
+      data-inset={inset}
+      data-slot="menu-label"
+      {...props}
+    />
+  );
+}
+
+function MenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {
+  return (
+    <MenuPrimitive.Separator
+      className={cn("mx-2 my-1 h-px bg-border", className)}
+      data-slot="menu-separator"
+      {...props}
+    />
+  );
+}
+
+function MenuShortcut({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      className={cn(
+        "ms-auto font-medium font-sans text-muted-foreground/72 text-xs tracking-widest",
+        className,
+      )}
+      data-slot="menu-shortcut"
+      {...props}
+    />
+  );
+}
+
+function MenuSub(props: MenuPrimitive.SubmenuRoot.Props) {
+  return <MenuPrimitive.SubmenuRoot data-slot="menu-sub" {...props} />;
+}
+
+function MenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: MenuPrimitive.SubmenuTrigger.Props & {
+  inset?: boolean;
+}) {
+  return (
+    <MenuPrimitive.SubmenuTrigger
+      className={cn(
+        "flex min-h-8 items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-popup-open:bg-accent data-inset:ps-8 data-highlighted:text-accent-foreground data-popup-open:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+        className,
+      )}
+      data-inset={inset}
+      data-slot="menu-sub-trigger"
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="-me-0.5 ms-auto opacity-80" />
+    </MenuPrimitive.SubmenuTrigger>
+  );
+}
+
+function MenuSubPopup({
+  className,
+  sideOffset = 0,
+  alignOffset,
+  align = "start",
+  ...props
+}: MenuPrimitive.Popup.Props & {
+  align?: MenuPrimitive.Positioner.Props["align"];
+  sideOffset?: MenuPrimitive.Positioner.Props["sideOffset"];
+  alignOffset?: MenuPrimitive.Positioner.Props["alignOffset"];
+}) {
+  const defaultAlignOffset = align !== "center" ? -5 : undefined;
+
+  return (
+    <MenuPopup
+      align={align}
+      alignOffset={alignOffset ?? defaultAlignOffset}
+      className={className}
+      data-slot="menu-sub-content"
+      side="inline-end"
+      sideOffset={sideOffset}
+      {...props}
+    />
+  );
+}
+
+export {
+  MenuCreateHandle,
+  MenuCreateHandle as DropdownMenuCreateHandle,
+  Menu,
+  Menu as DropdownMenu,
+  MenuPortal,
+  MenuPortal as DropdownMenuPortal,
+  MenuTrigger,
+  MenuTrigger as DropdownMenuTrigger,
+  MenuPopup,
+  MenuPopup as DropdownMenuContent,
+  MenuGroup,
+  MenuGroup as DropdownMenuGroup,
+  MenuItem,
+  MenuItem as DropdownMenuItem,
+  MenuCheckboxItem,
+  MenuCheckboxItem as DropdownMenuCheckboxItem,
+  MenuRadioGroup,
+  MenuRadioGroup as DropdownMenuRadioGroup,
+  MenuRadioItem,
+  MenuRadioItem as DropdownMenuRadioItem,
+  MenuGroupLabel,
+  MenuGroupLabel as DropdownMenuLabel,
+  MenuSeparator,
+  MenuSeparator as DropdownMenuSeparator,
+  MenuShortcut,
+  MenuShortcut as DropdownMenuShortcut,
+  MenuSub,
+  MenuSub as DropdownMenuSub,
+  MenuSubTrigger,
+  MenuSubTrigger as DropdownMenuSubTrigger,
+  MenuSubPopup,
+  MenuSubPopup as DropdownMenuSubContent,
+};

package/src/components/ui/menubar.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import {
+  Menubar as MenubarPrimitive,
+  type MenubarProps,
+} from "@base-ui/react/menubar";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+import {
+  Menu,
+  MenuCheckboxItem,
+  MenuGroup,
+  MenuGroupLabel,
+  MenuItem,
+  MenuPopup,
+  MenuPortal,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuSeparator,
+  MenuShortcut,
+  MenuSub,
+  MenuSubPopup,
+  MenuSubTrigger,
+} from "./menu";
+
+function Menubar({ className, ...props }: MenubarProps) {
+  return (
+    <MenubarPrimitive
+      className={cn(
+        "flex h-9 w-fit items-center gap-1 rounded-lg border bg-background p-1 shadow-xs/5 sm:h-8 dark:bg-input/32",
+        className,
+      )}
+      data-slot="menubar"
+      {...props}
+    />
+  );
+}
+
+function MenubarMenu(props: MenuPrimitive.Root.Props) {
+  return <Menu data-slot="menubar-menu" {...props} />;
+}
+
+function MenubarTrigger({
+  className,
+  ...props
+}: MenuPrimitive.Trigger.Props) {
+  return (
+    <MenuPrimitive.Trigger
+      className={cn(
+        "flex select-none items-center rounded-md px-2 py-1 font-medium text-base outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-popup-open:bg-accent data-popup-open:text-accent-foreground sm:text-sm",
+        className,
+      )}
+      data-slot="menubar-trigger"
+      {...props}
+    />
+  );
+}
+
+function MenubarContent({
+  align = "start",
+  sideOffset = 8,
+  ...props
+}: React.ComponentProps<typeof MenuPopup>) {
+  return (
+    <MenuPopup
+      align={align}
+      data-slot="menubar-content"
+      sideOffset={sideOffset}
+      {...props}
+    />
+  );
+}
+
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenuPortal as MenubarPortal,
+  MenuGroup as MenubarGroup,
+  MenuItem as MenubarItem,
+  MenuCheckboxItem as MenubarCheckboxItem,
+  MenuRadioGroup as MenubarRadioGroup,
+  MenuRadioItem as MenubarRadioItem,
+  MenuGroupLabel as MenubarLabel,
+  MenuSeparator as MenubarSeparator,
+  MenuShortcut as MenubarShortcut,
+  MenuSub as MenubarSub,
+  MenuSubTrigger as MenubarSubTrigger,
+  MenuSubPopup as MenubarSubContent,
+};