@oxy.so/bloom 4.0.0 → 4.1.0

package/src/directions/TransitLineBadge.tsx

@@ -0,0 +1,59 @@
+import React, { memo, useMemo } from 'react';
+import { Platform, View } from 'react-native';
+
+import { Badge } from '../badge';
+import { useTheme } from '../theme/use-theme';
+import { describeTransitLine, resolveTransitLineColors } from './shared';
+import type { TransitLineBadgeProps } from './types';
+
+const IS_WEB = Platform.OS === 'web';
+
+/**
+ * A transit line's own badge — "L4", "N12", "S1".
+ *
+ * It is Bloom's `Badge` on the label rung, with two colours overridden and
+ * nothing else: the geometry, the radius, the type step and the truncation stay
+ * the badge's. That is the same construction `listing-card`'s status pill uses,
+ * and for the same reason — an operator's line colour is DATA the app owns, and
+ * only the fill and the label may come from outside the palette.
+ *
+ * The label colour is MEASURED, not derived: `readableOn` picks whichever end
+ * of the theme's own reading pair clears more contrast against the operator's
+ * fill, in both modes. A line with no colour is the plain neutral badge, which
+ * is the right answer for an operator that publishes none rather than an
+ * invented tint.
+ *
+ * It reads as ONE element, like `Rating`: the pill shows two characters and
+ * says a sentence ("Line L4, towards Pla del Bosc"). `Badge` takes no name of
+ * its own, so the name sits on the wrapper — `role="img"` on web, where a plain
+ * `div` carrying an `aria-label` is not announced at all.
+ */
+function TransitLineBadgeComponent({ line, size = 'label-small', style, testID }: TransitLineBadgeProps) {
+  const theme = useTheme();
+  const colors = useMemo(
+    () => (line.color ? resolveTransitLineColors(theme, line.color) : null),
+    [theme, line.color],
+  );
+
+  return (
+    <View
+      accessible
+      accessibilityLabel={describeTransitLine(line)}
+      {...(IS_WEB ? { role: 'img' as const } : null)}
+      style={style}
+      testID={testID}
+    >
+      <Badge
+        content={line.name}
+        variant={colors ? 'solid' : 'subtle'}
+        color="default"
+        size={size}
+        style={colors ? { backgroundColor: colors.background } : undefined}
+        textStyle={colors ? { color: colors.foreground } : undefined}
+      />
+    </View>
+  );
+}
+
+export const TransitLineBadge = memo(TransitLineBadgeComponent);
+TransitLineBadge.displayName = 'TransitLineBadge';

package/src/directions/constants.ts

@@ -0,0 +1,73 @@
+import { RiBikeLine } from '../icons/remix/RiBikeLine';
+import { RiCarLine } from '../icons/remix/RiCarLine';
+import { RiSubwayLine } from '../icons/remix/RiSubwayLine';
+import { RiWalkLine } from '../icons/remix/RiWalkLine';
+import type { BloomIconComponent } from '../icons/icon-component';
+import type { AccentTone } from '../theme/accent-colors';
+import type { DirectionsManeuver, DirectionsMode, DirectionsTraffic } from './types';
+
+/** The English default mode words. */
+export const DIRECTIONS_MODE_LABELS: Readonly<Record<DirectionsMode, string>> = {
+  drive: 'Drive',
+  transit: 'Transit',
+  walk: 'Walk',
+  cycle: 'Cycle',
+};
+
+/** The glyph each mode draws — on the switcher, on a leg header, on a route row. */
+export const DIRECTIONS_MODE_ICON: Readonly<Record<DirectionsMode, BloomIconComponent>> = {
+  drive: RiCarLine,
+  transit: RiSubwayLine,
+  walk: RiWalkLine,
+  cycle: RiBikeLine,
+};
+
+/** The English default traffic words. */
+export const DIRECTIONS_TRAFFIC_LABELS: Readonly<Record<DirectionsTraffic, string>> = {
+  light: 'Light traffic',
+  moderate: 'Moderate traffic',
+  heavy: 'Heavy traffic',
+};
+
+/**
+ * Which tone the traffic badge takes.
+ *
+ * `light` is `success` rather than `default` on purpose: a clear road is GOOD
+ * news and the reader is scanning for it, and a neutral pill beside a red one
+ * reads as "no information" rather than as "clear".
+ */
+export const DIRECTIONS_TRAFFIC_TONE: Readonly<Record<DirectionsTraffic, AccentTone>> = {
+  light: 'success',
+  moderate: 'warning',
+  heavy: 'error',
+};
+
+/**
+ * The word each maneuver is announced with, before the instruction.
+ *
+ * The glyph says it on screen and says NOTHING to a screen reader, which is the
+ * same mechanism `RouteStops` records for its marker shapes. The instruction
+ * usually repeats it ("Turn right onto…"), and that is fine: a repeated word is
+ * cheap and a missing one is not recoverable.
+ */
+export const DIRECTIONS_MANEUVER_LABELS: Readonly<Record<DirectionsManeuver, string>> = {
+  depart: 'Depart',
+  straight: 'Continue straight',
+  'slight-left': 'Slight left',
+  left: 'Turn left',
+  'sharp-left': 'Sharp left',
+  'slight-right': 'Slight right',
+  right: 'Turn right',
+  'sharp-right': 'Sharp right',
+  uturn: 'Make a U-turn',
+  roundabout: 'At the roundabout',
+  merge: 'Merge',
+  arrive: 'Arrive',
+  board: 'Board',
+  alight: 'Get off',
+  transfer: 'Change',
+  walk: 'Walk',
+};
+
+/** The leg header's glyph, and the gap above a leg's steps — `address`' own rungs. */
+export const DIRECTIONS_LEG_GLYPH = 16;

package/src/directions/index.ts

@@ -0,0 +1,35 @@
+export { DirectionsSummary } from './DirectionsSummary';
+export { DirectionsSteps } from './DirectionsSteps';
+export { TransitLineBadge } from './TransitLineBadge';
+export { DIRECTIONS_MANEUVER_ICON } from './maneuvers';
+export {
+  DIRECTIONS_LEG_GLYPH,
+  DIRECTIONS_MANEUVER_LABELS,
+  DIRECTIONS_MODE_ICON,
+  DIRECTIONS_MODE_LABELS,
+  DIRECTIONS_TRAFFIC_LABELS,
+  DIRECTIONS_TRAFFIC_TONE,
+} from './constants';
+export {
+  describeRoute,
+  describeStep,
+  describeTransitLine,
+  modeLabelFor,
+  resolveDirectionsPaint,
+  resolveTransitLineColors,
+  trafficLabelFor,
+} from './shared';
+export type { DirectionsPaint, TransitLineColors } from './shared';
+export type {
+  DirectionsLeg,
+  DirectionsManeuver,
+  DirectionsMode,
+  DirectionsRoute,
+  DirectionsStep,
+  DirectionsStepsProps,
+  DirectionsSummaryLabels,
+  DirectionsSummaryProps,
+  DirectionsTraffic,
+  TransitLine,
+  TransitLineBadgeProps,
+} from './types';

package/src/directions/maneuvers.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { RiArrowGoBackLine } from '../icons/remix/RiArrowGoBackLine';
+import { RiArrowLeftDownLine } from '../icons/remix/RiArrowLeftDownLine';
+import { RiArrowRightDownLine } from '../icons/remix/RiArrowRightDownLine';
+import { RiArrowRightUpLine } from '../icons/remix/RiArrowRightUpLine';
+import { RiArrowUpLine } from '../icons/remix/RiArrowUpLine';
+import { RiCornerUpLeftLine } from '../icons/remix/RiCornerUpLeftLine';
+import { RiExchangeLine } from '../icons/remix/RiExchangeLine';
+import { RiFlagLine } from '../icons/remix/RiFlagLine';
+import { RiGitMergeLine } from '../icons/remix/RiGitMergeLine';
+import { RiLoginBoxLine } from '../icons/remix/RiLoginBoxLine';
+import { RiLogoutBoxRLine } from '../icons/remix/RiLogoutBoxRLine';
+import { RiLoopRightLine } from '../icons/remix/RiLoopRightLine';
+import { RiMapPin2Line } from '../icons/remix/RiMapPin2Line';
+import { RiWalkLine } from '../icons/remix/RiWalkLine';
+import type { BloomIconComponent } from '../icons/icon-component';
+import type { DirectionsManeuver } from './types';
+
+/**
+ * The glyph each maneuver draws.
+ *
+ * TWO OF THEM ARE THE MIRROR OF ANOTHER, and that is the honest way to draw
+ * them. A maneuver set is symmetric — a right turn IS a left turn seen from the
+ * other side — and Bloom's icon set carries one side of each pair
+ * (`RiCornerUpLeftLine`, `RiArrowRightUpLine`). Mirroring the existing glyph
+ * keeps the stroke weight, the arrowhead and the corner radius identical to its
+ * partner; picking a different glyph that happens to point the right way does
+ * not, and the two then read as coming from two sets.
+ *
+ * `mirror()` wraps the icon in a `scaleX: -1` view. That is a transform of the
+ * WHOLE glyph about its own centre — it moves nothing, needs no offset, and the
+ * wrapped component keeps `BloomIconComponent`'s three props, so it is handed
+ * to `AddressRow`'s `icon` exactly like any other.
+ *
+ * Each mirrored component is built ONCE at module scope. Built inside a render
+ * it would be a new component type every frame, and React would unmount and
+ * remount the glyph on each one.
+ */
+function mirror(Icon: BloomIconComponent): BloomIconComponent {
+  const Mirrored: BloomIconComponent = ({ width, height, fill }) => (
+    <View style={{ transform: [{ scaleX: -1 }] }}>
+      <Icon width={width} height={height} fill={fill} />
+    </View>
+  );
+  Mirrored.displayName = `Mirrored(${Icon.displayName ?? Icon.name ?? 'Icon'})`;
+  return Mirrored;
+}
+
+const RiCornerUpRight = mirror(RiCornerUpLeftLine);
+const RiArrowLeftUp = mirror(RiArrowRightUpLine);
+
+export const DIRECTIONS_MANEUVER_ICON: Readonly<Record<DirectionsManeuver, BloomIconComponent>> = {
+  depart: RiMapPin2Line,
+  straight: RiArrowUpLine,
+  'slight-left': RiArrowLeftUp,
+  left: RiCornerUpLeftLine,
+  'sharp-left': RiArrowLeftDownLine,
+  'slight-right': RiArrowRightUpLine,
+  right: RiCornerUpRight,
+  'sharp-right': RiArrowRightDownLine,
+  uturn: RiArrowGoBackLine,
+  roundabout: RiLoopRightLine,
+  merge: RiGitMergeLine,
+  arrive: RiFlagLine,
+  board: RiLoginBoxLine,
+  alight: RiLogoutBoxRLine,
+  transfer: RiExchangeLine,
+  walk: RiWalkLine,
+};

package/src/directions/shared.ts

@@ -0,0 +1,149 @@
+/**
+ * The pure parts of `directions`: the label a transit badge can be read with,
+ * and the sentences the two components announce.
+ */
+import { readableOn } from '../styles/color-contrast';
+import { hairlineOn, surfaceTextOn, type SurfaceTextPaint } from '../styles/surface-levels';
+import { resolveAccentColors } from '../theme/accent-colors';
+import type { Theme } from '../theme/types';
+import {
+  DIRECTIONS_MANEUVER_LABELS,
+  DIRECTIONS_MODE_LABELS,
+  DIRECTIONS_TRAFFIC_LABELS,
+} from './constants';
+import type {
+  DirectionsMode,
+  DirectionsRoute,
+  DirectionsStep,
+  DirectionsSummaryLabels,
+  DirectionsTraffic,
+  TransitLine,
+} from './types';
+
+export interface TransitLineColors {
+  /** The operator's colour, as given. */
+  background: string;
+  /** Whichever end of the theme's reading pair MEASURES legible on it. */
+  foreground: string;
+}
+
+/**
+ * The badge's two colours for a line that carries its own.
+ *
+ * The label is not derived from the fill — it is CHOSEN from the theme's own
+ * two reading colours by measuring contrast against the fill, which is what
+ * `readableOn` does. That distinction matters: a derived label (lighten the
+ * fill until it clears AA) invents a colour that is in no palette, and on a
+ * saturated operator red it lands on pink.
+ *
+ * Both candidates are always offered in both modes, because the fill is the
+ * operator's and has no idea which mode it landed in: a yellow line needs the
+ * dark label on a dark page just as much as on a light one.
+ */
+export function resolveTransitLineColors(theme: Theme, color: string): TransitLineColors {
+  return {
+    background: color,
+    foreground: readableOn(color, [theme.colors.background, theme.colors.text]),
+  };
+}
+
+/** "Line L4, towards Pla del Bosc" — a badge showing two characters says nothing aloud. */
+export function describeTransitLine(line: TransitLine): string {
+  if (line.accessibilityLabel) return line.accessibilityLabel;
+  return [`Line ${line.name}`, line.headsign].filter(Boolean).join(', ');
+}
+
+/** The traffic word as drawn. */
+export function trafficLabelFor(
+  traffic: DirectionsTraffic | undefined,
+  override: string | undefined,
+  labels: DirectionsSummaryLabels | undefined,
+): string | null {
+  if (traffic === undefined) return null;
+  return override ?? labels?.traffic?.[traffic] ?? DIRECTIONS_TRAFFIC_LABELS[traffic];
+}
+
+/** The mode word as drawn. */
+export function modeLabelFor(
+  mode: DirectionsMode,
+  labels: DirectionsSummaryLabels | undefined,
+): string {
+  return labels?.mode?.[mode] ?? DIRECTIONS_MODE_LABELS[mode];
+}
+
+/**
+ * One route in a sentence — "24 min, 8.2 km, Arrives 18:42, Via Ronda del
+ * Nord, Light traffic, Line L4".
+ *
+ * The row draws a duration, a `via` line, a chip and up to three badges, and a
+ * reader moving by row hears one utterance per route or seven fragments per
+ * route. This is the one.
+ */
+export function describeRoute(
+  route: DirectionsRoute,
+  labels: DirectionsSummaryLabels | undefined,
+): string {
+  const parts: string[] = [route.duration];
+  if (route.distance) parts.push(route.distance);
+  if (route.arrival) parts.push(route.arrival);
+  if (route.via) parts.push(route.via);
+  const traffic = trafficLabelFor(route.traffic, route.trafficLabel, labels);
+  if (traffic) parts.push(traffic);
+  if (route.note) parts.push(route.note);
+  for (const line of route.lines ?? []) parts.push(describeTransitLine(line));
+  return parts.join(', ');
+}
+
+/**
+ * One step in a sentence, with the MANEUVER WORD first.
+ *
+ * The glyph is the only thing on the row that says which way to turn, and a
+ * glyph says nothing aloud — the same hole `RouteStops` fills by naming the
+ * marker's state. `currentWord` is added first when this is the step the
+ * traveller is on, because a wash does not announce either.
+ */
+export function describeStep(
+  step: DirectionsStep,
+  options: { current?: boolean; currentWord?: string } = {},
+): string {
+  if (step.accessibilityLabel) {
+    return options.current && options.currentWord
+      ? `${options.currentWord}, ${step.accessibilityLabel}`
+      : step.accessibilityLabel;
+  }
+  const maneuver = DIRECTIONS_MANEUVER_LABELS[step.maneuver ?? 'straight'];
+  return [
+    options.current ? options.currentWord : undefined,
+    maneuver,
+    step.instruction,
+    step.detail,
+    step.line ? describeTransitLine(step.line) : undefined,
+    step.distance,
+  ]
+    .filter((part): part is string => typeof part === 'string' && part !== '')
+    .join(', ');
+}
+
+export interface DirectionsPaint extends SurfaceTextPaint {
+  /** The hairline under a leg header and between blocks. */
+  border: string;
+  /** The tint a step wears while it is the one the traveller is on. */
+  currentFill: string;
+  /** The label on that tint. */
+  currentText: string;
+}
+
+/**
+ * Everything `directions` paints, read off the surface it was dropped on — a
+ * sheet, a card or the page. The current step's wash is the accent's own
+ * `subtle` pair, so it is legible by construction and moves with the preset.
+ */
+export function resolveDirectionsPaint(theme: Theme, surface: string): DirectionsPaint {
+  const accent = resolveAccentColors(theme.colors, 'primary', 'subtle');
+  return {
+    ...surfaceTextOn(theme, surface),
+    border: hairlineOn(theme, surface),
+    currentFill: accent.background,
+    currentText: accent.foreground,
+  };
+}

package/src/directions/types.ts

@@ -0,0 +1,188 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { AddressDensity } from '../address';
+import type { RouteStop } from '../route-stops';
+
+/** How you are getting there. Chooses the mode glyph and the default figure label. */
+export type DirectionsMode = 'drive' | 'transit' | 'walk' | 'cycle';
+
+/**
+ * What the traveller does at a step. Data, not sixteen components: it chooses
+ * the glyph ({@link DIRECTIONS_MANEUVER_ICON}) and the word the step is
+ * announced with, and nothing else.
+ *
+ * The four transit members are here rather than in a second vocabulary because
+ * a transit route's steps are interleaved with walking ones — "walk 4 min",
+ * "board the L4", "8 stops", "get off at Plaça de les Bruixes" — and a second
+ * type would have to be merged back together at every call site.
+ */
+export type DirectionsManeuver =
+  | 'depart'
+  | 'straight'
+  | 'slight-left'
+  | 'left'
+  | 'sharp-left'
+  | 'slight-right'
+  | 'right'
+  | 'sharp-right'
+  | 'uturn'
+  | 'roundabout'
+  | 'merge'
+  | 'arrive'
+  | 'board'
+  | 'alight'
+  | 'transfer'
+  | 'walk';
+
+/** How the road is moving. Chooses the tone of the traffic badge. */
+export type DirectionsTraffic = 'light' | 'moderate' | 'heavy';
+
+/** One transit line, as its operator names and colours it. */
+export interface TransitLine {
+  /** The short name drawn on the badge ("L4", "N12", "S1"). Never truncated. */
+  name: string;
+  /**
+   * The operator's own colour for the line. The badge picks its label from the
+   * two ends of the theme's own reading pair by MEASURING contrast against this
+   * — it never derives a colour from it. Without a colour the badge is Bloom's
+   * neutral pill.
+   */
+  color?: string;
+  /** Where the line is heading ("towards Pla del Bosc"). Announced, not drawn. */
+  headsign?: string;
+  /** The announced name, when "L4" is not a word. Default `` `Line ${name}` ``. */
+  accessibilityLabel?: string;
+}
+
+export interface TransitLineBadgeProps {
+  line: TransitLine;
+  /** Default `label-small`. */
+  size?: 'label-small' | 'label-medium';
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/** One way of getting there. */
+export interface DirectionsRoute {
+  /** Identifies the route to `onSelectRoute`, and keys the row. */
+  id: string;
+  /** The FIGURE — "24 min". Pre-formatted and short. */
+  duration: string;
+  /** "8.2 km". */
+  distance?: string;
+  /** Pre-formatted ("Arrives 18:42"). */
+  arrival?: string;
+  /** The road or the line the route is known by ("Via Ronda del Nord"). */
+  via?: string;
+  /** How the road is moving. Draws a badge beside the figure and on the row. */
+  traffic?: DirectionsTraffic;
+  /** Replaces the English traffic word ("Light traffic", …). */
+  trafficLabel?: string;
+  /** A word for what makes this route worth offering ("Fewest transfers"). */
+  note?: string;
+  /** The lines a transit route rides, drawn as badges in order. */
+  lines?: readonly TransitLine[];
+}
+
+/** Every word `DirectionsSummary` speaks, in one prop. */
+export interface DirectionsSummaryLabels {
+  /** The quiet label over the figure. Default: the mode's word ("Drive", "Transit", …). */
+  figure?: string;
+  /** Above the alternates. Default `"Other routes"`. */
+  alternates?: string;
+  /** The primary action. Default `"Start"`. */
+  start?: string;
+  /** Names the mode switcher. Default `"Travel mode"`. */
+  modes?: string;
+  /** Replaces the English mode words. */
+  mode?: Partial<Record<DirectionsMode, string>>;
+  /** Replaces the English traffic words. */
+  traffic?: Partial<Record<DirectionsTraffic, string>>;
+}
+
+export interface DirectionsSummaryProps {
+  /**
+   * Every route offered, chosen one included. ONE list rather than a `route`
+   * plus an `alternates`: the chosen route moves as the reader picks, and two
+   * props would need the app to keep them consistent at every press.
+   */
+  routes: readonly DirectionsRoute[];
+  /** The chosen route's id. Defaults to the first. */
+  selectedRouteId?: string;
+  onSelectRoute?: (id: string) => void;
+  /**
+   * The origin and destination, drawn by `RouteStops` above everything else.
+   * Omitted, the summary draws no header — an app whose screen already shows
+   * the stops does not get a second copy.
+   */
+  stops?: readonly RouteStop[];
+  onPressStop?: (id: string) => void;
+  /** Draws `RouteStops`' swap control. Offered only for exactly two stops. */
+  onSwapStops?: () => void;
+  /** The mode switcher's segments, in order. Empty or omitted hides it. */
+  modes?: readonly DirectionsMode[];
+  /** The chosen mode. Also chooses the default figure label and the row glyph. */
+  mode?: DirectionsMode;
+  onModeChange?: (mode: DirectionsMode) => void;
+  /** Draws the primary action under the figure. */
+  onStart?: () => void;
+  labels?: DirectionsSummaryLabels;
+  /** Names the block. Default `"Directions"`. */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  /** Parts get `<testID>-stops`, `-modes`, `-figure`, `-start`, `-alternates`. */
+  testID?: string;
+}
+
+/** One instruction on the way. */
+export interface DirectionsStep {
+  /** Identifies the step to `onPressStep`, and keys the row. */
+  id: string;
+  /** What to do — "Turn right onto Carrer del Roure". */
+  instruction: string;
+  /** The rest of it — "Continue for 400 m", "8 stops". */
+  detail?: string;
+  /** Default `straight`. */
+  maneuver?: DirectionsManeuver;
+  /** The distance to this maneuver, pre-formatted ("400 m"). Drawn tabular. */
+  distance?: string;
+  /** A line badge after the instruction — a step that boards or changes line. */
+  line?: TransitLine;
+  /** The announced name, overriding the one assembled from the row's parts. */
+  accessibilityLabel?: string;
+}
+
+/** One continuous stretch in one mode — a walk, a ride, a drive between stops. */
+export interface DirectionsLeg {
+  /** Identifies the leg. Defaults to its index. */
+  id?: string;
+  /** The header line ("Walk to Plaça de les Bruixes"). No title draws no header. */
+  title?: string;
+  /** The trailing reading on the header ("6 min · 450 m"). */
+  meta?: string;
+  /** Chooses the header glyph. Default `drive`. */
+  mode?: DirectionsMode;
+  /** The line this leg rides, drawn on the header. */
+  line?: TransitLine;
+  steps: readonly DirectionsStep[];
+}
+
+export interface DirectionsStepsProps {
+  legs: readonly DirectionsLeg[];
+  /**
+   * The step the traveller is on. It is marked on screen AND named in the
+   * row's announcement — a wash says nothing to a screen reader.
+   */
+  currentStepId?: string;
+  /** Makes each step pressable — an app pans its map to the maneuver. */
+  onPressStep?: (stepId: string) => void;
+  /** Default `comfortable`. */
+  density?: AddressDensity;
+  /** The word added to the current step's name. Default `"Current step"`. */
+  currentLabel?: string;
+  /** Names the list. Default `"Directions"`. */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  /** Parts get `<testID>-leg-<n>`, `-leg-<n>-step-<m>`. */
+  testID?: string;
+}

package/src/earnings/EarningsBreakdown.tsx

@@ -0,0 +1,73 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { PriceSummary } from '../price-breakdown';
+import { useSurfaceFill } from '../styles/surface-levels';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { EARNINGS_LABELS } from './constants';
+import { resolveEarningsPaint } from './shared';
+import type { EarningsBreakdownProps } from './types';
+
+/**
+ * What the period's money came from, by kind.
+ *
+ * It is `price-breakdown`'s `PriceSummary` under a heading, and that is the
+ * whole component. A courier's earnings are an ITEMISATION — jobs, tips,
+ * bonuses, adjustments, each a label and an amount the app formatted — which is
+ * the same object as a fare's itemisation seen from the other side. Writing a
+ * second list of label-and-amount rows here would give Bloom two answers to one
+ * question, and only one of them would know about `estimated`, `pending`, the
+ * discount tone and the info popover.
+ *
+ *   heading  `body-semibold`, 8 over the list; omitted with `title={null}`
+ *   lines    `PriceSummary`, which owns the rows, the rule and the total
+ *
+ * **NO TOTAL BY DEFAULT.** Inside `EarningsSummary` the figure above already IS
+ * the total, and a second one under the list is the same number twice. Pass
+ * `total` when the breakdown stands on its own.
+ */
+function EarningsBreakdownComponent({
+  lines,
+  total,
+  title,
+  collapsible = false,
+  defaultExpanded = false,
+  labels: labelOverrides,
+  accessibilityLabel,
+  style,
+  testID,
+}: EarningsBreakdownProps) {
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  const paint = useMemo(() => resolveEarningsPaint(theme, surface), [theme, surface]);
+  const labels = useMemo(() => ({ ...EARNINGS_LABELS, ...labelOverrides }), [labelOverrides]);
+  const heading = title === undefined ? labels.breakdown : title;
+
+  return (
+    <View style={[{ gap: 8 }, style]} testID={testID}>
+      {heading ? (
+        <Text
+          variant="body-semibold"
+          role="heading"
+          aria-level={3}
+          style={{ color: paint.text }}
+          testID={testID ? `${testID}-title` : undefined}
+        >
+          {heading}
+        </Text>
+      ) : null}
+      <PriceSummary
+        lines={lines}
+        total={total}
+        collapsible={collapsible}
+        defaultExpanded={defaultExpanded}
+        accessibilityLabel={accessibilityLabel ?? heading ?? labels.breakdown}
+        testID={testID ? `${testID}-lines` : undefined}
+      />
+    </View>
+  );
+}
+
+export const EarningsBreakdown = memo(EarningsBreakdownComponent);
+EarningsBreakdown.displayName = 'EarningsBreakdown';