@oxy.so/bloom 4.0.0 → 4.1.0

package/src/navigation-banner/shared.ts

@@ -0,0 +1,158 @@
+/**
+ * What the guidance surfaces paint, and the sentences they announce. Pure, so
+ * a gate can walk every preset x mode and every state without rendering.
+ */
+import { DIRECTIONS_MANEUVER_LABELS } from '../directions/constants';
+import type { DirectionsManeuver } from '../directions/types';
+import {
+  hairlineOn,
+  resolveSurfaceLevel,
+  surfaceTextOn,
+  type SurfaceTextPaint,
+} from '../styles/surface-levels';
+import type { Theme } from '../theme/types';
+import { NAVIGATION_STATE_LABELS } from './constants';
+import type {
+  ArrivalBarLabels,
+  LaneGuidanceLabels,
+  NavigationBannerLabels,
+  NavigationBannerState,
+  NavigationLane,
+} from './types';
+
+export interface NavigationPaint extends SurfaceTextPaint {
+  /** The island's own fill — what every rung here is measured against. */
+  surface: string;
+  /** The rule between the maneuver row and whatever sits under it. */
+  border: string;
+}
+
+/**
+ * Read off the island, not off the page.
+ *
+ * `GlassIsland` paints rung 1 of the surface ladder at the chrome alpha, so
+ * rung 1 is the fill the banner's own text has to be legible on — and it is the
+ * fill whether the map underneath is a night satellite tile or a pale street
+ * map, which is the whole reason the guidance sits on an island instead of
+ * directly on the tiles.
+ */
+export function resolveNavigationPaint(theme: Theme): NavigationPaint {
+  const level = resolveSurfaceLevel(theme, 1);
+  return {
+    surface: level.background,
+    border: hairlineOn(theme, level.background),
+    ...surfaceTextOn(theme, level.background),
+  };
+}
+
+/** The maneuver's word, as drawn or announced. */
+export function maneuverWordFor(
+  maneuver: DirectionsManeuver,
+  labels: NavigationBannerLabels | undefined,
+): string {
+  return labels?.maneuver?.[maneuver] ?? DIRECTIONS_MANEUVER_LABELS[maneuver];
+}
+
+/**
+ * The banner in one utterance — "In 400 m, turn right, Carrer del Roure, then
+ * turn left".
+ *
+ * The DISTANCE comes first because that is the order a driver needs it in, and
+ * the maneuver word is spelled out because the glyph is the only thing on
+ * screen that says which way to turn and a glyph says nothing aloud — the same
+ * hole `directions`' own `describeStep` fills, and the same fix.
+ *
+ * In the two exceptional states the state's own headline replaces the maneuver
+ * entirely: a reader told to turn right while the car is off the route has been
+ * told the one thing that is no longer true.
+ */
+export function describeNavigationBanner(options: {
+  maneuver: DirectionsManeuver;
+  distance?: string;
+  instruction: string;
+  then?: string;
+  thenManeuver?: DirectionsManeuver;
+  state?: NavigationBannerState;
+  labels?: NavigationBannerLabels;
+}): string {
+  const { labels } = options;
+  const state = options.state ?? 'guiding';
+  if (state !== 'guiding') {
+    const headline =
+      (state === 'off-route' ? labels?.offRoute : labels?.rerouting) ??
+      NAVIGATION_STATE_LABELS[state];
+    return [headline, options.instruction].filter(Boolean).join(', ');
+  }
+  const thenWord = labels?.then ?? 'then';
+  const thenPart =
+    options.thenManeuver !== undefined || options.then
+      ? [
+          thenWord,
+          options.thenManeuver !== undefined
+            ? // Lowercased, because it lands MID-SENTENCE after "then" — the
+              // maneuver table's words are written to start a sentence.
+              maneuverWordFor(options.thenManeuver, labels).toLowerCase()
+            : undefined,
+          options.then,
+        ]
+          .filter(Boolean)
+          .join(' ')
+      : undefined;
+  return [
+    options.distance,
+    maneuverWordFor(options.maneuver, labels),
+    options.instruction,
+    thenPart,
+  ]
+    .filter((part): part is string => typeof part === 'string' && part !== '')
+    .join(', ');
+}
+
+/**
+ * The lanes in one utterance — "Lane guidance, 4 lanes, use lane 3 and lane 4".
+ *
+ * Lanes are numbered from the LEFT, one-based, because that is how a driver
+ * counts them through the windscreen. A row with nothing allowed still
+ * announces how many there are: "four lanes" is information, silence is not.
+ */
+export function describeLanes(
+  lanes: readonly NavigationLane[],
+  labels: LaneGuidanceLabels | undefined,
+): string {
+  const head = labels?.lanes ?? 'Lane guidance';
+  const laneWord = labels?.lane ?? 'lane';
+  const useWord = labels?.use ?? 'use';
+  const count = `${lanes.length} ${lanes.length === 1 ? laneWord : `${laneWord}s`}`;
+  const allowed = lanes
+    .map((lane, index) => (lane.allowed ? `${laneWord} ${index + 1}` : null))
+    .filter((part): part is string => part !== null);
+  if (allowed.length === 0) return `${head}, ${count}`;
+  return `${head}, ${count}, ${useWord} ${allowed.join(' and ')}`;
+}
+
+/** "Speed limit 50 km/h, over the limit". */
+export function describeSpeedLimit(options: {
+  limit: string | number;
+  unit?: string;
+  exceeded?: boolean;
+  exceededLabel?: string;
+}): string {
+  const base = ['Speed limit', String(options.limit), options.unit].filter(Boolean).join(' ');
+  if (!options.exceeded) return base;
+  return `${base}, ${options.exceededLabel ?? 'over the limit'}`;
+}
+
+/** "Arrival 18:42, Left 24 min, Distance 8.2 km" — three readings, one utterance. */
+export function describeArrival(options: {
+  arrival: string;
+  remainingTime: string;
+  remainingDistance: string;
+  labels?: ArrivalBarLabels;
+}): string {
+  const { labels } = options;
+  return [
+    `${labels?.arrival ?? 'Arrival'} ${options.arrival}`,
+    `${labels?.time ?? 'Left'} ${options.remainingTime}`,
+    `${labels?.distance ?? 'Distance'} ${options.remainingDistance}`,
+  ].join(', ');
+}

package/src/navigation-banner/types.ts

@@ -0,0 +1,178 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { DirectionsManeuver } from '../directions/types';
+import type { AccentTone } from '../theme/accent-colors';
+
+/**
+ * Where the guidance is.
+ *
+ * `guiding` is the ordinary case — the next maneuver, and how far to it.
+ * `off-route` is the driver having left the line; the banner says SO rather
+ * than continuing to point at a turn that is now behind them. `rerouting` is
+ * the moment after, while a new line is being found: still not a maneuver, and
+ * still not silence.
+ *
+ * The two exceptional states are not a different component because they occupy
+ * the same strip, at the same moment, in the same place on the screen — a
+ * second surface appearing where the first was is a jump, and the reader has to
+ * re-find the thing they were reading.
+ */
+export type NavigationBannerState = 'guiding' | 'off-route' | 'rerouting';
+
+/** Every word `NavigationBanner` speaks, in one prop. */
+export interface NavigationBannerLabels {
+  /** The headline in the `off-route` state. Default `"Off route"`. */
+  offRoute?: string;
+  /** The headline in the `rerouting` state. Default `"Finding a new route"`. */
+  rerouting?: string;
+  /** Precedes the following maneuver. Default `"then"`. */
+  then?: string;
+  /** Replaces the English maneuver words used in the announcement. */
+  maneuver?: Partial<Record<DirectionsManeuver, string>>;
+}
+
+export interface NavigationBannerProps {
+  /**
+   * What to do next. The SAME vocabulary `directions` uses, and the same glyph
+   * map (`DIRECTIONS_MANEUVER_ICON`) — a banner drawing a second set of arrows
+   * from the step list beside it is two answers to one question.
+   */
+  maneuver: DirectionsManeuver;
+  /**
+   * How far to it, pre-formatted and short ("400 m", "1.2 km"). Drawn as the
+   * FIGURE, in tabular numerals so a counting-down reading does not jitter the
+   * street name under it.
+   */
+  distance?: string;
+  /** What to do it onto — "Carrer del Roure". The line a driver reads. */
+  instruction: string;
+  /** The maneuver after this one; without it no second line is drawn. */
+  thenManeuver?: DirectionsManeuver;
+  /** The words beside it — "Carrer de l'Om". Defaults to the maneuver's own word. */
+  then?: string;
+  /** Default `guiding`. */
+  state?: NavigationBannerState;
+  /**
+   * Anything that belongs UNDER the maneuver row inside the same pane — a
+   * `LaneGuidance`, a `SpeedLimitPill`. Separated by a hairline; nothing is
+   * drawn when it is empty.
+   */
+  children?: ReactNode;
+  labels?: NavigationBannerLabels;
+  /**
+   * The banner's announced name. Defaults to the sentence
+   * {@link describeNavigationBanner} builds — the glyph says the maneuver on
+   * screen and says nothing aloud.
+   */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  /** Parts get `<testID>-glyph`, `-distance`, `-instruction`, `-then`, `-extras`. */
+  testID?: string;
+}
+
+/**
+ * The arrows one lane offers. A subset of the maneuver vocabulary rather than a
+ * second one: a lane arrow IS a maneuver drawn small, and the four members that
+ * make no sense painted on tarmac (`depart`, `arrive`, `board`, …) are the ones
+ * left out.
+ */
+export type LaneDirection = Extract<
+  DirectionsManeuver,
+  | 'straight'
+  | 'slight-left'
+  | 'left'
+  | 'sharp-left'
+  | 'slight-right'
+  | 'right'
+  | 'sharp-right'
+  | 'uturn'
+>;
+
+/** One lane across the carriageway, left to right as the driver sees them. */
+export interface NavigationLane {
+  /** Stable key. Defaults to the index. */
+  id?: string;
+  /** Every arrow painted in this lane, in the order they are painted. */
+  directions: readonly LaneDirection[];
+  /** Whether this lane takes you where you are going. Default `false`. */
+  allowed?: boolean;
+  /**
+   * Which of {@link directions} to take from an allowed lane, drawn at full
+   * strength while the rest of that lane's arrows stay quiet. Ignored on a lane
+   * that is not allowed — every arrow in it is quiet.
+   */
+  preferred?: LaneDirection;
+}
+
+export interface LaneGuidanceLabels {
+  /** Names the row. Default `"Lane guidance"`. */
+  lanes?: string;
+  /** The word before a lane number in the announcement. Default `"lane"`. */
+  lane?: string;
+  /** Precedes the allowed lanes. Default `"use"`. */
+  use?: string;
+}
+
+export interface LaneGuidanceProps {
+  lanes: readonly NavigationLane[];
+  labels?: LaneGuidanceLabels;
+  /** Defaults to the sentence {@link describeLanes} builds. */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  /** Parts get `<testID>-lane-<n>`. */
+  testID?: string;
+}
+
+export interface SpeedLimitPillProps {
+  /** The number as drawn, pre-formatted ("50", "120"). Never converted here. */
+  limit: string | number;
+  /** Drawn under the sign ("km/h", "mph"). Announced with the figure. */
+  unit?: string;
+  /**
+   * Whether the vehicle is over it. The sign fills with its tone instead of
+   * ringing it — a sign that only got brighter is a sign a driver reads as the
+   * same sign.
+   */
+  exceeded?: boolean;
+  /** The ring's tone. Default `error`. */
+  tone?: AccentTone;
+  /** Defaults to `"Speed limit <limit> <unit>"`, plus the over-the-limit word. */
+  accessibilityLabel?: string;
+  /** Replaces the English over-the-limit word. Default `"over the limit"`. */
+  exceededLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  /** Parts get `<testID>-sign`, `-unit`. */
+  testID?: string;
+}
+
+/** Every word `ArrivalBar` speaks. */
+export interface ArrivalBarLabels {
+  /** Over the arrival time. Default `"Arrival"`. */
+  arrival?: string;
+  /** Over the remaining time. Default `"Left"`. */
+  time?: string;
+  /** Over the remaining distance. Default `"Distance"`. */
+  distance?: string;
+  /** The ending action. Default `"End"`. */
+  end?: string;
+}
+
+export interface ArrivalBarProps {
+  /** When you get there, pre-formatted ("18:42"). */
+  arrival: string;
+  /** How long is left ("24 min"). */
+  remainingTime: string;
+  /** How far is left ("8.2 km"). */
+  remainingDistance: string;
+  /** Draws the ending action. Without it (and without `action`) none is drawn. */
+  onEnd?: () => void;
+  /** An arbitrary trailing control, replacing the ending action. */
+  action?: ReactNode;
+  labels?: ArrivalBarLabels;
+  /** Names the strip. Defaults to the three readings in a sentence. */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  /** Parts get `<testID>-arrival`, `-time`, `-distance`, `-end`. */
+  testID?: string;
+}

package/src/order-confirmation/OrderConfirmation.tsx

@@ -0,0 +1,192 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { AddressRow } from '../address';
+import { Chip } from '../chip';
+import { EmptyState } from '../empty-state';
+import { IconCircle } from '../icon-circle';
+import { RiCheckLine } from '../icons/remix/RiCheckLine';
+import { FactList } from '../listing-actions/parts';
+import { OrderStatusBar } from '../order-status';
+import { surfaceTextOn, useSurfaceFill } from '../styles/surface-levels';
+import { resolveAccentColors } from '../theme/accent-colors';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import {
+  ORDER_CONFIRMATION_GAP,
+  ORDER_CONFIRMATION_ITEMS_LABEL,
+  ORDER_CONFIRMATION_MARK,
+  ORDER_CONFIRMATION_REFERENCE_LABEL,
+  ORDER_CONFIRMATION_TITLE,
+} from './constants';
+import type { OrderConfirmationProps } from './types';
+
+/**
+ * A row nested inside this surface takes its own chrome off: `Item`'s
+ * `paddingLeft`/`paddingRight`, in the LONGHANDS it writes, so the reset is
+ * honoured by react-native-web's atomic sheet as well as by Yoga.
+ */
+const FLUSH_ROW = { paddingLeft: 0, paddingRight: 0 } as const;
+
+/**
+ * It is placed: what happened, which order it was, where it is going, what it
+ * cost, and the two things you do next.
+ *
+ *   mark      a check on a success-tinted disc, 56. STATIC: `AnimatedCheck`
+ *             draws itself on only when a caller kicks it through its ref, and
+ *             a mark that is invisible until someone calls a method — or under
+ *             reduce-motion — is not a mark. An app that wants the draw-on
+ *             passes `<AnimatedCheck>` (and its `play()`) as `mark`.
+ *   title     the "done" register — `EmptyState`'s own heading and line, which
+ *             is the same block `auth-card` and every finished flow draw
+ *   reference the order number as an outlined `Chip`, under its caption; it is
+ *             a chip because it is the one string a reader will read back to
+ *             someone on the phone, and a chip is the library's token
+ *   status    `order-status`'s `OrderStatusBar` — the ONE tracking strip in the
+ *             library, drawn here rather than copied
+ *   address   `address`'s `AddressRow`, flush with the block's edges
+ *   facts     the label/value box Bloom's action cards already draw
+ *   items     a slot: an order line is a dish, a parcel or a seat, and each has
+ *             a row family of its own
+ *   actions   track it, get help
+ *
+ * ## It IS an `EmptyState`
+ *
+ * Not "looks like one": a mark, a heading, a line of explanation, a block of
+ * content and up to two actions is exactly that family's shape, and a "done"
+ * screen is the same object as a "nothing here" screen with a different reason
+ * for existing. Building it a second time is how two centred columns with
+ * different paddings ship in one library.
+ *
+ * ## It computes nothing
+ *
+ * Every amount, every time and every reading is a string the app formatted.
+ */
+function OrderConfirmationComponent({
+  title = ORDER_CONFIRMATION_TITLE,
+  description,
+  mark,
+  markSize = ORDER_CONFIRMATION_MARK,
+  reference,
+  referenceLabel = ORDER_CONFIRMATION_REFERENCE_LABEL,
+  status,
+  address,
+  facts,
+  items,
+  itemsLabel = ORDER_CONFIRMATION_ITEMS_LABEL,
+  action,
+  secondaryAction,
+  footer,
+  variant = 'comfortable',
+  accessibilityLabel,
+  style,
+  testID,
+}: OrderConfirmationProps) {
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  const paint = useMemo(() => surfaceTextOn(theme, surface), [theme, surface]);
+  const success = useMemo(() => resolveAccentColors(theme.colors, 'success', 'subtle'), [theme]);
+  const id = (part: string) => (testID ? `${testID}-${part}` : undefined);
+
+  const keyFacts = useMemo(
+    () => (facts ?? []).map((fact) => ({ key: fact.id ?? fact.label, label: fact.label, value: fact.value })),
+    [facts],
+  );
+
+  const caption = (text: string, part: string) => (
+    <Text
+      variant="caption-2-bold"
+      testID={id(part)}
+      style={{ color: paint.textSecondary, textTransform: 'uppercase' }}
+    >
+      {text}
+    </Text>
+  );
+
+  const hasBody =
+    reference != null || status != null || address != null || keyFacts.length > 0 || items != null;
+
+  return (
+    <EmptyState
+      variant={variant}
+      // The mark is read for PRESENCE: `mark={null}` draws none, which is what
+      // a surface that already carries a brand header wants.
+      illustration={
+        mark !== undefined ? (
+          mark
+        ) : (
+          // The disc and the glyph are a resolved PAIR (`resolveAccentColors`),
+          // never one token with alpha appended — `IconCircle`'s own primary
+          // pair overridden together, which is the one way its docs allow.
+          <IconCircle
+            icon={RiCheckLine}
+            size="xl"
+            style={{ width: markSize, height: markSize, backgroundColor: success.background }}
+            iconStyle={{ color: success.foreground }}
+          />
+        )
+      }
+      title={title}
+      description={description}
+      action={action}
+      secondaryAction={secondaryAction}
+      footer={footer}
+      accessibilityLabel={
+        accessibilityLabel ??
+        [title, reference ? `${referenceLabel} ${reference}` : undefined, description]
+          .filter(Boolean)
+          .join('. ')
+      }
+      style={style}
+      testID={testID}
+    >
+      {hasBody ? (
+        <View style={{ gap: ORDER_CONFIRMATION_GAP }}>
+          {reference != null ? (
+            <View style={{ alignItems: 'center', gap: 6 }}>
+              {caption(referenceLabel, 'reference-label')}
+              <Chip
+                variant="outlined"
+                size="large"
+                // `Chip` pins itself to `alignSelf: 'flex-start'`, so a centred
+                // parent does not centre it — it has to say so itself.
+                style={{ alignSelf: 'center' }}
+                accessibilityLabel={`${referenceLabel} ${reference}`}
+                testID={id('reference')}
+              >
+                {reference}
+              </Chip>
+            </View>
+          ) : null}
+
+          {status ? <OrderStatusBar {...status} testID={status.testID ?? id('status')} /> : null}
+
+          {address ? (
+            <AddressRow
+              title={address.title}
+              subtitle={address.subtitle}
+              kind={address.kind}
+              icon={address.icon}
+              badge={address.badge}
+              meta={address.meta}
+              style={FLUSH_ROW}
+              testID={address.testID ?? id('address')}
+            />
+          ) : null}
+
+          {keyFacts.length > 0 ? <FactList facts={keyFacts} testID={id('facts')} /> : null}
+
+          {items != null ? (
+            <View style={{ gap: 8 }}>
+              {caption(itemsLabel, 'items-label')}
+              <View testID={id('items')}>{items}</View>
+            </View>
+          ) : null}
+        </View>
+      ) : null}
+    </EmptyState>
+  );
+}
+
+export const OrderConfirmation = memo(OrderConfirmationComponent);
+OrderConfirmation.displayName = 'OrderConfirmation';

package/src/order-confirmation/constants.ts

@@ -0,0 +1,15 @@
+/** The words the confirmation says when the app says nothing. */
+export const ORDER_CONFIRMATION_TITLE = 'Your order is placed';
+export const ORDER_CONFIRMATION_REFERENCE_LABEL = 'Order number';
+export const ORDER_CONFIRMATION_ITEMS_LABEL = 'What you ordered';
+
+/**
+ * The drawn-on check. 56 is the size at which the 4px stroke of
+ * `AnimatedCheck`'s 52-unit canvas reads as a mark rather than as an icon —
+ * below ~40 it looks like a status glyph, which is the opposite of what a
+ * finished flow is saying.
+ */
+export const ORDER_CONFIRMATION_MARK = 56;
+
+/** Between the blocks of the receipt. */
+export const ORDER_CONFIRMATION_GAP = 16;

package/src/order-confirmation/index.ts

@@ -0,0 +1,12 @@
+export { OrderConfirmation } from './OrderConfirmation';
+export {
+  ORDER_CONFIRMATION_ITEMS_LABEL,
+  ORDER_CONFIRMATION_MARK,
+  ORDER_CONFIRMATION_REFERENCE_LABEL,
+  ORDER_CONFIRMATION_TITLE,
+} from './constants';
+export type {
+  OrderConfirmationAddress,
+  OrderConfirmationFact,
+  OrderConfirmationProps,
+} from './types';

package/src/order-confirmation/types.ts

@@ -0,0 +1,98 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { AddressKind } from '../address';
+import type { EmptyStateAction, EmptyStateVariant } from '../empty-state';
+import type { BloomIconComponent } from '../icons/icon-component';
+import type { OrderStatusBarProps } from '../order-status';
+
+/**
+ * One reading of the receipt: when it arrives, what was charged, who is
+ * bringing it.
+ *
+ * `value` is PRE-FORMATTED, like every string in this family — a time, an
+ * amount, a courier's name. Nothing here reads a clock or adds a number.
+ */
+export interface OrderConfirmationFact {
+  /** Stable key. Defaults to the label. */
+  id?: string;
+  /** "Arrives", "Paid with", "Courier". */
+  label: string;
+  /** "Today, 17:00 – 19:00", "•••• 4417", "Mireia". */
+  value: string;
+}
+
+/** Where it is going, drawn with `address`'s own `AddressRow`. */
+export interface OrderConfirmationAddress {
+  /** The line the place is recognised by — "Home". */
+  title: string;
+  /** The rest of it. */
+  subtitle?: string;
+  /** Chooses the glyph. Default `place`. */
+  kind?: AddressKind;
+  /** The glyph, overriding whatever `kind` would have chosen. */
+  icon?: BloomIconComponent;
+  /** A node after the title — a `Badge`. */
+  badge?: ReactNode;
+  /** A short trailing reading — "1.2 km". */
+  meta?: string;
+  testID?: string;
+}
+
+export interface OrderConfirmationProps {
+  /** Default `"Your order is placed"`. */
+  title?: string;
+  /** The line under it — "We have sent the receipt to your inbox." */
+  description?: string;
+  /**
+   * The mark above the title. Default a check on a success-tinted disc — a
+   * STATIC one, because `AnimatedCheck` draws itself on only when a caller
+   * kicks it through its ref, and a mark nobody can see until a method runs is
+   * not a mark. Pass `<AnimatedCheck>` (played by your own ref) for the
+   * draw-on, a brand mark, or `null` for none.
+   */
+  mark?: ReactNode;
+  /** The default mark's box. Default 56. */
+  markSize?: number;
+
+  /** The order's own number — "A-4821". PRE-FORMATTED, including any prefix. */
+  reference?: string;
+  /** The caption above it. Default `"Order number"`. */
+  referenceLabel?: string;
+
+  /**
+   * The tracking strip — `order-status`'s `OrderStatusBar`, passed straight
+   * through. This family draws no second one: "where it is right now" has one
+   * component in the library and this is a place that shows it.
+   */
+  status?: OrderStatusBarProps;
+
+  /** Where it goes. */
+  address?: OrderConfirmationAddress;
+
+  /** When it arrives, what was charged, and anything else worth reading back. */
+  facts?: readonly OrderConfirmationFact[];
+
+  /**
+   * What was ordered, in full — the basket's own rows, rendered by the app.
+   * A slot rather than data: a line of an order is a dish, a parcel or a seat
+   * depending on the app, and each already has a row family of its own.
+   */
+  items?: ReactNode;
+  /** The caption above `items`. Default `"What you ordered"`. */
+  itemsLabel?: string;
+
+  /** The first thing you do next — normally "Track order". */
+  action?: EmptyStateAction;
+  /** The other one — normally "Get help". */
+  secondaryAction?: EmptyStateAction;
+  /** Under the actions — a "Back to the shop" link, a note. */
+  footer?: ReactNode;
+
+  /** Default `comfortable`. `compact` is the panel rung. */
+  variant?: EmptyStateVariant;
+  /** Names the whole surface. Defaults to the title and the reference. */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}