@oxy.so/bloom 2.8.0 → 2.10.0

package/src/booking/BookingCard.tsx

@@ -1,39 +1,19 @@
 import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
-import {
-  Pressable,
-  View,
-  type GestureResponderEvent,
-  type LayoutChangeEvent,
-  type StyleProp,
-  type ViewStyle,
-} from 'react-native';
+import { View, type LayoutChangeEvent } from 'react-native';
 
 import { Button } from '../button';
-import { webDataSet } from '../checkbox/shared';
-import { bloomShadowStyle } from '../design-tokens/shadows';
 import { useControllableState } from '../hooks/use-controllable-state';
-import { useInteractionState } from '../hooks/use-interaction-state';
 import { RiArrowDownSLine } from '../icons/remix/RiArrowDownSLine';
 import { RiArrowUpSLine } from '../icons/remix/RiArrowUpSLine';
 import { Popover, PopoverContent, PopoverTrigger } from '../popover';
 import { Rating } from '../rating';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
-import type { WebCssStyle } from '../styles/web-view-style';
 import { useTheme } from '../theme/use-theme';
-import { Text } from '../typography';
-import { BookingPrice } from './BookingPrice';
 import { GuestPickerCloseProvider } from '../stay-search/context';
+import { ActionCardHeader, ActionCardNote, ActionCardShell } from './ActionCard';
+import { BookingFieldCell } from './BookingFieldCell';
 import { PriceBreakdown } from './PriceBreakdown';
-import {
-  BOOKING_CARD_MAX_WIDTH,
-  BOOKING_CARD_PADDING,
-  BOOKING_CARD_RADIUS,
-  BOOKING_FIELD_RADIUS,
-  BOOKING_STYLE_ID,
-  BOOKING_WEB_CSS,
-  resolveBookingPalette,
-  type BookingPalette,
-} from './shared';
+import { BOOKING_FIELD_RADIUS, BOOKING_STYLE_ID, BOOKING_WEB_CSS, resolveBookingPalette } from './shared';
 import type { BookingCardProps, BookingFieldKey } from './types';
 
 /**
@@ -55,114 +35,11 @@ import type { BookingCardProps, BookingFieldKey } from './types';
  * Sticky beside a listing is the page's job: the card is a plain block.
  */
 
-type FieldHandleProps = Record<string, unknown>;
-
-interface BookingFieldCellProps extends FieldHandleProps {
-  label: string;
-  value?: string;
-  placeholder: string;
-  active: boolean;
-  /** Only set when the card knows whether this field's picker is open. */
-  expanded?: boolean;
-  trailing?: React.ReactNode;
-  palette: BookingPalette;
-  onPress?: (event: GestureResponderEvent) => void;
-  style?: StyleProp<ViewStyle>;
-  testID?: string;
-}
-
-function BookingFieldCell({
-  label,
-  value,
-  placeholder,
-  active,
-  expanded,
-  trailing,
-  palette,
-  onPress,
-  style,
-  testID,
-  ...handle
-}: BookingFieldCellProps) {
-  const { state: hovered, onIn: onHoverIn, onOut: onHoverOut } = useInteractionState();
-  const { state: pressed, onIn: onPressIn, onOut: onPressOut } = useInteractionState();
-  const shown = value && value.length > 0 ? value : placeholder;
-
-  const cellStyle: WebCssStyle = {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-    paddingTop: 10,
-    paddingBottom: 10,
-    paddingLeft: 12,
-    paddingRight: 12,
-    borderRadius: BOOKING_FIELD_RADIUS,
-    backgroundColor: !active && (hovered || pressed) ? palette.highlight : 'transparent',
-    '--bloom-booking-ring': palette.ring,
-    '--bloom-booking-ring-offset': '-2px',
-  };
-
-  return (
-    <Pressable
-      // First, so the cell's own name wins over the `undefined` a
-      // `PopoverTrigger` hands an `asChild` child that carries none — spread
-      // last, that explicit `undefined` erased the name (measured in Chrome).
-      // The trigger's `aria-expanded` / `aria-haspopup` still come through.
-      {...handle}
-      {...webDataSet({ bloomBookingFocus: '' })}
-      accessibilityRole="button"
-      accessibilityLabel={`${label}: ${shown}`}
-      accessibilityState={expanded === undefined ? undefined : { expanded }}
-      aria-expanded={expanded ?? (handle['aria-expanded'] as boolean | undefined)}
-      onPress={onPress}
-      onHoverIn={onHoverIn}
-      onHoverOut={onHoverOut}
-      onPressIn={onPressIn}
-      onPressOut={onPressOut}
-      testID={testID}
-      style={[cellStyle, style]}
-    >
-      <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
-        <Text
-          variant="caption-2-bold"
-          numberOfLines={1}
-          style={{ color: palette.text, textTransform: 'uppercase' }}
-        >
-          {label}
-        </Text>
-        <Text
-          variant="body-regular"
-          numberOfLines={1}
-          style={{ color: value ? palette.text : palette.textSecondary }}
-        >
-          {shown}
-        </Text>
-      </View>
-      {trailing}
-      {active ? (
-        <View
-          pointerEvents="none"
-          testID={testID ? `${testID}-active` : undefined}
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            borderWidth: 2,
-            borderColor: palette.active,
-            borderRadius: BOOKING_FIELD_RADIUS,
-          }}
-        />
-      ) : null}
-    </Pressable>
-  );
-}
-
 function BookingCardComponent({
   price,
   originalPrice,
   priceUnit,
+  priceUnitPrefix,
   priceAccessibilityLabel,
   rating,
   reviewCount,
@@ -231,37 +108,21 @@ function BookingCardComponent({
     />
   );
 
-  const cardStyle: ViewStyle = {
-    width: '100%',
-    maxWidth: BOOKING_CARD_MAX_WIDTH,
-    paddingTop: BOOKING_CARD_PADDING,
-    paddingBottom: BOOKING_CARD_PADDING,
-    paddingLeft: BOOKING_CARD_PADDING,
-    paddingRight: BOOKING_CARD_PADDING,
-    borderRadius: BOOKING_CARD_RADIUS,
-    borderWidth: 1,
-    borderColor: palette.border,
-    backgroundColor: palette.surface,
-    ...bloomShadowStyle('m'),
-  };
-
   return (
-    <View testID={testID} style={[cardStyle, style]}>
-      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
-        <BookingPrice
-          price={price}
-          originalPrice={originalPrice}
-          priceUnit={priceUnit}
-          priceAccessibilityLabel={priceAccessibilityLabel}
-          priceVariant="title-3-semibold"
-          unitVariant="body-regular"
-          style={{ flex: 1, minWidth: 0 }}
-          testID={id('price')}
-        />
-        {rating !== undefined ? (
-          <Rating value={rating} count={reviewCount} countStyle="reviews" size="small" />
-        ) : null}
-      </View>
+    <ActionCardShell testID={testID} style={style}>
+      <ActionCardHeader
+        price={price}
+        originalPrice={originalPrice}
+        priceUnit={priceUnit}
+        priceUnitPrefix={priceUnitPrefix}
+        priceAccessibilityLabel={priceAccessibilityLabel}
+        testID={id('price')}
+        trailing={
+          rating !== undefined ? (
+            <Rating value={rating} count={reviewCount} countStyle="reviews" size="small" />
+          ) : null
+        }
+      />
 
       <View
         onLayout={onBoxLayout}
@@ -331,23 +192,12 @@ function BookingCardComponent({
         {buttonLabel}
       </Button>
 
-      {shownNote != null ? (
-        typeof shownNote === 'string' ? (
-          <Text
-            variant="body-2-regular"
-            style={{ marginTop: 12, color: palette.textSecondary, textAlign: 'center' }}
-          >
-            {shownNote}
-          </Text>
-        ) : (
-          <View style={{ marginTop: 12, alignItems: 'center' }}>{shownNote}</View>
-        )
-      ) : null}
+      {shownNote != null ? <ActionCardNote style={{ marginTop: 12 }}>{shownNote}</ActionCardNote> : null}
 
       {breakdown ? <PriceBreakdown {...breakdown} style={[{ marginTop: 24 }, breakdown.style]} /> : null}
 
       {footer != null ? <View style={{ marginTop: 24, alignItems: 'center' }}>{footer}</View> : null}
-    </View>
+    </ActionCardShell>
   );
 }
 

package/src/booking/BookingFieldCell.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import { Pressable, View, type GestureResponderEvent, type StyleProp, type ViewStyle } from 'react-native';
+
+import { webDataSet } from '../checkbox/shared';
+import { useInteractionState } from '../hooks/use-interaction-state';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { Text } from '../typography';
+import { BOOKING_FIELD_RADIUS, type BookingPalette } from './shared';
+
+/**
+ * INTERNAL — one cell of a date / guests box (`BookingCard`, and the
+ * `ExchangeProposalCard` in `listing-actions`): a caption-2-bold uppercase
+ * label over a body-regular value, padding 10 × 12; a neutral-100 wash under a
+ * pointer or a press, a 2px text-primary outline while `active`.
+ */
+
+export type FieldHandleProps = Record<string, unknown>;
+
+export interface BookingFieldCellProps extends FieldHandleProps {
+  label: string;
+  value?: string;
+  placeholder: string;
+  active: boolean;
+  /** Only set when the card knows whether this field's picker is open. */
+  expanded?: boolean;
+  trailing?: React.ReactNode;
+  palette: BookingPalette;
+  onPress?: (event: GestureResponderEvent) => void;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export function BookingFieldCell({
+  label,
+  value,
+  placeholder,
+  active,
+  expanded,
+  trailing,
+  palette,
+  onPress,
+  style,
+  testID,
+  ...handle
+}: BookingFieldCellProps) {
+  const { state: hovered, onIn: onHoverIn, onOut: onHoverOut } = useInteractionState();
+  const { state: pressed, onIn: onPressIn, onOut: onPressOut } = useInteractionState();
+  const shown = value && value.length > 0 ? value : placeholder;
+
+  const cellStyle: WebCssStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    paddingTop: 10,
+    paddingBottom: 10,
+    paddingLeft: 12,
+    paddingRight: 12,
+    borderRadius: BOOKING_FIELD_RADIUS,
+    backgroundColor: !active && (hovered || pressed) ? palette.highlight : 'transparent',
+    '--bloom-booking-ring': palette.ring,
+    '--bloom-booking-ring-offset': '-2px',
+  };
+
+  return (
+    <Pressable
+      // First, so the cell's own name wins over the `undefined` a
+      // `PopoverTrigger` hands an `asChild` child that carries none — spread
+      // last, that explicit `undefined` erased the name (measured in Chrome).
+      // The trigger's `aria-expanded` / `aria-haspopup` still come through.
+      {...handle}
+      {...webDataSet({ bloomBookingFocus: '' })}
+      accessibilityRole="button"
+      accessibilityLabel={`${label}: ${shown}`}
+      accessibilityState={expanded === undefined ? undefined : { expanded }}
+      aria-expanded={expanded ?? (handle['aria-expanded'] as boolean | undefined)}
+      onPress={onPress}
+      onHoverIn={onHoverIn}
+      onHoverOut={onHoverOut}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      testID={testID}
+      style={[cellStyle, style]}
+    >
+      <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
+        <Text
+          variant="caption-2-bold"
+          numberOfLines={1}
+          style={{ color: palette.text, textTransform: 'uppercase' }}
+        >
+          {label}
+        </Text>
+        <Text
+          variant="body-regular"
+          numberOfLines={1}
+          style={{ color: value ? palette.text : palette.textSecondary }}
+        >
+          {shown}
+        </Text>
+      </View>
+      {trailing}
+      {active ? (
+        <View
+          pointerEvents="none"
+          testID={testID ? `${testID}-active` : undefined}
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            borderWidth: 2,
+            borderColor: palette.active,
+            borderRadius: BOOKING_FIELD_RADIUS,
+          }}
+        />
+      ) : null}
+    </Pressable>
+  );
+}
+

package/src/booking/BookingPrice.tsx

@@ -23,6 +23,7 @@ export function BookingPrice({
   price,
   originalPrice,
   priceUnit,
+  priceUnitPrefix,
   priceAccessibilityLabel,
   priceVariant,
   unitVariant,
@@ -59,7 +60,7 @@ export function BookingPrice({
       </Text>
       {priceUnit ? (
         <Text variant={unitVariant} style={{ color: palette.text }}>
-          {priceUnit}
+          {priceUnitPrefix ? `${priceUnitPrefix} ${priceUnit}` : priceUnit}
         </Text>
       ) : null}
     </View>

package/src/booking/types.ts

@@ -50,6 +50,11 @@ export interface BookingPriceProps {
   originalPrice?: string;
   /** "night". Drawn after the price. */
   priceUnit?: string;
+  /**
+   * Drawn before the unit: `"/"` draws "€1,250 / month". Not spoken — the
+   * price still reads "€1,250 per month".
+   */
+  priceUnitPrefix?: string;
   /** The price's spoken form. Default: "$180 per night, originally $210". */
   priceAccessibilityLabel?: string;
 }

package/src/chart-cards/index.ts

@@ -13,6 +13,7 @@ export {
   ChartRangePill,
   ChartRangeSelect,
   ChartStatTiles,
+  Sparkline,
   useChartRange,
 } from './primitives';
 
@@ -45,6 +46,8 @@ export type {
   ChartSize,
   ChartStatTile,
   ChartStatTilesProps,
+  SparklineProps,
+  SparklineTone,
 } from './primitives';
 
 export { LineChartCard } from './LineChartCard';

package/src/chart-cards/primitives/CartesianPlot.tsx

@@ -239,6 +239,16 @@ export function CartesianPlot({
               </Text>
             </View>
           ))}
+          {/*
+            Each label slot is LABEL_SLOT wide and centred on its tick, so the
+            last one reaches half a slot past the plot. The labels themselves
+            are placed inside it (`preserveStartEnd`); clip the empty slot, or a
+            card at a phone's edge widens the page into a horizontal scroll.
+          */}
+          <View
+            pointerEvents="none"
+            style={[StyleSheet.absoluteFill, { overflow: 'hidden' }]}
+            testID={testID ? `${testID}-x-labels` : undefined}>
           {categories.map((label, i) => {
             const key = `${i}:${label}`;
             const placed = placedX?.find((t) => t.index === i);
@@ -266,6 +276,7 @@ export function CartesianPlot({
               </View>
             );
           })}
+          </View>
           <View
             role="img"
             accessibilityLabel={accessibilityLabel}

package/src/chart-cards/primitives/Sparkline.tsx

@@ -0,0 +1,147 @@
+import React, { useId, useMemo } from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import Svg, { Defs, LinearGradient, Path, Stop } from 'react-native-svg';
+
+import { useTheme } from '../../theme/use-theme';
+import { areaBandPath, curvePath, type Point } from '../geometry';
+import { chartHueTone } from '../palette';
+import { useChartCardPalette } from './use-chart-palette';
+
+/** Which colour the line takes: status tones for a trend, the chart blue for plain data. */
+export type SparklineTone = 'accent' | 'positive' | 'negative' | 'neutral';
+
+export interface SparklineProps {
+  /** Values left to right. Fewer than two draws nothing. */
+  data: readonly number[];
+  /** Default 72. */
+  width?: number;
+  /** Default 28. */
+  height?: number;
+  /** Default `'accent'` (`chart-6-active`). */
+  tone?: SparklineTone;
+  /** Any colour; wins over `tone`. */
+  color?: string;
+  /** A soft gradient under the line (the line colour, 24% → 0%). Default `true`. */
+  fill?: boolean;
+  /** `curved` (monotone) or `sharp` (straight segments). Default `curved`. */
+  shape?: 'curved' | 'sharp';
+  /** Default 1.5. */
+  strokeWidth?: number;
+  /**
+   * Names the sparkline as an image (`role="img"`). Without it the sparkline is
+   * decorative and hidden from assistive tech — the usual case beside a value
+   * and delta that already say the same thing.
+   */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/** The sparkline's points in a `width × height` box, inset so the stroke is never clipped. */
+export function sparklinePoints(
+  data: readonly number[],
+  width: number,
+  height: number,
+  inset: number,
+): Point[] {
+  if (data.length < 2) return [];
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const span = max - min;
+  const usableW = Math.max(0, width - inset * 2);
+  const usableH = Math.max(0, height - inset * 2);
+  return data.map((v, i) => ({
+    x: inset + (usableW * i) / (data.length - 1),
+    // A flat series sits on the middle line rather than the floor.
+    y: span === 0 ? height / 2 : inset + usableH * (1 - (v - min) / span),
+  }));
+}
+
+/**
+ * `Sparkline`: a tiny axis-less trend line for a KPI tile or a table cell.
+ * The same monotone curve the chart cards draw, scaled to its own min–max.
+ */
+export function Sparkline({
+  data,
+  width = 72,
+  height = 28,
+  tone = 'accent',
+  color,
+  fill = true,
+  shape = 'curved',
+  strokeWidth = 1.5,
+  accessibilityLabel,
+  style,
+  testID,
+}: SparklineProps) {
+  const theme = useTheme();
+  const palette = useChartCardPalette();
+  const stroke = useMemo(() => {
+    if (color) return color;
+    switch (tone) {
+      case 'positive':
+        return palette.positive.foreground;
+      case 'negative':
+        return palette.negative.foreground;
+      case 'neutral':
+        return palette.textTertiary;
+      default:
+        return chartHueTone(theme, 6).activeColor;
+    }
+  }, [color, tone, palette, theme]);
+
+  const rawId = useId();
+  const id = `bloom-sparkline-${rawId.replace(/[^a-zA-Z0-9_-]/g, '')}`;
+  const points = useMemo(
+    () => sparklinePoints(data, width, height, strokeWidth + 1),
+    [data, width, height, strokeWidth],
+  );
+  const curve = shape === 'sharp' ? 'linear' : 'monotone';
+  const named = Boolean(accessibilityLabel);
+
+  return (
+    <View
+      testID={testID}
+      style={[{ width, height }, style]}
+      {...(named
+        ? { role: 'img' as const, accessibilityLabel }
+        : {
+            'aria-hidden': true,
+            accessibilityElementsHidden: true,
+            importantForAccessibility: 'no-hide-descendants' as const,
+          })}
+    >
+      {points.length > 1 ? (
+        <Svg width={width} height={height} pointerEvents="none">
+          {fill ? (
+            <Defs>
+              <LinearGradient id={id} x1="0" y1="0" x2="0" y2="1">
+                <Stop offset="0" stopColor={stroke} stopOpacity={0.24} />
+                <Stop offset="1" stopColor={stroke} stopOpacity={0} />
+              </LinearGradient>
+            </Defs>
+          ) : null}
+          {fill ? (
+            <Path
+              d={areaBandPath(
+                points,
+                points.map((p) => ({ x: p.x, y: height })),
+                curve,
+              )}
+              fill={`url(#${id})`}
+              stroke="none"
+            />
+          ) : null}
+          <Path
+            d={curvePath(points, curve)}
+            fill="none"
+            stroke={stroke}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </Svg>
+      ) : null}
+    </View>
+  );
+}

package/src/chart-cards/primitives/index.ts

@@ -28,3 +28,5 @@ export { useChartCardPalette, useChartTones, useMonoTone } from './use-chart-pal
 export { useChartRange } from './use-chart-range';
 export type { ChartRange, ChartRangeOption } from './use-chart-range';
 export { useWebTransition } from './use-web-transition';
+export { Sparkline, sparklinePoints } from './Sparkline';
+export type { SparklineProps, SparklineTone } from './Sparkline';

package/src/chat-indicators/AvatarPresence.tsx

@@ -0,0 +1,66 @@
+import React, { memo } from 'react';
+import { View } from 'react-native';
+
+import { Avatar } from '../avatar/Avatar';
+import { AVATAR_SIZES } from '../avatar/initials';
+import { PresenceDot } from './PresenceDot';
+import { PRESENCE_DOT_SIZES, presenceSizeForAvatar } from './shared';
+import type { AvatarPresenceProps } from './types';
+
+/**
+ * An `Avatar` with a {@link PresenceDot} in its bottom-right corner — the piece
+ * every list row, chat header and member sheet repeats.
+ *
+ * Every `Avatar` prop passes through. The dot rung is picked from the avatar's
+ * own size (`small` to 28, `medium` to 44, `large` above) and can be overridden
+ * with `presenceSize`. The dot's ringed box sits inside the avatar's footprint,
+ * so a row's geometry does not change when someone comes online.
+ *
+ * Accessibility: the avatar and the dot are two elements. The dot carries the
+ * status name; pass `presenceLabel=""` when the row's text already says it.
+ */
+
+function AvatarPresenceComponent({
+  status,
+  presenceSize,
+  presenceRingColor,
+  presenceLabel,
+  containerStyle,
+  ...avatarProps
+}: AvatarPresenceProps) {
+  const { size } = avatarProps;
+  const px = typeof size === 'number' ? size : size ? AVATAR_SIZES[size] : 40;
+  const rung = presenceSize ?? presenceSizeForAvatar(px);
+  // The dot is drawn on the circle's 45° edge: at `right: 0, bottom: 0` its own
+  // ring straddles the outline, which is what makes it read as attached rather
+  // than floating beside the face.
+  const box = PRESENCE_DOT_SIZES[rung] + 4;
+
+  return (
+    <View style={[{ position: 'relative', width: px, height: px }, containerStyle]}>
+      <Avatar {...avatarProps} />
+      {status ? (
+        <View
+          pointerEvents="none"
+          style={{
+            position: 'absolute',
+            right: 0,
+            bottom: 0,
+            width: box,
+            height: box,
+          }}
+        >
+          <PresenceDot
+            status={status}
+            size={rung}
+            ringColor={presenceRingColor}
+            accessibilityLabel={presenceLabel}
+          />
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+export const AvatarPresence = memo(AvatarPresenceComponent);
+AvatarPresence.displayName = 'AvatarPresence';