@oxyhq/bloom 0.4.0 → 0.5.1

package/src/dialog/alert.ts

@@ -0,0 +1,42 @@
+import {
+  enqueueAlert,
+  resolveButtons,
+  type AlertButton,
+} from './alert-store';
+
+/**
+ * Show a Bloom-styled confirmation dialog. Mirrors React Native's
+ * `Alert.alert(title, message?, buttons?)` signature so existing call
+ * sites migrate by changing the import only.
+ *
+ * If no buttons are passed, a single `OK` confirmation is rendered.
+ *
+ * The alert is enqueued in a module-scope store and rendered by
+ * `<BloomDialogProvider>`. Calls made before the provider mounts are
+ * queued and drained once the provider attaches — there is no fire-and-
+ * forget loss window. Calls made when no provider is ever mounted are
+ * silently queued forever; in development, mount the provider once at
+ * the app root and the queue will catch up immediately.
+ *
+ * ```tsx
+ * import { alert } from '@oxyhq/bloom';
+ *
+ * alert('Sign out?', 'You will need to enter your password to sign in again.', [
+ *   { text: 'Cancel', style: 'cancel' },
+ *   { text: 'Sign out', style: 'destructive', onPress: doSignOut },
+ * ]);
+ * ```
+ */
+export function alert(
+  title: string,
+  message?: string,
+  buttons?: AlertButton[],
+): void {
+  enqueueAlert({
+    title,
+    message,
+    buttons: resolveButtons(buttons),
+  });
+}
+
+export type { AlertButton, AlertButtonStyle } from './alert-store';

package/src/dialog/context.ts

@@ -1,5 +1,9 @@
 import { createContext, useContext, useId, useMemo, useRef } from 'react';
-import type { DialogContextProps, DialogControlRefProps, DialogControlProps } from './types';
+import type {
+  DialogContextProps,
+  DialogControlProps,
+  DialogControlRefProps,
+} from './types';
 
 export const Context = createContext<DialogContextProps>({
   close: () => {},
@@ -11,6 +15,13 @@ export function useDialogContext(): DialogContextProps {
   return useContext(Context);
 }
 
+/**
+ * Return a stable handle that can imperatively `open()` and `close()` a
+ * `<Dialog>` mounted with the same control.
+ *
+ * The handle survives across re-renders; mounting a different `<Dialog>`
+ * with the same control attaches the new instance via the internal ref.
+ */
 export function useDialogControl(): DialogControlProps {
   const id = useId();
   const control = useRef<DialogControlRefProps | null>({
@@ -22,8 +33,8 @@ export function useDialogControl(): DialogControlProps {
     () => ({
       id,
       ref: control,
-      open: (options) => {
-        control.current?.open(options);
+      open: () => {
+        control.current?.open();
       },
       close: (cb) => {
         control.current?.close(cb);

package/src/dialog/index.ts

@@ -1,3 +1,15 @@
-export { Outer, Inner, ScrollableInner, Handle, Close, Backdrop } from './Dialog';
+export { Dialog } from './Dialog';
+export { BloomDialogProvider } from './BloomDialogProvider';
+export { alert } from './alert';
 export { useDialogContext, useDialogControl } from './context';
-export type { DialogControlProps, DialogOuterProps, DialogInnerProps, DialogContextProps } from './types';
+export type {
+  AlertButton,
+  AlertButtonStyle,
+} from './alert-store';
+export type {
+  DialogAction,
+  DialogActionColor,
+  DialogContextProps,
+  DialogControlProps,
+  DialogProps,
+} from './types';

package/src/dialog/index.web.ts

@@ -1,13 +1,25 @@
 // Web variant of the `./dialog` barrel.
 //
-// The default barrel (`./index.ts`) re-exports from `./Dialog`, which on
-// native uses `react-native-safe-area-context` and Bloom's own `BottomSheet`
-// primitive. The web fork (`./Dialog.web`) is a pure-DOM modal overlay that
-// depends only on `react-remove-scroll-bar` and the in-package `Portal`.
+// The default barrel (`./index.ts`) re-exports from `./Dialog`, which uses
+// bloom's `BottomSheet` (a native-only primitive built on
+// react-native-gesture-handler + reanimated). The web fork (`./Dialog.web`)
+// is a pure-DOM modal overlay that renders into the bloom Portal.
 //
-// Web bundlers select this file via the `"browser"` condition in
+// Web bundlers select this file via the `"browser"` export condition in
 // `package.json`'s `exports['./dialog']`; native bundlers fall through to
-// the React Native build.
-export { Outer, Inner, ScrollableInner, Handle, Close, Backdrop } from './Dialog.web';
+// the React Native build above.
+export { Dialog, BLOOM_DIALOG_CSS } from './Dialog.web';
+export { BloomDialogProvider } from './BloomDialogProvider.web';
+export { alert } from './alert';
 export { useDialogContext, useDialogControl } from './context';
-export type { DialogControlProps, DialogOuterProps, DialogInnerProps, DialogContextProps } from './types';
+export type {
+  AlertButton,
+  AlertButtonStyle,
+} from './alert-store';
+export type {
+  DialogAction,
+  DialogActionColor,
+  DialogContextProps,
+  DialogControlProps,
+  DialogProps,
+} from './types';

package/src/dialog/types.ts

@@ -1,7 +1,15 @@
-import type { ScrollViewProps, StyleProp, ViewStyle } from 'react-native';
+import type { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native';
 
+/**
+ * Imperative open/close handle returned by `useDialogControl`.
+ *
+ * Consumers receive an instance of `DialogControlProps`, which is a stable
+ * object whose `open`/`close` methods proxy to whichever `Dialog` instance
+ * has currently registered itself via the internal ref. Re-rendering the
+ * dialog under the same control does not break the handle.
+ */
 export type DialogControlRefProps = {
-  open: (options?: Record<string, unknown>) => void;
+  open: () => void;
   close: (callback?: () => void) => void;
 };
 
@@ -15,25 +23,74 @@ export type DialogContextProps = {
   isWithinDialog: boolean;
 };
 
-export type DialogOuterProps = {
+/**
+ * Color of a declarative `DialogAction`. Maps to bloom's theme palette:
+ *
+ * - `'default'`  -> theme primary (filled CTA)
+ * - `'cancel'`   -> theme secondary (auto-dismiss, no `onPress` required)
+ * - `'destructive'` -> theme negative
+ */
+export type DialogActionColor = 'default' | 'cancel' | 'destructive';
+
+export type DialogAction = {
+  label: string;
+  onPress?: (e: GestureResponderEvent) => void;
+  color?: DialogActionColor;
+  disabled?: boolean;
+  /**
+   * Defaults to `true`. When `true`, the dialog closes (and runs the close
+   * animation) before `onPress` is invoked, which gives the surrounding
+   * screen transition a chance to start before the action's side effects
+   * (navigation, network, etc.) kick in. Set `false` to keep the dialog
+   * mounted (e.g. while an async confirmation is in flight).
+   */
+  shouldCloseOnPress?: boolean;
+  testID?: string;
+};
+
+/**
+ * Props accepted by the unified `<Dialog>` component.
+ *
+ * Three usage modes — pick whichever fits the call site:
+ *
+ *   1. **Declarative (`title` / `description` / `actions`).** Most common
+ *      confirm/cancel surface. Bloom renders the title, description and
+ *      action row for you.
+ *
+ *   2. **Custom children.** Pass any JSX as `children` and bloom renders it
+ *      verbatim inside the dialog frame. Combine with `title` to keep the
+ *      header consistent.
+ *
+ *   3. **Imperative `alert()`.** Bypass the JSX layer entirely — see the
+ *      module-level `alert()` helper.
+ */
+export type DialogProps = React.PropsWithChildren<{
   control: DialogControlProps;
+  /** Fires after the dialog has finished closing. */
   onClose?: () => void;
   testID?: string;
-  webOptions?: {
-    alignCenter?: boolean;
-  };
+  /** Optional dialog header text. Rendered above `description` / `children`. */
+  title?: string;
+  /** Optional supporting copy, rendered below the title. */
+  description?: string;
   /**
-   * @deprecated No-op since 0.3.12. Bloom's BottomSheet sizes to its content by
-   * default (capped by safe-area `maxHeight`), so dialogs no longer expand to
-   * fill the screen and a manual lock is unnecessary.
+   * Optional action row. When provided, bloom renders the appropriate
+   * confirm/cancel/destructive buttons for you. Order is preserved.
+   */
+  actions?: DialogAction[];
+  /**
+   * Style overrides applied to the inner content container on native (the
+   * floating bottom-sheet card) and to the modal panel on web.
    */
-  preventExpansion?: boolean;
-};
-
-export type DialogInnerProps = React.PropsWithChildren<{
   style?: StyleProp<ViewStyle>;
+  /** Accessibility label, applied to the dialog role on web. */
   label?: string;
-  header?: React.ReactNode;
-  contentContainerStyle?: StyleProp<ViewStyle>;
-  keyboardDismissMode?: ScrollViewProps['keyboardDismissMode'];
 }>;
+
+/**
+ * Web-only options. Native uses bloom's `BottomSheet` underneath which has
+ * its own positioning model.
+ */
+export type DialogWebOptions = {
+  alignCenter?: boolean;
+};

package/src/fonts/FontLoader.tsx

@@ -1,10 +1,11 @@
 import React, { useRef } from 'react';
 // Reach for the web variant explicitly. The default `./apply-font-faces`
-// is a no-op stub that exists so Metro never sees the module-level
-// `.woff2` imports on native (Metro's default `assetExts` does not include
-// `.woff2`). This file (`FontLoader.tsx`) is only picked up by web
-// bundlers — Metro selects `FontLoader.native.tsx` on iOS/Android — so it
-// is safe to take a direct dependency on the web implementation here.
+// is a no-op stub on native — native loads its fonts via
+// `useFonts(FONT_ASSETS)` in `FontLoader.native.tsx` and has no use for
+// CSS `@font-face` injection. This file (`FontLoader.tsx`) is only picked
+// up by web bundlers — Metro selects `FontLoader.native.tsx` on iOS/Android
+// — so it is safe to take a direct dependency on the web implementation
+// here.
 import { applyFontFaces } from './apply-font-faces.web';
 
 export interface FontLoaderProps {

package/src/fonts/apply-font-faces.ts

@@ -2,10 +2,10 @@
 // is selected by bundlers via the package.json conditions. RN consumers
 // never need font-face injection — useFonts handles loading on native.
 //
-// This file MUST have zero `.woff2` imports. Metro parses module-level
-// imports at bundle time and would otherwise fail to resolve the `.woff2`
-// assets (not in Metro's default `assetExts`). See
-// `apply-font-faces.web.ts` for the real implementation.
+// The web variant does NOT pull in any `.woff2` files via asset imports —
+// it imports base64 data URLs from `font-data.web.ts`. This stub stays
+// here so the file split (`*.ts` vs `*.web.ts`) makes the platform
+// intent explicit and so the runtime API surface matches across platforms.
 export function applyFontFaces(): void {
   // intentionally empty
 }

package/src/fonts/apply-font-faces.web.ts

@@ -1,8 +1,9 @@
-/// <reference path="../assets.d.ts" />
-import blomusReg from './assets/BlomusModernus-Regular.woff2';
-import blomusBold from './assets/BlomusModernus-Bold.woff2';
-import interVar from './assets/InterVariable.woff2';
-import geistMono from './assets/GeistMono-Variable.woff2';
+import {
+  blomusModernusRegular,
+  blomusModernusBold,
+  interVariable,
+  geistMonoVariable,
+} from './font-data.web';
 import { fontFamilies } from './tokens';
 
 const STYLE_ID = 'bloom-fonts';
@@ -12,10 +13,17 @@ const STYLE_ID = 'bloom-fonts';
  *
  * Web-only. The native counterpart in `apply-font-faces.ts` is a no-op
  * stub — Metro cannot parse `.woff2` imports, so the file split keeps
- * those imports out of the native bundle entirely. Idempotent: safe to
+ * the font payload out of the native bundle entirely. Idempotent: safe to
  * call multiple times; subsequent calls early-return after the
  * `<style id="bloom-fonts">` tag has been mounted. SSR-safe via the
  * `typeof document === 'undefined'` guard.
+ *
+ * The font URLs come from `./font-data.web`, a generated module that
+ * embeds the woff2 bytes as base64 data URLs. Inlining (rather than
+ * relying on bundler asset loaders for `.woff2`) means consumers do not
+ * have to extend Metro's `assetExts` or add a webpack/Vite asset rule —
+ * the published JS is self-contained. See `scripts/generate-font-data.mjs`
+ * for the rationale and trade-offs.
  */
 export function applyFontFaces(): void {
   if (typeof document === 'undefined') return;
@@ -24,10 +32,10 @@ export function applyFontFaces(): void {
   const style = document.createElement('style');
   style.id = STYLE_ID;
   style.textContent = `
-    @font-face { font-family: 'BlomusModernus'; src: url(${blomusReg}) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
-    @font-face { font-family: 'BlomusModernus'; src: url(${blomusBold}) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
-    @font-face { font-family: 'Inter'; src: url(${interVar}) format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
-    @font-face { font-family: 'Geist Mono'; src: url(${geistMono}) format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
+    @font-face { font-family: 'BlomusModernus'; src: url(${blomusModernusRegular}) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
+    @font-face { font-family: 'BlomusModernus'; src: url(${blomusModernusBold}) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
+    @font-face { font-family: 'Inter'; src: url(${interVariable}) format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
+    @font-face { font-family: 'Geist Mono'; src: url(${geistMonoVariable}) format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
     :root {
       --bloom-font-display: ${fontFamilies.display};
       --bloom-font-sans: ${fontFamilies.sans};

package/src/fonts/font-assets.ts

@@ -5,8 +5,8 @@
 // covers all weights at runtime. `@fontsource(-variable)?/*` packages only
 // publish .woff2 for their variable axes — modern react-native font loading
 // requires .ttf, so we use the upstream variable TTFs instead. On web,
-// `apply-font-faces.web.ts` references the .woff2 variants directly and this
-// file is never imported.
+// `apply-font-faces.web.ts` inlines the .woff2 variants as base64 data URLs
+// (see `font-data.web.ts`) and this file is never imported.
 
 export const FONT_ASSETS = {
   BlomusModernus: require('./assets/BlomusModernus-Regular.ttf'),