@oxy.so/bloom 3.6.0 → 4.1.0

package/src/order-status/constants.ts

@@ -0,0 +1,100 @@
+import type { OrderStatusDensity, OrderStatusStepState } from './types';
+import type { TypeScaleVariant } from '../typography/scale';
+
+/** What a screen reader says for each state, before the step's own label. */
+export const ORDER_STATUS_STATE_LABELS: Record<OrderStatusStepState, string> = {
+  done: 'Done',
+  current: 'In progress',
+  upcoming: 'Not yet',
+  failed: 'Failed',
+};
+
+export interface OrderStatusGeometry {
+  /** The marker column's width (vertical) / the marker's own box (horizontal). */
+  column: number;
+  /** A plain marker's diameter. */
+  dot: number;
+  /** How much wider a `current` marker is, for its halo. */
+  halo: number;
+  /** The connector's thickness. */
+  line: number;
+  /** The text line the marker is centred against. */
+  lead: number;
+  /** Vertical: space between one step and the next. Horizontal: rail to label. */
+  gap: number;
+  /** The glyph inside a marker that has one. `0` means the density draws none. */
+  glyph: number;
+  label: TypeScaleVariant;
+  labelStrong: TypeScaleVariant;
+  meta: TypeScaleVariant;
+}
+
+/**
+ * The two rungs, per orientation. Written out rather than derived: a horizontal
+ * rail's label sits UNDER a marker and has a column's width to fit in, so it is
+ * a step smaller than the vertical label at the same density, and a formula
+ * that produced that would be a formula fitted to four numbers.
+ */
+export const ORDER_STATUS_GEOMETRY: Record<
+  'vertical' | 'horizontal',
+  Record<OrderStatusDensity, OrderStatusGeometry>
+> = {
+  vertical: {
+    comfortable: {
+      column: 24,
+      dot: 12,
+      halo: 6,
+      line: 2,
+      lead: 20,
+      gap: 20,
+      glyph: 14,
+      label: 'body-medium',
+      labelStrong: 'body-semibold',
+      meta: 'body-2-regular',
+    },
+    compact: {
+      column: 16,
+      dot: 8,
+      halo: 4,
+      line: 2,
+      lead: 18,
+      gap: 12,
+      glyph: 0,
+      label: 'body-2-medium',
+      labelStrong: 'body-2-semibold',
+      meta: 'caption-1-regular',
+    },
+  },
+  horizontal: {
+    comfortable: {
+      column: 24,
+      dot: 12,
+      halo: 6,
+      line: 2,
+      lead: 16,
+      gap: 8,
+      glyph: 14,
+      label: 'caption-1-medium',
+      labelStrong: 'caption-1-semibold',
+      meta: 'caption-2-regular',
+    },
+    compact: {
+      column: 16,
+      dot: 8,
+      halo: 4,
+      line: 2,
+      lead: 15,
+      gap: 6,
+      glyph: 0,
+      label: 'caption-2-medium',
+      labelStrong: 'caption-2-semibold',
+      meta: 'caption-2-regular',
+    },
+  },
+};
+
+/** The leading tile `OrderStatusBar` draws a glyph in. */
+export const ORDER_STATUS_BAR_TILE = 40;
+export const ORDER_STATUS_BAR_GLYPH = 20;
+export const ORDER_STATUS_BAR_PADDING = 14;
+export const ORDER_STATUS_BAR_METER_HEIGHT = 6;

package/src/order-status/index.ts

@@ -0,0 +1,16 @@
+export { OrderStatusBar } from './OrderStatusBar';
+export { OrderStatusTimeline } from './OrderStatusTimeline';
+export { ORDER_STATUS_GEOMETRY, ORDER_STATUS_STATE_LABELS } from './constants';
+export type { OrderStatusGeometry } from './constants';
+export { resolveOrderStatusPaint } from './shared';
+export type { OrderStatusPaint } from './shared';
+export type {
+  OrderStatusBarProps,
+  OrderStatusBarVariant,
+  OrderStatusDensity,
+  OrderStatusOrientation,
+  OrderStatusProgress,
+  OrderStatusStep,
+  OrderStatusStepState,
+  OrderStatusTimelineProps,
+} from './types';

package/src/order-status/shared.ts

@@ -0,0 +1,34 @@
+/**
+ * What both `order-status` components need to paint themselves, read RELATIVE
+ * to the surface they were dropped on (`styles/surface-levels.ts`) rather than
+ * from a ramp stop — a status strip is put inside a card as often as on a page,
+ * and a connector picked by eye disappears on one of the two.
+ *
+ * Pure, so `OrderStatus.test.tsx` can walk presets and modes without rendering.
+ */
+import { Platform } from 'react-native';
+
+import { hairlineOn, surfaceTextOn, type SurfaceTextPaint } from '../styles/surface-levels';
+import type { Theme } from '../theme/types';
+
+export const IS_WEB = Platform.OS === 'web';
+
+export interface OrderStatusPaint extends SurfaceTextPaint {
+  /** The connector between two steps that have not been travelled yet. */
+  connector: string;
+  /**
+   * The ring of a marker that has not happened. `textGraphical` is the rung the
+   * ladder sizes for exactly this — a line or a glyph rather than text — so it
+   * clears 3:1 on whatever the component is sitting on.
+   */
+  upcomingRing: string;
+}
+
+export function resolveOrderStatusPaint(theme: Theme, surface: string): OrderStatusPaint {
+  const text = surfaceTextOn(theme, surface);
+  return {
+    ...text,
+    connector: hairlineOn(theme, surface),
+    upcomingRing: text.textGraphical,
+  };
+}

package/src/order-status/types.ts

@@ -0,0 +1,123 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { BloomIconComponent } from '../icons/icon-component';
+import type { AccentTone } from '../theme/accent-colors';
+
+// ---------------------------------------------------------------------------
+//  OrderStatusTimeline
+// ---------------------------------------------------------------------------
+
+/**
+ * Where one step of a pipeline is.
+ *
+ * `done` is behind us, `current` is where the thing is right now, `upcoming`
+ * has not happened, `failed` is the step that stopped the pipeline. A pipeline
+ * has at most one `current` and at most one `failed`, and everything after
+ * either of them is `upcoming` — that is the caller's job, because only the app
+ * knows whether a failure is terminal or gets retried.
+ */
+export type OrderStatusStepState = 'done' | 'current' | 'upcoming' | 'failed';
+
+/** `comfortable` is the detail-screen rung; `compact` fits a card or a sheet. */
+export type OrderStatusDensity = 'comfortable' | 'compact';
+
+/**
+ * `vertical` stacks the steps with their notes; `horizontal` lays them on one
+ * rail for a wide header. One component, because the DATA is identical and a
+ * screen that switches at a breakpoint must not switch components.
+ */
+export type OrderStatusOrientation = 'vertical' | 'horizontal';
+
+export interface OrderStatusStep {
+  /** Stable key. Defaults to the index. */
+  id?: string;
+  /** The step's name — "Picked up", "Cooking", "Confirmed". */
+  label: string;
+  /**
+   * Pre-formatted, and computed by the app: "14:20", "Yesterday, 09:05". The
+   * component never reads a clock and never formats a date.
+   */
+  timestamp?: string;
+  /** One more line under the timestamp — "Left the depot in Sant Andreu". Vertical only. */
+  note?: string;
+  /** Default `upcoming`. */
+  state?: OrderStatusStepState;
+  /**
+   * The marker colour for `done` and `current`. Default `primary`; `failed`
+   * always paints `error` and ignores this.
+   */
+  tone?: AccentTone;
+  /**
+   * Drawn inside a larger marker. Comfortable density only — a compact marker
+   * is 8px and has no room for a glyph.
+   */
+  icon?: BloomIconComponent;
+}
+
+export interface OrderStatusTimelineProps {
+  /** The steps, in the order they happen. */
+  steps: readonly OrderStatusStep[];
+  /** Default `vertical`. */
+  orientation?: OrderStatusOrientation;
+  /** Default `comfortable`. */
+  density?: OrderStatusDensity;
+  /** Names the list as a whole. Default `"Status"`. */
+  accessibilityLabel?: string;
+  /**
+   * What a screen reader announces for each state, before the step's own label.
+   * Defaults are `"Done"`, `"In progress"`, `"Not yet"`, `"Failed"`.
+   */
+  stateLabels?: Partial<Record<OrderStatusStepState, string>>;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+// ---------------------------------------------------------------------------
+//  OrderStatusBar
+// ---------------------------------------------------------------------------
+
+/** The measurement `OrderStatusBar` draws through `Meter`. */
+export interface OrderStatusProgress {
+  /** Current value, clamped into `[0, max]`. */
+  value: number;
+  /** @default 1 */
+  max?: number;
+  /**
+   * What the bar measures. Required for the reason `Meter` states: ARIA never
+   * computes a name for a `progressbar`, and the bar draws no text.
+   */
+  accessibilityLabel: string;
+  /** `aria-valuetext` — "3 of 4 stops" rather than "75%". */
+  valueText?: string;
+}
+
+/** `surface` paints a strip of its own; `plain` draws only the content. */
+export type OrderStatusBarVariant = 'surface' | 'plain';
+
+export interface OrderStatusBarProps {
+  /** The live line — "Out for delivery", "Cooking", "Driver on the way". */
+  status: string;
+  /**
+   * The arrival reading, pre-formatted by the app: "Arrives 14:35", "12 min".
+   * Drawn at the end of the status line, in tabular figures so it does not
+   * jitter as it counts down.
+   */
+  eta?: string;
+  /** A quieter second line — "Four stops away", "Table 6". */
+  detail?: string;
+  /** How far along. Without it no bar is drawn. */
+  progress?: OrderStatusProgress;
+  /** The tone of the glyph tile and the bar. Default `primary`. */
+  tone?: AccentTone;
+  /** A glyph in the leading tile. Without it (and without `leading`) no tile is drawn. */
+  icon?: BloomIconComponent;
+  /** An arbitrary leading node — an `Avatar`, a photo. Wins over `icon`. */
+  leading?: ReactNode;
+  /** A trailing control — a `Button`, a `GlyphButton`. */
+  action?: ReactNode;
+  /** Default `surface`. */
+  variant?: OrderStatusBarVariant;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/outline-nav/OutlineNav.tsx

@@ -0,0 +1,260 @@
+import React, { useMemo } from 'react';
+import { Platform, Pressable, View } from 'react-native';
+
+import { Meter } from '../stat-bar';
+import { useInteractionState } from '../hooks/use-interaction-state';
+import { surfaceTextOn, useRingOffsetStyle, useSurfaceFill } from '../styles/surface-levels';
+import { interactiveWebCss, useInteractiveWebCss } from '../styles/interactive-web-css';
+import { webDataSet } from '../styles/web-data';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { buildOutlineTree, compactHeadings, outlineProgress, type OutlineNode } from './shared';
+import type { OutlineHeading, OutlineNavLabels, OutlineNavProps } from './types';
+
+/**
+ * The document's own table of contents.
+ *
+ *   rail         2px down the left of every row; the tone only on the current one
+ *   indent       14px per nesting level, carried by the nested LIST, not by a
+ *                per-row padding — the indent and the structure are the same fact
+ *   row height   36 (`full`) / 44 (`compact`, which is the touch one)
+ *   progress     a `Meter` above the list, 4px (`full`) / 3px (`compact`)
+ *
+ * **It is a real list.** `role="list"` with `role="listitem"` children, nested
+ * one list inside another for each level, so a screen reader announces "list,
+ * 3 items, list, 2 items" and the reader knows the shape of the document. A
+ * flat list of rows with a left padding LOOKS the same and says nothing. The
+ * tree is built from the ORDER (`shared.ts`), because real documents skip
+ * levels.
+ *
+ * **The current heading is `aria-current`, not `aria-selected`.** The reader is
+ * AT it; they have not chosen it from a set. Both spellings for the two
+ * platforms, as always.
+ *
+ * **This component does not jump.** `onSelect` emits and the app scrolls — a
+ * TOC that scrolled something itself would have to guess which scroller, and in
+ * a split view it would guess wrong with no error (`docs/composition.mdx`
+ * §Scroll ownership).
+ *
+ * **`compact` DROPS the deep levels rather than squeezing them.** Below
+ * `compactMaxLevel` an indent on a 360px screen is a few pixels nobody reads, so
+ * the honest compact form is a shorter list of full-width rows at a touch size.
+ */
+
+const IS_WEB = Platform.OS === 'web';
+
+const STYLE_ID = 'bloom-outline-nav-web-css';
+const ROW = '[data-bloom-outline-row]';
+
+const OUTLINE_NAV_CSS = interactiveWebCss({
+  selector: ROW,
+  varPrefix: 'bloom-outline',
+  reset: 'none',
+  transition: 'color 120ms ease',
+  outlineOffset: 2,
+});
+
+const DEFAULT_LABELS: Required<OutlineNavLabels> = {
+  outline: 'On this page',
+  progress: (at, of) => `Heading ${at} of ${of}`,
+};
+
+/** 14px per level, carried by the nested list so the indent IS the structure. */
+const INDENT = 14;
+/** The rail down the left of every row; only the current one is painted. */
+const RAIL = 2;
+
+interface RowPaint {
+  text: string;
+  quiet: string;
+  accent: string;
+  rail: string;
+}
+
+function OutlineRow({
+  heading,
+  active,
+  paint,
+  height,
+  onSelect,
+  testID,
+}: {
+  heading: OutlineHeading;
+  active: boolean;
+  paint: RowPaint;
+  height: number;
+  onSelect?: (heading: OutlineHeading) => void;
+  testID?: string;
+}) {
+  const { state: hovered, onIn, onOut } = useInteractionState();
+  const ringOffset = useRingOffsetStyle();
+  const rowStyle: WebCssStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    minHeight: height,
+    paddingVertical: 6,
+    paddingRight: 8,
+    borderLeftWidth: RAIL,
+    borderLeftColor: active ? paint.accent : paint.rail,
+    paddingLeft: 10,
+    '--bloom-outline-ring': paint.accent,
+  };
+  return (
+    <Pressable
+      {...webDataSet({ bloomOutlineRow: '' })}
+      role="link"
+      accessibilityLabel={heading.label}
+      // The reader is AT this heading; they did not choose it from a set.
+      aria-current={active ? ('location' as const) : undefined}
+      accessibilityState={{ selected: active }}
+      onPress={onSelect ? () => onSelect(heading) : undefined}
+      onHoverIn={onIn}
+      onHoverOut={onOut}
+      style={[rowStyle, ringOffset as WebCssStyle]}
+      testID={testID}
+    >
+      <Text
+        variant={active ? 'body-2-medium' : 'body-2-regular'}
+        numberOfLines={1}
+        style={{ color: active ? paint.accent : hovered ? paint.text : paint.quiet, flexShrink: 1 }}
+      >
+        {heading.label}
+      </Text>
+    </Pressable>
+  );
+}
+
+/**
+ * React Native's `Role` union has neither `list` nor `listitem` as DOM roles
+ * react-native-web would emit unchanged, so each travels as the spelling its own
+ * platform reads.
+ */
+const LIST_ROLE: Record<string, unknown> = IS_WEB ? { role: 'list' } : { accessibilityRole: 'list' };
+const LIST_ITEM_ROLE: Record<string, unknown> = IS_WEB ? { role: 'listitem' } : {};
+
+function OutlineList({
+  nodes,
+  depth,
+  activeId,
+  paint,
+  height,
+  onSelect,
+  testID,
+}: {
+  nodes: ReadonlyArray<OutlineNode>;
+  depth: number;
+  activeId: string | undefined;
+  paint: RowPaint;
+  height: number;
+  onSelect?: (heading: OutlineHeading) => void;
+  testID?: string;
+}) {
+  return (
+    <View {...LIST_ROLE} style={depth === 0 ? undefined : { marginLeft: INDENT }}>
+      {nodes.map((node) => (
+        <View key={node.heading.id} {...LIST_ITEM_ROLE}>
+          <OutlineRow
+            heading={node.heading}
+            active={node.heading.id === activeId}
+            paint={paint}
+            height={height}
+            onSelect={onSelect}
+            testID={testID ? `${testID}-${node.heading.id}` : undefined}
+          />
+          {node.children.length > 0 ? (
+            <OutlineList
+              nodes={node.children}
+              depth={depth + 1}
+              activeId={activeId}
+              paint={paint}
+              height={height}
+              onSelect={onSelect}
+              testID={testID}
+            />
+          ) : null}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+export function OutlineNav({
+  headings,
+  activeId,
+  onSelect,
+  variant = 'full',
+  progress,
+  hideProgress = false,
+  title,
+  compactMaxLevel = 2,
+  accessibilityLabel,
+  labels: labelsProp,
+  style,
+  testID,
+}: OutlineNavProps) {
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  useInteractiveWebCss(STYLE_ID, OUTLINE_NAV_CSS);
+  const labels = { ...DEFAULT_LABELS, ...labelsProp };
+  const compact = variant === 'compact';
+
+  const shown = useMemo(
+    () => (compact ? compactHeadings(headings, compactMaxLevel) : headings),
+    [compact, headings, compactMaxLevel],
+  );
+  const tree = useMemo(() => buildOutlineTree(shown), [shown]);
+
+  const paint = useMemo<RowPaint>(() => {
+    const text = surfaceTextOn(theme, surface);
+    return {
+      text: text.text,
+      quiet: text.textSecondary,
+      accent: theme.colors.primarySubtleForeground,
+      rail: text.textGraphical,
+    };
+  }, [theme, surface]);
+
+  const value = progress ?? outlineProgress(shown, activeId);
+  const at = Math.max(0, shown.findIndex((heading) => heading.id === activeId)) + 1;
+  const name = accessibilityLabel ?? labels.outline;
+
+  return (
+    <View
+      role="navigation"
+      accessibilityLabel={name}
+      style={style}
+      testID={testID}
+    >
+      {!compact && (title ?? labels.outline) !== undefined ? (
+        <Text
+          variant="caption-1-medium"
+          style={{ color: paint.quiet, marginBottom: 8, paddingLeft: 12 }}
+          testID={testID ? `${testID}-title` : undefined}
+        >
+          {title ?? labels.outline}
+        </Text>
+      ) : null}
+      {hideProgress ? null : (
+        <Meter
+          value={value}
+          height={compact ? 3 : 4}
+          accessibilityLabel={name}
+          valueText={labels.progress(at, shown.length)}
+          style={{ marginBottom: compact ? 8 : 10 }}
+          testID={testID ? `${testID}-progress` : undefined}
+        />
+      )}
+      <OutlineList
+        nodes={tree}
+        depth={0}
+        activeId={activeId}
+        paint={paint}
+        height={compact ? 44 : 36}
+        onSelect={onSelect}
+        testID={testID ? `${testID}-row` : undefined}
+      />
+    </View>
+  );
+}
+OutlineNav.displayName = 'OutlineNav';

package/src/outline-nav/index.ts

@@ -0,0 +1,9 @@
+export { OutlineNav } from './OutlineNav';
+export { buildOutlineTree, compactHeadings, outlineProgress } from './shared';
+export type { OutlineNode } from './shared';
+export type {
+  OutlineHeading,
+  OutlineNavLabels,
+  OutlineNavProps,
+  OutlineNavVariant,
+} from './types';

package/src/outline-nav/shared.ts

@@ -0,0 +1,67 @@
+/**
+ * Turning a flat list of headings into the tree a screen reader needs, and
+ * deciding where the reader is in it.
+ *
+ * Both are pure and both are the part a render tree cannot show you: a list
+ * that is visually indented and structurally flat looks identical to a correctly
+ * nested one, and a progress bar reading the wrong index is still a progress
+ * bar.
+ */
+import type { OutlineHeading } from './types';
+
+/** One heading with whatever sits under it. */
+export interface OutlineNode {
+  heading: OutlineHeading;
+  children: OutlineNode[];
+}
+
+/**
+ * Nest the headings by their levels.
+ *
+ * Levels SKIP in real documents (1, 3, 3 is ordinary), so a node's parent is
+ * the nearest preceding heading with a SMALLER level — not the one exactly one
+ * level up. A document that opens at level 3 and later has a level 1 gets two
+ * roots, in order, rather than a lost subtree.
+ */
+export function buildOutlineTree(headings: ReadonlyArray<OutlineHeading>): OutlineNode[] {
+  const roots: OutlineNode[] = [];
+  const stack: OutlineNode[] = [];
+  for (const heading of headings) {
+    const node: OutlineNode = { heading, children: [] };
+    while (stack.length > 0) {
+      const top = stack[stack.length - 1];
+      if (top !== undefined && top.heading.level < heading.level) break;
+      stack.pop();
+    }
+    const parent = stack[stack.length - 1];
+    if (parent === undefined) roots.push(node);
+    else parent.children.push(node);
+    stack.push(node);
+  }
+  return roots;
+}
+
+/** The headings `compact` draws: everything down to `maxLevel`, in order. */
+export function compactHeadings(
+  headings: ReadonlyArray<OutlineHeading>,
+  maxLevel: number,
+): ReadonlyArray<OutlineHeading> {
+  return headings.filter((heading) => heading.level <= maxLevel);
+}
+
+/**
+ * Where the reader is, 0 to 1, from the active heading's position.
+ *
+ * The LAST heading is 1 and the first is `1/n`, not 0: a reader who has reached
+ * the first heading has read something. An empty outline, or one with no active
+ * heading, is 0 — the honest answer, not a guess.
+ */
+export function outlineProgress(
+  headings: ReadonlyArray<OutlineHeading>,
+  activeId: string | undefined,
+): number {
+  if (headings.length === 0 || activeId === undefined) return 0;
+  const index = headings.findIndex((heading) => heading.id === activeId);
+  if (index < 0) return 0;
+  return (index + 1) / headings.length;
+}

package/src/outline-nav/types.ts

@@ -0,0 +1,66 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+/** One heading of the document, as the app already has it. */
+export interface OutlineHeading {
+  /** Stable id. What `onSelect` hands back and what `activeId` names. */
+  id: string;
+  /** The heading as written. One line, truncated. */
+  label: string;
+  /**
+   * Its rank, 1 for the top. Levels may SKIP — a document that goes 1, 3, 3 is
+   * perfectly ordinary and the nesting is built from the order, not from the
+   * arithmetic.
+   */
+  level: number;
+}
+
+/**
+ * `full` is the side column of a wide screen: a title, the progress bar and the
+ * whole tree. `compact` is what fits beside a phone's body text: no title,
+ * touch-sized rows, and the deep levels dropped rather than squeezed.
+ */
+export type OutlineNavVariant = 'full' | 'compact';
+
+/** The English words `OutlineNav` composes. */
+export interface OutlineNavLabels {
+  /** Names the navigation region AND the progress bar. Default `"On this page"`. */
+  outline?: string;
+  /** The progress bar's spoken reading, given the position and the total. Default ``(at, of) => `Heading ${at} of ${of}` ``. */
+  progress?: (at: number, of: number) => string;
+}
+
+export interface OutlineNavProps {
+  /** The headings, in document order. */
+  headings: ReadonlyArray<OutlineHeading>;
+  /** Which heading the reader is in. Marked `aria-current` and drawn with the rail. */
+  activeId?: string;
+  /**
+   * Called when a heading is chosen. **The app does the jumping** — this
+   * component has no idea where the body is, and a scroll it performed itself
+   * would find the wrong scroller in a split view.
+   */
+  onSelect?: (heading: OutlineHeading) => void;
+  /** Default `full`. */
+  variant?: OutlineNavVariant;
+  /**
+   * How far through the document the reader is, 0 to 1. Omitted, it is derived
+   * from `activeId`'s position — which is right for a jump list and wrong for a
+   * continuous scroll, so a screen that measures scroll passes its own.
+   */
+  progress?: number;
+  /** Hides the progress bar. Default `false`. */
+  hideProgress?: boolean;
+  /** The label above the list in `full`. Default the `outline` label. */
+  title?: string;
+  /**
+   * The deepest level `compact` draws. Default `2` — the levels below it are
+   * DROPPED rather than squeezed into an indent nobody can see on a phone.
+   * Ignored by `full`, which draws everything.
+   */
+  compactMaxLevel?: number;
+  /** Names the navigation region. Defaults to the `outline` label. */
+  accessibilityLabel?: string;
+  labels?: OutlineNavLabels;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}