@oxyhq/bloom 0.16.0 → 0.16.1

package/lib/commonjs/dialog/DialogBottomSheet.js

@@ -0,0 +1,205 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DialogBottomSheet = DialogBottomSheet;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../bottom-sheet/index.js");
+var _useTheme = require("../theme/use-theme.js");
+var _context = require("./context.js");
+var _DialogContent = require("./DialogContent.js");
+var _placement = require("./placement.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * Padding of the bottom-sheet content container (px). Matches the side-sheet
+ * and centered-panel body padding so every placement reads identically.
+ */
+const SHEET_CONTENT_PADDING = 20;
+
+/**
+ * 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
+ */
+function DialogBottomSheet({
+  control,
+  open: controlledOpen,
+  onClose,
+  testID,
+  title,
+  description,
+  actions,
+  maxHeightRatio = _placement.DEFAULT_MAX_HEIGHT_RATIO,
+  showHandle = true,
+  dismissOnBackdrop = true,
+  style,
+  panelStyle,
+  panelClassName,
+  containerStyle,
+  containerClassName,
+  label,
+  children
+}) {
+  const isControlled = controlledOpen !== undefined;
+  const theme = (0, _useTheme.useTheme)();
+  const ref = (0, _react.useRef)(null);
+  const closeCallbacks = (0, _react.useRef)([]);
+  const titleId = (0, _react.useId)();
+  const descriptionId = (0, _react.useId)();
+
+  // Read the latest controlled flag / `onClose` inside stable callbacks without
+  // re-binding them (the context + imperative handle depend on `close` staying
+  // referentially stable).
+  const isControlledRef = (0, _react.useRef)(isControlled);
+  isControlledRef.current = isControlled;
+  const onCloseRef = (0, _react.useRef)(onClose);
+  onCloseRef.current = onClose;
+
+  // Drain queued close callbacks atomically — capturing the list and resetting
+  // it before invocation ensures a callback that synchronously re-opens the
+  // dialog (and queues fresh callbacks) does not see the old ones replayed
+  // against the new session.
+  const callQueuedCallbacks = (0, _react.useCallback)(() => {
+    const queued = closeCallbacks.current;
+    closeCallbacks.current = [];
+    for (const cb of queued) {
+      try {
+        cb();
+      } catch (e) {
+        if (typeof console !== 'undefined' && console.error) {
+          console.error('Dialog close callback error:', e);
+        }
+      }
+    }
+  }, []);
+  const open = (0, _react.useCallback)(() => {
+    ref.current?.present();
+  }, []);
+
+  // A dismissal request (backdrop, pan-to-close, action button). In controlled
+  // mode it asks the host to close via `onClose` (the host flips `open`); in
+  // imperative mode it dismisses the surface directly. The optional callback
+  // runs once the dialog has finished closing.
+  const close = (0, _react.useCallback)(cb => {
+    if (typeof cb === 'function') {
+      closeCallbacks.current.push(cb);
+    }
+    if (isControlledRef.current) {
+      onCloseRef.current?.();
+      return;
+    }
+    ref.current?.dismiss();
+  }, []);
+
+  // Fired when the sheet has finished closing. Drains queued callbacks, then
+  // fires `onClose` ONLY in imperative mode — controlled mode already requested
+  // the close through `onClose` (the host then flipped `open`), so firing it
+  // again here would double-call it.
+  const handleDismiss = (0, _react.useCallback)(() => {
+    callQueuedCallbacks();
+    if (!isControlledRef.current) onCloseRef.current?.();
+  }, [callQueuedCallbacks]);
+
+  // In controlled mode, mirror the `open` prop onto the underlying sheet so both
+  // modes share one lifecycle.
+  (0, _react.useEffect)(() => {
+    if (!isControlled) return;
+    if (controlledOpen) {
+      ref.current?.present();
+    } else {
+      ref.current?.dismiss();
+    }
+  }, [isControlled, controlledOpen]);
+  (0, _react.useImperativeHandle)(control?.ref, () => ({
+    open,
+    close
+  }), [open, close]);
+  const context = (0, _react.useMemo)(() => ({
+    close,
+    isWithinDialog: true
+  }), [close]);
+
+  // Backdrop press → dismiss, unless the host disabled it. Returning `false`
+  // from `onDismissAttempt` blocks the BottomSheet's own backdrop/pan dismissal,
+  // which is how `dismissOnBackdrop: false` maps onto the single sheet API.
+  const onDismissAttempt = (0, _react.useCallback)(() => dismissOnBackdrop, [dismissOnBackdrop]);
+
+  // `panelStyle` paints the sheet surface (e.g. a brand background). It composes
+  // AFTER the BottomSheet's internal background so a host palette wins; the
+  // shape (radius, max height) is supplied here and remains overridable.
+  const sheetStyle = (0, _react.useMemo)(() => {
+    const maxHeightPercent = `${Math.round(maxHeightRatio * 100)}%`;
+    return [{
+      backgroundColor: theme.colors.background,
+      borderTopLeftRadius: _placement.PANEL_RADIUS + 4,
+      borderTopRightRadius: _placement.PANEL_RADIUS + 4,
+      maxHeight: maxHeightPercent
+    }, panelStyle];
+  }, [theme.colors.background, maxHeightRatio, panelStyle]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.BottomSheet, {
+    ref: ref,
+    onDismiss: handleDismiss,
+    onDismissAttempt: onDismissAttempt,
+    enablePanDownToClose: true,
+    showHandle: showHandle
+    // Stronger dim than a lone sheet so an underlying sheet's handle/content
+    // doesn't bleed through when a Dialog is stacked over one.
+    ,
+    backdropOpacity: _placement.SHEET_BACKDROP_OPACITY + 0.3,
+    style: sheetStyle,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.Context.Provider, {
+      value: context,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        testID: testID,
+        accessibilityLabel: label,
+        "aria-labelledby": title ? titleId : undefined,
+        "aria-describedby": description ? descriptionId : undefined,
+        ...(containerClassName ? {
+          className: containerClassName
+        } : {}),
+        ...(panelClassName ? {
+          className: panelClassName
+        } : {}),
+        style: [{
+          padding: SHEET_CONTENT_PADDING
+        },
+        // `containerStyle` carries the host's CSS-var theme scope; it wraps
+        // the content subtree so descendants read the scoped palette.
+        containerStyle, style, panelStyle],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContent.DialogBody, {
+          titleId: titleId,
+          descriptionId: descriptionId,
+          title: title,
+          description: description,
+          actions: actions,
+          children: children
+        })
+      })
+    })
+  });
+}
+
+/**
+ * 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.
+ */
+//# sourceMappingURL=DialogBottomSheet.js.map

package/lib/commonjs/dialog/DialogBottomSheet.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_index","_useTheme","_context","_DialogContent","_placement","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SHEET_CONTENT_PADDING","DialogBottomSheet","control","open","controlledOpen","onClose","testID","title","description","actions","maxHeightRatio","DEFAULT_MAX_HEIGHT_RATIO","showHandle","dismissOnBackdrop","style","panelStyle","panelClassName","containerStyle","containerClassName","label","children","isControlled","undefined","theme","useTheme","ref","useRef","closeCallbacks","titleId","useId","descriptionId","isControlledRef","current","onCloseRef","callQueuedCallbacks","useCallback","queued","cb","console","error","present","close","push","dismiss","handleDismiss","useEffect","useImperativeHandle","context","useMemo","isWithinDialog","onDismissAttempt","sheetStyle","maxHeightPercent","Math","round","backgroundColor","colors","background","borderTopLeftRadius","PANEL_RADIUS","borderTopRightRadius","maxHeight","jsx","BottomSheet","onDismiss","enablePanDownToClose","backdropOpacity","SHEET_BACKDROP_OPACITY","Context","Provider","value","View","accessibilityLabel","className","padding","DialogBody"],"sourceRoot":"../../../src","sources":["dialog/DialogBottomSheet.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/dialog/DialogContent.js

@@ -0,0 +1,155 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActionRow = ActionRow;
+exports.DialogBody = DialogBody;
+exports.getActionPalette = getActionPalette;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _useTheme = require("../theme/use-theme.js");
+var _context = require("./context.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * 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`.
+ */
+function DialogBody({
+  titleId,
+  descriptionId,
+  title,
+  description,
+  actions,
+  children
+}) {
+  const theme = (0, _useTheme.useTheme)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      nativeID: titleId,
+      style: {
+        fontSize: 22,
+        fontWeight: '600',
+        color: theme.colors.text,
+        paddingBottom: description ? 4 : 16,
+        lineHeight: 30
+      },
+      children: title
+    }) : null, description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      nativeID: descriptionId,
+      style: {
+        fontSize: 16,
+        color: theme.colors.textSecondary,
+        paddingBottom: 16,
+        lineHeight: 22
+      },
+      children: description
+    }) : null, children, actions && actions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionRow, {
+      actions: actions
+    }) : null]
+  });
+}
+function ActionRow({
+  actions
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: {
+      width: '100%',
+      gap: 8,
+      justifyContent: 'flex-end'
+    },
+    children: actions.map((action, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionButton, {
+      action: action
+    }, `${action.label}-${idx}`))
+  });
+}
+function ActionButton({
+  action
+}) {
+  const {
+    close
+  } = (0, _context.useDialogContext)();
+  const theme = (0, _useTheme.useTheme)();
+  const color = action.color ?? 'default';
+  const shouldCloseOnPress = action.shouldCloseOnPress ?? true;
+  const {
+    background,
+    foreground
+  } = getActionPalette(color, theme.colors);
+  const handlePress = (0, _react.useCallback)(e => {
+    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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: {
+        fontSize: 16,
+        fontWeight: '500',
+        color: foreground
+      },
+      children: action.label
+    })
+  });
+}
+function getActionPalette(color, colors) {
+  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 3 -- TS exhaustiveness check guards this branch */
+    default:
+      {
+        const _exhaustive = color;
+        return {
+          background: colors.primary,
+          foreground: colors.primaryForeground
+        };
+      }
+  }
+}
+//# sourceMappingURL=DialogContent.js.map

package/lib/commonjs/dialog/DialogContent.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_useTheme","_context","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DialogBody","titleId","descriptionId","title","description","actions","children","theme","useTheme","jsxs","Fragment","jsx","Text","nativeID","style","fontSize","fontWeight","color","colors","text","paddingBottom","lineHeight","textSecondary","length","ActionRow","View","width","gap","justifyContent","map","action","idx","ActionButton","label","close","useDialogContext","shouldCloseOnPress","background","foreground","getActionPalette","handlePress","useCallback","onPress","undefined","TouchableOpacity","borderRadius","alignItems","backgroundColor","opacity","disabled","paddingVertical","paddingHorizontal","activeOpacity","testID","negative","negativeForeground","contrast50","primary","primaryForeground","_exhaustive"],"sourceRoot":"../../../src","sources":["dialog/DialogContent.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/dialog/Dialog.js

@@ -1,14 +1,16 @@
 "use strict";
 
 import React, { useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Pressable, StyleSheet, Text, TouchableOpacity, useWindowDimensions, View } from 'react-native';
+import { Pressable, StyleSheet, useWindowDimensions, View } from 'react-native';
 import Animated, { cancelAnimation, Easing, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import { BottomSheet } from "../bottom-sheet/index.js";
 import { Z_INDEX } from "../styles/z-index.js";
 import { useTheme } from "../theme/use-theme.js";
-import { Context, useDialogContext, useDialogControl } from "./context.js";
-import { ANIMATION_DURATION, DEFAULT_MAX_HEIGHT_RATIO, DEFAULT_SIDE_WIDTH, DIALOG_SHEET_BACKDROP_TESTID, PANEL_RADIUS, SHEET_BACKDROP_OPACITY, SIDE_SHEET_MIN_GUTTER, useResolvedPlacement } from "./placement.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Context, useDialogControl } from "./context.js";
+import { DialogBody } from "./DialogContent.js";
+import { DialogBottomSheet } from "./DialogBottomSheet.js";
+import { ANIMATION_DURATION, DEFAULT_SIDE_WIDTH, DIALOG_SHEET_BACKDROP_TESTID, PANEL_RADIUS, SHEET_BACKDROP_OPACITY, SIDE_SHEET_MIN_GUTTER, useResolvedPlacement } from "./placement.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export { DIALOG_SHEET_BACKDROP_TESTID };
 
 /**
@@ -33,6 +35,36 @@ export { DIALOG_SHEET_BACKDROP_TESTID };
  *   3. Pure children — no `title`/`description`/`actions`.
  */
 export function Dialog({
+  placement,
+  ...rest
+}) {
+  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 /*#__PURE__*/_jsx(DialogBottomSheet, {
+      ...rest
+    });
+  }
+  return /*#__PURE__*/_jsx(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,
@@ -42,9 +74,7 @@ export function Dialog({
   actions,
   placement,
   width = DEFAULT_SIDE_WIDTH,
-  maxHeightRatio = DEFAULT_MAX_HEIGHT_RATIO,
   inset,
-  showHandle = true,
   dismissOnBackdrop = true,
   style,
   panelStyle,
@@ -55,8 +85,7 @@ export function Dialog({
   children
 }) {
   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).
@@ -165,7 +194,7 @@ export function Dialog({
       children: /*#__PURE__*/_jsx(SideSheet, {
         open: sideOpen,
         onDismiss: handleDismiss,
-        side: resolvedPlacement,
+        side: placement,
         width: width,
         inset: inset,
         dismissOnBackdrop: dismissOnBackdrop,
@@ -184,18 +213,17 @@ export function Dialog({
       })
     });
   }
-  const isBottom = resolvedPlacement === 'bottom';
   return /*#__PURE__*/_jsx(BottomSheet, {
     ref: ref,
     onDismiss: handleDismiss,
     enablePanDownToClose: true,
-    detached: !isBottom,
-    showHandle: isBottom ? showHandle : true
+    detached: true,
+    showHandle: true
     // 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,
     children: /*#__PURE__*/_jsx(Context.Provider, {
       value: context,
       children: /*#__PURE__*/_jsx(View, {
@@ -222,54 +250,6 @@ export function Dialog({
     })
   });
 }
-function bottomSheetStyle(background, maxHeightRatio) {
-  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
-}) {
-  const theme = useTheme();
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [title ? /*#__PURE__*/_jsx(Text, {
-      nativeID: titleId,
-      style: {
-        fontSize: 22,
-        fontWeight: '600',
-        color: theme.colors.text,
-        paddingBottom: description ? 4 : 16,
-        lineHeight: 30
-      },
-      children: title
-    }) : null, description ? /*#__PURE__*/_jsx(Text, {
-      nativeID: descriptionId,
-      style: {
-        fontSize: 16,
-        color: theme.colors.textSecondary,
-        paddingBottom: 16,
-        lineHeight: 22
-      },
-      children: description
-    }) : null, children, actions && actions.length > 0 ? /*#__PURE__*/_jsx(ActionRow, {
-      actions: actions
-    }) : null]
-  });
-}
 
 /**
  * Reanimated side-sheet/drawer for the `left`/`right` placements (native).
@@ -409,98 +389,6 @@ function SideSheet({
     })]
   });
 }
-function ActionRow({
-  actions
-}) {
-  return /*#__PURE__*/_jsx(View, {
-    style: {
-      width: '100%',
-      gap: 8,
-      justifyContent: 'flex-end'
-    },
-    children: actions.map((action, idx) => /*#__PURE__*/_jsx(ActionButton, {
-      action: action
-    }, `${action.label}-${idx}`))
-  });
-}
-function ActionButton({
-  action
-}) {
-  const {
-    close
-  } = useDialogContext();
-  const theme = useTheme();
-  const color = action.color ?? 'default';
-  const shouldCloseOnPress = action.shouldCloseOnPress ?? true;
-  const {
-    background,
-    foreground
-  } = getActionPalette(color, theme.colors);
-  const handlePress = useCallback(e => {
-    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 /*#__PURE__*/_jsx(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,
-    children: /*#__PURE__*/_jsx(Text, {
-      style: {
-        fontSize: 16,
-        fontWeight: '500',
-        color: foreground
-      },
-      children: action.label
-    })
-  });
-}
-function getActionPalette(color, colors) {
-  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 = color;
-        return {
-          background: colors.primary,
-          foreground: colors.primaryForeground
-        };
-      }
-  }
-}
 const sideStyles = StyleSheet.create({
   root: {
     ...StyleSheet.absoluteFill,