@oxyhq/bloom 0.16.0 → 0.16.2

package/lib/typescript/module/dialog/Dialog.web.d.ts

@@ -4,9 +4,10 @@ import type { DialogAction, DialogProps } from './types';
  * Web variant of `<Dialog>`.
  *
  * A centered modal card (default) rendered into the bloom Portal at the end of
- * `document.body`, or — when `placement` is `left`/`right`/`bottom` — an
- * anchored side-sheet or bottom-sheet. Same prop API as native, so call sites
- * are platform agnostic.
+ * `document.body`, an anchored side-sheet for `left`/`right`, or — for
+ * `bottom` — bloom's cross-platform `BottomSheet` (the SAME component native
+ * uses), so the bottom placement drags-to-dismiss on web too. Same prop API as
+ * native, so call sites are platform agnostic.
  *
  * Open/close is driven by EITHER the imperative `control` (legacy) OR the
  * controlled `open` prop. When `open` is provided it wins.
@@ -18,10 +19,11 @@ import type { DialogAction, DialogProps } from './types';
  *
  * Web motion never uses reanimated `exiting` (which throws `removeChild` on
  * concurrent React unmounts): the centered card uses CSS keyframes and the
- * side/bottom modes use self-contained CSS transitions on a
- * mounted-through-exit node.
+ * side modes use self-contained CSS transitions on a mounted-through-exit
+ * node. The bottom placement animates via `BottomSheet`'s shared-value/gesture
+ * animation (no `exiting` layout animation).
  */
-export declare function Dialog({ control, open: controlledOpen, onClose, testID, title, description, actions, placement, width, maxWidth, maxHeightRatio, inset, showHandle, dismissOnBackdrop, style, panelStyle, panelClassName, containerStyle, containerClassName, label, children, }: DialogProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Dialog({ placement, ...rest }: DialogProps): import("react/jsx-runtime").JSX.Element;
 export { DIALOG_SHEET_BACKDROP_TESTID };
 /**
  * Inline imperative dialog used by `alert()`. Mounts and immediately
@@ -45,8 +47,9 @@ export declare function AutoMountedDialog({ title, description, actions, onResol
  * @keyframes bloomDialogZoomFadeOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.95); } }
  * ```
  *
- * The `left`/`right`/`bottom` placements do NOT depend on this — they animate
- * via self-contained inline CSS transitions and need no keyframe injection.
+ * The `left`/`right` placements do NOT depend on this — they animate via
+ * self-contained inline CSS transitions and need no keyframe injection. The
+ * `bottom` placement uses bloom's `BottomSheet` (reanimated) and needs none.
  */
 export declare const BLOOM_DIALOG_CSS = "\n@keyframes bloomDialogFadeIn { from { opacity: 0; } to { opacity: 1; } }\n@keyframes bloomDialogFadeOut { from { opacity: 1; } to { opacity: 0; } }\n@keyframes bloomDialogZoomFadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }\n@keyframes bloomDialogZoomFadeOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.95); } }\n";
 //# sourceMappingURL=Dialog.web.d.ts.map

package/lib/typescript/module/dialog/Dialog.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.web.d.ts","sourceRoot":"","sources":["../../../../src/dialog/Dialog.web.tsx"],"names":[],"mappings":"AA2BA,OAAO,EAML,4BAA4B,EAU7B,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EACV,YAAY,EAIZ,WAAW,EACZ,MAAM,SAAS,CAAC;AASjB;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,IAAI,EAAE,cAAc,EACpB,OAAO,EACP,MAAM,EACN,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAS,EACT,KAA0B,EAC1B,QAAmC,EACnC,cAAyC,EACzC,KAAK,EACL,UAAiB,EACjB,iBAAwB,EACxB,KAAK,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,KAAK,EACL,QAAQ,GACT,EAAE,WAAW,kDA6Lb;AAkID,OAAO,EAAE,4BAA4B,EAAE,CAAC;AAyTxC;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAS,GACV,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB,2CAgBA;AA4CD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,gBAAgB,mZAK5B,CAAC"}
+{"version":3,"file":"Dialog.web.d.ts","sourceRoot":"","sources":["../../../../src/dialog/Dialog.web.tsx"],"names":[],"mappings":"AAyBA,OAAO,EAML,4BAA4B,EAM7B,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EACV,YAAY,EAGZ,WAAW,EACZ,MAAM,SAAS,CAAC;AASjB;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,2CAazD;AAoSD,OAAO,EAAE,4BAA4B,EAAE,CAAC;AAqNxC;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAS,GACV,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB,2CAgBA;AA6BD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,gBAAgB,mZAK5B,CAAC"}

package/lib/typescript/module/dialog/DialogBottomSheet.d.ts

@@ -0,0 +1,29 @@
+import type { DialogProps } from './types';
+/**
+ * Shared `BottomSheet`-backed surface for the `bottom` placement, used by BOTH
+ * `Dialog.tsx` (native) and `Dialog.web.tsx` (web). `BottomSheet` is itself a
+ * single cross-platform implementation (react-native-gesture-handler +
+ * reanimated, drag-to-dismiss on web and native alike), so routing the bottom
+ * placement through here gives ONE code path with drag working everywhere — no
+ * duplicated CSS slide-up sheet.
+ *
+ * This component owns the entire open↔present/dismiss bridge and the Dialog →
+ * BottomSheet prop mapping in one place:
+ *
+ *   - `open` (controlled) / `control` (imperative) → `present()` / `dismiss()`
+ *   - `onClose`                                     → fired once the sheet settles
+ *   - `maxHeightRatio`                              → sheet `maxHeight`
+ *   - `showHandle` / `dismissOnBackdrop` / `label`  → forwarded to the surface
+ *   - `panelStyle`                                  → paints the sheet surface
+ *   - `containerStyle`                              → wraps the content subtree
+ *     so a host's CSS-var theme scope (`vars()`) still applies to descendants
+ *   - `title` / `description` / `actions` / `children` → declarative body
+ */
+export declare function DialogBottomSheet({ control, open: controlledOpen, onClose, testID, title, description, actions, maxHeightRatio, showHandle, dismissOnBackdrop, contentPadding, style, panelStyle, panelClassName, containerStyle, containerClassName, label, children, }: DialogBottomSheetProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Props the shared bottom-sheet surface consumes — the `bottom`-relevant subset
+ * of `DialogProps`. `width`, `maxWidth`, and `inset` are placement-specific to
+ * the side/centered surfaces and intentionally excluded.
+ */
+export type DialogBottomSheetProps = Pick<DialogProps, 'control' | 'open' | 'onClose' | 'testID' | 'title' | 'description' | 'actions' | 'maxHeightRatio' | 'showHandle' | 'dismissOnBackdrop' | 'contentPadding' | 'style' | 'panelStyle' | 'panelClassName' | 'containerStyle' | 'containerClassName' | 'label' | 'children'>;
+//# sourceMappingURL=DialogBottomSheet.d.ts.map

package/lib/typescript/module/dialog/DialogBottomSheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogBottomSheet.d.ts","sourceRoot":"","sources":["../../../../src/dialog/DialogBottomSheet.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAsB,WAAW,EAAE,MAAM,SAAS,CAAC;AAE/D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,IAAI,EAAE,cAAc,EACpB,OAAO,EACP,MAAM,EACN,KAAK,EACL,WAAW,EACX,OAAO,EACP,cAAyC,EACzC,UAAiB,EACjB,iBAAwB,EACxB,cAA+C,EAC/C,KAAK,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,KAAK,EACL,QAAQ,GACT,EAAE,sBAAsB,2CAiKxB;AAED;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,WAAW,EACT,SAAS,GACT,MAAM,GACN,SAAS,GACT,QAAQ,GACR,OAAO,GACP,aAAa,GACb,SAAS,GACT,gBAAgB,GAChB,YAAY,GACZ,mBAAmB,GACnB,gBAAgB,GAChB,OAAO,GACP,YAAY,GACZ,gBAAgB,GAChB,gBAAgB,GAChB,oBAAoB,GACpB,OAAO,GACP,UAAU,CACb,CAAC"}

package/lib/typescript/module/dialog/DialogContent.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { ThemeColors } from '../theme/types';
+import type { DialogAction, DialogActionColor } from './types';
+/**
+ * Shared dialog content primitives used by every `<Dialog>` placement on both
+ * platforms — the centered panel, the side-sheets, and the `BottomSheet`-backed
+ * bottom placement. Keeping them here is the single source of truth for the
+ * declarative `title` / `description` / `actions` chrome, so the surfaces never
+ * drift in spacing, typography, or action-button behaviour.
+ */
+/**
+ * Renders the dialog's body: optional declarative title + description, any
+ * `children`, then the action row. The `titleId`/`descriptionId` are wired by
+ * the caller onto the dialog role element for `aria-labelledby` /
+ * `aria-describedby`.
+ */
+export declare function DialogBody({ titleId, descriptionId, title, description, actions, children, }: {
+    titleId: string;
+    descriptionId: string;
+    title?: string;
+    description?: string;
+    actions?: DialogAction[];
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ActionRow({ actions }: {
+    actions: DialogAction[];
+}): import("react/jsx-runtime").JSX.Element;
+export declare function getActionPalette(color: DialogActionColor, colors: ThemeColors): {
+    background: string;
+    foreground: string;
+};
+//# sourceMappingURL=DialogContent.d.ts.map

package/lib/typescript/module/dialog/DialogContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogContent.d.ts","sourceRoot":"","sources":["../../../../src/dialog/DialogContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAQ3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGlD,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE/D;;;;;;GAMG;AAEH;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,aAAa,EACb,KAAK,EACL,WAAW,EACX,OAAO,EACP,QAAQ,GACT,EAAE;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,2CAmCA;AAED,wBAAgB,SAAS,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,YAAY,EAAE,CAAA;CAAE,2CAQjE;AAkDD,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,iBAAiB,EACxB,MAAM,EAAE,WAAW,GAClB;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE,CAiB5C"}

package/lib/typescript/module/dialog/placement.d.ts

@@ -40,6 +40,16 @@ export declare const DEFAULT_CENTER_MAX_WIDTH = 480;
 export declare const DEFAULT_MAX_HEIGHT_RATIO = 0.9;
 /** Corner radius shared by the side-sheet panel and the bottom-sheet top. */
 export declare const PANEL_RADIUS = 20;
+/**
+ * Default inner padding (px) of the dialog content container, applied uniformly
+ * across every placement (centered panel, side-sheet body, bottom-sheet body)
+ * so the chrome reads identically regardless of which surface resolves. This is
+ * the legacy value — omitting the `contentPadding` prop keeps 20px everywhere,
+ * byte-for-byte unchanged. A host that owns its own insets (e.g. custom
+ * `children` that already manage padding) can override it via
+ * `Dialog`'s `contentPadding` prop (e.g. `contentPadding={0}`).
+ */
+export declare const DEFAULT_DIALOG_CONTENT_PADDING = 20;
 /** Open/close transition duration (ms). ~280ms ease-out reads smooth. */
 export declare const ANIMATION_DURATION = 280;
 /** Centered-card fade-out duration (ms) — preserves the legacy timing. */

package/lib/typescript/module/dialog/placement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"placement.d.ts","sourceRoot":"","sources":["../../../../src/dialog/placement.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAErE;;;;;;;;;GASG;AACH,MAAM,MAAM,yBAAyB,GACjC,eAAe,GACf;IACE,IAAI,EAAE,eAAe,CAAC;IACtB,EAAE,CAAC,EAAE,eAAe,CAAC;IACrB,EAAE,CAAC,EAAE,eAAe,CAAC;IACrB,EAAE,CAAC,EAAE,eAAe,CAAC;IACrB,EAAE,CAAC,EAAE,eAAe,CAAC;CACtB,CAAC;AAEN;;;;GAIG;AACH,eAAO,MAAM,aAAa,MAAM,CAAC;AACjC,eAAO,MAAM,aAAa,MAAM,CAAC;AACjC,eAAO,MAAM,aAAa,OAAO,CAAC;AAClC,eAAO,MAAM,aAAa,OAAO,CAAC;AAUlC,qDAAqD;AACrD,eAAO,MAAM,kBAAkB,MAAM,CAAC;AAEtC,gFAAgF;AAChF,eAAO,MAAM,wBAAwB,MAAM,CAAC;AAE5C,4EAA4E;AAC5E,eAAO,MAAM,wBAAwB,MAAM,CAAC;AAE5C,6EAA6E;AAC7E,eAAO,MAAM,YAAY,KAAK,CAAC;AAE/B,yEAAyE;AACzE,eAAO,MAAM,kBAAkB,MAAM,CAAC;AAEtC,0EAA0E;AAC1E,eAAO,MAAM,wBAAwB,MAAM,CAAC;AAE5C,oEAAoE;AACpE,eAAO,MAAM,QAAQ,mCAAmC,CAAC;AAEzD,qEAAqE;AACrE,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C,+EAA+E;AAC/E,eAAO,MAAM,4BAA4B,gCAAgC,CAAC;AAE1E,sDAAsD;AACtD,eAAO,MAAM,YAAY,KAAK,CAAC;AAC/B,eAAO,MAAM,aAAa,IAAI,CAAC;AAC/B,eAAO,MAAM,aAAa,IAAI,CAAC;AAE/B;;;GAGG;AACH,eAAO,MAAM,qBAAqB,KAAK,CAAC;AAExC;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAClC,SAAS,EAAE,yBAAyB,GAAG,SAAS,GAC/C,eAAe,CAcjB"}
+{"version":3,"file":"placement.d.ts","sourceRoot":"","sources":["../../../../src/dialog/placement.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAErE;;;;;;;;;GASG;AACH,MAAM,MAAM,yBAAyB,GACjC,eAAe,GACf;IACE,IAAI,EAAE,eAAe,CAAC;IACtB,EAAE,CAAC,EAAE,eAAe,CAAC;IACrB,EAAE,CAAC,EAAE,eAAe,CAAC;IACrB,EAAE,CAAC,EAAE,eAAe,CAAC;IACrB,EAAE,CAAC,EAAE,eAAe,CAAC;CACtB,CAAC;AAEN;;;;GAIG;AACH,eAAO,MAAM,aAAa,MAAM,CAAC;AACjC,eAAO,MAAM,aAAa,MAAM,CAAC;AACjC,eAAO,MAAM,aAAa,OAAO,CAAC;AAClC,eAAO,MAAM,aAAa,OAAO,CAAC;AAUlC,qDAAqD;AACrD,eAAO,MAAM,kBAAkB,MAAM,CAAC;AAEtC,gFAAgF;AAChF,eAAO,MAAM,wBAAwB,MAAM,CAAC;AAE5C,4EAA4E;AAC5E,eAAO,MAAM,wBAAwB,MAAM,CAAC;AAE5C,6EAA6E;AAC7E,eAAO,MAAM,YAAY,KAAK,CAAC;AAE/B;;;;;;;;GAQG;AACH,eAAO,MAAM,8BAA8B,KAAK,CAAC;AAEjD,yEAAyE;AACzE,eAAO,MAAM,kBAAkB,MAAM,CAAC;AAEtC,0EAA0E;AAC1E,eAAO,MAAM,wBAAwB,MAAM,CAAC;AAE5C,oEAAoE;AACpE,eAAO,MAAM,QAAQ,mCAAmC,CAAC;AAEzD,qEAAqE;AACrE,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C,+EAA+E;AAC/E,eAAO,MAAM,4BAA4B,gCAAgC,CAAC;AAE1E,sDAAsD;AACtD,eAAO,MAAM,YAAY,KAAK,CAAC;AAC/B,eAAO,MAAM,aAAa,IAAI,CAAC;AAC/B,eAAO,MAAM,aAAa,IAAI,CAAC;AAE/B;;;GAGG;AACH,eAAO,MAAM,qBAAqB,KAAK,CAAC;AAExC;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAClC,SAAS,EAAE,yBAAyB,GAAG,SAAS,GAC/C,eAAe,CAcjB"}

package/lib/typescript/module/dialog/types.d.ts

@@ -125,6 +125,18 @@ export type DialogProps = React.PropsWithChildren<{
     inset?: DialogInset;
     /** Whether to render the drag handle in bottom-sheet mode. Defaults to `true`. */
     showHandle?: boolean;
+    /**
+     * Inner padding (px) of the dialog content container, applied uniformly across
+     * every placement (centered panel, side-sheet body, bottom-sheet body).
+     * Defaults to `20`.
+     *
+     * The default chrome padding is correct for the declarative
+     * `title`/`description`/`actions` layout, but a host passing pure custom
+     * `children` that already own their insets can set `contentPadding={0}` to
+     * render flush content and manage padding itself. Omitting the prop keeps the
+     * 20px default on every surface.
+     */
+    contentPadding?: number;
     /** Whether tapping the backdrop dismisses the dialog. Defaults to `true`. */
     dismissOnBackdrop?: boolean;
     /**

package/lib/typescript/module/dialog/types.d.ts.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.16.0",
+  "version": "0.16.2",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",

package/src/__tests__/BottomSheetGesture.test.tsx

@@ -0,0 +1,135 @@
+import React, { createRef } from 'react';
+import { Text } from 'react-native';
+import { act, render } from '@testing-library/react-native';
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import BottomSheet, { type BottomSheetRef } from '../bottom-sheet';
+
+/**
+ * Pan-to-dismiss is the whole point of routing the Dialog `bottom` placement
+ * through `BottomSheet` on BOTH platforms. These tests assert the pan gesture
+ * is actually wired (an `onEnd` worklet is registered) and that the
+ * dismiss-threshold logic inside it runs end-to-end — i.e. a fast/far downward
+ * swipe commits the close and fires `onDismiss`, while a small drag springs the
+ * sheet back without dismissing.
+ *
+ * This file overrides the default gesture-handler mock (which discards the
+ * registered callbacks) with a RECORDING mock that captures the pan gesture's
+ * handlers. Invoking the captured `onEnd` exercises the real threshold math
+ * from `bottom-sheet/index.tsx` — there is no `Platform.OS` gating around the
+ * `<GestureDetector>` or the pan builder, so this is the SAME code path web
+ * runs (drag-to-dismiss is active on web).
+ */
+
+interface PanEndEvent {
+  velocityY: number;
+  translationY: number;
+}
+
+interface RecordedGesture {
+  onEnd?: (event: PanEndEvent) => void;
+  onUpdate?: (event: { translationY: number }) => void;
+}
+
+// Recorded `Gesture.Pan()` instances from the most recent render. Must be
+// `mock`-prefixed so the hoisted `jest.mock` factory may reference it.
+const mockPanGestures: RecordedGesture[] = [];
+
+jest.mock('react-native-gesture-handler', () => {
+  const builder = (record?: RecordedGesture) => {
+    const self = {
+      enabled: () => self,
+      simultaneousWithExternalGesture: () => self,
+      withRef: () => self,
+      manualActivation: () => self,
+      activeOffsetY: () => self,
+      activeOffsetX: () => self,
+      onStart: () => self,
+      onUpdate: (fn: RecordedGesture['onUpdate']) => {
+        if (record) record.onUpdate = fn;
+        return self;
+      },
+      onEnd: (fn: RecordedGesture['onEnd']) => {
+        if (record) record.onEnd = fn;
+        return self;
+      },
+      onTouchesDown: () => self,
+      onTouchesMove: () => self,
+      onTouchesUp: () => self,
+      onTouchesCancelled: () => self,
+    };
+    return self;
+  };
+
+  return {
+    Gesture: {
+      Pan: () => {
+        const record: RecordedGesture = {};
+        mockPanGestures.push(record);
+        return builder(record);
+      },
+      Native: () => builder(),
+    },
+    GestureDetector: ({ children }: { children: React.ReactNode }) => children,
+    GestureHandlerRootView: ({ children }: { children: React.ReactNode }) => children,
+  };
+});
+
+function renderSheet(onDismiss: () => void) {
+  const ref = createRef<BottomSheetRef>();
+  const utils = render(
+    <BloomThemeProvider mode="light" colorPreset="teal">
+      <BottomSheet ref={ref} onDismiss={onDismiss}>
+        <Text>Body</Text>
+      </BottomSheet>
+    </BloomThemeProvider>,
+  );
+  // Present so the sheet mounts and the pan gesture is constructed.
+  act(() => {
+    ref.current?.present();
+  });
+  return utils;
+}
+
+describe('BottomSheet pan-to-dismiss gesture', () => {
+  beforeEach(() => {
+    mockPanGestures.length = 0;
+  });
+
+  it('wires a pan gesture with an onEnd handler (drag is active, not web-gated)', () => {
+    renderSheet(() => {});
+    // A pan gesture must have been constructed with an onEnd worklet — proof the
+    // drag pipeline is built unconditionally (the source has no
+    // `Platform.OS !== 'web'` guard around the GestureDetector or pan builder).
+    expect(mockPanGestures.length).toBeGreaterThan(0);
+    const bodyPan = mockPanGestures.find((g) => typeof g.onEnd === 'function');
+    expect(bodyPan).toBeDefined();
+    expect(typeof bodyPan?.onEnd).toBe('function');
+  });
+
+  it('dismisses when a fast downward swipe crosses the close threshold', () => {
+    const onDismiss = jest.fn();
+    renderSheet(onDismiss);
+    const bodyPan = mockPanGestures.find((g) => typeof g.onEnd === 'function');
+
+    // A high downward velocity is past `fastSwipeThreshold` (900) → the onEnd
+    // worklet commits the close, which (under the reanimated mock that runs
+    // withTiming callbacks synchronously) drains through to `onDismiss`.
+    act(() => {
+      bodyPan?.onEnd?.({ velocityY: 1500, translationY: 50 });
+    });
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not dismiss on a small, slow drag below the threshold', () => {
+    const onDismiss = jest.fn();
+    renderSheet(onDismiss);
+    const bodyPan = mockPanGestures.find((g) => typeof g.onEnd === 'function');
+
+    // Tiny translation + near-zero velocity → springs back, no close.
+    act(() => {
+      bodyPan?.onEnd?.({ velocityY: 10, translationY: 12 });
+    });
+    expect(onDismiss).not.toHaveBeenCalled();
+  });
+});

package/src/__tests__/DialogBottomSheet.test.tsx

@@ -0,0 +1,259 @@
+import React, { createRef } from 'react';
+import { Text, type View } from 'react-native';
+import { act, fireEvent, render } from '@testing-library/react-native';
+
+import { Dialog, useDialogControl } from '../dialog';
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+
+/**
+ * Minimal shape of a `react-test-renderer` JSON node — enough to walk the tree
+ * by host `type` string without depending on `@types/react-test-renderer`.
+ */
+type RenderedNode = {
+  type: string;
+  children: Array<RenderedNode | string> | null;
+};
+
+/** Count host nodes of a given `type` in a rendered `toJSON()` tree. */
+function countNodesByType(
+  tree: RenderedNode | RenderedNode[] | null,
+  type: string,
+): number {
+  if (tree === null) return 0;
+  const roots = Array.isArray(tree) ? tree : [tree];
+  let count = 0;
+  for (const node of roots) {
+    if (node.type === type) count += 1;
+    if (node.children) {
+      for (const child of node.children) {
+        if (typeof child !== 'string') count += countNodesByType(child, type);
+      }
+    }
+  }
+  return count;
+}
+
+/**
+ * The Dialog `bottom` placement must delegate to the shared cross-platform
+ * `BottomSheet` (via `DialogBottomSheet`) — the SAME surface native and web use
+ * — instead of a bespoke CSS slide-up sheet. These tests pin that delegation:
+ * the declarative content renders through the sheet, the close lifecycle bridges
+ * `open`/`onClose` correctly, and brand theming (`panelStyle` surface paint +
+ * `containerStyle` theme scope) threads through to the sheet surface.
+ *
+ * The jest environment resolves `../dialog` to the native barrel (`Dialog.tsx`),
+ * which routes `bottom` through `DialogBottomSheet` → `BottomSheet`. The web
+ * fork (`Dialog.web.tsx`) routes through the EXACT same `DialogBottomSheet`, so
+ * this delegation is one shared code path across platforms.
+ */
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(
+    <BloomThemeProvider mode="light" colorPreset="teal">
+      {ui}
+    </BloomThemeProvider>,
+  );
+}
+
+function Harness({
+  children,
+}: {
+  children: (control: ReturnType<typeof useDialogControl>) => React.ReactNode;
+}) {
+  const control = useDialogControl();
+  return <>{children(control)}</>;
+}
+
+describe('Dialog bottom placement delegates to BottomSheet', () => {
+  it('does not render bottom-sheet content until opened', () => {
+    const { queryByText } = renderWithTheme(
+      <Harness>
+        {(control) => (
+          <Dialog control={control} placement="bottom" title="Sheet title">
+            <Text>Sheet body</Text>
+          </Dialog>
+        )}
+      </Harness>,
+    );
+    // BottomSheet keeps its subtree unmounted until present() — proof the bottom
+    // placement is the sheet, not an always-mounted CSS panel.
+    expect(queryByText('Sheet title')).toBeNull();
+    expect(queryByText('Sheet body')).toBeNull();
+  });
+
+  it('renders declarative title + description + actions through the sheet when opened', () => {
+    let control: ReturnType<typeof useDialogControl> | undefined;
+    const { getByText } = renderWithTheme(
+      <Harness>
+        {(c) => {
+          control = c;
+          return (
+            <Dialog
+              control={c}
+              placement="bottom"
+              title="Delete item?"
+              description="This cannot be undone."
+              actions={[{ label: 'Delete', color: 'destructive' }, { label: 'Cancel', color: 'cancel' }]}
+            />
+          );
+        }}
+      </Harness>,
+    );
+    act(() => {
+      control?.open();
+    });
+    expect(getByText('Delete item?')).toBeTruthy();
+    expect(getByText('This cannot be undone.')).toBeTruthy();
+    expect(getByText('Delete')).toBeTruthy();
+    expect(getByText('Cancel')).toBeTruthy();
+  });
+
+  it('requests close via onClose exactly once on action press in controlled mode (no double-fire)', () => {
+    const onClose = jest.fn();
+    const { getByText } = renderWithTheme(
+      <Dialog open onClose={onClose} placement="bottom" title="Confirm" actions={[{ label: 'Done' }]} />,
+    );
+    act(() => {
+      fireEvent.press(getByText('Done'));
+    });
+    // Controlled mode: the action's close() requests dismissal via onClose once;
+    // the host (not the dialog) then flips `open`. It must not fire the
+    // close-completion onClose a second time.
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('threads panelStyle (brand surface) and containerStyle (theme scope) onto the sheet content', () => {
+    let control: ReturnType<typeof useDialogControl> | undefined;
+    const panelRef = createRef<View>();
+    const { getByTestId } = renderWithTheme(
+      <Harness>
+        {(c) => {
+          control = c;
+          return (
+            <Dialog
+              control={c}
+              placement="bottom"
+              testID="brand-sheet"
+              panelStyle={{ backgroundColor: 'rebeccapurple' }}
+              containerStyle={{ paddingTop: 7 }}
+            >
+              <Text ref={panelRef}>Branded</Text>
+            </Dialog>
+          );
+        }}
+      </Harness>,
+    );
+    act(() => {
+      control?.open();
+    });
+    const content = getByTestId('brand-sheet');
+    const flattened = Array.isArray(content.props.style)
+      ? Object.assign({}, ...content.props.style.filter(Boolean))
+      : content.props.style;
+    // panelStyle paints the surface; containerStyle (theme-var scope) wraps the
+    // content subtree. Both land on the sheet content container.
+    expect(flattened.backgroundColor).toBe('rebeccapurple');
+    expect(flattened.paddingTop).toBe(7);
+  });
+
+  it('applies the default 20px content padding when contentPadding is omitted', () => {
+    let control: ReturnType<typeof useDialogControl> | undefined;
+    const { getByTestId } = renderWithTheme(
+      <Harness>
+        {(c) => {
+          control = c;
+          return (
+            <Dialog control={c} placement="bottom" testID="default-pad">
+              <Text>Body</Text>
+            </Dialog>
+          );
+        }}
+      </Harness>,
+    );
+    act(() => {
+      control?.open();
+    });
+    const content = getByTestId('default-pad');
+    const flattened = Array.isArray(content.props.style)
+      ? Object.assign({}, ...content.props.style.filter(Boolean))
+      : content.props.style;
+    // Omitting `contentPadding` keeps the legacy 20px chrome padding.
+    expect(flattened.padding).toBe(20);
+  });
+
+  it('removes the body padding when contentPadding={0} (host owns its insets)', () => {
+    let control: ReturnType<typeof useDialogControl> | undefined;
+    const { getByTestId } = renderWithTheme(
+      <Harness>
+        {(c) => {
+          control = c;
+          return (
+            <Dialog control={c} placement="bottom" testID="flush-pad" contentPadding={0}>
+              <Text>Flush body</Text>
+            </Dialog>
+          );
+        }}
+      </Harness>,
+    );
+    act(() => {
+      control?.open();
+    });
+    const content = getByTestId('flush-pad');
+    const flattened = Array.isArray(content.props.style)
+      ? Object.assign({}, ...content.props.style.filter(Boolean))
+      : content.props.style;
+    // `contentPadding={0}` yields flush content the host pads itself.
+    expect(flattened.padding).toBe(0);
+  });
+
+  it('does NOT wrap pure custom children in a second scroll container (no scroll-in-scroll)', () => {
+    let control: ReturnType<typeof useDialogControl> | undefined;
+    const result = renderWithTheme(
+      <Harness>
+        {(c) => {
+          control = c;
+          return (
+            <Dialog control={c} placement="bottom">
+              <Text>Custom children own their own scrolling</Text>
+            </Dialog>
+          );
+        }}
+      </Harness>,
+    );
+    act(() => {
+      control?.open();
+    });
+    // Pure custom children → DialogBottomSheet passes `scrollable={false}` to
+    // BottomSheet, so the sheet does NOT add its internal ScrollView. A child
+    // that contains its own scroller is then the ONLY scroll container.
+    const tree: RenderedNode | RenderedNode[] | null = result.toJSON();
+    expect(countNodesByType(tree, 'Animated.ScrollView')).toBe(0);
+  });
+
+  it('keeps the internal scrollable body for declarative dialogs (title/description/actions)', () => {
+    let control: ReturnType<typeof useDialogControl> | undefined;
+    const result = renderWithTheme(
+      <Harness>
+        {(c) => {
+          control = c;
+          return (
+            <Dialog
+              control={c}
+              placement="bottom"
+              title="Confirm"
+              description="Short declarative body."
+              actions={[{ label: 'OK' }]}
+            />
+          );
+        }}
+      </Harness>,
+    );
+    act(() => {
+      control?.open();
+    });
+    // Declarative chrome → the default scrollable body is retained, so a long
+    // title/description list still scrolls gracefully on a small viewport.
+    const tree: RenderedNode | RenderedNode[] | null = result.toJSON();
+    expect(countNodesByType(tree, 'Animated.ScrollView')).toBe(1);
+  });
+});