sdaia-ui 1.0.1 → 1.0.2

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

@@ -1,59 +0,0 @@
-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

@@ -1,168 +0,0 @@
-/* ─────────────────────────────────────────────────────────────────
-   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

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

package/src/components/Menu/Menu.tsx

@@ -1,109 +0,0 @@
-'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

@@ -1,37 +0,0 @@
-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

@@ -1,29 +0,0 @@
-/* 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

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

package/src/components/MenuButtonItem/MenuButtonItem.tsx

@@ -1,280 +0,0 @@
-'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>
-    );
-  },
-);