@oxyhq/bloom 0.14.0 → 0.15.0

package/src/dialog/centered-dialog-types.ts

@@ -2,6 +2,10 @@ import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 
 /**
+ * @deprecated Use `<Dialog placement="center">` instead. `CenteredDialog` is
+ * superseded by the centered placement of the canonical `<Dialog>` and is
+ * slated for removal in a future major.
+ *
  * Props for the declarative `<CenteredDialog>` primitive.
  *
  * This is the simple, controlled centered-modal surface — distinct from the

package/src/dialog/index.ts

@@ -1,4 +1,4 @@
-export { Dialog } from './Dialog';
+export { Dialog, DIALOG_SHEET_BACKDROP_TESTID } from './Dialog';
 export { CenteredDialog, CENTERED_DIALOG_BACKDROP_TESTID } from './CenteredDialog';
 export { BloomDialogProvider } from './BloomDialogProvider';
 export { alert } from './alert';
@@ -12,6 +12,9 @@ export type {
   DialogActionColor,
   DialogContextProps,
   DialogControlProps,
+  DialogInset,
+  DialogPlacement,
   DialogProps,
+  ResponsiveDialogPlacement,
 } from './types';
 export type { CenteredDialogProps } from './centered-dialog-types';

package/src/dialog/index.web.ts

@@ -8,7 +8,7 @@
 // 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 above.
-export { Dialog, BLOOM_DIALOG_CSS } from './Dialog.web';
+export { Dialog, BLOOM_DIALOG_CSS, DIALOG_SHEET_BACKDROP_TESTID } from './Dialog.web';
 export {
   CenteredDialog,
   BLOOM_CENTERED_DIALOG_CSS,
@@ -26,6 +26,9 @@ export type {
   DialogActionColor,
   DialogContextProps,
   DialogControlProps,
+  DialogInset,
+  DialogPlacement,
   DialogProps,
+  ResponsiveDialogPlacement,
 } from './types';
 export type { CenteredDialogProps } from './centered-dialog-types';

package/src/dialog/placement.ts

@@ -0,0 +1,113 @@
+import { useMemo } from 'react';
+import { useWindowDimensions } from 'react-native';
+
+/**
+ * Anchor a `<Dialog>` can render against.
+ *
+ * - `'center'` — the default centered modal card (current behavior).
+ * - `'left'` / `'right'` — an anchored side-sheet / drawer.
+ * - `'bottom'` — a bottom-sheet (drag handle, slide-up).
+ */
+export type DialogPlacement = 'center' | 'left' | 'right' | 'bottom';
+
+/**
+ * A `<Dialog>` placement that may vary by viewport width.
+ *
+ * Either a single `DialogPlacement` (applied at every width) or a responsive
+ * map whose `base` applies below the first breakpoint and whose `sm`/`md`/`lg`/
+ * `xl` keys override it at and above the matching Tailwind breakpoint.
+ *
+ * The common store-drawer case is `{ base: 'bottom', md: 'left' }`; the common
+ * dialog-to-sheet case is `{ base: 'bottom', md: 'center' }`.
+ */
+export type ResponsiveDialogPlacement =
+  | DialogPlacement
+  | {
+      base: DialogPlacement;
+      sm?: DialogPlacement;
+      md?: DialogPlacement;
+      lg?: DialogPlacement;
+      xl?: DialogPlacement;
+    };
+
+/**
+ * Tailwind-default breakpoints (px). A responsive `placement` map resolves to
+ * the value for the largest key whose min-width is `<=` the current viewport
+ * width, falling back to `base`.
+ */
+export const BREAKPOINT_SM = 640;
+export const BREAKPOINT_MD = 768;
+export const BREAKPOINT_LG = 1024;
+export const BREAKPOINT_XL = 1280;
+
+/** Ordered breakpoint table, widest first, so the first match wins. */
+const RESPONSIVE_KEYS = [
+  ['xl', BREAKPOINT_XL],
+  ['lg', BREAKPOINT_LG],
+  ['md', BREAKPOINT_MD],
+  ['sm', BREAKPOINT_SM],
+] as const;
+
+/** Default side-sheet width (px) on wide screens. */
+export const DEFAULT_SIDE_WIDTH = 460;
+
+/** Default centered-card max width (px). Matches the legacy `maxWidth: 480`. */
+export const DEFAULT_CENTER_MAX_WIDTH = 480;
+
+/** Default bottom-sheet max height as a fraction of the viewport height. */
+export const DEFAULT_MAX_HEIGHT_RATIO = 0.9;
+
+/** Corner radius shared by the side-sheet panel and the bottom-sheet top. */
+export const PANEL_RADIUS = 20;
+
+/** Open/close transition duration (ms). ~280ms ease-out reads smooth. */
+export const ANIMATION_DURATION = 280;
+
+/** Centered-card fade-out duration (ms) — preserves the legacy timing. */
+export const CENTER_FADE_OUT_DURATION = 150;
+
+/** CSS approximation of reanimated's `Easing.out(Easing.cubic)`. */
+export const EASE_OUT = 'cubic-bezier(0.33, 1, 0.68, 1)';
+
+/** Backdrop dim opacity once fully shown (matches `bg-black/40`). */
+export const SHEET_BACKDROP_OPACITY = 0.4;
+
+/** Stable testID for the dimmed backdrop of a side/bottom placement dialog. */
+export const DIALOG_SHEET_BACKDROP_TESTID = 'bloom-dialog-sheet-backdrop';
+
+/** Drag-handle pill geometry for the bottom-sheet. */
+export const HANDLE_WIDTH = 36;
+export const HANDLE_HEIGHT = 5;
+export const HANDLE_RADIUS = 3;
+
+/**
+ * Minimum gutter kept between a wide side-sheet and the opposite viewport edge
+ * when capping its width, so the panel never spans the full screen.
+ */
+export const SIDE_SHEET_MIN_GUTTER = 24;
+
+/**
+ * Resolve a (possibly responsive) `placement` to a concrete `DialogPlacement`
+ * for the current viewport width.
+ *
+ * A plain string placement resolves to itself. A responsive map picks the
+ * value for the largest breakpoint key whose min-width is `<=` the viewport
+ * width, falling back to `base` below the first breakpoint.
+ */
+export function useResolvedPlacement(
+  placement: ResponsiveDialogPlacement | undefined,
+): DialogPlacement {
+  const { width } = useWindowDimensions();
+
+  return useMemo<DialogPlacement>(() => {
+    if (placement === undefined) return 'center';
+    if (typeof placement === 'string') return placement;
+    for (const [key, minWidth] of RESPONSIVE_KEYS) {
+      if (width >= minWidth) {
+        const value = placement[key];
+        if (value !== undefined) return value;
+      }
+    }
+    return placement.base;
+  }, [placement, width]);
+}

package/src/dialog/types.ts

@@ -1,5 +1,21 @@
 import type { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native';
 
+import type { ResponsiveDialogPlacement } from './placement';
+
+export type { DialogPlacement, ResponsiveDialogPlacement } from './placement';
+
+/**
+ * Side-sheet inset (px) from the root overlay's edges. Lets a host place a
+ * `left`/`right` placement "inside its own shell" — e.g. offset from the top
+ * by a header, or from the anchored edge by a nav rail.
+ */
+export type DialogInset = {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+};
+
 /**
  * Imperative open/close handle returned by `useDialogControl`.
  *
@@ -51,7 +67,14 @@ export type DialogAction = {
 /**
  * Props accepted by the unified `<Dialog>` component.
  *
- * Three usage modes — pick whichever fits the call site:
+ * Open/close is driven by EITHER of two mutually-exclusive modes:
+ *
+ *   - **Imperative `control`** (`useDialogControl()` + `control.open()` /
+ *     `control.close()`). The legacy default; unchanged.
+ *   - **Controlled `open`** (an `open` boolean + `onClose`). When `open` is
+ *     provided it wins and `control` is ignored.
+ *
+ * Rendering modes (orthogonal to open/close mode) — pick whichever fits:
  *
  *   1. **Declarative (`title` / `description` / `actions`).** Most common
  *      confirm/cancel surface. Bloom renders the title, description and
@@ -63,10 +86,26 @@ export type DialogAction = {
  *
  *   3. **Imperative `alert()`.** Bypass the JSX layer entirely — see the
  *      module-level `alert()` helper.
+ *
+ * `placement` controls the surface anchor — centered modal (default), an
+ * anchored side-sheet (`left`/`right`), or a bottom-sheet (`bottom`) — and may
+ * be a responsive map that collapses to a bottom-sheet on narrow viewports.
  */
 export type DialogProps = React.PropsWithChildren<{
-  control: DialogControlProps;
-  /** Fires after the dialog has finished closing. */
+  /**
+   * Imperative open/close handle from `useDialogControl()`. Optional — omit it
+   * when driving the dialog with the controlled `open` prop instead.
+   */
+  control?: DialogControlProps;
+  /**
+   * Controlled open state (opt-in). When provided, the dialog is driven by
+   * this boolean and `onClose`, and `control` is ignored.
+   */
+  open?: boolean;
+  /**
+   * Fires after the dialog has finished closing. In controlled mode it is the
+   * close request the host must answer by flipping `open` to `false`.
+   */
   onClose?: () => void;
   testID?: string;
   /** Optional dialog header text. Rendered above `description` / `children`. */
@@ -78,11 +117,38 @@ export type DialogProps = React.PropsWithChildren<{
    * confirm/cancel/destructive buttons for you. Order is preserved.
    */
   actions?: DialogAction[];
+  /**
+   * Surface anchor. Defaults to `'center'` (the centered modal — current
+   * behavior). `'left'`/`'right'` render an anchored side-sheet, `'bottom'` a
+   * bottom-sheet. A responsive map resolves by viewport width, e.g.
+   * `{ base: 'bottom', md: 'left' }` (drawer on wide, sheet on narrow).
+   */
+  placement?: ResponsiveDialogPlacement;
+  /** Side-sheet width (px) on wide screens. Defaults to `460`. */
+  width?: number;
+  /** Centered-card max width (px). Defaults to `480`. */
+  maxWidth?: number;
+  /** Bottom-sheet max height as a fraction of the viewport height. Defaults to `0.9`. */
+  maxHeightRatio?: number;
+  /** Side-sheet inset (px) from the root overlay's edges. */
+  inset?: DialogInset;
+  /** Whether to render the drag handle in bottom-sheet mode. Defaults to `true`. */
+  showHandle?: boolean;
+  /** Whether tapping the backdrop dismisses the dialog. Defaults to `true`. */
+  dismissOnBackdrop?: boolean;
   /**
    * Style overrides applied to the inner content container on native (the
    * floating bottom-sheet card) and to the modal panel on web.
    */
   style?: StyleProp<ViewStyle>;
+  /** Style overrides for the side/bottom placement panel surface. */
+  panelStyle?: StyleProp<ViewStyle>;
+  /** NativeWind classes for the side/bottom placement panel surface. */
+  panelClassName?: string;
+  /** Style for the root overlay (theme-var scope, rail offset, etc.). */
+  containerStyle?: StyleProp<ViewStyle>;
+  /** NativeWind classes for the root overlay (e.g. `"md:left-[4.75rem]"`). */
+  containerClassName?: string;
   /** Accessibility label, applied to the dialog role on web. */
   label?: string;
 }>;

package/src/index.ts

@@ -20,6 +20,7 @@ export { type Props as IconProps, sizes as iconSizes, useCommonSVGProps } from '
 export * from './portal';
 export {
   Dialog,
+  DIALOG_SHEET_BACKDROP_TESTID,
   CenteredDialog,
   CENTERED_DIALOG_BACKDROP_TESTID,
   BloomDialogProvider,
@@ -35,7 +36,10 @@ export type {
   DialogActionColor,
   DialogContextProps,
   DialogControlProps,
+  DialogInset,
+  DialogPlacement,
   DialogProps,
+  ResponsiveDialogPlacement,
 } from './dialog';
 export * from './button';
 export { Fab } from './fab';

package/src/index.web.ts

@@ -25,6 +25,7 @@ export { type Props as IconProps, sizes as iconSizes, useCommonSVGProps } from '
 export * from './portal/index.web';
 export {
   Dialog,
+  DIALOG_SHEET_BACKDROP_TESTID,
   CenteredDialog,
   CENTERED_DIALOG_BACKDROP_TESTID,
   BloomDialogProvider,
@@ -40,7 +41,10 @@ export type {
   DialogActionColor,
   DialogContextProps,
   DialogControlProps,
+  DialogInset,
+  DialogPlacement,
   DialogProps,
+  ResponsiveDialogPlacement,
 } from './dialog/index.web';
 export * from './button/index.web';
 export { Fab } from './fab/index.web';