@oxy.so/bloom 3.6.0 → 4.1.0

package/src/place-details/PlacePopularTimes.tsx

@@ -0,0 +1,268 @@
+import React, { memo, useMemo } from 'react';
+import { Platform, View } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+
+import { chartHueTone } from '../chart-cards/palette';
+import { useChartCardPalette } from '../chart-cards/primitives/use-chart-palette';
+import { roundedBarPath, singleBarSlot } from '../chart-cards/rounded-bar-geometry';
+import { useContainerWidth } from '../hooks/use-container-width';
+import { useControllableState } from '../hooks/use-controllable-state';
+import { SegmentedControl, SegmentedControlItem, SegmentedControlItemText } from '../segmented-control';
+import { useSurfaceFill } from '../styles/surface-levels';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { PLACE_DETAILS_GEOMETRY } from './constants';
+import {
+  busyTrendLabel,
+  busyValue,
+  describeBusyChart,
+  hourLabelStep,
+  resolvePlaceDetailsPaint,
+} from './shared';
+import type { PlacePopularTimesProps } from './types';
+
+const IS_WEB = Platform.OS === 'web';
+
+/** The width an hour label is centred in. Two or three characters, never more. */
+const LABEL_SLOT = 40;
+
+/**
+ * The air above and below the plot that the current hour's outline is drawn
+ * in. The outline surrounds the whole BAND rather than the bar, so it says
+ * "this hour" and not "this reading", and it is clamped to the plot's own
+ * width so the first and last hours cannot draw outside it.
+ */
+const RING_PAD = 4;
+const RING_STROKE = 2;
+const RING_RADIUS = 8;
+
+/**
+ * How busy a place is, hour by hour, for the day you pick.
+ *
+ * IT IS A CHART AND NOT A METER, and the difference is not decoration: a meter
+ * answers "how full is this one thing", and every reading here only means
+ * something against the twenty-three beside it. So it is drawn the way every
+ * other chart in Bloom is drawn — `react-native-svg` bars on `chart-cards`'
+ * own geometry (`singleBarSlot`, `roundedBarPath`) in one of `chart-cards`'
+ * nine series hues, over the chart track colour. Nothing here invents a shape
+ * or a palette.
+ *
+ *   plot     `height` tall (120 by default), one band per hour; the bar is the
+ *            band less `barCategoryGap` on each side, radius 4
+ *   track    the full plot height behind every bar, so a quiet hour is still a
+ *            hit target's worth of drawing and a CLOSED hour reads as a gap
+ *            rather than as a missing one
+ *   domain   a fixed 0–100. A per-day maximum would make Tuesday's quiet peak
+ *            as tall as Saturday's queue, which is the one comparison this
+ *            chart exists to allow
+ *   now      the current hour takes the hue's `active` step and keeps its axis
+ *            label even when its neighbours' are dropped
+ *   axis     every hour is labelled where they fit; below that, every second
+ *            or third, because twenty-four labels across a phone is 16px each
+ *
+ * ## Which chart card this is NOT
+ *
+ * `StepsCard` draws exactly these bars — and draws them inside the medical
+ * card's fixed 244 height, under its own headline, its week pill and its
+ * count-up, with seven labelled bands. A place sheet has a section header
+ * already and needs twenty-four bands with a day switch, so reusing that card
+ * would have meant suppressing four of its five parts. The BAR maths is what
+ * was worth sharing, and that is what is imported.
+ *
+ * ## The day switch drops "now" with the day
+ *
+ * `currentHourIndex` is a property of a DAY, so switching to Tuesday removes
+ * the marker and the live line. Tuesday has no "now", and a marker that stayed
+ * put would be a reading of a different day.
+ */
+function PlacePopularTimesComponent({
+  days,
+  day,
+  defaultDay,
+  onDayChange,
+  height = PLACE_DETAILS_GEOMETRY.chartHeight,
+  hue = 1,
+  daysLabel = 'Day',
+  accessibilityLabel,
+  emptyLabel = 'No data for this day',
+  style,
+  testID,
+}: PlacePopularTimesProps) {
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  const paint = useMemo(() => resolvePlaceDetailsPaint(theme, surface), [theme, surface]);
+  const chart = useChartCardPalette();
+  const tone = useMemo(() => chartHueTone(theme, hue), [theme, hue]);
+  const { width, onLayout } = useContainerWidth();
+
+  const fallbackDay = days.find((entry) => entry.currentHourIndex != null)?.id ?? days[0]?.id ?? '';
+  const [selected, setSelected] = useControllableState<string>({
+    value: day,
+    defaultValue: defaultDay ?? fallbackDay,
+    onChange: onDayChange,
+  });
+
+  const current = days.find((entry) => entry.id === selected) ?? days[0];
+  const hours = current?.hours ?? [];
+  const count = hours.length;
+  const currentIndex =
+    current?.currentHourIndex != null && current.currentHourIndex >= 0 && current.currentHourIndex < count
+      ? current.currentHourIndex
+      : null;
+  const trend = current ? busyTrendLabel(current) : null;
+
+  const band = count > 0 && width != null && width > 0 ? width / count : 0;
+  const slot = band > 0 ? singleBarSlot(band, PLACE_DETAILS_GEOMETRY.barCategoryGap) : null;
+  const step = hourLabelStep(count, width ?? 0, PLACE_DETAILS_GEOMETRY.hourLabelPitch);
+
+  return (
+    <View style={[{ gap: PLACE_DETAILS_GEOMETRY.blockGap }, style]} testID={testID}>
+      {days.length > 1 ? (
+        <SegmentedControl
+          type="radio"
+          size="small"
+          label={daysLabel}
+          value={selected}
+          onValueChange={setSelected}
+          testID={testID ? `${testID}-days` : undefined}
+        >
+          {days.map((entry) => (
+            <SegmentedControlItem
+              key={entry.id}
+              value={entry.id}
+              accessibilityLabel={entry.accessibilityLabel}
+            >
+              <SegmentedControlItemText>{entry.label}</SegmentedControlItemText>
+            </SegmentedControlItem>
+          ))}
+        </SegmentedControl>
+      ) : null}
+
+      {currentIndex != null && current ? (
+        <View
+          style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}
+          testID={testID ? `${testID}-live` : undefined}
+        >
+          <View
+            aria-hidden
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
+            style={{ width: 8, height: 8, borderRadius: 4, backgroundColor: tone.activeColor }}
+          />
+          <Text variant="body-regular" style={{ flex: 1, minWidth: 0, color: paint.text }}>
+            {trend
+              ? `${hours[currentIndex]!.label} · ${trend}`
+              : (hours[currentIndex]!.label as string)}
+          </Text>
+        </View>
+      ) : null}
+
+      {count === 0 ? (
+        <Text variant="body-regular" style={{ color: paint.textSecondary }}>
+          {emptyLabel}
+        </Text>
+      ) : (
+        <View
+          onLayout={onLayout}
+          accessible
+          accessibilityLabel={accessibilityLabel ?? (current ? describeBusyChart(current) : undefined)}
+          {...(IS_WEB ? { role: 'img' as const } : null)}
+          testID={testID ? `${testID}-chart` : undefined}
+        >
+          <View style={{ height: height + RING_PAD * 2 }}>
+            {slot && width != null ? (
+              <Svg width={width} height={height + RING_PAD * 2}>
+                {hours.map((hour, index) => {
+                  const x = index * band + slot.offset;
+                  const barWidth = slot.size;
+                  const track = roundedBarPath(
+                    x,
+                    RING_PAD,
+                    barWidth,
+                    height,
+                    PLACE_DETAILS_GEOMETRY.barRadius,
+                  );
+                  const value = hour.closed ? 0 : busyValue(hour.value);
+                  const barHeight = (value / 100) * height;
+                  return (
+                    <React.Fragment key={`${hour.label}-${index}`}>
+                      <Path d={track} fill={chart.track} />
+                      {barHeight > 0 ? (
+                        <Path
+                          d={roundedBarPath(
+                            x,
+                            RING_PAD + height - barHeight,
+                            barWidth,
+                            barHeight,
+                            PLACE_DETAILS_GEOMETRY.barRadius,
+                          )}
+                          fill={index === currentIndex ? tone.activeColor : tone.color}
+                          testID={testID ? `${testID}-bar-${index}` : undefined}
+                        />
+                      ) : null}
+                    </React.Fragment>
+                  );
+                })}
+                {currentIndex != null
+                  ? (() => {
+                      const left = Math.max(RING_STROKE / 2, currentIndex * band + RING_STROKE / 2);
+                      const right = Math.min(width - RING_STROKE / 2, (currentIndex + 1) * band - RING_STROKE / 2);
+                      if (right <= left) return null;
+                      return (
+                        <Path
+                          d={roundedBarPath(
+                            left,
+                            RING_STROKE / 2,
+                            right - left,
+                            height + RING_PAD * 2 - RING_STROKE,
+                            RING_RADIUS,
+                          )}
+                          fill="none"
+                          stroke={tone.activeColor}
+                          strokeWidth={RING_STROKE}
+                          testID={testID ? `${testID}-now` : undefined}
+                        />
+                      );
+                    })()
+                  : null}
+              </Svg>
+            ) : null}
+          </View>
+          <View style={{ height: PLACE_DETAILS_GEOMETRY.chartAxis }}>
+            {band > 0
+              ? hours.map((hour, index) => {
+                  if (index !== currentIndex && index % step !== 0) return null;
+                  const centre = index * band + band / 2;
+                  // Clamped into the plot: the first and last labels are
+                  // centred on a band that starts at the edge, and a 40-wide
+                  // slot centred there would hang outside the block.
+                  const left = Math.max(0, Math.min((width ?? 0) - LABEL_SLOT, centre - LABEL_SLOT / 2));
+                  return (
+                    <Text
+                      key={`label-${index}`}
+                      variant="caption-2-regular"
+                      numberOfLines={1}
+                      style={{
+                        position: 'absolute',
+                        left,
+                        width: LABEL_SLOT,
+                        top: 6,
+                        textAlign: 'center',
+                        color: index === currentIndex ? paint.text : paint.textTertiary,
+                        fontVariant: ['tabular-nums'],
+                      }}
+                    >
+                      {hour.label}
+                    </Text>
+                  );
+                })
+              : null}
+          </View>
+        </View>
+      )}
+    </View>
+  );
+}
+
+export const PlacePopularTimes = memo(PlacePopularTimesComponent);
+PlacePopularTimes.displayName = 'PlacePopularTimes';

package/src/place-details/PlaceTransit.tsx

@@ -0,0 +1,226 @@
+import React, { memo, useMemo } from 'react';
+import { Pressable, View } from 'react-native';
+
+import { TransitLineBadge } from '../directions/TransitLineBadge';
+import { interactiveWebCss, useInteractiveWebCss } from '../styles/interactive-web-css';
+import { useSurfaceFill } from '../styles/surface-levels';
+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 { PLACE_DETAILS_GEOMETRY, PLACE_TRANSIT_MODE_ICON } from './constants';
+import { describeDeparture, describeTransitStop, resolvePlaceDetailsPaint } from './shared';
+import type { PlaceTransitProps, PlaceTransitStop } from './types';
+
+const STYLE_ID = 'bloom-place-transit-web-css';
+
+/**
+ * The hover wash and the keyboard ring for a pressable stop header, built by
+ * the shared recipe rather than hand-written: `reset: 'none'` because the
+ * header is a react-native-web `Pressable` and the button reset's `inline-flex`
+ * would break its layout, and no press scale because this library has none.
+ */
+const CSS = interactiveWebCss({
+  selector: '[data-bloom-place-stop]',
+  varPrefix: 'bloom-place-stop',
+  reset: 'none',
+  transition: 'background-color 150ms ease-out',
+  base: 'cursor: pointer; border-radius: 10px;',
+  hover: { declarations: 'background-color: var(--bloom-place-stop-hover, transparent);' },
+  outlineOffset: 2,
+});
+
+/**
+ * The stops around a place, each with the lines that call there and what is
+ * due next.
+ *
+ *   stop        a mode glyph (bus, metro, train, tram, ferry), the stop's name
+ *               in `body-semibold` and how far it is under it. Pressable when
+ *               the app can pan its map to it, with the library's one hover
+ *               wash and one focus ring
+ *   lines       `directions`' own `TransitLineBadge`, imported — an operator's
+ *               line colour is drawn by the badge that already knows how to
+ *               MEASURE a readable label against it, and a second badge here
+ *               would be a second answer to that question
+ *   departures  one row each: the line badge, where it is going, and the time
+ *               on the right, tabular so a column of times lines up
+ *   live        a dot in the success tone AND the word "live" in the row's
+ *               announcement. A colour is not a fact: green alone says nothing
+ *               to a reader who cannot see it, and it is the first thing a
+ *               high-contrast mode takes away
+ *
+ * Each departure is ONE utterance ("Line L4 to Pla del Bosc, 4 min, live"),
+ * because read part by part a column of three badges and three times is six
+ * announcements the listener has to pair up themselves.
+ */
+function PlaceTransitComponent({
+  stops,
+  onPressStop,
+  departureLimit,
+  realtimeLabel = 'live',
+  emptyLabel = 'No departures right now',
+  accessibilityLabel = 'Nearby transit',
+  footer,
+  style,
+  testID,
+}: PlaceTransitProps) {
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  const paint = useMemo(() => resolvePlaceDetailsPaint(theme, surface), [theme, surface]);
+  useInteractiveWebCss(STYLE_ID, CSS);
+
+  const webVars: WebCssStyle = {
+    '--bloom-place-stop-ring': paint.ring,
+    '--bloom-place-stop-hover': paint.fill,
+  };
+
+  const renderStop = (stop: PlaceTransitStop, index: number) => {
+    const Glyph = PLACE_TRANSIT_MODE_ICON[stop.mode ?? 'bus'];
+    const departures =
+      departureLimit != null && departureLimit >= 0
+        ? (stop.departures ?? []).slice(0, departureLimit)
+        : stop.departures ?? [];
+    const stopTestID = testID ? `${testID}-stop-${index}` : undefined;
+
+    const header = (
+      <View style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 12, padding: 6 }}>
+        <View
+          aria-hidden
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+          style={{ paddingTop: 2 }}
+        >
+          <Glyph
+            width={PLACE_DETAILS_GEOMETRY.glyph}
+            height={PLACE_DETAILS_GEOMETRY.glyph}
+            fill={paint.textSecondary}
+          />
+        </View>
+        <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
+          <Text variant="body-semibold" style={{ color: paint.text }}>
+            {stop.name}
+          </Text>
+          {stop.distance ? (
+            <Text variant="body-2-regular" style={{ color: paint.textSecondary }}>
+              {stop.distance}
+            </Text>
+          ) : null}
+          {stop.note ? (
+            <Text variant="body-2-regular" style={{ color: paint.textTertiary }}>
+              {stop.note}
+            </Text>
+          ) : null}
+        </View>
+      </View>
+    );
+
+    return (
+      <View
+        key={stop.id}
+        role="listitem"
+        style={{ gap: PLACE_DETAILS_GEOMETRY.rowGap }}
+        testID={stopTestID}
+      >
+        {onPressStop ? (
+          <Pressable
+            {...webDataSet({ bloomPlaceStop: '' })}
+            role="button"
+            accessibilityLabel={describeTransitStop(stop)}
+            onPress={() => onPressStop(stop.id)}
+            style={webVars}
+            testID={stopTestID ? `${stopTestID}-press` : undefined}
+          >
+            {header}
+          </Pressable>
+        ) : (
+          <View accessible accessibilityLabel={describeTransitStop(stop)}>{header}</View>
+        )}
+
+        {stop.lines && stop.lines.length > 0 ? (
+          <View
+            role="group"
+            accessibilityLabel="Lines"
+            style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6, paddingLeft: 38 }}
+          >
+            {stop.lines.map((line, lineIndex) => (
+              <TransitLineBadge key={`${line.name}-${lineIndex}`} line={line} />
+            ))}
+          </View>
+        ) : null}
+
+        {departures.length === 0 ? (
+          <Text variant="body-2-regular" style={{ color: paint.textTertiary, paddingLeft: 38 }}>
+            {emptyLabel}
+          </Text>
+        ) : (
+          <View role="list" style={{ gap: 2, paddingLeft: 38 }}>
+            {departures.map((departure, departureIndex) => (
+              <View
+                key={departure.id}
+                role="listitem"
+                accessible
+                accessibilityLabel={describeDeparture(departure, realtimeLabel)}
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  gap: 8,
+                  minHeight: 32,
+                }}
+                testID={stopTestID ? `${stopTestID}-departure-${departureIndex}` : undefined}
+              >
+                <View
+                  aria-hidden
+                  accessibilityElementsHidden
+                  importantForAccessibility="no-hide-descendants"
+                >
+                  <TransitLineBadge line={departure.line} />
+                </View>
+                <Text
+                  variant="body-regular"
+                  numberOfLines={1}
+                  style={{ flex: 1, minWidth: 0, color: paint.textSecondary }}
+                >
+                  {departure.headsign ?? departure.line.headsign ?? ''}
+                </Text>
+                {departure.realtime ? (
+                  <View
+                    aria-hidden
+                    accessibilityElementsHidden
+                    importantForAccessibility="no-hide-descendants"
+                    style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: paint.live }}
+                  />
+                ) : null}
+                <Text
+                  variant="body-semibold"
+                  style={{
+                    color: departure.realtime ? paint.live : paint.text,
+                    fontVariant: ['tabular-nums'],
+                  }}
+                >
+                  {departure.time}
+                </Text>
+              </View>
+            ))}
+          </View>
+        )}
+      </View>
+    );
+  };
+
+  if (stops.length === 0) return null;
+
+  return (
+    <View
+      role="list"
+      accessibilityLabel={accessibilityLabel}
+      style={[{ gap: PLACE_DETAILS_GEOMETRY.blockGap }, style]}
+      testID={testID}
+    >
+      {stops.map(renderStop)}
+      {footer}
+    </View>
+  );
+}
+
+export const PlaceTransit = memo(PlaceTransitComponent);
+PlaceTransit.displayName = 'PlaceTransit';

package/src/place-details/constants.ts

@@ -0,0 +1,108 @@
+import { RiBusLine } from '../icons/remix/RiBusLine';
+import { RiExternalLinkLine } from '../icons/remix/RiExternalLinkLine';
+import { RiFileCopyLine } from '../icons/remix/RiFileCopyLine';
+import { RiPencilLine } from '../icons/remix/RiPencilLine';
+import { RiPhoneLine } from '../icons/remix/RiPhoneLine';
+import { RiRouteLine } from '../icons/remix/RiRouteLine';
+import { RiShip2Line } from '../icons/remix/RiShip2Line';
+import { RiSubwayLine } from '../icons/remix/RiSubwayLine';
+import { RiTrainLine } from '../icons/remix/RiTrainLine';
+import type { BloomIconComponent } from '../icons/icon-component';
+import type { PlaceBusyTrend, PlaceInfoAction, PlaceTransitMode } from './types';
+
+/**
+ * The glyph each row action draws on its right — the one place a reader finds
+ * out what the press will do before making it. `none` draws nothing; a row
+ * that navigates keeps `SettingsListItem`'s own chevron.
+ */
+export const PLACE_INFO_ACTION_ICON: Readonly<
+  Record<Exclude<PlaceInfoAction, 'none' | 'edit'>, BloomIconComponent>
+> = {
+  copy: RiFileCopyLine,
+  call: RiPhoneLine,
+  open: RiExternalLinkLine,
+  directions: RiRouteLine,
+};
+
+/**
+ * What each action does, said at the END of the row's name.
+ *
+ * It belongs to the NAME and not to `accessibilityHint`, which was the first
+ * shape this took: **react-native-web drops `accessibilityHint` entirely** —
+ * the rendered button carries no `title`, no `aria-description`, nothing — so
+ * on web the row announced a fact and never said it could be pressed, while
+ * native read it correctly. Same class as `accessibilityState`, same fix: the
+ * one spelling that reaches both platforms.
+ *
+ * It goes last because the fact is what the reader is looking for. `edit` and
+ * `none` say nothing: an "edit" row's own words already are the verb.
+ */
+export const PLACE_INFO_ACTION_LABELS: Readonly<Record<PlaceInfoAction, string>> = {
+  copy: 'Copy',
+  call: 'Call',
+  open: 'Open website',
+  directions: 'Directions',
+  edit: '',
+  none: '',
+};
+
+/** The English default trend sentences for the current hour. */
+export const PLACE_BUSY_LABELS: Readonly<Record<PlaceBusyTrend, string>> = {
+  busier: 'Busier than usual',
+  typical: 'As busy as it usually is',
+  quieter: 'Quieter than usual',
+};
+
+/** The glyph each kind of stop draws. */
+export const PLACE_TRANSIT_MODE_ICON: Readonly<Record<PlaceTransitMode, BloomIconComponent>> = {
+  bus: RiBusLine,
+  metro: RiSubwayLine,
+  train: RiTrainLine,
+  tram: RiTrainLine,
+  ferry: RiShip2Line,
+};
+
+/** The English default mode words, for a stop's announced name. */
+export const PLACE_TRANSIT_MODE_LABELS: Readonly<Record<PlaceTransitMode, string>> = {
+  bus: 'Bus stop',
+  metro: 'Metro station',
+  train: 'Train station',
+  tram: 'Tram stop',
+  ferry: 'Ferry terminal',
+};
+
+export interface PlaceDetailsGeometry {
+  /** Between the blocks of one section. */
+  blockGap: number;
+  /** Between two rows of a list. */
+  rowGap: number;
+  /** A leading glyph. */
+  glyph: number;
+  /** The popular-times plot, axis labels excluded. */
+  chartHeight: number;
+  /** Under the plot, for the hour labels. */
+  chartAxis: number;
+  /** The corner of a busyness bar and of its track. */
+  barRadius: number;
+  /** A bar's share of its band that is GAP, per side (`barCategoryGap`). */
+  barCategoryGap: number;
+  /** The narrowest an hour label may sit from its neighbour before one is dropped. */
+  hourLabelPitch: number;
+}
+
+/**
+ * One screen, one set of numbers. The gaps are `listing-details`' own rungs
+ * (12 / 16 / 24) so a place's section and a home's section stack identically;
+ * only the chart has measurements of its own, because nothing else in Bloom
+ * draws a day of hours.
+ */
+export const PLACE_DETAILS_GEOMETRY: PlaceDetailsGeometry = {
+  blockGap: 16,
+  rowGap: 12,
+  glyph: 20,
+  chartHeight: 120,
+  chartAxis: 22,
+  barRadius: 4,
+  barCategoryGap: 0.16,
+  hourLabelPitch: 34,
+};

package/src/place-details/index.ts

@@ -0,0 +1,45 @@
+export { PlaceAmenities } from './PlaceAmenities';
+export { PlaceHours } from './PlaceHours';
+export { PlaceInfoList } from './PlaceInfoList';
+export { PlacePopularTimes } from './PlacePopularTimes';
+export { PlaceTransit } from './PlaceTransit';
+export {
+  PLACE_BUSY_LABELS,
+  PLACE_DETAILS_GEOMETRY,
+  PLACE_INFO_ACTION_LABELS,
+  PLACE_INFO_ACTION_ICON,
+  PLACE_TRANSIT_MODE_ICON,
+  PLACE_TRANSIT_MODE_LABELS,
+} from './constants';
+export type { PlaceDetailsGeometry } from './constants';
+export {
+  busyTrendLabel,
+  describeBusyChart,
+  describeDeparture,
+  describeHoursDay,
+  describeInfoItem,
+  describeTransitStop,
+  formatHoursDay,
+  infoActionWord,
+  resolvePlaceDetailsPaint,
+} from './shared';
+export type { HoursFormat, PlaceDetailsPaint } from './shared';
+export type {
+  PlaceAmenitiesLayout,
+  PlaceAmenitiesProps,
+  PlaceAmenity,
+  PlaceBusyHour,
+  PlaceBusyTrend,
+  PlaceHoursDay,
+  PlaceHoursInterval,
+  PlaceHoursProps,
+  PlaceInfoAction,
+  PlaceInfoItem,
+  PlaceInfoListProps,
+  PlacePopularTimesDay,
+  PlacePopularTimesProps,
+  PlaceTransitDeparture,
+  PlaceTransitMode,
+  PlaceTransitProps,
+  PlaceTransitStop,
+} from './types';