@oxyhq/bloom 0.19.1 → 0.20.0

package/lib/typescript/module/index.web.d.ts

@@ -3,6 +3,8 @@ export { atoms, flatten, Z_INDEX, zIndex } from './styles';
 export type { ViewStyleProp, TextStyleProp } from './styles';
 export * as tokens from './styles/tokens';
 export { web, native, ios, android, platform, select } from './styles/platform';
+export { bloomTailwindPreset, bloomThemeCss, bloomThemeBlock, FILL_ROLES, TEXT_ROLES, BORDER_ROLES, SPACING, RADIUS, BORDER_WIDTH, TYPOGRAPHY, FONT_FAMILY_VARS, SHADOW_BOX, bloomShadowStyle, } from './design-tokens';
+export type { TailwindPreset, TailwindPresetThemeExtend, FillRole, TextRole, BorderRole, TypeRole, TypeRoleName, ShadowRole, } from './design-tokens';
 export { useInteractionState } from './hooks/useInteractionState';
 export { useDelayedLoading } from './hooks/useDelayedLoading';
 export { useThrottledValue } from './hooks/useThrottledValue';
@@ -34,6 +36,10 @@ export * as Skeleton from './skeleton';
 export * as Grid from './grid';
 export { Fill } from './fill';
 export { IconCircle } from './icon-circle';
+export { ConnectionDots } from './connection-dots/index.web';
+export type { ConnectionDotsProps } from './connection-dots/index.web';
+export { BenefitRow, BenefitList } from './benefit-list';
+export type { BenefitRowProps, BenefitListProps } from './benefit-list';
 export * from './text-field';
 export * from './segmented-control';
 export { SearchInput } from './search-input';

package/lib/typescript/module/index.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../src/index.web.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../src/index.web.ts"],"names":[],"mappings":"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"}

package/lib/typescript/module/text-field/index.d.ts

@@ -18,8 +18,21 @@ export type TextFieldInputProps = Omit<TextInputProps, 'value' | 'onChangeText'
     isInvalid?: boolean;
     inputRef?: React.RefObject<TextInput | null> | React.ForwardedRef<TextInput>;
     placeholder?: string | null | undefined;
+    /**
+     * Render the field with a Material-style floating label. When `true`, the
+     * {@link label} sits inside the field as the placeholder while the input is
+     * empty AND unfocused; on focus OR when a value is present it animates up to a
+     * small caption pinned to the top of the field and the typed value shows
+     * below it. Opt-in — the default (`false`) keeps the existing chrome where the
+     * label lives above the field (`TextFieldLabel`) and the placeholder is plain.
+     *
+     * Cross-platform: the animation is driven by focus + value-presence state (no
+     * CSS `:placeholder-shown` / `peer-focus`), so web and native behave
+     * identically. Respects reduced-motion (snaps instead of animating).
+     */
+    floatingLabel?: boolean;
 };
-export declare function TextFieldInput({ label, placeholder, value, onChangeText, onFocus, onBlur, isInvalid, inputRef, style, ...rest }: TextFieldInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextFieldInput({ label, placeholder, value, onChangeText, onFocus, onBlur, isInvalid, inputRef, style, floatingLabel, ...rest }: TextFieldInputProps): import("react/jsx-runtime").JSX.Element;
 export declare function TextFieldLabel({ nativeID, children, }: React.PropsWithChildren<{
     nativeID?: string;
 }>): import("react/jsx-runtime").JSX.Element;

package/lib/typescript/module/text-field/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/text-field/index.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,kBAAkB,EAGvB,SAAS,EACT,KAAK,cAAc,EAGnB,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAKtB,OAAO,EAML,KAAK,aAAa,EAClB,KAAK,aAAa,EACnB,MAAM,WAAW,CAAC;AACnB,OAAO,EAAkB,KAAK,KAAK,IAAI,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAwB7E,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,iBAAiB,CAClD;IAAE,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,aAAa,CACxC,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,SAAiB,EAAE,KAAK,EAAE,EAAE,cAAc,2CA0C/E;AAED,wBAAgB,oBAAoB;;;;;EA0BnC;AAED,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,cAAc,EACd,OAAO,GAAG,cAAc,GAAG,aAAa,CACzC,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IAC7E,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;CACzC,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,WAAW,EACX,KAAK,EACL,YAAY,EACZ,OAAO,EACP,MAAM,EACN,SAAS,EACT,QAAQ,EACR,KAAK,EACL,GAAG,IAAI,EACR,EAAE,mBAAmB,2CAmGrB;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,QAAQ,GACT,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,2CAchD;AAED,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,CAAA;CAAE,2CA8BxF;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,KAAK,EACL,iBAAiB,EACjB,KAAK,GACN,EAAE,KAAK,CAAC,iBAAiB,CACxB,aAAa,GAAG;IACd,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;CAC7D,CACF,2CAqBA;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf,2CAkDA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/text-field/index.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,kBAAkB,EAIvB,SAAS,EACT,KAAK,cAAc,EAGnB,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAMtB,OAAO,EAML,KAAK,aAAa,EAClB,KAAK,aAAa,EACnB,MAAM,WAAW,CAAC;AACnB,OAAO,EAAkB,KAAK,KAAK,IAAI,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAwB7E,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,iBAAiB,CAClD;IAAE,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,aAAa,CACxC,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,SAAiB,EAAE,KAAK,EAAE,EAAE,cAAc,2CA0C/E;AAED,wBAAgB,oBAAoB;;;;;EA0BnC;AAED,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,cAAc,EACd,OAAO,GAAG,cAAc,GAAG,aAAa,CACzC,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IAC7E,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACxC;;;;;;;;;;;OAWG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,WAAW,EACX,KAAK,EACL,YAAY,EACZ,OAAO,EACP,MAAM,EACN,SAAS,EACT,QAAQ,EACR,KAAK,EACL,aAAqB,EACrB,GAAG,IAAI,EACR,EAAE,mBAAmB,2CA4HrB;AA4KD,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,QAAQ,GACT,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,2CAchD;AAED,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,CAAA;CAAE,2CA8BxF;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,KAAK,EACL,iBAAiB,EACjB,KAAK,GACN,EAAE,KAAK,CAAC,iBAAiB,CACxB,aAAa,GAAG;IACd,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;CAC7D,CACF,2CAqBA;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf,2CAkDA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.19.1",
+  "version": "0.20.0",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -61,6 +61,28 @@
         "default": "./lib/commonjs/theme/color-presets.js"
       }
     },
+    "./design-tokens": {
+      "react-native": "./src/design-tokens/index.ts",
+      "import": {
+        "types": "./lib/typescript/module/design-tokens/index.d.ts",
+        "default": "./lib/module/design-tokens/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/design-tokens/index.d.ts",
+        "default": "./lib/commonjs/design-tokens/index.js"
+      }
+    },
+    "./tailwind-preset": {
+      "react-native": "./src/design-tokens/tailwind-preset.ts",
+      "import": {
+        "types": "./lib/typescript/module/design-tokens/tailwind-preset.d.ts",
+        "default": "./lib/module/design-tokens/tailwind-preset.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/design-tokens/tailwind-preset.d.ts",
+        "default": "./lib/commonjs/design-tokens/tailwind-preset.js"
+      }
+    },
     "./portal": {
       "react-native": "./src/portal/index.tsx",
       "browser": {
@@ -360,6 +382,33 @@
         "default": "./lib/commonjs/icon-circle/index.js"
       }
     },
+    "./connection-dots": {
+      "react-native": "./src/connection-dots/index.ts",
+      "browser": {
+        "types": "./lib/typescript/module/connection-dots/index.web.d.ts",
+        "import": "./lib/module/connection-dots/index.web.js",
+        "require": "./lib/commonjs/connection-dots/index.web.js"
+      },
+      "import": {
+        "types": "./lib/typescript/module/connection-dots/index.d.ts",
+        "default": "./lib/module/connection-dots/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/connection-dots/index.d.ts",
+        "default": "./lib/commonjs/connection-dots/index.js"
+      }
+    },
+    "./benefit-list": {
+      "react-native": "./src/benefit-list/index.tsx",
+      "import": {
+        "types": "./lib/typescript/module/benefit-list/index.d.ts",
+        "default": "./lib/module/benefit-list/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/benefit-list/index.d.ts",
+        "default": "./lib/commonjs/benefit-list/index.js"
+      }
+    },
     "./text-field": {
       "react-native": "./src/text-field/index.tsx",
       "import": {

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