@oxy.so/bloom 3.6.0 → 4.1.0

package/src/media-header/MediaActionBar.tsx

@@ -1,5 +1,6 @@
-import React, { memo } from 'react';
+import React, { memo, useEffect } from 'react';
 import { Pressable, View, type GestureResponderEvent } from 'react-native';
+import Animated, { useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from 'react-native-reanimated';
 import Svg, { Circle } from 'react-native-svg';
 
 import { useInteractionState } from '../hooks/use-interaction-state';
@@ -8,9 +9,13 @@ import { RiDownload2Line } from '../icons/remix/RiDownload2Line';
 import { RiListUnordered } from '../icons/remix/RiListUnordered';
 import { RiListView } from '../icons/remix/RiListView';
 import { RiMoreFill } from '../icons/remix/RiMoreFill';
+import { RiUserAddLine } from '../icons/remix/RiUserAddLine';
+import { RiUserFollowLine } from '../icons/remix/RiUserFollowLine';
+import { resolveButtonPalette } from '../button/shared';
+import { useTheme } from '../theme/use-theme';
 import { RiSearchLine } from '../icons/remix/RiSearchLine';
 import { RiShuffleLine } from '../icons/remix/RiShuffleLine';
-import { GlyphButton } from '../button';
+import { Button, GlyphButton } from '../button';
 import { LikeButton } from '../media-controls/LikeButton';
 import { PlayButton } from '../media-controls/PlayButton';
 import { borderRadius, DISABLED_OPACITY } from '../styles/tokens';
@@ -266,7 +271,7 @@ export const DownloadButton = memo(DownloadButtonComponent);
 DownloadButton.displayName = 'DownloadButton';
 
 /**
- * The outline pill: "Follow" → "Following", "Save" → "Saved". A toggle with
+ * The shared Button surface: "Follow" → "Following", "Save" → "Saved". A toggle with
  * one name (`label`) and `aria-pressed`.
  */
 function FollowButtonComponent({
@@ -275,50 +280,48 @@ function FollowButtonComponent({
   label = 'Follow',
   followingLabel = 'Following',
   color,
+  tone = 'support',
+  iconOnly = false,
   size = 'small',
   disabled = false,
+  loading = false,
+  textStyle,
   style,
   testID,
 }: FollowButtonProps) {
-  const paint = useMediaHeaderPaint();
-  const { state: hovered, onIn, onOut } = useInteractionState();
-  const fg = color ?? paint.text;
-  const active = hovered && !disabled;
-  const root: WebCssStyle = {
-    height: size === 'medium' ? 36 : 32,
-    paddingLeft: 16,
-    paddingRight: 16,
-    borderRadius: borderRadius.full,
-    borderWidth: 1,
-    borderColor: active ? fg : color ? fg : paint.border,
-    alignItems: 'center',
-    justifyContent: 'center',
-    opacity: disabled ? DISABLED_OPACITY : 1,
-    '--bloom-media-header-ring': paint.ring,
-    ...(IS_WEB ? { transitionProperty: 'border-color', transitionDuration: '150ms' } : null),
-  };
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  const progress = useSharedValue(Number(following));
+  useEffect(() => {
+    progress.value = reducedMotion ? Number(following) : withTiming(Number(following), { duration: 180 });
+  }, [following, progress, reducedMotion]);
+  const idleLabelStyle = useAnimatedStyle(() => ({ opacity: 1 - progress.value, transform: [{ translateY: -8 * progress.value }] }), [progress]);
+  const followedLabelStyle = useAnimatedStyle(() => ({ opacity: progress.value, transform: [{ translateY: 8 * (1 - progress.value) }] }), [progress]);
+  const labelColor = color ?? resolveButtonPalette('subtle', theme, tone).rest.foreground;
+  const visual = (
+    <View pointerEvents="none" aria-hidden accessibilityElementsHidden importantForAccessibility="no-hide-descendants"
+      style={{ height: 20, overflow: 'hidden', ...(iconOnly ? { width: 20 } : {}), justifyContent: 'center' }}>
+      {!iconOnly && <View style={{ height: 0, overflow: 'hidden' }}>
+        <Text variant="body-semibold" style={textStyle}>{label}</Text>
+        <Text variant="body-semibold" style={textStyle}>{followingLabel}</Text>
+      </View>}
+      <Animated.View testID={testID ? `${testID}-idle-label` : undefined}
+        style={[{ position: 'absolute', left: 0, right: 0, alignItems: 'center' }, idleLabelStyle]}>
+        {iconOnly ? <RiUserAddLine width={20} height={20} fill={labelColor} />
+          : <Text variant="body-semibold" style={[{ color: labelColor }, textStyle]} numberOfLines={1}>{label}</Text>}
+      </Animated.View>
+      <Animated.View testID={testID ? `${testID}-following-label` : undefined}
+        style={[{ position: 'absolute', left: 0, right: 0, alignItems: 'center' }, followedLabelStyle]}>
+        {iconOnly ? <RiUserFollowLine width={20} height={20} fill={labelColor} />
+          : <Text variant="body-semibold" style={[{ color: labelColor }, textStyle]} numberOfLines={1}>{followingLabel}</Text>}
+      </Animated.View>
+    </View>
+  );
   return (
-    <Pressable
-      {...webData({ bloomMediaHeaderPress: '' })}
-      role="button"
-      accessibilityLabel={label}
-      aria-pressed={following}
-      aria-disabled={disabled || undefined}
-      accessibilityState={{ selected: following, disabled }}
-      disabled={disabled}
-      onHoverIn={onIn}
-      onHoverOut={onOut}
-      onPress={(event) => {
-        stop(event);
-        onFollowChange(!following);
-      }}
-      style={[root, style]}
-      testID={testID}
-    >
-      <Text variant="body-semibold" style={{ color: fg }} numberOfLines={1}>
-        {following ? followingLabel : label}
-      </Text>
-    </Pressable>
+    <Button appearance="subtle" tone={tone} size={size} iconOnly={iconOnly}
+      pressed={following} stopPropagation accessibilityLabel={label} disabled={disabled} loading={loading}
+      onPress={() => onFollowChange(!following)} trailing={visual}
+      style={style} testID={testID} />
   );
 }
 

package/src/media-header/shared.ts

@@ -4,7 +4,7 @@ import { mixColor, resolveButtonRamps } from '../button/shared';
 import { oklchToSrgb, srgbToOklch, srgbToRgbString } from '../theme/color-space';
 import { parseRgba } from '../theme/color-utils';
 import { quietTextOver } from '../styles/color-contrast';
-import { AA_TEXT } from '../styles/surface-levels';
+import { AA_TEXT, resolveSurfaceLevel, surfaceFillOn, hairlineOn, surfaceTextOn } from '../styles/surface-levels';
 import type { Theme } from '../theme/types';
 import type { TypeScaleVariant } from '../typography/scale';
 import { TYPE_SCALE } from '../typography/scale';
@@ -108,12 +108,12 @@ export function resolveMediaHeaderPaint(
   theme: Theme,
   artworkColor?: string | null,
 ): MediaHeaderPaint {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
+  const { accent } = resolveButtonRamps(theme);
   const { colors } = theme;
   const dark = theme.isDark;
   const tinted = tintArtworkColor(artworkColor, dark);
   const fallback = tinted === null;
-  const bandTop = tinted ?? (dark ? n[800] : n[200]);
+  const bandTop = tinted ?? (surfaceFillOn(theme, colors.background));
   const bandBottom = mixColor(colors.background, bandTop, 0.55);
 
   const onBand = readableOn([bandTop, bandBottom], [colors.text, colors.background]);
@@ -139,17 +139,17 @@ export function resolveMediaHeaderPaint(
     text: colors.text,
     // Floored on `card` — the harder of the two fills this label lands on. As
     // `neutral-500` it measured 4.38:1 on the light card.
-    textMuted: quietTextOver([colors.background, dark ? n[900] : n[100]], colors.text, AA_TEXT),
-    wash: dark ? n[800] : n[100],
-    border: dark ? n[600] : n[300],
+    textMuted: quietTextOver([colors.background, resolveSurfaceLevel(theme, 1).background], colors.text, AA_TEXT),
+    wash: surfaceFillOn(theme, colors.background),
+    border: hairlineOn(theme, colors.background),
     borderHover: colors.text,
-    card: dark ? n[900] : n[100],
+    card: resolveSurfaceLevel(theme, 1).background,
     accent: accent[500],
     onAccent: colors.primaryForeground,
     ring: accent[500],
-    placeholder: dark ? n[800] : n[200],
-    placeholderGlyph: dark ? n[500] : n[400],
-    rail: dark ? n[700] : n[200],
+    placeholder: surfaceFillOn(theme, colors.background),
+    placeholderGlyph: surfaceTextOn(theme, surfaceFillOn(theme, colors.background)).textSecondary,
+    rail: colors.contrast50,
     coverShadow: dark ? '0 8px 24px rgba(0, 0, 0, 0.5)' : '0 8px 24px rgba(0, 0, 0, 0.18)',
   };
 }

package/src/media-header/types.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 
+import type { BloomTone } from '../appearance';
 import type { BloomIconComponent } from '../icons/icon-component';
 import type { WebAriaProps } from '../styles/styled-primitives';
 
@@ -149,6 +150,10 @@ export interface DownloadButtonProps extends ToggleBase {
 }
 
 export interface FollowButtonProps extends ToggleBase {
+  /** Shared Button tone. Defaults to support (secondary). */
+  tone?: BloomTone;
+  /** Compact toggle with icons and the same accessible name. */
+  iconOnly?: boolean;
   following: boolean;
   onFollowChange: (following: boolean) => void;
   /** Default `"Follow"`. The name in both states. */
@@ -157,8 +162,12 @@ export interface FollowButtonProps extends ToggleBase {
   followingLabel?: string;
   /** Draw on a band: the pill takes the band's text colour. */
   color?: string;
-  /** `small` 32 (default) or `medium` 36 high. */
-  size?: 'small' | 'medium';
+  /** Shared Button sizes; small by default. */
+  size?: 'small' | 'medium' | 'large';
+  /** Reserves label geometry while showing the shared Button spinner. */
+  loading?: boolean;
+  /** Applied to both labels and their width-measuring copies. */
+  textStyle?: StyleProp<TextStyle>;
 }
 
 export interface MediaIconButtonProps extends ToggleBase {

package/src/media-player/DevicePicker.tsx

@@ -1,3 +1,4 @@
+import { surfaceFillOn } from '../styles/surface-levels';
 import React, { memo, useMemo, useState } from 'react';
 import { Pressable, View } from 'react-native';
 
@@ -26,12 +27,12 @@ function DeviceRow({
 }) {
   const theme = useTheme();
   const palette = useMemo(() => resolveMenuPalette(theme), [theme]);
-  const { accent, neutral } = useMemo(() => resolveButtonRamps(theme), [theme]);
+  const { accent } = useMemo(() => resolveButtonRamps(theme), [theme]);
   const [hovered, setHovered] = useState(false);
   const Glyph = DEVICE_GLYPHS[device.kind];
   const disabled = !!device.disabled;
   const accentText = theme.isDark ? accent[400] : accent[600];
-  const iconWell = current ? (theme.isDark ? accent[950] : accent[50]) : theme.isDark ? neutral[700] : neutral[100];
+  const iconWell = current ? (theme.isDark ? accent[950] : accent[50]) : surfaceFillOn(theme, theme.colors.background);
 
   const secondary = current ? currentLabel : device.description;
   const content = (

package/src/media-player/FullScreenPlayer.tsx

@@ -1,7 +1,6 @@
 import React, { memo, useContext, useMemo, useState } from 'react';
 import { Pressable, ScrollView, View, type LayoutChangeEvent } from 'react-native';
 
-import { resolveButtonRamps } from '../button/shared';
 import { RiArrowDownSLine } from '../icons/remix/RiArrowDownSLine';
 import { RiMore2Fill } from '../icons/remix/RiMore2Fill';
 import { RiPlayListLine } from '../icons/remix/RiPlayListLine';
@@ -18,7 +17,7 @@ import { ImmersiveTheme, immersiveDarkTheme } from './ImmersiveTheme';
 import { PlayerIconButton } from './PlayerIconButton';
 import { Artwork, TrackText } from './TrackText';
 import { TransportControls } from './TransportControls';
-import { immersiveBase, resolveArtworkTint, verticalGradient } from './shared';
+import { resolveArtworkTint, verticalGradient } from './shared';
 import type { FullScreenPlayerLabels, FullScreenPlayerProps, LyricsPreview } from './types';
 import { webDataSet } from '../styles/web-data';
 
@@ -363,8 +362,7 @@ function FullScreenPlayerComponent(props: FullScreenPlayerProps) {
     const dark = immersiveDarkTheme(theme, ctx?.colorPreset ?? 'oxy');
     const darkPaint = resolveMediaControlsPaint(dark);
     const tint = resolveArtworkTint(props.artworkColor, darkPaint.text, darkPaint.textMuted).background;
-    const { neutral } = resolveButtonRamps(dark);
-    return { tint, base: immersiveBase(dark.colors.text), card: tint ?? neutral[800] };
+    return { tint, base: dark.colors.background, card: tint ?? dark.colors.backgroundSecondary };
   }, [theme, ctx?.colorPreset, props.artworkColor]);
 
   return (

package/src/media-player/NowPlayingBar.tsx

@@ -1,7 +1,7 @@
+import { hairlineOn } from '../styles/surface-levels';
 import React, { memo, useMemo, useState } from 'react';
 import { useWindowDimensions, View, type LayoutChangeEvent } from 'react-native';
 
-import { resolveButtonRamps } from '../button/shared';
 import { RiFullscreenLine } from '../icons/remix/RiFullscreenLine';
 import { RiMicLine } from '../icons/remix/RiMicLine';
 import { RiPlayListLine } from '../icons/remix/RiPlayListLine';
@@ -93,7 +93,6 @@ function NowPlayingBarComponent({
   const layout = nowPlayingBarLayout(width);
   const labels = { ...DEFAULT_LABELS, ...labelOverrides };
   const paint = useMemo(() => resolveMediaControlsPaint(theme), [theme]);
-  const { neutral } = useMemo(() => resolveButtonRamps(theme), [theme]);
   const id = (part: string) => (testID ? `${testID}-${part}` : undefined);
   const casting = !!deviceName;
   const narrow = layout === 'narrow';
@@ -125,7 +124,7 @@ function NowPlayingBarComponent({
           paddingRight: 16,
           backgroundColor: theme.colors.background,
           borderTopWidth: 1,
-          borderTopColor: theme.isDark ? neutral[800] : neutral[200],
+          borderTopColor: hairlineOn(theme, theme.colors.background),
         },
         style,
       ]}

package/src/media-player/TrackText.tsx

@@ -1,7 +1,7 @@
+import { surfaceFillOn } from '../styles/surface-levels';
 import React, { useEffect, useMemo } from 'react';
 import { Image, View, type StyleProp, type ViewStyle } from 'react-native';
 
-import { resolveButtonRamps } from '../button/shared';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import { webDataSet } from '../styles/web-data';
 import { useImageResolver } from '../image-resolver/context';
@@ -29,7 +29,6 @@ export function Artwork({
 }) {
   const theme = useTheme();
   const resolver = useImageResolver();
-  const { neutral } = useMemo(() => resolveButtonRamps(theme), [theme]);
   const uri = source ? (isImageUrl(source) ? source : resolver?.(source)) : undefined;
   const box: ViewStyle =
     size === '100%' ? { width: '100%', aspectRatio: 1 } : { width: size, height: size };
@@ -40,7 +39,7 @@ export function Artwork({
         {
           borderRadius: radius,
           overflow: 'hidden',
-          backgroundColor: theme.isDark ? neutral[800] : neutral[100],
+          backgroundColor: surfaceFillOn(theme, theme.colors.background),
           alignItems: 'center',
           justifyContent: 'center',
         },
@@ -57,7 +56,7 @@ export function Artwork({
         />
       ) : (
         <View pointerEvents="none">
-          <RiMusic2Line width={24} height={24} fill={theme.isDark ? neutral[500] : neutral[400]} />
+          <RiMusic2Line width={24} height={24} fill={theme.colors.textSecondary} />
         </View>
       )}
     </View>

package/src/media-player/shared.ts

@@ -1,12 +1,12 @@
 import { Platform } from 'react-native';
 
-import { neutralRamp } from '../button/shared';
 import { parseRgba } from '../theme/color-utils';
 import type { WebCssStyle } from '../styles/web-view-style';
 import type { MediaArtist, RepeatMode, SleepTimerValue, TransportControlsSize } from './types';
 import {
   AA_TEXT_CONTRAST,
   contrastRatio,
+  darken,
   darkenUntilContrast,
   relativeLuminance,
 } from '../styles/color-contrast';
@@ -101,9 +101,9 @@ export function resolveArtworkTint(
   return shade ? { background: shade.color, darkened: shade.amount } : { background: null, darkened: 0 };
 }
 
-/** The dark surface the full-screen gradient ends on: neutral-950 tinted by the theme text. */
+/** Legacy text-only helper: a dark theme-linked artwork fallback. New players use background directly. */
 export function immersiveBase(themeText: string): string {
-  return neutralRamp(themeText)[950];
+  return darken(themeText, 0.94) ?? '#000000';
 }
 
 /** A top-to-bottom gradient: `background-image` on web, the native CSS-gradient style elsewhere. */

package/src/menu-item/MenuItemOptions.tsx

@@ -0,0 +1,230 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { Button } from '../button';
+import { Checkbox } from '../checkbox';
+import { Divider } from '../divider';
+import { Field } from '../field';
+import { RadioGroup } from '../radio';
+import type { RadioOption } from '../radio';
+import { StepperRow } from '../stepper';
+import { useSurfaceFill } from '../styles/surface-levels';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { MENU_ITEM_GROUP_GAP } from './constants';
+import {
+  describeOptionRule,
+  optionDisabled,
+  optionGroupRule,
+  optionSubtitle,
+  resolveMenuItemPaint,
+  toggleOptionSelection,
+} from './shared';
+import type { MenuItemOptionGroup, MenuItemOptionsProps } from './types';
+
+/**
+ * Choosing a dish: the questions, how many of it, and what that comes to.
+ *
+ *   group     a `Field` whose label is the question and the rule ("Size
+ *             Choose 1"), then the controls, then the group's error
+ *   controls  `RadioGroup` when at most one may be chosen, a column of
+ *             `Checkbox` otherwise. Bloom's own, through the `Field` contract —
+ *             `docs/composition.mdx` names hand-rolled `role="radiogroup"` as
+ *             debt and keeps a list of the three families that carry it, and
+ *             this is not a fourth.
+ *   quantity  `StepperRow`
+ *   footer    ONE `Button`, full width, carrying the running price after the
+ *             label ("Add to basket · €16.40")
+ *
+ * IT IS CONTENT, NOT A SURFACE. On a phone it is what a `BottomSheet` holds; on
+ * a desktop what a `Dialog` holds. It paints no backdrop, claims no edge and
+ * owns no open state, so the same tree works in either — building a sheet in
+ * here would be a third one beside the two Bloom already ships.
+ *
+ * IT ADDS NOTHING UP. `total` is a string the app formatted, like every other
+ * amount in Bloom's commerce families, because currency, locale, rounding and
+ * how an option's delta applies are decisions this component cannot make for
+ * three different apps.
+ *
+ * THE CAP IS ENFORCED BY DISABLING, NOT BY EVICTING. At a group's `max`, the
+ * options that are not already chosen go disabled. A reader who presses a
+ * fourth extra and watches the first one disappear has been told nothing about
+ * the rule.
+ */
+
+function GroupLabel({ title, rule, color }: { title: string; rule: string; color: string }) {
+  // A nested `Text`, not a `View`: `Label` renders its children INSIDE a `Text`,
+  // and a `View` in a `Text` is a div in a span on web and unreliable on native.
+  return (
+    <>
+      {title}
+      <Text variant="body-regular" style={{ color }}>
+        {`  ${rule}`}
+      </Text>
+    </>
+  );
+}
+
+function OptionGroup({
+  group,
+  chosen,
+  onValueChange,
+  disabled,
+  secondary,
+  testID,
+}: {
+  group: MenuItemOptionGroup;
+  chosen: ReadonlyArray<string>;
+  onValueChange: MenuItemOptionsProps['onValueChange'];
+  disabled: boolean;
+  secondary: string;
+  testID?: string;
+}) {
+  const rule = optionGroupRule(group);
+  const ruleText = describeOptionRule(group);
+  const label = <GroupLabel title={group.title} rule={ruleText} color={secondary} />;
+
+  const body = rule.multiple ? (
+    <View style={{ gap: 12 }} testID={testID ? `${testID}-options` : undefined}>
+      {group.options.map((option) => (
+        <Checkbox
+          key={option.id}
+          checked={chosen.includes(option.id)}
+          onCheckedChange={() => onValueChange(group.id, toggleOptionSelection(chosen, option.id, rule))}
+          label={option.label}
+          description={optionSubtitle(option)}
+          disabled={disabled || optionDisabled(option, chosen, rule)}
+          testID={testID ? `${testID}-option-${option.id}` : undefined}
+        />
+      ))}
+    </View>
+  ) : (
+    <RadioGroup
+      // The field's label is a NODE, so it publishes no `labelText` for the
+      // group to take its name from — the name is written here, and it carries
+      // the rule as well, which the drawn label says and `aria-labelledby`
+      // cannot reach on native.
+      label={`${group.title}, ${ruleText}`}
+      value={chosen[0]}
+      onValueChange={(next: string) => onValueChange(group.id, toggleOptionSelection(chosen, next, rule))}
+      options={group.options.map(
+        (option): RadioOption => ({
+          value: option.id,
+          label: option.label,
+          description: optionSubtitle(option),
+          disabled: option.disabled,
+          testID: testID ? `${testID}-option-${option.id}` : undefined,
+        }),
+      )}
+      testID={testID ? `${testID}-options` : undefined}
+    />
+  );
+
+  return (
+    <Field
+      label={label}
+      error={group.error}
+      required={rule.required}
+      disabled={disabled}
+      multiple={rule.multiple}
+      testID={testID}
+    >
+      {body}
+    </Field>
+  );
+}
+
+function MenuItemOptionsComponent({
+  groups,
+  value,
+  onValueChange,
+  quantity,
+  onQuantityChange,
+  quantityLabel = 'Quantity',
+  total,
+  onSubmit,
+  submitLabel = 'Add to basket',
+  submitDisabled = false,
+  disabled = false,
+  header,
+  accessibilityLabel = 'Options',
+  style,
+  testID,
+}: MenuItemOptionsProps) {
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  const paint = useMemo(() => resolveMenuItemPaint(theme, surface), [theme, surface]);
+
+  return (
+    <View style={[{ gap: MENU_ITEM_GROUP_GAP }, style]} testID={testID}>
+      {header}
+      {groups.length > 0 ? (
+        <View
+          role="group"
+          accessibilityLabel={accessibilityLabel}
+          aria-label={accessibilityLabel}
+          style={{ gap: MENU_ITEM_GROUP_GAP }}
+          testID={testID ? `${testID}-groups` : undefined}
+        >
+          {groups.map((group, index) => (
+            <React.Fragment key={group.id}>
+              {index > 0 ? <Divider color={paint.rule} /> : null}
+              <OptionGroup
+                group={group}
+                chosen={value[group.id] ?? []}
+                onValueChange={onValueChange}
+                disabled={disabled}
+                secondary={paint.textSecondary}
+                testID={testID ? `${testID}-group-${group.id}` : undefined}
+              />
+            </React.Fragment>
+          ))}
+        </View>
+      ) : null}
+
+      {onQuantityChange ? (
+        <StepperRow
+          title={quantityLabel}
+          value={quantity ?? 1}
+          min={1}
+          onValueChange={onQuantityChange}
+          disabled={disabled}
+          stepperStyle={{ flexShrink: 0 }}
+          testID={testID ? `${testID}-quantity` : undefined}
+        />
+      ) : null}
+
+      {onSubmit ? (
+        <Button
+          variant="primary"
+          size="large"
+          fullWidth
+          disabled={disabled || submitDisabled}
+          onPress={onSubmit}
+          testID={testID ? `${testID}-submit` : undefined}
+        >
+          {total ? `${submitLabel} · ${total}` : submitLabel}
+        </Button>
+      ) : total ? (
+        <View
+          style={{ flexDirection: 'row', alignItems: 'baseline', gap: 12 }}
+          testID={testID ? `${testID}-total` : undefined}
+        >
+          <Text variant="title-3-semibold" style={{ flex: 1, color: paint.text }}>
+            {submitLabel}
+          </Text>
+          <Text
+            variant="title-3-semibold"
+            testID={testID ? `${testID}-total-amount` : undefined}
+            style={{ color: paint.text, fontVariant: ['tabular-nums'] }}
+          >
+            {total}
+          </Text>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+export const MenuItemOptions = memo(MenuItemOptionsComponent);
+MenuItemOptions.displayName = 'MenuItemOptions';