sdaia-ui 1.0.1

package/src/components/MediaViewer/MediaViewer.types.ts

@@ -0,0 +1,59 @@
+import type { HTMLAttributes } from 'react';
+
+/** A single image item inside the viewer. */
+export interface MediaViewerImage {
+  /** Unique key. */
+  id: string | number;
+  /** Image source URL. When omitted shows a placeholder. */
+  src?: string;
+  /** Accessible alt text. */
+  alt?: string;
+  /** Filename shown in the header. */
+  filename?: string;
+  /** Optional date string shown below the filename (e.g. "25.03.2026"). */
+  date?: string;
+}
+
+export interface MediaViewerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  /** Whether the viewer is open. */
+  open: boolean;
+  /** Called when the viewer should close (close button, backdrop click, Escape key). */
+  onClose: () => void;
+
+  /** List of images to view. */
+  images?: MediaViewerImage[];
+  /** 0-based index of the currently visible image (controlled). */
+  currentIndex?: number;
+  /** Called when the user navigates to a different image. */
+  onIndexChange?: (index: number) => void;
+
+  /**
+   * Zoom level (1 = 100 %, 2 = 200 %, etc.).
+   * When provided the component is fully controlled for zoom.
+   * When omitted the component manages zoom internally.
+   */
+  zoom?: number;
+  /** Called when zoom changes. */
+  onZoomChange?: (zoom: number) => void;
+  /** Minimum zoom. Default 0.5 */
+  minZoom?: number;
+  /** Maximum zoom. Default 3 */
+  maxZoom?: number;
+  /** Zoom step per click. Default 0.25 */
+  zoomStep?: number;
+
+  /** Called when the Share button is clicked. */
+  onShare?: () => void;
+  /** Called when the Print button is clicked. */
+  onPrint?: () => void;
+
+  /**
+   * Overlay mode — image fills the full area and all controls
+   * (header, arrows, zoom) are absolutely positioned on top of it.
+   * Default: false (Standard mode — header above, image, zoom below).
+   */
+  overlay?: boolean;
+
+  /** Enable right-to-left layout. */
+  rtl?: boolean;
+}

package/src/components/MediaViewer/MediaViewer.variants.ts

@@ -0,0 +1,168 @@
+/* ─────────────────────────────────────────────────────────────────
+   MediaViewer.variants.ts
+   Pixel-perfect to Figma node 6606:94834
+──────────────────────────────────────────────────────────────────── */
+
+/**
+ * Full-viewport backdrop — also the root flex layout.
+ * Figma: w-[1280px] h-[832px], bg rgba(22,22,22,0.8),
+ *        flex row, items-center, justify-center,
+ *        px-20px (spacing-xl), py-64px, gap-16px (spacing-xl)
+ */
+export const BACKDROP =
+  'fixed inset-0 z-[9999] flex items-center justify-center gap-spacing-xl px-spacing-xl py-spacing-7xl bg-[rgba(22,22,22,0.80)]';
+
+/**
+ * Centre content column — grows between the two nav arrows.
+ * Figma: flex-1, flex-col, gap-8px (spacing-md), h-full, items-center
+ */
+export const CONTENT =
+  'flex flex-col flex-1 gap-spacing-md h-full min-h-0 items-center min-w-0';
+
+/* ── Header ──────────────────────────────────────────────────────── */
+
+/**
+ * Header row: Title (flex-1) + Actions (shrink-0).
+ * Figma: flex row, gap-12px (spacing-lg), items-center, w-full, shrink-0
+ */
+export const HEADER =
+  'flex items-center gap-spacing-lg w-full shrink-0';
+
+/**
+ * Left meta block: filename stacked above date.
+ * Figma: flex-col, gap-0, flex-1
+ */
+export const HEADER_META = 'flex flex-col flex-1 min-w-0 gap-0';
+
+/**
+ * Filename text.
+ * Figma: 18px, semibold (600), line-height 28px, text-oncolor-primary (white)
+ */
+export const HEADER_FILENAME =
+  'truncate font-semibold text-text-lg text-white w-full';
+
+/**
+ * Date sub-line.
+ * Figma: 12px, regular (400), line-height 18px, text-oncolor-tertiary rgba(255,255,255,0.7)
+ */
+export const HEADER_DATE =
+  'text-text-xs font-normal text-[rgba(255,255,255,0.7)]';
+
+/**
+ * Right actions group.
+ * Figma: flex row, gap-16px (spacing-xl), shrink-0
+ */
+export const HEADER_ACTIONS = 'flex items-center gap-spacing-xl shrink-0';
+
+/**
+ * Individual header action button — className override for Button iconOnly.
+ * Figma: border border-neutral-primary (#6c737f), p-6px, rounded-8px, white text on dark bg.
+ */
+export const HEADER_BTN =
+  'p-spacing-sm rounded-[8px] border-[rgba(108,115,127,1)] text-white bg-transparent ' +
+  'hover:bg-[rgba(255,255,255,0.1)] active:bg-[rgba(255,255,255,0.15)] ' +
+  'dark:border-[rgba(108,115,127,1)] dark:text-white dark:bg-transparent ' +
+  'dark:hover:bg-[rgba(255,255,255,0.1)] dark:active:bg-[rgba(255,255,255,0.15)]';
+
+/* ── Image ───────────────────────────────────────────────────────── */
+
+/**
+ * Image wrapper — grows between header and zoom bar.
+ * Figma: flex-1, w-full, rounded-4, overflow-hidden
+ */
+export const IMAGE_AREA =
+  'flex-1 min-h-0 w-full relative rounded-[4px] overflow-hidden';
+
+/**
+ * The <img> element.
+ * Figma: object-cover, size-full, pointer-events-none
+ * Using object-contain so the full image is always visible.
+ */
+export const IMAGE =
+  'w-full h-full object-contain select-none transition-transform duration-200 ease-out';
+
+/* ── Nav arrows ──────────────────────────────────────────────────── */
+
+/**
+ * Left/right navigation arrows — className override for Button iconOnly.
+ * Figma: size-48px, p-8px (spacing-md), rounded-full, bg-rgba(22,22,22,0.5)
+ */
+export const NAV_ARROW =
+  'size-[48px] flex-none rounded-full p-spacing-md text-white ' +
+  'bg-[rgba(22,22,22,0.50)] hover:bg-[rgba(22,22,22,0.70)] active:bg-[rgba(22,22,22,0.80)] ' +
+  'dark:text-white dark:bg-[rgba(22,22,22,0.50)] dark:hover:bg-[rgba(22,22,22,0.70)] dark:active:bg-[rgba(22,22,22,0.80)] ' +
+  'disabled:opacity-30';
+
+/* ── Zoom bar ────────────────────────────────────────────────────── */
+
+/**
+ * Zoom controls row — 3 icons: minus, zoom, plus.
+ * Figma: flex row, gap-12px (spacing-lg), px-12px (spacing-lg), py-8px (spacing-md),
+ *        rounded-full, bg-transparent, shrink-0
+ */
+export const ZOOM_CONTROLS =
+  'flex items-center gap-spacing-lg px-spacing-lg py-spacing-md rounded-full shrink-0';
+
+/** Individual zoom icon button — className override for Button iconOnly. 24×24, no border. */
+export const ZOOM_BTN =
+  'size-[24px] p-0 text-white bg-transparent opacity-70 ' +
+  'hover:opacity-100 hover:bg-transparent active:bg-transparent transition-opacity ' +
+  'dark:text-white dark:bg-transparent dark:hover:bg-transparent dark:active:bg-transparent ' +
+  'disabled:opacity-25';
+
+/* ── Overlay variant ─────────────────────────────────────────────── */
+
+/**
+ * Overlay backdrop — same dark bg + flex centering, with
+ * px-[64px] py-[80px] padding so the dark frame is visible around the image.
+ * Figma node 6606:94833.
+ */
+export const OVERLAY_BACKDROP =
+  'fixed inset-0 z-[9999] flex items-center justify-center px-spacing-7xl py-spacing-8xl bg-[rgba(22,22,22,0.80)]';
+
+/**
+ * Overlay image wrapper — flex column, justify-between.
+ * The actual <img> is absolute-positioned behind; header / arrow-row / zoom
+ * are normal flex children stacked top → center → bottom.
+ * Figma: flex-1, h-full, overflow-clip, rounded-4.
+ */
+export const OVERLAY_IMAGE_WRAP =
+  'flex flex-col flex-1 h-full min-w-0 justify-between relative overflow-hidden rounded-[4px]';
+
+/**
+ * The overlay image itself — fills the wrapper as a background layer.
+ * Figma: absolute inset-0, object-cover, size-full, pointer-events-none.
+ */
+export const OVERLAY_IMAGE =
+  'absolute inset-0 w-full h-full object-cover select-none transition-transform duration-200 ease-out pointer-events-none';
+
+/**
+ * Header section — top of the image with a bottom-fading gradient.
+ * Figma: pt-12px, pb-64px (gradient height), px-16px, gap-12px, flex row, items-center.
+ */
+export const OVERLAY_HEADER_GRADIENT =
+  'relative z-10 flex items-center gap-spacing-lg pt-spacing-lg pb-spacing-7xl px-spacing-xl w-full shrink-0 ' +
+  'bg-gradient-to-b from-[rgba(22,22,22,0.75)] to-transparent';
+
+/**
+ * Arrow row — placed in the middle of the image by justify-between.
+ * Figma: flex row, items-center, justify-between, px-16px, w-full, shrink-0.
+ */
+export const OVERLAY_ARROW_ROW =
+  'relative z-10 flex items-center justify-between px-spacing-xl w-full shrink-0';
+
+/**
+ * Footer zoom section — bottom of the image with a top-fading gradient.
+ * Figma: h-122px, pt-64px (gradient height), pb-8px, items-end, justify-center.
+ */
+export const OVERLAY_FOOTER_GRADIENT =
+  'relative z-10 flex items-end justify-center h-[122px] pt-spacing-7xl pb-spacing-md w-full shrink-0 ' +
+  'bg-gradient-to-t from-[rgba(22,22,22,0.75)] to-transparent';
+
+/**
+ * Overlay zoom bar — same as ZOOM_CONTROLS but with a semi-dark pill background
+ * so controls are legible over bright image areas.
+ * Figma: bg-rgba(22,22,22,0.5), rounded-full, gap-12px, px-12px, py-8px.
+ */
+export const OVERLAY_ZOOM_CONTROLS =
+  'flex items-center gap-spacing-lg px-spacing-lg py-spacing-md rounded-full shrink-0 bg-[rgba(22,22,22,0.50)]';

package/src/components/MediaViewer/index.ts

@@ -0,0 +1,2 @@
+export { MediaViewer } from './MediaViewer';
+export type { MediaViewerProps, MediaViewerImage } from './MediaViewer.types';

package/src/components/Menu/Menu.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import { forwardRef, Fragment, useState, useCallback } from 'react';
+import { cn } from '../../lib/cn';
+import { MenuItem } from '../MenuItem/MenuItem';
+import type { MenuProps } from './Menu.types';
+import {
+  ROOT,
+  ROOT_BACKGROUND,
+  ROOT_BORDER,
+  SECTION,
+  GROUP_LABEL_WRAP,
+  GROUP_LABEL,
+  LIST,
+  DIVIDER_WRAP,
+  DIVIDER,
+} from './Menu.variants';
+
+/**
+ * Menu — a grouped list of actions composed from the shared `MenuItem` component.
+ * Supports multiple sections with optional group labels, dividers between sections,
+ * and optional background + border styling. Selection is controlled via `value`
+ * (or uncontrolled via `defaultValue`), and each item may carry a stable `value`
+ * identifier — falling back to `${sectionIndex}:${itemIndex}` if omitted.
+ * RTL-aware via ambient `dir`.
+ */
+export const Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu(
+  {
+    sections,
+    background = false,
+    border = false,
+    divider = true,
+    value,
+    defaultValue = null,
+    onValueChange,
+    dir,
+    children,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  const isControlled = value !== undefined;
+  const [internalValue, setInternalValue] = useState<string | null>(defaultValue);
+  const selectedValue = isControlled ? value : internalValue;
+
+  const handleSelect = useCallback(
+    (key: string) => {
+      if (!isControlled) setInternalValue(key);
+      onValueChange?.(key);
+    },
+    [isControlled, onValueChange],
+  );
+
+  return (
+    <div
+      ref={ref}
+      data-slot="menu"
+      role="menu"
+      dir={dir}
+      className={cn(
+        ROOT,
+        background && ROOT_BACKGROUND,
+        border && ROOT_BORDER,
+        className,
+      )}
+      {...rest}
+    >
+      {children ??
+        sections?.map((section, sectionIndex) => (
+          <Fragment key={sectionIndex}>
+            {sectionIndex > 0 && divider && (
+              <div className={DIVIDER_WRAP} data-slot="menu-divider">
+                <div className={DIVIDER} />
+              </div>
+            )}
+            <div className={SECTION} data-slot="menu-section">
+              {section.label != null && (
+                <div className={GROUP_LABEL_WRAP} data-slot="menu-group-label">
+                  <p className={GROUP_LABEL}>{section.label}</p>
+                </div>
+              )}
+              <div className={LIST} data-slot="menu-list">
+                {section.items.map((item, itemIndex) => {
+                  const key = item.value ?? `${sectionIndex}:${itemIndex}`;
+                  const { value: _v, onClick, selected, disabled, ...itemRest } = item;
+                  const isSelected = selected ?? selectedValue === key;
+                  return (
+                    <MenuItem
+                      key={key}
+                      {...itemRest}
+                      selected={isSelected}
+                      disabled={disabled}
+                      className={cn('w-full rounded-none', itemRest.className)}
+                      onClick={() => {
+                        if (disabled) return;
+                        handleSelect(key);
+                        onClick?.();
+                      }}
+                    />
+                  );
+                })}
+              </div>
+            </div>
+          </Fragment>
+        ))}
+    </div>
+  );
+});

package/src/components/Menu/Menu.types.ts

@@ -0,0 +1,37 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { MenuItemProps } from '../MenuItem/MenuItem.types';
+
+/** Menu item with an optional stable identifier used for selection tracking. */
+export interface MenuItemData extends MenuItemProps {
+  /** Stable identifier for controlled/uncontrolled selection. Falls back to `${sectionIndex}:${itemIndex}` if omitted. */
+  value?: string;
+}
+
+/** A single section within the Menu — an optional group label followed by items. */
+export interface MenuSectionData {
+  /** Uppercase group label rendered above the section items. */
+  label?: ReactNode;
+  /** Menu items to render in this section. Uses the shared `MenuItem` component. */
+  items: MenuItemData[];
+}
+
+export interface MenuProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+  /** Layout direction — applied to the root element. */
+  dir?: 'ltr' | 'rtl';
+  /** Sections to render. Each section is a group label + list of items, separated by a divider. */
+  sections?: MenuSectionData[];
+  /** Controlled selected value. */
+  value?: string | null;
+  /** Uncontrolled initial selected value. */
+  defaultValue?: string | null;
+  /** Fires when the user selects an item. Receives the item's `value` (or its fallback key). */
+  onValueChange?: (value: string) => void;
+  /** Show the menu background (white / dark surface). Defaults to `false` (transparent). */
+  background?: boolean;
+  /** Show the outer border. Defaults to `false`. */
+  border?: boolean;
+  /** Render dividers between sections. Defaults to `true`. */
+  divider?: boolean;
+  /** Custom content — if provided, overrides `sections` so consumers can compose freely. */
+  children?: ReactNode;
+}

package/src/components/Menu/Menu.variants.ts

@@ -0,0 +1,29 @@
+/* Outer container — 225px width, 8px radius, column layout, optional bg/border */
+export const ROOT =
+  'flex flex-col items-start w-[225px] rounded-[8px]';
+
+export const ROOT_BACKGROUND =
+  'bg-white dark:bg-[rgba(22,22,22,1)]';
+
+export const ROOT_BORDER =
+  'border border-solid border-[rgba(210,214,219,1)] dark:border-[rgba(55,65,81,1)]';
+
+/* Section wrapper — full-width (items extend edge-to-edge like the divider),
+   vertical padding only, gap-spacing-md between label and list */
+export const SECTION =
+  'flex flex-col items-start w-full px-spacing-md py-spacing-xl gap-spacing-md';
+
+/* Group label — px-spacing-lg (stacks on section's px-spacing-md), text-xs bold, uppercase display color */
+export const GROUP_LABEL_WRAP =
+  'flex items-center w-full px-spacing-lg text-start';
+
+export const GROUP_LABEL =
+  'flex-1 text-text-xs leading-[18px] font-bold text-[rgba(31,42,55,1)] dark:text-[rgba(229,231,235,1)]';
+
+/* Items list wrapper */
+export const LIST = 'flex flex-col items-start w-full';
+
+/* Divider row */
+export const DIVIDER_WRAP = 'flex flex-col items-start w-full';
+export const DIVIDER =
+  'h-px w-full bg-[rgba(210,214,219,1)] dark:bg-[rgba(55,65,81,1)]';

package/src/components/Menu/index.ts

@@ -0,0 +1,2 @@
+export { Menu } from './Menu';
+export type { MenuProps, MenuSectionData, MenuItemData } from './Menu.types';

package/src/components/MenuButtonItem/MenuButtonItem.tsx

@@ -0,0 +1,280 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import type { MenuButtonItemProps } from './MenuButtonItem.types';
+import {
+  ROOT_BASE,
+  ROOT_MENU_LG,
+  ROOT_MENU_SM,
+  ROOT_SUBMENU_LG,
+  ROOT_SUBMENU_SM,
+  INNER_CONTAINER_BASE,
+  INNER_BG_DEFAULT,
+  INNER_BG_SELECTED,
+  ICON_CONTAINER_BASE,
+  ICON_CONTAINER_BG_DEFAULT,
+  ICON_CONTAINER_BG_SELECTED,
+  MENU_TEXT_DEFAULT,
+  MENU_TEXT_ACTIVE,
+  SUBMENU_TEXT_DEFAULT,
+  SUBMENU_TEXT_ACTIVE,
+  ICON_COLOR_DEFAULT,
+  ICON_COLOR_ACTIVE,
+  SELECTOR_WRAP_LG,
+  SELECTOR_WRAP_SM,
+  SELECTOR_BAR_LG,
+  SELECTOR_BAR_SM,
+  SELECTOR_COLOR,
+  ICON_SLOT,
+} from './MenuButtonItem.variants';
+import { PlayIconTwotone, PlayIconSolid, ArrowRight01Icon } from '../../icons/IconFactory';
+import { Tag } from '../Tag';
+import { Divider } from '../Divider';
+
+export const MenuButtonItem = forwardRef<HTMLDivElement, MenuButtonItemProps>(
+  function MenuButtonItem(
+    {
+      type = 'menu',
+      variant = 'transparent',
+      selected = false,
+      size = 'lg',
+      label = 'Menu Item',
+      subLabel = 'Sub menu',
+      showLeadingIcon = true,
+      showTrailingIcon = true,
+      leadingIconNode,
+      trailingIconNode,
+      showTag = false,
+      tagLabel = 'Label',
+      showText = true,
+      dir,
+      className,
+      onClick,
+      ...rest
+    },
+    ref,
+  ) {
+    /* ── Derived booleans ─────────────────────────────────────── */
+    const isMenu = type === 'menu';
+    const isSubMenu = type === 'sub-menu';
+    const isLarge = size === 'lg';
+    const isSmall = size === 'sm';
+
+    /* ── Icon colors ──────────────────────────────────────────── */
+    // Leading: turns green (active color) when selected.
+    // Trailing: always neutral — only the leading icon signals selection.
+    const leadingColorClass = selected ? ICON_COLOR_ACTIVE[variant] : ICON_COLOR_DEFAULT[variant];
+    const trailingColorClass = ICON_COLOR_DEFAULT[variant];
+
+    /* ── Leading icon element ─────────────────────────────────── */
+    const leadingIcon = showLeadingIcon ? (
+      <span data-slot="leading-icon" className={cn(ICON_SLOT, leadingColorClass)}>
+        {leadingIconNode ?? (selected ? <PlayIconSolid /> : <PlayIconTwotone />)}
+      </span>
+    ) : null;
+
+    /* ── Trailing icon element (large Menu only) ──────────────── */
+    const trailingIcon =
+      isLarge && isMenu && showTrailingIcon ? (
+        <span data-slot="trailing-icon" className={cn(ICON_SLOT, trailingColorClass)}>
+          {trailingIconNode ?? <ArrowRight01Icon />}
+        </span>
+      ) : null;
+
+    /* ── Tag badge ────────────────────────────────────────────── */
+    const tagBadge =
+      isLarge && isMenu && showTag ? (
+        <Tag size="sm" label={tagLabel} leading="default" action="text-only" />
+      ) : null;
+
+    /* ── Selector indicator bar (3 px start-side bar) ─────────── */
+    const selectorColor = selected
+      ? SELECTOR_COLOR[variant].active
+      : SELECTOR_COLOR[variant].hover;
+
+    const showSelector = variant !== 'transparent' || selected;
+    const selectorWrap = isSmall ? SELECTOR_WRAP_SM : SELECTOR_WRAP_LG;
+    const selectorBar = isSmall ? SELECTOR_BAR_SM : SELECTOR_BAR_LG;
+
+    const selector =
+      showSelector && selectorColor ? (
+        <div className={selectorWrap}>
+          <div
+            className={cn(
+              selectorBar,
+              selectorColor,
+              /* Hover: hidden by default, visible on group-hover when not selected */
+              !selected && 'opacity-0 group-hover:opacity-100',
+              /* Selected: always visible */
+              selected && 'opacity-100',
+            )}
+          />
+        </div>
+      ) : null;
+
+    /* ── Menu Large ────────────────────────────────────────────── */
+    if (isMenu && isLarge) {
+      return (
+        <div
+          ref={ref}
+          data-slot="menu-button-item"
+          data-type="menu"
+          data-size="lg"
+          data-variant={variant}
+          data-selected={selected || undefined}
+          dir={dir}
+          role="menuitem"
+          tabIndex={0}
+          onClick={onClick}
+          className={cn(ROOT_BASE, ROOT_MENU_LG, className)}
+          {...rest}
+        >
+          {/* State priority: selected overrides default+hover */}
+          <div
+            data-slot="menu-button-item-inner"
+            className={cn(
+              INNER_CONTAINER_BASE,
+              selected ? INNER_BG_SELECTED[variant] : INNER_BG_DEFAULT[variant],
+            )}
+          >
+            {/* Active selector bar — positioned absolute inside inner container */}
+            {selector}
+
+            {/* Leading icon */}
+            {leadingIcon}
+
+            {/* Label */}
+            {showText && (
+              <p
+                data-slot="label"
+                className={cn(
+                  'flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap',
+                  'text-text-sm leading-[20px]',
+                  selected ? 'font-[600]' : 'font-[400]',
+                  selected ? MENU_TEXT_ACTIVE[variant] : MENU_TEXT_DEFAULT[variant],
+                )}
+              >
+                {label}
+              </p>
+            )}
+
+            {/* Tag badge */}
+            {tagBadge}
+
+            {/* Trailing icon */}
+            {trailingIcon}
+          </div>
+        </div>
+      );
+    }
+
+    /* ── Menu Small (icon-only) ────────────────────────────────── */
+    if (isMenu && isSmall) {
+      return (
+        <div
+          ref={ref}
+          data-slot="menu-button-item"
+          data-type="menu"
+          data-size="sm"
+          data-variant={variant}
+          data-selected={selected || undefined}
+          dir={dir}
+          role="menuitem"
+          tabIndex={0}
+          onClick={onClick}
+          className={cn(ROOT_BASE, ROOT_MENU_SM, className)}
+          {...rest}
+        >
+          <div
+            data-slot="menu-button-item-inner"
+            className={cn(
+              ICON_CONTAINER_BASE,
+              selected ? ICON_CONTAINER_BG_SELECTED[variant] : ICON_CONTAINER_BG_DEFAULT[variant],
+            )}
+          >
+            {/* Selector bar for small */}
+            {selector}
+
+            {/* Icon */}
+            {leadingIcon}
+          </div>
+        </div>
+      );
+    }
+
+    /* ── Sub Menu Large ────────────────────────────────────────── */
+    if (isSubMenu && isLarge) {
+      return (
+        <div
+          ref={ref}
+          data-slot="menu-button-item"
+          data-type="sub-menu"
+          data-size="lg"
+          data-variant={variant}
+          data-selected={selected || undefined}
+          dir={dir}
+          role="menuitem"
+          tabIndex={0}
+          onClick={onClick}
+          className={cn(ROOT_BASE, ROOT_SUBMENU_LG, className)}
+          {...rest}
+        >
+          {/* Vertical divider at start edge — uses Divider component (neutral, hairline) */}
+          <Divider lineType="vertical" color="neutral" thickness="hairline" />
+
+          {/* Content area */}
+          <div
+            data-slot="menu-button-item-inner"
+            className={cn(
+              INNER_CONTAINER_BASE,
+              selected ? INNER_BG_SELECTED[variant] : INNER_BG_DEFAULT[variant],
+            )}
+          >
+            {/* Leading icon */}
+            {leadingIcon}
+
+            {/* Sub-menu label */}
+            {showText && (
+              <p
+                data-slot="label"
+                className={cn(
+                  'flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap',
+                  'text-text-sm leading-[20px]',
+                  selected ? 'font-[600]' : 'font-[400]',
+                  selected ? SUBMENU_TEXT_ACTIVE[variant] : SUBMENU_TEXT_DEFAULT[variant],
+                )}
+              >
+                {subLabel}
+              </p>
+            )}
+          </div>
+        </div>
+      );
+    }
+
+    /* ── Sub Menu Small (icon-only) ────────────────────────────── */
+    return (
+      <div
+        ref={ref}
+        data-slot="menu-button-item"
+        data-type="sub-menu"
+        data-size="sm"
+        data-variant={variant}
+        data-selected={selected || undefined}
+        dir={dir}
+        role="menuitem"
+        tabIndex={0}
+        onClick={onClick}
+        className={cn(ROOT_BASE, ROOT_SUBMENU_SM, className)}
+        {...rest}
+      >
+        {/* Vertical divider at start edge — uses Divider component (neutral, hairline) */}
+        <Divider lineType="vertical" color="neutral" thickness="hairline" />
+
+        {/* Icon */}
+        {leadingIcon}
+      </div>
+    );
+  },
+);