@oxyhq/bloom 0.19.1 → 0.21.0

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

package/src/content-panel/index.tsx

@@ -0,0 +1,87 @@
+/**
+ * Native variant of `ContentPanel` — the framed app-content surface.
+ *
+ * `ContentPanel` is the rounded, bordered panel that holds an app's routed
+ * content. On WEB it adds two sticky overlays (a gutter "bleed-mask" box-shadow
+ * ring and a continuous rounded border frame) so feed content that bleeds into
+ * the rounded corners / lateral gutters is masked while a single seamless border
+ * is drawn around the panel — see `index.web.tsx`.
+ *
+ * On NATIVE none of that applies: there is no document scroll, no sticky
+ * positioning, and no bleed to mask, so the panel is simply a rounded, bordered
+ * surface wrapping its content. The `framed` and `showStickyFrame` props are
+ * accepted for cross-platform API parity but are intentionally no-ops here
+ * (mirroring the no-op native fork of `../scroll`).
+ *
+ * Web bundlers select `./index.web` via the `"browser"` export condition in
+ * `package.json`; native bundlers fall through to this file.
+ *
+ * Styling is NativeWind-className-first; the literal class strings below must
+ * stay literal so a consumer's Tailwind content-scan over `lib/**` (and the
+ * native `src/**`) picks them up.
+ */
+import React, { memo } from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+
+/**
+ * Width (in px) of the WEB sticky gutter-mask box-shadow ring. Exported for
+ * cross-platform API parity (it has no effect on native).
+ */
+export const GUTTER_MASK_SPREAD = 40;
+/** Top sticky inset (px) of the framed panel chrome. */
+export const PANEL_TOP_INSET = 8;
+/** Bottom sticky inset (px) of the framed panel chrome. */
+export const PANEL_BOTTOM_INSET = 8;
+
+export interface ContentPanelProps {
+  children: React.ReactNode;
+  /**
+   * Whether the panel is framed (wide screens) or full-bleed (narrow screens).
+   * No-op on native — the surface is always a rounded, bordered View.
+   */
+  framed: boolean;
+  /** Override the surface background utility (defaults to `bg-card`). */
+  surfaceClassName?: string;
+  surfaceStyle?: StyleProp<ViewStyle>;
+  /** Extra utilities for the inner content wrapper. */
+  contentClassName?: string;
+  contentStyle?: StyleProp<ViewStyle>;
+  /**
+   * Whether to render the WEB sticky border frame. No-op on native (the border
+   * is always part of the surface).
+   */
+  showStickyFrame?: boolean;
+}
+
+const ContentPanelComponent: React.FC<ContentPanelProps> = ({
+  children,
+  surfaceClassName,
+  surfaceStyle,
+  contentClassName,
+  contentStyle,
+}) => {
+  const surfaceClass = [
+    'flex-1',
+    'rounded-radius-28',
+    'overflow-hidden border border-border',
+    surfaceClassName ?? 'bg-card',
+  ].join(' ');
+  const contentClass = ['flex-1', contentClassName].filter(Boolean).join(' ');
+
+  return (
+    <View
+      {...({ className: surfaceClass } as Record<string, string>)}
+      style={surfaceStyle}
+    >
+      <View
+        {...({ className: contentClass } as Record<string, string>)}
+        style={contentStyle}
+      >
+        {children}
+      </View>
+    </View>
+  );
+};
+
+export const ContentPanel = memo(ContentPanelComponent);
+ContentPanel.displayName = 'ContentPanel';

package/src/content-panel/index.web.tsx

@@ -0,0 +1,134 @@
+/**
+ * Web variant of `ContentPanel` — the framed app-content surface.
+ *
+ * On the web, app content scrolls the DOCUMENT, and a multi-column shell keeps
+ * the routed content in a rounded, bordered center panel. Two problems follow
+ * from letting feed content bleed to the rounded panel edge, both solved here
+ * with sticky, full-viewport-height overlays inside the panel surface:
+ *
+ *  1. BLEED-MASK overlay (`z-30`): a `box-shadow` ring in the GUTTER color
+ *     (Bloom `background` token) drawn OVER content that bleeds into the thin
+ *     lateral gutter / rounded corners. `clip-path: inset(-12px)` keeps that
+ *     ring off the side columns. It sits below opaque chrome (headers/banners),
+ *     so it only masks the content's bleed, never the chrome. No border.
+ *     (`clip-path` MUST be the arbitrary class — RN-web drops it from `style`.)
+ *
+ *  2. BORDER-FRAME overlay (`z-[120]`): a single 1px rounded `border-border`
+ *     outline with a transparent interior, ABOVE all content. Being one element
+ *     above everything, it draws ONE continuous rounded border around all four
+ *     sides — no seams, no double lines, no per-chrome borders.
+ *
+ * Both overlays are `position: sticky; top: 8px` with a negative
+ * `margin-bottom` so they occupy zero layout height (they overlay the scrolled
+ * content rather than displacing it). They render BEFORE the content wrapper so
+ * z-index — not DOM order — decides layering.
+ *
+ * When `framed` is false (narrow screens) the panel is full-bleed: a single
+ * flat surface, no rounding, no overlays.
+ *
+ * Native bundlers use `./index.tsx` (a plain rounded surface); web bundlers
+ * select this file via the `"browser"` export condition in `package.json`.
+ *
+ * Styling is NativeWind-className-first; the literal class strings below MUST
+ * stay literal so a consumer's Tailwind content-scan over `lib/**` picks them up
+ * (no dynamic concatenation of the arbitrary `web:[…]` / `rounded-radius-28`
+ * parts).
+ */
+import React, { memo } from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+
+/** Width (in px) of the sticky gutter-mask box-shadow ring. */
+export const GUTTER_MASK_SPREAD = 40;
+/** Top sticky inset (px) the framed panel chrome pins to. */
+export const PANEL_TOP_INSET = 8;
+/** Bottom sticky inset (px) of the framed panel chrome. */
+export const PANEL_BOTTOM_INSET = 8;
+
+export interface ContentPanelProps {
+  children: React.ReactNode;
+  /** Framed (wide screens) vs full-bleed (narrow screens). */
+  framed: boolean;
+  /** Override the surface background utility (defaults to `bg-card`). */
+  surfaceClassName?: string;
+  surfaceStyle?: StyleProp<ViewStyle>;
+  /** Extra utilities for the inner content wrapper. */
+  contentClassName?: string;
+  contentStyle?: StyleProp<ViewStyle>;
+  /** Render the sticky border frame (defaults to true when framed). */
+  showStickyFrame?: boolean;
+}
+
+const ContentPanelComponent: React.FC<ContentPanelProps> = ({
+  children,
+  framed,
+  surfaceClassName,
+  surfaceStyle,
+  contentClassName,
+  contentStyle,
+  showStickyFrame,
+}) => {
+  const { colors } = useTheme();
+
+  if (!framed) {
+    // Full-bleed: a single flat surface. No rounding, no sticky overlays.
+    const fullBleedClass = [
+      'flex-1',
+      surfaceClassName ?? 'bg-card',
+      contentClassName,
+    ]
+      .filter(Boolean)
+      .join(' ');
+    return (
+      <View
+        {...({ className: fullBleedClass } as Record<string, string>)}
+        style={[surfaceStyle, contentStyle]}
+      >
+        {children}
+      </View>
+    );
+  }
+
+  const surfaceClass = ['flex-1', 'rounded-radius-28', surfaceClassName ?? 'bg-card'].join(' ');
+  const contentClass = ['flex-1', 'rounded-radius-28 web:overflow-x-clip', contentClassName]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <View
+      {...({ className: surfaceClass } as Record<string, string>)}
+      style={surfaceStyle}
+    >
+      {/* (1) Bleed-mask overlay — gutter box-shadow ring, below chrome. */}
+      <View
+        pointerEvents="none"
+        {...({
+          className:
+            'web:sticky web:top-2 z-30 h-[calc(100dvh-16px)] w-full rounded-radius-28 web:[margin-bottom:calc(-100dvh+16px)] web:[clip-path:inset(-12px)]',
+        } as Record<string, string>)}
+        style={{ boxShadow: `0 0 0 ${GUTTER_MASK_SPREAD}px ${colors.background}` }}
+      />
+      {/* (2) Border-frame overlay — one continuous rounded border, above all. */}
+      {showStickyFrame !== false && (
+        <View
+          pointerEvents="none"
+          {...({
+            className:
+              'web:sticky web:top-2 z-[120] h-[calc(100dvh-16px)] w-full rounded-radius-28 border border-border web:[margin-bottom:calc(-100dvh+16px)]',
+          } as Record<string, string>)}
+        />
+      )}
+      {/* Content wrapper — clipped to the rounded panel shape on web. */}
+      <View
+        {...({ className: contentClass } as Record<string, string>)}
+        style={contentStyle}
+      >
+        {children}
+      </View>
+    </View>
+  );
+};
+
+export const ContentPanel = memo(ContentPanelComponent);
+ContentPanel.displayName = 'ContentPanel';