@oxyhq/bloom 0.89.0 → 1.0.1

package/src/__tests__/support/rendered-style.ts

@@ -0,0 +1,99 @@
+/**
+ * Reading what actually landed on a rendered node — shared by every suite that
+ * asserts the "className lands on the node the parent lays out" rule.
+ *
+ * Three components had the same two-node defect (`Button`, then `Fab` and
+ * `FrostedIconButton`), and asserting it needs the same two things each time:
+ * the HOST tree (composites do not appear in `toJSON()`, so a wrapper is only
+ * visible there) and a deep flatten of the `style` prop, because react-native-css
+ * merges a caller's class in as a `{ $$css: true, className }` descriptor
+ * ALONGSIDE the style objects rather than in a prop of its own.
+ */
+import type { ReactTestRendererJSON } from 'react-test-renderer';
+
+export type StyleEntry = Record<string, unknown>;
+
+export interface HostNode {
+  type: string;
+  props: Record<string, unknown>;
+  children: Array<HostNode | string> | null;
+}
+
+/**
+ * Deep-flatten an RN `style` prop (nested arrays, `false`/`null` holes) into the
+ * list of style objects that actually reached the node.
+ */
+export function styleEntries(style: unknown, out: StyleEntry[] = []): StyleEntry[] {
+  if (!style || typeof style !== 'object') return out;
+  if (Array.isArray(style)) {
+    for (const entry of style) styleEntries(entry, out);
+    return out;
+  }
+  out.push(style as StyleEntry);
+  return out;
+}
+
+/** Every style key/value that landed on a node, later entries winning. */
+export function resolvedStyle(style: unknown): StyleEntry {
+  return Object.assign({}, ...styleEntries(style)) as StyleEntry;
+}
+
+/** The class tokens react-native-css accepted for a node, in arrival order. */
+export function classNamesOn(style: unknown): string[] {
+  return styleEntries(style)
+    .filter((entry) => entry.$$css === true && typeof entry.className === 'string')
+    .map((entry) => String(entry.className));
+}
+
+export function isHostNode(value: unknown): value is HostNode {
+  return (
+    typeof value === 'object' && value !== null && typeof (value as HostNode).type === 'string'
+  );
+}
+
+/** Walk the HOST tree (composites are absent from `toJSON()`) for a testID. */
+export function findHost(
+  node: ReactTestRendererJSON | ReactTestRendererJSON[] | unknown,
+  testID: string,
+): HostNode | null {
+  if (Array.isArray(node)) {
+    for (const child of node) {
+      const hit = findHost(child, testID);
+      if (hit) return hit;
+    }
+    return null;
+  }
+  if (!isHostNode(node)) return null;
+  if (node.props.testID === testID) return node;
+  return findHost(node.children, testID);
+}
+
+/**
+ * Every host node in a rendered tree, in document order.
+ *
+ * The reason to walk `toJSON()` rather than `UNSAFE_root.findAll` is that the
+ * latter yields COMPOSITE instances too, so a `memo(fn)` component contributes
+ * two matches for one rendered element and every count is silently doubled —
+ * which reads as "the component rendered the thing twice", not as an artefact
+ * of the query.
+ */
+export function hostNodes(tree: unknown, out: HostNode[] = []): HostNode[] {
+  if (Array.isArray(tree)) {
+    for (const child of tree) hostNodes(child, out);
+    return out;
+  }
+  if (!isHostNode(tree)) return out;
+  out.push(tree);
+  return hostNodes(tree.children, out);
+}
+
+/**
+ * The host nodes a parent laid out. Callers assert the LENGTH themselves —
+ * "exactly one" is the property, and a helper that returned only the first would
+ * hide the second.
+ */
+export function renderedChildren(tree: unknown, hostTestID: string): HostNode[] {
+  const host = findHost(tree, hostTestID);
+  if (host === null) throw new Error(`no host rendered for testID "${hostTestID}"`);
+  return (host.children ?? []).filter(isHostNode);
+}

package/src/__tests__/support/unread-hook-fixture.ts

@@ -0,0 +1,33 @@
+/**
+ * A module that DELIBERATELY throws away one of the values a hook hands back, so
+ * `hook-subscriptions-are-read.test.ts` can prove its detector fires. It carries
+ * both halves of the control: `unreadFlag` is bound and never read, which the
+ * detector must report, and `readFlag` is bound and read, which it must stay
+ * quiet about — otherwise the cheapest way to green the gate would be deleting a
+ * binding that is doing its job.
+ *
+ * Nothing imports this at runtime. bob's `exclude` keeps it out of `lib/`, and
+ * `files: ["src", …]` does ship it inside the tarball's `src/` like the other
+ * 137 test files there — but no entry point reaches it, so no bundler links it.
+ * It is a plain `.ts` with no React import because the
+ * detector reads source, never types: a call named `use…` bound to a name is all
+ * the shape there is.
+ *
+ * The destructuring RENAMES, which is not decoration — it reproduces the shipped
+ * shape (`const { state: pressed, onIn: onPressIn } = useInteractionState()`) and
+ * it is what keeps the control honest. A hook declared in the same file as its
+ * caller mentions its own property names in its return type and its return
+ * object, and the detector counts every occurrence of a spelling as a possible
+ * read, so an unrenamed fixture would be silently unreportable for a reason no
+ * real call site has.
+ */
+
+/** Stands in for a real subscription — a hook by name, with two return values. */
+function useFixtureInteractionState(): { first: boolean; second: boolean } {
+  return { first: false, second: false };
+}
+
+export function fixtureComponentBody(): boolean {
+  const { first: readFlag, second: unreadFlag } = useFixtureInteractionState();
+  return readFlag;
+}

package/src/accordion/Accordion.tsx

@@ -1,8 +1,25 @@
-import React, { createContext, memo, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
-import { View, Text, Pressable, Animated, type ViewStyle } from 'react-native';
+import React, {
+  createContext,
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  View,
+  Text,
+  Pressable,
+  Animated,
+  type LayoutChangeEvent,
+  type ViewStyle,
+} from 'react-native';
 
+import { ChevronBottom_Stroke2_Corner0_Rounded as ChevronBottomIcon } from '../icons/Chevron';
 import { useTheme } from '../theme/use-theme';
-import { useInteractionState } from '../hooks/useInteractionState';
+import { useInteractionState } from '../hooks/use-interaction-state';
 import { animation, borderRadius, space } from '../styles/tokens';
 import { SUPPORTS_NATIVE_DRIVER } from '../styles/native-driver';
 import type {
@@ -202,15 +219,7 @@ const AccordionTriggerComponent: React.FC<AccordionTriggerProps> = ({
         )}
       </View>
       <Animated.View style={{ transform: [{ rotate: rotation }] }}>
-        <Text
-          style={{
-            fontSize: 16,
-            color: theme.colors.textSecondary,
-            lineHeight: 18,
-          }}
-        >
-          {'\u25BE'}
-        </Text>
+        <ChevronBottomIcon size="sm" fill={theme.colors.textSecondary} />
       </Animated.View>
     </Pressable>
   );
@@ -224,6 +233,18 @@ const AccordionContentComponent: React.FC<AccordionContentProps> = ({
 }) => {
   const { isExpanded } = useContext(AccordionItemContext);
   const heightAnim = useRef(new Animated.Value(isExpanded ? 1 : 0)).current;
+  // The content's own height, measured. The reveal used to interpolate to a
+  // hardcoded 500 ("reasonable max"), which is not a max at all: `overflow:
+  // hidden` above it meant anything taller was CLIPPED, silently, with no error
+  // and no scrollbar — an accordion holding a form or a paragraph of prose just
+  // lost its bottom. The content still lays out at its natural height inside the
+  // clip, so `onLayout` reports the real one whether the item is open or shut.
+  const [contentHeight, setContentHeight] = useState(0);
+  const handleContentLayout = useCallback((event: LayoutChangeEvent) => {
+    const next = event.nativeEvent.layout.height;
+    // Sub-pixel churn would re-render on every frame of the spring.
+    setContentHeight((prev) => (Math.abs(prev - next) > 0.5 ? next : prev));
+  }, []);
 
   useEffect(() => {
     Animated.spring(heightAnim, {
@@ -240,7 +261,7 @@ const AccordionContentComponent: React.FC<AccordionContentProps> = ({
 
   const maxHeight = heightAnim.interpolate({
     inputRange: [0, 1],
-    outputRange: [0, 500], // reasonable max; content will use its natural height
+    outputRange: [0, contentHeight],
   });
 
   return (
@@ -249,12 +270,19 @@ const AccordionContentComponent: React.FC<AccordionContentProps> = ({
         {
           overflow: 'hidden',
           opacity,
-          maxHeight,
+          // Before the first measurement an OPEN item must not be clipped to
+          // zero, and a SHUT one must not flash open — so the unmeasured frame
+          // takes the answer its state already implies, and every frame after
+          // that is driven by the real height.
+          maxHeight: contentHeight === 0 && isExpanded ? undefined : maxHeight,
         },
         style,
       ]}
     >
-      <View style={{ paddingBottom: space.md, paddingHorizontal: space.xs }}>
+      <View
+        onLayout={handleContentLayout}
+        style={{ paddingBottom: space.md, paddingHorizontal: space.xs }}
+      >
         {children}
       </View>
     </Animated.View>

package/src/activity-heatmap/ActivityHeatmap.tsx

@@ -8,13 +8,29 @@ import type { ActivityHeatmapDay, ActivityHeatmapProps } from './types';
 
 const DAY_MS = 86_400_000;
 const DEFAULT_NUM_DAYS = 364;
-const DEFAULT_LEVELS = [1, 3, 6, 10];
+/**
+ * Ascending thresholds, one per colour step ABOVE the first — see
+ * `DEFAULT_ALPHAS`. A positive count below `3` is the lightest tint; `10` and up
+ * is the strongest. The buckets are 1–2 / 3–5 / 6–9 / 10+.
+ */
+const DEFAULT_LEVELS = [3, 6, 10];
 const DEFAULT_MONTHS = [
   'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
   'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
 ];
-/** Opacity steps (low→high) used to derive the default color scale from primary. */
-const DEFAULT_ALPHAS = [0.16, 0.32, 0.52, 0.75, 1];
+/**
+ * Opacity steps (low→high) used to derive the default color scale from primary.
+ *
+ * FOUR steps for THREE thresholds, and the pairing is the whole point: a level
+ * is the number of thresholds a count meets, so N thresholds address indices
+ * `0..N` and a scale needs `N + 1` entries. Index 0 is "positive, but below the
+ * first threshold" — reachable only while `DEFAULT_LEVELS[0] >= 2`. This list
+ * used to carry a fifth step at 0.16 against thresholds starting at 1, where
+ * every positive count meets the first one, so the faintest tint could never
+ * paint. Keep the two lists in step: add a threshold and a colour together, and
+ * never let the first threshold fall to 1.
+ */
+const DEFAULT_ALPHAS = [0.32, 0.52, 0.75, 1];
 const LABEL_FONT_SIZE = 10;
 const MONTH_ROW_HEIGHT = 16;
 const WEEKDAY_COL_WIDTH = 26;

package/src/activity-heatmap/index.ts

@@ -1,3 +1,3 @@
 export { ActivityHeatmap } from './ActivityHeatmap';
-export { bucketByDay } from './bucketByDay';
+export { bucketByDay } from './bucket-by-day';
 export type { ActivityHeatmapProps, ActivityHeatmapDay } from './types';

package/src/activity-heatmap/types.ts

@@ -26,12 +26,23 @@ export interface ActivityHeatmapProps {
    * Ascending count thresholds partitioning positive counts into color levels.
    * With N thresholds a positive count maps to `colorScale[number of thresholds
    * met]` (clamped to the scale). Count 0 always uses `emptyColor`.
-   * @default [1, 3, 6, 10]
+   *
+   * N thresholds therefore address indices `0..N`, so the scale wants `N + 1`
+   * colors — and index 0 means "positive, but below the first threshold", which
+   * only exists while the first threshold is 2 or more. A first threshold of 1
+   * makes the faintest color unreachable: every positive count meets it.
+   *
+   * The defaults bucket 1–2 / 3–5 / 6–9 / 10+.
+   * @default [3, 6, 10]
    */
   levels?: number[];
   /**
    * Colors low→high. Index 0 is the faintest activity shade, the last index the
-   * strongest. Defaults to five opacity steps of `theme.colors.primary`.
+   * strongest. Defaults to four opacity steps of `theme.colors.primary`.
+   *
+   * Pass `levels.length + 1` of them — see `levels`. A shorter scale clamps the
+   * busiest days into its last color; a longer one leaves its darkest colors
+   * unused.
    */
   colorScale?: string[];
   /**

package/src/admonition/index.ts

@@ -0,0 +1,9 @@
+export {
+  AdmonitionIcon,
+  AdmonitionContent,
+  AdmonitionText,
+  AdmonitionButton,
+  AdmonitionRow,
+  AdmonitionRoot,
+  Admonition,
+} from './Admonition';

package/src/alert-dialog/AlertDialog.tsx

@@ -19,9 +19,10 @@ type DialogComponent = React.ComponentType<DialogProps>;
  * the confirm/cancel props onto the Dialog's declarative `actions` row — the
  * SAME battle-tested `ActionRow`/`ActionButton` primitive every other bloom
  * confirm surface uses (e.g. Mention's `ConfirmPrompt`), so the button
- * component, layout, and palette stay identical across apps. Reach for the
- * imperative `confirm()` helper + `<AlertDialogHost />` to trigger a confirm
- * from an event handler without owning visible state.
+ * component, layout, and palette stay identical across apps. To trigger a
+ * confirm from an event handler without owning visible state, reach for the
+ * imperative `confirm()` in `@oxyhq/bloom/surfaces` — it presents onto the
+ * shared surface stack, so it layers over whatever is already open.
  *
  * Control mode — IMPERATIVE, not controlled. `AlertDialog` keeps its public
  * *controlled* API (`visible` boolean + `onClose`) but internally bridges it
@@ -30,11 +31,9 @@ type DialogComponent = React.ComponentType<DialogProps>;
  * Mention's `ConfirmPrompt` uses. That is the code path that actually plays the
  * exit animation on dismiss: imperative `close()` sets `isClosing`, runs the
  * exit animation, and fires `onClose` only once it settles. The controlled path
- * instead fires `onClose` synchronously — and because `<AlertDialogHost />`
- * resolves + drops the queue entry inside `onClose`, the surface would then
- * unmount instantly, skipping the exit animation entirely. Bridging to
- * imperative mode eliminates that fork so `confirm()` and Mention's
- * `ConfirmPrompt` are pixel/timing identical.
+ * instead fires `onClose` synchronously — so a host that unmounts the surface
+ * inside its own `onClose` handler races ahead of the exit animation and it
+ * never plays. Bridging to imperative mode eliminates that fork.
  *
  * The centered card uses the Dialog default `maxWidth` (480px) for full visual
  * parity with the shared confirm surface.
@@ -59,15 +58,13 @@ export function createAlertDialog(Dialog: DialogComponent) {
 
     // Bridge the public *controlled* `visible` prop onto the Dialog's
     // imperative open/close. Opening on mount straight from an effect (no
-    // `setTimeout`) mirrors bloom's own `AutoMountedDialog` (which backs
-    // `alert()`) — the canonical fresh-mount imperative-open pattern:
-    // `<AlertDialogHost />` mounts a FRESH `AlertDialog` per confirm
-    // (`key={id}`) with the final content already committed, so there is no
-    // stale-content window to defer past and the entry animation curve stays
-    // identical to Mention's. `control` is referentially stable (memoised on
-    // its id), so this effect only re-runs when `visible` actually flips. When
-    // a direct consumer flips `visible` to `false`, we imperatively `close()`
-    // so the exit animation still plays.
+    // `setTimeout`) is the canonical fresh-mount imperative-open pattern —
+    // `SurfaceHost`'s `SurfaceLayer` does the same — and it works because the
+    // component mounts with its final content already committed, so there is no
+    // stale-content window to defer past. `control` is referentially stable
+    // (memoised on its id), so this effect only re-runs when `visible` actually
+    // flips. When a consumer flips `visible` to `false`, we imperatively
+    // `close()` so the exit animation still plays.
     const closingFromPropRef = useRef(false);
     useEffect(() => {
       if (visible) {

package/src/alert-dialog/index.ts

@@ -1,13 +1,11 @@
 import { Dialog } from '../dialog/index';
 import { createAlertDialog } from './AlertDialog';
-import { createAlertDialogHost } from './AlertDialogHost';
 
+/**
+ * The declarative, CONTROLLED confirm dialog. The imperative counterpart is
+ * `confirm()` from `@oxyhq/bloom/surfaces`, which presents onto the shared
+ * surface stack — this family owns no queue and no host of its own.
+ */
 export const AlertDialog = createAlertDialog(Dialog);
-export const AlertDialogHost = createAlertDialogHost(AlertDialog);
 
-export { confirm } from './confirm-store';
-export type {
-  AlertDialogProps,
-  AlertDialogActionStyle,
-  ConfirmOptions,
-} from './types';
+export type { AlertDialogProps, AlertDialogActionStyle } from './types';

package/src/alert-dialog/index.web.ts

@@ -1,13 +1,7 @@
 import { Dialog } from '../dialog/index.web';
 import { createAlertDialog } from './AlertDialog';
-import { createAlertDialogHost } from './AlertDialogHost';
 
+/** Web variant of the `./alert-dialog` barrel — see `./index.ts`. */
 export const AlertDialog = createAlertDialog(Dialog);
-export const AlertDialogHost = createAlertDialogHost(AlertDialog);
 
-export { confirm } from './confirm-store';
-export type {
-  AlertDialogProps,
-  AlertDialogActionStyle,
-  ConfirmOptions,
-} from './types';
+export type { AlertDialogProps, AlertDialogActionStyle } from './types';

package/src/animated-check/AnimatedCheck.tsx

@@ -9,6 +9,7 @@ import Animated, {
 import Svg, { Circle, Path } from 'react-native-svg';
 
 import { useTheme } from '../theme';
+import type { AnimatedCheckRef, AnimatedCheckProps } from './types';
 
 /** Square viewBox the ring + check are drawn on. */
 const VIEW_BOX = 52;
@@ -26,18 +27,6 @@ const CIRCLE_DURATION = 500;
 /** Check draw-on duration (ms), started once the ring completes. */
 const CHECK_DURATION = 300;
 
-export interface AnimatedCheckRef {
-  /** Replays the draw-on animation from the start. */
-  play: () => void;
-}
-
-export interface AnimatedCheckProps {
-  /** Width and height in px. Defaults to `24`. */
-  size?: number;
-  /** Stroke color of the ring and check. Defaults to the theme success color. */
-  color?: string;
-}
-
 // `Animated.createAnimatedComponent` must be called once per underlying
 // component — calling it per render would remount the element and break the
 // animation — so the wrappers are built once at module scope.

package/src/animated-check/index.ts

@@ -1,2 +1,2 @@
 export { AnimatedCheck } from './AnimatedCheck';
-export type { AnimatedCheckProps, AnimatedCheckRef } from './AnimatedCheck';
+export type { AnimatedCheckProps, AnimatedCheckRef } from './types';

package/src/animated-check/types.ts

@@ -0,0 +1,11 @@
+export interface AnimatedCheckRef {
+  /** Replays the draw-on animation from the start. */
+  play: () => void;
+}
+
+export interface AnimatedCheckProps {
+  /** Width and height in px. Defaults to `24`. */
+  size?: number;
+  /** Stroke color of the ring and check. Defaults to the theme success color. */
+  color?: string;
+}

package/src/aspect-ratio/AspectRatio.tsx

@@ -0,0 +1,58 @@
+/**
+ * A box that keeps a fixed width-to-height ratio while its width is decided by
+ * the layout around it. The usual job: a media well that must not jump as an
+ * image loads, because its height was known before the image was.
+ *
+ * NOT a port. react-native-reusables' `aspect-ratio.tsx` is four lines
+ * re-exporting `@rn-primitives/aspect-ratio`'s Root — a primitive that exists on
+ * web because CSS needed `padding-bottom` tricks before `aspect-ratio` landed.
+ * React Native has had `aspectRatio` as an ordinary style property the whole
+ * time, so there was nothing to copy; what earns the name here is the shadcn
+ * spelling and the two decisions below, not any imported code.
+ *
+ * `width: '100%'` is the first: an aspect box with no width is zero-sized, and
+ * "fill the parent, derive the height" is what every call site wants — a caller
+ * who needs a fixed width passes it through `style`, which lands last.
+ *
+ * No `className`, and that is the second. `aspectRatio` is the ONE property this
+ * component exists to set, and react-native-css merges utilities BEFORE inline
+ * style, so a caller writing `className="aspect-video"` would have it silently
+ * overwritten by the `ratio` prop with no error anywhere. One owner per
+ * property: use this component with `ratio`, or a plain `View` with the class,
+ * never both. Wrap it in a `StyledView` for the surrounding layout classes.
+ */
+import React from 'react';
+import { View } from 'react-native';
+
+import type { AspectRatioProps } from './types';
+
+/** A square, used both for an omitted `ratio` and for one that is not a ratio. */
+const DEFAULT_RATIO = 1;
+
+export function AspectRatio({ ratio = DEFAULT_RATIO, children, style, testID }: AspectRatioProps) {
+  // A ratio is width ÷ height, and a box has positive finite lengths on both
+  // axes, so the only coherent values are positive and finite. `0`, `NaN`,
+  // `Infinity` and negatives are not choices a caller can make on purpose —
+  // they are what the ONE piece of arithmetic every call site writes returns
+  // before an image has loaded: `0 / 0` is `NaN`, `w / 0` is `Infinity`, and
+  // `0 / h` is `0`. All three arrive from the same accident, so `0` is not a
+  // deliberate value this guard is taking away.
+  //
+  // Passed through, each leaves the box with no usable height — it collapses,
+  // which is the exact layout jump this component exists to prevent, silently
+  // and with no error on either platform. A default parameter rescues only
+  // `undefined`, and `ratio || 1` would still let `Infinity` and a negative
+  // through, so the test is for a positive finite number rather than a falsy
+  // one. The fallback is the documented default and not a throw: "I could not
+  // compute a ratio yet" is the same situation as "I did not give you one",
+  // and a media well must not crash a screen during an image's loading window.
+  const aspectRatio = ratio > 0 && Number.isFinite(ratio) ? ratio : DEFAULT_RATIO;
+
+  return (
+    <View style={[{ width: '100%', aspectRatio }, style]} testID={testID}>
+      {children}
+    </View>
+  );
+}
+
+AspectRatio.displayName = 'AspectRatio';

package/src/aspect-ratio/index.ts

@@ -0,0 +1,2 @@
+export { AspectRatio } from './AspectRatio';
+export type { AspectRatioProps } from './types';

package/src/aspect-ratio/types.ts

@@ -0,0 +1,19 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface AspectRatioProps {
+  /**
+   * Width divided by height — `16 / 9`, `1`, `4 / 3`. Defaults to `1`.
+   *
+   * shadcn's web `AspectRatio` takes the same number for the same reason: a
+   * ratio is arithmetic the call site already has, and naming presets instead
+   * (`'video'`, `'square'`) would need a new name for every ratio anyone wants.
+   *
+   * Any value that is not a positive finite number takes the default too — `0`,
+   * `NaN`, `Infinity` and negatives all come out of `w / h` on an image that has
+   * not loaded, and none of them names a box.
+   */
+  ratio?: number;
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/avatar/Avatar.tsx

@@ -1,12 +1,13 @@
 import React, { memo, useMemo, useRef, useState } from 'react';
-import { View, Image, StyleSheet, Text, TouchableOpacity } from 'react-native';
+import { View, Image, StyleSheet, Text, Pressable } from 'react-native';
 import type { TextStyle } from 'react-native';
 import Svg, { ClipPath, Defs, Image as SvgImage, Path } from 'react-native-svg';
 
 import { useTheme } from '../theme/use-theme';
+import { useInteractionState } from '../hooks/use-interaction-state';
 import { useImageResolver } from '../image-resolver/context';
 import { Z_INDEX } from '../styles/z-index';
-import { useAvatarPlaceholder } from './placeholder-context';
+import { useAvatarPlaceholder } from './context';
 import { LiveBadge } from './LiveBadge';
 import { AvatarRing, getRingOuterSize } from './AvatarRing';
 import { SQUIRCLE_PATH } from './squircle-path';
@@ -175,6 +176,10 @@ const AvatarComponent: React.FC<AvatarProps> = ({
   testID,
 }) => {
   const [errored, setErrored] = useState(false);
+  // The press dip goes through the shared interaction hook rather than
+  // `TouchableOpacity`'s `activeOpacity` — one mechanism across the library, and
+  // the one the reduced-motion / pointer-type guards live behind.
+  const { state: pressed, onIn: onPressIn, onOut: onPressOut } = useInteractionState();
   const theme = useTheme();
   const placeholderConfig = useAvatarPlaceholder();
   const radius = size / 2;
@@ -342,13 +347,27 @@ const AvatarComponent: React.FC<AvatarProps> = ({
   );
 
   if (onPress) {
-    return <TouchableOpacity onPress={onPress}>{content}</TouchableOpacity>;
+    return (
+      <Pressable
+        onPress={onPress}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        accessibilityRole="button"
+        accessibilityLabel={hasName ? name : undefined}
+        style={pressed ? styles.pressed : undefined}
+      >
+        {content}
+      </Pressable>
+    );
   }
 
   return content;
 };
 
 const styles = StyleSheet.create({
+  pressed: {
+    opacity: 0.7,
+  },
   container: {
     position: 'relative',
     overflow: 'visible',

package/src/avatar/default-avatar.ts

@@ -12,6 +12,13 @@
 const DATA_URI =
   'data:image/jpeg;base64,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ecro7/EAJkdzx/hYW/Z0uNQ6DqHwQAQhCENQx6c29Ylu+z6ePtp2GX5tyzvLQOEDqHwgIIQpDhActvXPOxx4+7+R2fGlnQOEjHQfCAA0CEIcAMUs95Q+rMhCcnxcLc0S3mW9mGOEToPGAzwAhCEOMAWe9vF9MH224//aAAwDAQACAAMAAAAQ88888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888889498888888888888888888847VARe3888888888888888888TK6pu6Ge8888888888888888Ixp2kpECW888888888888888R51sfvf83V088888888888888rBB6ti6Ep5U888888888888889AiUhnOoAN2888888888888885IwSPNa4l298888888888888880v9/eorQi8888888888888888tvnVyltY8888888888888888888Re0xq88888888888888888888888888888888888888888888RvTsKIK888888888888888892w45/ICcM68888888888888hAiMEJ1Rq3Nug08888888888vDeJ2k1CVymw/Az888888888o2gmeEf9Gf0iQ9tGo88888888MlLddbc8BVxw1qXJh1888888qtGlcgnF7MNY6MPY972888888rUAprq8IIApgFMKeSOu888//EACURAQACAgEEAQQDAAAAAAAAAAEAERAhMSAwQEFRYXGBsVBwof/aAAgBAwEBPxD+iFDmfXgjx4tsYtRonIZn3wNrE0Ys/wBlyfCeYvpUNcCFItv4Ux6nBKjA4DABItLw8+B9mJu3NcZgkNLeBwqUowN8xJi2Zd+fgO3ep5gcKP698XXuOxjKlSpU4gwkEAB68D5U9xekY2ia4+3gpemEU/xKUkGXFlSECkgAo8M+Cd0TZK12QWv4259OPJe0GL3AnLk4h8EXfM0Zog5I8bspsA1y2Q2jT3j+VFFuGmBvKQcBbDa2QP3u5Q9sFduC9RYsXFwgi4I2rn6b2ju9xLGGoNYMMXLlwggi7huLcQN3J2dAcE3YsGHqAIMC3jTfEG+u2ZbD7IAQQQYHjKR66mN3QDD0+IIIMhslo9D/xAAlEQEAAgICAQMEAwAAAAAAAAABABEQITFAIDBBUVBhcYFwscH/2gAIAQIBAT8Q/gg3PtSq6tWIJathrmpeOubmyVMog6i5iGDKBUYPcXR2DljrCYHBVTdHJ0eNQZBhcRjgdDy6BcxJMDDj0IA/x0GGBBJnsMAEvvt66mPaERAgSpUrBhQoiP36Gx9PEA3ipUqEI7m6fz0RqaifuW5Z4l2U3E/cVW3pqQBq2a+cAqKnsfTeNTl0F5WfeguFnMulIj8JsnbDQIJ4JFjyJvgpiu+PWf4XxNFEucUIkvElk1xiNM/z3qXPZiBqXRIQECsJcYYqpVHSf3H0lq9oVRFEwMmkpgwxVRUxFTHqOH0apeWawYEEnj9l8AX3zOPOmivCcZjJM9hllkky+LI87mNHgZJ5YMsucbEpHg//xAAsEAACAQMCBQQCAwADAAAAAAAAAREhMWFBURBxgZGhQLHB8FDRMOHxIHCQ/9oACAEBAAE/EP8Aw8dhqU120JDuF/bcT/veTNHpEK34lcH1b6tfluNGjWVJdlX2HlwSlZ7V7sqzHq3Is49NuRuSE1kaNqtU8fPwVpq+9n+yOH1Suuauvw7cD1tsXf8AsY1tR6vbZCEpQUWQi0IjBm4BBZDicIgrGm0MeQWwkqhvh7chkiacp1X4NCGNkkrtjhthTrise4xDYkVFzESViC1OYgczFkLMg0LbeB7zQPLpwm6vJYx2yrglKSqa/BsS+kol1b2fPYqLEoEiDpuZEM85zoWa7idyYi7seKFeSIyq6n2h+/UVV+BVB0+N6vp7wVAbl7iJKaCkrruUCHXyZDcY138nMQm4zczR1M/kc9RSNqMjJ0y3EpNt10H8f7+AZT09co0terHlKiVCR03NKSbUzGVmb8izXcWZmEb+TIZ0LbVHqMbNXBu1/wB8xCEaaalP17kji2uHLomvcn3PkShcXGu/Dyle+u59DHkc9RZGwyZ3GUqUrjmri2rkE5Ji22q1tbxAvW6jVcV36IEjVIKoKi5l8i9yuZB5nOb5MvkrX4GQUWVZKjdEgtuUGiij9169qm0SvrLKyo/cUNS7XhZIMo+cv/sRWbMvkzvuUr+R25OLkyuyW8cudHHafj124zo9xkTlA1Mp9ZMqHm+41erIbiVa+BF1D6yfeTKLIfKTJUfte/6+DfoED1IW6+eC3cyDq/sfIcxfcWYshfckFm5GbkP+iKtJlFtUp58oa+fXwgUbXOq9mOBC78HL5PrJuseTHzmYq7+RZi4VV3FXcylcmgcnKJfPKfXoiSfzJ4kenGo0MpKepkGfUNouN5PqvEWQn38jOhu8CuPLSHUw1MaaqUOLL2nr69EjTsx6BlKTdrdrc0OehnYbyNvckbOoiSXJImJrfiTlwhL8QJuLLV9qibCZDRKiJ9epkYt0VdVdL9xIewYm6cUjZPGSRcLhjJQymTqVLwyNVW/rTtn8DBFQ2m0dDlt2J8sGWBogaI4QRwQh0gs1DgKcmzpLZ9ougkohCSUJL8FH1IFGhtZ7dfke43ywx2mNQNYIIIIIEh72KmOw4q2pfZbv+hIRaEvl5/CJKhCEpoSxWy7vyOV+Ys2yZDTRAmduA0QQJCEWYzVKwJWF1Qj9S8+4iukWSX4dxgXL/wB+o6tEiojo6eRmuEm046jJpu6DCH2ygLsjqhOB2stvshmp6T19j5aFqQXpS1y0XvkS/FPSTQ0Sn0Ppm9Bojl+Rly+40gfm7xfzC0m7JJLov+j+YtTlLQ+4d3jWwd0oHBNmT8tDDCc6rA7SaXun4bENS3sl3agYQ+2U34J/DqU5iBtsnzgSbQ6w2W+it3Y9cJWlh2UCbbbdzSN9xl0buNttN3Jaq7i12+5QJsf6BNFElC8AdBBqjCl6mz8C9JLMzvbyJp/gWTKyMJz/AEknEfSwozq+prbHdGPyOuIfY2Y9onsT2Y3ZmwYvuIrUR0G8pseBaZezToIoFmW5frp17iA2lOqa9dQ5b3XIXySaO1b83r7DK74AzYYK08DCuCwLscoWK4bAhW3gpqEKmxgHNYU9JHZJavp026EriVNs/ayvV6D4bJ/Ju8FdyLZjHJobQtKwrRDRKwh6CXohU2MBykZt4EbGAWkhaSoJGpgW1oSzREEtKg1rMdjaUyGmJ+TR5mz8cvVLTf4Wx+w0uo9qyQaeBUC1oKHAtRWwl6CdjlpyIzYwiYsIsC0EGk0SokqTS4qTC6iLM2sdcXjOnKyaRNOU/TwNuOWw+ew1rljmVCzQgigsKIFYbyMMMOJOgfC4TsNkQIE92NiLYQxLlwNToNJCrJUY7Xj25emW+OmpP6N/3sOFklSzQjSoUkNxpv2HUPIyG6R7B1cRZGUWQuFylQbsd5Ki7QemPW0xNOSq7Pkvbz6NvU/AA3BPMx23BigoExh5jyG+48xllrvx0Y7izFkI5iXUWQ3QqQpyXxGmMzsJsnDTH0aUUrXfk/RO1SMMr5t+r2GhrCwlQsQjdnMOOrMo8jQlDyHRV+Rpucxdddyy6OZcCqvwKFzIWKmSoqKjNSKVuAmQno21Br+2ovAimJ0afoZZZIaY1P46kzVkw0DQUr8Vi5ceQ/qTIPMYeRzHMcyEu4suC3/RZDDJwFmJi464JJkI5Jxmqprt6P3XoHRCZ41rR+7k5Ueo1FUjQsjmGn1jDJuMvMZuMPIdd+PERSPgMm5UvwMlDILMbwUBx6scrhjz0m9jXYV8TTFqn/PETjubv4kkeo6v7GqigRUFwco832Klx5oZSMvNjN92Ti4n3FWI5UZSQycHKKFoHLUyFW49y7qRqVkHaq6l8rp/PPpRj1b9F5KyrEWUyGQnuPIeQ8z6yPNjfcyjzHTc5zmLLiyFn5EVmZSrc+kmUysWme5DddxyV13KD4FQgRyNW7TrqSqr5XX+Zl6wJlqlF4gqOuoqzIZoEdh1jPNMo8zKPMefA8i/gRWiRCGginepk4eViKDz88LPxdGFKVXJyNTTQmnuv5XxipG6VCWsTtUWZnI6yc5TqPmGW/WPTwXXUc9TmOYsJCfcX0hQ1F2cHKcgysqqopaizO45xjIZWQ3ERT+oj6nT/n//2Q==';
 
-const DEFAULT_AVATAR_SOURCE: { uri: string } = { uri: DATA_URI };
+/**
+ * Default avatar placeholder image — pass as `fallbackSource` on `Avatar`, or
+ * to `AvatarPlaceholderProvider`.
+ *
+ * Exported from here, its owner, rather than aliased in the barrel: `index.ts`
+ * is a barrel and declares nothing.
+ */
+export const defaultAvatarSource: { uri: string } = { uri: DATA_URI };
 
-export default DEFAULT_AVATAR_SOURCE;
+export default defaultAvatarSource;

package/src/avatar/index.ts

@@ -1,16 +1,10 @@
 export { Avatar } from './Avatar';
-export { AvatarPlaceholderProvider } from './placeholder-context';
-export type { AvatarPlaceholderConfig } from './placeholder-context';
+export { AvatarPlaceholderProvider } from './context';
+export type { AvatarPlaceholderConfig } from './context';
 export type {
   AvatarProps,
   AvatarShape,
   AvatarRingConfig,
   AvatarRingGradientDirection,
 } from './types';
-
-// Inlined as a base64 data URI so consumers compiling Bloom's source directly
-// do not need ambient `*.jpg` module declarations or a `.jpg` asset loader.
-import defaultAvatar from './default-avatar';
-
-/** Default avatar placeholder image — use as `fallbackSource` on Avatar or in AvatarPlaceholderProvider */
-export const defaultAvatarSource = defaultAvatar;
+export { defaultAvatarSource } from './default-avatar';