@oxyhq/bloom 0.62.0 → 0.63.0

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":"AAKA;;;;;;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;;;;;GAKG;AACH,eAAO,MAAM,aAAa,KAAiB,CAAC;AAC5C,eAAO,MAAM,aAAa,KAAiB,CAAC;AAC5C,eAAO,MAAM,aAAa,MAAiB,CAAC;AAC5C,eAAO,MAAM,aAAa,MAAiB,CAAC;AAU5C,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"}
+{"version":3,"file":"placement.d.ts","sourceRoot":"","sources":["../../../../src/dialog/placement.ts"],"names":[],"mappings":"AAKA;;;;;;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;;;;;GAKG;AACH,eAAO,MAAM,aAAa,KAAiB,CAAC;AAC5C,eAAO,MAAM,aAAa,KAAiB,CAAC;AAC5C,eAAO,MAAM,aAAa,MAAiB,CAAC;AAC5C,eAAO,MAAM,aAAa,MAAiB,CAAC;AAU5C,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;AAGzD,+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/overlay/index.d.ts

@@ -47,8 +47,15 @@ import { type SharedValue } from 'react-native-reanimated';
  * not in how the app behind them recedes.
  */
 export declare const BACKDROP_BLUR_INTENSITY = 80;
-/** Dim laid over the blur — the blur alone does not give enough contrast. */
-export declare const BACKDROP_DIM_OPACITY = 0.55;
+/**
+ * Extra dim laid OVER the blur. The blur already paints its own tint wash
+ * (`rgba(25,25,25,~0.62)` at the intensity above), so this is what takes the
+ * total to roughly 0.72 — dark enough to read a panel against, still clearly
+ * see-through. Every surface uses this one value: with each of them picking its
+ * own, menus landed at ~0.83 and read as solid black next to the image viewer's
+ * ~0.72.
+ */
+export declare const BACKDROP_DIM_OPACITY = 0.28;
 export interface OverlayRootProps {
     children?: ReactNode;
     style?: StyleProp<ViewStyle>;

package/lib/typescript/module/overlay/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/overlay/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAiB,EAAoB,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAMvF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAC1C,6EAA6E;AAC7E,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAEzC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,gBAAgB,2CAMxE;yBANe,WAAW;;;AAU3B,MAAM,WAAW,aAAa;IAC5B,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/B,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IACxC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wBAAwB;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,sFAAsF;IACtF,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;GAIG;AACH,eAAO,MAAM,QAAQ,qDAgEnB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/overlay/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAiB,EAAoB,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAMvF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAC1C;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAEzC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,gBAAgB,2CAMxE;yBANe,WAAW;;;AAU3B,MAAM,WAAW,aAAa;IAC5B,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/B,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IACxC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wBAAwB;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,sFAAsF;IACtF,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;GAIG;AACH,eAAO,MAAM,QAAQ,qDAgEnB,CAAC"}

package/lib/typescript/module/zoomable-image-gallery/ZoomableImageGallery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ZoomableImageGallery.d.ts","sourceRoot":"","sources":["../../../../src/zoomable-image-gallery/ZoomableImageGallery.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAoEjF,OAAO,KAAK,EAGV,0BAA0B,EAC1B,yBAAyB,EAC1B,MAAM,SAAS,CAAC;AAk7BjB,eAAO,MAAM,oBAAoB,8GAA4B,CAAC;AAyK9D,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"ZoomableImageGallery.d.ts","sourceRoot":"","sources":["../../../../src/zoomable-image-gallery/ZoomableImageGallery.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAoEjF,OAAO,KAAK,EAGV,0BAA0B,EAC1B,yBAAyB,EAC1B,MAAM,SAAS,CAAC;AAi7BjB,eAAO,MAAM,oBAAoB,8GAA4B,CAAC;AAyK9D,eAAe,oBAAoB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.62.0",
+  "version": "0.63.0",
   "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__/animated-style-deps.test.ts

@@ -35,7 +35,7 @@ const MAPPERS = ['useAnimatedStyle', 'useDerivedValue', 'useAnimatedProps'] as c
 const ALLOWED: Array<{ file: string; count: number; reason: string }> = [
   {
     file: 'dialog/Dialog.tsx',
-    count: 2,
+    count: 1,
     reason:
       'Native-only fork: web resolves Dialog.web.tsx (see dialog/index.web.ts), ' +
       'and on native the worklets plugin auto-tracks reads, so the deps array is ' +

package/src/bottom-sheet/BottomSheetBase.tsx

@@ -26,7 +26,7 @@ import Animated, {
     withTiming,
 } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Backdrop } from '../overlay';
+import { Backdrop, BACKDROP_DIM_OPACITY } from '../overlay';
 import { useTheme } from '../theme/use-theme';
 
 /** Hook that returns current screen dimensions and updates on rotation/resize. */
@@ -214,7 +214,7 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
         onDismissAttempt,
         detached = false,
         showHandle = true,
-        backdropOpacity = 0.5,
+        backdropOpacity = BACKDROP_DIM_OPACITY,
         scrollable = true,
         manualActivation = false,
         dynamicBackdrop = false,
@@ -654,8 +654,8 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
                 'clamp',
             )
             : 1;
-        return opacity.value * backdropOpacity * dragFactor;
-    }, [backdropOpacity, dynamicBackdrop, opacity, translateY, screenHeightSV]);
+        return opacity.value * dragFactor;
+    }, [dynamicBackdrop, opacity, translateY, screenHeightSV]);
 
     // Only the consumer-supplied `backdropComponent` needs the progress as a
     // style — it owns its own visuals, blur included, so the ancestor-opacity
@@ -806,12 +806,14 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
                     // switched off here to keep a single source of dimming.
                     <Backdrop
                         onPress={handleBackdropPress}
-                        // `backdropProgress` already folds in `backdropOpacity`
-                        // and the drag factor, so the dim rides at full weight.
-                        // It goes through `progress` rather than an animated
-                        // style because an opacity on the root would sit above
-                        // the blur layer and neutralise it.
-                        dimOpacity={1}
+                        // `progress` is the FADE (0 → 1, folding the drag);
+                        // how dark the backdrop gets is `backdropOpacity`,
+                        // which defaults to the library-wide dim so a sheet
+                        // matches every other surface. It goes through
+                        // `progress` rather than an animated style because an
+                        // opacity on the root would sit above the blur layer
+                        // and neutralise it.
+                        dimOpacity={backdropOpacity}
                         progress={backdropProgress}
                         style={styles.backdrop}
                     />

package/src/dialog/Dialog.tsx

@@ -26,6 +26,7 @@ import Animated, {
 } from 'react-native-reanimated';
 
 import { BottomSheet, type BottomSheetRef } from '../bottom-sheet';
+import { Backdrop } from '../overlay';
 import { Z_INDEX, Z_INDEX_LAYER_STEP } from '../styles/z-index';
 import { useTheme } from '../theme/use-theme';
 import { Context, useDialogControl } from './context';
@@ -46,7 +47,6 @@ import {
   DEFAULT_SIDE_WIDTH,
   DIALOG_SHEET_BACKDROP_TESTID,
   PANEL_RADIUS,
-  SHEET_BACKDROP_OPACITY,
   SIDE_SHEET_MIN_GUTTER,
   useResolvedPlacement,
 } from './placement';
@@ -486,10 +486,6 @@ function SideSheet({
     if (dismissOnBackdrop) onDismiss();
   }, [dismissOnBackdrop, onDismiss]);
 
-  const backdropAnimatedStyle = useAnimatedStyle(() => ({
-    opacity: progress.value * SHEET_BACKDROP_OPACITY,
-  }), []);
-
   const hiddenSign = side === 'left' ? -1 : 1;
   const panelAnimatedStyle = useAnimatedStyle(() => {
     const hidden = 1 - progress.value;
@@ -533,18 +529,14 @@ function SideSheet({
       ]}
       {...(containerClassName ? ({ className: containerClassName } as Record<string, string>) : {})}
     >
-      <Animated.View
-        style={[sideStyles.backdrop, backdropAnimatedStyle, { pointerEvents: 'auto' }]}
-      >
-        <Pressable
-          testID={testID ? `${testID}-backdrop` : DIALOG_SHEET_BACKDROP_TESTID}
-          accessibilityRole="button"
-          accessibilityLabel={label ? `Dismiss ${label}` : 'Dismiss dialog'}
-          onPress={handleBackdropPress}
-          disabled={!dismissOnBackdrop}
-          style={StyleSheet.absoluteFill}
-        />
-      </Animated.View>
+      <Backdrop
+        testID={testID ? `${testID}-backdrop` : DIALOG_SHEET_BACKDROP_TESTID}
+        accessibilityLabel={label ? `Dismiss ${label}` : 'Dismiss dialog'}
+        onPress={handleBackdropPress}
+        disabled={!dismissOnBackdrop}
+        progress={progress}
+        style={sideStyles.backdrop}
+      />
 
       <Animated.View
         accessibilityViewIsModal

package/src/dialog/Dialog.web.tsx

@@ -47,7 +47,6 @@ import {
   DIALOG_SHEET_BACKDROP_TESTID,
   EASE_OUT,
   PANEL_RADIUS,
-  SHEET_BACKDROP_OPACITY,
   SIDE_SHEET_MIN_GUTTER,
   useResolvedPlacement,
 } from './placement';
@@ -60,11 +59,6 @@ import type {
 
 const FADE_OUT_DURATION = CENTER_FADE_OUT_DURATION;
 
-/**
- * The centered card's scrim reads darker than a sheet's because the card floats
- * in the middle of it; the shared blur underneath is identical.
- */
-const DIALOG_BACKDROP_DIM_OPACITY = 0.6;
 
 /**
  * The four CSS `animation` shorthands driving the centered card and its backdrop.
@@ -331,7 +325,6 @@ function CenterOrSideDialog({
               onPress={() => close()}
               disabled={!dismissOnBackdrop}
               accessibilityLabel={label ? `Dismiss ${label}` : 'Dismiss dialog'}
-              dimOpacity={DIALOG_BACKDROP_DIM_OPACITY}
               // The fade rides on the LAYERS, never on the press target: an
               // opacity animation on the blur's ancestor composites the group in
               // isolation and leaves `backdrop-filter` nothing to sample.
@@ -705,7 +698,7 @@ function SheetSurface({
         disabled={!dismissOnBackdrop}
         // Same reason as the centred dialog: the transition and the opacity it
         // animates belong to the layers, not to the press target above them.
-        dimOpacity={SHEET_BACKDROP_OPACITY}
+        // No `dimOpacity` override — one darkness for every Bloom surface.
         layerStyle={backdropTransition}
         style={[sheetStyles.backdrop, { opacity: visible ? 1 : 0 }]}
       />

package/src/dialog/DialogBottomSheet.tsx

@@ -30,7 +30,6 @@ import {
   DEFAULT_DIALOG_CONTENT_PADDING,
   DEFAULT_MAX_HEIGHT_RATIO,
   PANEL_RADIUS,
-  SHEET_BACKDROP_OPACITY,
 } from './placement';
 import type { DialogControlProps, DialogProps } from './types';
 
@@ -286,7 +285,6 @@ export function DialogBottomSheet({
       }
       // 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={SHEET_BACKDROP_OPACITY + 0.3}
       // Measures the sheet card — the size a morph starts from.
       onLayout={morphState.onPanelLayout}
       style={sheetStyle}

package/src/dialog/placement.ts

@@ -83,8 +83,6 @@ export const CENTER_FADE_OUT_DURATION = 150;
 /** CSS approximation of reanimated's `Easing.out(Easing.cubic)`. */
 export const EASE_OUT = 'cubic-bezier(0.33, 1, 0.68, 1)';
 
-/** Backdrop dim opacity once fully shown (matches `bg-black/40`). */
-export const SHEET_BACKDROP_OPACITY = 0.4;
 
 /** Stable testID for the dimmed backdrop of a side/bottom placement dialog. */
 export const DIALOG_SHEET_BACKDROP_TESTID = 'bloom-dialog-sheet-backdrop';

package/src/overlay/index.tsx

@@ -60,8 +60,15 @@ const AnimatedBlurView = Animated.createAnimatedComponent(BlurView);
  * not in how the app behind them recedes.
  */
 export const BACKDROP_BLUR_INTENSITY = 80;
-/** Dim laid over the blur — the blur alone does not give enough contrast. */
-export const BACKDROP_DIM_OPACITY = 0.55;
+/**
+ * Extra dim laid OVER the blur. The blur already paints its own tint wash
+ * (`rgba(25,25,25,~0.62)` at the intensity above), so this is what takes the
+ * total to roughly 0.72 — dark enough to read a panel against, still clearly
+ * see-through. Every surface uses this one value: with each of them picking its
+ * own, menus landed at ~0.83 and read as solid black next to the image viewer's
+ * ~0.72.
+ */
+export const BACKDROP_DIM_OPACITY = 0.28;
 
 export interface OverlayRootProps {
   children?: ReactNode;

package/src/zoomable-image-gallery/ZoomableImageGallery.tsx

@@ -796,7 +796,6 @@ const ZoomableImageGalleryInner = React.forwardRef<ZoomableImageGalleryHandle, Z
         <Backdrop
           onPress={handleDismiss}
           accessibilityLabel="Close image viewer"
-          dimColor={theme.colors.overlay}
           progress={opacity}
         />