@oxyhq/bloom 0.26.1 → 0.28.0

package/src/__tests__/PressableWithHover.test.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { PressableWithHover } from '../pressable-with-hover';
+
+describe('PressableWithHover', () => {
+  it('carries a displayName', () => {
+    expect(PressableWithHover.displayName).toBe('PressableWithHover');
+  });
+
+  it('renders its children', () => {
+    const { getByText } = render(
+      <PressableWithHover
+        accessibilityLabel="Row"
+        style={{ backgroundColor: 'white' }}
+        hoverStyle={{ backgroundColor: 'gray' }}
+      >
+        <Text>Row</Text>
+      </PressableWithHover>,
+    );
+    expect(getByText('Row')).toBeTruthy();
+  });
+
+  it('merges hoverStyle only while hovered', () => {
+    const { getByTestId } = render(
+      <PressableWithHover
+        testID="row"
+        style={{ backgroundColor: 'white' }}
+        hoverStyle={{ backgroundColor: 'gray' }}
+      >
+        <Text>Row</Text>
+      </PressableWithHover>,
+    );
+
+    const row = getByTestId('row');
+    expect(row.props.style).toEqual({ backgroundColor: 'white' });
+
+    fireEvent(row, 'hoverIn');
+    expect(getByTestId('row').props.style).toEqual([
+      { backgroundColor: 'white' },
+      { backgroundColor: 'gray' },
+    ]);
+
+    fireEvent(row, 'hoverOut');
+    expect(getByTestId('row').props.style).toEqual({ backgroundColor: 'white' });
+  });
+});

package/src/__tests__/SubtleHover.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import { SubtleHover } from '../subtle-hover';
+
+// Default test Platform.OS is 'ios' (see __mocks__/react-native.ts), so the
+// web-only overlay is suppressed unless `native` is opted in.
+function renderWithTheme(ui: React.ReactElement) {
+  return render(
+    <BloomThemeProvider mode="light" colorPreset="teal">
+      {ui}
+    </BloomThemeProvider>,
+  );
+}
+
+describe('SubtleHover', () => {
+  it('carries a displayName', () => {
+    expect(SubtleHover.displayName).toBe('SubtleHover');
+  });
+
+  // `renderWithTheme` wraps the subject in the provider's flex View, so the
+  // overlay's presence is read from that wrapper's `children` rather than the
+  // root being null.
+  it('renders nothing on native by default', () => {
+    const tree = renderWithTheme(<SubtleHover hover />).toJSON();
+    expect(tree).not.toBeNull();
+    expect(tree?.children).toBeNull();
+  });
+
+  it('renders the overlay on native when opted in', () => {
+    const tree = renderWithTheme(<SubtleHover hover native />).toJSON();
+    expect(tree?.children).not.toBeNull();
+  });
+
+  it('accepts an opacity override and a style', () => {
+    const tree = renderWithTheme(
+      <SubtleHover hover native opacity={0.9} style={{ borderRadius: 12 }} />,
+    ).toJSON();
+    expect(tree?.children).not.toBeNull();
+  });
+});

package/src/__tests__/theme-gradients.test.ts

@@ -0,0 +1,31 @@
+import { buildTheme } from '../theme/build-theme';
+import { THEME_GRADIENTS } from '../theme/gradients';
+
+describe('theme gradients', () => {
+  it('are exposed on the built theme', () => {
+    const theme = buildTheme('teal', 'light');
+    expect(theme.gradients).toBe(THEME_GRADIENTS);
+    expect(Object.keys(theme.gradients).length).toBeGreaterThan(0);
+  });
+
+  it('every gradient has ordered [offset, color] stops', () => {
+    for (const [name, gradient] of Object.entries(THEME_GRADIENTS)) {
+      expect(name).toBeTruthy();
+      expect(Array.isArray(gradient.values)).toBe(true);
+      expect(gradient.values.length).toBeGreaterThanOrEqual(2);
+
+      for (const [offset, color] of gradient.values) {
+        expect(typeof offset).toBe('number');
+        expect(offset).toBeGreaterThanOrEqual(0);
+        expect(offset).toBeLessThanOrEqual(1);
+        expect(color).toMatch(/^#[0-9a-f]{6}$/i);
+      }
+    }
+  });
+
+  it('are identical across light and dark mode (theme-agnostic)', () => {
+    expect(buildTheme('teal', 'dark').gradients).toBe(
+      buildTheme('teal', 'light').gradients,
+    );
+  });
+});

package/src/__tests__/theme.test.ts

@@ -5,6 +5,7 @@ import {
   hexToAppColorName,
 } from '../theme/color-presets';
 import { buildTheme } from '../theme/build-theme';
+import { THEME_GRADIENTS } from '../theme/gradients';
 import type { Theme, ThemeColors, ThemeMode } from '../theme/types';
 
 describe('Theme system', () => {
@@ -111,6 +112,7 @@ describe('Theme system', () => {
         isDark: false,
         isLight: true,
         colors: createMockColors(),
+        gradients: THEME_GRADIENTS,
       };
       expect(lightTheme.isDark).toBe(false);
       expect(lightTheme.isLight).toBe(true);
@@ -120,6 +122,7 @@ describe('Theme system', () => {
         isDark: true,
         isLight: false,
         colors: createMockColors(),
+        gradients: THEME_GRADIENTS,
       };
       expect(darkTheme.isDark).toBe(true);
       expect(darkTheme.isLight).toBe(false);

package/src/__tests__/useGutters.test.ts

@@ -0,0 +1,58 @@
+import { renderHook } from '@testing-library/react-native';
+
+import { useGutters } from '../hooks/useGutters';
+import { space } from '../styles/tokens';
+
+// The RN mock reports a 375px-wide window (below the `sm` 640 breakpoint), so
+// every case resolves to the `base` tier.
+
+describe('useGutters', () => {
+  it('expands a single size to all four edges', () => {
+    const { result } = renderHook(() => useGutters(['base']));
+    expect(result.current).toEqual({
+      paddingTop: space.lg,
+      paddingRight: space.lg,
+      paddingBottom: space.lg,
+      paddingLeft: space.lg,
+    });
+  });
+
+  it('treats a two-value list as [vertical, horizontal]', () => {
+    const { result } = renderHook(() => useGutters([0, 'wide']));
+    expect(result.current).toEqual({
+      paddingTop: 0,
+      paddingRight: space.xl,
+      paddingBottom: 0,
+      paddingLeft: space.xl,
+    });
+  });
+
+  it('maps a four-value list to [top, right, bottom, left]', () => {
+    const { result } = renderHook(() =>
+      useGutters(['compact', 'base', 0, 'wide']),
+    );
+    expect(result.current).toEqual({
+      paddingTop: space.sm,
+      paddingRight: space.lg,
+      paddingBottom: 0,
+      paddingLeft: space.xl,
+    });
+  });
+
+  it('returns zero padding for a `0` gutter', () => {
+    const { result } = renderHook(() => useGutters([0]));
+    expect(result.current).toEqual({
+      paddingTop: 0,
+      paddingRight: 0,
+      paddingBottom: 0,
+      paddingLeft: 0,
+    });
+  });
+
+  it('keeps a stable object identity across re-renders at the same width', () => {
+    const { result, rerender } = renderHook(() => useGutters(['base']));
+    const first = result.current;
+    rerender({});
+    expect(result.current).toBe(first);
+  });
+});

package/src/__tests__/useHaptics.test.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Platform } from 'react-native';
+import { act, renderHook } from '@testing-library/react-native';
+import { ImpactFeedbackStyle, impactAsync } from 'expo-haptics';
+
+import { BloomHapticsProvider, useHaptics } from '../hooks/useHaptics';
+
+const originalOS = Platform.OS;
+
+afterEach(() => {
+  Platform.OS = originalOS;
+  jest.clearAllMocks();
+});
+
+describe('useHaptics', () => {
+  it('returns a callback', () => {
+    const { result } = renderHook(() => useHaptics());
+    expect(typeof result.current).toBe('function');
+  });
+
+  it('fires the mapped impact style on iOS', () => {
+    Platform.OS = 'ios';
+    const { result } = renderHook(() => useHaptics());
+    act(() => result.current('heavy'));
+    expect(impactAsync).toHaveBeenCalledWith(ImpactFeedbackStyle.Heavy);
+  });
+
+  it('defaults to the light impact', () => {
+    Platform.OS = 'ios';
+    const { result } = renderHook(() => useHaptics());
+    act(() => result.current());
+    expect(impactAsync).toHaveBeenCalledWith(ImpactFeedbackStyle.Light);
+  });
+
+  it('clamps to the light impact on Android regardless of strength', () => {
+    Platform.OS = 'android';
+    const { result } = renderHook(() => useHaptics());
+    act(() => result.current('heavy'));
+    expect(impactAsync).toHaveBeenCalledWith(ImpactFeedbackStyle.Light);
+  });
+
+  it('no-ops on web', () => {
+    Platform.OS = 'web';
+    const { result } = renderHook(() => useHaptics());
+    act(() => result.current('medium'));
+    expect(impactAsync).not.toHaveBeenCalled();
+  });
+
+  it('no-ops when disabled via BloomHapticsProvider', () => {
+    Platform.OS = 'ios';
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <BloomHapticsProvider enabled={false}>{children}</BloomHapticsProvider>
+    );
+    const { result } = renderHook(() => useHaptics(), { wrapper });
+    act(() => result.current('medium'));
+    expect(impactAsync).not.toHaveBeenCalled();
+  });
+});

package/src/__tests__/useInteractionState.test.ts

@@ -0,0 +1,27 @@
+import { act, renderHook } from '@testing-library/react-native';
+
+import { useInteractionState } from '../hooks/useInteractionState';
+
+describe('useInteractionState', () => {
+  it('starts inactive and toggles on onIn/onOut', () => {
+    const { result } = renderHook(() => useInteractionState());
+    expect(result.current.state).toBe(false);
+
+    act(() => result.current.onIn());
+    expect(result.current.state).toBe(true);
+
+    act(() => result.current.onOut());
+    expect(result.current.state).toBe(false);
+  });
+
+  it('keeps handler identities stable across renders', () => {
+    const { result, rerender } = renderHook(() => useInteractionState());
+    const firstOnIn = result.current.onIn;
+    const firstOnOut = result.current.onOut;
+
+    rerender({});
+
+    expect(result.current.onIn).toBe(firstOnIn);
+    expect(result.current.onOut).toBe(firstOnOut);
+  });
+});

package/src/animated-check/AnimatedCheck.stories.tsx

@@ -0,0 +1,60 @@
+import React, { useRef } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { AnimatedCheck, type AnimatedCheckRef } from './index';
+
+const meta: Meta<typeof AnimatedCheck> = {
+  title: 'Components/AnimatedCheck',
+  component: AnimatedCheck,
+  argTypes: {
+    size: { control: { type: 'range', min: 16, max: 128, step: 4 } },
+    color: { control: 'color' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AnimatedCheck>;
+
+export const Playable: Story = {
+  args: { size: 64 },
+  render: (args) => {
+    function Demo() {
+      const ref = useRef<AnimatedCheckRef>(null);
+      return (
+        <View style={{ gap: 16, alignItems: 'center' }}>
+          <AnimatedCheck ref={ref} {...args} />
+          <Pressable
+            accessibilityLabel="Play"
+            onPress={() => ref.current?.play()}
+            style={{
+              paddingVertical: 8,
+              paddingHorizontal: 16,
+              borderRadius: 8,
+              backgroundColor: '#111827',
+            }}
+          >
+            <Text style={{ color: 'white', fontWeight: '600' }}>Play</Text>
+          </Pressable>
+        </View>
+      );
+    }
+    return <Demo />;
+  },
+};
+
+export const CustomColor: Story = {
+  args: { size: 80, color: '#6366f1' },
+  render: (args) => {
+    function Demo() {
+      const ref = useRef<AnimatedCheckRef>(null);
+      return (
+        <Pressable accessibilityLabel="Replay" onPress={() => ref.current?.play()}>
+          <AnimatedCheck ref={ref} {...args} />
+        </Pressable>
+      );
+    }
+    return <Demo />;
+  },
+};

package/src/animated-check/AnimatedCheck.tsx

@@ -0,0 +1,173 @@
+import React, { forwardRef, useCallback, useImperativeHandle, useMemo } from 'react';
+import { StyleSheet, Text } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedProps,
+  useSharedValue,
+  withDelay,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { getSvgModule } from '../avatar/svg-module';
+import { useTheme } from '../theme';
+
+/** The resolved `react-native-svg` module (non-null branch). */
+type SvgModule = NonNullable<ReturnType<typeof getSvgModule>>;
+
+/** Square viewBox the ring + check are drawn on. */
+const VIEW_BOX = 52;
+/** Ring radius within the viewBox. */
+const CIRCLE_RADIUS = 24;
+/** Ring circumference (2·π·r ≈ 150.8) rounded up so the dash fully hides it. */
+const CIRCLE_LENGTH = 166;
+/** Approximate path length of the check stroke. */
+const CHECK_LENGTH = 48;
+/** The check glyph, drawn on the 52×52 canvas. */
+const CHECK_PATH = 'M14.1 27.2l7.1 7.2 16.7-16.8';
+const STROKE_WIDTH = 4;
+/** Ring draw-on duration (ms). */
+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 and break the animation).
+// react-native-svg is a lazy/optional peer, so we build the animated wrappers
+// the first time it resolves and cache them at module scope.
+function buildAnimatedSvg(svg: SvgModule) {
+  return {
+    Circle: Animated.createAnimatedComponent(svg.Circle),
+    Path: Animated.createAnimatedComponent(svg.Path),
+  };
+}
+
+let animatedSvgCache: ReturnType<typeof buildAnimatedSvg> | null = null;
+
+function getAnimatedSvg(svg: SvgModule): ReturnType<typeof buildAnimatedSvg> {
+  if (!animatedSvgCache) animatedSvgCache = buildAnimatedSvg(svg);
+  return animatedSvgCache;
+}
+
+interface AnimatedCheckSvgProps {
+  size: number;
+  color: string;
+  svg: SvgModule;
+}
+
+/** The animated SVG implementation, rendered only when react-native-svg exists. */
+const AnimatedCheckSvg = forwardRef<AnimatedCheckRef, AnimatedCheckSvgProps>(
+  function AnimatedCheckSvg({ size, color, svg }, ref) {
+    const { default: Svg } = svg;
+    const { Circle, Path } = getAnimatedSvg(svg);
+
+    const circleProgress = useSharedValue(0);
+    const checkProgress = useSharedValue(0);
+
+    const circleAnimatedProps = useAnimatedProps(() => ({
+      strokeDashoffset: CIRCLE_LENGTH - circleProgress.value * CIRCLE_LENGTH,
+    }));
+    const checkAnimatedProps = useAnimatedProps(() => ({
+      strokeDashoffset: CHECK_LENGTH - CHECK_LENGTH * checkProgress.value,
+    }));
+
+    const play = useCallback(() => {
+      circleProgress.value = 0;
+      checkProgress.value = 0;
+      circleProgress.value = withTiming(1, {
+        duration: CIRCLE_DURATION,
+        easing: Easing.linear,
+      });
+      checkProgress.value = withDelay(
+        CIRCLE_DURATION,
+        withTiming(1, { duration: CHECK_DURATION, easing: Easing.linear }),
+      );
+    }, [circleProgress, checkProgress]);
+
+    useImperativeHandle(ref, () => ({ play }), [play]);
+
+    return (
+      <Svg fill="none" viewBox={`0 0 ${VIEW_BOX} ${VIEW_BOX}`} width={size} height={size}>
+        <Circle
+          animatedProps={circleAnimatedProps}
+          cx={VIEW_BOX / 2}
+          cy={VIEW_BOX / 2}
+          r={CIRCLE_RADIUS}
+          fill="none"
+          stroke={color}
+          strokeWidth={STROKE_WIDTH}
+          strokeDasharray={CIRCLE_LENGTH}
+        />
+        <Path
+          animatedProps={checkAnimatedProps}
+          d={CHECK_PATH}
+          stroke={color}
+          strokeWidth={STROKE_WIDTH}
+          strokeDasharray={CHECK_LENGTH}
+        />
+      </Svg>
+    );
+  },
+);
+
+interface StaticCheckProps {
+  size: number;
+  color: string;
+}
+
+/**
+ * Static fallback rendered when react-native-svg is unavailable (e.g. a web
+ * bundle that omits the optional peer). Draws a plain Unicode check so the
+ * component still communicates "done"; `play()` is a no-op.
+ */
+const StaticCheck = forwardRef<AnimatedCheckRef, StaticCheckProps>(
+  function StaticCheck({ size, color }, ref) {
+    useImperativeHandle(ref, () => ({ play: () => undefined }), []);
+    return (
+      <Text
+        accessibilityElementsHidden
+        style={[styles.staticCheck, { width: size, fontSize: size * 0.8, lineHeight: size, color }]}
+      >
+        {'✓'}
+      </Text>
+    );
+  },
+);
+
+/**
+ * A draw-on checkmark: a ring strokes on, then the check strokes in. Expose a
+ * ref and call `ref.current?.play()` to (re)play — e.g. on a successful submit.
+ * Ported from Bluesky's `AnimatedCheck`.
+ */
+export const AnimatedCheck = forwardRef<AnimatedCheckRef, AnimatedCheckProps>(
+  function AnimatedCheck({ size = 24, color }, ref) {
+    const theme = useTheme();
+    const resolvedColor = color ?? theme.colors.success;
+    const svg = useMemo(() => getSvgModule(), []);
+
+    if (!svg) {
+      return <StaticCheck ref={ref} size={size} color={resolvedColor} />;
+    }
+    return <AnimatedCheckSvg ref={ref} size={size} color={resolvedColor} svg={svg} />;
+  },
+);
+
+AnimatedCheck.displayName = 'AnimatedCheck';
+
+const styles = StyleSheet.create({
+  staticCheck: {
+    textAlign: 'center',
+    fontWeight: '700',
+  },
+});

package/src/animated-check/index.ts

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

package/src/avatar/Avatar.stories.tsx

@@ -19,6 +19,7 @@ const meta: Meta<typeof Avatar> = {
     verified: { control: 'boolean' },
     live: { control: 'boolean' },
     hideLiveBadge: { control: 'boolean' },
+    ring: { control: 'object' },
   },
 };
 
@@ -29,6 +30,13 @@ type Story = StoryObj<typeof Avatar>;
 const SAMPLE_URI =
   'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200&h=200&fit=crop';
 
+// Sample Instagram-stories-style gradient, defined locally in the story only —
+// Bloom ships no such palette (it stays brand-neutral). Consumers supply their
+// own ring colors via the `ring` prop.
+const STORY_GRADIENT = ['#F58529', '#DD2A7B', '#8134AF', '#515BD4'];
+// Muted gray used by IG for an already-seen story.
+const SEEN_GRAY = '#C7C7CC';
+
 export const Basic: Story = {
   args: { size: 64, name: 'Nate Isern' },
 };
@@ -118,3 +126,90 @@ export const LiveGallery: Story = {
   ),
   name: 'Live (gallery)',
 };
+
+export const GradientRing: Story = {
+  args: {
+    size: 72,
+    uri: SAMPLE_URI,
+    ring: { colors: STORY_GRADIENT, width: 3, gap: 3 },
+  },
+  name: 'Gradient ring (stories)',
+};
+
+export const SeenVsUnseen: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 20, alignItems: 'center' }}>
+      {/* Unseen → gradient ring. */}
+      <Avatar
+        size={72}
+        uri={SAMPLE_URI}
+        ring={{ colors: STORY_GRADIENT, width: 3, gap: 3 }}
+      />
+      {/* Seen → muted solid gray ring. */}
+      <Avatar
+        size={72}
+        uri={SAMPLE_URI}
+        ring={{ colors: SEEN_GRAY, width: 3, gap: 3 }}
+      />
+    </View>
+  ),
+  name: 'Seen vs unseen',
+};
+
+export const RingWithGap: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 24, alignItems: 'center' }}>
+      {/* gap 0 → overlays the edge, footprint unchanged. */}
+      <Avatar size={72} uri={SAMPLE_URI} ring={{ colors: STORY_GRADIENT, width: 3, gap: 0 }} />
+      {/* gap 4 → sits outside the avatar, footprint grows. */}
+      <Avatar size={72} uri={SAMPLE_URI} ring={{ colors: STORY_GRADIENT, width: 3, gap: 4 }} />
+      {/* gap 8 → wider clearance. */}
+      <Avatar size={72} uri={SAMPLE_URI} ring={{ colors: STORY_GRADIENT, width: 4, gap: 8 }} />
+    </View>
+  ),
+  name: 'Ring with gap',
+};
+
+export const RingSquircle: Story = {
+  args: {
+    size: 72,
+    uri: SAMPLE_URI,
+    shape: 'squircle',
+    ring: { colors: STORY_GRADIENT, width: 3, gap: 3 },
+  },
+  name: 'Gradient ring (squircle)',
+};
+
+export const SolidRing: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 20, alignItems: 'center' }}>
+      <Avatar size={72} uri={SAMPLE_URI} ring={{ colors: '#1A73E8', width: 3 }} />
+      <Avatar size={72} uri={SAMPLE_URI} shape="squircle" ring={{ colors: '#1A73E8', width: 3 }} />
+      <Avatar size={72} uri={SAMPLE_URI} ring={{ colors: '#1A73E8', width: 3, gap: 4 }} />
+    </View>
+  ),
+  name: 'Solid ring',
+};
+
+export const GradientDirections: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 20, alignItems: 'center' }}>
+      <Avatar
+        size={72}
+        uri={SAMPLE_URI}
+        ring={{ colors: STORY_GRADIENT, width: 3, gap: 3, gradientDirection: 'diagonal' }}
+      />
+      <Avatar
+        size={72}
+        uri={SAMPLE_URI}
+        ring={{ colors: STORY_GRADIENT, width: 3, gap: 3, gradientDirection: 'horizontal' }}
+      />
+      <Avatar
+        size={72}
+        uri={SAMPLE_URI}
+        ring={{ colors: STORY_GRADIENT, width: 3, gap: 3, gradientDirection: 'vertical' }}
+      />
+    </View>
+  ),
+  name: 'Gradient directions',
+};