@oxy.so/bloom 2.8.0 → 2.10.0

package/src/tenancy/parts.tsx

@@ -0,0 +1,241 @@
+import React, { useEffect, useMemo, type ReactNode } from 'react';
+import { Pressable, View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { BUTTON_GEOMETRY, BUTTON_RADIUS, mixColor } from '../button/shared';
+import { useInteractionState } from '../hooks/use-interaction-state';
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import {
+  HOUSING_CARD_PADDING,
+  HOUSING_CARD_RADIUS,
+  HOUSING_STYLE_ID,
+  HOUSING_WEB_CSS,
+  resolveHousingPalette,
+  webData,
+  type HousingPalette,
+} from './shared';
+import type { HousingIcon } from './types';
+
+/**
+ * Internal parts the housing cards are built from. Not published: each is a
+ * detail of a card's design, not a primitive a consumer should compose.
+ */
+
+/** Adopts the housing focus sheet once. */
+export function useHousingWebCss(): void {
+  useEffect(() => {
+    adoptStyleSheet(HOUSING_STYLE_ID, HOUSING_WEB_CSS);
+  }, []);
+}
+
+export function useHousingPalette(): HousingPalette {
+  const theme = useTheme();
+  return useMemo(() => resolveHousingPalette(theme), [theme]);
+}
+
+/**
+ * The card every housing block sits in: radius 20, 1px hairline, the
+ * floating-panel surface and its dropdown shadow, padding 20.
+ */
+export function HousingCard({
+  children,
+  style,
+  testID,
+  padded = true,
+}: {
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  padded?: boolean;
+}) {
+  const palette = useHousingPalette();
+  return (
+    <View
+      testID={testID}
+      style={[
+        {
+          borderRadius: HOUSING_CARD_RADIUS,
+          borderWidth: 1,
+          borderColor: palette.border,
+          backgroundColor: palette.surface,
+          boxShadow: palette.shadow,
+          ...(padded
+            ? {
+                paddingTop: HOUSING_CARD_PADDING,
+                paddingBottom: HOUSING_CARD_PADDING,
+                paddingLeft: HOUSING_CARD_PADDING,
+                paddingRight: HOUSING_CARD_PADDING,
+              }
+            : null),
+        },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+}
+
+/** A square neutral tile holding an icon (a category, a file type). */
+export function IconTile({
+  icon: Icon,
+  size = 40,
+  iconSize = 20,
+  radius = 12,
+  testID,
+}: {
+  icon: HousingIcon;
+  size?: number;
+  iconSize?: number;
+  radius?: number;
+  testID?: string;
+}) {
+  const palette = useHousingPalette();
+  return (
+    <View
+      testID={testID}
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      style={{
+        width: size,
+        height: size,
+        borderRadius: radius,
+        backgroundColor: palette.tile,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Icon width={iconSize} height={iconSize} fill={palette.text} />
+    </View>
+  );
+}
+
+/** A small caption over a value — the label half of a figure. */
+export function FigureLabel({ children }: { children: string }) {
+  const palette = useHousingPalette();
+  return (
+    <Text variant="caption-1-medium" numberOfLines={1} style={{ color: palette.textSecondary }}>
+      {children}
+    </Text>
+  );
+}
+
+/**
+ * A pill toggle at `Button`'s geometry: resting neutral-100 (dark neutral-700)
+ * with the text colour, on the brand fill with its foreground. Hover and press
+ * change colour only. A `role="button"` toggle carries BOTH `aria-pressed`
+ * (web) and `accessibilityState.selected` (native — React Native has no
+ * pressed state).
+ */
+export function HousingToggleButton({
+  label,
+  accessibilityLabel,
+  pressed,
+  onPress,
+  icon: Icon,
+  pressedIcon: PressedIcon,
+  size = 'small',
+  disabled = false,
+  testID,
+}: {
+  label: string;
+  accessibilityLabel?: string;
+  pressed: boolean;
+  onPress?: () => void;
+  icon?: HousingIcon;
+  pressedIcon?: HousingIcon;
+  size?: 'small' | 'medium';
+  disabled?: boolean;
+  testID?: string;
+}) {
+  useHousingWebCss();
+  const palette = useHousingPalette();
+  const { state: hovered, onIn: onHoverIn, onOut: onHoverOut } = useInteractionState();
+  const { state: down, onIn: onPressIn, onOut: onPressOut } = useInteractionState();
+  const g = BUTTON_GEOMETRY[size];
+  const active = (hovered || down) && !disabled;
+  const background = pressed
+    ? active
+      ? mixColor(palette.toggleOn, palette.text, 0.12)
+      : palette.toggleOn
+    : active
+      ? palette.toggleOffHover
+      : palette.toggleOff;
+  const foreground = pressed ? palette.toggleOnForeground : palette.text;
+  const ShownIcon = pressed && PressedIcon ? PressedIcon : Icon;
+
+  const style: WebCssStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'flex-start',
+    height: g.height,
+    paddingLeft: g.paddingHorizontal + 4,
+    paddingRight: g.paddingHorizontal + 6,
+    gap: 4,
+    borderRadius: BUTTON_RADIUS,
+    backgroundColor: background,
+    opacity: disabled ? 0.5 : 1,
+    '--bloom-housing-ring': palette.ring,
+  };
+
+  return (
+    <Pressable
+      {...webData({ bloomHousingFocus: '' })}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? label}
+      aria-pressed={pressed}
+      accessibilityState={{ selected: pressed, disabled }}
+      disabled={disabled}
+      onPress={onPress}
+      onHoverIn={onHoverIn}
+      onHoverOut={onHoverOut}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      testID={testID}
+      style={style}
+    >
+      {ShownIcon ? <ShownIcon width={g.iconSize - 2} height={g.iconSize - 2} fill={foreground} /> : null}
+      <Text variant={g.type} numberOfLines={1} style={{ color: foreground }}>
+        {label}
+      </Text>
+    </Pressable>
+  );
+}
+
+/** A 6px progress bar: neutral track, text-colour fill. */
+export function ProgressTrack({
+  value,
+  accessibilityLabel,
+  valueText,
+  testID,
+}: {
+  /** 0..1. */
+  value: number;
+  accessibilityLabel: string;
+  valueText?: string;
+  testID?: string;
+}) {
+  const palette = useHousingPalette();
+  const clamped = Math.min(1, Math.max(0, value));
+  const percent = Math.round(clamped * 100);
+  return (
+    <View
+      accessibilityRole="progressbar"
+      accessibilityLabel={accessibilityLabel}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuenow={percent}
+      aria-valuetext={valueText}
+      testID={testID}
+      style={{ height: 6, borderRadius: 3, overflow: 'hidden', backgroundColor: palette.track }}
+    >
+      <View
+        testID={testID ? `${testID}-fill` : undefined}
+        style={{ width: `${percent}%`, height: '100%', borderRadius: 3, backgroundColor: palette.text }}
+      />
+    </View>
+  );
+}

package/src/tenancy/shared.ts

@@ -0,0 +1,132 @@
+/**
+ * What the housing families (`tenancy`, `eviction`, `place-reviews`) share: the
+ * palette, the web focus sheet and a couple of pure helpers. Pure where it can
+ * be, so a test can walk presets and modes without rendering.
+ *
+ *   Role          light          dark                      where
+ *   surface       card           neutral-800               every card
+ *   border        neutral-200    neutral-700               card hairline, row dividers
+ *   hairline      neutral-200    neutral-700               connectors, dividers
+ *   highlight     neutral-100    neutral-700 @60% on 800   hover / press wash
+ *   tile          neutral-100    neutral-700               icon tiles, photo placeholders
+ *   track         neutral-200    neutral-700               progress track
+ *   markerRing    neutral-300    neutral-500               an upcoming timeline marker
+ *   ring          accent-500     accent-500                keyboard focus
+ *   text          text           text
+ *   textSecondary text-secondary text-secondary
+ *
+ * The surfaces and hairlines are the floating-panel recipe
+ * (`floating/menu-palette.ts`), the same family `booking` cards use, so a lease
+ * card and a trip card sit side by side without a seam.
+ */
+import { Platform } from 'react-native';
+
+import { resolveButtonRamps } from '../button/shared';
+import { resolveMenuPalette } from '../floating/menu-palette';
+import type { ImageResolver } from '../image-resolver/context';
+import type { Theme } from '../theme/types';
+
+export const IS_WEB = Platform.OS === 'web';
+
+export interface HousingPalette {
+  surface: string;
+  border: string;
+  hairline: string;
+  highlight: string;
+  tile: string;
+  track: string;
+  /** The hollow marker of an upcoming timeline event. */
+  markerRing: string;
+  ring: string;
+  text: string;
+  textSecondary: string;
+  shadow: string;
+  /** The filled toggle ("I'll be there", "Helpful" when on). */
+  toggleOn: string;
+  toggleOnForeground: string;
+  /** The resting toggle. */
+  toggleOff: string;
+  toggleOffHover: string;
+}
+
+export function resolveHousingPalette(theme: Theme): HousingPalette {
+  const menu = resolveMenuPalette(theme);
+  const { accent, neutral: n } = resolveButtonRamps(theme);
+  const dark = theme.isDark;
+  return {
+    surface: menu.surface,
+    border: menu.border,
+    hairline: dark ? n[700] : n[200],
+    highlight: menu.rowHighlight,
+    tile: dark ? n[700] : n[100],
+    track: dark ? n[700] : n[200],
+    markerRing: dark ? n[500] : n[300],
+    ring: accent[500],
+    text: theme.colors.text,
+    textSecondary: theme.colors.textSecondary,
+    shadow: menu.shadow,
+    toggleOn: theme.colors.primary,
+    toggleOnForeground: theme.colors.primaryForeground,
+    toggleOff: dark ? n[700] : n[100],
+    toggleOffHover: dark ? n[600] : n[200],
+  };
+}
+
+/** Card geometry, shared by every housing card. */
+export const HOUSING_CARD_RADIUS = 20;
+export const HOUSING_CARD_PADDING = 20;
+export const HOUSING_TILE_RADIUS = 12;
+
+export function isImageUrl(value: string): boolean {
+  return (
+    value.startsWith('http://') ||
+    value.startsWith('https://') ||
+    value.startsWith('data:') ||
+    value.startsWith('blob:') ||
+    value.startsWith('file:')
+  );
+}
+
+/** A URL passes through; an id goes to the resolver; nothing resolves to `undefined`. */
+export function resolveImageUri(
+  source: string | undefined,
+  resolver: ImageResolver | null,
+  variant: string,
+): string | undefined {
+  if (!source) return undefined;
+  return isImageUrl(source) ? source : resolver?.(source, variant) ?? undefined;
+}
+
+/** `dataSet` hooks for the adopted sheet; nothing on native. */
+export function webData(data: Record<string, string>): Record<string, unknown> {
+  return IS_WEB ? { dataSet: data } : {};
+}
+
+/** Joins the non-empty parts of an accessible name. */
+export function joinName(parts: ReadonlyArray<string | false | null | undefined>, separator = ', '): string {
+  return parts.filter((part): part is string => typeof part === 'string' && part !== '').join(separator);
+}
+
+// ---------------------------------------------------------------------------
+//  Keyboard focus on web
+//
+//  Every pressable drawn by hand here is a react-native-web `Pressable`:
+//  focusable, with the outline reset, so without a `:focus-visible` rule a
+//  keyboard user tabs through invisible stops. Inline styles carry no
+//  pseudo-classes, so the rule lives in an adopted sheet
+//  (`styles/adopt-style-sheet.ts`) hanging off a `dataSet` attribute. The ring
+//  colour is a per-instance custom property because it is a resolved token.
+// ---------------------------------------------------------------------------
+
+export const HOUSING_STYLE_ID = 'bloom-housing-web-css';
+
+export const HOUSING_WEB_CSS = `
+[data-bloom-housing-focus] {
+  outline: none;
+  cursor: pointer;
+}
+[data-bloom-housing-focus]:focus-visible {
+  outline: 2px solid var(--bloom-housing-ring, currentColor);
+  outline-offset: 2px;
+}
+`;

package/src/tenancy/types.ts

@@ -0,0 +1,276 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { AccentTone } from '../theme/accent-colors';
+
+/**
+ * An icon COMPONENT (`RiDropLine`, not `<RiDropLine />`). The part sizes and
+ * colours it, so a caller cannot pass the wrong size or a colour that ignores
+ * the theme.
+ */
+export type HousingIcon = ComponentType<{ width?: number; height?: number; fill?: string }>;
+
+/** A width-driven layout: `auto` measures the part's own width. */
+export type TenancyLayout = 'auto' | 'wide' | 'narrow';
+
+// ---------------------------------------------------------------------------
+//  TenancyTimeline
+// ---------------------------------------------------------------------------
+
+/**
+ * `complete` draws a filled marker, `current` a filled marker with a halo and
+ * the title in semibold, `upcoming` a hollow marker and secondary text.
+ */
+export type TenancyTimelineEventState = 'complete' | 'current' | 'upcoming';
+
+export interface TenancyTimelineEvent {
+  /** Stable key. Defaults to the index. */
+  id?: string;
+  title: string;
+  /** Pre-formatted ("12 Mar 2026", "Yesterday, 14:10"). */
+  date?: string;
+  /** Who did it, or where it came from ("Marta, landlord", "Source: tenants' union"). */
+  actor?: string;
+  /** A longer line under the meta line. */
+  description?: string;
+  /** Default `complete`. */
+  state?: TenancyTimelineEventState;
+  /** The marker colour for `complete` and `current`. Default `primary`. */
+  tone?: AccentTone;
+  /** Draws the icon inside a larger marker (comfortable density only). */
+  icon?: HousingIcon;
+}
+
+export type TenancyTimelineDensity = 'comfortable' | 'compact';
+
+export interface TenancyTimelineProps {
+  events: readonly TenancyTimelineEvent[];
+  /** `comfortable` (default) 24 markers, body text; `compact` 10 dots, body-2 text. */
+  density?: TenancyTimelineDensity;
+  /** Names the list. */
+  accessibilityLabel?: string;
+  /** Appended to a `current` / `upcoming` event's accessible name. Defaults `"In progress"`, `"Not yet"`. */
+  stateLabels?: Partial<Record<Exclude<TenancyTimelineEventState, 'complete'>, string>>;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+// ---------------------------------------------------------------------------
+//  LeaseSummaryCard
+// ---------------------------------------------------------------------------
+
+export interface LeaseParty {
+  name: string;
+  /** "Landlord", "Tenant", "Co-tenant". */
+  role: string;
+  /** A URL or an `ImageResolver` id. Without it the avatar draws initials. */
+  avatar?: string;
+}
+
+/** The next payment: `upcoming` info, `due` warning, `overdue` error, `paid` success. */
+export type LeasePaymentStatus = 'upcoming' | 'due' | 'overdue' | 'paid';
+
+export interface LeaseNextPayment {
+  /** Pre-formatted ("€1,150"). Defaults to the card's `rent`. */
+  amount?: string;
+  /** Pre-formatted ("1 October"). */
+  date: string;
+  status: LeasePaymentStatus;
+  /**
+   * The badge text, relative dates included ("Due in 5 days"). The app computes
+   * it — the card never reads the clock. Defaults to the status word.
+   */
+  statusLabel?: string;
+}
+
+export interface LeaseSummaryCardProps {
+  /** The address, the card's heading. */
+  title: string;
+  /** The unit line ("3rd floor, door B · 2 bedrooms"). */
+  subtitle?: string;
+  /** The heading level announced on web. Default `3`. */
+  headingLevel?: number;
+  parties?: readonly LeaseParty[];
+  /** Pre-formatted ("1 Sep 2025"). */
+  startDate: string;
+  endDate: string;
+  /** Default `"Lease period"`. */
+  periodLabel?: string;
+  /** Pre-formatted ("8 months left"). */
+  remainingLabel?: string;
+  /** Share of the lease ELAPSED, 0..1. Draws the progress bar when set. */
+  progress?: number;
+  /** Pre-formatted ("€1,150"). */
+  rent: string;
+  /** Default `"Monthly rent"`. */
+  rentLabel?: string;
+  deposit?: string;
+  /** Default `"Deposit"`. */
+  depositLabel?: string;
+  nextPayment?: LeaseNextPayment;
+  /** Default `"Next payment"`. */
+  nextPaymentLabel?: string;
+  /** Buttons under the card body. */
+  actions?: ReactNode;
+  /** `auto` (default) puts the figures in one row from 520 wide. */
+  layout?: TenancyLayout;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+// ---------------------------------------------------------------------------
+//  RentPaymentList
+// ---------------------------------------------------------------------------
+
+/** `paid` success, `pending` warning, `overdue` error, `partial` info. */
+export type RentPaymentStatus = 'paid' | 'pending' | 'overdue' | 'partial';
+
+export interface RentPayment {
+  id: string;
+  /** Pre-formatted ("March 2026"). */
+  month: string;
+  /** Pre-formatted ("1 Mar 2026"). */
+  dueDate: string;
+  /** Pre-formatted ("€1,150", "€600 of €1,150"). */
+  amount: string;
+  /** "Bank transfer", "Card ending 4417". */
+  method?: string;
+  status: RentPaymentStatus;
+  /** Overrides the status word ("Paid 2 days late"). */
+  statusLabel?: string;
+  /** Draws the receipt download button. */
+  onDownloadReceipt?: () => void;
+}
+
+export interface RentPaymentListProps {
+  payments: readonly RentPayment[];
+  /** A heading over the summary. */
+  title?: string;
+  /** Pre-formatted total ("€9,200"). */
+  paidThisYear?: string;
+  /** Default `"Paid this year"`. */
+  paidThisYearLabel?: string;
+  /** Pre-formatted ("€1,150"). */
+  outstanding?: string;
+  /** Default `"Outstanding"`. */
+  outstandingLabel?: string;
+  /** `error` paints the outstanding figure in the error text colour. Default `default`. */
+  outstandingTone?: 'default' | 'error';
+  /** Overrides the default status words. */
+  statusLabels?: Partial<Record<RentPaymentStatus, string>>;
+  /** The receipt button's accessible name. Default `` (p) => `Download receipt for ${p.month}` ``. */
+  receiptLabel?: (payment: RentPayment) => string;
+  /** The wide layout's column headings. */
+  columnLabels?: Partial<Record<'month' | 'dueDate' | 'method' | 'amount' | 'status', string>>;
+  /** Default `(date) => \`Due ${date}\``, the narrow layout's meta line. */
+  formatDueDate?: (dueDate: string) => string;
+  /** Drawn when `payments` is empty. Default `"No payments yet"`. */
+  emptyLabel?: string;
+  /** `auto` (default) draws columns from 640 wide. */
+  layout?: TenancyLayout;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+// ---------------------------------------------------------------------------
+//  MaintenanceRequestCard
+// ---------------------------------------------------------------------------
+
+export type MaintenanceCategory = 'plumbing' | 'electrical' | 'appliances' | 'heating' | 'other';
+/** `low` neutral, `medium` info, `high` warning, `urgent` error. */
+export type MaintenancePriority = 'low' | 'medium' | 'high' | 'urgent';
+/** The request's progress, in order. */
+export type MaintenanceStage = 'reported' | 'acknowledged' | 'scheduled' | 'resolved';
+
+export interface MaintenanceStageEntry {
+  /** Pre-formatted ("12 Mar", "Thu 14 Mar, 9:00–11:00"). */
+  date?: string;
+  /** "You", "Marta (landlord)", "Fontanería Ruiz". */
+  actor?: string;
+}
+
+export interface MaintenancePhoto {
+  /** A URL or an `ImageResolver` id. */
+  source: string;
+  alt?: string;
+}
+
+export interface MaintenanceRequestCardProps {
+  title: string;
+  category: MaintenanceCategory;
+  /** Overrides the category word ("Plumbing"). */
+  categoryLabel?: string;
+  /** A reference shown beside the category ("#1042"). */
+  reference?: string;
+  description?: string;
+  photos?: readonly MaintenancePhoto[];
+  /** Makes each photo a button. */
+  onPressPhoto?: (index: number) => void;
+  priority?: MaintenancePriority;
+  /** Overrides the priority chip text ("Urgent"). */
+  priorityLabel?: string;
+  /** The last stage REACHED. */
+  stage: MaintenanceStage;
+  /** Date and actor per reached (or planned) stage. */
+  stages?: Partial<Record<MaintenanceStage, MaintenanceStageEntry>>;
+  /** Overrides the stage words. */
+  stageLabels?: Partial<Record<MaintenanceStage, string>>;
+  /** Draws the timeline. Default `true`. */
+  showTimeline?: boolean;
+  commentCount?: number;
+  /** Default `(n) => n === 1 ? '1 comment' : \`${n} comments\``. */
+  commentsLabel?: (count: number) => string;
+  /** Makes the comment count a button. */
+  onPressComments?: () => void;
+  actions?: ReactNode;
+  /** Rendition forwarded to the `ImageResolver`. Default `"thumb"`. */
+  photoVariant?: string;
+  /** A photo's accessible name. Default `"<alt>, photo 1 of 3"`. */
+  photoLabel?: (photo: MaintenancePhoto, position: number, total: number) => string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+// ---------------------------------------------------------------------------
+//  DocumentList
+// ---------------------------------------------------------------------------
+
+export type TenancyDocumentType = 'pdf' | 'image' | 'document' | 'other';
+/** `signed` success, `pending` warning, `expired` error. */
+export type TenancyDocumentStatus = 'signed' | 'pending' | 'expired';
+
+export interface TenancyDocument {
+  id: string;
+  name: string;
+  /** Picks the file icon. Default `other`. */
+  type?: TenancyDocumentType;
+  /** Pre-formatted ("240 KB"). */
+  size?: string;
+  /** Pre-formatted ("Signed 2 Sep 2025"). */
+  date?: string;
+  status?: TenancyDocumentStatus;
+  /** Overrides the status word ("Awaiting landlord"). */
+  statusLabel?: string;
+  onView?: () => void;
+  onDownload?: () => void;
+  /** Draws the Sign button — typically only while `pending`. */
+  onSign?: () => void;
+}
+
+export interface DocumentListProps {
+  documents: readonly TenancyDocument[];
+  /** Overrides the default status words. */
+  statusLabels?: Partial<Record<TenancyDocumentStatus, string>>;
+  /** Default `"Sign"`. */
+  signLabel?: string;
+  /** Default `(d) => \`View ${d.name}\``. */
+  viewLabel?: (document: TenancyDocument) => string;
+  /** Default `(d) => \`Download ${d.name}\``. */
+  downloadLabel?: (document: TenancyDocument) => string;
+  /** Drawn when `documents` is empty. Default `"No documents"`. */
+  emptyLabel?: string;
+  /** `auto` (default) puts the status beside the name from 560 wide. */
+  layout?: TenancyLayout;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/track-list/EpisodeList.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { EpisodeRow } from './EpisodeRow';
+import type { EpisodeListProps } from './types';
+
+/**
+ * A `role="list"` of `EpisodeRow`s with hairlines between them. The row of
+ * `currentEpisodeId` is drawn as current (and playing with `isPlaying`).
+ */
+export function EpisodeList({
+  episodes,
+  currentEpisodeId,
+  isPlaying = false,
+  accessibilityLabel = 'Episodes',
+  style,
+  testID,
+  ...rowProps
+}: EpisodeListProps) {
+  return (
+    <View role="list" accessibilityLabel={accessibilityLabel} style={style} testID={testID}>
+      {episodes.map((episode, index) => (
+        <View key={episode.id} role="listitem">
+          <EpisodeRow
+            {...rowProps}
+            episode={episode}
+            index={index}
+            current={currentEpisodeId === episode.id}
+            playing={currentEpisodeId === episode.id && isPlaying}
+            divider={index < episodes.length - 1}
+            testID={testID ? `${testID}-row-${index}` : undefined}
+          />
+        </View>
+      ))}
+    </View>
+  );
+}