@oxyhq/bloom 0.14.0 → 0.16.0

package/src/alert-dialog/AlertDialog.tsx

@@ -2,28 +2,32 @@ import React, { memo, useCallback } from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import { Button } from '../button';
+import type { DialogProps } from '../dialog';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { fontSize, space } from '../styles/tokens';
-import type { CenteredDialogProps } from '../dialog';
 import type { AlertDialogProps } from './types';
 
-type CenteredDialogComponent = React.ComponentType<CenteredDialogProps>;
+type DialogComponent = React.ComponentType<DialogProps>;
+
+/** Centered alert-card max width (px). Matches the legacy AlertDialog card. */
+const ALERT_DIALOG_MAX_WIDTH = 440;
 
 /**
- * Build the `AlertDialog` component bound to a platform `CenteredDialog`.
+ * Build the `AlertDialog` component bound to a platform `Dialog`.
  *
- * `CenteredDialog` is platform-forked (native RN `Modal` vs pure-DOM web
- * overlay), and this repo never relies on implicit `.web` resolution — the
- * platform entry files (`index.ts` / `index.web.ts`) inject the correct
- * `CenteredDialog` here. The body below is single-source, no duplication.
+ * `Dialog` is platform-forked (native `BottomSheet`-backed surface vs pure-DOM
+ * web overlay) through its `./dialog` export conditions, and this repo never
+ * relies on implicit `.web` resolution — the platform entry files
+ * (`index.ts` / `index.web.ts`) inject the correct `Dialog` here. The body
+ * below is single-source, no duplication.
  *
- * `AlertDialog` is a thin wrapper over `CenteredDialog` that lays out a title,
- * description and a confirm/cancel action row. Reach for the imperative
- * `confirm()` helper + `<AlertDialogHost />` to trigger a confirm from an
- * event handler without owning visible state.
+ * `AlertDialog` is a thin wrapper over `<Dialog placement="center">` that lays
+ * out a title, description and a confirm/cancel action row. Reach for the
+ * imperative `confirm()` helper + `<AlertDialogHost />` to trigger a confirm
+ * from an event handler without owning visible state.
  */
-export function createAlertDialog(CenteredDialog: CenteredDialogComponent) {
+export function createAlertDialog(Dialog: DialogComponent) {
   const AlertDialogComponent = function AlertDialog({
     visible,
     onClose,
@@ -52,16 +56,31 @@ export function createAlertDialog(CenteredDialog: CenteredDialogComponent) {
     }, [onConfirm, onClose]);
 
     return (
-    <CenteredDialog
-      visible={visible}
-      onClose={dismissible ? onClose : () => {}}
-      dismissible={dismissible}
-      title={title}
-      showClose={false}
-      accessibilityLabel={title}
-      cardStyle={cardStyle}
-      testID={testID}
-      footer={
+      <Dialog
+        open={visible}
+        onClose={onClose}
+        placement="center"
+        // Alert dialogs are blocking by default — the backdrop only dismisses
+        // when the caller opts in via `dismissible`.
+        dismissOnBackdrop={dismissible}
+        maxWidth={ALERT_DIALOG_MAX_WIDTH}
+        title={title}
+        label={title}
+        style={cardStyle}
+        testID={testID}
+      >
+        {description ? (
+          <Text
+            style={{
+              fontSize: fontSize.md,
+              lineHeight: fontSize.md * 1.4,
+              color: theme.colors.textSecondary,
+              paddingBottom: space.lg,
+            }}
+          >
+            {description}
+          </Text>
+        ) : null}
         <View style={styles.actions}>
           {!hideCancel ? (
             <Button
@@ -69,7 +88,8 @@ export function createAlertDialog(CenteredDialog: CenteredDialogComponent) {
               size="medium"
               onPress={handleCancel}
               style={styles.action}
-              accessibilityLabel={cancelLabel}>
+              accessibilityLabel={cancelLabel}
+            >
               {cancelLabel}
             </Button>
           ) : null}
@@ -82,22 +102,12 @@ export function createAlertDialog(CenteredDialog: CenteredDialogComponent) {
               destructive && { backgroundColor: theme.colors.negative },
             ]}
             textStyle={destructive ? { color: theme.colors.negativeForeground } : undefined}
-            accessibilityLabel={confirmLabel}>
+            accessibilityLabel={confirmLabel}
+          >
             {confirmLabel}
           </Button>
         </View>
-      }>
-      {description ? (
-        <Text
-          style={{
-            fontSize: fontSize.md,
-            lineHeight: fontSize.md * 1.4,
-            color: theme.colors.textSecondary,
-          }}>
-          {description}
-        </Text>
-      ) : null}
-    </CenteredDialog>
+      </Dialog>
     );
   };
 

package/src/alert-dialog/index.ts

@@ -1,8 +1,8 @@
-import { CenteredDialog } from '../dialog/index';
+import { Dialog } from '../dialog/index';
 import { createAlertDialog } from './AlertDialog';
 import { createAlertDialogHost } from './AlertDialogHost';
 
-export const AlertDialog = createAlertDialog(CenteredDialog);
+export const AlertDialog = createAlertDialog(Dialog);
 export const AlertDialogHost = createAlertDialogHost(AlertDialog);
 
 export { confirm } from './confirm-store';

package/src/alert-dialog/index.web.ts

@@ -1,8 +1,8 @@
-import { CenteredDialog } from '../dialog/index.web';
+import { Dialog } from '../dialog/index.web';
 import { createAlertDialog } from './AlertDialog';
 import { createAlertDialogHost } from './AlertDialogHost';
 
-export const AlertDialog = createAlertDialog(CenteredDialog);
+export const AlertDialog = createAlertDialog(Dialog);
 export const AlertDialogHost = createAlertDialogHost(AlertDialog);
 
 export { confirm } from './confirm-store';

package/src/command/Command.tsx

@@ -14,10 +14,13 @@ import { Item } from '../item';
 import { Kbd } from '../kbd';
 import { SearchInput } from '../search-input';
 import { fontSize, space } from '../styles/tokens';
-import type { CenteredDialogProps } from '../dialog';
+import type { DialogProps } from '../dialog';
 import type { CommandItem, CommandProps } from './types';
 
-type CenteredDialogComponent = React.ComponentType<CenteredDialogProps>;
+type DialogComponent = React.ComponentType<DialogProps>;
+
+/** Centered command-palette max width (px). Matches the legacy palette card. */
+const COMMAND_MAX_WIDTH = 560;
 
 function defaultFilter(item: CommandItem, query: string): boolean {
   const q = query.trim().toLowerCase();
@@ -36,17 +39,17 @@ interface FlatEntry {
 }
 
 /**
- * Build the `Command` palette bound to a platform `CenteredDialog`. The
- * platform entry files (`index.ts` / `index.web.ts`) inject the correct one
- * (native RN `Modal` vs pure-DOM web overlay) — this repo never relies on
- * implicit `.web` resolution. The body is single-source.
+ * Build the `Command` palette bound to a platform `Dialog`. The platform entry
+ * files (`index.ts` / `index.web.ts`) inject the correct one (native
+ * `BottomSheet`-backed surface vs pure-DOM web overlay) — this repo never
+ * relies on implicit `.web` resolution. The body is single-source.
  *
- * `Command` is a ⌘K command palette built on Bloom's `CenteredDialog`,
+ * `Command` is a ⌘K command palette built on `<Dialog placement="center">`,
  * `SearchInput`, an `Item` results list and `Kbd` shortcut hints. Items group
  * by their `group` field (ungrouped first). On web the list is
  * keyboard-navigable (Up/Down/Enter); on native, tap to select.
  */
-export function createCommand(CenteredDialog: CenteredDialogComponent) {
+export function createCommand(Dialog: DialogComponent) {
   const Command = function Command({
     visible,
     onClose,
@@ -168,15 +171,16 @@ export function createCommand(CenteredDialog: CenteredDialogComponent) {
       : {};
 
   return (
-    <CenteredDialog
-      visible={visible}
+    <Dialog
+      open={visible}
       onClose={onClose}
-      dismissible
-      showClose={false}
-      maxWidth={560}
-      accessibilityLabel="Command palette"
-      cardStyle={style}
-      contentStyle={styles.content}
+      placement="center"
+      dismissOnBackdrop
+      maxWidth={COMMAND_MAX_WIDTH}
+      label="Command palette"
+      // The palette owns its own edge-to-edge layout (full-bleed search border,
+      // padded results) so the Dialog panel contributes no padding of its own.
+      style={[styles.panel, style]}
       testID={testID}>
       <View {...webKeyHandler}>
         <View style={[styles.searchWrap, { borderBottomColor: theme.colors.borderLight }]}>
@@ -200,6 +204,7 @@ export function createCommand(CenteredDialog: CenteredDialogComponent) {
         ) : (
           <ScrollView
             style={{ maxHeight: maxListHeight }}
+            contentContainerStyle={styles.list}
             keyboardShouldPersistTaps="handled"
             showsVerticalScrollIndicator={false}>
             {entries.map((entry, i) => {
@@ -238,7 +243,7 @@ export function createCommand(CenteredDialog: CenteredDialogComponent) {
           </ScrollView>
         )}
       </View>
-    </CenteredDialog>
+    </Dialog>
     );
   };
 
@@ -249,9 +254,15 @@ export function createCommand(CenteredDialog: CenteredDialogComponent) {
 export type CommandType = ReturnType<typeof createCommand>;
 
 const styles = StyleSheet.create({
-  content: {
-    paddingHorizontal: 0,
+  // Zero out the Dialog panel's default padding (longhands beat the web
+  // panel's `padding` shorthand and the native panel's longhand paddings) so
+  // the palette renders edge-to-edge.
+  panel: {
     paddingTop: 0,
+    paddingHorizontal: 0,
+    paddingBottom: space.xs,
+  },
+  list: {
     paddingBottom: space.xs,
   },
   searchWrap: {

package/src/command/index.ts

@@ -1,6 +1,6 @@
-import { CenteredDialog } from '../dialog/index';
+import { Dialog } from '../dialog/index';
 import { createCommand } from './Command';
 
-export const Command = createCommand(CenteredDialog);
+export const Command = createCommand(Dialog);
 
 export type { CommandProps, CommandItem } from './types';

package/src/command/index.web.ts

@@ -1,6 +1,6 @@
-import { CenteredDialog } from '../dialog/index.web';
+import { Dialog } from '../dialog/index.web';
 import { createCommand } from './Command';
 
-export const Command = createCommand(CenteredDialog);
+export const Command = createCommand(Dialog);
 
 export type { CommandProps, CommandItem } from './types';