@oxyhq/bloom 0.88.0 → 1.0.0

package/src/__tests__/web-position-fixed.test.ts

@@ -1,70 +0,0 @@
-import { readdirSync, readFileSync, statSync } from 'node:fs';
-import { join } from 'node:path';
-
-import { WEB_POSITION_FIXED } from '../styles/web-view-style';
-
-/**
- * `position: fixed` is web-only CSS that React Native's `ViewStyle` does not
- * model, so every web fork used to assert it inline. Thirteen sites spelled it
- * `position: 'fixed' as 'absolute'` — not a widening but an outright FALSE
- * assertion to the compiler (the value is not `'absolute'`), which would survive
- * a rename and reads as if the style were absolute. One more used
- * `as ViewStyle['position']`.
- *
- * They now all import `WEB_POSITION_FIXED`, whose single documented cast lives in
- * `styles/web-view-style.ts`. This guard stops the inline spellings coming back.
- */
-
-const SRC = join(__dirname, '..');
-
-function sourceFiles(dir: string): string[] {
-  return readdirSync(dir).flatMap((entry) => {
-    const full = join(dir, entry);
-    if (statSync(full).isDirectory()) {
-      return entry === '__tests__' ? [] : sourceFiles(full);
-    }
-    return /\.tsx?$/.test(entry) ? [full] : [];
-  });
-}
-
-const files = sourceFiles(SRC);
-
-describe('web position: fixed', () => {
-  it('resolves to the CSS value at runtime', () => {
-    expect(WEB_POSITION_FIXED).toBe('fixed');
-  });
-
-  it('finds source files to scan (guards against a broken walk)', () => {
-    expect(files.length).toBeGreaterThan(100);
-  });
-
-  it.each([
-    ["position: 'fixed' as 'absolute'", /position:\s*'fixed'\s+as\s+'absolute'/],
-    ["position: 'fixed' as ViewStyle['position']", /position:\s*'fixed'\s+as\s+ViewStyle/],
-    ['a bare position: fixed literal', /position:\s*'fixed'\s*,/],
-  ])('has no %s left in src', (_label, pattern) => {
-    const offenders = files.filter((file) => {
-      const source = readFileSync(file, 'utf8')
-        // Comments may still discuss the retired spelling.
-        .replace(/\/\*[\s\S]*?\*\//g, '')
-        .replace(/^\s*\/\/.*$/gm, '');
-      return pattern.test(source);
-    });
-    expect(offenders.map((f) => f.replace(`${SRC}/`, ''))).toEqual([]);
-  });
-
-  it('keeps the only cast inside styles/web-view-style.ts', () => {
-    const module = readFileSync(join(SRC, 'styles/web-view-style.ts'), 'utf8')
-      .replace(/\/\*[\s\S]*?\*\//g, '')
-      .replace(/^\s*\/\/.*$/gm, '');
-    expect(module.match(/ as /g)).toHaveLength(1);
-  });
-
-  it('is imported by every fork that positions something fixed', () => {
-    const importers = files.filter((file) =>
-      readFileSync(file, 'utf8').includes('WEB_POSITION_FIXED'),
-    );
-    // The 10 consumers plus the module that defines it.
-    expect(importers.length).toBeGreaterThanOrEqual(11);
-  });
-});

package/src/activity-heatmap/ActivityHeatmap.stories.tsx

@@ -1,108 +0,0 @@
-import React from 'react';
-import { View, ScrollView } from 'react-native';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { ActivityHeatmap, bucketByDay } from './index';
-import type { ActivityHeatmapDay } from './index';
-import { BloomThemeProvider } from '../theme';
-
-const END_DATE = '2026-06-30';
-
-/** Deterministic pseudo-random sample so stories render stably. */
-function sampleData(days: number, endKey: string): ActivityHeatmapDay[] {
-  const [y, m, d] = endKey.split('-').map(Number);
-  const end = Date.UTC(y ?? 2026, (m ?? 1) - 1, d ?? 1);
-  const out: ActivityHeatmapDay[] = [];
-  let seed = 42;
-  for (let i = 0; i < days; i++) {
-    seed = (seed * 1103515245 + 12345) & 0x7fffffff;
-    const roll = seed % 100;
-    const count = roll < 45 ? 0 : roll < 70 ? 1 : roll < 85 ? 3 : roll < 95 ? 7 : 14;
-    const ts = end - (days - 1 - i) * 86_400_000;
-    const dt = new Date(ts);
-    const key = `${dt.getUTCFullYear()}-${String(dt.getUTCMonth() + 1).padStart(2, '0')}-${String(
-      dt.getUTCDate(),
-    ).padStart(2, '0')}`;
-    if (count > 0) out.push({ date: key, count });
-  }
-  return out;
-}
-
-const DATA = sampleData(364, END_DATE);
-
-const meta: Meta<typeof ActivityHeatmap> = {
-  title: 'Data Display/ActivityHeatmap',
-  component: ActivityHeatmap,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof ActivityHeatmap>;
-
-export const Light: Story = {
-  render: () => (
-    <BloomThemeProvider mode="light">
-      <View style={{ padding: 24 }}>
-        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-          <ActivityHeatmap
-            data={DATA}
-            endDate={END_DATE}
-            weekdayLabels={['', 'Mon', '', 'Wed', '', 'Fri', '']}
-          />
-        </ScrollView>
-      </View>
-    </BloomThemeProvider>
-  ),
-};
-
-export const Dark: Story = {
-  render: () => (
-    <BloomThemeProvider mode="dark">
-      <View style={{ padding: 24, backgroundColor: '#000' }}>
-        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-          <ActivityHeatmap
-            data={DATA}
-            endDate={END_DATE}
-            weekdayLabels={['', 'Mon', '', 'Wed', '', 'Fri', '']}
-          />
-        </ScrollView>
-      </View>
-    </BloomThemeProvider>
-  ),
-};
-
-export const CustomScale: Story = {
-  render: () => (
-    <BloomThemeProvider mode="dark">
-      <View style={{ padding: 24, backgroundColor: '#000' }}>
-        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-          <ActivityHeatmap
-            data={DATA}
-            endDate={END_DATE}
-            numDays={140}
-            cellSize={14}
-            gap={4}
-            colorScale={['#0E3B2E', '#146B4C', '#1FA971', '#38D896', '#7DF3BD']}
-          />
-        </ScrollView>
-      </View>
-    </BloomThemeProvider>
-  ),
-};
-
-/** Demonstrates the `bucketByDay` helper grouping raw timestamps. */
-export const FromRawEvents: Story = {
-  render: () => {
-    const events = DATA.flatMap((d) => Array.from({ length: d.count }, () => ({ at: d.date })));
-    const bucketed = bucketByDay(events, (e) => e.at);
-    return (
-      <BloomThemeProvider mode="light">
-        <View style={{ padding: 24 }}>
-          <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-            <ActivityHeatmap data={bucketed} endDate={END_DATE} />
-          </ScrollView>
-        </View>
-      </BloomThemeProvider>
-    );
-  },
-};

package/src/alert-dialog/AlertDialog.stories.tsx

@@ -1,61 +0,0 @@
-import React, { useState } from 'react';
-import { View } from 'react-native';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { AlertDialog, AlertDialogHost, confirm } from './index';
-import { Button } from '../button';
-import { Text } from '../typography';
-
-const meta: Meta = {
-  title: 'Overlays/AlertDialog',
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-export const Declarative: Story = {
-  render: () => {
-    const [open, setOpen] = useState(false);
-    return (
-      <View style={{ padding: 40 }}>
-        <Button onPress={() => setOpen(true)}>Delete app</Button>
-        <AlertDialog
-          visible={open}
-          onClose={() => setOpen(false)}
-          title="Delete this app?"
-          description="This permanently removes the application and all of its credentials. This cannot be undone."
-          confirmLabel="Delete"
-          destructive
-          onConfirm={() => {}}
-        />
-      </View>
-    );
-  },
-};
-
-function ImperativeDemo() {
-  const [result, setResult] = useState<string>('—');
-  return (
-    <View style={{ padding: 40, gap: 12 }}>
-      <AlertDialogHost />
-      <Button
-        onPress={async () => {
-          const ok = await confirm({
-            title: 'Sign out everywhere?',
-            description: 'You will need to sign in again on all devices.',
-            confirmLabel: 'Sign out',
-            destructive: true,
-          });
-          setResult(ok ? 'confirmed' : 'cancelled');
-        }}>
-        Sign out everywhere
-      </Button>
-      <Text>{`Result: ${result}`}</Text>
-    </View>
-  );
-}
-
-export const ImperativeConfirm: Story = {
-  render: () => <ImperativeDemo />,
-};

package/src/alert-dialog/AlertDialogHost.tsx

@@ -1,51 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-import {
-  resolveConfirm,
-  subscribeConfirms,
-  type ConfirmEntry,
-} from './confirm-store';
-import type { AlertDialogType } from './AlertDialog';
-
-/**
- * Build the `<AlertDialogHost />` bound to a platform `AlertDialog`. The
- * platform entry files (`index.ts` / `index.web.ts`) inject the correct one.
- *
- * The host mounts the imperative `confirm()` UI. Wrap your app root once
- * (after `BloomThemeProvider`) and you can call `confirm()` from anywhere —
- * including before the host mounts (entries are queued and drained on
- * subscribe). Confirms present one at a time in FIFO order.
- */
-export function createAlertDialogHost(AlertDialog: AlertDialogType) {
-  function ConfirmHost({ entry }: { entry: ConfirmEntry }) {
-    return (
-      <AlertDialog
-        visible
-        title={entry.title}
-        description={entry.description}
-        confirmLabel={entry.confirmLabel}
-        cancelLabel={entry.cancelLabel}
-        destructive={entry.destructive}
-        hideCancel={entry.hideCancel}
-        dismissible={entry.dismissible}
-        onConfirm={() => resolveConfirm(entry.id, true)}
-        onCancel={() => resolveConfirm(entry.id, false)}
-        onClose={() => resolveConfirm(entry.id, false)}
-      />
-    );
-  }
-
-  function AlertDialogHost() {
-    const [queue, setQueue] = useState<readonly ConfirmEntry[]>([]);
-
-    useEffect(() => subscribeConfirms(setQueue), []);
-
-    const head = queue[0];
-    if (!head) return null;
-
-    return <ConfirmHost key={head.id} entry={head} />;
-  }
-  AlertDialogHost.displayName = 'AlertDialogHost';
-
-  return AlertDialogHost;
-}

package/src/alert-dialog/confirm-store.ts

@@ -1,77 +0,0 @@
-import type { ConfirmOptions } from './types';
-
-/**
- * Imperative confirm store.
- *
- * Mirrors the `dialog/alert-store` pattern: a module-scope queue + a single
- * subscriber (the `<AlertDialogHost />` mounted in the app tree). `confirm()`
- * enqueues an entry and resolves a promise with the user's choice. Entries
- * enqueued before the host mounts drain on subscribe — no lost confirms.
- */
-
-let idCounter = 0;
-function genId(): string {
-  idCounter += 1;
-  return `bloom-confirm-${idCounter}`;
-}
-
-export interface ConfirmEntry extends ConfirmOptions {
-  id: string;
-  resolve: (confirmed: boolean) => void;
-}
-
-type Listener = (queue: ConfirmEntry[]) => void;
-
-let queue: ConfirmEntry[] = [];
-let listener: Listener | null = null;
-
-function emit(): void {
-  if (listener) listener(queue);
-}
-
-/**
- * Show a Bloom confirm dialog and resolve with the user's choice.
- *
- * ```ts
- * const ok = await confirm({
- *   title: 'Delete app?',
- *   description: 'This cannot be undone.',
- *   confirmLabel: 'Delete',
- *   destructive: true,
- * });
- * if (ok) await doDelete();
- * ```
- */
-export function confirm(options: ConfirmOptions): Promise<boolean> {
-  return new Promise<boolean>((resolve) => {
-    const id = genId();
-    queue = [...queue, { ...options, id, resolve }];
-    emit();
-  });
-}
-
-/** Resolve and remove an entry. Called by the host on confirm/cancel/dismiss. */
-export function resolveConfirm(id: string, confirmed: boolean): void {
-  const entry = queue.find((e) => e.id === id);
-  if (!entry) return;
-  queue = queue.filter((e) => e.id !== id);
-  entry.resolve(confirmed);
-  emit();
-}
-
-/**
- * Subscribe to queue changes (single-subscriber model; latest wins). Delivers
- * the current queue synchronously so a freshly mounted host catches up.
- */
-export function subscribeConfirms(fn: Listener): () => void {
-  listener = fn;
-  fn(queue);
-  return () => {
-    if (listener === fn) listener = null;
-  };
-}
-
-/** Inspect the current queue. Used by tests. */
-export function getConfirmQueue(): readonly ConfirmEntry[] {
-  return queue;
-}

package/src/animated-check/AnimatedCheck.stories.tsx

@@ -1,60 +0,0 @@
-import React, { useRef } from 'react';
-import { Pressable, Text, View } from 'react-native';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { AnimatedCheck, type AnimatedCheckRef } from './index';
-
-const meta: Meta<typeof AnimatedCheck> = {
-  title: 'Components/AnimatedCheck',
-  component: AnimatedCheck,
-  argTypes: {
-    size: { control: { type: 'range', min: 16, max: 128, step: 4 } },
-    color: { control: 'color' },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof AnimatedCheck>;
-
-export const Playable: Story = {
-  args: { size: 64 },
-  render: (args) => {
-    function Demo() {
-      const ref = useRef<AnimatedCheckRef>(null);
-      return (
-        <View style={{ gap: 16, alignItems: 'center' }}>
-          <AnimatedCheck ref={ref} {...args} />
-          <Pressable
-            accessibilityLabel="Play"
-            onPress={() => ref.current?.play()}
-            style={{
-              paddingVertical: 8,
-              paddingHorizontal: 16,
-              borderRadius: 8,
-              backgroundColor: '#111827',
-            }}
-          >
-            <Text style={{ color: 'white', fontWeight: '600' }}>Play</Text>
-          </Pressable>
-        </View>
-      );
-    }
-    return <Demo />;
-  },
-};
-
-export const CustomColor: Story = {
-  args: { size: 80, color: '#6366f1' },
-  render: (args) => {
-    function Demo() {
-      const ref = useRef<AnimatedCheckRef>(null);
-      return (
-        <Pressable accessibilityLabel="Replay" onPress={() => ref.current?.play()}>
-          <AnimatedCheck ref={ref} {...args} />
-        </Pressable>
-      );
-    }
-    return <Demo />;
-  },
-};

package/src/avatar/Avatar.stories.tsx

@@ -1,215 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Avatar } from './Avatar';
-import { Verified_Stroke2_Corner2_Rounded } from '../icons/Verified';
-
-const meta: Meta<typeof Avatar> = {
-  title: 'Components/Avatar',
-  component: Avatar,
-  argTypes: {
-    size: {
-      control: { type: 'number', min: 16, max: 256, step: 4 },
-    },
-    shape: {
-      control: 'select',
-      options: ['circle', 'squircle'],
-    },
-    verified: { control: 'boolean' },
-    live: { control: 'boolean' },
-    hideLiveBadge: { control: 'boolean' },
-    ring: { control: 'object' },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Avatar>;
-
-const SAMPLE_URI =
-  'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200&h=200&fit=crop';
-
-// Sample Instagram-stories-style gradient, defined locally in the story only —
-// Bloom ships no such palette (it stays brand-neutral). Consumers supply their
-// own ring colors via the `ring` prop.
-const STORY_GRADIENT = ['#F58529', '#DD2A7B', '#8134AF', '#515BD4'];
-// Muted gray used by IG for an already-seen story.
-const SEEN_GRAY = '#C7C7CC';
-
-export const Basic: Story = {
-  args: { size: 64, name: 'Nate Isern' },
-};
-
-export const FromUri: Story = {
-  args: { size: 64, uri: SAMPLE_URI },
-  name: 'From URI',
-};
-
-export const Initials: Story = {
-  args: { size: 64, name: 'Ada Lovelace' },
-};
-
-export const Squircle: Story = {
-  args: { size: 64, name: 'Ada Lovelace', shape: 'squircle' },
-};
-
-export const Sizes: Story = {
-  render: () => (
-    <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
-      <Avatar size={24} name="Ada" />
-      <Avatar size={32} name="Ada" />
-      <Avatar size={40} name="Ada" />
-      <Avatar size={56} name="Ada" />
-      <Avatar size={80} name="Ada" />
-      <Avatar size={120} name="Ada" />
-    </View>
-  ),
-};
-
-export const Composition: Story = {
-  render: () => (
-    <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
-      <Avatar size={48} name="Ada Lovelace" />
-      <Avatar size={48} name="Grace Hopper" />
-      <Avatar size={48} name="Alan Turing" />
-      <Avatar size={48} name="Linus Torvalds" />
-      <Avatar size={48} name="Margaret Hamilton" />
-    </View>
-  ),
-};
-
-export const LiveCircle: Story = {
-  args: { size: 72, uri: SAMPLE_URI, live: true },
-  name: 'Live (circle)',
-};
-
-export const LiveSquircle: Story = {
-  args: { size: 72, uri: SAMPLE_URI, live: true, shape: 'squircle' },
-  name: 'Live (squircle)',
-};
-
-export const LiveSmall: Story = {
-  // size <= 32 → tiny badge variant
-  args: { size: 28, uri: SAMPLE_URI, live: true },
-  name: 'Live (small · tiny badge)',
-};
-
-export const LiveRingOnly: Story = {
-  args: { size: 72, uri: SAMPLE_URI, live: true, hideLiveBadge: true },
-  name: 'Live + hideLiveBadge (ring only)',
-};
-
-export const LiveVerified: Story = {
-  args: {
-    size: 72,
-    uri: SAMPLE_URI,
-    live: true,
-    verified: true,
-    verifiedIcon: (
-      <Verified_Stroke2_Corner2_Rounded size="lg" fill="#1D9BF0" />
-    ),
-  },
-  name: 'Live + verified',
-};
-
-export const LiveGallery: Story = {
-  render: () => (
-    <View style={{ flexDirection: 'row', gap: 20, alignItems: 'center' }}>
-      <Avatar size={24} uri={SAMPLE_URI} live />
-      <Avatar size={32} uri={SAMPLE_URI} live />
-      <Avatar size={48} uri={SAMPLE_URI} live />
-      <Avatar size={72} uri={SAMPLE_URI} live />
-      <Avatar size={72} uri={SAMPLE_URI} live shape="squircle" />
-      <Avatar size={72} uri={SAMPLE_URI} live liveLabel="EN VIVO" />
-    </View>
-  ),
-  name: 'Live (gallery)',
-};
-
-export const GradientRing: Story = {
-  args: {
-    size: 72,
-    uri: SAMPLE_URI,
-    ring: { colors: STORY_GRADIENT, width: 3, gap: 3 },
-  },
-  name: 'Gradient ring (stories)',
-};
-
-export const SeenVsUnseen: Story = {
-  render: () => (
-    <View style={{ flexDirection: 'row', gap: 20, alignItems: 'center' }}>
-      {/* Unseen → gradient ring. */}
-      <Avatar
-        size={72}
-        uri={SAMPLE_URI}
-        ring={{ colors: STORY_GRADIENT, width: 3, gap: 3 }}
-      />
-      {/* Seen → muted solid gray ring. */}
-      <Avatar
-        size={72}
-        uri={SAMPLE_URI}
-        ring={{ colors: SEEN_GRAY, width: 3, gap: 3 }}
-      />
-    </View>
-  ),
-  name: 'Seen vs unseen',
-};
-
-export const RingWithGap: Story = {
-  render: () => (
-    <View style={{ flexDirection: 'row', gap: 24, alignItems: 'center' }}>
-      {/* gap 0 → overlays the edge, footprint unchanged. */}
-      <Avatar size={72} uri={SAMPLE_URI} ring={{ colors: STORY_GRADIENT, width: 3, gap: 0 }} />
-      {/* gap 4 → sits outside the avatar, footprint grows. */}
-      <Avatar size={72} uri={SAMPLE_URI} ring={{ colors: STORY_GRADIENT, width: 3, gap: 4 }} />
-      {/* gap 8 → wider clearance. */}
-      <Avatar size={72} uri={SAMPLE_URI} ring={{ colors: STORY_GRADIENT, width: 4, gap: 8 }} />
-    </View>
-  ),
-  name: 'Ring with gap',
-};
-
-export const RingSquircle: Story = {
-  args: {
-    size: 72,
-    uri: SAMPLE_URI,
-    shape: 'squircle',
-    ring: { colors: STORY_GRADIENT, width: 3, gap: 3 },
-  },
-  name: 'Gradient ring (squircle)',
-};
-
-export const SolidRing: Story = {
-  render: () => (
-    <View style={{ flexDirection: 'row', gap: 20, alignItems: 'center' }}>
-      <Avatar size={72} uri={SAMPLE_URI} ring={{ colors: '#1A73E8', width: 3 }} />
-      <Avatar size={72} uri={SAMPLE_URI} shape="squircle" ring={{ colors: '#1A73E8', width: 3 }} />
-      <Avatar size={72} uri={SAMPLE_URI} ring={{ colors: '#1A73E8', width: 3, gap: 4 }} />
-    </View>
-  ),
-  name: 'Solid ring',
-};
-
-export const GradientDirections: Story = {
-  render: () => (
-    <View style={{ flexDirection: 'row', gap: 20, alignItems: 'center' }}>
-      <Avatar
-        size={72}
-        uri={SAMPLE_URI}
-        ring={{ colors: STORY_GRADIENT, width: 3, gap: 3, gradientDirection: 'diagonal' }}
-      />
-      <Avatar
-        size={72}
-        uri={SAMPLE_URI}
-        ring={{ colors: STORY_GRADIENT, width: 3, gap: 3, gradientDirection: 'horizontal' }}
-      />
-      <Avatar
-        size={72}
-        uri={SAMPLE_URI}
-        ring={{ colors: STORY_GRADIENT, width: 3, gap: 3, gradientDirection: 'vertical' }}
-      />
-    </View>
-  ),
-  name: 'Gradient directions',
-};