@oxyhq/bloom 0.19.1 → 0.21.0

package/src/__tests__/BenefitList.test.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import { render } from '@testing-library/react-native';
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import { BenefitList, BenefitRow } from '../benefit-list';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(
+    <BloomThemeProvider mode="light" colorPreset="teal">
+      {ui}
+    </BloomThemeProvider>,
+  );
+}
+
+describe('BenefitRow', () => {
+  it('renders the label as caption text', () => {
+    const { getByText } = renderWithTheme(
+      <BenefitRow icon={<View />} label="Your data stays private" />,
+    );
+    expect(getByText('Your data stays private')).toBeTruthy();
+  });
+
+  it('renders children when provided instead of label', () => {
+    const { getByText, queryByText } = renderWithTheme(
+      <BenefitRow icon={<View />} label="ignored">
+        Encrypted end to end
+      </BenefitRow>,
+    );
+    expect(getByText('Encrypted end to end')).toBeTruthy();
+    expect(queryByText('ignored')).toBeNull();
+  });
+
+  it('renders the (decorative, a11y-hidden) icon slot', () => {
+    const { getByText } = renderWithTheme(
+      <BenefitRow icon={<Text>ICON</Text>} label="Row" />,
+    );
+    // The icon square is aria-hidden (the caption carries the meaning), so the
+    // icon node is only reachable with hidden elements included.
+    expect(getByText('ICON', { includeHiddenElements: true })).toBeTruthy();
+  });
+
+  it('derives an accessibility label from string content', () => {
+    const { getByLabelText } = renderWithTheme(
+      <BenefitRow icon={<View />} label="Revoke anytime" />,
+    );
+    const node = getByLabelText('Revoke anytime');
+    expect(node.props.accessibilityRole).toBe('text');
+  });
+
+  it('uses an explicit accessibilityLabel over the text content', () => {
+    const { getByLabelText } = renderWithTheme(
+      <BenefitRow
+        icon={<View />}
+        label="Revoke anytime"
+        accessibilityLabel="Custom label"
+      />,
+    );
+    expect(getByLabelText('Custom label')).toBeTruthy();
+  });
+});
+
+describe('BenefitList', () => {
+  it('renders stacked rows', () => {
+    const { getByText } = renderWithTheme(
+      <BenefitList accessibilityLabel="Benefits">
+        <BenefitRow icon={<View />} label="First benefit" />
+        <BenefitRow icon={<View />} label="Second benefit" />
+        <BenefitRow icon={<View />} label="Third benefit" />
+      </BenefitList>,
+    );
+    expect(getByText('First benefit')).toBeTruthy();
+    expect(getByText('Second benefit')).toBeTruthy();
+    expect(getByText('Third benefit')).toBeTruthy();
+  });
+
+  it('applies the card accessibility label', () => {
+    const { getByLabelText } = renderWithTheme(
+      <BenefitList accessibilityLabel="What you're sharing">
+        <BenefitRow icon={<View />} label="Profile photo" />
+      </BenefitList>,
+    );
+    expect(getByLabelText("What you're sharing")).toBeTruthy();
+  });
+
+  it('renders a bordered, rounded card surface using the token roles', () => {
+    const { getByLabelText } = renderWithTheme(
+      <BenefitList accessibilityLabel="card">
+        <BenefitRow icon={<View />} label="Row" />
+      </BenefitList>,
+    );
+    const card = getByLabelText('card');
+    // The card style is a nested style array; flatten it fully to assert the
+    // radius-20 / border-hairline (0.5px) / border-image token values landed.
+    const flat: Record<string, unknown> = {};
+    const visit = (s: unknown): void => {
+      if (Array.isArray(s)) {
+        s.forEach(visit);
+      } else if (s && typeof s === 'object') {
+        Object.assign(flat, s);
+      }
+    };
+    visit(card.props.style);
+    expect(flat.borderRadius).toBe(20);
+    expect(flat.borderWidth).toBe(0.5);
+    expect(flat.borderColor).toBeTruthy();
+  });
+});

package/src/__tests__/ConnectionDots.test.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import { render } from '@testing-library/react-native';
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import { ConnectionDots } from '../connection-dots';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(
+    <BloomThemeProvider mode="light" colorPreset="teal">
+      {ui}
+    </BloomThemeProvider>,
+  );
+}
+
+/**
+ * Count animated dot nodes in the rendered tree. On the native fork each dot is
+ * an `Animated.View` (the mock emits a host node of that type); the left/right
+ * slots use plain `View`s, so the count equals the number of dots.
+ */
+function countAnimatedDots(json: unknown): number {
+  return (JSON.stringify(json).match(/Animated\.View/g) ?? []).length;
+}
+
+describe('ConnectionDots', () => {
+  it('renders the left and right slots', () => {
+    const { getByText } = renderWithTheme(
+      <ConnectionDots left={<Text>LEFT</Text>} right={<Text>RIGHT</Text>} />,
+    );
+    expect(getByText('LEFT')).toBeTruthy();
+    expect(getByText('RIGHT')).toBeTruthy();
+  });
+
+  it('exposes a single accessibility label for the (decorative) dots', () => {
+    const { getByLabelText } = renderWithTheme(
+      <ConnectionDots
+        left={<View />}
+        right={<View />}
+        accessibilityLabel="Linking your account"
+      />,
+    );
+    const node = getByLabelText('Linking your account');
+    expect(node.props.accessibilityRole).toBe('image');
+  });
+
+  it('defaults the accessibility label to "Connecting"', () => {
+    const { getByLabelText } = renderWithTheme(
+      <ConnectionDots left={<View />} right={<View />} />,
+    );
+    expect(getByLabelText('Connecting')).toBeTruthy();
+  });
+
+  it('renders dotCount dots', () => {
+    const { toJSON } = renderWithTheme(
+      <ConnectionDots left={<View />} right={<View />} dotCount={8} />,
+    );
+    expect(countAnimatedDots(toJSON())).toBe(8);
+  });
+
+  it('renders the default of 6 dots when dotCount is omitted', () => {
+    const { toJSON } = renderWithTheme(
+      <ConnectionDots left={<View />} right={<View />} />,
+    );
+    expect(countAnimatedDots(toJSON())).toBe(6);
+  });
+
+  it('renders dots under reduced motion without crashing', () => {
+    const { toJSON, getByLabelText } = renderWithTheme(
+      <ConnectionDots
+        left={<View />}
+        right={<View />}
+        dotCount={5}
+        reducedMotion
+      />,
+    );
+    expect(getByLabelText('Connecting')).toBeTruthy();
+    expect(countAnimatedDots(toJSON())).toBe(5);
+  });
+
+  it('clamps a zero/negative dotCount to at least one dot', () => {
+    const { toJSON } = renderWithTheme(
+      <ConnectionDots left={<View />} right={<View />} dotCount={0} />,
+    );
+    expect(countAnimatedDots(toJSON())).toBe(1);
+  });
+});

package/src/__tests__/TextFieldFloatingLabel.test.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import { TextField, TextFieldInput } from '../text-field';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(
+    <BloomThemeProvider mode="light" colorPreset="teal">
+      {ui}
+    </BloomThemeProvider>,
+  );
+}
+
+describe('TextFieldInput floatingLabel', () => {
+  it('renders the floating label text inside the field', () => {
+    const { toJSON } = renderWithTheme(
+      <TextField>
+        <TextFieldInput floatingLabel label="Email" value="" onChangeText={() => {}} />
+      </TextField>,
+    );
+    // The visual label renders in an animated text node; assert it lands in the
+    // tree (it's aria-hidden because the input carries the accessibilityLabel).
+    expect(JSON.stringify(toJSON())).toContain('Email');
+  });
+
+  it('drives accessibilityLabel from the label', () => {
+    const { getByLabelText } = renderWithTheme(
+      <TextField>
+        <TextFieldInput floatingLabel label="Email" value="" onChangeText={() => {}} />
+      </TextField>,
+    );
+    expect(getByLabelText('Email')).toBeTruthy();
+  });
+
+  it('suppresses the native placeholder (the floating label replaces it)', () => {
+    const { getByLabelText } = renderWithTheme(
+      <TextField>
+        <TextFieldInput floatingLabel label="Email" value="" onChangeText={() => {}} />
+      </TextField>,
+    );
+    const input = getByLabelText('Email');
+    expect(input.props.placeholder).toBeUndefined();
+  });
+
+  it('self-wraps in a TextField when rendered without a root', () => {
+    const { getByLabelText, toJSON } = renderWithTheme(
+      <TextFieldInput floatingLabel label="Standalone" value="" onChangeText={() => {}} />,
+    );
+    expect(getByLabelText('Standalone')).toBeTruthy();
+    expect(JSON.stringify(toJSON())).toContain('Standalone');
+  });
+
+  it('reflects a present value on the input', () => {
+    const { getByLabelText } = renderWithTheme(
+      <TextField>
+        <TextFieldInput
+          floatingLabel
+          label="Email"
+          value="nate@oxy.so"
+          onChangeText={() => {}}
+        />
+      </TextField>,
+    );
+    expect(getByLabelText('Email').props.value).toBe('nate@oxy.so');
+  });
+});
+
+describe('TextFieldInput default (non-floating) is unchanged', () => {
+  it('falls back to the label as the placeholder when none is given', () => {
+    const { getByLabelText } = renderWithTheme(
+      <TextField>
+        <TextFieldInput label="Username" value="" onChangeText={() => {}} />
+      </TextField>,
+    );
+    // Default variant keeps the existing behavior: placeholder defaults to label.
+    expect(getByLabelText('Username').props.placeholder).toBe('Username');
+  });
+
+  it('honors an explicit placeholder', () => {
+    const { getByLabelText } = renderWithTheme(
+      <TextField>
+        <TextFieldInput
+          label="Username"
+          placeholder="oxylander"
+          value=""
+          onChangeText={() => {}}
+        />
+      </TextField>,
+    );
+    expect(getByLabelText('Username').props.placeholder).toBe('oxylander');
+  });
+});

package/src/__tests__/design-tokens.test.ts

@@ -0,0 +1,169 @@
+import {
+  bloomTailwindPreset,
+  bloomThemeCss,
+  bloomThemeBlock,
+  FILL_ROLES,
+  TEXT_ROLES,
+  BORDER_ROLES,
+  SPACING,
+  RADIUS,
+  BORDER_WIDTH,
+  TYPOGRAPHY,
+  FONT_FAMILY_VARS,
+  SHADOW_BOX,
+  bloomShadowStyle,
+} from '../design-tokens';
+import { CANONICAL_TOKENS } from '../theme/token-registry';
+
+describe('design-tokens color roles', () => {
+  const allRoles = { ...FILL_ROLES, ...TEXT_ROLES, ...BORDER_ROLES };
+
+  it('every color role is a var(--canonical) reference (no hardcoded color)', () => {
+    for (const [role, value] of Object.entries(allRoles)) {
+      expect(value).toMatch(/^var\(--[a-z-]+\)$/);
+      // Never wrap a base token in hsl() — bloom base tokens are full rgb colors.
+      expect(value).not.toContain('hsl(');
+    }
+  });
+
+  it('every color role aliases an existing canonical theme token', () => {
+    for (const value of Object.values(allRoles)) {
+      const token = value.replace(/^var\(--/, '').replace(/\)$/, '');
+      expect(CANONICAL_TOKENS).toContain(token as never);
+    }
+  });
+});
+
+describe('design-tokens numeric scales', () => {
+  it('exposes the spec spacing scale + screen-margin', () => {
+    expect(SPACING).toMatchObject({
+      'space-2': 2,
+      'space-4': 4,
+      'space-8': 8,
+      'space-12': 12,
+      'space-16': 16,
+      'space-20': 20,
+      'space-24': 24,
+      'space-32': 32,
+      'screen-margin': 20,
+    });
+  });
+
+  it('exposes the spec radius scale', () => {
+    expect(RADIUS).toMatchObject({
+      'radius-8': 8,
+      'radius-12': 12,
+      'radius-20': 20,
+      'radius-28': 28,
+      'radius-max': 9999,
+    });
+  });
+
+  it('exposes the 0.5px hairline border width', () => {
+    expect(BORDER_WIDTH.hairline).toBe(0.5);
+  });
+});
+
+describe('design-tokens typography', () => {
+  it('covers every spec type role', () => {
+    const names = Object.keys(TYPOGRAPHY).sort();
+    expect(names).toEqual(
+      [
+        'body',
+        'bodySmall',
+        'bodyTitleSmall',
+        'buttonLarge',
+        'caption',
+        'headerBold',
+        'sectionTitle',
+        'subtitle',
+      ].sort(),
+    );
+  });
+
+  it('each role has a valid size/lineHeight/weight/family', () => {
+    for (const role of Object.values(TYPOGRAPHY)) {
+      expect(role.size).toBeGreaterThan(0);
+      expect(role.lineHeight).toBeGreaterThanOrEqual(role.size);
+      expect(['400', '500', '600', '700']).toContain(role.weight);
+      expect(FONT_FAMILY_VARS[role.family]).toBeDefined();
+    }
+  });
+});
+
+describe('design-tokens Tailwind preset', () => {
+  const ext = bloomTailwindPreset.theme.extend;
+
+  it('only extends theme (additive, no top-level theme override)', () => {
+    expect(Object.keys(bloomTailwindPreset)).toEqual(['theme']);
+    expect(Object.keys(bloomTailwindPreset.theme)).toEqual(['extend']);
+  });
+
+  it('color roles reach background/text/border buckets', () => {
+    expect(ext.backgroundColor['fill']).toBe('var(--card)');
+    expect(ext.textColor['text-tertiary']).toBe('var(--muted-foreground)');
+    expect(ext.borderColor['border-input-active']).toBe('var(--ring)');
+  });
+
+  it('spacing/radius are emitted in px', () => {
+    expect(ext.spacing['space-8']).toBe('8px');
+    expect(ext.spacing['screen-margin']).toBe('20px');
+    expect(ext.borderRadius['radius-20']).toBe('20px');
+    expect(ext.borderWidth['hairline']).toBe('0.5px');
+  });
+
+  it('fontSize entries are [size, { lineHeight }] tuples', () => {
+    expect(ext.fontSize['body']).toEqual(['15px', { lineHeight: '22px' }]);
+    expect(ext.fontSize['headerBold']).toEqual(['28px', { lineHeight: '34px' }]);
+  });
+
+  it('fontFamily entries are [family, { fontWeight }] tuples', () => {
+    expect(ext.fontFamily['body']).toEqual([
+      'var(--bloom-font-sans)',
+      { fontWeight: '400' },
+    ]);
+    expect(ext.fontFamily['headerBold']).toEqual([
+      'var(--bloom-font-display)',
+      { fontWeight: '700' },
+    ]);
+  });
+
+  it('registers shadow-s and shadow-m box shadows', () => {
+    expect(ext.boxShadow['s']).toBe(SHADOW_BOX.s);
+    expect(ext.boxShadow['m']).toBe(SHADOW_BOX.m);
+  });
+
+  it('is frozen so consumer config merges cannot mutate it', () => {
+    expect(Object.isFrozen(bloomTailwindPreset)).toBe(true);
+  });
+});
+
+describe('design-tokens v4 @theme css', () => {
+  const css = bloomThemeCss();
+
+  it('emits --color-<role> aliases as direct var(--x) (never hsl-wrapped)', () => {
+    expect(css).toContain('--color-fill: var(--card);');
+    expect(css).toContain('--color-text-tertiary: var(--muted-foreground);');
+    expect(css).not.toContain('hsl(var(');
+  });
+
+  it('emits spacing, radius, typography and shadow vars', () => {
+    expect(css).toContain('--spacing-space-8: 8px;');
+    expect(css).toContain('--radius-radius-20: 20px;');
+    expect(css).toContain('--text-body: 15px;');
+    expect(css).toContain('--text-body--line-height: 22px;');
+    expect(css).toContain('--font-body: var(--bloom-font-sans);');
+    expect(css).toContain('--shadow-s:');
+  });
+
+  it('wraps the body in a @theme block', () => {
+    expect(bloomThemeBlock()).toMatch(/^@theme \{[\s\S]*\}$/);
+  });
+});
+
+describe('design-tokens shadow style (web default)', () => {
+  it('returns a boxShadow style on the web/default fork', () => {
+    const style = bloomShadowStyle('m');
+    expect(style).toHaveProperty('boxShadow', SHADOW_BOX.m);
+  });
+});

package/src/benefit-list/BenefitList.stories.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { BenefitList, BenefitRow } from './index';
+import { Person_Stroke2_Corner0_Rounded as PersonIcon } from '../icons/Person';
+import { Lock_Stroke2_Corner0_Rounded as LockIcon } from '../icons/Lock';
+import { Shield_Stroke2_Corner0_Rounded as ShieldIcon } from '../icons/Shield';
+
+const meta: Meta<typeof BenefitList> = {
+  title: 'Components/BenefitList',
+  component: BenefitList,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BenefitList>;
+
+export const Consent: Story = {
+  render: () => (
+    <View style={{ width: 360, padding: 24 }}>
+      <BenefitList accessibilityLabel="What you're sharing">
+        <BenefitRow
+          icon={<PersonIcon size="sm" />}
+          label="Share your name and profile photo"
+        />
+        <BenefitRow
+          icon={<LockIcon size="sm" />}
+          label="Your password is never shared with this app"
+        />
+        <BenefitRow
+          icon={<ShieldIcon size="sm" />}
+          label="You can revoke access at any time from settings"
+        />
+      </BenefitList>
+    </View>
+  ),
+};
+
+export const SingleRow: Story = {
+  render: () => (
+    <View style={{ width: 360, padding: 24 }}>
+      <BenefitList>
+        <BenefitRow icon={<ShieldIcon size="sm" />}>
+          End-to-end encrypted by default
+        </BenefitRow>
+      </BenefitList>
+    </View>
+  ),
+};

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