@mihcm/ui 0.14.1

package/src/Logo.tsx

@@ -0,0 +1,153 @@
+'use client';
+
+import { forwardRef, type CSSProperties, type HTMLAttributes } from 'react';
+import { cn } from './internal/cn.js';
+
+export type LogoVariant = 'primary' | 'white' | 'black' | 'current';
+export type LogoSize = 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
+export type LogoBrand =
+  | 'mihcm'
+  | 'mihcm-lite'
+  | 'mia-one'
+  | 'smart-assist'
+  | 'syntra'
+  | 'smart-assist-icon'
+  | 'syntra-icon'
+  | 'mihcm-favicon';
+export type LogoAssetVariant = 'primary' | 'secondary' | 'white' | 'black';
+
+export interface LogoProps extends HTMLAttributes<HTMLSpanElement> {
+  /** Visual treatment for the built-in MiHCM mark. */
+  variant?: LogoVariant;
+  /** Preset size for the mark or supplied image. */
+  size?: LogoSize;
+  /** Approved brand asset family. Uses `/brand/logos/<brand>-<assetVariant>.svg`. */
+  brand?: LogoBrand;
+  /** Approved asset variant when `brand` is set. */
+  assetVariant?: LogoAssetVariant;
+  /** Base public path for approved logo assets. */
+  assetBasePath?: string;
+  /** Optional image source for approved downloaded brand assets. */
+  src?: string;
+  /** Accessible label for image or inline mark. Use empty text for decorative logos. */
+  alt?: string;
+}
+
+const sizeHeights: Record<LogoSize, number> = {
+  sm: 20,
+  md: 24,
+  lg: 32,
+  xl: 56,
+  xxl: 80,
+  xxxl: 112,
+};
+
+const logoAspectRatio: Record<LogoBrand | 'inline', number> = {
+  inline: 35 / 23,
+  mihcm: 128 / 86,
+  'mihcm-lite': 128 / 88,
+  'mia-one': 128 / 87,
+  'smart-assist': 292 / 50,
+  syntra: 259 / 64,
+  'smart-assist-icon': 128 / 99,
+  'syntra-icon': 128 / 127,
+  'mihcm-favicon': 176 / 118,
+};
+
+const primaryClasses = {
+  mark: 'fill-primary',
+  accent: 'fill-accent',
+};
+
+const monoClasses: Record<Exclude<LogoVariant, 'primary'>, string> = {
+  white: 'fill-primary-foreground',
+  black: 'fill-brand-neutral-821 dark:fill-brand-neutral-50',
+  current: 'fill-current',
+};
+
+function getPathClass(variant: LogoVariant, part: 'mark' | 'accent') {
+  if (variant === 'primary') {
+    return primaryClasses[part];
+  }
+
+  return monoClasses[variant];
+}
+
+export function getLogoAssetPath(
+  brand: LogoBrand,
+  assetVariant: LogoAssetVariant = 'primary',
+  assetBasePath = '/brand/logos',
+) {
+  const base = assetBasePath.replace(/\/$/, '');
+  return `${base}/${brand}-${assetVariant}.svg`;
+}
+
+export function getLogoSizeStyle(brand: LogoBrand | undefined, size: LogoSize) {
+  const height = sizeHeights[size];
+  const ratio = logoAspectRatio[brand ?? 'inline'];
+
+  return {
+    '--mihcm-logo-height': `${height}px`,
+    '--mihcm-logo-width': `${Math.round(height * ratio * 1000) / 1000}px`,
+  } as CSSProperties;
+}
+
+export const Logo = forwardRef<HTMLSpanElement, LogoProps>(function Logo(
+  {
+    className,
+    variant = 'primary',
+    size = 'md',
+    brand,
+    assetVariant = 'primary',
+    assetBasePath,
+    src,
+    alt = 'MiHCM',
+    style,
+    ...props
+  },
+  ref,
+) {
+  const resolvedSrc = src ?? (brand ? getLogoAssetPath(brand, assetVariant, assetBasePath) : undefined);
+  const labelProps =
+    alt.length > 0
+      ? { role: 'img', 'aria-label': alt }
+      : { 'aria-hidden': true };
+
+  return (
+    <span
+      ref={ref}
+      className={cn(
+        'inline-flex h-[var(--mihcm-logo-height)] w-[var(--mihcm-logo-width)] shrink-0 items-center justify-center',
+        className,
+      )}
+      style={{ ...getLogoSizeStyle(brand, size), ...style }}
+      {...labelProps}
+      {...props}
+    >
+      {resolvedSrc ? (
+        <img src={resolvedSrc} alt={alt} className="block size-full object-contain" />
+      ) : (
+        <svg
+          viewBox="0 0 35 23"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className="block size-full"
+          aria-hidden
+        >
+          <path
+            d="M21.978 12.836C21.978 10.798 20.594 10.381 19.139 10.381C18.458 10.416 17.793 10.605 17.194 10.932C16.596 11.26 16.079 11.718 15.682 12.273V23.08C14.428 23.08 13.225 22.582 12.337 21.695C11.45 20.808 10.952 19.605 10.952 18.35V13.293C10.992 12.913 10.95 12.53 10.827 12.168C10.704 11.806 10.505 11.476 10.242 11.199C9.979 10.922 9.659 10.706 9.304 10.565C8.949 10.424 8.568 10.361 8.187 10.382C7.506 10.417 6.841 10.606 6.242 10.933C5.644 11.261 5.127 11.719 4.73 12.274V23.081C3.476 23.081 2.272 22.583 1.385 21.696C0.498 20.809 0 19.606 0 18.351V6.415H4.621V7.07C4.621 7.652 4.548 8.38 4.548 8.38C5.149 7.636 5.908 7.034 6.77 6.619C7.632 6.204 8.576 5.986 9.533 5.98C10.623 5.902 11.711 6.147 12.662 6.684C13.614 7.222 14.386 8.027 14.882 9C15.492 8.072 16.323 7.31 17.301 6.783C18.278 6.256 19.371 5.98 20.482 5.98C20.482 5.98 23.983 6.882 21.978 12.836Z"
+            className={getPathClass(variant, 'mark')}
+          />
+          <path
+            d="M21.115 5.978C24.715 5.978 26.968 8.301 27.062 12.164V23.08C25.808 23.08 24.604 22.582 23.717 21.695C22.83 20.808 22.332 19.604 22.332 18.35V13.293C24.836 7.221 21.115 5.978 21.115 5.978Z"
+            className={getPathClass(variant, 'accent')}
+          />
+          <path
+            d="M25.199 5.701C25.757 5.418 26.212 4.966 26.498 4.409C26.784 3.852 26.887 3.22 26.792 2.601C26.728 2.16 26.568 1.738 26.322 1.366C26.077 0.994 25.753 0.681 25.373 0.448C24.993 0.215 24.567 0.068 24.124 0.019C23.681 -0.031 23.233 0.018 22.811 0.161C22.388 0.304 22.003 0.538 21.682 0.847C21.36 1.155 21.11 1.531 20.95 1.947C20.79 2.363 20.724 2.809 20.755 3.253C20.787 3.698 20.916 4.13 21.133 4.519C22.587 4.403 24.034 4.823 25.199 5.701Z"
+            className={getPathClass(variant, 'accent')}
+          />
+        </svg>
+      )}
+    </span>
+  );
+});

package/src/MainSidebar.native.tsx

@@ -0,0 +1,8 @@
+export {
+  MainSidebar,
+  IconSidebar,
+  type MainSidebarItem,
+  type MainSidebarProps,
+  type IconSidebarItem,
+  type IconSidebarProps,
+} from './IconSidebar.js';

package/src/MainSidebar.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+export {
+  MainSidebar,
+  IconSidebar,
+  type MainSidebarItem,
+  type MainSidebarProps,
+  type IconSidebarItem,
+  type IconSidebarProps,
+} from './IconSidebar.js';

package/src/Menubar.tsx

@@ -0,0 +1,485 @@
+'use client';
+
+/**
+ * Menubar (web variant — React DOM).
+ *
+ * A horizontal menu bar with dropdown menus, powered by Radix.
+ * Suitable for application-style top menu bars (File, Edit, View, etc.).
+ *
+ *   <Menubar>
+ *     <MenubarMenu>
+ *       <MenubarTrigger>File</MenubarTrigger>
+ *       <MenubarContent>
+ *         <MenubarItem onSelect={() => {}}>New</MenubarItem>
+ *         <MenubarSeparator />
+ *         <MenubarItem onSelect={() => {}}>Exit</MenubarItem>
+ *       </MenubarContent>
+ *     </MenubarMenu>
+ *   </Menubar>
+ *
+ * Wiki: docs/components/Menubar.md
+ */
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from 'react';
+import * as MenubarPrimitive from '@radix-ui/react-menubar';
+import { cn } from './internal/cn.js';
+
+type MenubarSize = 'sm' | 'md' | 'lg';
+type MenubarSurface = 'default' | 'soft' | 'outline' | 'ghost';
+type MenubarJustify = 'start' | 'center' | 'between' | 'end';
+type MenubarContentSize = 'sm' | 'md' | 'lg' | 'xl' | 'auto';
+type MenubarContentSurface = 'default' | 'soft' | 'outline' | 'elevated' | 'plain';
+type MenubarAnimation = 'scale' | 'slide' | 'fade' | 'none';
+type MenubarItemTone = 'default' | 'accent' | 'danger' | 'success' | 'warning';
+
+const rootSizeClasses: Record<MenubarSize, string> = {
+  sm: 'min-h-9 gap-0.5 p-0.5',
+  md: 'min-h-10 gap-1 p-1',
+  lg: 'min-h-12 gap-1.5 p-1.5',
+};
+
+const rootSurfaceClasses: Record<MenubarSurface, string> = {
+  default: 'border border-border bg-card shadow-mi-card',
+  soft: 'border border-transparent bg-muted/60',
+  outline: 'border border-border bg-background',
+  ghost: 'border border-transparent bg-transparent shadow-none',
+};
+
+const rootJustifyClasses: Record<MenubarJustify, string> = {
+  start: 'justify-start',
+  center: 'justify-center',
+  between: 'justify-between',
+  end: 'justify-end',
+};
+
+const triggerSizeClasses: Record<MenubarSize, string> = {
+  sm: 'min-h-7 px-2 py-1 text-body-xs',
+  md: 'min-h-8 px-3 py-1.5 text-body-sm',
+  lg: 'min-h-9 px-4 py-2 text-body-md',
+};
+
+const triggerSurfaceClasses: Record<MenubarSurface, string> = {
+  default: 'hover:bg-accent/80 hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+  soft: 'hover:bg-muted focus:bg-muted data-[state=open]:bg-muted',
+  outline: 'border border-transparent hover:border-border hover:bg-background focus:border-ring focus:bg-background data-[state=open]:border-border data-[state=open]:bg-background',
+  ghost: 'hover:bg-transparent hover:text-primary focus:bg-transparent focus:text-primary data-[state=open]:bg-transparent data-[state=open]:text-primary',
+};
+
+const contentSizeClasses: Record<MenubarContentSize, string> = {
+  sm: 'min-w-[10rem]',
+  md: 'min-w-[12rem]',
+  lg: 'min-w-[16rem]',
+  xl: 'min-w-[22rem]',
+  auto: 'min-w-max',
+};
+
+const contentSurfaceClasses: Record<MenubarContentSurface, string> = {
+  default: 'border border-border bg-popover text-popover-foreground shadow-mi-dropdown',
+  soft: 'border border-border/70 bg-muted text-foreground shadow-mi-card',
+  outline: 'border border-border bg-background text-foreground shadow-mi-card',
+  elevated: 'border border-border bg-popover text-popover-foreground shadow-mi-modal',
+  plain: 'border border-transparent bg-popover text-popover-foreground shadow-none',
+};
+
+const contentAnimationClasses: Record<MenubarAnimation, string> = {
+  scale:
+    'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+  slide:
+    'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[side=top]:slide-in-from-bottom-2 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2',
+  fade: 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0',
+  none: '',
+};
+
+const itemSizeClasses: Record<MenubarSize, string> = {
+  sm: 'min-h-7 px-2 py-1 text-body-xs',
+  md: 'min-h-8 px-2 py-1.5 text-body-sm',
+  lg: 'min-h-10 px-3 py-2 text-body-md',
+};
+
+const itemToneClasses: Record<MenubarItemTone, string> = {
+  default: 'focus:bg-accent focus:text-accent-foreground',
+  accent: 'focus:bg-accent focus:text-accent-foreground',
+  danger: 'text-danger focus:bg-danger/10 focus:text-danger',
+  success: 'text-success focus:bg-success/10 focus:text-success',
+  warning: 'text-warning focus:bg-warning/10 focus:text-warning',
+};
+
+const labelSizeClasses: Record<MenubarSize, string> = {
+  sm: 'px-2 py-1 text-[0.6875rem]',
+  md: 'px-2 py-1.5 text-xs',
+  lg: 'px-3 py-2 text-body-sm',
+};
+
+/* ── Root ────────────────────────────────────────────────────────── */
+
+export const Menubar = forwardRef<
+  ElementRef<typeof MenubarPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof MenubarPrimitive.Root> & {
+    size?: MenubarSize;
+    surface?: MenubarSurface;
+    justify?: MenubarJustify;
+    wrap?: boolean;
+    fullWidth?: boolean;
+  }
+>(function Menubar(
+  {
+    className,
+    size = 'md',
+    surface = 'default',
+    justify = 'start',
+    wrap = false,
+    fullWidth = false,
+    ...props
+  },
+  ref,
+) {
+  return (
+    <MenubarPrimitive.Root
+      ref={ref}
+      className={cn(
+        'flex items-center rounded-lg',
+        rootSizeClasses[size],
+        rootSurfaceClasses[surface],
+        rootJustifyClasses[justify],
+        wrap && 'flex-wrap',
+        fullWidth && 'w-full',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+/* ── Menu ────────────────────────────────────────────────────────── */
+
+export const MenubarMenu: typeof MenubarPrimitive.Menu = MenubarPrimitive.Menu;
+export const MenubarGroup: typeof MenubarPrimitive.Group = MenubarPrimitive.Group;
+export const MenubarSub: typeof MenubarPrimitive.Sub = MenubarPrimitive.Sub;
+export const MenubarRadioGroup: typeof MenubarPrimitive.RadioGroup = MenubarPrimitive.RadioGroup;
+export const MenubarPortal: typeof MenubarPrimitive.Portal = MenubarPrimitive.Portal;
+
+/* ── Trigger ─────────────────────────────────────────────────────── */
+
+export const MenubarTrigger = forwardRef<
+  ElementRef<typeof MenubarPrimitive.Trigger>,
+  ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger> & {
+    size?: MenubarSize;
+    surface?: MenubarSurface;
+    fullWidth?: boolean;
+  }
+>(function MenubarTrigger(
+  { className, size = 'md', surface = 'default', fullWidth = false, ...props },
+  ref,
+) {
+  return (
+    <MenubarPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'inline-flex cursor-pointer select-none items-center justify-center rounded-md font-medium outline-none transition-colors duration-200',
+        'disabled:pointer-events-none disabled:opacity-50 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        triggerSizeClasses[size],
+        triggerSurfaceClasses[surface],
+        fullWidth && 'w-full',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+/* ── Content ─────────────────────────────────────────────────────── */
+
+export const MenubarContent = forwardRef<
+  ElementRef<typeof MenubarPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof MenubarPrimitive.Content> & {
+    size?: MenubarContentSize;
+    surface?: MenubarContentSurface;
+    padding?: 'none' | 'sm' | 'md';
+    animation?: MenubarAnimation;
+    portal?: boolean;
+    maxHeight?: 'none' | 'sm' | 'md' | 'lg';
+  }
+>(function MenubarContent(
+  {
+    className,
+    align = 'start',
+    alignOffset = -4,
+    sideOffset = 8,
+    size = 'md',
+    surface = 'default',
+    padding = 'md',
+    animation = 'scale',
+    portal = true,
+    maxHeight = 'none',
+    ...props
+  },
+  ref,
+) {
+  const content = (
+    <MenubarPrimitive.Content
+      ref={ref}
+      align={align}
+      alignOffset={alignOffset}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 overflow-hidden rounded-lg',
+        contentSizeClasses[size],
+        contentSurfaceClasses[surface],
+        contentAnimationClasses[animation],
+        padding === 'sm' && 'p-0.5',
+        padding === 'md' && 'p-1',
+        maxHeight === 'sm' && 'max-h-56 overflow-y-auto',
+        maxHeight === 'md' && 'max-h-72 overflow-y-auto',
+        maxHeight === 'lg' && 'max-h-96 overflow-y-auto',
+        className,
+      )}
+      {...props}
+    />
+  );
+  return portal ? <MenubarPrimitive.Portal>{content}</MenubarPrimitive.Portal> : content;
+});
+
+/* ── Item ────────────────────────────────────────────────────────── */
+
+export const MenubarItem = forwardRef<
+  ElementRef<typeof MenubarPrimitive.Item>,
+  ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+    inset?: boolean;
+    size?: MenubarSize;
+    tone?: MenubarItemTone;
+  }
+>(function MenubarItem({ className, inset, size = 'md', tone = 'default', ...props }, ref) {
+  return (
+    <MenubarPrimitive.Item
+      ref={ref}
+      className={cn(
+        'relative flex cursor-pointer select-none items-center gap-2 rounded-md outline-none',
+        'transition-colors duration-200',
+        itemSizeClasses[size],
+        itemToneClasses[tone],
+        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        inset && 'pl-8',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+/* ── CheckboxItem ────────────────────────────────────────────────── */
+
+export const MenubarCheckboxItem = forwardRef<
+  ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+  ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem> & {
+    size?: MenubarSize;
+    tone?: MenubarItemTone;
+  }
+>(function MenubarCheckboxItem(
+  { className, children, checked = false, size = 'md', tone = 'default', ...props },
+  ref,
+) {
+  return (
+    <MenubarPrimitive.CheckboxItem
+      ref={ref}
+      className={cn(
+        'relative flex cursor-pointer select-none items-center gap-2 rounded-md pl-8 outline-none',
+        'transition-colors duration-200',
+        itemSizeClasses[size],
+        itemToneClasses[tone],
+        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <svg aria-hidden="true" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth={2.5} className="h-3.5 w-3.5">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M3.5 8.5L6.5 11.5L12.5 5.5" />
+          </svg>
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.CheckboxItem>
+  );
+});
+
+/* ── RadioItem ───────────────────────────────────────────────────── */
+
+export const MenubarRadioItem = forwardRef<
+  ElementRef<typeof MenubarPrimitive.RadioItem>,
+  ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem> & {
+    size?: MenubarSize;
+    tone?: MenubarItemTone;
+  }
+>(function MenubarRadioItem({ className, children, size = 'md', tone = 'default', ...props }, ref) {
+  return (
+    <MenubarPrimitive.RadioItem
+      ref={ref}
+      className={cn(
+        'relative flex cursor-pointer select-none items-center gap-2 rounded-md pl-8 outline-none',
+        'transition-colors duration-200',
+        itemSizeClasses[size],
+        itemToneClasses[tone],
+        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <span className="h-2 w-2 rounded-full bg-foreground" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.RadioItem>
+  );
+});
+
+/* ── Label ────────────────────────────────────────────────────────── */
+
+export const MenubarLabel = forwardRef<
+  ElementRef<typeof MenubarPrimitive.Label>,
+  ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+    inset?: boolean;
+    size?: MenubarSize;
+  }
+>(function MenubarLabel({ className, inset, size = 'md', ...props }, ref) {
+  return (
+    <MenubarPrimitive.Label
+      ref={ref}
+      className={cn(
+        'font-semibold uppercase tracking-widest text-muted-foreground',
+        labelSizeClasses[size],
+        inset && 'pl-8',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+/* ── Separator ───────────────────────────────────────────────────── */
+
+export const MenubarSeparator = forwardRef<
+  ElementRef<typeof MenubarPrimitive.Separator>,
+  ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+>(function MenubarSeparator({ className, ...props }, ref) {
+  return (
+    <MenubarPrimitive.Separator
+      ref={ref}
+      className={cn('-mx-1 my-1 h-px bg-border', className)}
+      {...props}
+    />
+  );
+});
+
+/* ── SubTrigger ──────────────────────────────────────────────────── */
+
+export const MenubarSubTrigger = forwardRef<
+  ElementRef<typeof MenubarPrimitive.SubTrigger>,
+  ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+    inset?: boolean;
+    size?: MenubarSize;
+    tone?: MenubarItemTone;
+  }
+>(function MenubarSubTrigger(
+  { className, inset, children, size = 'md', tone = 'default', ...props },
+  ref,
+) {
+  return (
+    <MenubarPrimitive.SubTrigger
+      ref={ref}
+      className={cn(
+        'flex cursor-pointer select-none items-center gap-2 rounded-md outline-none',
+        'transition-colors duration-200',
+        itemSizeClasses[size],
+        itemToneClasses[tone],
+        'data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        inset && 'pl-8',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <svg aria-hidden="true" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth={2} className="ml-auto h-4 w-4">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M6 4l4 4-4 4" />
+      </svg>
+    </MenubarPrimitive.SubTrigger>
+  );
+});
+
+/* ── SubContent ──────────────────────────────────────────────────── */
+
+export const MenubarSubContent = forwardRef<
+  ElementRef<typeof MenubarPrimitive.SubContent>,
+  ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent> & {
+    size?: MenubarContentSize;
+    surface?: MenubarContentSurface;
+    padding?: 'none' | 'sm' | 'md';
+    animation?: MenubarAnimation;
+    portal?: boolean;
+    maxHeight?: 'none' | 'sm' | 'md' | 'lg';
+  }
+>(function MenubarSubContent(
+  {
+    className,
+    size = 'sm',
+    surface = 'default',
+    padding = 'md',
+    animation = 'scale',
+    portal = true,
+    maxHeight = 'none',
+    ...props
+  },
+  ref,
+) {
+  const content = (
+    <MenubarPrimitive.SubContent
+      ref={ref}
+      className={cn(
+        'z-50 overflow-hidden rounded-lg',
+        contentSizeClasses[size],
+        contentSurfaceClasses[surface],
+        contentAnimationClasses[animation],
+        padding === 'sm' && 'p-0.5',
+        padding === 'md' && 'p-1',
+        maxHeight === 'sm' && 'max-h-56 overflow-y-auto',
+        maxHeight === 'md' && 'max-h-72 overflow-y-auto',
+        maxHeight === 'lg' && 'max-h-96 overflow-y-auto',
+        className,
+      )}
+      {...props}
+    />
+  );
+  return portal ? <MenubarPrimitive.Portal>{content}</MenubarPrimitive.Portal> : content;
+});
+
+/* ── Shortcut ────────────────────────────────────────────────────── */
+
+export function MenubarShortcut({
+  className,
+  size = 'md',
+  tone = 'muted',
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement> & {
+  size?: MenubarSize;
+  tone?: 'muted' | 'foreground' | 'primary';
+}) {
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        'ml-auto pl-4 font-mono tracking-widest',
+        size === 'sm' && 'text-[0.6875rem]',
+        size === 'md' && 'text-xs',
+        size === 'lg' && 'text-body-sm',
+        tone === 'muted' && 'text-muted-foreground',
+        tone === 'foreground' && 'text-foreground',
+        tone === 'primary' && 'text-primary',
+        className,
+      )}
+      {...props}
+    />
+  );
+}