@bug-on/md3-react 2.0.3 → 3.0.1

package/src/ui/menu/menu-item.tsx

@@ -0,0 +1,294 @@
+// ─── MD3 Expressive Menu — MenuItem ─────────────────────────────────────────
+// Shape morphing + Standard/Vibrant color variants + selection state
+// Animation: only selectable items animate the leading icon slot
+import * as ContextMenu from "@radix-ui/react-context-menu";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { Slot } from "@radix-ui/react-slot";
+import { AnimatePresence, m } from "motion/react";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { Icon } from "../icon";
+import { CHECK_ICON_VARIANTS, MENU_CHECK_ICON_SIZE } from "./menu-animations";
+import { useMenuContext } from "./menu-context";
+import {
+	BASELINE_COLORS,
+	BASELINE_ITEM_SHAPE,
+	ITEM_SHAPE_CLASSES,
+	MENU_BASELINE_ITEM_HORIZONTAL_PADDING,
+	STANDARD_COLORS,
+	VIBRANT_COLORS,
+} from "./menu-tokens";
+import type {
+	MenuItemPosition,
+	MenuItemProps,
+	MenuVariant,
+} from "./menu-types";
+
+// ─── Shape helper ─────────────────────────────────────────────────────────────
+
+function getItemShapeClass(
+	position: MenuItemPosition,
+	selected: boolean,
+	isStatic: boolean = false,
+	menuVariant: MenuVariant = "expressive",
+): string {
+	if (menuVariant === "baseline") return BASELINE_ITEM_SHAPE;
+	if (selected) return ITEM_SHAPE_CLASSES.selected;
+	// Vertical Menu standalone items have 12px border radius
+	if (isStatic && position === "standalone") return "rounded-[12px]";
+	return ITEM_SHAPE_CLASSES[position];
+}
+
+// ─── MenuItem ─────────────────────────────────────────────────────────────────
+
+/**
+ * An interactive item within a Menu or MenuGroup.
+ *
+ * ### Shape morphing
+ * `itemPosition` (auto-set by MenuGroup) controls border-radius. When `selected=true`,
+ * shape overrides to `CornerMedium (12px)` with a CSS transition.
+ *
+ * ### Leading icon animation
+ * - **Selectable items** (`selected` prop defined): `AnimatePresence` swaps between
+ *   a check icon and the user `leadingIcon` using FastSpatial expand + FastEffects fade.
+ * - **Static items** (`selected` prop undefined): `leadingIcon` renders at fixed width
+ *   with no enter/exit animation (matches Android's static rendering).
+ *
+ * ### Selected state
+ * Container color transitions with `transition-colors duration-150` (maps to
+ * Android's `animateColorAsState` with `FastEffects` spec).
+ */
+export const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(
+	(
+		{
+			children,
+			onClick,
+			leadingIcon,
+			trailingIcon,
+			supportingText,
+			trailingText,
+			selected,
+			disabled = false,
+			itemPosition = "standalone",
+			colorVariant: propColorVariant,
+			keepOpen = false,
+			className,
+			isSubTrigger,
+			value,
+			role,
+			...rest
+		},
+		ref,
+	) => {
+		const {
+			menuVariant,
+			colorVariant: contextColorVariant,
+			menuPrimitive,
+		} = useMenuContext();
+		const colorVariant = propColorVariant ?? contextColorVariant;
+		const colors =
+			menuVariant === "baseline"
+				? BASELINE_COLORS
+				: colorVariant === "vibrant"
+					? VIBRANT_COLORS
+					: STANDARD_COLORS;
+
+		const isStaticMenu = menuPrimitive === "static";
+		const shapeClass = getItemShapeClass(
+			itemPosition,
+			!!selected,
+			isStaticMenu,
+			menuVariant,
+		);
+
+		// A selectable item is one where `selected` prop is explicitly passed
+		// (even if false). Non-selectable items do not animate the leading slot.
+		const isSelectable = selected !== undefined && !isSubTrigger;
+
+		// Determine which Radix primitive to use based on selection state and role
+		const isCheckbox =
+			role === "menuitemcheckbox" ||
+			(selected !== undefined && !role && !isSubTrigger);
+		const isRadio = role === "menuitemradio";
+
+		// Select the correct Radix primitive based on which menu family is active.
+		// static  → Slot (plain HTML, manages own ARIA)
+		// context → @radix-ui/react-context-menu primitives
+		// dropdown (default) → @radix-ui/react-dropdown-menu primitives
+		const ItemPrimitive =
+			isStaticMenu || isSubTrigger
+				? Slot
+				: menuPrimitive === "context"
+					? ((isCheckbox
+							? ContextMenu.CheckboxItem
+							: isRadio
+								? ContextMenu.RadioItem
+								: ContextMenu.Item) as React.ElementType)
+					: ((isCheckbox
+							? DropdownMenu.CheckboxItem
+							: isRadio
+								? DropdownMenu.RadioItem
+								: DropdownMenu.Item) as React.ElementType);
+
+		return (
+			<ItemPrimitive
+				ref={ref}
+				{...(isStaticMenu || isSubTrigger
+					? {
+							role:
+								role ||
+								(isCheckbox
+									? "menuitemcheckbox"
+									: isRadio
+										? "menuitemradio"
+										: "menuitem"),
+							"aria-checked": isCheckbox || isRadio ? !!selected : undefined,
+							"aria-disabled": disabled ? true : undefined,
+							tabIndex: disabled ? -1 : 0,
+							onKeyDown: (e: React.KeyboardEvent) => {
+								if (e.key === "Enter" || e.key === " ") {
+									e.preventDefault();
+									onClick?.(e as unknown as React.MouseEvent<HTMLDivElement>);
+								}
+							},
+							onClick,
+						}
+					: {
+							disabled,
+							onSelect: keepOpen ? (e: Event) => e.preventDefault() : undefined,
+							onClick,
+							...(isCheckbox || isRadio ? { checked: !!selected } : {}),
+							...(isRadio ? { value: value ?? "" } : {}),
+							asChild: true,
+						})}
+			>
+				<div
+					// Role provided by Radix primitives via asChild, or manually set when static
+					className={cn(
+						// Layout
+						"relative flex w-full cursor-pointer select-none items-center outline-none",
+						// Sizing: min-h 48dp, min-w 112dp, max-w 280dp
+						"min-h-12 min-w-28 max-w-70",
+						// Horizontal padding
+						menuVariant === "baseline"
+							? MENU_BASELINE_ITEM_HORIZONTAL_PADDING
+							: "px-4",
+						// Spacing between items
+						isStaticMenu ? "my-0.5" : "",
+						// Shape morphing (position-based + selected override)
+						shapeClass,
+						// Animate border-radius AND background-color together (FastEffects: 150ms)
+						"transition-[border-radius,background-color] duration-150 ease-in",
+						// Colors based on variant + selection
+						selected
+							? cn(colors.selectedBg, colors.selectedText)
+							: cn(colors.labelText),
+						// State layers (only on unselected items)
+						!selected && colors.hoverLayer,
+						!selected && colors.focusLayer,
+						// Focus visible ring (WCAG 2.4.11 — visible focus indicator)
+						// Uses ring-inset so the ring doesn't overflow the item bounds.
+						"focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-m3-primary",
+						// Disabled
+						disabled && "pointer-events-none opacity-[0.38]",
+						className,
+					)}
+					{...rest}
+				>
+					{/* ── Leading slot ── */}
+					{(isSelectable || leadingIcon) && (
+						<div
+							className="flex h-5 w-5 shrink-0 items-center justify-center mr-3"
+							aria-hidden="true"
+						>
+							{isSelectable ? (
+								<AnimatePresence initial={false} mode="wait">
+									{selected ? (
+										<m.span
+											key="check"
+											className={cn(
+												"flex h-full w-full items-center justify-center overflow-hidden",
+												colors.selectedIcon,
+											)}
+											variants={CHECK_ICON_VARIANTS}
+											initial="hidden"
+											animate="visible"
+											exit="exit"
+										>
+											<Icon name="check" fill={1} size={MENU_CHECK_ICON_SIZE} />
+										</m.span>
+									) : leadingIcon ? (
+										<m.span
+											key="icon"
+											className={cn(
+												"flex h-full w-full items-center justify-center overflow-hidden",
+												colors.iconColor,
+											)}
+											variants={CHECK_ICON_VARIANTS}
+											initial="hidden"
+											animate="visible"
+											exit="exit"
+										>
+											{leadingIcon}
+										</m.span>
+									) : (
+										// Spacer for selectable items with no icon, to keep text aligned
+										<div className="w-5" />
+									)}
+								</AnimatePresence>
+							) : (
+								// Static icon for non-selectable items
+								<span
+									className={cn(
+										"flex h-full w-full items-center justify-center",
+										colors.iconColor,
+									)}
+								>
+									{leadingIcon}
+								</span>
+							)}
+						</div>
+					)}
+
+					{/* ── Label + Supporting Text ── */}
+					<span className="flex flex-1 flex-col">
+						<span className="text-body-large leading-snug">{children}</span>
+						{supportingText && (
+							<span
+								className={cn(
+									"text-body-medium leading-snug",
+									// Source: StandardMenuTokens.ItemSupportingTextColor / VibrantMenuTokens
+									selected ? colors.selectedText : colors.supportingTextColor,
+								)}
+							>
+								{supportingText}
+							</span>
+						)}
+					</span>
+
+					{/* ── Trailing: shortcut text OR trailing icon ── */}
+					{(trailingText || trailingIcon) && (
+						<span
+							className={cn(
+								// Minimum 12dp gap from label column (ListTokens)
+								"ml-3 flex shrink-0 items-center",
+								// Source: StandardMenuTokens.ItemTrailingIconColor / VibrantMenuTokens
+								selected ? colors.selectedText : colors.trailingIconColor,
+							)}
+							aria-hidden={trailingIcon ? "true" : undefined}
+						>
+							{trailingText ? (
+								<span className="text-label-small tracking-wider">
+									{trailingText}
+								</span>
+							) : (
+								trailingIcon
+							)}
+						</span>
+					)}
+				</div>
+			</ItemPrimitive>
+		);
+	},
+);
+MenuItem.displayName = "MenuItem";

package/src/ui/menu/menu-tokens.ts

@@ -0,0 +1,208 @@
+// ─── MD3 Expressive Menu — Design Token Constants ─────────────────────────────
+// Sourced from: SegmentedMenuTokens.kt, StandardMenuTokens.kt, VibrantMenuTokens.kt,
+//               MenuTokens.kt, MenuDefaults.kt, ListTokens.kt
+
+// ─── Spacing (px → dp) ────────────────────────────────────────────────────────
+
+/** Horizontal padding for menu items: 16dp (ItemLeadingSpace / ItemTrailingSpace) */
+export const MENU_ITEM_HORIZONTAL_PADDING = "px-4"; // 16dp
+
+/** Horizontal padding for baseline menu items: 12dp */
+export const MENU_BASELINE_ITEM_HORIZONTAL_PADDING = "px-3"; // 12dp
+
+/** Min height for selectable items: 44dp (SegmentedMenuTokens.Item) */
+export const MENU_ITEM_MIN_HEIGHT = "min-h-11"; // 44dp = 11 * 4px
+
+/** Min height for standard list items: 48dp (MenuListItemContainerHeight) */
+export const MENU_LIST_ITEM_MIN_HEIGHT = "min-h-12"; // 48dp
+
+/** Min width of menu container: 112dp (DropdownMenuItemDefaultMinWidth) */
+export const MENU_MIN_WIDTH = "min-w-28"; // 112dp
+
+/** Max width of menu container: 280dp (DropdownMenuItemDefaultMaxWidth) */
+export const MENU_MAX_WIDTH = "max-w-70"; // 280dp
+
+/** Gap between MenuGroup segments: 2dp (SegmentedMenuTokens.SegmentedGap) */
+export const MENU_GROUP_GAP = "gap-0.5"; // 2dp
+
+/** Internal group vertical padding: 4dp (DropdownMenuGroupVerticalPadding) */
+export const MENU_GROUP_PADDING_Y = "py-1"; // 4dp
+
+/** Popup container vertical padding: 8dp (DropdownMenuVerticalPadding) */
+export const MENU_POPUP_PADDING_Y = "py-2"; // 8dp
+
+/** Leading icon size: 20dp (SegmentedMenuTokens.ItemLeadingIconSize) */
+export const MENU_ICON_SIZE = 20;
+
+// ─── Container Shape ──────────────────────────────────────────────────────────
+
+/**
+ * Menu popup container shape: CornerExtraSmall = 4px.
+ * Source: MenuTokens.ContainerShape = ShapeKeyTokens.CornerExtraSmall
+ */
+export const MENU_CONTAINER_SHAPE = "rounded-[4px]"; // CornerExtraSmall
+
+/**
+ * Shape for Baseline menu item (no shape morphing, edge-to-edge state layer).
+ */
+export const BASELINE_ITEM_SHAPE = "rounded-none";
+
+// ─── Shape: CSS border-radius values (used with motion/react `animate`) ────────
+// These are used for animated shape morphing via Framer Motion's `borderRadius`
+// property — NOT as Tailwind classes (Tailwind cannot animate between values).
+
+/**
+ * Shape values for MenuGroup container (borderRadius CSS shorthand string).
+ * Format: "topLeft topRight bottomRight bottomLeft"
+ *
+ * Source: MenuDefaults.kt groupShape() + SegmentedMenuTokens/ShapeTokens
+ * - ContainerShape (standalone) = CornerLarge (16px) all corners
+ * - InactiveContainerShape = CornerSmall (8px) all corners
+ * - Leading group: topStart=CornerLarge, topEnd=CornerLarge, bottomStart=CornerSmall, bottomEnd=CornerSmall
+ * - Middle group: GroupShape = CornerSmall (8px)
+ * - Trailing group: topStart=CornerSmall, topEnd=CornerSmall, bottomStart=CornerLarge, bottomEnd=CornerLarge
+ */
+export const GROUP_SHAPES = {
+	/** Active standalone group shape: CornerLarge all corners (16px) */
+	standaloneActive: "16px",
+	/**
+	 * Active leading group shape: top=CornerLarge(16px), bottom=CornerSmall(8px)
+	 * Source: SegmentedMenuTokens — LeadingContainerShape:
+	 * topStart=CornerLarge, topEnd=CornerLarge, bottomStart=CornerSmall, bottomEnd=CornerSmall
+	 */
+	leadingActive: "16px 16px 8px 8px",
+	/** Active middle group shape: CornerExtraSmall all corners (4px) */
+	middleActive: "4px",
+	/**
+	 * Active trailing group shape: top=CornerSmall(8px), bottom=CornerLarge(16px)
+	 * Source: SegmentedMenuTokens — TrailingContainerShape:
+	 * topStart=CornerSmall, topEnd=CornerSmall, bottomStart=CornerLarge, bottomEnd=CornerLarge
+	 */
+	trailingActive: "8px 8px 16px 16px",
+	/** Inactive (default, pre-hover) shape for all groups: CornerExtraSmall (4px) */
+	inactive: "4px",
+} as const;
+
+/**
+ * Shape values for MenuItem (borderRadius CSS shorthand string).
+ * Used as Tailwind classes via arbitrary values for static rendering.
+ * Animated shape (selected ↔ unselected) is handled via `transition-[border-radius]`.
+ *
+ * Source: MenuDefaults.kt itemShape() + SegmentedMenuTokens/ShapeTokens
+ * - leading item: topStart/topEnd=CornerMedium(12px), bottomStart/bottomEnd=CornerExtraSmall(4px)
+ * - middle item: CornerExtraSmall all (ItemShape = 4px)
+ * - trailing item: topStart/topEnd=CornerExtraSmall(4px), bottomStart/bottomEnd=CornerMedium(12px)
+ * - standalone item: same as middle (ItemShape = 4px)
+ * - selected (all positions): CornerMedium all (ItemSelectedShape = 12px)
+ */
+export const ITEM_SHAPE_CLASSES = {
+	leading: "rounded-t-[12px] rounded-b-[4px]",
+	middle: "rounded-[4px]",
+	trailing: "rounded-t-[4px] rounded-b-[12px]",
+	standalone: "rounded-[4px]",
+	selected: "rounded-[12px]",
+} as const;
+
+// ─── Color token Tailwind classes ─────────────────────────────────────────────
+
+/**
+ * Standard color variant tokens (SurfaceContainerLow-based).
+ * Source: StandardMenuTokens.kt
+ *
+ * Container: SurfaceContainerLow
+ * Text: OnSurface
+ * Icons: OnSurfaceVariant
+ * Selected container: TertiaryContainer
+ * Selected text/icons: OnTertiaryContainer
+ */
+export const STANDARD_COLORS = {
+	/** Group/popup container background (StandardMenuTokens.ContainerColor) */
+	containerBg: "bg-m3-surface-container-low",
+	/** Label text color (StandardMenuTokens.ItemLabelTextColor) */
+	labelText: "text-m3-on-surface",
+	/** Leading/trailing icon color (StandardMenuTokens.ItemLeadingIconColor) */
+	iconColor: "text-m3-on-surface-variant",
+	/** Supporting text below label (StandardMenuTokens.ItemSupportingTextColor) */
+	supportingTextColor: "text-m3-on-surface-variant",
+	/** Trailing supporting text (StandardMenuTokens.ItemTrailingSupportingTextColor) */
+	trailingSupportingTextColor: "text-m3-on-surface-variant",
+	/** Trailing icon color (StandardMenuTokens.ItemTrailingIconColor) */
+	trailingIconColor: "text-m3-on-surface-variant",
+	/** Hover state layer (OnSurface @ 8% opacity) */
+	hoverLayer: "hover:bg-m3-on-surface/8",
+	/** Focus state layer (OnSurface @ 12% opacity) */
+	focusLayer: "focus:bg-m3-on-surface/12",
+	/** Selected item background (StandardMenuTokens.ItemSelectedContainerColor) */
+	selectedBg: "bg-m3-tertiary-container",
+	/** Selected item text (StandardMenuTokens.ItemSelectedLabelTextColor) */
+	selectedText: "text-m3-on-tertiary-container",
+	/** Selected item icon (StandardMenuTokens.ItemSelectedLeadingIconColor) */
+	selectedIcon: "text-m3-on-tertiary-container",
+	/** Disabled opacity: 38% (StandardMenuTokens.ItemDisabledLabelTextOpacity) */
+	disabledOpacity: "data-disabled:opacity-[0.38]",
+} as const;
+
+/**
+ * Baseline color variant tokens.
+ * Container uses SurfaceContainer, Selected uses SecondaryContainer.
+ */
+export const BASELINE_COLORS = {
+	containerBg: "bg-m3-surface-container",
+	labelText: "text-m3-on-surface",
+	iconColor: "text-m3-on-surface-variant",
+	supportingTextColor: "text-m3-on-surface-variant",
+	trailingSupportingTextColor: "text-m3-on-surface-variant",
+	trailingIconColor: "text-m3-on-surface-variant",
+	hoverLayer: "hover:bg-m3-on-surface/8",
+	focusLayer: "focus:bg-m3-on-surface/12",
+	selectedBg: "bg-m3-secondary-container",
+	selectedText: "text-m3-on-secondary-container",
+	selectedIcon: "text-m3-on-secondary-container",
+	disabledOpacity: "data-disabled:opacity-[0.38]",
+} as const;
+
+/**
+ * Vibrant color variant tokens (TertiaryContainer-based).
+ * Source: VibrantMenuTokens.kt
+ *
+ * Container: TertiaryContainer
+ * Text: OnTertiaryContainer
+ * Icons: OnTertiaryContainer
+ * Selected container: Tertiary
+ * Selected text/icons: OnTertiary
+ */
+export const VIBRANT_COLORS = {
+	/** Group/popup container background (VibrantMenuTokens.ContainerColor) */
+	containerBg: "bg-m3-tertiary-container",
+	/** Label text color (VibrantMenuTokens.ItemLabelTextColor) */
+	labelText: "text-m3-on-tertiary-container",
+	/** Leading/trailing icon color (VibrantMenuTokens.ItemLeadingIconColor) */
+	iconColor: "text-m3-on-tertiary-container",
+	/** Supporting text below label (VibrantMenuTokens.ItemSupportingTextColor) */
+	supportingTextColor: "text-m3-on-tertiary-container",
+	/** Trailing supporting text (VibrantMenuTokens.ItemTrailingSupportingTextColor) */
+	trailingSupportingTextColor: "text-m3-on-tertiary-container",
+	/** Trailing icon color (VibrantMenuTokens.ItemTrailingIconColor) */
+	trailingIconColor: "text-m3-on-tertiary-container",
+	/** Hover state layer (OnTertiaryContainer @ 8% opacity) */
+	hoverLayer: "hover:bg-m3-on-tertiary-container/8",
+	/** Focus state layer (OnTertiaryContainer @ 12% opacity) */
+	focusLayer: "focus:bg-m3-on-tertiary-container/12",
+	/** Selected item background (VibrantMenuTokens.ItemSelectedContainerColor = Tertiary) */
+	selectedBg: "bg-m3-tertiary",
+	/** Selected item text (VibrantMenuTokens.ItemSelectedLabelTextColor = OnTertiary) */
+	selectedText: "text-m3-on-tertiary",
+	/** Selected item icon (VibrantMenuTokens.ItemSelectedLeadingIconColor = OnTertiary) */
+	selectedIcon: "text-m3-on-tertiary",
+	/** Disabled opacity: 38% (VibrantMenuTokens.ItemDisabledLabelTextOpacity) */
+	disabledOpacity: "data-disabled:opacity-[0.38]",
+} as const;
+
+// ─── Divider ──────────────────────────────────────────────────────────────────
+
+/**
+ * HorizontalDivider padding: horizontal=12dp, vertical=2dp.
+ * Source: MenuDefaults.HorizontalDividerPadding
+ */
+export const DIVIDER_PADDING = "mx-3 my-0.5"; // 12dp horizontal, 2dp vertical
+export const DIVIDER_COLOR = "bg-m3-outline-variant";