@oxy.so/bloom 4.0.0 → 4.2.0

package/src/sidebar/SidebarRail.tsx

@@ -4,6 +4,7 @@ import { View } from 'react-native';
 import { Badge } from '../badge';
 import { useSidebarPalette } from './palette';
 import { IS_WEB } from './parts';
+import { SidebarPrimaryAction } from './SidebarPrimaryAction';
 import { SidebarScrollArea } from './SidebarScrollArea';
 import { SidebarLogoView } from './SidebarLogoView';
 import { SidebarRailItem } from './SidebarRailItem';
@@ -27,6 +28,8 @@ export const SIDEBAR_RAIL_WIDTH = 80;
 export function SidebarRail({
   logo,
   items = [],
+  primaryAction,
+  footer,
   secondaryItems = [],
   selected,
   onNavigate,
@@ -47,6 +50,7 @@ export function SidebarRail({
         href={item.href}
         selected={isSelected}
         onPress={onPress}
+        onLongPress={item.onLongPress}
         testID={`sidebar-item-${item.key}`}
         badge={
           item.badge !== undefined ? (
@@ -102,6 +106,9 @@ export function SidebarRail({
           {items.map(renderItem)}
         </View>
       </SidebarScrollArea>
+      {primaryAction ? <View style={{ flexShrink: 0, paddingLeft: 8, paddingRight: 8, paddingBottom: 24 }}>
+        <SidebarPrimaryAction action={primaryAction} rail testID={testID ? `${testID}-primary-action` : undefined} />
+      </View> : null}
       {secondaryItems.length > 0 ? (
         <View
           role="navigation"
@@ -110,6 +117,9 @@ export function SidebarRail({
           {secondaryItems.map(renderItem)}
         </View>
       ) : null}
+      {footer != null ? <View testID={testID ? `${testID}-footer` : 'sidebar-footer'} style={{ flexShrink: 0, width: '100%', paddingLeft: 8, paddingRight: 8, paddingBottom: 24 }}>
+        {typeof footer === 'function' ? footer({ collapsed: true }) : footer}
+      </View> : null}
     </View>
   );
 }

package/src/sidebar/SidebarRailItem.tsx

@@ -38,6 +38,7 @@ const SidebarRailItemComponent: React.FC<SidebarRailItemProps> = ({
   badge,
   selected = false,
   onPress,
+  onLongPress,
   style,
   testID,
 }) => {
@@ -71,6 +72,7 @@ const SidebarRailItemComponent: React.FC<SidebarRailItemProps> = ({
       accessibilityState={{ selected }}
       onHoverIn={onIn}
       onHoverOut={onOut}
+      onLongPress={onLongPress}
       onPress={(event: GestureResponderEvent) => {
         if (!onPress) return;
         if (IS_WEB && href) event.preventDefault();

package/src/sidebar/SidebarTeamMenu.tsx

@@ -15,6 +15,7 @@ import { BREAKPOINTS } from '../styles/breakpoints';
 import { borderRadius } from '../styles/tokens';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { Text } from '../typography';
+import { useSidebarGeometry } from './geometry';
 import { useSidebarPalette, type SidebarPalette } from './palette';
 import {
   ChevronDownSmall,
@@ -158,6 +159,8 @@ const SidebarTeamMenuComponent: React.FC<SidebarTeamMenuProps> = ({ team, collap
 
   const progress = useSidebarCollapseProgress(collapsed);
   const inSidebar = useInSidebar();
+  const lane = useSidebarGeometry();
+  const compactPadding = lane ? Math.max(0, (lane.collapsedLane - 32) / 2) : 2;
   const naturalWidth = useSharedValue(0);
   const expandedHeight = team.email ? 60 : 52;
   const geometry = useAnimatedStyle(() => {
@@ -165,8 +168,8 @@ const SidebarTeamMenuComponent: React.FC<SidebarTeamMenuProps> = ({ team, collap
     const height = expandedHeight + (36 - expandedHeight) * p;
     return { width: inSidebar ? '100%' : naturalWidth.value > 0 ? naturalWidth.value + (36 - naturalWidth.value) * p : p === 1 ? 36 : '100%',
       height,
-      borderRadius: height / 2, paddingLeft: 10 * (1 - p), paddingRight: 16 * (1 - p) };
-  }, [progress, expandedHeight, inSidebar, naturalWidth]);
+      borderRadius: height / 2, paddingLeft: 10 + (compactPadding - 10) * p, paddingRight: 16 + (compactPadding - 16) * p };
+  }, [progress, expandedHeight, inSidebar, naturalWidth, compactPadding]);
   const fill = useAnimatedStyle(() => ({ opacity: 1 - progress.value }), [progress]);
   const cardStyle: WebCssStyle = {
     width: '100%', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between',

package/src/sidebar/SidebarUserMenu.tsx

@@ -11,6 +11,7 @@ import { BREAKPOINTS } from '../styles/breakpoints';
 import { borderRadius } from '../styles/tokens';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { Text } from '../typography';
+import { useSidebarGeometry } from './geometry';
 import { useSidebarPalette, type SidebarPalette } from './palette';
 import {
   ChevronUpDownSmall,
@@ -160,7 +161,10 @@ const SidebarUserMenuComponent: React.FC<SidebarUserMenuProps> = ({
   const { state: hovered, onIn, onOut } = useInteractionState();
 
   const progress = useSidebarCollapseProgress(collapsed);
-  const triggerGeometry = useAnimatedStyle(() => ({ paddingLeft: 2 * progress.value, paddingRight: 2 * progress.value }), [progress]);
+  const lane = useSidebarGeometry();
+  const startPadding = lane ? Math.max(0, (lane.expandedLane - 32) / 2) : 0;
+  const endPadding = lane ? Math.max(0, (lane.collapsedLane - 32) / 2) : 2;
+  const triggerGeometry = useAnimatedStyle(() => ({ paddingLeft: startPadding + (endPadding - startPadding) * progress.value, paddingRight: startPadding + (endPadding - startPadding) * progress.value }), [progress, startPadding, endPadding]);
   const hoverGeometry = useAnimatedStyle(() => ({ left: -6 + 3 * progress.value, right: -6 + 3 * progress.value }), [progress]);
   const triggerStyle: WebCssStyle = {
     position: 'relative',

package/src/sidebar/geometry.ts

@@ -0,0 +1,22 @@
+import { FAB_METRICS } from '../fab/constants';
+import { createContext, useContext } from 'react';
+import type { SidebarMetrics } from './metrics';
+import type { SidebarSurface } from './types';
+
+export const SIDEBAR_ACTION_DIAMETER = FAB_METRICS.md.diameter;
+
+/** The lane is shared by every collapsed control, independently of row height. */
+export function resolveSidebarGeometry(metrics: SidebarMetrics, surface: SidebarSurface, hasAction: boolean, hasTree = false) {
+  const expandedInset = hasTree ? 0 : 2;
+  const collapsedLane = Math.max(metrics.row.square, hasAction ? SIDEBAR_ACTION_DIAMETER : 0);
+  const borderWidth = surface === 'card' ? 2 : surface === 'docked' ? 1 : 0;
+  return {
+    expandedInset,
+    expandedLane: metrics.row.square + expandedInset * 2,
+    collapsedLane,
+    collapsedWidth: collapsedLane + metrics.collapsedPaddingX * 2 + borderWidth,
+  };
+}
+const SidebarGeometryContext = createContext<ReturnType<typeof resolveSidebarGeometry> | null>(null);
+export const SidebarGeometryProvider = SidebarGeometryContext.Provider;
+export function useSidebarGeometry() { return useContext(SidebarGeometryContext); }

package/src/sidebar/metrics.ts

@@ -49,16 +49,15 @@ function size(expanded: number, padding: number, icon: number, label: TypeScaleV
 }
 
 /**
- * The three row sizes. `md` is what this sidebar has always drawn, to the
- * pixel — 260 expanded, 52 collapsed, a 36px square, a 20px glyph and a
- * `body-medium` label.
+ * The three row sizes. `md` balances compact controls with readable labels — 260 expanded, 56 collapsed, a 40px square, a 22px glyph and a
+ * `headline-medium` label.
  */
 export const SIDEBAR_METRICS: Record<SidebarSize, SidebarMetrics> = {
   sm: size(232, 6, 18, 'body-2-medium'),
-  md: size(260, 8, 20, 'body-medium'),
+  md: size(260, 9, 22, 'headline-medium'),
   lg: size(300, 10, 24, 'title-3-medium'),
   small: size(232, 6, 18, 'body-2-medium'),
-  medium: size(260, 8, 20, 'body-medium'),
+  medium: size(260, 9, 22, 'headline-medium'),
   large: size(300, 10, 24, 'title-3-medium'),
 };
 

package/src/sidebar/types.ts

@@ -35,6 +35,8 @@ export interface SidebarNavItem {
    * `onNavigate` is not called for this row.
    */
   onPress?: () => void;
+  /** Secondary touch action. Also expose it through a keyboard-accessible menu. */
+  onLongPress?: () => void;
 }
 
 /** One mode of a {@link SidebarModeSwitcherProps.modes} switcher. */
@@ -70,9 +72,11 @@ export interface SidebarItemProps {
   href?: string;
   badge?: ReactNode;
   selected?: boolean;
-  /** Icon-only 36px square (the collapsed rail). */
+  /** Icon-only square matching the sidebar size (40px for md). */
   collapsed?: boolean;
   onPress?: () => void;
+  /** Secondary touch action. Also expose it through a keyboard-accessible menu. */
+  onLongPress?: () => void;
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }
@@ -87,6 +91,8 @@ export interface SidebarRailItemProps {
   badge?: ReactNode;
   selected?: boolean;
   onPress?: () => void;
+  /** Secondary touch action. Also expose it through a keyboard-accessible menu. */
+  onLongPress?: () => void;
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }
@@ -120,7 +126,7 @@ export type SidebarSurface = 'card' | 'plain' | 'docked';
  * measurement in `SIDEBAR_METRICS`:
  *
  * - `sm`  a 30px square, an 18px glyph, `body-2-medium`; 232 expanded, 46 collapsed
- * - `md` (default) 36 / 20 / `body-medium`; 260 expanded, 52 collapsed
+ * - `md` (default) 40 / 22 / `headline-medium`; 260 expanded, 56 collapsed
  * - `lg`  44 / 24 / `title-3-medium`; 300 expanded, 60 collapsed — the
  *   destination-first rail a social app reads with at arm's length
  */
@@ -226,6 +232,18 @@ export interface SidebarUserMenuProps {
 }
 
 export interface SidebarProps {
+  /** Additional persistent bottom content, outside destination scrolling.
+   * Receives the rendered state: true in a rail, false in a mobile panel.
+   * Existing account/theme/team controls remain; omit account when supplying your own account footer.
+   */
+  footer?: ReactNode | ((state: { collapsed: boolean }) => ReactNode);
+  /** Persistent primary action below destinations. Its label collapses to a named icon button. */
+  primaryAction?: {
+    label: string;
+    icon: SidebarIcon;
+    onPress: () => void;
+    disabled?: boolean;
+  };
   /** Defaults to `panel`. */
   variant?: SidebarVariant;
   /** Primary navigation rows. */

package/src/styles/web-view-style.ts

@@ -30,6 +30,9 @@ export const WEB_POSITION_FIXED = 'fixed' as ViewStyle['position'];
  */
 export const WEB_POSITION_STICKY = 'sticky' as ViewStyle['position'];
 
+/** A framed document surface publishes its top edge; ordinary pages use zero. */
+export const WEB_SURFACE_STICKY_TOP = 'var(--bloom-panel-sticky-top, 0px)' as ViewStyle['top'];
+
 /**
  * One viewport of height (`100dvh`), and one viewport minus a vertical inset,
  * typed for React Native's `ViewStyle`. Same kind of gap as

package/src/vehicle-picker/VehiclePicker.tsx

@@ -0,0 +1,198 @@
+import React, { useMemo } from 'react';
+import { View, type TextStyle } from 'react-native';
+
+import { Chip } from '../chip';
+import { useContainerWidth } from '../hooks/use-container-width';
+import { RiErrorWarningLine } from '../icons/remix/RiErrorWarningLine';
+import { resolveSelectionPaint, SelectionCard } from '../listing-editor/SelectionCard';
+import { resolveAccentColors } from '../theme/accent-colors';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import {
+  VEHICLE_ICON,
+  VEHICLE_OPTIONS,
+  VEHICLE_PICKER_GEOMETRY,
+  VEHICLE_PICKER_LABELS,
+} from './constants';
+import { vehicleOptionName } from './shared';
+import type { VehicleKind, VehicleOption, VehiclePickerProps } from './types';
+
+/**
+ * Which vehicle the job needs: a column of selectable vehicle cards, each one
+ * saying what it can take, what fits in it and what it starts at.
+ *
+ *   heading   `title` at `body-semibold` over `description` at
+ *             `body-2-regular`, the shape a search panel's pickers use, 16
+ *             above the first option. Omit both and the picker starts at the
+ *             list
+ *   option    the editor's selectable card: a 44 icon tile, the vehicle's name
+ *             at `headline-semibold`, its capacity under it, and the radio
+ *             indicator on the right
+ *   detail    under the card's hairline: the `fits` nouns as outlined chips,
+ *             then a "From · amount" line in tabular figures
+ *   blocked   a disabled card, dimmed, with its reason on a warning-toned line
+ *             under the detail — and the same reason inside the card's name, so
+ *             it is announced rather than merely drawn
+ *
+ * ONE ANSWER. The group is a `radiogroup` and every card a `radio`: a job goes
+ * in one vehicle, and an empty selection is a job that has not chosen yet.
+ *
+ * THE DETAIL IS NOT A DISCLOSURE. Every card shows its capacity, its chips and
+ * its price at rest, because the question the picker answers is a COMPARISON —
+ * a card that reveals its numbers only once chosen makes the user select four
+ * vehicles to choose one.
+ *
+ * MONEY ARRIVES FORMATTED. `priceFrom` is drawn exactly as given; nothing here
+ * adds, converts or rounds an amount.
+ */
+
+const TABULAR: TextStyle = { fontVariant: ['tabular-nums'] };
+
+export function VehiclePicker<T extends string = VehicleKind>({
+  value,
+  onValueChange,
+  options = VEHICLE_OPTIONS as unknown as readonly VehicleOption<T>[],
+  title,
+  description,
+  disabled = false,
+  labels: labelOverrides,
+  accessibilityLabel = 'Vehicle',
+  style,
+  testID,
+}: VehiclePickerProps<T>) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveSelectionPaint(theme), [theme]);
+  const labels = useMemo(() => ({ ...VEHICLE_PICKER_LABELS, ...labelOverrides }), [labelOverrides]);
+  // The picker measures ITSELF: the same component is a full phone column and a
+  // 420-wide panel beside a map, and the window cannot tell those apart.
+  const { width, onLayout } = useContainerWidth();
+  const compact = width !== null && width < VEHICLE_PICKER_GEOMETRY.narrowWidth;
+  const warning = useMemo(() => resolveAccentColors(theme.colors, 'warning', 'subtle'), [theme]);
+  const id = (part: string) => (testID ? `${testID}-${part}` : undefined);
+
+  return (
+    <View testID={testID} onLayout={onLayout} style={style}>
+      {title || description ? (
+        <View style={{ gap: 2, marginBottom: VEHICLE_PICKER_GEOMETRY.headingGap }}>
+          {title ? (
+            <Text
+              variant="body-semibold"
+              role="heading"
+              aria-level={3}
+              style={{ color: paint.text }}
+              testID={id('title')}
+            >
+              {title}
+            </Text>
+          ) : null}
+          {description ? (
+            <Text variant="body-2-regular" style={{ color: paint.textSecondary }}>
+              {description}
+            </Text>
+          ) : null}
+        </View>
+      ) : null}
+
+      <View
+        role="radiogroup"
+        accessibilityLabel={accessibilityLabel}
+        style={{ gap: VEHICLE_PICKER_GEOMETRY.gap }}
+      >
+        {options.map((option) => {
+          const blocked = disabled || option.disabled === true;
+          const reason = option.disabled === true ? (option.unavailableReason ?? labels.unavailable) : undefined;
+          const chips = option.fits ?? [];
+          const hasDetail = chips.length > 0 || option.priceFrom !== undefined || reason !== undefined;
+          const icon =
+            option.icon ?? VEHICLE_ICON[option.value as unknown as VehicleKind] ?? undefined;
+
+          return (
+            <SelectionCard
+              key={option.value}
+              selection="single"
+              selected={value === option.value}
+              // A disabled card never reaches this, and the card itself stops
+              // re-reporting a choice already made.
+              onPress={() => {
+                if (value !== option.value) onValueChange(option.value);
+              }}
+              title={option.label}
+              description={option.capacity}
+              icon={icon}
+              compact={compact}
+              disabled={blocked}
+              // The name carries the capacity and the reason, because both are
+              // drawn as separate lines that no name computation would reach.
+              accessibilityLabel={vehicleOptionName(option, { from: labels.from, reason })}
+              testID={id(option.value)}
+            >
+              {hasDetail ? (
+                <View style={{ gap: VEHICLE_PICKER_GEOMETRY.chipGap }}>
+                  {chips.length > 0 ? (
+                    <View
+                      role="group"
+                      accessibilityLabel={labels.fits(option.label)}
+                      testID={id(`${option.value}-fits`)}
+                      style={{
+                        flexDirection: 'row',
+                        flexWrap: 'wrap',
+                        gap: VEHICLE_PICKER_GEOMETRY.chipGap,
+                      }}
+                    >
+                      {chips.map((fit) => (
+                        <Chip key={fit} size="medium" variant="outlined">
+                          {fit}
+                        </Chip>
+                      ))}
+                    </View>
+                  ) : null}
+
+                  {option.priceFrom !== undefined ? (
+                    <View
+                      testID={id(`${option.value}-price`)}
+                      style={{
+                        flexDirection: 'row',
+                        alignItems: 'baseline',
+                        justifyContent: 'space-between',
+                        gap: 12,
+                      }}
+                    >
+                      <Text variant="body-regular" style={{ color: paint.textSecondary }}>
+                        {labels.from}
+                      </Text>
+                      <Text
+                        variant="body-semibold"
+                        style={[{ color: paint.text, textAlign: 'right' }, TABULAR]}
+                      >
+                        {option.priceFrom}
+                      </Text>
+                    </View>
+                  ) : null}
+
+                  {reason ? (
+                    <View
+                      testID={id(`${option.value}-reason`)}
+                      style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 6 }}
+                    >
+                      <View style={{ paddingTop: 1 }}>
+                        <RiErrorWarningLine width={16} height={16} fill={warning.foreground} />
+                      </View>
+                      <Text
+                        variant="body-2-regular"
+                        style={{ flex: 1, minWidth: 0, color: warning.foreground }}
+                      >
+                        {reason}
+                      </Text>
+                    </View>
+                  ) : null}
+                </View>
+              ) : null}
+            </SelectionCard>
+          );
+        })}
+      </View>
+    </View>
+  );
+}
+
+VehiclePicker.displayName = 'VehiclePicker';

package/src/vehicle-picker/constants.ts

@@ -0,0 +1,89 @@
+import { RiBikeLine } from '../icons/remix/RiBikeLine';
+import { RiBox3Line } from '../icons/remix/RiBox3Line';
+import { RiBusLine } from '../icons/remix/RiBusLine';
+import { RiCarLine } from '../icons/remix/RiCarLine';
+import { RiSnowflakeLine } from '../icons/remix/RiSnowflakeLine';
+import type { BloomIconComponent } from '../icons/icon-component';
+import type { VehicleKind, VehicleOption, VehiclePickerLabels } from './types';
+
+/**
+ * The glyph each built-in vehicle draws.
+ *
+ * Bloom's icon set has no truck and no van, so the two largest bodies borrow
+ * the closest shapes it does have — a bus for the van (a box on wheels at road
+ * scale) and a crate for the box truck (the body IS the box). The refrigerated
+ * van is the snowflake rather than a second vehicle outline: what distinguishes
+ * it is the temperature, not the silhouette, and two nearly identical van
+ * glyphs side by side read as a drawing mistake.
+ */
+export const VEHICLE_ICON: Record<VehicleKind, BloomIconComponent> = {
+  bike: RiBikeLine,
+  car: RiCarLine,
+  van: RiBusLine,
+  boxTruck: RiBox3Line,
+  refrigerated: RiSnowflakeLine,
+};
+
+/**
+ * The five built-in vehicles, smallest first, with no prices.
+ *
+ * A price-from belongs to a marketplace and a moment, so the defaults carry
+ * none: a picker showing invented amounts is worse than one showing the
+ * capacities alone. Spread an option and add `priceFrom` where the app knows it.
+ */
+export const VEHICLE_OPTIONS: readonly VehicleOption<VehicleKind>[] = [
+  {
+    value: 'bike',
+    label: 'Cargo bike',
+    capacity: 'Up to 25 kg · 60 × 40 × 40 cm',
+    fits: ['Documents', 'A food order', 'A small box'],
+  },
+  {
+    value: 'car',
+    label: 'Car',
+    capacity: 'Up to 150 kg · 100 × 80 × 60 cm',
+    fits: ['Two suitcases', 'Four boxes', 'A bicycle'],
+  },
+  {
+    value: 'van',
+    label: 'Van',
+    capacity: 'Up to 800 kg · 240 × 150 × 140 cm',
+    fits: ['A sofa', 'A studio move', 'Half a pallet'],
+  },
+  {
+    value: 'boxTruck',
+    label: 'Box truck',
+    capacity: 'Up to 3,500 kg · 420 × 200 × 210 cm',
+    fits: ['Two pallets', 'A two-bedroom move', 'A tail lift'],
+  },
+  {
+    value: 'refrigerated',
+    label: 'Refrigerated van',
+    capacity: 'Up to 700 kg · held at 2–8 °C',
+    fits: ['Fresh produce', 'Chilled catering', 'Flowers'],
+  },
+];
+
+/** The picker's default copy. */
+export const VEHICLE_PICKER_LABELS: Required<VehiclePickerLabels> = {
+  from: 'From',
+  fits: (label: string) => `What fits in a ${label}`,
+  unavailable: 'Not available for this load',
+};
+
+/**
+ * The picker's geometry, as the numbers rather than as prose.
+ *
+ * `gap` is the space between two option cards; `chipGap` the space inside a
+ * `fits` row. `narrowWidth` is the picker's OWN width under which each card
+ * drops to its compact inset — the same measurement the card itself offers,
+ * taken once here so every card in one picker agrees.
+ */
+export const VEHICLE_PICKER_GEOMETRY = {
+  gap: 12,
+  chipGap: 8,
+  headingGap: 16,
+  narrowWidth: 400,
+} as const;
+
+export type VehiclePickerGeometry = typeof VEHICLE_PICKER_GEOMETRY;

package/src/vehicle-picker/index.ts

@@ -0,0 +1,15 @@
+export { VehiclePicker } from './VehiclePicker';
+export {
+  VEHICLE_ICON,
+  VEHICLE_OPTIONS,
+  VEHICLE_PICKER_GEOMETRY,
+  VEHICLE_PICKER_LABELS,
+} from './constants';
+export type { VehiclePickerGeometry } from './constants';
+export { vehicleOptionName } from './shared';
+export type {
+  VehicleKind,
+  VehicleOption,
+  VehiclePickerLabels,
+  VehiclePickerProps,
+} from './types';

package/src/vehicle-picker/shared.ts

@@ -0,0 +1,27 @@
+import type { VehicleOption } from './types';
+
+/**
+ * What a vehicle card ANNOUNCES.
+ *
+ * The card draws four things a name computation cannot reach: the capacity
+ * line, the chips under the hairline, the price and — the one that matters —
+ * the reason a blocked option is blocked. A user who cannot see the dimming has
+ * to be told, in the control's own name, that this row is out and why.
+ *
+ * The price is read WITH its label ("From €8.90"): a bare amount inside a
+ * sentence of capacities reads as another measurement.
+ *
+ * Pure, and exported so the join can be walked without a render.
+ */
+export function vehicleOptionName(
+  option: Pick<VehicleOption<string>, 'label' | 'capacity' | 'priceFrom'>,
+  parts: { from: string; reason?: string },
+): string {
+  const price =
+    option.priceFrom === undefined || option.priceFrom === ''
+      ? undefined
+      : `${parts.from} ${option.priceFrom}`;
+  return [option.label, option.capacity, price, parts.reason]
+    .filter((part): part is string => typeof part === 'string' && part !== '')
+    .join(', ');
+}

package/src/vehicle-picker/types.ts

@@ -0,0 +1,86 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { BloomIconComponent } from '../icons/icon-component';
+
+/**
+ * The five vehicles a carrier marketplace routes a job to, smallest first.
+ *
+ * They are a LADDER of capacity, not a taxonomy: each one takes everything the
+ * one before it takes and more, which is what makes "the smallest one that can
+ * carry this" a question the caller can answer. `refrigerated` breaks the
+ * ladder on purpose — it is a van that holds a temperature, so it is chosen for
+ * what the load IS rather than for how big it is.
+ */
+export type VehicleKind = 'bike' | 'car' | 'van' | 'boxTruck' | 'refrigerated';
+
+export interface VehicleOption<T extends string = VehicleKind> {
+  /** Identifies the choice to `onValueChange`, and keys the row. */
+  value: T;
+  /** The vehicle's name — "Cargo bike", "Box truck". */
+  label: string;
+  /**
+   * What it can take, in ONE line: "Up to 25 kg · 60 × 40 × 40 cm". Weights,
+   * volumes and units are the app's — nothing here parses or converts a number.
+   */
+  capacity: string;
+  /**
+   * Short nouns for what actually fits — "Two suitcases", "A washing machine".
+   * Drawn as chips under the capacity, and read after it.
+   */
+  fits?: readonly string[];
+  /**
+   * The cheapest this vehicle goes for, PRE-FORMATTED: `"€8.90"`. The picker
+   * does no currency maths and never adds a number to another.
+   */
+  priceFrom?: string;
+  /** The glyph. Defaults to the built-in one for a built-in `value`. */
+  icon?: BloomIconComponent;
+  /** Stops the option being chosen, and dims it. */
+  disabled?: boolean;
+  /**
+   * WHY it cannot be chosen — "The load is 45 kg; this takes 25."
+   *
+   * A disabled option with no reason is a dead end: the row the user wants is
+   * greyed out and the screen does not say what to change. The picker falls
+   * back to `labels.unavailable` so nothing is silent, but the fallback says
+   * only THAT it is unavailable, which is the half that was already visible.
+   */
+  unavailableReason?: string;
+}
+
+/** Every word the picker speaks, in one prop. All of it is copy an app localises. */
+export interface VehiclePickerLabels {
+  /** Before the `priceFrom` amount. Default `"From"`. */
+  from?: string;
+  /** Names the `fits` chip row, per option. Default `` (label) => `What fits in a ${label}` ``. */
+  fits?: (label: string) => string;
+  /** The reason fallback on a disabled option with none. Default `"Not available for this load"`. */
+  unavailable?: string;
+}
+
+export interface VehiclePickerProps<T extends string = VehicleKind> {
+  /** The chosen vehicle, or `null` while none is. Fully controlled. */
+  value: T | null;
+  /** Called with the chosen vehicle. Never called with the value already chosen. */
+  onValueChange: (value: T) => void;
+  /** The vehicles, in the order they should be read. Default {@link VEHICLE_OPTIONS}. */
+  options?: readonly VehicleOption<T>[];
+  /**
+   * A heading over the list, drawn the way a search panel's pickers draw theirs
+   * — `body-semibold` over a `body-2-regular` description. Without it the
+   * caller owns the heading and the picker starts at its first option.
+   */
+  title?: string;
+  description?: string;
+  /** Dims and stops every option, whatever each one says. */
+  disabled?: boolean;
+  labels?: VehiclePickerLabels;
+  /**
+   * Names the group. Default `"Vehicle"` — and it matters even when `title` is
+   * drawn, because a heading beside a group is a sibling, not a label.
+   */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  /** Derives `-<value>` for each option. */
+  testID?: string;
+}