@oxyhq/bloom 0.50.0 → 0.50.2

package/src/dialog/Dialog.web.tsx

@@ -21,6 +21,7 @@ import { RemoveScrollBar } from 'react-remove-scroll-bar';
 
 import { Portal } from '../portal/index.web';
 import { createOverlayZIndex } from '../styles/z-index';
+import { bloomShadowStyle } from '../design-tokens/shadows';
 import { useTheme } from '../theme/use-theme';
 import { Context, useDialogContext, useDialogControl } from './context';
 import { DialogBody } from './DialogContent';
@@ -29,6 +30,7 @@ import {
   DIALOG_NAV_BAR_HEIGHT,
   DialogHeaderProvider,
   DialogLargeTitle,
+  DialogNavBarSpacer,
   DialogNavHeader,
   useDialogHeaderController,
 } from './DialogHeader';
@@ -467,10 +469,9 @@ function DialogPanel({
           backgroundColor: theme.colors.background,
           borderWidth: 1,
           borderColor: theme.isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)',
-          shadowColor: '#000',
-          shadowOpacity: theme.isDark ? 0.4 : 0.1,
-          shadowRadius: 30,
-          shadowOffset: { width: 0, height: 4 },
+          // Design-system overlay elevation (`shadow-m`) as a `boxShadow` — RN-Web
+          // deprecated the `shadow*` style props.
+          ...bloomShadowStyle('m'),
           zIndex: surfaceZIndex,
         },
         isClosing
@@ -497,7 +498,7 @@ function DialogPanel({
           />
           {scrollable === false ? (
             <DialogMorphContent morph={morphState} style={{ flex: 1, minHeight: 0 }}>
-              <View style={{ height: DIALOG_NAV_BAR_HEIGHT }} />
+              <DialogNavBarSpacer controller={headerController} header={header} />
               <DialogHeaderProvider controller={headerController}>{body}</DialogHeaderProvider>
             </DialogMorphContent>
           ) : (
@@ -671,9 +672,8 @@ function SheetSurface({
 
   return (
     <View
-      style={[sheetStyles.root, { zIndex: backdropZIndex }, containerStyle]}
+      style={[sheetStyles.root, { zIndex: backdropZIndex }, containerStyle, { pointerEvents: 'box-none' }]}
       {...(containerClassName ? ({ className: containerClassName } as Record<string, string>) : {})}
-      pointerEvents="box-none"
     >
       <Pressable
         testID={testID ? `${testID}-backdrop` : DIALOG_SHEET_BACKDROP_TESTID}
@@ -703,15 +703,16 @@ function SheetSurface({
           sheetStyles.panel,
           {
             backgroundColor: theme.colors.background,
-            shadowColor: theme.colors.shadow,
             zIndex: surfaceZIndex,
+            pointerEvents: 'auto',
+            // Design-system overlay elevation (`shadow-m`) as a `boxShadow`.
+            ...bloomShadowStyle('m'),
           },
           panelGeometry,
           panelTransition,
           panelStyle,
           style,
         ]}
-        pointerEvents="auto"
       >
         {header ? (
           // Nav-header mode on a side drawer: a static titled bar (the drawer
@@ -859,9 +860,8 @@ const sheetStyles = {
   panel: {
     position: 'absolute',
     overflow: 'hidden',
-    shadowOpacity: 0.18,
-    shadowRadius: 24,
-    shadowOffset: { width: 0, height: 8 },
+    // Elevation is applied at the usage site via `bloomShadowStyle('m')`
+    // (`boxShadow` on web); the deprecated `shadow*` props were removed.
   } as ViewStyle,
 };
 

package/src/dialog/DialogHeader.tsx

@@ -106,6 +106,62 @@ interface HeaderStore {
   subscribe: (listener: () => void) => () => void;
 }
 
+type PrimaryAction = NonNullable<DialogHeaderConfig['primaryAction']>;
+type HeaderAction = NonNullable<DialogHeaderConfig['actions']>[number];
+type HeaderSearch = NonNullable<DialogHeaderConfig['search']>;
+type HeaderSegments = NonNullable<DialogHeaderConfig['segments']>;
+type HeaderProgress = NonNullable<DialogHeaderConfig['progress']>;
+
+function primaryActionEqual(a: PrimaryAction | undefined, b: PrimaryAction | undefined): boolean {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  // `onPress` is a fresh closure each render — its identity never changes what the
+  // button renders, so compare only the render-affecting scalars.
+  return a.label === b.label && !!a.disabled === !!b.disabled && !!a.loading === !!b.loading;
+}
+
+function actionsEqual(a: HeaderAction[] | undefined, b: HeaderAction[] | undefined): boolean {
+  if (a === b) return true;
+  if (!a || !b || a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i += 1) {
+    const x = a[i];
+    const y = b[i];
+    if (!x || !y) return false;
+    // `icon` is a memoized node (compared by identity); `onPress` is ignored.
+    if (
+      x.accessibilityLabel !== y.accessibilityLabel ||
+      !!x.disabled !== !!y.disabled ||
+      x.icon !== y.icon
+    ) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function searchEqual(a: HeaderSearch | undefined, b: HeaderSearch | undefined): boolean {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return a.value === b.value && a.placeholder === b.placeholder;
+}
+
+function segmentsEqual(a: HeaderSegments | undefined, b: HeaderSegments | undefined): boolean {
+  if (a === b) return true;
+  if (!a || !b || a.value !== b.value || a.items.length !== b.items.length) return false;
+  for (let i = 0; i < a.items.length; i += 1) {
+    const ai = a.items[i];
+    const bi = b.items[i];
+    if (!ai || !bi || ai.key !== bi.key || ai.label !== bi.label) return false;
+  }
+  return true;
+}
+
+function progressEqual(a: HeaderProgress | undefined, b: HeaderProgress | undefined): boolean {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return a.step === b.step && a.total === b.total;
+}
+
 function configsEqual(a: DialogHeaderConfig | null, b: DialogHeaderConfig | null): boolean {
   if (a === b) return true;
   if (!a || !b) return false;
@@ -116,16 +172,20 @@ function configsEqual(a: DialogHeaderConfig | null, b: DialogHeaderConfig | null
     a.largeTitle === b.largeTitle &&
     a.left === b.left &&
     a.right === b.right &&
-    a.onBack === b.onBack &&
+    // `onBack` legitimately gets a fresh closure each render; its identity never
+    // changes what the header renders, so compare by PRESENCE, never identity —
+    // treating a new ref as "changed" is exactly what drives the update loop.
+    !!a.onBack === !!b.onBack &&
     a.showClose === b.showClose &&
-    // Rich fields — object fields compared by identity (callers memoize them);
-    // `tone` is a plain value.
-    a.primaryAction === b.primaryAction &&
-    a.actions === b.actions &&
-    a.search === b.search &&
-    a.segments === b.segments &&
+    // Rich fields — compared by VALUE (render-affecting scalars only). A caller
+    // passing an inline `primaryAction`/`actions`/… object (a fresh reference
+    // every render) must NOT force a store update: that is React error #185.
     a.tone === b.tone &&
-    a.progress === b.progress
+    primaryActionEqual(a.primaryAction, b.primaryAction) &&
+    actionsEqual(a.actions, b.actions) &&
+    searchEqual(a.search, b.search) &&
+    segmentsEqual(a.segments, b.segments) &&
+    progressEqual(a.progress, b.progress)
   );
 }
 
@@ -474,28 +534,23 @@ export const DialogNavHeader = memo(function DialogNavHeader({
     ) : null);
 
   return (
-    <View
-      pointerEvents="box-none"
-      style={[styles.overlay, style]}
-    >
+    <View style={[styles.overlay, style, { pointerEvents: 'box-none' }]}>
       {/* Opaque (surface bg) at the top → transparent at the bottom, so scrolled
           content fades out under the bar. `onImage` swaps to a dark scrim so the
           chrome reads over media. Pure NativeWind — no SVG dependency. */}
       <View
-        pointerEvents="none"
         className={
           onImage
             ? 'bg-gradient-to-b from-black/60 to-transparent'
             : 'bg-gradient-to-b from-bg to-transparent'
         }
-        style={[StyleSheet.absoluteFill, { height: DIALOG_HEADER_OVERLAY_HEIGHT }]}
+        style={[StyleSheet.absoluteFill, { height: DIALOG_HEADER_OVERLAY_HEIGHT, pointerEvents: 'none' }]}
       />
-      <View pointerEvents="box-none" style={styles.navRow}>
+      <View style={[styles.navRow, { pointerEvents: 'box-none' }]}>
         <View style={styles.side}>{left}</View>
         <Animated.View
-          pointerEvents="none"
           testID="dialog-nav-title"
-          style={[styles.centerTitle, titleStyle]}
+          style={[styles.centerTitle, titleStyle, { pointerEvents: 'none' }]}
         >
           {config.titleContent ?? null}
           {!config.titleContent && config.title ? (
@@ -624,6 +679,27 @@ export const DialogLargeTitle = memo(function DialogLargeTitle({
   );
 });
 
+/**
+ * The nav-bar-height content inset for a header-mode surface whose content owns
+ * its own scroll (`scrollable: false`) — the account dialog or an own-scroller
+ * like the media picker. Under `tone: 'onImage'` it COLLAPSES to nothing so the
+ * media (photo grid / banner) slides UP under the floating translucent nav bar,
+ * edge-to-edge (Apple/Material immersive photo grid); otherwise it insets the
+ * content below the bar. Reads the merged (base + runtime-override) tone, since
+ * `tone` is contributed by the mounted screen through the override store.
+ */
+export const DialogNavBarSpacer = memo(function DialogNavBarSpacer({
+  controller,
+  header,
+}: {
+  controller: DialogHeaderController;
+  header: DialogHeaderConfig;
+}) {
+  const config = useMergedHeaderConfig(header, controller.store);
+  if (config.tone === 'onImage') return null;
+  return <View style={{ height: DIALOG_NAV_BAR_HEIGHT }} />;
+});
+
 const styles = StyleSheet.create({
   overlay: {
     position: 'absolute',

package/src/menu/index.web.tsx

@@ -17,6 +17,7 @@ import { Text } from '../typography';
 import type { DialogControlProps } from '../dialog/types';
 import { Portal } from '../portal/index.web';
 import { createDropdownZIndex } from '../styles/z-index';
+import { bloomShadowStyle } from '../design-tokens/shadows';
 import {
   MenuContext,
   ItemContext,
@@ -255,7 +256,7 @@ export function MenuContent({
               ? theme.colors.backgroundSecondary
               : theme.colors.background,
             borderColor: theme.colors.borderLight,
-            shadowColor: theme.colors.shadow,
+            ...bloomShadowStyle('m'),
           },
           style,
           styles.portaledDropdown,
@@ -393,9 +394,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     overflow: 'hidden',
     zIndex: menuZIndex.surface,
-    shadowOpacity: 0.15,
-    shadowRadius: 12,
-    shadowOffset: { width: 0, height: 4 },
+    // Overlay elevation applied at the usage site via `bloomShadowStyle('m')`.
     minWidth: 180,
   },
   portaledDropdown: {

package/src/popover/index.web.tsx

@@ -12,6 +12,7 @@ import { Pressable, StyleSheet, View } from 'react-native';
 import { useTheme } from '../theme/use-theme';
 import { Portal } from '../portal/index.web';
 import { createOverlayZIndex } from '../styles/z-index';
+import { bloomShadowStyle } from '../design-tokens/shadows';
 import { PopoverContext, usePopoverContext } from './context';
 import type {
   PopoverContentProps,
@@ -288,7 +289,9 @@ export function PopoverContent({
               ? theme.colors.backgroundSecondary
               : theme.colors.background,
             borderColor: theme.colors.borderLight,
-            shadowColor: theme.colors.shadow,
+            // Design-system overlay elevation (`shadow-m`) as a `boxShadow` —
+            // RN-Web deprecated the `shadow*` style props.
+            ...bloomShadowStyle('m'),
             // Hide until measured to avoid a one-frame jump.
             opacity: panelSize ? 1 : 0,
           },
@@ -320,9 +323,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     paddingVertical: 4,
     overflow: 'hidden',
-    shadowOpacity: 0.15,
-    shadowRadius: 12,
-    shadowOffset: { width: 0, height: 4 },
+    // Elevation applied at the usage site via `bloomShadowStyle('m')` (boxShadow).
     pointerEvents: 'auto',
   },
 });

package/src/select/index.web.tsx

@@ -5,6 +5,7 @@ import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { Portal } from '../portal/index.web';
 import { createOverlayZIndex } from '../styles/z-index';
+import { bloomShadowStyle } from '../design-tokens/shadows';
 import { RadioIndicator } from '../radio-indicator';
 import { useInteractionState } from '../hooks/useInteractionState';
 import {
@@ -201,7 +202,7 @@ export function SelectContent<T>({
               ? theme.colors.backgroundSecondary
               : theme.colors.background,
             borderColor: theme.colors.borderLight,
-            shadowColor: theme.colors.shadow,
+            ...bloomShadowStyle('m'),
           },
         ]}
       >
@@ -348,9 +349,7 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
     padding: 4,
     minWidth: 180,
-    shadowOpacity: 0.15,
-    shadowRadius: 12,
-    shadowOffset: { width: 0, height: 4 },
+    // Overlay elevation applied at the usage site via `bloomShadowStyle('m')`.
     // Opt back in from the Portal root's `pointer-events: none`.
     pointerEvents: 'auto',
   },

package/src/slider/Slider.tsx

@@ -12,6 +12,7 @@ import {
 
 import { useTheme } from '../theme/use-theme';
 import { animation } from '../styles/tokens';
+import { bloomShadowStyle } from '../design-tokens/shadows';
 import type { SliderProps } from './types';
 
 function clamp(v: number, min: number, max: number): number {
@@ -236,7 +237,6 @@ const SliderComponent = function Slider({
             backgroundColor: thumbColor,
             left: thumbLeft,
             transform: [{ scale: thumbScale }],
-            shadowColor: theme.colors.shadow,
           },
         ]}
       />
@@ -261,10 +261,8 @@ const styles = StyleSheet.create({
   thumb: {
     position: 'absolute',
     top: '50%',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.2,
-    shadowRadius: 2,
-    elevation: 2,
+    // Subtle raise (`shadow-s`) — `boxShadow` on web, RN shadow/elevation on native.
+    ...bloomShadowStyle('s'),
   },
   disabled: {
     opacity: 0.5,

package/src/switch/Switch.tsx

@@ -3,6 +3,7 @@ import { Pressable, Animated, StyleSheet } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
 import { animation } from '../styles/tokens';
+import { bloomShadowStyle } from '../design-tokens/shadows';
 import type { SwitchProps } from './types';
 
 const TRACK = { default: { w: 44, h: 26 }, sm: { w: 36, h: 22 } } as const;
@@ -128,10 +129,8 @@ const styles = StyleSheet.create({
   },
   thumb: {
     backgroundColor: '#fff',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.15,
-    shadowRadius: 3,
-    elevation: 3,
+    // Subtle raise (`shadow-s`) — `boxShadow` on web (RN-Web deprecated `shadow*`),
+    // RN elevation/shadow on native.
+    ...bloomShadowStyle('s'),
   },
 });

package/src/tabs/Tabs.tsx

@@ -22,6 +22,7 @@ import {
 import { useTheme } from '../theme/use-theme';
 import { usePressAnimation } from '../hooks/usePressAnimation';
 import { borderRadius, space } from '../styles/tokens';
+import { bloomShadowStyle } from '../design-tokens/shadows';
 import type { TabsProps, TabsTriggerProps, TabsContentProps, TabsVariant } from './types';
 
 type TriggerLayout = Pick<LayoutRectangle, 'x' | 'width'>;
@@ -226,11 +227,8 @@ const TabComponent: React.FC<TabsTriggerProps> = ({
         if (isSelected) {
           base.backgroundColor = theme.colors.card;
           base.borderRadius = borderRadius.xs + 2;
-          base.shadowColor = theme.colors.shadow;
-          base.shadowOffset = { width: 0, height: 1 };
-          base.shadowOpacity = 0.1;
-          base.shadowRadius = 2;
-          base.elevation = 1;
+          // Subtle raise (`shadow-s`) — `boxShadow` on web, RN shadow/elevation on native.
+          Object.assign(base, bloomShadowStyle('s'));
         }
         break;
       case 'outlined':

package/src/toast/Toast.tsx

@@ -9,6 +9,7 @@ import {
 
 import { useTheme } from '../theme/use-theme';
 import { useInteractionState } from '../hooks/useInteractionState';
+import { bloomShadowStyle } from '../design-tokens/shadows';
 import type { ThemeColors } from '../theme/types';
 import { dismiss } from './sonner';
 import type { ToastType } from './types';
@@ -242,11 +243,8 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     gap: 8,
     paddingVertical: 14,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.05,
-    shadowRadius: 2,
-    elevation: 2,
+    // Subtle raise (`shadow-s`) — `boxShadow` on web, RN shadow/elevation on native.
+    ...bloomShadowStyle('s'),
   },
   textContainer: {
     flex: 1,