@oxyhq/bloom 0.19.0 → 0.20.0

package/src/benefit-list/index.tsx

@@ -0,0 +1,133 @@
+import React, { memo } from 'react';
+import {
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { atoms as a } from '../styles';
+import { bloomShadowStyle } from '../design-tokens/shadows';
+import { TYPOGRAPHY, RADIUS, SPACING, BORDER_WIDTH } from '../design-tokens/scales';
+import { Text } from '../typography';
+import type { BenefitRowProps, BenefitListProps } from './types';
+
+/** Side of the rounded `fill-secondary` icon square. */
+const ICON_SQUARE_SIZE = 36;
+
+/**
+ * `BenefitRow` — an icon in a rounded `fill-secondary` square paired with a
+ * `text-secondary` caption (the `caption` type role). The building block of
+ * {@link BenefitList} (the "icon + caption row" of the consent reference), but
+ * usable standalone.
+ *
+ * Token roles → runtime theme colors:
+ *   - icon square bg → `fill-secondary` (`--muted`) → `theme.colors.backgroundTertiary`
+ *   - caption color  → `text-secondary` (`--muted-foreground`) → `theme.colors.textSecondary`
+ *   - caption type   → `caption` role (size 11 / line-height 14)
+ */
+const BenefitRowComponent: React.FC<BenefitRowProps> = ({
+  icon,
+  label,
+  children,
+  accessibilityLabel,
+  className,
+  style,
+  textStyle,
+}) => {
+  const theme = useTheme();
+  const content = children ?? label;
+  const a11y =
+    accessibilityLabel ?? (typeof content === 'string' ? content : undefined);
+
+  const rowStyle: StyleProp<ViewStyle> = [
+    a.flex_row,
+    a.align_center,
+    { gap: SPACING['space-12'] },
+    style,
+  ];
+
+  const squareStyle: ViewStyle = {
+    width: ICON_SQUARE_SIZE,
+    height: ICON_SQUARE_SIZE,
+    borderRadius: RADIUS['radius-12'],
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: theme.colors.backgroundTertiary,
+  };
+
+  const captionStyle: StyleProp<TextStyle> = [
+    {
+      fontSize: TYPOGRAPHY.caption.size,
+      lineHeight: TYPOGRAPHY.caption.lineHeight,
+      fontWeight: TYPOGRAPHY.caption.weight,
+      color: theme.colors.textSecondary,
+    },
+    a.flex_1,
+    textStyle,
+  ];
+
+  return (
+    <View
+      {...(className ? ({ className } as Record<string, string>) : {})}
+      style={rowStyle}
+      accessibilityLabel={a11y}
+      {...(a11y ? { accessibilityRole: 'text' as const } : {})}>
+      <View style={squareStyle} accessibilityElementsHidden aria-hidden>
+        {icon}
+      </View>
+      <Text style={captionStyle}>{content}</Text>
+    </View>
+  );
+};
+
+export const BenefitRow = memo(BenefitRowComponent);
+BenefitRow.displayName = 'BenefitRow';
+
+/**
+ * `BenefitList` — a bordered card that stacks {@link BenefitRow}s with consistent
+ * spacing. The "3 icon + caption rows in a card" from the consent reference.
+ *
+ * Token roles → runtime values:
+ *   - card bg     → `fill` role (`--card`) → `theme.colors.card`
+ *   - hairline    → `border-image` role (`--border`) → `theme.colors.border` at
+ *                   the `border-hairline` (0.5px) width
+ *   - radius      → `radius-20`
+ *   - elevation   → `shadow-s` (platform-correct via `bloomShadowStyle`)
+ */
+const BenefitListComponent: React.FC<BenefitListProps> = ({
+  children,
+  accessibilityLabel,
+  className,
+  style,
+}) => {
+  const theme = useTheme();
+
+  const cardStyle: StyleProp<ViewStyle> = [
+    {
+      backgroundColor: theme.colors.card,
+      borderRadius: RADIUS['radius-20'],
+      borderWidth: BORDER_WIDTH.hairline,
+      borderColor: theme.colors.border,
+      padding: SPACING['space-16'],
+      gap: SPACING['space-16'],
+    },
+    bloomShadowStyle('s'),
+    style,
+  ];
+
+  return (
+    <View
+      {...(className ? ({ className } as Record<string, string>) : {})}
+      style={cardStyle}
+      accessibilityLabel={accessibilityLabel}>
+      {children}
+    </View>
+  );
+};
+
+export const BenefitList = memo(BenefitListComponent);
+BenefitList.displayName = 'BenefitList';
+
+export type { BenefitRowProps, BenefitListProps } from './types';

package/src/benefit-list/types.ts

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+
+export interface BenefitRowProps {
+  /**
+   * Leading icon — rendered inside a rounded `fill-secondary` square. Pass a
+   * Bloom icon element (e.g. `<Icons.Lock size="sm" />`) or any node.
+   */
+  icon: ReactNode;
+  /**
+   * Caption text. Provide either `label` or `children` (string or nodes).
+   * Rendered as `text-secondary` at the `caption` type role.
+   */
+  label?: string;
+  /** Caption content as children (alternative to `label`). */
+  children?: ReactNode;
+  /** Accessibility label for the row (defaults to the text content). */
+  accessibilityLabel?: string;
+  /** NativeWind className passthrough on the row container. */
+  className?: string;
+  /** Style passthrough on the row container. */
+  style?: StyleProp<ViewStyle>;
+  /** Style passthrough on the caption text. */
+  textStyle?: StyleProp<TextStyle>;
+}
+
+export interface BenefitListProps {
+  /** `BenefitRow`s (or any nodes) stacked with consistent spacing. */
+  children: ReactNode;
+  /** Accessibility label for the card. */
+  accessibilityLabel?: string;
+  /** NativeWind className passthrough on the card container. */
+  className?: string;
+  /** Style passthrough on the card container. */
+  style?: StyleProp<ViewStyle>;
+}

package/src/button/Button.web.tsx

@@ -89,7 +89,7 @@ const BLOOM_BUTTON_CSS = `
   margin: 0;
   border: none;
   background: transparent;
-  font-family: inherit;
+  font-family: var(--bloom-font-sans, inherit);
   text-decoration: none;
   cursor: pointer;
   user-select: none;

package/src/connection-dots/ConnectionDots.stories.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { ConnectionDots } from './index';
+import { IconCircle } from '../icon-circle';
+import { Person_Stroke2_Corner0_Rounded as PersonIcon } from '../icons/Person';
+import { Lock_Stroke2_Corner0_Rounded as LockIcon } from '../icons/Lock';
+
+const meta: Meta<typeof ConnectionDots> = {
+  title: 'Components/ConnectionDots',
+  component: ConnectionDots,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ConnectionDots>;
+
+export const Basic: Story = {
+  render: () => (
+    <View style={{ padding: 24 }}>
+      <ConnectionDots
+        left={<IconCircle icon={PersonIcon} size="lg" />}
+        right={<IconCircle icon={LockIcon} size="lg" />}
+        accessibilityLabel="Connecting your account"
+      />
+    </View>
+  ),
+};
+
+export const ManyDots: Story = {
+  render: () => (
+    <View style={{ padding: 24 }}>
+      <ConnectionDots
+        left={<IconCircle icon={PersonIcon} size="lg" />}
+        right={<IconCircle icon={LockIcon} size="lg" />}
+        dotCount={10}
+        dotSize={5}
+      />
+    </View>
+  ),
+};
+
+export const ReducedMotion: Story = {
+  render: () => (
+    <View style={{ padding: 24 }}>
+      <ConnectionDots
+        left={<IconCircle icon={PersonIcon} size="lg" />}
+        right={<IconCircle icon={LockIcon} size="lg" />}
+        reducedMotion
+      />
+    </View>
+  ),
+};

package/src/connection-dots/ConnectionDots.tsx

@@ -0,0 +1,139 @@
+import React, { memo, useEffect } from 'react';
+import Animated, {
+  Easing,
+  interpolate,
+  type SharedValue,
+  useAnimatedStyle,
+  useDerivedValue,
+  useReducedMotion,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { useTheme } from '../theme/use-theme';
+import { ConnectionDotsBase } from './ConnectionDotsBase';
+import type { ConnectionDotsProps } from './types';
+
+const DEFAULT_DOT_COUNT = 6;
+const DEFAULT_DOT_SIZE = 6;
+const WAVE_DURATION = 1400;
+/** Opacity floor of a dot at the trough of the wave. */
+const DOT_DIM = 0.25;
+
+interface ShimmerDotProps {
+  /** 0..1 phase offset of this dot within the wave. */
+  phase: number;
+  color: string;
+  size: number;
+  /** Shared 0..1 driver advanced once per loop for the whole row. */
+  driver: SharedValue<number>;
+}
+
+/**
+ * One dot. Its opacity is the shared driver phase-shifted by `phase`, mapped
+ * through a triangle wave so the bright crest sweeps left→right across the row
+ * (the "ellipsis shimmer").
+ */
+const ShimmerDot: React.FC<ShimmerDotProps> = ({ phase, color, size, driver }) => {
+  const opacity = useDerivedValue(() => {
+    // wrap into 0..1 then fold into a 0→1→0 triangle so the crest is a moving band
+    const t = (driver.value + phase) % 1;
+    const wave = 1 - Math.abs(t * 2 - 1);
+    return interpolate(wave, [0, 1], [DOT_DIM, 1]);
+  });
+
+  const animatedStyle = useAnimatedStyle(() => ({ opacity: opacity.value }));
+
+  return (
+    <Animated.View
+      style={[
+        {
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          backgroundColor: color,
+        },
+        animatedStyle,
+      ]}
+    />
+  );
+};
+
+/**
+ * Native `ConnectionDots` — a consent/linking header rendering
+ * `left · (animated ellipsis dots) · right`. The dots run a looping opacity wave
+ * in the brand color (`fill-brand` → `theme.colors.primary`). Reduced-motion
+ * (Reanimated's `useReducedMotion`, or the `reducedMotion` prop) renders the
+ * dots static at full opacity.
+ */
+const ConnectionDotsComponent: React.FC<ConnectionDotsProps> = ({
+  left,
+  right,
+  dotCount = DEFAULT_DOT_COUNT,
+  dotSize = DEFAULT_DOT_SIZE,
+  accessibilityLabel,
+  className,
+  style,
+  reducedMotion,
+}) => {
+  const theme = useTheme();
+  const systemReduceMotion = useReducedMotion();
+  const reduce = reducedMotion ?? systemReduceMotion;
+  const color = theme.colors.primary;
+
+  const driver = useSharedValue(0);
+
+  useEffect(() => {
+    if (reduce) {
+      driver.value = 0;
+      return;
+    }
+    driver.value = withRepeat(
+      withTiming(1, { duration: WAVE_DURATION, easing: Easing.linear }),
+      -1,
+      false,
+    );
+    // driver is a stable shared-value ref; withRepeat/withTiming/Easing are
+    // module-level constants from a static import.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [reduce]);
+
+  const count = Math.max(1, Math.floor(dotCount));
+
+  const dots = reduce
+    ? Array.from({ length: count }, (_, i) => (
+        <Animated.View
+          key={i}
+          style={{
+            width: dotSize,
+            height: dotSize,
+            borderRadius: dotSize / 2,
+            backgroundColor: color,
+          }}
+        />
+      ))
+    : Array.from({ length: count }, (_, i) => (
+        <ShimmerDot
+          key={i}
+          phase={i / count}
+          color={color}
+          size={dotSize}
+          driver={driver}
+        />
+      ));
+
+  return (
+    <ConnectionDotsBase
+      left={left}
+      right={right}
+      dots={dots}
+      accessibilityLabel={accessibilityLabel}
+      className={className}
+      style={style}
+    />
+  );
+};
+
+export const ConnectionDots = memo(ConnectionDotsComponent);
+ConnectionDots.displayName = 'ConnectionDots';

package/src/connection-dots/ConnectionDots.web.tsx

@@ -0,0 +1,122 @@
+import React, { memo, useEffect, useState } from 'react';
+import { View, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { ConnectionDotsBase } from './ConnectionDotsBase';
+import type { ConnectionDotsProps } from './types';
+
+const DEFAULT_DOT_COUNT = 6;
+const DEFAULT_DOT_SIZE = 6;
+const WAVE_DURATION_MS = 1400;
+
+const KEYFRAMES_ID = 'bloom-connection-dots-keyframes';
+const WAVE_ANIMATION_NAME = 'bloomConnectionDotsWave';
+
+/**
+ * CSS keyframes powering the ellipsis shimmer. Mirrors the native Reanimated
+ * triangle wave: each dot's opacity rises to 1 and falls back to a dim floor,
+ * with a per-dot `animation-delay` sweeping the bright crest left→right.
+ *
+ * A `prefers-reduced-motion: reduce` media query pins every dot to full opacity,
+ * matching the native `useReducedMotion` branch — defence-in-depth alongside the
+ * JS `matchMedia` gate below (which also stops emitting the `animation` prop).
+ */
+export const BLOOM_CONNECTION_DOTS_CSS = `
+@keyframes ${WAVE_ANIMATION_NAME} { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
+@media (prefers-reduced-motion: reduce) {
+  [data-bloom-connection-dot] { animation: none !important; opacity: 1 !important; }
+}
+`;
+
+function useKeyframes(): void {
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    if (document.getElementById(KEYFRAMES_ID)) return;
+    const style = document.createElement('style');
+    style.id = KEYFRAMES_ID;
+    style.textContent = BLOOM_CONNECTION_DOTS_CSS;
+    document.head.appendChild(style);
+  }, []);
+}
+
+/** Read the OS `prefers-reduced-motion` preference reactively. */
+function usePrefersReducedMotion(): boolean {
+  const [reduced, setReduced] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return;
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
+    setReduced(mq.matches);
+    const onChange = (e: MediaQueryListEvent) => setReduced(e.matches);
+    mq.addEventListener('change', onChange);
+    return () => mq.removeEventListener('change', onChange);
+  }, []);
+
+  return reduced;
+}
+
+/**
+ * Web fork of `./ConnectionDots`. The native variant runs the opacity wave with
+ * `react-native-reanimated`, which cannot ship to a web bundle. This fork drives
+ * the same motion with a CSS `@keyframes` animation (injected once into
+ * `<head>`) and a per-dot `animation-delay`. Brand color comes from the
+ * `fill-brand` role (`theme.colors.primary`). Reduced-motion (the `reducedMotion`
+ * prop, the JS `matchMedia` gate, or the CSS media query) renders static dots.
+ */
+const ConnectionDotsComponent: React.FC<ConnectionDotsProps> = ({
+  left,
+  right,
+  dotCount = DEFAULT_DOT_COUNT,
+  dotSize = DEFAULT_DOT_SIZE,
+  accessibilityLabel,
+  className,
+  style,
+  reducedMotion,
+}) => {
+  const theme = useTheme();
+  useKeyframes();
+  const systemReduceMotion = usePrefersReducedMotion();
+  const reduce = reducedMotion ?? systemReduceMotion;
+  const color = theme.colors.primary;
+
+  const count = Math.max(1, Math.floor(dotCount));
+
+  const dots = Array.from({ length: count }, (_, i) => {
+    const base: ViewStyle = {
+      width: dotSize,
+      height: dotSize,
+      borderRadius: dotSize / 2,
+      backgroundColor: color,
+    };
+    const animated: ViewStyle = reduce
+      ? { opacity: 1 }
+      : ({
+          // `animation` / `animationDelay` are real CSS props on web;
+          // react-native-web passes them through to the DOM node.
+          animation: `${WAVE_ANIMATION_NAME} ${WAVE_DURATION_MS}ms linear infinite`,
+          animationDelay: `${(i / count) * WAVE_DURATION_MS}ms`,
+        } as ViewStyle);
+    return (
+      <View
+        key={i}
+        // marker attribute lets the reduced-motion media query target dots
+        {...({ 'data-bloom-connection-dot': '' } as Record<string, string>)}
+        style={[base, animated]}
+      />
+    );
+  });
+
+  return (
+    <ConnectionDotsBase
+      left={left}
+      right={right}
+      dots={dots}
+      accessibilityLabel={accessibilityLabel}
+      className={className}
+      style={style}
+    />
+  );
+};
+
+export const ConnectionDots = memo(ConnectionDotsComponent);
+ConnectionDots.displayName = 'ConnectionDots';

package/src/connection-dots/ConnectionDotsBase.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { atoms as a, tokens } from '../styles';
+import type { ConnectionDotsProps } from './types';
+
+export interface ConnectionDotsBaseProps
+  extends Pick<
+    ConnectionDotsProps,
+    'left' | 'right' | 'accessibilityLabel' | 'className' | 'style'
+  > {
+  /** The platform-specific animated dots row (built by the native/web fork). */
+  dots: React.ReactNode;
+}
+
+/**
+ * Shared layout + accessibility chrome for {@link ConnectionDots}:
+ *
+ *   leftSlot · (animated ellipsis dots) · rightSlot
+ *
+ * The dots themselves are supplied by the platform fork (`ConnectionDots.tsx`
+ * native / `ConnectionDots.web.tsx` web) because the shimmer animation impl
+ * differs (Reanimated vs CSS). This base owns the row layout, the slot wrappers,
+ * and the single accessibility label that stands in for the decorative dots.
+ */
+export function ConnectionDotsBase({
+  left,
+  right,
+  dots,
+  accessibilityLabel = 'Connecting',
+  className,
+  style,
+}: ConnectionDotsBaseProps) {
+  const rowStyle: StyleProp<ViewStyle> = [
+    a.flex_row,
+    a.align_center,
+    a.justify_center,
+    { gap: tokens.space.md },
+    style,
+  ];
+
+  return (
+    <View
+      {...(className ? ({ className } as Record<string, string>) : {})}
+      style={rowStyle}>
+      <View style={[a.align_center, a.justify_center]}>{left}</View>
+
+      {/* The dots are decorative; the whole cluster carries ONE a11y label
+          (e.g. "Connecting") so screen readers announce the link relationship
+          without reading each dot. The left/right slots keep their own a11y. */}
+      <View
+        accessibilityRole="image"
+        accessibilityLabel={accessibilityLabel}
+        aria-label={accessibilityLabel}
+        style={[a.flex_row, a.align_center, { gap: tokens.space.xs }]}>
+        {dots}
+      </View>
+
+      <View style={[a.align_center, a.justify_center]}>{right}</View>
+    </View>
+  );
+}

package/src/connection-dots/index.ts

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

package/src/connection-dots/index.web.ts

@@ -0,0 +1,2 @@
+export { ConnectionDots } from './ConnectionDots.web';
+export type { ConnectionDotsProps } from './types';

package/src/connection-dots/types.ts

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface ConnectionDotsProps {
+  /**
+   * Left-hand content — typically a logo or avatar of the first party in a
+   * link/consent flow. Rendered as-is.
+   */
+  left: ReactNode;
+  /**
+   * Right-hand content — typically a logo or avatar of the second party.
+   * Rendered as-is.
+   */
+  right: ReactNode;
+  /**
+   * Number of ellipsis dots animating between the two slots.
+   * @default 6
+   */
+  dotCount?: number;
+  /**
+   * Diameter of each dot in px.
+   * @default 6
+   */
+  dotSize?: number;
+  /**
+   * Accessibility label for the whole connection band. Read by screen readers in
+   * place of the (decorative) dots.
+   * @default 'Connecting'
+   */
+  accessibilityLabel?: string;
+  /** NativeWind className passthrough on the outer row. */
+  className?: string;
+  /** Style passthrough on the outer row. */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Force-disable the shimmer regardless of the OS reduced-motion setting.
+   * (When omitted, the component reads the platform reduced-motion preference
+   * and renders the dots statically when it is on.)
+   */
+  reducedMotion?: boolean;
+}