@oxyhq/bloom 0.16.0 → 0.16.1

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.16.0",
+  "version": "0.16.1",
   "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,130 @@
+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';
+
+/**
+ * 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);
+  });
+});

package/src/dialog/Dialog.tsx

@@ -10,11 +10,8 @@ import React, {
 import {
   Pressable,
   StyleSheet,
-  Text,
-  TouchableOpacity,
   useWindowDimensions,
   View,
-  type GestureResponderEvent,
   type StyleProp,
   type ViewStyle,
 } from 'react-native';
@@ -29,12 +26,12 @@ import Animated, {
 
 import { BottomSheet, type BottomSheetRef } from '../bottom-sheet';
 import { Z_INDEX } from '../styles/z-index';
-import type { ThemeColors } from '../theme/types';
 import { useTheme } from '../theme/use-theme';
-import { Context, useDialogContext, useDialogControl } from './context';
+import { Context, useDialogControl } from './context';
+import { DialogBody } from './DialogContent';
+import { DialogBottomSheet } from './DialogBottomSheet';
 import {
   ANIMATION_DURATION,
-  DEFAULT_MAX_HEIGHT_RATIO,
   DEFAULT_SIDE_WIDTH,
   DIALOG_SHEET_BACKDROP_TESTID,
   PANEL_RADIUS,
@@ -44,7 +41,6 @@ import {
 } from './placement';
 import type {
   DialogAction,
-  DialogActionColor,
   DialogControlProps,
   DialogInset,
   DialogProps,
@@ -74,6 +70,31 @@ export { DIALOG_SHEET_BACKDROP_TESTID };
  *   3. Pure children — no `title`/`description`/`actions`.
  */
 export function Dialog({
+  placement,
+  ...rest
+}: DialogProps) {
+  const resolvedPlacement = useResolvedPlacement(placement);
+
+  // `bottom` routes to the shared cross-platform `BottomSheet` surface — one
+  // code path with drag-to-dismiss on web and native. `center` (default) and
+  // the side-sheets keep their existing native lifecycle below. Each branch is
+  // its own component so the dispatcher only ever calls `useResolvedPlacement`,
+  // keeping the rules-of-hooks contract intact across a responsive placement
+  // change.
+  if (resolvedPlacement === 'bottom') {
+    return <DialogBottomSheet {...rest} />;
+  }
+  return <CenteredOrSideDialog {...rest} placement={resolvedPlacement} />;
+}
+
+/**
+ * Native `center` and `left`/`right` placements. `center` uses bloom's
+ * `BottomSheet` in `detached` mode (a floating, content-hugging card that
+ * degrades from sheet to centered card via the 500px cap); the side placements
+ * use a reanimated drawer. These share one open/close lifecycle. The `bottom`
+ * placement is handled separately by `DialogBottomSheet`.
+ */
+function CenteredOrSideDialog({
   control,
   open: controlledOpen,
   onClose,
@@ -83,9 +104,7 @@ export function Dialog({
   actions,
   placement,
   width = DEFAULT_SIDE_WIDTH,
-  maxHeightRatio = DEFAULT_MAX_HEIGHT_RATIO,
   inset,
-  showHandle = true,
   dismissOnBackdrop = true,
   style,
   panelStyle,
@@ -94,10 +113,9 @@ export function Dialog({
   containerClassName,
   label,
   children,
-}: DialogProps) {
+}: Omit<DialogProps, 'placement'> & { placement: 'center' | 'left' | 'right' }) {
   const isControlled = controlledOpen !== undefined;
-  const resolvedPlacement = useResolvedPlacement(placement);
-  const isSide = resolvedPlacement === 'left' || resolvedPlacement === 'right';
+  const isSide = placement === 'left' || placement === 'right';
 
   // Imperative open state for the side placement (the BottomSheet path owns its
   // own visibility via its ref instead).
@@ -220,7 +238,7 @@ export function Dialog({
         <SideSheet
           open={sideOpen}
           onDismiss={handleDismiss}
-          side={resolvedPlacement}
+          side={placement}
           width={width}
           inset={inset}
           dismissOnBackdrop={dismissOnBackdrop}
@@ -242,19 +260,17 @@ export function Dialog({
     );
   }
 
-  const isBottom = resolvedPlacement === 'bottom';
-
   return (
     <BottomSheet
       ref={ref}
       onDismiss={handleDismiss}
       enablePanDownToClose
-      detached={!isBottom}
-      showHandle={isBottom ? showHandle : true}
+      detached
+      showHandle
       // Stronger dim when a Dialog is stacked over another sheet so the
       // underlying sheet's handle/content doesn't bleed through.
       backdropOpacity={0.7}
-      style={isBottom ? bottomSheetStyle(theme.colors.background, maxHeightRatio) : sheetStyle}
+      style={sheetStyle}
     >
       <Context.Provider value={context}>
         <View
@@ -280,71 +296,6 @@ export function Dialog({
   );
 }
 
-function bottomSheetStyle(background: string, maxHeightRatio: number): ViewStyle {
-  return {
-    backgroundColor: background,
-    borderTopLeftRadius: PANEL_RADIUS + 4,
-    borderTopRightRadius: PANEL_RADIUS + 4,
-    maxHeight: `${Math.round(maxHeightRatio * 100)}%`,
-  };
-}
-
-/**
- * Renders the dialog's body: optional declarative title + description, any
- * `children`, then the action row. Shared by all placements. The
- * `titleId`/`descriptionId` are wired by the caller for accessibility.
- */
-function DialogBody({
-  titleId,
-  descriptionId,
-  title,
-  description,
-  actions,
-  children,
-}: {
-  titleId: string;
-  descriptionId: string;
-  title?: string;
-  description?: string;
-  actions?: DialogAction[];
-  children?: React.ReactNode;
-}) {
-  const theme = useTheme();
-  return (
-    <>
-      {title ? (
-        <Text
-          nativeID={titleId}
-          style={{
-            fontSize: 22,
-            fontWeight: '600',
-            color: theme.colors.text,
-            paddingBottom: description ? 4 : 16,
-            lineHeight: 30,
-          }}
-        >
-          {title}
-        </Text>
-      ) : null}
-      {description ? (
-        <Text
-          nativeID={descriptionId}
-          style={{
-            fontSize: 16,
-            color: theme.colors.textSecondary,
-            paddingBottom: 16,
-            lineHeight: 22,
-          }}
-        >
-          {description}
-        </Text>
-      ) : null}
-      {children}
-      {actions && actions.length > 0 ? <ActionRow actions={actions} /> : null}
-    </>
-  );
-}
-
 /**
  * Reanimated side-sheet/drawer for the `left`/`right` placements (native).
  *
@@ -516,89 +467,6 @@ function SideSheet({
   );
 }
 
-function ActionRow({ actions }: { actions: DialogAction[] }) {
-  return (
-    <View style={{ width: '100%', gap: 8, justifyContent: 'flex-end' }}>
-      {actions.map((action, idx) => (
-        <ActionButton
-          key={`${action.label}-${idx}`}
-          action={action}
-        />
-      ))}
-    </View>
-  );
-}
-
-function ActionButton({ action }: { action: DialogAction }) {
-  const { close } = useDialogContext();
-  const theme = useTheme();
-  const color: DialogActionColor = action.color ?? 'default';
-  const shouldCloseOnPress = action.shouldCloseOnPress ?? true;
-
-  const { background, foreground } = getActionPalette(color, theme.colors);
-
-  const handlePress = useCallback(
-    (e: GestureResponderEvent) => {
-      const onPress = action.onPress;
-      if (color === 'cancel') {
-        // Cancel always dismisses; consumer's onPress (rare) runs after.
-        close(onPress ? () => onPress(e) : undefined);
-        return;
-      }
-      if (shouldCloseOnPress) {
-        close(onPress ? () => onPress(e) : undefined);
-      } else {
-        onPress?.(e);
-      }
-    },
-    [action.onPress, close, color, shouldCloseOnPress],
-  );
-
-  return (
-    <TouchableOpacity
-      style={{
-        borderRadius: 9999,
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: background,
-        opacity: action.disabled ? 0.5 : 1,
-        paddingVertical: 12,
-        paddingHorizontal: 24,
-      }}
-      onPress={handlePress}
-      disabled={action.disabled}
-      activeOpacity={0.7}
-      testID={action.testID}
-    >
-      <Text style={{ fontSize: 16, fontWeight: '500', color: foreground }}>
-        {action.label}
-      </Text>
-    </TouchableOpacity>
-  );
-}
-
-function getActionPalette(
-  color: DialogActionColor,
-  colors: ThemeColors,
-): { background: string; foreground: string } {
-  switch (color) {
-    case 'destructive':
-      return {
-        background: colors.negative,
-        foreground: colors.negativeForeground,
-      };
-    case 'cancel':
-      return { background: colors.contrast50, foreground: colors.text };
-    case 'default':
-      return { background: colors.primary, foreground: colors.primaryForeground };
-    /* c8 ignore next 2 -- TS exhaustiveness check guards this branch */
-    default: {
-      const _exhaustive: never = color;
-      return { background: colors.primary, foreground: colors.primaryForeground };
-    }
-  }
-}
-
 const sideStyles = StyleSheet.create({
   root: {
     ...StyleSheet.absoluteFill,