@oxyhq/bloom 0.27.0 → 0.29.0

package/src/motion/Motion.stories.tsx

@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import Animated from 'react-native-reanimated';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { ScaleAndFadeIn, ScaleAndFadeOut, ScreenTransition, ShrinkAndPop } from './index';
+
+const meta: Meta = {
+  title: 'Motion/Presets',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+function Toggle({ children }: { children: React.ReactNode }) {
+  const [shown, setShown] = useState(true);
+  return (
+    <View style={{ gap: 16, alignItems: 'flex-start' }}>
+      <Pressable
+        accessibilityLabel="Toggle"
+        onPress={() => setShown((v) => !v)}
+        style={{
+          paddingVertical: 8,
+          paddingHorizontal: 16,
+          borderRadius: 8,
+          backgroundColor: '#111827',
+        }}
+      >
+        <Text style={{ color: 'white', fontWeight: '600' }}>{shown ? 'Hide' : 'Show'}</Text>
+      </Pressable>
+      <View style={{ height: 96, justifyContent: 'center' }}>{shown ? children : null}</View>
+    </View>
+  );
+}
+
+const card = {
+  width: 160,
+  height: 72,
+  borderRadius: 16,
+  backgroundColor: '#6366f1',
+  alignItems: 'center',
+  justifyContent: 'center',
+} as const;
+
+export const ScaleAndFade: Story = {
+  render: () => (
+    <Toggle>
+      <Animated.View entering={ScaleAndFadeIn} exiting={ScaleAndFadeOut} style={card}>
+        <Text style={{ color: 'white', fontWeight: '700' }}>Scale + Fade</Text>
+      </Animated.View>
+    </Toggle>
+  ),
+};
+
+export const Pop: Story = {
+  render: () => (
+    <Toggle>
+      <Animated.View entering={ScaleAndFadeIn} exiting={ShrinkAndPop} style={card}>
+        <Text style={{ color: 'white', fontWeight: '700' }}>Shrink + Pop</Text>
+      </Animated.View>
+    </Toggle>
+  ),
+};
+
+export const Transition: Story = {
+  render: () => {
+    function Demo() {
+      const [forward, setForward] = useState(true);
+      return (
+        <View style={{ gap: 16, alignItems: 'flex-start' }}>
+          <Pressable
+            accessibilityLabel="Swap direction"
+            onPress={() => setForward((v) => !v)}
+            style={{
+              paddingVertical: 8,
+              paddingHorizontal: 16,
+              borderRadius: 8,
+              backgroundColor: '#111827',
+            }}
+          >
+            <Text style={{ color: 'white', fontWeight: '600' }}>
+              Direction: {forward ? 'forward' : 'backward'}
+            </Text>
+          </Pressable>
+          <ScreenTransition
+            key={forward ? 'forward' : 'backward'}
+            direction={forward ? 'forward' : 'backward'}
+            enabledWeb
+            style={card}
+          >
+            <Text style={{ color: 'white', fontWeight: '700' }}>Screen</Text>
+          </ScreenTransition>
+        </View>
+      );
+    }
+    return <Demo />;
+  },
+};

package/src/motion/ScreenTransition.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Platform, type StyleProp, type ViewStyle } from 'react-native';
+import Animated, {
+  Easing,
+  FadeIn,
+  FadeOut,
+  SlideInLeft,
+  SlideInRight,
+} from 'react-native-reanimated';
+
+/** Direction the incoming screen travels. */
+export type ScreenTransitionDirection = 'forward' | 'backward';
+
+export interface ScreenTransitionProps {
+  /**
+   * `'forward'` slides the new screen in from the right, `'backward'` from the
+   * left — matching a push / pop navigation gesture.
+   */
+  direction: ScreenTransitionDirection;
+  /**
+   * Enable the transition on web. Off by default: Reanimated layout animations
+   * are fragile across web bundlers, so web opts in explicitly and gets a
+   * lightweight cross-fade rather than a slide.
+   */
+  enabledWeb?: boolean;
+  style?: StyleProp<ViewStyle>;
+  children?: React.ReactNode;
+}
+
+/** CSS-smooth deceleration for the native slide. */
+const SLIDE_EASING = Easing.out(Easing.exp);
+/** Web cross-fade duration (ms) — "totally vibes based", per the Bluesky original. */
+const WEB_FADE_DURATION = 90;
+
+/**
+ * Wraps `children` in a Reanimated layout-animated view that slides in
+ * directionally on native and (optionally) cross-fades on web. Ported from
+ * Bluesky's `ScreenTransition`.
+ *
+ * On web the slide is intentionally dropped: layout animations there are
+ * unreliable, so `enabledWeb` gates a simple fade and the default is no
+ * transition at all.
+ */
+export function ScreenTransition({
+  direction,
+  enabledWeb,
+  style,
+  children,
+}: ScreenTransitionProps) {
+  const isWeb = Platform.OS === 'web';
+
+  const entering = isWeb
+    ? enabledWeb
+      ? FadeIn.duration(WEB_FADE_DURATION)
+      : undefined
+    : (direction === 'forward' ? SlideInRight : SlideInLeft).easing(SLIDE_EASING);
+
+  const exiting = isWeb
+    ? enabledWeb
+      ? FadeOut.duration(WEB_FADE_DURATION)
+      : undefined
+    : FadeOut.duration(WEB_FADE_DURATION);
+
+  return (
+    <Animated.View entering={entering} exiting={exiting} style={style}>
+      {children}
+    </Animated.View>
+  );
+}
+
+ScreenTransition.displayName = 'ScreenTransition';

package/src/motion/index.ts

@@ -0,0 +1,3 @@
+export { ScaleAndFadeIn, ScaleAndFadeOut, ShrinkAndPop } from './motion';
+export { ScreenTransition } from './ScreenTransition';
+export type { ScreenTransitionProps, ScreenTransitionDirection } from './ScreenTransition';

package/src/motion/motion.ts

@@ -0,0 +1,75 @@
+import {
+  withDelay,
+  withSequence,
+  withTiming,
+  type LayoutAnimation,
+} from 'react-native-reanimated';
+
+/**
+ * Reanimated custom layout-animation presets. Each is a worklet builder
+ * compatible with an `Animated.View`'s `entering` / `exiting` prop:
+ *
+ * ```tsx
+ * <Animated.View entering={ScaleAndFadeIn} exiting={ScaleAndFadeOut} />
+ * ```
+ *
+ * Ported from Bluesky's custom-animation set. The `'worklet'` directive is
+ * preserved through Bloom's build; the consuming app's Metro + reanimated Babel
+ * plugin transforms it so the animation runs on the UI thread (same path the
+ * existing `bottom-sheet` gesture worklets rely on).
+ */
+
+/** Entering: fade in while growing from 70% to full size. */
+export const ScaleAndFadeIn: () => LayoutAnimation = () => {
+  'worklet';
+  return {
+    animations: {
+      opacity: withTiming(1),
+      transform: [{ scale: withTiming(1) }],
+    },
+    initialValues: {
+      opacity: 0,
+      transform: [{ scale: 0.7 }],
+    },
+  };
+};
+
+/** Exiting counterpart to {@link ScaleAndFadeIn}: fade out while shrinking to 70%. */
+export const ScaleAndFadeOut: () => LayoutAnimation = () => {
+  'worklet';
+  return {
+    animations: {
+      opacity: withTiming(0),
+      transform: [{ scale: withTiming(0.7) }],
+    },
+    initialValues: {
+      opacity: 1,
+      transform: [{ scale: 1 }],
+    },
+  };
+};
+
+/**
+ * Exiting with a brief "pop": the scale dips to 70%, overshoots to 110%, and the
+ * element fades out. Good for confirming a tapped or removed item.
+ */
+export const ShrinkAndPop: () => LayoutAnimation = () => {
+  'worklet';
+  return {
+    animations: {
+      opacity: withDelay(125, withTiming(0, { duration: 125 })),
+      transform: [
+        {
+          scale: withSequence(
+            withTiming(0.7, { duration: 75 }),
+            withTiming(1.1, { duration: 150 }),
+          ),
+        },
+      ],
+    },
+    initialValues: {
+      opacity: 1,
+      transform: [{ scale: 1 }],
+    },
+  };
+};

package/src/pressable-scale/PressableScale.stories.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { PressableScale } from './index';
+
+const meta: Meta<typeof PressableScale> = {
+  title: 'Components/PressableScale',
+  component: PressableScale,
+  argTypes: {
+    targetScale: { control: { type: 'number', min: 0.8, max: 1, step: 0.01 } },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof PressableScale>;
+
+export const Basic: Story = {
+  render: (args) => (
+    <PressableScale
+      {...args}
+      accessibilityLabel="Press me"
+      style={{
+        paddingVertical: 12,
+        paddingHorizontal: 20,
+        borderRadius: 12,
+        backgroundColor: '#111827',
+      }}
+    >
+      <Text style={{ color: '#fff', fontWeight: '600' }}>Press me</Text>
+    </PressableScale>
+  ),
+};
+
+export const StrongScale: Story = {
+  args: { targetScale: 0.9 },
+  render: (args) => (
+    <PressableScale
+      {...args}
+      accessibilityLabel="Press me harder"
+      style={{
+        paddingVertical: 12,
+        paddingHorizontal: 20,
+        borderRadius: 12,
+        backgroundColor: '#4f46e5',
+      }}
+    >
+      <Text style={{ color: '#fff', fontWeight: '600' }}>Strong scale (0.9)</Text>
+    </PressableScale>
+  ),
+};
+
+/**
+ * NativeWind layout classes apply to the SAME node that scales — the whole row
+ * (avatar + label) springs as one. In a NativeWind consumer you pass `className`
+ * directly; the spread-cast here just satisfies Bloom's own typecheck (which has
+ * no NativeWind ambient types).
+ */
+export const InlineRow: Story = {
+  render: (args) => (
+    <PressableScale
+      {...args}
+      accessibilityLabel="Open profile"
+      {...({
+        className: 'flex-row items-center gap-3 px-4 py-3 rounded-xl bg-muted',
+      } as Record<string, string>)}
+    >
+      <View style={{ width: 32, height: 32, borderRadius: 16, backgroundColor: '#4f46e5' }} />
+      <Text style={{ fontWeight: '600' }}>Row that scales as one node</Text>
+    </PressableScale>
+  ),
+};
+
+export const Card: Story = {
+  render: (args) => (
+    <PressableScale {...args} accessibilityLabel="Open card">
+      <View
+        style={{
+          width: 220,
+          padding: 16,
+          borderRadius: 16,
+          backgroundColor: '#f3f4f6',
+          gap: 6,
+        }}
+      >
+        <Text style={{ fontWeight: '700' }}>Tappable card</Text>
+        <Text style={{ color: '#6b7280' }}>The whole card springs on press.</Text>
+      </View>
+    </PressableScale>
+  ),
+};

package/src/pressable-scale/PressableScale.tsx

@@ -0,0 +1,93 @@
+import React, { forwardRef } from 'react';
+import {
+  Platform,
+  Pressable,
+  type PressableProps,
+  type StyleProp,
+  type View,
+  type ViewStyle,
+} from 'react-native';
+import Animated, {
+  cancelAnimation,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+/** Press-in / press-out timing, in ms. */
+const DURATION = 100;
+
+/**
+ * True on touch-capable web browsers (coarse pointer). The press-scale
+ * affordance only makes sense where a finger obscures the element — with a
+ * mouse it reads as jitter — so it is disabled on non-touch web, matching the
+ * native / web-touch behaviour.
+ */
+const IS_WEB_TOUCH_DEVICE =
+  Platform.OS === 'web' &&
+  typeof window !== 'undefined' &&
+  typeof window.matchMedia === 'function' &&
+  window.matchMedia('(pointer: coarse)').matches;
+
+const SCALE_SUPPORTED = Platform.OS !== 'web' || IS_WEB_TOUCH_DEVICE;
+
+/**
+ * A single animated `Pressable`, built once at module scope so the animated
+ * node identity is stable across renders.
+ */
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export interface PressableScaleProps extends Omit<PressableProps, 'style'> {
+  /** Scale applied while pressed. Defaults to `0.98`. */
+  targetScale?: number;
+  /** Style applied to the pressable itself — the node that scales. */
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * A drop-in {@link Pressable} that springs to a smaller scale on press-in and
+ * back on release. The scale is applied to the pressable node itself, so a
+ * consumer's `className` / layout styles (e.g. `flex-row items-center`) land on
+ * the same node that animates.
+ *
+ * The touch target scales with the content — acceptable at the default ~0.98
+ * (the earlier two-node touch-target-preservation was dropped for simplicity).
+ * Honours the OS "reduce motion" setting and disables the effect on non-touch
+ * web pointers.
+ */
+export const PressableScale = forwardRef<View, PressableScaleProps>(
+  function PressableScale({ targetScale = 0.98, style, onPressIn, onPressOut, ...rest }, ref) {
+    const reducedMotion = useReducedMotion();
+    const animate = SCALE_SUPPORTED && !reducedMotion;
+
+    const scale = useSharedValue(1);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+      transform: [{ scale: scale.value }],
+    }));
+
+    return (
+      <AnimatedPressable
+        ref={ref}
+        accessibilityRole="button"
+        onPressIn={(e) => {
+          onPressIn?.(e);
+          if (!animate) return;
+          cancelAnimation(scale);
+          scale.value = withTiming(targetScale, { duration: DURATION });
+        }}
+        onPressOut={(e) => {
+          onPressOut?.(e);
+          if (!animate) return;
+          cancelAnimation(scale);
+          scale.value = withTiming(1, { duration: DURATION });
+        }}
+        style={[animate ? animatedStyle : null, style]}
+        {...rest}
+      />
+    );
+  },
+);
+
+PressableScale.displayName = 'PressableScale';

package/src/pressable-scale/index.ts

@@ -0,0 +1,2 @@
+export { PressableScale } from './PressableScale';
+export type { PressableScaleProps } from './PressableScale';

package/src/pressable-with-hover/PressableWithHover.stories.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Text } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { PressableWithHover } from './index';
+
+const meta: Meta<typeof PressableWithHover> = {
+  title: 'Components/PressableWithHover',
+  component: PressableWithHover,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof PressableWithHover>;
+
+export const Basic: Story = {
+  render: () => (
+    <PressableWithHover
+      accessibilityLabel="Hover me"
+      style={{
+        paddingVertical: 12,
+        paddingHorizontal: 20,
+        borderRadius: 12,
+        backgroundColor: '#f3f4f6',
+      }}
+      hoverStyle={{ backgroundColor: '#e5e7eb' }}
+    >
+      <Text style={{ fontWeight: '600' }}>Hover me (web)</Text>
+    </PressableWithHover>
+  ),
+};
+
+export const ListRow: Story = {
+  render: () => (
+    <PressableWithHover
+      accessibilityLabel="Settings row"
+      style={{ paddingVertical: 14, paddingHorizontal: 16, borderRadius: 8, width: 260 }}
+      hoverStyle={{ backgroundColor: '#f3f4f6' }}
+    >
+      <Text>Account settings</Text>
+    </PressableWithHover>
+  ),
+};

package/src/pressable-with-hover/PressableWithHover.tsx

@@ -0,0 +1,43 @@
+import React, { forwardRef } from 'react';
+import {
+  Pressable,
+  type PressableProps,
+  type StyleProp,
+  type View,
+  type ViewStyle,
+} from 'react-native';
+
+import { useInteractionState } from '../hooks/useInteractionState';
+
+export interface PressableWithHoverProps extends Omit<PressableProps, 'style'> {
+  /** Base style; `hoverStyle` is merged on top while the pointer is over it. */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Style merged over `style` while hovered. Web-only: react-native-web fires
+   * `onHoverIn`/`onHoverOut`, so on touch platforms this is simply never applied.
+   */
+  hoverStyle: StyleProp<ViewStyle>;
+}
+
+/**
+ * A {@link Pressable} that merges `hoverStyle` on top of `style` while hovered.
+ * Hover is a web-only affordance (native platforms have no pointer hover), so
+ * this behaves like a plain `Pressable` on touch devices.
+ */
+export const PressableWithHover = forwardRef<View, PressableWithHoverProps>(
+  function PressableWithHover({ style, hoverStyle, ...props }, ref) {
+    const { state: hovered, onIn: onHoverIn, onOut: onHoverOut } = useInteractionState();
+
+    return (
+      <Pressable
+        {...props}
+        ref={ref}
+        onHoverIn={onHoverIn}
+        onHoverOut={onHoverOut}
+        style={hovered ? [style, hoverStyle] : style}
+      />
+    );
+  },
+);
+
+PressableWithHover.displayName = 'PressableWithHover';

package/src/pressable-with-hover/index.ts

@@ -0,0 +1,2 @@
+export { PressableWithHover } from './PressableWithHover';
+export type { PressableWithHoverProps } from './PressableWithHover';

package/src/styles/breakpoints.ts

@@ -0,0 +1,18 @@
+/**
+ * Bloom's responsive breakpoint min-widths (px), matching the Tailwind /
+ * NativeWind defaults used across the design system.
+ *
+ * This is the SINGLE SOURCE OF TRUTH for breakpoint values. Anything that
+ * branches on viewport width — the `<Dialog>` responsive `placement` resolver,
+ * the `useGutters` hook — reads from here rather than hardcoding its own
+ * numbers, so a change here propagates everywhere.
+ */
+export const BREAKPOINTS = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+} as const;
+
+/** A named responsive breakpoint tier. */
+export type Breakpoint = keyof typeof BREAKPOINTS;

package/src/styles/index.ts

@@ -1,6 +1,8 @@
 export { atoms, flatten } from './atoms';
 export type { ViewStyleProp, TextStyleProp } from './atoms';
 export * as tokens from './tokens';
+export { BREAKPOINTS } from './breakpoints';
+export type { Breakpoint } from './breakpoints';
 export { Z_INDEX, zIndex } from './z-index';
 export { web, native, ios, android, platform, select } from './platform';
 export { SUPPORTS_NATIVE_DRIVER } from './native-driver';

package/src/subtle-hover/SubtleHover.stories.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Pressable, Text, View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { useInteractionState } from '../hooks/useInteractionState';
+import { SubtleHover } from './index';
+
+const meta: Meta<typeof SubtleHover> = {
+  title: 'Components/SubtleHover',
+  component: SubtleHover,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SubtleHover>;
+
+/**
+ * Pure-CSS `group-hover`: the parent carries `className="group"` and the wash
+ * fades in on hover with ZERO React state (web only).
+ */
+function HoverRow({ label }: { label: string }) {
+  return (
+    <Pressable
+      {...({ className: 'group' } as Record<string, string>)}
+      accessibilityLabel={label}
+      style={{
+        width: 280,
+        paddingVertical: 14,
+        paddingHorizontal: 16,
+        borderRadius: 12,
+        overflow: 'hidden',
+      }}
+    >
+      <SubtleHover style={{ borderRadius: 12 }} />
+      <Text style={{ fontWeight: '600' }}>{label}</Text>
+    </Pressable>
+  );
+}
+
+export const GroupHover: Story = {
+  render: () => <HoverRow label="Hover me (web, group-hover)" />,
+};
+
+export const Stack: Story = {
+  render: () => (
+    <View style={{ gap: 4 }}>
+      <HoverRow label="Inbox" />
+      <HoverRow label="Sent" />
+      <HoverRow label="Drafts" />
+    </View>
+  ),
+};
+
+/**
+ * JS `active` mode: hovering anywhere in the thread lights EVERY row together
+ * (a coordinated highlight a per-element `group-hover` can't express). `native`
+ * is opted in so the same wash shows on native surfaces too.
+ */
+export const CoordinatedThread: Story = {
+  render: () => {
+    function Thread() {
+      const { state: hovered, onIn, onOut } = useInteractionState();
+      return (
+        <Pressable onHoverIn={onIn} onHoverOut={onOut} style={{ gap: 4 }}>
+          {['First reply', 'Second reply', 'Third reply'].map((label) => (
+            <View
+              key={label}
+              style={{
+                width: 280,
+                paddingVertical: 14,
+                paddingHorizontal: 16,
+                borderRadius: 12,
+                overflow: 'hidden',
+              }}
+            >
+              <SubtleHover active={hovered} native style={{ borderRadius: 12 }} />
+              <Text style={{ fontWeight: '600' }}>{label}</Text>
+            </View>
+          ))}
+        </Pressable>
+      );
+    }
+    return <Thread />;
+  },
+};