@oxy.so/bloom 3.6.0 → 4.1.0

package/src/input-group/InputGroup.tsx

@@ -1,3 +1,5 @@
+import { normalizeBloomSize } from '../appearance/legacy';
+import { useBloomAppearance, type BloomSize } from '../appearance';
 import React, {
   Children,
   createContext,
@@ -45,10 +47,11 @@ import { useFieldMembership } from '../field/membership';
  * A `TextFieldInput` (or a `Search`) inside renders BARE through
  * `TextFieldGroupContext`: the group paints the one shell, the field draws none.
  */
-const SIZE_CONFIG: Record<NonNullable<InputGroupProps['size']>, { height: number; paddingHorizontal: number; field: TextFieldSize }> = {
-  sm: { height: TEXT_FIELD_GEOMETRY.small.height, paddingHorizontal: TEXT_FIELD_GEOMETRY.small.paddingHorizontal, field: 'small' },
-  md: { height: TEXT_FIELD_GEOMETRY.medium.height, paddingHorizontal: TEXT_FIELD_GEOMETRY.medium.paddingHorizontal, field: 'medium' },
-  lg: { height: 44, paddingHorizontal: 10, field: 'medium' },
+const SIZE_CONFIG: Record<BloomSize, { height: number; paddingHorizontal: number; field: TextFieldSize }> = {
+  xs: { ...TEXT_FIELD_GEOMETRY.xs, field: 'xs' },
+  sm: { height: TEXT_FIELD_GEOMETRY.sm.height, paddingHorizontal: TEXT_FIELD_GEOMETRY.sm.paddingHorizontal, field: 'sm' },
+  md: { height: TEXT_FIELD_GEOMETRY.md.height, paddingHorizontal: TEXT_FIELD_GEOMETRY.md.paddingHorizontal, field: 'md' },
+  lg: { ...TEXT_FIELD_GEOMETRY.lg, field: 'lg' },
 };
 
 /** `pl-1`: how close a padding-less addon sits to the shell's edge. */
@@ -57,7 +60,7 @@ const ADDON_EDGE_INSET = 4;
 const DIVIDER_GAP = 8;
 
 interface InputGroupContextValue {
-  size: 'sm' | 'md' | 'lg';
+  size: BloomSize;
   palette: TextFieldPalette;
   disabled: boolean;
 }
@@ -143,16 +146,17 @@ InputGroupAddon.displayName = 'InputGroupAddon';
  *   <InputGroupAddon>https://</InputGroupAddon>
  *   <TextFieldInput label="Domain" value={v} onChangeText={setV} />
  *   <InputGroupAddon divider>
- *     <Button size="small" variant="ghost" onPress={go}>Go</Button>
+ *     <Button size="sm" variant="ghost" onPress={go}>Go</Button>
  *   </InputGroupAddon>
  * </InputGroup>
  * ```
  */
 const InputGroupComponent = function InputGroup({
   children,
-  isInvalid: isInvalidProp = false,
+  invalid: invalidNew,
+  isInvalid,
   disabled: disabledProp = false,
-  size = 'md',
+  size: sizeProp,
   style,
   testID,
 }: InputGroupProps) {
@@ -162,9 +166,10 @@ const InputGroupComponent = function InputGroup({
   // neither the field nor the text-field group. The group publishes no name — it
   // does not know which of its children is the control the label points at, so
   // that stays the field's `nativeID` and the input's to apply.
-  const member = useFieldMembership({ disabled: disabledProp, invalid: isInvalidProp });
+  const { size } = useBloomAppearance({size: normalizeBloomSize(sizeProp)}, {size: 'md', tone: 'neutral'});
+  const member = useFieldMembership({ disabled: disabledProp, invalid: invalidNew ?? isInvalid });
   const disabled = member.disabled;
-  const isInvalid = member.invalid;
+  const invalid = member.invalid;
   const cfg = SIZE_CONFIG[size];
   const { state: focused, onIn: onFocus, onOut: onBlur } = useInteractionState();
   const { state: hovered, onIn: onHoverIn, onOut: onHoverOut } =
@@ -174,7 +179,7 @@ const InputGroupComponent = function InputGroup({
   const { backgroundColor, borderColor } = resolveShellPaint(palette, {
     hovered,
     focused,
-    invalid: isInvalid,
+    invalid: invalid,
     disabled,
   });
 
@@ -183,8 +188,8 @@ const InputGroupComponent = function InputGroup({
     [size, palette, disabled],
   );
   const fieldCtx = useMemo(
-    () => ({ size: cfg.field, isInvalid, disabled }),
-    [cfg.field, isInvalid, disabled],
+    () => ({ size: cfg.field, invalid, disabled }),
+    [cfg.field, invalid, disabled],
   );
 
   // Addons before the first non-addon child are leading; the rest trail.
@@ -221,7 +226,7 @@ const InputGroupComponent = function InputGroup({
           // react-native-web has no `disabled` prop to derive the attribute from
           // and never reads `accessibilityState`. React Native folds it back.
           aria-disabled={disabled || undefined}
-          aria-invalid={isInvalid || undefined}
+          aria-invalid={invalid || undefined}
           // Capture focus bubbling from a nested input so the whole chrome
           // reflects focus — RN-web bubbles focus/blur, native does not but a
           // nested TextInput's own focus ring is sufficient there.

package/src/input-group/types.ts

@@ -1,3 +1,4 @@
+import type { BloomSize } from '../appearance';
 import type { StyleProp, ViewStyle } from 'react-native';
 
 export interface InputGroupAddonProps {
@@ -26,6 +27,7 @@ export interface InputGroupProps {
    */
   children: React.ReactNode;
   /** Invalid state — renders the error-colored border. */
+  invalid?: boolean;
   isInvalid?: boolean;
   /** Disabled styling. */
   disabled?: boolean;
@@ -33,7 +35,7 @@ export interface InputGroupProps {
    * `sm` is the `small` input (32 tall), `md` the `medium` (36, the
    * default), `lg` extends the ramp (44).
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: BloomSize | 'small' | 'medium' | 'large' | 'default';
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }

package/src/input-otp/InputOtp.tsx

@@ -12,10 +12,6 @@ import { useTheme } from '../theme/use-theme';
 import type { Theme } from '../theme/types';
 import {
   BUTTON_SHADOW,
-  DANGER_TABLE,
-  colorRamp,
-  mixColor,
-  resolveButtonRamps,
 } from '../button/shared';
 import {
   MONO_FONT_FAMILY,
@@ -92,36 +88,18 @@ export interface InputOtpPalette {
 /** Resolve the OTP box's tokens against a Bloom theme. Pure. */
 export function resolveInputOtpPalette(theme: Theme): InputOtpPalette {
   const c = theme.colors;
-  const { accent, neutral: n } = resolveButtonRamps(theme);
-  const red = colorRamp(c.negative, DANGER_TABLE);
-
-  if (theme.isDark) {
-    return {
-      background: n[800],
-      backgroundDisabled: n[800],
-      backgroundInvalid: mixColor(c.background, red[950], 0.6),
-      border: n[700],
-      borderHover: n[500],
-      borderInvalid: red[400],
-      ring: accent[500],
-      text: c.text,
-      textDisabled: n[600],
-      textInvalid: red[400],
-      shadow: BUTTON_SHADOW.dark,
-    };
-  }
   return {
-    background: c.card,
-    backgroundDisabled: n[100],
-    backgroundInvalid: red[100],
-    border: n[200],
-    borderHover: n[300],
-    borderInvalid: red[500],
-    ring: accent[500],
+    background: c.backgroundSecondary,
+    backgroundDisabled: c.backgroundSecondary,
+    backgroundInvalid: c.errorSubtle,
+    border: c.borderLight,
+    borderHover: c.border,
+    borderInvalid: c.errorSubtleForeground,
+    ring: c.primary,
     text: c.text,
-    textDisabled: n[400],
-    textInvalid: red[600],
-    shadow: BUTTON_SHADOW.light,
+    textDisabled: c.textTertiary,
+    textInvalid: c.errorSubtleForeground,
+    shadow: BUTTON_SHADOW[theme.isDark ? 'dark' : 'light'],
   };
 }
 
@@ -181,7 +159,8 @@ export function InputOtp({
   defaultValue = '',
   onChange,
   onComplete,
-  isInvalid = false,
+  invalid: invalidProp,
+  isInvalid,
   isDisabled,
   disabled: disabledAlias,
   groupEvery,
@@ -200,7 +179,7 @@ export function InputOtp({
   const membership = useFieldMembership({
     accessibilityLabel,
     disabled: isDisabled ?? disabledAlias ?? false,
-    invalid: isInvalid,
+    invalid: invalidProp ?? isInvalid,
   });
   const disabled = membership.disabled;
   const invalid = membership.invalid;
@@ -284,7 +263,7 @@ export function InputOtp({
         const paint = resolveInputOtpBoxPaint(palette, {
           hovered: hoveredIndex === index,
           focused: focusedIndex === index,
-          invalid,
+          invalid: invalid,
           disabled,
         });
 

package/src/input-otp/types.ts

@@ -12,6 +12,7 @@ export interface InputOtpProps extends ViewStyleProp {
   /** Fires once the last box is filled. */
   onComplete?: (value: string) => void;
   /** Paint every box invalid. */
+  invalid?: boolean;
   isInvalid?: boolean;
   /** Disable every box. `disabled` is an alias. */
   isDisabled?: boolean;

package/src/job-board/JobBoard.tsx

@@ -0,0 +1,489 @@
+import React, { memo, useCallback, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { Badge } from '../badge';
+import { Button, GlyphButton } from '../button';
+import { Card } from '../card';
+import { Chip, ChipRow } from '../chip';
+import { useControllableState } from '../hooks/use-controllable-state';
+import { IconCircle } from '../icon-circle';
+import { RiEqualizerLine } from '../icons/remix/RiEqualizerLine';
+import { RiInbox2Line } from '../icons/remix/RiInbox2Line';
+import { RiRefreshLine } from '../icons/remix/RiRefreshLine';
+import * as Skeleton from '../skeleton';
+import { surfaceFillVars, useSurfaceLevel } from '../styles/surface-levels';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { VEHICLE_ICON, VEHICLE_OPTIONS } from '../vehicle-picker';
+import type { VehicleKind } from '../vehicle-picker';
+import { JobCard } from './JobCard';
+import {
+  JOB_BOARD_GEOMETRY,
+  JOB_BOARD_LABELS,
+  JOB_BOARD_SORTS,
+  JOB_DISTANCE_BANDS,
+  JOB_VEHICLE_KINDS,
+  JOB_WHEN_BANDS,
+} from './constants';
+import {
+  countActiveJobFilters,
+  filterJobOffers,
+  resolveJobPaint,
+  sortJobOffers,
+  toggleJobVehicle,
+} from './shared';
+import type { JobBoardBand, JobBoardFilter, JobBoardProps, JobBoardSort } from './types';
+
+/**
+ * The work on offer, filtered, ordered and counted.
+ *
+ *   head     the count at `body-semibold` on the left; the order as a
+ *            `radiogroup` of chips and the refresh control on the right. All
+ *            three wrap onto their own line when they do not fit.
+ *   filters  one `ChipRow` per dimension, each named and each scrolling
+ *            sideways rather than wrapping — four dimensions that wrapped would
+ *            be a screen of chips over the first job. Distance, pay and when
+ *            are `radiogroup`s of BANDS; vehicle is a `group` of TOGGLES,
+ *            because "van or box truck" is a sentence a courier needs to say.
+ *   list     the cards, 12 apart
+ *   loading  placeholder cards of the same height, announced `busy` — not a
+ *            spinner, because the answer arriving is a list
+ *   empty    a tinted glyph disc over one line of explanation. With a filter
+ *            narrowed and no caller action, the clear control is drawn there:
+ *            an empty board the reader caused must offer the undo.
+ *
+ * **THE ORDER IS THIS COMPONENT'S, NOT THE CALLER'S.** `jobs` arrives in
+ * whatever order the app has; `sortJobOffers` puts it in the chosen one and is
+ * stable, so two equally-paid jobs never swap places on a re-render.
+ *
+ * **A CLOSED JOB IS NOT FILTERED OUT.** `filterJobOffers` answers the reader's
+ * four questions and nothing else — a job that is taken or expires while the
+ * board is open keeps its place and says so on its own card. See `JobCard`.
+ *
+ * **NO CURRENCY MATHS ANYWHERE.** The pay bands compare `payValue`, a number
+ * the app supplies for comparison only, and their words are the app's too:
+ * `payBands` has no default, because a default band would have to invent a
+ * currency. Distance and time have defaults because a kilometre and a minute
+ * are not somebody's.
+ */
+
+function JobBoardComponent({
+  jobs,
+  sort: sortProp,
+  defaultSort = 'pay',
+  onSortChange,
+  sortOptions = JOB_BOARD_SORTS,
+  filtersOpen: filtersOpenProp,
+  defaultFiltersOpen = false,
+  onFiltersOpenChange,
+  filter: filterProp,
+  defaultFilter,
+  onFilterChange,
+  distanceBands = JOB_DISTANCE_BANDS,
+  payBands,
+  whenBands = JOB_WHEN_BANDS,
+  vehicleKinds = JOB_VEHICLE_KINDS,
+  showCount = true,
+  onRefresh,
+  refreshing = false,
+  loading = false,
+  loadingCount = 3,
+  onTake,
+  onPass,
+  onPressJob,
+  selectedId = null,
+  density = 'comfortable',
+  route,
+  breakdown,
+  emptyTitle = 'No jobs right now',
+  emptyDescription = 'Nothing matches what you are looking for. Widen a filter, or pull the board again in a minute.',
+  emptyAction,
+  labels: labelOverrides,
+  accessibilityLabel = 'Jobs',
+  style,
+  testID,
+}: JobBoardProps) {
+  const theme = useTheme();
+  const ambient = useSurfaceLevel(0);
+  const paint = useMemo(
+    () => resolveJobPaint(theme, ambient.background),
+    [theme, ambient.background],
+  );
+  const labels = useMemo(
+    () => ({
+      ...JOB_BOARD_LABELS,
+      ...labelOverrides,
+      sortOptions: { ...JOB_BOARD_LABELS.sortOptions, ...labelOverrides?.sortOptions },
+      filters: { ...JOB_BOARD_LABELS.filters, ...labelOverrides?.filters },
+    }),
+    [labelOverrides],
+  );
+  const [sort, setSort] = useControllableState<JobBoardSort>({
+    value: sortProp,
+    defaultValue: defaultSort,
+    onChange: onSortChange,
+  });
+  const [filter, setFilter] = useControllableState<JobBoardFilter>({
+    value: filterProp,
+    defaultValue: defaultFilter ?? {},
+    onChange: onFilterChange,
+  });
+  const [filtersOpen, setFiltersOpen] = useControllableState<boolean>({
+    value: filtersOpenProp,
+    defaultValue: defaultFiltersOpen,
+    onChange: onFiltersOpenChange,
+  });
+
+  const shown = useMemo(() => sortJobOffers(filterJobOffers(jobs, filter), sort), [jobs, filter, sort]);
+  const active = countActiveJobFilters(filter);
+  const id = (part: string) => (testID ? `${testID}-${part}` : undefined);
+
+  const setBand = useCallback(
+    (key: 'maxDistanceKm' | 'minPay' | 'startsWithinMinutes', value: number | null) => {
+      setFilter({ ...filter, [key]: value });
+    },
+    [filter, setFilter],
+  );
+  const toggleVehicle = useCallback(
+    (vehicle: VehicleKind) => {
+      setFilter({ ...filter, vehicles: toggleJobVehicle(filter.vehicles, vehicle) });
+    },
+    [filter, setFilter],
+  );
+  const clear = useCallback(() => setFilter({}), [setFilter]);
+
+  const vehicleWords = useMemo(() => {
+    const out = new Map<string, string>();
+    for (const option of VEHICLE_OPTIONS) out.set(option.value, option.label);
+    return out;
+  }, []);
+
+  /** One dimension: a named, sideways-scrolling `radiogroup` of bands. */
+  const bandRow = (
+    key: 'maxDistanceKm' | 'minPay' | 'startsWithinMinutes',
+    name: string,
+    bands: readonly JobBoardBand[] | undefined,
+  ) => {
+    // One band is not a choice: a row the reader cannot change is chrome.
+    if (bands === undefined || bands.length < 2) return null;
+    const current = filter[key] ?? null;
+    return (
+      <ChipRow
+        role="radiogroup"
+        accessibilityLabel={name}
+        fadeColor={ambient.background}
+        testID={id(`filter-${key}`)}
+      >
+        {bands.map((band) => (
+          <Chip
+            key={String(band.value)}
+            role="radio"
+            // 32 drawn, 44 under a thumb through `Chip`'s own hitSlop: this is
+            // a control, not a label.
+            size="xl"
+            variant="outlined"
+            selected={current === band.value}
+            onPress={() => setBand(key, band.value)}
+            accessibilityLabel={`${name}, ${band.label}`}
+            testID={id(`filter-${key}-${band.value ?? 'any'}`)}
+          >
+            {band.label}
+          </Chip>
+        ))}
+      </ChipRow>
+    );
+  };
+
+  const chosenVehicles = filter.vehicles ?? [];
+  const vehicleRow =
+    vehicleKinds.length === 0 ? null : (
+      <ChipRow
+        role="group"
+        accessibilityLabel={labels.filters.vehicle}
+        fadeColor={ambient.background}
+        testID={id('filter-vehicles')}
+      >
+        {vehicleKinds.map((vehicle) => {
+          const word = vehicleWords.get(vehicle) ?? vehicle;
+          return (
+            <Chip
+              key={vehicle}
+              role="button"
+              size="xl"
+              variant="outlined"
+              leadingIcon={VEHICLE_ICON[vehicle]}
+              selected={chosenVehicles.includes(vehicle)}
+              onPress={() => toggleVehicle(vehicle)}
+              accessibilityLabel={`${labels.filters.vehicle}, ${word}`}
+              testID={id(`filter-vehicle-${vehicle}`)}
+            >
+              {word}
+            </Chip>
+          );
+        })}
+      </ChipRow>
+    );
+
+  const filterRows = [
+    bandRow('maxDistanceKm', labels.filters.distance, distanceBands),
+    bandRow('minPay', labels.filters.pay, payBands),
+    bandRow('startsWithinMinutes', labels.filters.when, whenBands),
+    vehicleRow,
+  ].filter((row) => row !== null);
+
+  const filters =
+    filterRows.length === 0 || !filtersOpen ? null : (
+      <View style={{ gap: 8 }} testID={id('filters')}>
+        {filterRows.map((row, index) => (
+          <React.Fragment key={index}>{row}</React.Fragment>
+        ))}
+        {active > 0 ? (
+          <View style={{ flexDirection: 'row' }}>
+            <Button
+              variant="text"
+              size="small"
+              onPress={clear}
+              accessibilityLabel={labels.clearFilters}
+              testID={id('clear')}
+            >
+              {labels.clearFilters}
+            </Button>
+          </View>
+        ) : null}
+      </View>
+    );
+
+  // No head at all until there is something to count and something to do to it.
+  // "0 jobs" over a control that can reorder nothing is chrome for a board that
+  // does not exist yet.
+  const head =
+    jobs.length > 0 &&
+    (showCount || sortOptions.length > 0 || onRefresh !== undefined || filterRows.length > 0) ? (
+      <View style={{ gap: 8 }} testID={id('head')}>
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: 8,
+          }}
+        >
+          {showCount ? (
+            <Text
+              variant="body-semibold"
+              role="heading"
+              aria-level={3}
+              style={{ flexShrink: 1, minWidth: 0, color: paint.text }}
+              testID={id('count')}
+            >
+              {labels.count(shown.length)}
+            </Text>
+          ) : (
+            <View />
+          )}
+          <View
+            style={{ flexDirection: 'row', alignItems: 'center', flexShrink: 0, gap: 8 }}
+          >
+            {filterRows.length > 0 ? (
+              <Button
+                variant="secondary"
+                size="small"
+                leadingIcon={RiEqualizerLine}
+                onPress={() => setFiltersOpen(!filtersOpen)}
+                // `aria-expanded` on both spellings: react-native-web reads only
+                // the flat prop, React Native folds it back into the state.
+                // React Native folds `aria-expanded` back into
+                // `accessibilityState`, and react-native-web reads ONLY the
+                // flat prop — so one spelling reaches both.
+                aria-expanded={filtersOpen}
+                accessibilityLabel={
+                  active > 0
+                    ? `${labels.filtersToggle}, ${labels.filtersActive(active)}`
+                    : labels.filtersToggle
+                }
+                testID={id('filters-toggle')}
+              >
+                {labels.filtersToggle}
+              </Button>
+            ) : null}
+            {/* The count of what is narrowed, so a FOLDED filter is never a
+                hidden one. A bare numeral says nothing to a screen reader, so
+                it is hidden from one and the disclosure's NAME carries the
+                count instead. */}
+            {filterRows.length > 0 && active > 0 ? (
+              <View aria-hidden testID={id('filters-count')}>
+                <Badge content={active} variant="subtle" color="primary" size="medium" />
+              </View>
+            ) : null}
+            {onRefresh ? (
+              <GlyphButton
+                icon={RiRefreshLine}
+                size={JOB_BOARD_GEOMETRY.refresh}
+                onPress={onRefresh}
+                // While a pull is in flight the control is inert rather than
+                // spinning: Bloom draws no press animation, and a second pull
+                // would race the first.
+                disabled={refreshing}
+                accessibilityLabel={labels.refresh}
+                testID={id('refresh')}
+              />
+            ) : null}
+          </View>
+        </View>
+        {sortOptions.length > 0 ? (
+          // A SCROLLER, not a wrapping row: four orders at 390 overflowed the
+          // head, and a wrapped sort under a wrapped count is two lines of
+          // chrome over the first job.
+          <ChipRow
+            role="radiogroup"
+            accessibilityLabel={labels.sort}
+            fadeColor={ambient.background}
+            testID={id('sort')}
+          >
+            {sortOptions.map((option) => (
+              <Chip
+                key={option}
+                role="radio"
+                size="xl"
+                variant="outlined"
+                selected={sort === option}
+                onPress={() => setSort(option)}
+                accessibilityLabel={`${labels.sort}, ${labels.sortOptions[option]}`}
+                testID={id(`sort-${option}`)}
+              >
+                {labels.sortOptions[option]}
+              </Chip>
+            ))}
+          </ChipRow>
+        ) : null}
+      </View>
+    ) : null;
+
+  let body: React.ReactNode;
+  if (loading) {
+    body = (
+      <View
+        aria-busy
+        accessibilityState={{ busy: true }}
+        accessibilityLabel={labels.loading}
+        style={{ gap: 12 }}
+        testID={id('loading')}
+      >
+        {Array.from({ length: Math.max(1, loadingCount) }, (_unused, index) => (
+          <Card
+            key={index}
+            variant="outlined"
+            radius="radius-20"
+            style={surfaceFillVars(theme.colors.card)}
+            testID={id(`placeholder-${index}`)}
+          >
+            <View
+              style={{
+                paddingTop: JOB_BOARD_GEOMETRY.padding,
+                paddingBottom: JOB_BOARD_GEOMETRY.padding,
+                paddingLeft: JOB_BOARD_GEOMETRY.padding,
+                paddingRight: JOB_BOARD_GEOMETRY.padding,
+                gap: JOB_BOARD_GEOMETRY.gap,
+              }}
+            >
+              <Skeleton.Row style={{ alignItems: 'center', gap: 12 }}>
+                <Skeleton.Box
+                  width={JOB_BOARD_GEOMETRY.mark.comfortable}
+                  height={JOB_BOARD_GEOMETRY.mark.comfortable}
+                  borderRadius={JOB_BOARD_GEOMETRY.tileRadius}
+                />
+                <Skeleton.Col style={{ gap: 6 }}>
+                  <Skeleton.Text style={{ width: 180 }} />
+                  <Skeleton.Text style={{ width: 120 }} />
+                </Skeleton.Col>
+                <Skeleton.Box width={72} height={20} />
+              </Skeleton.Row>
+              <Skeleton.Box height={64} borderRadius={JOB_BOARD_GEOMETRY.tileRadius} />
+            </View>
+          </Card>
+        ))}
+      </View>
+    );
+  } else if (shown.length === 0) {
+    body = (
+      <View
+        role="group"
+        accessibilityLabel={emptyTitle}
+        style={{
+          alignItems: 'center',
+          gap: 12,
+          paddingTop: 32,
+          paddingBottom: 32,
+          paddingLeft: 24,
+          paddingRight: 24,
+        }}
+        testID={id('empty')}
+      >
+        <IconCircle icon={RiInbox2Line} size="lg" />
+        <Text
+          variant="headline-semibold"
+          style={{ color: paint.text, textAlign: 'center' }}
+          testID={id('empty-title')}
+        >
+          {emptyTitle}
+        </Text>
+        {emptyDescription ? (
+          <Text
+            variant="body-regular"
+            style={{ color: paint.textSecondary, textAlign: 'center', maxWidth: 360 }}
+          >
+            {emptyDescription}
+          </Text>
+        ) : null}
+        {emptyAction ??
+          (active > 0 ? (
+            <Button
+              variant="secondary"
+              size="medium"
+              onPress={clear}
+              accessibilityLabel={labels.clearFilters}
+              testID={id('empty-clear')}
+            >
+              {labels.clearFilters}
+            </Button>
+          ) : null)}
+      </View>
+    );
+  } else {
+    body = (
+      <View style={{ gap: 12 }}>
+        {shown.map((job) => (
+          <JobCard
+            key={job.id}
+            job={job}
+            onTake={onTake}
+            onPass={onPass}
+            onPressJob={onPressJob}
+            selected={selectedId === job.id}
+            density={density}
+            route={route}
+            breakdown={breakdown}
+            labels={labelOverrides}
+            testID={id(job.id)}
+          />
+        ))}
+      </View>
+    );
+  }
+
+  return (
+    <View
+      testID={testID}
+      role="group"
+      accessibilityLabel={accessibilityLabel}
+      style={[{ gap: 16 }, style]}
+    >
+      {head}
+      {filters}
+      {body}
+    </View>
+  );
+}
+
+export const JobBoard = memo(JobBoardComponent);
+JobBoard.displayName = 'JobBoard';