@oxyhq/bloom 0.27.0 → 0.28.0

package/lib/typescript/module/theme/types.d.ts

@@ -34,9 +34,20 @@ export interface ThemeColors {
     shadow: string;
     overlay: string;
 }
+/**
+ * A single named gradient: an ordered list of `[offset, color]` stops where
+ * `offset` runs 0–1 along the gradient axis and `color` is any RN/CSS color.
+ */
+export interface ThemeGradient {
+    values: Array<[number, string]>;
+}
+/** Map of named gradients exposed on the theme (`theme.gradients`). */
+export type ThemeGradients = Record<string, ThemeGradient>;
 export interface Theme {
     mode: 'light' | 'dark';
     colors: ThemeColors;
+    /** Brand-neutral named linear-gradient palettes. Theme-agnostic (same in light/dark). */
+    gradients: ThemeGradients;
     isDark: boolean;
     isLight: boolean;
 }

package/lib/typescript/module/theme/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/theme/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEjE,MAAM,WAAW,WAAW;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,kBAAkB,EAAE,MAAM,CAAC;IAE3B,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IAErB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IAEpB,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,6EAA6E;IAC7E,YAAY,EAAE,MAAM,CAAC;IACrB,8EAA8E;IAC9E,WAAW,EAAE,MAAM,CAAC;IAEpB,iFAAiF;IACjF,SAAS,EAAE,MAAM,CAAC;IAElB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IAEnB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IAEb,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,EAAE,MAAM,CAAC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,wBAAwB,EAAE,MAAM,CAAC;IACjC,UAAU,EAAE,MAAM,CAAC;IAEnB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;CAClB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/theme/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEjE,MAAM,WAAW,WAAW;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,kBAAkB,EAAE,MAAM,CAAC;IAE3B,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IAErB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IAEpB,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,6EAA6E;IAC7E,YAAY,EAAE,MAAM,CAAC;IACrB,8EAA8E;IAC9E,WAAW,EAAE,MAAM,CAAC;IAEpB,iFAAiF;IACjF,SAAS,EAAE,MAAM,CAAC;IAElB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IAEnB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IAEb,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,EAAE,MAAM,CAAC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,wBAAwB,EAAE,MAAM,CAAC;IACjC,UAAU,EAAE,MAAM,CAAC;IAEnB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;CACjC;AAED,uEAAuE;AACvE,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAE3D,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,MAAM,EAAE,WAAW,CAAC;IACpB,yFAAyF;IACzF,SAAS,EAAE,cAAc,CAAC;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;CAClB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -371,6 +371,72 @@
         "default": "./lib/commonjs/fill/index.js"
       }
     },
+    "./media-inset-border": {
+      "react-native": "./src/media-inset-border/index.ts",
+      "import": {
+        "types": "./lib/typescript/module/media-inset-border/index.d.ts",
+        "default": "./lib/module/media-inset-border/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/media-inset-border/index.d.ts",
+        "default": "./lib/commonjs/media-inset-border/index.js"
+      }
+    },
+    "./pressable-scale": {
+      "react-native": "./src/pressable-scale/index.ts",
+      "import": {
+        "types": "./lib/typescript/module/pressable-scale/index.d.ts",
+        "default": "./lib/module/pressable-scale/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/pressable-scale/index.d.ts",
+        "default": "./lib/commonjs/pressable-scale/index.js"
+      }
+    },
+    "./pressable-with-hover": {
+      "react-native": "./src/pressable-with-hover/index.ts",
+      "import": {
+        "types": "./lib/typescript/module/pressable-with-hover/index.d.ts",
+        "default": "./lib/module/pressable-with-hover/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/pressable-with-hover/index.d.ts",
+        "default": "./lib/commonjs/pressable-with-hover/index.js"
+      }
+    },
+    "./subtle-hover": {
+      "react-native": "./src/subtle-hover/index.ts",
+      "import": {
+        "types": "./lib/typescript/module/subtle-hover/index.d.ts",
+        "default": "./lib/module/subtle-hover/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/subtle-hover/index.d.ts",
+        "default": "./lib/commonjs/subtle-hover/index.js"
+      }
+    },
+    "./motion": {
+      "react-native": "./src/motion/index.ts",
+      "import": {
+        "types": "./lib/typescript/module/motion/index.d.ts",
+        "default": "./lib/module/motion/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/motion/index.d.ts",
+        "default": "./lib/commonjs/motion/index.js"
+      }
+    },
+    "./animated-check": {
+      "react-native": "./src/animated-check/index.ts",
+      "import": {
+        "types": "./lib/typescript/module/animated-check/index.d.ts",
+        "default": "./lib/module/animated-check/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/animated-check/index.d.ts",
+        "default": "./lib/commonjs/animated-check/index.js"
+      }
+    },
     "./icon-circle": {
       "react-native": "./src/icon-circle/index.tsx",
       "import": {
@@ -927,6 +993,7 @@
     "@types/react-native": "*",
     "@vitejs/plugin-react": "^6.0.2",
     "expo-font": "^56.0.5",
+    "expo-haptics": "~56.0.3",
     "expo-router": "^56.0.0",
     "jest": "^30.3.0",
     "jest-environment-jsdom": "^30.4.1",
@@ -951,6 +1018,7 @@
   "peerDependencies": {
     "expo": "*",
     "expo-font": "*",
+    "expo-haptics": "*",
     "expo-router": ">=3.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
@@ -969,6 +1037,9 @@
     "expo-font": {
       "optional": true
     },
+    "expo-haptics": {
+      "optional": true
+    },
     "expo-router": {
       "optional": true
     },

package/src/__tests__/AnimatedCheck.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { act, render } from '@testing-library/react-native';
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import { AnimatedCheck, type AnimatedCheckRef } from '../animated-check';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(
+    <BloomThemeProvider mode="light" colorPreset="teal">
+      {ui}
+    </BloomThemeProvider>,
+  );
+}
+
+describe('AnimatedCheck', () => {
+  it('carries a displayName', () => {
+    expect(AnimatedCheck.displayName).toBe('AnimatedCheck');
+  });
+
+  it('renders the animated SVG when react-native-svg is available', () => {
+    const { toJSON } = renderWithTheme(<AnimatedCheck size={48} />);
+    expect(toJSON()).not.toBeNull();
+  });
+
+  it('exposes an imperative play() that runs without throwing', () => {
+    const ref = React.createRef<AnimatedCheckRef>();
+    renderWithTheme(<AnimatedCheck ref={ref} size={48} color="#6366f1" />);
+    expect(ref.current).not.toBeNull();
+    expect(() => act(() => ref.current?.play())).not.toThrow();
+  });
+});

package/src/__tests__/MediaInsetBorder.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import { MediaInsetBorder } from '../media-inset-border';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(
+    <BloomThemeProvider mode="light" colorPreset="teal">
+      {ui}
+    </BloomThemeProvider>,
+  );
+}
+
+describe('MediaInsetBorder', () => {
+  it('carries a displayName', () => {
+    expect(MediaInsetBorder.displayName).toBe('MediaInsetBorder');
+  });
+
+  it('renders the softened border by default', () => {
+    const { UNSAFE_root } = renderWithTheme(<MediaInsetBorder />);
+    expect(UNSAFE_root).toBeTruthy();
+  });
+
+  it('renders the opaque variant', () => {
+    const { UNSAFE_root } = renderWithTheme(<MediaInsetBorder opaque />);
+    expect(UNSAFE_root).toBeTruthy();
+  });
+
+  it('accepts a style override for borderRadius', () => {
+    const { UNSAFE_root } = renderWithTheme(
+      <MediaInsetBorder style={{ borderRadius: 999 }} />,
+    );
+    expect(UNSAFE_root).toBeTruthy();
+  });
+});

package/src/__tests__/Motion.test.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { render } from '@testing-library/react-native';
+
+import {
+  ScaleAndFadeIn,
+  ScaleAndFadeOut,
+  ScreenTransition,
+  ShrinkAndPop,
+} from '../motion';
+
+// The reanimated mock resolves `withTiming(v)` -> v, `withDelay(d, v)` -> v and
+// `withSequence(...v)` -> last, so the builder output is deterministic.
+
+describe('motion presets', () => {
+  it('ScaleAndFadeIn enters from 70% scale and transparent', () => {
+    const { initialValues, animations } = ScaleAndFadeIn();
+    expect(initialValues).toEqual({ opacity: 0, transform: [{ scale: 0.7 }] });
+    expect(animations).toEqual({ opacity: 1, transform: [{ scale: 1 }] });
+  });
+
+  it('ScaleAndFadeOut exits to 70% scale and transparent', () => {
+    const { initialValues, animations } = ScaleAndFadeOut();
+    expect(initialValues).toEqual({ opacity: 1, transform: [{ scale: 1 }] });
+    expect(animations).toEqual({ opacity: 0, transform: [{ scale: 0.7 }] });
+  });
+
+  it('ShrinkAndPop overshoots to 110% before leaving', () => {
+    const { initialValues, animations } = ShrinkAndPop();
+    expect(initialValues).toEqual({ opacity: 1, transform: [{ scale: 1 }] });
+    // withSequence resolves to its final keyframe (the 1.1 overshoot) in the mock.
+    expect(animations.transform).toEqual([{ scale: 1.1 }]);
+  });
+});
+
+describe('ScreenTransition', () => {
+  it('carries a displayName', () => {
+    expect(ScreenTransition.displayName).toBe('ScreenTransition');
+  });
+
+  it('renders its children for a forward transition', () => {
+    const { getByText } = render(
+      <ScreenTransition direction="forward">
+        <Text>Screen body</Text>
+      </ScreenTransition>,
+    );
+    expect(getByText('Screen body')).toBeTruthy();
+  });
+
+  it('renders its children for a backward transition', () => {
+    const { getByText } = render(
+      <ScreenTransition direction="backward" enabledWeb>
+        <Text>Back</Text>
+      </ScreenTransition>,
+    );
+    expect(getByText('Back')).toBeTruthy();
+  });
+});

package/src/__tests__/PressableScale.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { render } from '@testing-library/react-native';
+
+import { PressableScale } from '../pressable-scale';
+
+describe('PressableScale', () => {
+  it('carries a displayName', () => {
+    expect(PressableScale.displayName).toBe('PressableScale');
+  });
+
+  it('renders its children', () => {
+    const { getByText } = render(
+      <PressableScale accessibilityLabel="Press me">
+        <Text>Tap target</Text>
+      </PressableScale>,
+    );
+    expect(getByText('Tap target')).toBeTruthy();
+  });
+
+  it('renders with a custom target scale', () => {
+    const { getByText } = render(
+      <PressableScale targetScale={0.9} accessibilityLabel="Press me">
+        <Text>Scaled</Text>
+      </PressableScale>,
+    );
+    expect(getByText('Scaled')).toBeTruthy();
+  });
+});

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 />;
+  },
+};