@oxyhq/bloom 0.3.12 → 0.5.0

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/index.ts

@@ -18,8 +18,22 @@ export { type Props as IconProps, sizes as iconSizes, useCommonSVGProps } from '
 
 // Core components
 export * from './portal';
-export * as Dialog from './dialog';
-export * as Prompt from './prompt';
+export {
+  Dialog,
+  BloomDialogProvider,
+  alert,
+  useDialogContext,
+  useDialogControl,
+} from './dialog';
+export type {
+  AlertButton,
+  AlertButtonStyle,
+  DialogAction,
+  DialogActionColor,
+  DialogContextProps,
+  DialogControlProps,
+  DialogProps,
+} from './dialog';
 export * from './button';
 export * from './grouped-buttons';
 export * from './divider';
@@ -31,7 +45,7 @@ export * from './avatar';
 export * from './loading';
 export * as PromptInput from './prompt-input';
 export * from './switch';
-export * as Toast from './toast';
+export { toast, type Toast } from './toast';
 
 // Typography
 export * as Typography from './typography';

package/src/index.web.ts

@@ -23,8 +23,22 @@ export { type Props as IconProps, sizes as iconSizes, useCommonSVGProps } from '
 
 // Core components
 export * from './portal/index.web';
-export * as Dialog from './dialog/index.web';
-export * as Prompt from './prompt';
+export {
+  Dialog,
+  BloomDialogProvider,
+  alert,
+  useDialogContext,
+  useDialogControl,
+} from './dialog/index.web';
+export type {
+  AlertButton,
+  AlertButtonStyle,
+  DialogAction,
+  DialogActionColor,
+  DialogContextProps,
+  DialogControlProps,
+  DialogProps,
+} from './dialog/index.web';
 export * from './button';
 export * from './grouped-buttons';
 export * from './divider';
@@ -36,7 +50,7 @@ export * from './avatar';
 export * from './loading';
 export * as PromptInput from './prompt-input';
 export * from './switch';
-export * as Toast from './toast/index.web';
+export { toast, type Toast } from './toast/index.web';
 
 // Typography
 export * as Typography from './typography';

package/src/menu/index.tsx

@@ -4,7 +4,9 @@ import { Pressable, StyleSheet, View, type StyleProp, type ViewStyle } from 'rea
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { Button } from '../button';
-import * as Dialog from '../dialog';
+import { useDialogControl } from '../dialog/context';
+import { SheetShell } from '../dialog/SheetShell';
+import type { DialogControlProps } from '../dialog/types';
 import {
   MenuContext,
   ItemContext,
@@ -20,17 +22,17 @@ import type {
   TriggerProps,
 } from './types';
 
-export type { DialogControlProps as MenuControlProps } from '../dialog';
-export { useDialogControl as useMenuControl } from '../dialog';
+export type { DialogControlProps as MenuControlProps } from '../dialog/types';
+export { useDialogControl as useMenuControl } from '../dialog/context';
 export { useMenuContext };
 
 export function Root({
   children,
   control,
 }: React.PropsWithChildren<{
-  control?: Dialog.DialogControlProps;
+  control?: DialogControlProps;
 }>) {
-  const defaultControl = Dialog.useDialogControl();
+  const defaultControl = useDialogControl();
   const context = useMemo<MenuContextType>(
     () => ({
       control: control ?? defaultControl,
@@ -83,20 +85,14 @@ export function Outer({
   const context = useMenuContext();
 
   return (
-    <Dialog.Outer
-      control={context.control}
-      preventExpansion
-    >
-      <Dialog.Handle />
+    <SheetShell control={context.control} label="Menu">
       <MenuContext.Provider value={context}>
-        <Dialog.ScrollableInner label="Menu">
-          <View style={styles.outerContent}>
-            {children}
-            {showCancel && <Cancel />}
-          </View>
-        </Dialog.ScrollableInner>
+        <View style={styles.outerContent}>
+          {children}
+          {showCancel && <Cancel />}
+        </View>
       </MenuContext.Provider>
-    </Dialog.Outer>
+    </SheetShell>
   );
 }
 

package/src/select/index.tsx

@@ -11,7 +11,9 @@ import { FlatList, Pressable, StyleSheet, View } from 'react-native';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { Button } from '../button';
-import * as Dialog from '../dialog';
+import { useDialogContext, useDialogControl } from '../dialog/context';
+import { SheetShell } from '../dialog/SheetShell';
+import type { DialogControlProps } from '../dialog/types';
 import { RadioIndicator } from '../radio-indicator';
 import { useInteractionState } from '../hooks/useInteractionState';
 import {
@@ -37,7 +39,7 @@ export { useItemContext };
 // ---------------------------------------------------------------------------
 
 type SelectContextValue = {
-  control: Dialog.DialogControlProps;
+  control: DialogControlProps;
 } & Pick<RootProps, 'value' | 'onValueChange' | 'disabled'>;
 
 const SelectContext = createContext<SelectContextValue | null>(null);
@@ -61,7 +63,7 @@ function useSelectContext(): SelectContextValue {
 // ---------------------------------------------------------------------------
 
 export function Root({ children, value, onValueChange, disabled }: RootProps) {
-  const control = Dialog.useDialogControl();
+  const control = useDialogControl();
   const valueStoreState = useState<unknown>(undefined);
 
   const ctx = useMemo<SelectContextValue>(
@@ -187,23 +189,21 @@ export function Content<T>({
   }, [items, context.value, valueExtractor, setStoredValue]);
 
   return (
-    <Dialog.Outer control={control}>
-      <ContentInner
-        control={control}
-        items={items}
-        valueExtractor={valueExtractor}
-        {...props}
-        value={context.value}
-        onValueChange={context.onValueChange}
-        disabled={context.disabled}
-      />
-    </Dialog.Outer>
+    <ContentInner
+      control={control}
+      items={items}
+      valueExtractor={valueExtractor}
+      {...props}
+      value={context.value}
+      onValueChange={context.onValueChange}
+      disabled={context.disabled}
+    />
   );
 }
 
 type ContentInnerProps<T> = ContentProps<T> &
   Pick<RootProps, 'value' | 'onValueChange' | 'disabled'> & {
-    control: Dialog.DialogControlProps;
+    control: DialogControlProps;
   };
 
 function ContentInner<T>({
@@ -234,26 +234,26 @@ function ContentInner<T>({
   );
 
   return (
-    <SelectContext.Provider value={ctx}>
-      <Dialog.Handle />
-      <Dialog.Inner
-        label={label}
-        header={
-          <View style={styles.contentHeader}>
-            <Text style={[styles.contentHeaderText, { color: theme.colors.text }]}>
-              {label}
-            </Text>
-          </View>
-        }
-      >
+    <SheetShell
+      control={control}
+      label={label}
+      header={
+        <View style={styles.contentHeader}>
+          <Text style={[styles.contentHeaderText, { color: theme.colors.text }]}>
+            {label}
+          </Text>
+        </View>
+      }
+    >
+      <SelectContext.Provider value={ctx}>
         <FlatList
           data={items}
           renderItem={render}
           keyExtractor={valueExtractor}
           style={styles.flatList}
         />
-      </Dialog.Inner>
-    </SelectContext.Provider>
+      </SelectContext.Provider>
+    </SheetShell>
   );
 }
 
@@ -267,7 +267,7 @@ function ContentInner<T>({
 
 export function Item({ children, value, label, style }: ItemProps) {
   const theme = useTheme();
-  const { close } = Dialog.useDialogContext();
+  const { close } = useDialogContext();
   const { value: selectedValue, onValueChange } = useSelectContext();
   const { state: focused, onIn: onFocus, onOut: onBlur } = useInteractionState();
   const {

package/src/toast/index.tsx

@@ -10,7 +10,7 @@ import {
   Text as ToastText,
   ToastConfigProvider,
 } from './Toast';
-import type { BaseToastOptions } from './types';
+import type { BaseToastOptions, ToastType } from './types';
 
 export { DURATION } from './const';
 export { Action, Icon, Outer, Text, ToastConfigProvider } from './Toast';
@@ -33,21 +33,17 @@ function OuterWrapper({ children }: { children: React.ReactNode }) {
 }
 
 /**
- * Access the full Sonner API
+ * Direct access to the Sonner API. Use sparingly — `toast()` covers the
+ * common case and keeps the surface tied to bloom's themed look.
  */
 export const api = sonner;
 
-/**
- * Show a toast notification.
- *
- * Pass a string for a simple text toast, or a React element for a custom toast.
- */
-export function show(
+function dispatch(
   content: React.ReactNode,
-  { type = 'default', ...options }: BaseToastOptions = {},
-) {
+  type: ToastType,
+  options: BaseToastOptions = {},
+): void {
   const id = nanoid();
-
   if (typeof content === 'string') {
     sonner.custom(
       <ToastConfigProvider id={id} type={type}>
@@ -80,6 +76,54 @@ export function show(
   }
 }
 
+/**
+ * Show a toast notification.
+ *
+ * Pass a string for a simple text toast, or a React element for a custom
+ * toast. The optional `options` argument accepts the standard Sonner
+ * options plus a bloom `type` (defaults to `'default'`).
+ *
+ * ```ts
+ * toast('Saved');
+ * toast.success('Profile updated');
+ * toast.error('Network error', { duration: 5000 });
+ * toast.dismiss(id);
+ * ```
+ *
+ * Pre-typed variants (`toast.success`, `toast.error`, `toast.warning`,
+ * `toast.info`) are aliases for the corresponding `type`.
+ */
+export interface ToastFn {
+  (content: React.ReactNode, options?: BaseToastOptions): void;
+  success: (content: React.ReactNode, options?: Omit<BaseToastOptions, 'type'>) => void;
+  error: (content: React.ReactNode, options?: Omit<BaseToastOptions, 'type'>) => void;
+  warning: (content: React.ReactNode, options?: Omit<BaseToastOptions, 'type'>) => void;
+  info: (content: React.ReactNode, options?: Omit<BaseToastOptions, 'type'>) => void;
+  dismiss: (id?: string | number) => void;
+}
+
+const toastImpl = ((content: React.ReactNode, options: BaseToastOptions = {}) => {
+  dispatch(content, options.type ?? 'default', options);
+}) as ToastFn;
+
+toastImpl.success = (content, options) => dispatch(content, 'success', options ?? {});
+toastImpl.error = (content, options) => dispatch(content, 'error', options ?? {});
+toastImpl.warning = (content, options) => dispatch(content, 'warning', options ?? {});
+toastImpl.info = (content, options) => dispatch(content, 'info', options ?? {});
+toastImpl.dismiss = (id) => sonner.dismiss(id);
+
+export const toast: ToastFn = toastImpl;
+
+/**
+ * Alias of `toast` kept for compatibility with the original 0.4.x surface
+ * where `show()` was the documented entry point. New code should prefer
+ * `toast()` directly.
+ */
+export const show: ToastFn = toastImpl;
+
+/** Re-export the Toast function type so callers can refer to it. */
+export type Toast = ToastFn;
+
 const wrapperStyles = StyleSheet.create({
   container: {
     paddingHorizontal: 20,

package/src/toast/index.web.tsx

@@ -9,7 +9,7 @@ import {
   Text as ToastText,
   ToastConfigProvider,
 } from './Toast';
-import type { BaseToastOptions } from './types';
+import type { BaseToastOptions, ToastType } from './types';
 
 export { DURATION } from './const';
 export { Action, Icon, Outer, Text, ToastConfigProvider } from './Toast';
@@ -30,22 +30,15 @@ export function ToastOutlet() {
   );
 }
 
-/**
- * Access the full Sonner API
- */
+/** Direct access to the underlying Sonner API. Use sparingly. */
 export const api: typeof sonner = sonner;
 
-/**
- * Show a toast notification.
- *
- * Pass a string for a simple text toast, or a React element for a custom toast.
- */
-export function show(
+function dispatch(
   content: React.ReactNode,
-  { type = 'default', ...options }: BaseToastOptions = {},
-) {
+  type: ToastType,
+  options: BaseToastOptions = {},
+): void {
   const id = nanoid();
-
   if (typeof content === 'string') {
     sonner(
       <ToastConfigProvider id={id} type={type}>
@@ -79,3 +72,30 @@ export function show(
     );
   }
 }
+
+/**
+ * Show a toast notification. Identical API to the native variant — see
+ * `./index.tsx` for the full usage docs.
+ */
+export interface ToastFn {
+  (content: React.ReactNode, options?: BaseToastOptions): void;
+  success: (content: React.ReactNode, options?: Omit<BaseToastOptions, 'type'>) => void;
+  error: (content: React.ReactNode, options?: Omit<BaseToastOptions, 'type'>) => void;
+  warning: (content: React.ReactNode, options?: Omit<BaseToastOptions, 'type'>) => void;
+  info: (content: React.ReactNode, options?: Omit<BaseToastOptions, 'type'>) => void;
+  dismiss: (id?: string | number) => void;
+}
+
+const toastImpl = ((content: React.ReactNode, options: BaseToastOptions = {}) => {
+  dispatch(content, options.type ?? 'default', options);
+}) as ToastFn;
+
+toastImpl.success = (content, options) => dispatch(content, 'success', options ?? {});
+toastImpl.error = (content, options) => dispatch(content, 'error', options ?? {});
+toastImpl.warning = (content, options) => dispatch(content, 'warning', options ?? {});
+toastImpl.info = (content, options) => dispatch(content, 'info', options ?? {});
+toastImpl.dismiss = (id) => sonner.dismiss(id);
+
+export const toast: ToastFn = toastImpl;
+export const show: ToastFn = toastImpl;
+export type Toast = ToastFn;