@oxy.so/bloom 4.0.0 → 4.1.0

package/src/navigation-banner/ArrivalBar.tsx

@@ -0,0 +1,162 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { Button } from '../button';
+import { GlassIsland } from '../glass';
+import { RiCloseLine } from '../icons/remix/RiCloseLine';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { NAVIGATION_BANNER_GEOMETRY } from './constants';
+import { describeArrival, resolveNavigationPaint } from './shared';
+import type { ArrivalBarProps } from './types';
+
+/**
+ * THE STRIP AT THE BOTTOM while you are driving: when you get there, how long
+ * is left, how far is left, and the way out.
+ *
+ *   pane      `GlassIsland` at the 16 rung, stretched — the same material the
+ *             banner at the top is on, because they are two edges of one
+ *             surface over the same tiles
+ *   figures   THREE PEERS, `title-3-semibold` and TABULAR, each over its own
+ *             quiet caption. Peers because the driver is asking a different
+ *             question of each one and none of them is the answer to the other
+ *             two; tabular because all three count down.
+ *   end       the way out, on the right — `Button` in `destructive` at the 44
+ *             rung, which keeps its own chrome inside the island on purpose (a
+ *             glass control flush with the pane would be the quietest thing on
+ *             a strip whose only action stops the navigation). 44 rather than
+ *             the 32 that looks better in a screenshot: this is pressed in a
+ *             moving car, by a thumb, at the bottom of the screen.
+ *
+ * ── WHY THIS IS NOT `OrderStatusBar` ────────────────────────────────────────
+ *
+ * They look alike and they answer differently shaped questions, and the shape
+ * is the whole component. `OrderStatusBar` has ONE headline with an arrival
+ * reading beside it, a tile, a quiet second line and a progress meter — it says
+ * "here is what is happening, and here is how far along it is". This has THREE
+ * readings of equal weight and no state at all: the journey is happening, and
+ * the driver picks whichever of the three they wanted. Giving `OrderStatusBar`
+ * a three-figure mode would be a second layout behind a prop, and giving this
+ * one a status line and a meter would be a tracker for a journey the user is
+ * ON rather than waiting for.
+ *
+ * They do share a surface rung and their tabular figures, and both take the app
+ * a PRE-FORMATTED reading: neither reads a clock, computes an ETA or knows what
+ * a kilometre is.
+ */
+
+interface FigureProps {
+  label: string;
+  value: string;
+  color: string;
+  labelColor: string;
+  testID?: string;
+}
+
+function Figure({ label, value, color, labelColor, testID }: FigureProps) {
+  return (
+    // `minWidth: 0`: each figure is a nowrap one-liner, so without this its
+    // min-content width becomes the strip's floor and three of them push the
+    // pane past a 390 phone.
+    <View style={{ flex: 1, minWidth: 0, gap: 1 }}>
+      <Text
+        variant="title-3-semibold"
+        numberOfLines={1}
+        testID={testID}
+        style={{ color, fontVariant: ['tabular-nums'] }}
+      >
+        {value}
+      </Text>
+      <Text variant="caption-2-medium" numberOfLines={1} style={{ color: labelColor }}>
+        {label}
+      </Text>
+    </View>
+  );
+}
+
+function ArrivalBarComponent({
+  arrival,
+  remainingTime,
+  remainingDistance,
+  onEnd,
+  action,
+  labels,
+  accessibilityLabel,
+  style,
+  testID,
+}: ArrivalBarProps) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveNavigationPaint(theme), [theme]);
+  const g = NAVIGATION_BANNER_GEOMETRY;
+  const endWord = labels?.end ?? 'End';
+
+  return (
+    <GlassIsland
+      radius={g.radius}
+      style={[{ alignSelf: 'stretch', flexDirection: 'column' }, style]}
+      testID={testID}
+    >
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 12,
+          padding: g.padding,
+        }}
+      >
+        <View
+          role="img"
+          accessibilityLabel={
+            accessibilityLabel ??
+            describeArrival({ arrival, remainingTime, remainingDistance, labels })
+          }
+          style={{ flex: 1, minWidth: 0, flexDirection: 'row', alignItems: 'center', gap: 12 }}
+        >
+          <View
+            aria-hidden
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
+            style={{ flex: 1, minWidth: 0, flexDirection: 'row', alignItems: 'center', gap: 12 }}
+          >
+            <Figure
+              label={labels?.arrival ?? 'Arrival'}
+              value={arrival}
+              color={paint.text}
+              labelColor={paint.textTertiary}
+              testID={testID ? `${testID}-arrival` : undefined}
+            />
+            <Figure
+              label={labels?.time ?? 'Left'}
+              value={remainingTime}
+              color={paint.text}
+              labelColor={paint.textTertiary}
+              testID={testID ? `${testID}-time` : undefined}
+            />
+            <Figure
+              label={labels?.distance ?? 'Distance'}
+              value={remainingDistance}
+              color={paint.text}
+              labelColor={paint.textTertiary}
+              testID={testID ? `${testID}-distance` : undefined}
+            />
+          </View>
+        </View>
+        {action ??
+          (onEnd ? (
+            <Button
+              variant="destructive"
+              size="lg"
+              icon={RiCloseLine}
+              onPress={onEnd}
+              testID={testID ? `${testID}-end` : undefined}
+            >
+              {endWord}
+            </Button>
+          ) : null)}
+      </View>
+    </GlassIsland>
+  );
+}
+
+export const ArrivalBar = memo(ArrivalBarComponent);
+ArrivalBar.displayName = 'ArrivalBar';

package/src/navigation-banner/LaneGuidance.tsx

@@ -0,0 +1,103 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { DIRECTIONS_MANEUVER_ICON } from '../directions/maneuvers';
+import { borderRadius } from '../styles/tokens';
+import { resolveAccentColors } from '../theme/accent-colors';
+import { useTheme } from '../theme/use-theme';
+import { NAVIGATION_BANNER_GEOMETRY } from './constants';
+import { describeLanes, resolveNavigationPaint } from './shared';
+import type { LaneGuidanceProps, NavigationLane } from './types';
+
+/**
+ * THE LANES ACROSS, and which of them take you where you are going.
+ *
+ *   cell      38 tall, 12 radius, one per lane, left to right as the driver
+ *             sees them. A lane painted with several arrows grows sideways
+ *             rather than stacking them — a driver reads a lane by counting
+ *             across, so a cell that is taller than its neighbours breaks the
+ *             count.
+ *   allowed   the accent's own tint with the arrow in that tint's accent
+ *   quiet     no fill, and the arrow at the GRAPHICAL rung — the one that is
+ *             floored for a glyph rather than for text, which is what an arrow
+ *             is
+ *   preferred within an allowed lane, the one arrow to take stays at full
+ *             strength while its siblings drop to the quiet rung: a lane that
+ *             also goes straight on is still the lane you want
+ *
+ * The arrows are `DIRECTIONS_MANEUVER_ICON`, keyed by a SUBSET of the maneuver
+ * vocabulary. A lane arrow is a maneuver drawn small; a second glyph map would
+ * be a second opinion about what "slight right" looks like.
+ *
+ * The row is one `img` named by `describeLanes` — four arrows in a row say
+ * nothing aloud, and a reader who cannot see them still has to be told which
+ * lane to be in.
+ */
+function laneArrowColor(
+  lane: NavigationLane,
+  direction: LaneDirectionLocal,
+  colors: { accent: string; quiet: string },
+): string {
+  if (!lane.allowed) return colors.quiet;
+  if (lane.preferred === undefined) return colors.accent;
+  return lane.preferred === direction ? colors.accent : colors.quiet;
+}
+
+type LaneDirectionLocal = NavigationLane['directions'][number];
+
+function LaneGuidanceComponent({
+  lanes,
+  labels,
+  accessibilityLabel,
+  style,
+  testID,
+}: LaneGuidanceProps) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveNavigationPaint(theme), [theme]);
+  const accent = resolveAccentColors(theme.colors, 'primary', 'subtle');
+  const g = NAVIGATION_BANNER_GEOMETRY;
+  const colors = { accent: accent.foreground, quiet: paint.textGraphical };
+
+  return (
+    <View
+      role="img"
+      accessibilityLabel={accessibilityLabel ?? describeLanes(lanes, labels)}
+      testID={testID}
+      style={[{ flexDirection: 'row', alignItems: 'center', gap: 4 }, style]}
+    >
+      {lanes.map((lane, index) => (
+        <View
+          key={lane.id ?? index}
+          testID={testID ? `${testID}-lane-${index}` : undefined}
+          style={{
+            minWidth: g.laneWidth,
+            height: g.lane,
+            paddingLeft: 4,
+            paddingRight: 4,
+            borderRadius: borderRadius.md,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 2,
+            backgroundColor: lane.allowed ? accent.background : 'transparent',
+          }}
+        >
+          {lane.directions.map((direction, arrow) => {
+            const Arrow = DIRECTIONS_MANEUVER_ICON[direction];
+            return (
+              <Arrow
+                key={`${direction}-${arrow}`}
+                width={g.smallGlyph}
+                height={g.smallGlyph}
+                fill={laneArrowColor(lane, direction, colors)}
+              />
+            );
+          })}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+export const LaneGuidance = memo(LaneGuidanceComponent);
+LaneGuidance.displayName = 'LaneGuidance';

package/src/navigation-banner/NavigationBanner.tsx

@@ -0,0 +1,214 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { DIRECTIONS_MANEUVER_ICON } from '../directions/maneuvers';
+import { GlassIsland } from '../glass';
+import { borderRadius } from '../styles/tokens';
+import { resolveAccentColors } from '../theme/accent-colors';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import {
+  NAVIGATION_BANNER_GEOMETRY,
+  NAVIGATION_STATE_ICON,
+  NAVIGATION_STATE_LABELS,
+  NAVIGATION_STATE_TONE,
+} from './constants';
+import { describeNavigationBanner, maneuverWordFor, resolveNavigationPaint } from './shared';
+import type { NavigationBannerProps } from './types';
+
+/**
+ * THE NEXT MANEUVER, while it is happening.
+ *
+ *   pane        `GlassIsland` at the 16 rung — the guidance is drawn over tiles
+ *               Bloom does not own, and the island is the one material in the
+ *               library priced for that. It is asked for a SURFACE radius
+ *               rather than its default capsule: a banner is a surface, and the
+ *               pill rung belongs to button-like controls.
+ *   tile        56 square, 12 radius, the state's tone as a tint with the
+ *               maneuver glyph in that tone's own accent — the same tile recipe
+ *               `OrderStatusBar` paints, at the size a driver reads without
+ *               focusing.
+ *   glyph       `DIRECTIONS_MANEUVER_ICON`. The SAME map the step list beside
+ *               it uses: two sets of arrows for one vocabulary is two answers
+ *               to the question "which way is slight right".
+ *   headline    the distance, TABULAR, so a reading counting down from 400 m
+ *               does not shuffle the street name under it
+ *   instruction the street, up to two lines
+ *   then        the maneuver after this one, behind a full-bleed hairline
+ *   children    lanes, a speed sign — behind a second hairline, and outside the
+ *               announcement, because each names itself
+ *
+ * ── THE TWO EXCEPTIONAL STATES ARE THIS COMPONENT ───────────────────────────
+ *
+ * `off-route` and `rerouting` take the same strip, in the same place, at the
+ * same moment. A separate surface appearing where this one was is a jump, and
+ * the driver has to find the thing they were already reading. So the state
+ * swaps the glyph, the tone and the headline, and the maneuver — which is no
+ * longer true — stops being announced at all.
+ *
+ * ── THE ROW IS ONE UTTERANCE ────────────────────────────────────────────────
+ *
+ * The glyph is the only thing on screen that says which way to turn, and a
+ * glyph says nothing aloud. The maneuver row is therefore one `img` named by
+ * `describeNavigationBanner`, with its drawn text hidden from assistive
+ * technology so the distance is not read twice. `children` sit OUTSIDE that
+ * name: a lane row and a speed sign each announce themselves.
+ */
+function NavigationBannerComponent({
+  maneuver,
+  distance,
+  instruction,
+  thenManeuver,
+  then,
+  state = 'guiding',
+  children,
+  labels,
+  accessibilityLabel,
+  style,
+  testID,
+}: NavigationBannerProps) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveNavigationPaint(theme), [theme]);
+  const g = NAVIGATION_BANNER_GEOMETRY;
+
+  const guiding = state === 'guiding';
+  const tone = guiding ? 'primary' : NAVIGATION_STATE_TONE[state];
+  const accent = resolveAccentColors(theme.colors, tone, 'subtle');
+  const Glyph = guiding ? DIRECTIONS_MANEUVER_ICON[maneuver] : NAVIGATION_STATE_ICON[state];
+
+  const stateHeadline = guiding
+    ? undefined
+    : ((state === 'off-route' ? labels?.offRoute : labels?.rerouting) ??
+      NAVIGATION_STATE_LABELS[state]);
+  const headline = stateHeadline ?? distance;
+  const thenWord = labels?.then ?? 'then';
+  const ThenGlyph = thenManeuver !== undefined ? DIRECTIONS_MANEUVER_ICON[thenManeuver] : null;
+  const thenLine =
+    guiding && (thenManeuver !== undefined || then)
+      ? [
+          thenWord,
+          thenManeuver !== undefined ? maneuverWordFor(thenManeuver, labels).toLowerCase() : null,
+          then,
+        ]
+          .filter(Boolean)
+          .join(' ')
+      : null;
+
+  const name =
+    accessibilityLabel ??
+    describeNavigationBanner({ maneuver, distance, instruction, then, thenManeuver, state, labels });
+
+  return (
+    <GlassIsland
+      radius={g.radius}
+      style={[{ alignSelf: 'stretch', flexDirection: 'column' }, style]}
+      testID={testID}
+    >
+      <View role="img" accessibilityLabel={name} testID={testID ? `${testID}-guidance` : undefined}>
+        <View aria-hidden accessibilityElementsHidden importantForAccessibility="no-hide-descendants">
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              gap: g.padding,
+              padding: g.padding,
+            }}
+          >
+            <View
+              testID={testID ? `${testID}-glyph` : undefined}
+              style={{
+                width: g.glyph,
+                height: g.glyph,
+                borderRadius: borderRadius.md,
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: accent.background,
+              }}
+            >
+              <Glyph width={g.glyphIcon} height={g.glyphIcon} fill={accent.foreground} />
+            </View>
+            {/*
+              `minWidth: 0` on the COLUMN, not only on the texts inside it: a
+              `numberOfLines={1}` Text is `white-space: nowrap` on web, so its
+              min-content width is the whole string, and a flex child without
+              this takes that as its floor and pushes the pane wider than the
+              phone it is on.
+            */}
+            <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
+              {headline ? (
+                <Text
+                  variant="title-2-semibold"
+                  numberOfLines={1}
+                  testID={testID ? `${testID}-headline` : undefined}
+                  style={{
+                    color: paint.text,
+                    ...(guiding ? { fontVariant: ['tabular-nums' as const] } : null),
+                  }}
+                >
+                  {headline}
+                </Text>
+              ) : null}
+              <Text
+                variant={headline ? 'headline-medium' : 'title-2-semibold'}
+                numberOfLines={2}
+                testID={testID ? `${testID}-instruction` : undefined}
+                style={{ color: headline ? paint.textSecondary : paint.text }}
+              >
+                {instruction}
+              </Text>
+            </View>
+          </View>
+          {thenLine ? (
+            <View
+              testID={testID ? `${testID}-then` : undefined}
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+                paddingLeft: g.padding,
+                paddingRight: g.padding,
+                paddingTop: 10,
+                paddingBottom: 10,
+                borderTopWidth: 1,
+                borderTopColor: paint.border,
+              }}
+            >
+              {ThenGlyph ? (
+                <ThenGlyph
+                  width={g.smallGlyph}
+                  height={g.smallGlyph}
+                  fill={paint.textSecondary}
+                />
+              ) : null}
+              <Text
+                variant="body-2-medium"
+                numberOfLines={1}
+                style={{ flex: 1, minWidth: 0, color: paint.textSecondary }}
+              >
+                {thenLine}
+              </Text>
+            </View>
+          ) : null}
+        </View>
+      </View>
+      {children != null ? (
+        <View
+          testID={testID ? `${testID}-extras` : undefined}
+          style={{
+            paddingLeft: g.padding,
+            paddingRight: g.padding,
+            paddingTop: 10,
+            paddingBottom: 10,
+            borderTopWidth: 1,
+            borderTopColor: paint.border,
+          }}
+        >
+          {children}
+        </View>
+      ) : null}
+    </GlassIsland>
+  );
+}
+
+export const NavigationBanner = memo(NavigationBannerComponent);
+NavigationBanner.displayName = 'NavigationBanner';

package/src/navigation-banner/SpeedLimitPill.tsx

@@ -0,0 +1,100 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { bloomShadowStyle } from '../design-tokens/shadows';
+import { resolveMapMarkerPaint } from '../map-marker/shared';
+import { resolveAccentColors } from '../theme/accent-colors';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { NAVIGATION_BANNER_GEOMETRY } from './constants';
+import { describeSpeedLimit, resolveNavigationPaint } from './shared';
+import type { SpeedLimitPillProps } from './types';
+
+/**
+ * THE POSTED LIMIT: a round sign, small enough to sit beside the guidance and
+ * legible enough to read off a windscreen mount.
+ *
+ *   sign      48 round with a 4 ring in the tone, on the SAME chrome surface
+ *             every floating map piece paints, with `shadow-s` — so it reads on
+ *             a satellite tile as well as on a pale street map
+ *   number    `title-3-bold`, TABULAR, one line, never truncated
+ *   unit      `caption-2-medium` under the sign, quiet
+ *
+ * ── `exceeded` FILLS THE SIGN, IT DOES NOT BRIGHTEN IT ──────────────────────
+ *
+ * A sign that only changed shade is a sign a driver reads as the same sign; the
+ * change has to be one that survives a glance, in daylight, at an angle. So
+ * over the limit the ring's tone becomes the FILL and the number takes that
+ * fill's own on-colour, which is the pair `resolveAccentColors` already
+ * guarantees is legible. Nothing moves, and nothing flashes: a warning that
+ * animates in a car is a warning that asks for attention the road needs.
+ *
+ * The sign is a CIRCLE because it is a sign, not a capsule of text — the pill
+ * rung is for button-like controls and this is not one.
+ */
+function SpeedLimitPillComponent({
+  limit,
+  unit,
+  exceeded = false,
+  tone = 'error',
+  accessibilityLabel,
+  exceededLabel,
+  style,
+  testID,
+}: SpeedLimitPillProps) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveNavigationPaint(theme), [theme]);
+  const map = useMemo(() => resolveMapMarkerPaint(theme), [theme]);
+  const solid = resolveAccentColors(theme.colors, tone, 'solid');
+  const g = NAVIGATION_BANNER_GEOMETRY;
+
+  return (
+    <View
+      role="img"
+      accessibilityLabel={
+        accessibilityLabel ?? describeSpeedLimit({ limit, unit, exceeded, exceededLabel })
+      }
+      testID={testID}
+      style={[{ alignItems: 'center', gap: 2 }, style]}
+    >
+      <View
+        testID={testID ? `${testID}-sign` : undefined}
+        style={{
+          width: g.sign,
+          height: g.sign,
+          borderRadius: g.sign / 2,
+          borderWidth: g.signRing,
+          borderColor: solid.background,
+          backgroundColor: exceeded ? solid.background : map.surface,
+          alignItems: 'center',
+          justifyContent: 'center',
+          ...bloomShadowStyle('s'),
+        }}
+      >
+        <Text
+          variant="title-3-bold"
+          numberOfLines={1}
+          style={{
+            color: exceeded ? solid.foreground : paint.text,
+            fontVariant: ['tabular-nums'],
+          }}
+        >
+          {limit}
+        </Text>
+      </View>
+      {unit ? (
+        <Text
+          variant="caption-2-medium"
+          numberOfLines={1}
+          testID={testID ? `${testID}-unit` : undefined}
+          style={{ color: paint.textTertiary }}
+        >
+          {unit}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+export const SpeedLimitPill = memo(SpeedLimitPillComponent);
+SpeedLimitPill.displayName = 'SpeedLimitPill';

package/src/navigation-banner/constants.ts

@@ -0,0 +1,78 @@
+import { RiErrorWarningLine } from '../icons/remix/RiErrorWarningLine';
+import { RiLoopRightLine } from '../icons/remix/RiLoopRightLine';
+import type { BloomIconComponent } from '../icons/icon-component';
+import { borderRadius } from '../styles/tokens';
+import type { AccentTone } from '../theme/accent-colors';
+import type { NavigationBannerState } from './types';
+
+export interface NavigationBannerGeometry {
+  /** The pane's radius. A banner is a SURFACE, so it takes a rung of the scale, not the pill. */
+  radius: number;
+  /** The pane's padding. */
+  padding: number;
+  /** The maneuver glyph's square. */
+  glyph: number;
+  /** The glyph drawn inside it. */
+  glyphIcon: number;
+  /** The smaller glyph on the "then" line, and on a lane arrow. */
+  smallGlyph: number;
+  /** One lane cell's height. */
+  lane: number;
+  /** One lane cell's minimum width — a cell with one arrow. */
+  laneWidth: number;
+  /** The speed sign's outer diameter. */
+  sign: number;
+  /** The ring around it. */
+  signRing: number;
+}
+
+/**
+ * 56 for the maneuver glyph is the largest square that leaves the distance
+ * figure room on a 390 phone with the pane's own padding either side, and the
+ * glyph is the one thing on the banner a driver reads without focusing.
+ *
+ * The speed sign is 48 with a 4 ring: below 44 the number stops being legible
+ * at arm's length, and a ring thinner than 4 stops reading as a sign at all.
+ */
+export const NAVIGATION_BANNER_GEOMETRY: NavigationBannerGeometry = {
+  radius: borderRadius.lg,
+  padding: 14,
+  glyph: 56,
+  glyphIcon: 40,
+  smallGlyph: 18,
+  lane: 38,
+  laneWidth: 30,
+  sign: 48,
+  signRing: 4,
+};
+
+/** The glyph each exceptional state draws in place of a maneuver. */
+export const NAVIGATION_STATE_ICON: Readonly<
+  Record<Exclude<NavigationBannerState, 'guiding'>, BloomIconComponent>
+> = {
+  'off-route': RiErrorWarningLine,
+  rerouting: RiLoopRightLine,
+};
+
+/**
+ * The tone each exceptional state paints.
+ *
+ * `rerouting` is `warning` rather than `error`: nothing is wrong yet, the app
+ * is working, and a red banner at that moment tells a driver to act when the
+ * only correct action is to keep driving. `off-route` IS the error — the line
+ * on the map no longer describes where the car is.
+ */
+export const NAVIGATION_STATE_TONE: Readonly<
+  Record<Exclude<NavigationBannerState, 'guiding'>, AccentTone>
+> = {
+  'off-route': 'error',
+  rerouting: 'warning',
+};
+
+/** The English default headline for each exceptional state. */
+export const NAVIGATION_STATE_LABELS: Readonly<
+  Record<Exclude<NavigationBannerState, 'guiding'>, string>
+> = {
+  'off-route': 'Off route',
+  rerouting: 'Finding a new route',
+};

package/src/navigation-banner/index.ts

@@ -0,0 +1,32 @@
+export { ArrivalBar } from './ArrivalBar';
+export { LaneGuidance } from './LaneGuidance';
+export { NavigationBanner } from './NavigationBanner';
+export { SpeedLimitPill } from './SpeedLimitPill';
+export {
+  NAVIGATION_BANNER_GEOMETRY,
+  NAVIGATION_STATE_ICON,
+  NAVIGATION_STATE_LABELS,
+  NAVIGATION_STATE_TONE,
+} from './constants';
+export type { NavigationBannerGeometry } from './constants';
+export {
+  describeArrival,
+  describeLanes,
+  describeNavigationBanner,
+  describeSpeedLimit,
+  maneuverWordFor,
+  resolveNavigationPaint,
+} from './shared';
+export type { NavigationPaint } from './shared';
+export type {
+  ArrivalBarLabels,
+  ArrivalBarProps,
+  LaneDirection,
+  LaneGuidanceLabels,
+  LaneGuidanceProps,
+  NavigationBannerLabels,
+  NavigationBannerProps,
+  NavigationBannerState,
+  NavigationLane,
+  SpeedLimitPillProps,
+} from './types';