@oxy.so/bloom 4.0.0 → 4.2.0

package/src/place-card/index.ts

@@ -0,0 +1,14 @@
+export { PlaceCard } from './PlaceCard';
+export { PlaceActions } from './PlaceActions';
+export { PLACE_CARD_GEOMETRY, PLACE_OPEN_LABELS, PLACE_OPEN_TONE } from './constants';
+export type { PlaceCardGeometry } from './constants';
+export { composePlaceName, openLabelFor, resolvePlaceCardPaint } from './shared';
+export type { PlaceCardPaint } from './shared';
+export type {
+  PlaceAction,
+  PlaceActionsProps,
+  PlaceCardDensity,
+  PlaceCardProps,
+  PlaceOpenState,
+  PlaceStat,
+} from './types';

package/src/place-card/shared.ts

@@ -0,0 +1,82 @@
+/**
+ * What `PlaceCard` paints, and the pure text it assembles.
+ *
+ * Every colour is read RELATIVE to the surface the card was dropped on
+ * (`styles/surface-levels.ts`) — a result row sits on the page, on a sheet or
+ * inside a `ContentPanel`, and the detail header sits in whichever of those the
+ * app opened. Nothing here picks a ramp stop.
+ */
+import { formatRatingValue } from '../rating/Rating';
+import {
+  hairlineOn,
+  surfaceFillOn,
+  surfaceTextOn,
+  type SurfaceTextPaint,
+} from '../styles/surface-levels';
+import { resolveAccentColors } from '../theme/accent-colors';
+import type { Theme } from '../theme/types';
+import { PLACE_OPEN_LABELS } from './constants';
+import type { PlaceCardProps, PlaceOpenState } from './types';
+
+export interface PlaceCardPaint extends SurfaceTextPaint {
+  /** Behind a photo that has not loaded, and the detail cover with no photo. */
+  photoPlaceholder: string;
+  /** The detail card's edge. */
+  border: string;
+  /** A stat tile. */
+  tile: string;
+  /** The keyboard focus ring. */
+  ring: string;
+}
+
+export function resolvePlaceCardPaint(theme: Theme, surface: string): PlaceCardPaint {
+  return {
+    ...surfaceTextOn(theme, surface),
+    photoPlaceholder: surfaceFillOn(theme, surface),
+    border: hairlineOn(theme, surface),
+    tile: surfaceFillOn(theme, surface),
+    ring: resolveAccentColors(theme.colors, 'primary', 'solid').background,
+  };
+}
+
+/** The state word as drawn, or `null` when the app did not say. */
+export function openLabelFor(
+  state: PlaceOpenState | undefined,
+  override?: string,
+): string | null {
+  if (state === undefined) return null;
+  return override ?? PLACE_OPEN_LABELS[state];
+}
+
+/**
+ * The whole card in one utterance, in reading order.
+ *
+ * It is composed rather than left to ARIA's contents algorithm because a row is
+ * ONE press target: without a name the announcement is "Forner de la Plaça
+ * Bakery €€ Open Open until twenty hundred one point four kilometres", with no
+ * commas and the rating read as "star four point six paren three one eight".
+ */
+export function composePlaceName(props: PlaceCardProps): string {
+  const parts: string[] = [props.name];
+  if (typeof props.badge === 'string' && props.badge !== '') parts.push(props.badge);
+  if (props.category) parts.push(props.category);
+  if (props.rating !== undefined) {
+    const rated = props.rating !== null && props.rating !== '';
+    if (rated) {
+      const count =
+        props.reviewCount != null && props.reviewCount !== '' ? `, ${props.reviewCount} reviews` : '';
+      parts.push(`Rated ${formatRatingValue(props.rating as number | string)} out of 5${count}`);
+    } else {
+      parts.push(props.newLabel ?? 'New');
+    }
+  }
+  const open = openLabelFor(props.openState, props.openLabel);
+  if (open) parts.push(open);
+  if (props.hours) parts.push(props.hours);
+  if (props.address) parts.push(props.address);
+  for (const fact of props.facts ?? []) parts.push(fact.accessibilityLabel ?? fact.label);
+  if (props.figure) parts.push(props.figureLabel ? `${props.figureLabel}, ${props.figure}` : props.figure);
+  if (props.figureDetail) parts.push(props.figureDetail);
+  for (const stat of props.stats ?? []) parts.push(`${stat.value} ${stat.label}`);
+  return parts.join(', ');
+}

package/src/place-card/types.ts

@@ -0,0 +1,154 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { BloomIconComponent } from '../icons/icon-component';
+import type { ListingFact } from '../listing-card/types';
+
+/**
+ * The two things a maps app does with one place, drawn by ONE component.
+ *
+ *   row      a result in a list over the map — a 112 thumbnail beside the text
+ *   detail   the header of the sheet that opens when the result is picked — a
+ *            cover photo, the name at title weight, the figure block and the
+ *            actions
+ *
+ * They are one component because they carry the same facts in the same order.
+ * A second component would be a second place for "a place is open until eight"
+ * to be spelled, and the two spellings drift.
+ */
+export type PlaceCardDensity = 'row' | 'detail';
+
+/**
+ * Whether the place is open NOW — the one fact a reader looks for first.
+ *
+ * Four members rather than a boolean because "closes in fifteen minutes" is a
+ * different answer from "open", and an app that can only say `true` says the
+ * reassuring one. The word and the tone of each are in
+ * {@link PLACE_OPEN_LABELS} and `OPEN_STATE_TONE`; the HOURS line beside it
+ * ("Open until 20:00") is separate copy the app formats.
+ */
+export type PlaceOpenState = 'open' | 'closing-soon' | 'closed' | 'opening-soon';
+
+/** One tile under the figure — "€€" over "Price", "318" over "Reviews". */
+export interface PlaceStat {
+  /** The reading, pre-formatted. */
+  value: string;
+  /** What it measures. */
+  label: string;
+}
+
+/**
+ * One thing you can do with a place. `Directions`, `Call`, `Save` and `Share`
+ * are the four a maps app draws; the list is the app's, not Bloom's.
+ */
+export interface PlaceAction {
+  /** Identifies the action; keys the button. */
+  id: string;
+  /** The VISIBLE word ("Directions"). */
+  label: string;
+  /** A glyph before the label, sized and coloured by the button. */
+  icon?: BloomIconComponent;
+  onPress?: () => void;
+  /**
+   * The action's URL. On web it renders a real anchor (`tel:`, a share link, a
+   * route deep link), so middle-click and copy-link work.
+   */
+  href?: string;
+  disabled?: boolean;
+  /**
+   * The announced name, when the label alone is not a sentence ("Call
+   * Forner de la Plaça"). Defaults to `label`.
+   */
+  accessibilityLabel?: string;
+}
+
+export interface PlaceActionsProps {
+  actions: readonly PlaceAction[];
+  /** Default `small` — the rung `ai-profile-card` draws its header actions at. */
+  size?: 'small' | 'medium';
+  /** Names the row, which is a `group`. Default `"Actions"`. */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  /** Each button gets `<testID>-<action id>`. */
+  testID?: string;
+}
+
+export interface PlaceCardProps {
+  /** The place's name ("Forner de la Plaça"). */
+  name: string;
+  /** What it is, pre-formatted and short ("Bakery · €€"). */
+  category?: string;
+  /**
+   * The photo — an absolute URL, or an id the app's `ImageResolver` turns into
+   * one. `row` crops it square; `detail` uses it as the cover.
+   */
+  photo?: string;
+  /** The `ImageResolver` rendition for a photo id. Ignored for URLs. */
+  photoVariant?: string;
+  /**
+   * The rating on a 5 scale, drawn by Bloom's `Rating` beside the name.
+   * `undefined` draws nothing; `null` or `''` draws the "New" label.
+   */
+  rating?: number | string | null;
+  /** The review count, after the rating ("(318)"). */
+  reviewCount?: number | string;
+  /** The "New" label of an unrated place. Default `"New"`. */
+  newLabel?: string;
+  /** Whether the place is open now. Without it no state pill is drawn. */
+  openState?: PlaceOpenState;
+  /** Replaces the English state word ("Open", "Closing soon", …). */
+  openLabel?: string;
+  /** The hours line, pre-formatted ("Open until 20:00", "Opens 08:00 tomorrow"). */
+  hours?: string;
+  /** The street line, drawn with a pin. */
+  address?: string;
+  /**
+   * Compact facts with icons, one clipped row ("1.4 km", "12 min"). Same shape
+   * and same part as `ListingCard`'s.
+   */
+  facts?: ReadonlyArray<ListingFact>;
+  /**
+   * The FIGURE — the one reading the header leads with, usually the time to
+   * get there ("12 min"). Drawn tabular at title-1. `detail` only.
+   */
+  figure?: string;
+  /** The quiet label over the figure ("Drive from you"). `detail` only. */
+  figureLabel?: string;
+  /** A chip after the figure ("1.4 km"). `detail` only. */
+  figureDetail?: string;
+  /** Tiles under the figure. `detail` only. */
+  stats?: readonly PlaceStat[];
+  /**
+   * The slot above the name. A string draws a neutral `Badge`; any other node
+   * is placed as given.
+   */
+  badge?: ReactNode;
+  /** The actions. `detail` draws them under the figure block; `row` under the row. */
+  actions?: readonly PlaceAction[];
+  /** Whether the place is saved. Omit `onFavoriteChange` too to hide the heart. */
+  favorite?: boolean;
+  /** Called with the next saved state. The heart is drawn only when this is given. */
+  onFavoriteChange?: (favorite: boolean) => void;
+  /** Names of the heart, passed to `FavoriteButton`. */
+  saveLabel?: string;
+  removeLabel?: string;
+  /** Opens the place. `row` only — a detail header is already the thing it opens. */
+  onPress?: () => void;
+  /**
+   * The place's URL. On web the row is a real `<a href>`; on native a press
+   * opens it with `Linking` when there is no `onPress`. `row` only.
+   */
+  href?: string;
+  /** Draws a skeleton in the same geometry instead of the place. */
+  loading?: boolean;
+  /** Default `row`. */
+  density?: PlaceCardDensity;
+  /**
+   * Replaces the composed accessible name ("Forner de la Plaça, Bakery · €€,
+   * Open, Open until 20:00, …"), which is English.
+   */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  /** Parts get `<testID>-photo`, `-name`, `-state`, `-hours`, `-figure`, `-actions`. */
+  testID?: string;
+}

package/src/place-details/PlaceAmenities.tsx

@@ -0,0 +1,122 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { Chip } from '../chip';
+import { AmenityList } from '../listing-details/AmenityList';
+import type { Amenity } from '../listing-details/types';
+import { useSurfaceFill } from '../styles/surface-levels';
+import { useTheme } from '../theme/use-theme';
+import { resolvePlaceDetailsPaint } from './shared';
+import type { PlaceAmenitiesProps } from './types';
+
+/**
+ * What the place HAS: step-free entrance, outdoor seating, wifi, cards taken.
+ *
+ * `layout="list"` IS `listing-details`' `AmenityList`, called with the same
+ * items — not a copy of it and not a port of it. A home's amenity block and a
+ * place's amenity block are one thing: icon, label, an optional second line,
+ * and a struck-through label for the one the place does not have. The only
+ * difference was the NOUN, and a noun is not a component. So this part maps
+ * `PlaceAmenity` onto `Amenity` and hands over the columns, the `limit`, the
+ * "Show all" button and the unavailable treatment.
+ *
+ * `layout="chips"` is the part a listing page does not have: a wrapping strip
+ * of `Chip`s for the top of a sheet, where four attributes have to read in one
+ * glance and there is no room for a two-column list. It is the same items at a
+ * different density, never a different set.
+ *
+ *   chip         `large` (28 tall), the amenity's glyph leading, `subtle`
+ *   unavailable  the label struck through and the chip dimmed, with "Not
+ *                available" in front of its announced name — the same
+ *                encoding the list uses, because the two layouts must not
+ *                disagree about what "has no wifi" looks like
+ */
+function PlaceAmenitiesComponent({
+  items,
+  layout = 'list',
+  columns = 'auto',
+  limit,
+  onShowAll,
+  total,
+  showAllLabel,
+  unavailableLabel = 'Not available',
+  accessibilityLabel = 'Amenities',
+  style,
+  testID,
+}: PlaceAmenitiesProps) {
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  const paint = useMemo(() => resolvePlaceDetailsPaint(theme, surface), [theme, surface]);
+
+  if (items.length === 0) return null;
+
+  if (layout === 'list') {
+    // The identity map is deliberate and typed: `PlaceAmenity` is `Amenity`'s
+    // shape, and writing it out is what makes a future divergence a compile
+    // error here rather than a silently dropped field.
+    const mapped: Amenity[] = items.map(({ label, icon, description, available }) => ({
+      label,
+      icon,
+      description,
+      available,
+    }));
+    return (
+      <AmenityList
+        items={mapped}
+        columns={columns}
+        limit={limit}
+        onShowAll={onShowAll}
+        total={total}
+        showAllLabel={showAllLabel}
+        unavailableLabel={unavailableLabel}
+        style={style}
+        testID={testID}
+      />
+    );
+  }
+
+  const shown = limit != null && limit >= 0 ? items.slice(0, limit) : items;
+
+  return (
+    <View
+      role="list"
+      accessibilityLabel={accessibilityLabel}
+      style={[{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }, style]}
+      testID={testID}
+    >
+      {shown.map(({ label, icon, description: _description, available = true }, index) => (
+        <View
+          key={`${label}-${index}`}
+          role="listitem"
+          accessible
+          accessibilityLabel={available ? label : `${unavailableLabel}: ${label}`}
+          testID={testID ? `${testID}-chip-${index}` : undefined}
+        >
+          {/*
+            The NAME is on the listitem, not on the chip. A non-pressable
+            `Chip` is a plain `View`, and on web a `div` carrying an
+            `aria-label` and no role is not announced at all — the same
+            mechanism `TransitLineBadge` records when it puts `role="img"` on
+            its own wrapper.
+          */}
+          <Chip
+            size="large"
+            variant="subtle"
+            leadingIcon={icon}
+            textStyle={
+              available
+                ? undefined
+                : { color: paint.textTertiary, textDecorationLine: 'line-through' }
+            }
+            style={available ? undefined : { opacity: 0.7 }}
+          >
+            {label}
+          </Chip>
+        </View>
+      ))}
+    </View>
+  );
+}
+
+export const PlaceAmenities = memo(PlaceAmenitiesComponent);
+PlaceAmenities.displayName = 'PlaceAmenities';

package/src/place-details/PlaceHours.tsx

@@ -0,0 +1,207 @@
+import React, { memo, useCallback, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../accordion';
+import { Badge } from '../badge';
+import { useControllableState } from '../hooks/use-controllable-state';
+import { RiTimeLine } from '../icons/remix/RiTimeLine';
+import { PLACE_OPEN_TONE } from '../place-card/constants';
+import { openLabelFor } from '../place-card/shared';
+import { useSurfaceFill } from '../styles/surface-levels';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { PLACE_DETAILS_GEOMETRY } from './constants';
+import { describeHoursDay, formatHoursDay, resolvePlaceDetailsPaint, type HoursFormat } from './shared';
+import type { PlaceHoursProps } from './types';
+
+/** The accordion's one item. A week is a single disclosure, not a set of them. */
+const WEEK = 'week';
+
+/**
+ * When a place is open: today's answer, over the week it comes from.
+ *
+ *   trigger  a clock glyph, the state as a `Badge` on its tone, then TODAY'S
+ *            LINE as a sentence. Pressing it opens the week; the chevron, the
+ *            `aria-expanded` and the reveal are `Accordion`'s
+ *   week      one row a day — the day on the left, its hours on the right,
+ *            tabular so the columns of digits line up down the column
+ *   today     `body-semibold` in the primary text colour against
+ *            `body-regular` in the secondary one, `aria-current`, and the word
+ *            "Today" in its announcement
+ *   exception a `warning` `Badge` under that day's hours ("Public holiday")
+ *
+ * THE PILL AND THE SENTENCE ARE THE SAME TWO THINGS `PlaceCard` DRAWS, and
+ * deliberately the same code: the state word comes from `openLabelFor` and the
+ * tone from `PLACE_OPEN_TONE`, so a place cannot be "Open" on the header of a
+ * sheet and "Closing soon" in the body of it.
+ *
+ * NOTHING HERE READS A CLOCK. `summary` is the app's sentence and `today` is
+ * the app's flag: the hours of a place are in the place's timezone, the reader
+ * is in another, and "open" also depends on a holiday calendar Bloom has never
+ * heard of. A component that guessed would be wrong twice a year, quietly.
+ *
+ * A SPLIT DAY STAYS ON ONE LINE (`07:30 – 14:00, 17:00 – 20:00`). The week is
+ * read as a column, and a day that takes two rows breaks the alignment that
+ * makes the column scannable.
+ */
+function PlaceHoursComponent({
+  days,
+  state,
+  stateLabel,
+  summary,
+  expanded,
+  defaultExpanded = false,
+  onExpandedChange,
+  todayLabel = 'Today',
+  closedLabel = 'Closed',
+  intervalSeparator = ' – ',
+  splitSeparator = ', ',
+  accessibilityLabel = 'Opening hours',
+  style,
+  testID,
+}: PlaceHoursProps) {
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  const paint = useMemo(() => resolvePlaceDetailsPaint(theme, surface), [theme, surface]);
+  const format = useMemo<HoursFormat>(
+    () => ({ interval: intervalSeparator, split: splitSeparator, closed: closedLabel }),
+    [intervalSeparator, splitSeparator, closedLabel],
+  );
+
+  const [open, setOpen] = useControllableState<boolean>({
+    value: expanded,
+    defaultValue: defaultExpanded,
+    onChange: onExpandedChange,
+  });
+
+  const onValueChange = useCallback(
+    (next: string | string[] | undefined) => setOpen(next === WEEK),
+    [setOpen],
+  );
+
+  const word = openLabelFor(state, stateLabel);
+
+  return (
+    <View
+      role="group"
+      accessibilityLabel={accessibilityLabel}
+      style={style}
+      testID={testID}
+    >
+      <Accordion type="single" value={open ? WEEK : undefined} onValueChange={onValueChange}>
+        <AccordionItem value={WEEK}>
+          <AccordionTrigger
+            icon={
+              <RiTimeLine
+                width={PLACE_DETAILS_GEOMETRY.glyph}
+                height={PLACE_DETAILS_GEOMETRY.glyph}
+                fill={paint.textSecondary}
+              />
+            }
+          >
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                flexWrap: 'wrap',
+                columnGap: 8,
+                rowGap: 4,
+              }}
+            >
+              {word && state ? (
+                <Badge
+                  content={word}
+                  variant="subtle"
+                  color={PLACE_OPEN_TONE[state]}
+                  size="label-small"
+                  testID={testID ? `${testID}-state` : undefined}
+                />
+              ) : null}
+              {summary ? (
+                <Text
+                  variant="body-regular"
+                  style={{ color: paint.text }}
+                  testID={testID ? `${testID}-summary` : undefined}
+                >
+                  {summary}
+                </Text>
+              ) : null}
+            </View>
+          </AccordionTrigger>
+          <AccordionContent>
+            {/*
+              `AccordionContent` keeps its children MOUNTED while shut (it
+              animates `maxHeight` to 0), so the week would still be read out
+              by a screen reader under a trigger that says `aria-expanded`
+              false. Nothing inside takes focus, so hiding it while shut costs
+              nothing and removes the contradiction.
+            */}
+            <View
+              role="list"
+              aria-hidden={open ? undefined : true}
+              accessibilityElementsHidden={!open}
+              importantForAccessibility={open ? 'auto' : 'no-hide-descendants'}
+              style={{ paddingBottom: PLACE_DETAILS_GEOMETRY.blockGap, gap: 2 }}
+              testID={testID ? `${testID}-week` : undefined}
+            >
+              {days.map((day, index) => {
+                const today = day.today === true;
+                return (
+                  <View
+                    key={day.id ?? `${day.label}-${index}`}
+                    role="listitem"
+                    accessible
+                    accessibilityLabel={describeHoursDay(day, format, todayLabel)}
+                    {...(today ? { 'aria-current': 'date' as const } : null)}
+                    style={{
+                      flexDirection: 'row',
+                      alignItems: 'flex-start',
+                      gap: 16,
+                      paddingVertical: 6,
+                    }}
+                    testID={testID ? `${testID}-day-${index}` : undefined}
+                  >
+                    <Text
+                      variant={today ? 'body-semibold' : 'body-regular'}
+                      style={{ flexShrink: 0, color: today ? paint.text : paint.textSecondary }}
+                    >
+                      {day.label}
+                    </Text>
+                    <View style={{ flex: 1, minWidth: 0, alignItems: 'flex-end', gap: 4 }}>
+                      <Text
+                        variant={today ? 'body-semibold' : 'body-regular'}
+                        style={{
+                          color: today ? paint.text : paint.textSecondary,
+                          fontVariant: ['tabular-nums'],
+                          textAlign: 'right',
+                        }}
+                      >
+                        {formatHoursDay(day, format)}
+                      </Text>
+                      {day.exception ? (
+                        // `Badge` pins itself to `alignSelf: 'flex-start'`, which
+                        // wins over the column's `alignItems` — so the wrapper is
+                        // what puts the exception under the END of the hours.
+                        <View style={{ alignSelf: 'flex-end' }}>
+                          <Badge
+                            content={day.exception}
+                            variant="subtle"
+                            color="warning"
+                            size="label-small"
+                          />
+                        </View>
+                      ) : null}
+                    </View>
+                  </View>
+                );
+              })}
+            </View>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </View>
+  );
+}
+
+export const PlaceHours = memo(PlaceHoursComponent);
+PlaceHours.displayName = 'PlaceHours';

package/src/place-details/PlaceInfoList.tsx

@@ -0,0 +1,105 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { SettingsListGroup, SettingsListItem } from '../settings-list';
+import { useSurfaceFill } from '../styles/surface-levels';
+import { useTheme } from '../theme/use-theme';
+import { PLACE_DETAILS_GEOMETRY, PLACE_INFO_ACTION_ICON } from './constants';
+import { describeInfoItem, resolvePlaceDetailsPaint } from './shared';
+import type { PlaceInfoListProps } from './types';
+
+/**
+ * The block of a place you ACT on: the address, the phone, the website, the
+ * plus code, and the way to report that any of them is wrong.
+ *
+ * It is `settings-list`'s card, row for row — the glyph well, the 44 minimum
+ * height, the hairline between rows, the surface the group resolves from
+ * whatever it was dropped on. A place's contact block and a settings screen
+ * are the same object: a short list of rows, each carrying one value and one
+ * thing that happens when you press it.
+ *
+ *   row      the VALUE first (`title`) with what it is under it
+ *            (`description`) — a reader scanning a place sheet is looking for
+ *            the address, not for the word "Address". It takes TWO lines by
+ *            default (`numberOfLines`): a settings row's title is a noun and
+ *            fits on one, a postal address is the row's content and does not,
+ *            and the tail that would be cut is the part that identifies it
+ *   glyph    20, the family's one glyph rung, in text-secondary
+ *   trailing the ACTION's glyph ({@link PLACE_INFO_ACTION_ICON}) — a copy
+ *            sheet, a handset, an arrow out of the box — so the press is
+ *            legible before it is made, with its WORD at the end of the row's
+ *            name for everyone who cannot see it (`accessibilityHint` reaches
+ *            native only; `PLACE_INFO_ACTION_LABELS` has the mechanism)
+ *   edit     keeps the chevron instead: it opens a form rather than doing
+ *            something here
+ *
+ * THE TRAILING GLYPH IS NOT A BUTTON. The row is one press target and one
+ * announcement; a second button inside it would be a second tab stop saying
+ * the same word, and on web a button inside a pressable row is the nested
+ * control this library refuses everywhere else. One row, one action — which is
+ * also why `PlaceInfoItem.action` is a closed list rather than a slot.
+ */
+function PlaceInfoListComponent({
+  items,
+  title,
+  footer,
+  actionLabels,
+  style,
+  testID,
+}: PlaceInfoListProps) {
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  const paint = useMemo(() => resolvePlaceDetailsPaint(theme, surface), [theme, surface]);
+
+  if (items.length === 0) return null;
+
+  return (
+    <View style={style} testID={testID}>
+      <SettingsListGroup title={title} footer={footer}>
+        {items.map((item) => {
+          const action = item.action ?? 'none';
+          const Glyph = item.icon;
+          const ActionGlyph =
+            action === 'none' || action === 'edit' ? null : PLACE_INFO_ACTION_ICON[action];
+          const pressable = item.onPress !== undefined;
+          return (
+            <SettingsListItem
+              key={item.id}
+              title={item.value}
+              titleNumberOfLines={item.numberOfLines ?? 2}
+              description={item.label}
+              icon={
+                Glyph ? (
+                  <Glyph
+                    width={PLACE_DETAILS_GEOMETRY.glyph}
+                    height={PLACE_DETAILS_GEOMETRY.glyph}
+                    fill={paint.textSecondary}
+                  />
+                ) : undefined
+              }
+              rightElement={
+                ActionGlyph ? (
+                  <View
+                    aria-hidden
+                    accessibilityElementsHidden
+                    importantForAccessibility="no-hide-descendants"
+                    testID={testID ? `${testID}-${item.id}-action` : undefined}
+                  >
+                    <ActionGlyph width={18} height={18} fill={paint.textTertiary} />
+                  </View>
+                ) : undefined
+              }
+              showChevron={action === 'edit' && pressable}
+              onPress={pressable ? () => item.onPress?.(item.id) : undefined}
+              disabled={item.disabled}
+              accessibilityLabel={describeInfoItem(item, actionLabels)}
+            />
+          );
+        })}
+      </SettingsListGroup>
+    </View>
+  );
+}
+
+export const PlaceInfoList = memo(PlaceInfoListComponent);
+PlaceInfoList.displayName = 'PlaceInfoList';