@oxy.so/bloom 3.6.0 → 4.1.0

package/src/{chat-list/ChatSwipeRow.tsx → swipe-row/SwipeRow.tsx}

@@ -9,83 +9,101 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 
+import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
-import { actionPanePaint } from './parts';
 import {
-  CHAT_ROW_RADIUS,
   SWIPE_ACTION_WIDTH,
+  SWIPE_ACTIVATE_OFFSET,
   SWIPE_COMMIT_FRACTION,
+  SWIPE_ROW_RADIUS,
+  SWIPE_SNAP_DURATION,
   SWIPE_TAP_SLOP,
-  type ChatListPaint,
-} from './shared';
-import type { ChatAction, ChatSwipeActions } from './types';
-
-export interface ChatSwipeRowProps {
-  actions: ChatSwipeActions;
-  onAction?: (key: string) => void;
-  /** The row's height, so the panes match it exactly. */
-  height: number;
-  paint: ChatListPaint;
-  /** Names the tap target that closes an open pane. Default `'Close actions'`. */
-  closeLabel?: string;
-  children: React.ReactNode;
-  testID?: string;
-}
+} from './constants';
+import { resolveSwipeRowPaint, swipeActionPaint } from './shared';
+import type { SwipeRowAction, SwipeRowProps } from './types';
 
 /**
- * The drag affordance behind a chat row, on touch.
+ * ONE drag affordance for every list row in this library.
  *
  * Dragging RIGHT uncovers `actions.left` from the left edge, dragging LEFT
  * uncovers `actions.right`. The row travels with the finger up to the pane's
- * full width (`SWIPE_ACTION_WIDTH` per action) and snaps open past
+ * full width (`actionWidth` per action) and snaps open past
  * `SWIPE_COMMIT_FRACTION` of it, closed below — so a half-hearted drag never
  * leaves a row stuck ajar. Anything under `SWIPE_TAP_SLOP` is a tap and the
  * gesture springs straight back.
  *
  * The gesture activates only past a horizontal threshold and FAILS on vertical
- * travel, so a list scroll never turns into a swipe. Panes are laid under the
+ * travel, so a list scroll never turns into a swipe. Panes are laid UNDER the
  * row and grow with it rather than sliding in from outside: the row is what
  * moves, and the action underneath is revealed, not pushed.
  *
- * WEB gets none of this. `ChatListItem` renders the same actions as hover
- * buttons there, because a drag is undiscoverable with a mouse and a
- * `pointerdown`-driven pan fights text selection.
+ * It owns the gesture and almost nothing else. It draws no row and knows no
+ * density; the one colour it insists on is the OPAQUE fill under the
+ * travelling layer, because the panes are behind the row and would otherwise
+ * read straight through it. It resolves no other row colours — the caller passes its children, and either the
+ * pane pairs it already resolved or nothing at all, in which case the panes
+ * come off the theme. That is what lets a chat row and a mail row share one
+ * implementation instead of drifting into two.
+ *
+ * WHO GETS IT is `useSwipeAvailable()`: every touch pointer, on any platform.
+ * A mouse gets whatever hover affordance the calling family draws, because a
+ * drag is undiscoverable with a pointer.
+ *
+ * A SWIPE IS NOT REACHABLE BY KEYBOARD OR BY A SCREEN READER, and this
+ * component does not pretend otherwise: while a pane is closed it is hidden
+ * from assistive technology entirely, rather than leaving invisible buttons in
+ * the tab order for focus to disappear into. The caller owes those actions a
+ * second path — a hover rail, a row menu, or `accessibilityActions` on the row
+ * itself. `mail-list` does the last two; see `docs/swipe-row.mdx`.
  *
  * Reduced motion keeps the panes and drops the SNAP animation — the row jumps
  * to its resting position instead of easing to it.
  */
-export function ChatSwipeRow({
+export function SwipeRow({
   actions,
   onAction,
   height,
   paint,
+  background,
+  radius = SWIPE_ROW_RADIUS,
+  actionWidth = SWIPE_ACTION_WIDTH,
   closeLabel = 'Close actions',
+  onOpenChange,
   children,
   testID,
-}: ChatSwipeRowProps) {
+}: SwipeRowProps) {
+  const theme = useTheme();
   const translateX = useSharedValue(0);
   const reducedMotion = useReducedMotion();
   const [open, setOpen] = useState<'left' | 'right' | null>(null);
 
+  const tones = useMemo(() => paint ?? resolveSwipeRowPaint(theme), [paint, theme]);
+  // The panes sit UNDER the row, so the travelling layer has to be opaque or
+  // they read through it.
+  const rowFill = background ?? theme.colors.background;
   const left = actions.left ?? [];
   const right = actions.right ?? [];
-  const leftWidth = left.length * SWIPE_ACTION_WIDTH;
-  const rightWidth = right.length * SWIPE_ACTION_WIDTH;
+  const leftWidth = left.length * actionWidth;
+  const rightWidth = right.length * actionWidth;
 
-  const settle = useCallback((next: 'left' | 'right' | null) => {
-    setOpen(next);
-  }, []);
+  const settle = useCallback(
+    (next: 'left' | 'right' | null) => {
+      setOpen(next);
+      onOpenChange?.(next);
+    },
+    [onOpenChange],
+  );
 
   const close = useCallback(() => {
-    translateX.value = reducedMotion ? 0 : withTiming(0, { duration: 160 });
-    setOpen(null);
-  }, [reducedMotion, translateX]);
+    translateX.value = reducedMotion ? 0 : withTiming(0, { duration: SWIPE_SNAP_DURATION });
+    settle(null);
+  }, [reducedMotion, settle, translateX]);
 
   const pan = useMemo(
     () =>
       Gesture.Pan()
-        .activeOffsetX([-12, 12])
-        .failOffsetY([-12, 12])
+        .activeOffsetX([-SWIPE_ACTIVATE_OFFSET, SWIPE_ACTIVATE_OFFSET])
+        .failOffsetY([-SWIPE_ACTIVATE_OFFSET, SWIPE_ACTIVATE_OFFSET])
         .onChange((event) => {
           'worklet';
           const next = translateX.value + event.changeX;
@@ -103,7 +121,9 @@ export function ChatSwipeRow({
           const full = opening === 'left' ? leftWidth : rightWidth;
           const commit = travelled >= full * SWIPE_COMMIT_FRACTION && full > 0;
           const target = commit ? (opening === 'left' ? leftWidth : -rightWidth) : 0;
-          translateX.value = reducedMotion ? target : withTiming(target, { duration: 160 });
+          translateX.value = reducedMotion
+            ? target
+            : withTiming(target, { duration: SWIPE_SNAP_DURATION });
           runOnJS(settle)(commit ? opening : null);
         }),
     [leftWidth, reducedMotion, rightWidth, settle, translateX],
@@ -124,7 +144,7 @@ export function ChatSwipeRow({
 
   // The buttons keep their full width and are CLIPPED by the growing pane, so
   // they are revealed in place rather than squashed as the row travels.
-  const pane = (list: readonly ChatAction[], side: 'left' | 'right') => (
+  const pane = (list: readonly SwipeRowAction[], side: 'left' | 'right') => (
     <View
       style={{
         position: 'absolute',
@@ -135,7 +155,7 @@ export function ChatSwipeRow({
       }}
     >
       {list.map((action) => {
-        const tone = actionPanePaint(action, paint);
+        const tone = swipeActionPaint(action, tones);
         const Icon = action.icon;
         return (
           <Pressable
@@ -148,8 +168,8 @@ export function ChatSwipeRow({
               close();
             }}
             style={{
-              width: SWIPE_ACTION_WIDTH,
-              height,
+              width: actionWidth,
+              alignSelf: 'stretch',
               alignItems: 'center',
               justifyContent: 'center',
               gap: 4,
@@ -171,13 +191,27 @@ export function ChatSwipeRow({
     </View>
   );
 
+  // A closed pane is 0 wide and clipped, so anything inside it is a control
+  // nobody can see. Hiding it is the difference between "unreachable" and
+  // "reachable, invisible, and it steals the focus ring".
+  const hiddenWhenClosed = (side: 'left' | 'right') =>
+    open === side
+      ? null
+      : ({ 'aria-hidden': true, importantForAccessibility: 'no-hide-descendants' } as const);
+
   return (
     <View
-      style={{ position: 'relative', height, borderRadius: CHAT_ROW_RADIUS, overflow: 'hidden' }}
+      style={{
+        position: 'relative',
+        ...(height === undefined ? null : { height }),
+        borderRadius: radius,
+        overflow: 'hidden',
+      }}
       testID={testID}
     >
       {leftWidth > 0 ? (
         <Animated.View
+          {...hiddenWhenClosed('left')}
           style={[
             { position: 'absolute', left: 0, top: 0, bottom: 0, overflow: 'hidden' },
             leftPaneStyle,
@@ -188,6 +222,7 @@ export function ChatSwipeRow({
       ) : null}
       {rightWidth > 0 ? (
         <Animated.View
+          {...hiddenWhenClosed('right')}
           style={[
             { position: 'absolute', right: 0, top: 0, bottom: 0, overflow: 'hidden' },
             rightPaneStyle,
@@ -197,11 +232,17 @@ export function ChatSwipeRow({
         </Animated.View>
       ) : null}
       <GestureDetector gesture={pan}>
-        <Animated.View style={[{ height }, rowStyle]}>
+        <Animated.View
+          style={[
+            { backgroundColor: rowFill },
+            height === undefined ? null : { height },
+            rowStyle,
+          ]}
+        >
           {children}
           {open !== null ? (
             // While a pane is open the row itself closes it rather than opening
-            // the conversation — the same rule a tap outside an open menu follows.
+            // what it points at — the same rule a tap outside an open menu follows.
             <Pressable
               role="button"
               accessibilityLabel={closeLabel}

package/src/swipe-row/constants.ts

@@ -0,0 +1,27 @@
+/**
+ * The drag's thresholds and the rail's geometry, in one place because they are
+ * one decision: how far a finger travels before the row is considered to have
+ * been opened rather than nudged.
+ */
+
+/** The widest a pane opens, per action. A 76 target is comfortable for a thumb. */
+export const SWIPE_ACTION_WIDTH = 76;
+
+/**
+ * How far a row must travel, as a fraction of the pane's full width, before the
+ * drag is committed rather than sprung back. Below it the row closes, so a
+ * half-hearted drag never leaves a row stuck ajar.
+ */
+export const SWIPE_COMMIT_FRACTION = 0.4;
+
+/** Below this many pixels the drag reads as a tap and the row springs straight back. */
+export const SWIPE_TAP_SLOP = 10;
+
+/** How long the snap to the resting position takes. Dropped under reduced motion. */
+export const SWIPE_SNAP_DURATION = 160;
+
+/** The corner radius a row's panes are clipped to, unless the caller says otherwise. */
+export const SWIPE_ROW_RADIUS = 12;
+
+/** How far the finger travels horizontally before the pan claims the touch. */
+export const SWIPE_ACTIVATE_OFFSET = 12;

package/src/swipe-row/index.ts

@@ -0,0 +1,18 @@
+export { SwipeRow } from './SwipeRow';
+export {
+  SWIPE_ACTION_WIDTH,
+  SWIPE_ACTIVATE_OFFSET,
+  SWIPE_COMMIT_FRACTION,
+  SWIPE_ROW_RADIUS,
+  SWIPE_SNAP_DURATION,
+  SWIPE_TAP_SLOP,
+} from './constants';
+export { resolveSwipeRowPaint, swipeActionPaint } from './shared';
+export { useSwipeAvailable } from './use-swipe-available';
+export type {
+  SwipeRowAction,
+  SwipeRowActionTone,
+  SwipeRowActions,
+  SwipeRowPaint,
+  SwipeRowProps,
+} from './types';

package/src/swipe-row/shared.ts

@@ -0,0 +1,41 @@
+import { resolveAccentColors } from '../theme/accent-colors';
+import type { Theme } from '../theme/types';
+import type { SwipeRowAction, SwipeRowPaint } from './types';
+
+/**
+ * The pane colours read off the theme.
+ *
+ * Nothing here picks a ramp stop. `accent` and `negative` are the SOLID pairs a
+ * filled control already uses, so a delete pane is the same red as a
+ * destructive button; `neutral` is the SUBTLE default pair, which is the one
+ * fill in the palette that reads as "a surface behind the row" rather than as a
+ * second control competing with the one the reader dragged away.
+ */
+export function resolveSwipeRowPaint(theme: Theme): SwipeRowPaint {
+  const neutral = resolveAccentColors(theme.colors, 'default', 'subtle');
+  const accent = resolveAccentColors(theme.colors, 'primary', 'solid');
+  const negative = resolveAccentColors(theme.colors, 'error', 'solid');
+  return {
+    neutral: neutral.background,
+    onNeutral: neutral.foreground,
+    accent: accent.background,
+    onAccent: accent.foreground,
+    negative: negative.background,
+    onNegative: negative.foreground,
+  };
+}
+
+/** The pair one action's tone paints with. Pure. */
+export function swipeActionPaint(
+  action: SwipeRowAction,
+  paint: SwipeRowPaint,
+): { background: string; foreground: string } {
+  switch (action.tone) {
+    case 'negative':
+      return { background: paint.negative, foreground: paint.onNegative };
+    case 'accent':
+      return { background: paint.accent, foreground: paint.onAccent };
+    default:
+      return { background: paint.neutral, foreground: paint.onNeutral };
+  }
+}

package/src/swipe-row/types.ts

@@ -0,0 +1,79 @@
+import type { ReactNode } from 'react';
+
+import type { BloomIconComponent } from '../icons/icon-component';
+
+/** How loudly a pane is painted. */
+export type SwipeRowActionTone = 'neutral' | 'accent' | 'negative';
+
+/** One action behind a row. */
+export interface SwipeRowAction {
+  /** Stable identity, and what `onAction` reports. */
+  key: string;
+  /** The caption under the glyph AND the action's accessible name. */
+  label: string;
+  icon: BloomIconComponent;
+  /** Default `'neutral'`. */
+  tone?: SwipeRowActionTone;
+  /** Called on its own, in addition to the row's `onAction`. */
+  onPress?: () => void;
+}
+
+/**
+ * The two panes. `left` is uncovered by dragging RIGHT (it enters from the left
+ * edge) and `right` by dragging left — the side names the EDGE the pane is
+ * anchored to, not the direction of the finger.
+ */
+export interface SwipeRowActions {
+  left?: readonly SwipeRowAction[];
+  right?: readonly SwipeRowAction[];
+}
+
+/**
+ * The three pane pairs, background and what is legible on it.
+ *
+ * A family with its own resolved palette (a chat row, a mail row) passes the
+ * pairs it already computed, so its panes match the rest of the row exactly;
+ * everything else lets {@link resolveSwipeRowPaint} read them off the theme.
+ */
+export interface SwipeRowPaint {
+  neutral: string;
+  onNeutral: string;
+  accent: string;
+  onAccent: string;
+  negative: string;
+  onNegative: string;
+}
+
+export interface SwipeRowProps {
+  /** What is behind the row on each side. A side with no actions cannot open. */
+  actions: SwipeRowActions;
+  /** Called with the action's `key` when one is pressed. */
+  onAction?: (key: string) => void;
+  /**
+   * An exact height for the container. Omit it for a row that sizes itself —
+   * the panes stretch to whatever the child turns out to be.
+   */
+  height?: number;
+  /** Defaults to {@link resolveSwipeRowPaint} of the active theme. */
+  paint?: SwipeRowPaint;
+  /**
+   * The fill the travelling row is painted on. Defaults to the theme's page
+   * colour.
+   *
+   * It is NOT decoration. The panes are laid UNDER the row, so a row with a
+   * transparent background lets them show straight through it as it moves —
+   * the delete pane reading through the subject line. A row that sits on a card
+   * passes that card's fill.
+   */
+  background?: string;
+  /** The radius the panes are clipped to. Default {@link SWIPE_ROW_RADIUS}. */
+  radius?: number;
+  /** How wide one action is. Default {@link SWIPE_ACTION_WIDTH}. */
+  actionWidth?: number;
+  /** Names the tap target that closes an open pane. Default `'Close actions'`. */
+  closeLabel?: string;
+  /** Fires whenever a pane settles open or closed. */
+  onOpenChange?: (side: 'left' | 'right' | null) => void;
+  children: ReactNode;
+  testID?: string;
+}

package/src/swipe-row/use-swipe-available.ts

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+import { Platform } from 'react-native';
+
+const COARSE_POINTER = '(pointer: coarse)';
+
+/** `undefined` wherever there is no `matchMedia` — SSR, a test renderer, an old browser. */
+function coarsePointerQuery(): MediaQueryList | undefined {
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return undefined;
+  try {
+    return window.matchMedia(COARSE_POINTER);
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * Whether a drag is the right affordance for THIS pointer.
+ *
+ * Native is always yes. Web is yes only where the pointer is COARSE: a web
+ * build runs on a phone as readily as on a desktop, and the answer is a
+ * property of the input device, not of the platform the bundle was built for.
+ * A mouse gets the hover affordance its family draws instead — a drag is
+ * undiscoverable with a pointer, and a `pointerdown`-driven pan fights text
+ * selection.
+ *
+ * It is a HOOK rather than a constant because the answer changes without a
+ * reload: a tablet with a keyboard folio attached and detached is the same
+ * document, and a desktop window dragged to a touchscreen is too.
+ */
+export function useSwipeAvailable(): boolean {
+  const [coarse, setCoarse] = useState<boolean>(() => coarsePointerQuery()?.matches ?? false);
+
+  useEffect(() => {
+    const query = coarsePointerQuery();
+    if (query === undefined) return undefined;
+    setCoarse(query.matches);
+    const listener = (event: MediaQueryListEvent) => setCoarse(event.matches);
+    // `addListener` is the deprecated spelling, and the only one Safari below
+    // 14 has. Losing the subscription is silent, so both are tried.
+    if (typeof query.addEventListener === 'function') {
+      query.addEventListener('change', listener);
+      return () => query.removeEventListener('change', listener);
+    }
+    query.addListener(listener);
+    return () => query.removeListener(listener);
+  }, []);
+
+  return Platform.OS === 'web' ? coarse : true;
+}

package/src/switch/Switch.tsx

@@ -1,3 +1,6 @@
+import { normalizeBloomSize } from '../appearance/legacy';
+import { useBloomAppearance } from '../appearance';
+import { resolveBloomColors } from '../appearance/colors';
 import React, { memo, useCallback, useRef } from 'react';
 import { Pressable, Animated, StyleSheet } from 'react-native';
 
@@ -8,34 +11,31 @@ import { useAccessibleNameWarning } from '../hooks/use-accessible-name-warning';
 import { useFieldMembership } from '../field/membership';
 import type { SwitchProps } from './types';
 
-const TRACK = { default: { w: 44, h: 26 }, sm: { w: 36, h: 22 } } as const;
-const THUMB = { default: 22, sm: 18 } as const;
+const TRACK = { xs: { w: 30, h: 18 }, sm: { w: 36, h: 22 }, md: { w: 44, h: 26 }, lg: { w: 52, h: 30 } } as const;
+const THUMB = { xs: 14, sm: 18, md: 22, lg: 26 } as const;
 const PADDING = 2;
 const SQUEEZE_RATIO = 0.75; // thumb height shrinks to 75% when pressed
 
 const SwitchComponent = React.forwardRef<React.ElementRef<typeof Pressable>, SwitchProps>(
-  (
-    { value, onValueChange, disabled, style, size = 'default', accessibilityLabel, nativeID, testID },
-    ref,
-  ) => {
+  ({ checked: checkedProp, value, onCheckedChange: onCheckedChangeProp, onValueChange, disabled, style, size: sizeProp, tone: toneProp, accessibilityLabel, nativeID, testID }, ref) => {
+    const checked = checkedProp ?? value ?? false;
+    const onCheckedChange = onCheckedChangeProp ?? onValueChange;
     const theme = useTheme();
-    // A switch draws no text, so a `Field` is often the only thing that names
-    // it — and the warning has to see the RESOLVED name, or a correctly
-    // labelled switch inside a field warns anyway and the warning stops
-    // meaning anything.
+    const {size, tone} = useBloomAppearance({size: normalizeBloomSize(sizeProp), tone: toneProp}, {size: 'md', tone: 'accent'});
+    const paint = resolveBloomColors(theme.colors, tone, 'solid');
     const field = useFieldMembership({ accessibilityLabel, disabled, nativeID });
     const isDisabled = field.disabled;
     useAccessibleNameWarning('Switch', field.accessibilityLabel);
-    const anim = useRef(new Animated.Value(value ? 1 : 0)).current;
+    const anim = useRef(new Animated.Value(checked ? 1 : 0)).current;
     const pressAnim = useRef(new Animated.Value(0)).current;
 
-    // Track last value to detect external changes and animate accordingly.
-    // This avoids useEffect while still handling controlled value changes.
-    const prevValueRef = useRef(value);
-    if (prevValueRef.current !== value) {
-      prevValueRef.current = value;
+    // Track last checked to detect external changes and animate accordingly.
+    // This avoids useEffect while still handling controlled checked changes.
+    const prevValueRef = useRef(checked);
+    if (prevValueRef.current !== checked) {
+      prevValueRef.current = checked;
       Animated.spring(anim, {
-        toValue: value ? 1 : 0,
+        toValue: checked ? 1 : 0,
         useNativeDriver: false,
         ...animation.spring.gentle,
       }).start();
@@ -43,8 +43,8 @@ const SwitchComponent = React.forwardRef<React.ElementRef<typeof Pressable>, Swi
 
     const handlePress = useCallback(() => {
       if (isDisabled) return;
-      onValueChange(!value);
-    }, [isDisabled, value, onValueChange]);
+      onCheckedChange?.(!checked);
+    }, [isDisabled, checked, onCheckedChange]);
 
     const onPressIn = useCallback(() => {
       if (isDisabled) return;
@@ -69,7 +69,7 @@ const SwitchComponent = React.forwardRef<React.ElementRef<typeof Pressable>, Swi
 
     const trackBg = anim.interpolate({
       inputRange: [0, 1],
-      outputRange: [theme.colors.border, theme.colors.primary],
+      outputRange: [theme.colors.border, paint.background],
     });
 
     const thumbX = anim.interpolate({
@@ -93,7 +93,7 @@ const SwitchComponent = React.forwardRef<React.ElementRef<typeof Pressable>, Swi
       <Pressable
         ref={ref}
         role="switch"
-        aria-checked={value}
+        aria-checked={checked}
         // The NAME. A switch renders a track and a thumb, so there is no text
         // for the name to be computed from and no sibling caption either
         // platform will adopt — without this the control announces "switch, on"
@@ -133,6 +133,7 @@ const SwitchComponent = React.forwardRef<React.ElementRef<typeof Pressable>, Swi
             style={[
               styles.thumb,
               {
+                backgroundColor: anim.interpolate({ inputRange: [0, 1], outputRange: [theme.colors.text, paint.foreground] }),
                 width: thumb,
                 height: thumbHeight,
                 borderRadius: thumbRadius,
@@ -157,7 +158,6 @@ const styles = StyleSheet.create({
     opacity: 0.4,
   },
   thumb: {
-    backgroundColor: '#fff',
     // Subtle raise (`shadow-s`) — `boxShadow` on web (RN-Web deprecated `shadow*`),
     // RN elevation/shadow on native.
     ...bloomShadowStyle('s'),

package/src/switch/types.ts

@@ -1,16 +1,20 @@
+import type { BloomSize, BloomTone } from '../appearance';
 import type { StyleProp, ViewStyle } from 'react-native';
 
 export interface SwitchProps {
   /** Current on/off state */
-  value: boolean;
+  checked?: boolean;
+  value?: boolean;
   /** Called when the user toggles the switch */
-  onValueChange: (value: boolean) => void;
+  onCheckedChange?: (checked: boolean) => void;
+  onValueChange?: (value: boolean) => void;
   /** Whether the switch is disabled */
   disabled?: boolean;
   /** Container style */
   style?: StyleProp<ViewStyle>;
   /** Size variant */
-  size?: 'default' | 'sm';
+  size?: BloomSize | 'small' | 'medium' | 'large' | 'default';
+  tone?: BloomTone;
   /**
    * The switch's accessible NAME, and the only way to give it one.
    *