@oxyhq/bloom 0.26.1 → 0.28.0

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

@@ -0,0 +1,71 @@
+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"
+      contentContainerStyle={{
+        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"
+      contentContainerStyle={{
+        paddingVertical: 12,
+        paddingHorizontal: 20,
+        borderRadius: 12,
+        backgroundColor: '#4f46e5',
+      }}
+    >
+      <Text style={{ color: '#fff', fontWeight: '600' }}>Strong scale (0.9)</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,103 @@
+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;
+
+export interface PressableScaleProps
+  extends Omit<PressableProps, 'children' | 'style'> {
+  /** Scale applied while pressed. Defaults to `0.98`. */
+  targetScale?: number;
+  /** Style for the outer, full-size touch target (stays put while pressing). */
+  style?: StyleProp<ViewStyle>;
+  /** Style for the inner content wrapper that actually scales. */
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  children?: React.ReactNode;
+}
+
+/**
+ * A drop-in {@link Pressable} whose content springs to a smaller scale on
+ * press-in and back on release. The outer pressable stays full size (so the
+ * touch target never shrinks) while an inner wrapper scales.
+ *
+ * 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,
+      contentContainerStyle,
+      children,
+      onPressIn,
+      onPressOut,
+      ...rest
+    },
+    ref,
+  ) {
+    const reducedMotion = useReducedMotion();
+    const animate = SCALE_SUPPORTED && !reducedMotion;
+
+    const scale = useSharedValue(1);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+      transform: [{ scale: scale.value }],
+    }));
+
+    return (
+      <Pressable
+        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={style}
+        {...rest}
+      >
+        <Animated.View style={[animate ? animatedStyle : null, contentContainerStyle]}>
+          {children}
+        </Animated.View>
+      </Pressable>
+    );
+  },
+);
+
+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,72 @@
+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>;
+
+/** A row that washes its background as the pointer enters (web). */
+function HoverRow({ label, native }: { label: string; native?: boolean }) {
+  const { state: hovered, onIn, onOut } = useInteractionState();
+
+  return (
+    <Pressable
+      accessibilityLabel={label}
+      onHoverIn={onIn}
+      onHoverOut={onOut}
+      style={{
+        width: 280,
+        paddingVertical: 14,
+        paddingHorizontal: 16,
+        borderRadius: 12,
+        overflow: 'hidden',
+      }}
+    >
+      <SubtleHover hover={hovered} native={native} style={{ borderRadius: 12 }} />
+      <Text style={{ fontWeight: '600' }}>{label}</Text>
+    </Pressable>
+  );
+}
+
+export const ListRow: Story = {
+  render: () => <HoverRow label="Hover me (web)" />,
+};
+
+export const StrongerWash: Story = {
+  render: () => {
+    function Row() {
+      const { state: hovered, onIn, onOut } = useInteractionState();
+      return (
+        <Pressable
+          accessibilityLabel="Stronger wash"
+          onHoverIn={onIn}
+          onHoverOut={onOut}
+          style={{ width: 280, padding: 16, borderRadius: 12, overflow: 'hidden' }}
+        >
+          <SubtleHover hover={hovered} opacity={0.85} style={{ borderRadius: 12 }} />
+          <Text style={{ fontWeight: '600' }}>Higher opacity override</Text>
+        </Pressable>
+      );
+    }
+    return <Row />;
+  },
+};
+
+export const Stack: Story = {
+  render: () => (
+    <View style={{ gap: 4 }}>
+      <HoverRow label="Inbox" />
+      <HoverRow label="Sent" />
+      <HoverRow label="Drafts" />
+    </View>
+  ),
+};

package/src/subtle-hover/SubtleHover.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { Platform, StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../theme';
+
+/**
+ * True on touch-capable web browsers (coarse pointer). A hover wash only makes
+ * sense with a hovering pointer, so it is suppressed on touch web to match
+ * native (which has no hover at all).
+ */
+const IS_WEB_TOUCH_DEVICE =
+  Platform.OS === 'web' &&
+  typeof window !== 'undefined' &&
+  typeof window.matchMedia === 'function' &&
+  window.matchMedia('(pointer: coarse)').matches;
+
+/**
+ * Web-only style that (a) cross-fades the overlay opacity and (b) promotes it to
+ * its own GPU layer so Safari doesn't nudge the layout by a subpixel when the
+ * overlay composites on hover. Cast because RN's `ViewStyle` has no `willChange`
+ * / `transition*` keys; react-native-web forwards them to the DOM node.
+ */
+const WEB_TRANSITION = {
+  transitionProperty: 'opacity',
+  transitionDuration: '0.1s',
+  transitionTimingFunction: 'ease',
+  willChange: 'opacity',
+} as ViewStyle;
+
+export interface SubtleHoverProps {
+  /** Whether the parent is currently hovered. Drives the overlay opacity. */
+  hover: boolean;
+  /**
+   * Overlay opacity when hovered. Defaults to a mode-tuned value (0.4 dark /
+   * 0.5 light) that reads as a gentle contrast wash.
+   */
+  opacity?: number;
+  /** Extra style merged last — e.g. `borderRadius` to match the parent. */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Opt in to rendering on native. Off by default: hover is a pointer
+   * affordance, so this is a web-only overlay unless a native surface wants the
+   * same wash driven by another interaction (e.g. press).
+   */
+  native?: boolean;
+}
+
+/**
+ * An absolutely-positioned, non-interactive contrast wash that fades in while
+ * its parent is hovered. Ported from Bluesky's `SubtleHover`. Pairs naturally
+ * with {@link useInteractionState} — pass its `state` as `hover`.
+ *
+ * Renders nothing on touch-web (no hovering pointer) and on native unless
+ * `native` is set. Color comes from the theme's `contrast50` token so the wash
+ * tracks the active preset and light/dark mode.
+ */
+export function SubtleHover({ hover, opacity, style, native = false }: SubtleHoverProps) {
+  const theme = useTheme();
+
+  const isWeb = Platform.OS === 'web';
+  if (isWeb ? IS_WEB_TOUCH_DEVICE : !native) {
+    return null;
+  }
+
+  const targetOpacity = opacity ?? (theme.isDark ? 0.4 : 0.5);
+
+  return (
+    <View
+      style={[
+        styles.overlay,
+        { backgroundColor: theme.colors.contrast50, opacity: hover ? targetOpacity : 0 },
+        isWeb ? WEB_TRANSITION : null,
+        style,
+      ]}
+    />
+  );
+}
+
+SubtleHover.displayName = 'SubtleHover';
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    pointerEvents: 'none',
+  },
+});

package/src/subtle-hover/index.ts

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

package/src/theme/build-theme.ts

@@ -2,6 +2,7 @@ import { Platform } from 'react-native';
 import { APP_COLOR_PRESETS, type AppColorName } from './color-presets';
 import { getAdaptiveColors } from './adaptive-colors';
 import { getResolvedTokens, hslToSrgb } from './token-registry';
+import { THEME_GRADIENTS } from './gradients';
 import type { Theme, ThemeColors } from './types';
 
 /**
@@ -119,6 +120,7 @@ export function buildTheme(
   return {
     mode: resolved,
     colors,
+    gradients: THEME_GRADIENTS,
     isDark: resolved === 'dark',
     isLight: resolved === 'light',
   };

package/src/theme/gradients.ts

@@ -0,0 +1,61 @@
+import type { ThemeGradients } from './types';
+
+/**
+ * Brand-neutral named linear-gradient palettes shared across the design system —
+ * decorative avatar rings, hero surfaces, empty-state art, and similar accents.
+ *
+ * Each entry lists ordered `[offset, color]` stops where `offset` is a `0–1`
+ * position along the gradient axis. These are intentionally theme-agnostic (the
+ * same values are exposed in light and dark mode) and not tied to any single
+ * app's brand, so components can reference them by a stable, descriptive name.
+ */
+export const THEME_GRADIENTS: ThemeGradients = {
+  sky: {
+    values: [
+      [0, '#0A7AFF'],
+      [1, '#59B9FF'],
+    ],
+  },
+  midnight: {
+    values: [
+      [0, '#022C5E'],
+      [1, '#4079BC'],
+    ],
+  },
+  sunrise: {
+    values: [
+      [0, '#4E90AE'],
+      [0.4, '#AEA3AB'],
+      [0.8, '#E6A98F'],
+      [1, '#F3A84C'],
+    ],
+  },
+  sunset: {
+    values: [
+      [0, '#6772AF'],
+      [0.6, '#B88BB6'],
+      [1, '#FFA6AC'],
+    ],
+  },
+  summer: {
+    values: [
+      [0, '#FF6A56'],
+      [0.3, '#FF9156'],
+      [1, '#FFDD87'],
+    ],
+  },
+  nordic: {
+    values: [
+      [0, '#083367'],
+      [1, '#9EE8C1'],
+    ],
+  },
+  bonfire: {
+    values: [
+      [0, '#203E4E'],
+      [0.4, '#755B62'],
+      [0.8, '#CD7765'],
+      [1, '#EF956E'],
+    ],
+  },
+};

package/src/theme/index.ts

@@ -6,10 +6,11 @@ export type {
 export { BloomColorScope, useColorScopeStyle } from './color-scope';
 export type { BloomColorScopeProps } from './color-scope';
 export { buildTheme, STATUS_COLORS } from './build-theme';
+export { THEME_GRADIENTS } from './gradients';
 export { useTheme, useThemeColor, useBloomTheme } from './use-theme';
 export { useNavigationTheme } from './use-navigation-theme';
 export type { NavigationTheme, NavigationThemeFont } from './use-navigation-theme';
-export type { Theme, ThemeColors, ThemeMode } from './types';
+export type { Theme, ThemeColors, ThemeMode, ThemeGradient, ThemeGradients } from './types';
 export type { AppColorName, AppColorPreset, PresetTokens } from './color-presets';
 export {
   APP_COLOR_NAMES,

package/src/theme/types.ts

@@ -44,9 +44,22 @@ export interface ThemeColors {
   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;
 }