@oxyhq/bloom 0.8.2 → 0.8.3

package/src/select/index.web.tsx

@@ -4,6 +4,7 @@ import { Pressable, StyleSheet, View } from 'react-native';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { Portal } from '../portal/index.web';
+import { createOverlayZIndex } from '../styles/z-index';
 import { RadioIndicator } from '../radio-indicator';
 import { useInteractionState } from '../hooks/useInteractionState';
 import {
@@ -25,6 +26,8 @@ import type {
 
 export { useItemContext };
 
+const selectZIndex = createOverlayZIndex();
+
 // ---------------------------------------------------------------------------
 // Context
 // ---------------------------------------------------------------------------
@@ -337,13 +340,13 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     bottom: 0,
-    zIndex: 50,
+    zIndex: selectZIndex.backdrop,
     // Opt back in from the Portal root's `pointer-events: none`.
     pointerEvents: 'auto',
   },
   dropdown: {
     position: 'absolute',
-    zIndex: 60,
+    zIndex: selectZIndex.surface,
     borderRadius: 8,
     borderWidth: 1,
     overflow: 'hidden',

package/src/styles/index.ts

@@ -1,5 +1,6 @@
 export { atoms, flatten } from './atoms';
 export type { ViewStyleProp, TextStyleProp } from './atoms';
 export * as tokens from './tokens';
+export { Z_INDEX, zIndex } from './z-index';
 export { web, native, ios, android, platform, select } from './platform';
 export { SUPPORTS_NATIVE_DRIVER } from './native-driver';

package/src/styles/z-index.ts

@@ -0,0 +1,47 @@
+/**
+ * Shared stacking scale for Bloom primitives.
+ *
+ * Keep component layers on this scale instead of introducing local magic
+ * numbers. App-specific surfaces can still sit above Bloom's inline layers,
+ * while portaled overlays use `portalRoot` as the document-level host.
+ */
+export const Z_INDEX = {
+  base: 0,
+  raised: 1,
+  floating: 10,
+  sticky: 20,
+  dropdown: 40,
+  dropdownSurface: 41,
+  overlayBackdrop: 50,
+  overlaySurface: 60,
+  tooltip: 70,
+  toast: 80,
+  fullscreen: 90,
+  fullscreenControl: 91,
+  sheetHandle: 100,
+  portalRoot: 999999,
+} as const;
+
+export const Z_INDEX_LAYER_STEP = 10;
+
+function layerOffset(layer = 0) {
+  return Math.max(0, Math.floor(layer)) * Z_INDEX_LAYER_STEP;
+}
+
+export function createDropdownZIndex(layer = 0) {
+  const offset = layerOffset(layer);
+  return {
+    root: Z_INDEX.dropdown + offset,
+    surface: Z_INDEX.dropdownSurface + offset,
+  } as const;
+}
+
+export function createOverlayZIndex(layer = 0) {
+  const offset = layerOffset(layer);
+  return {
+    backdrop: Z_INDEX.overlayBackdrop + offset,
+    surface: Z_INDEX.overlaySurface + offset,
+  } as const;
+}
+
+export const zIndex = Z_INDEX;

package/src/tooltip/index.web.tsx

@@ -3,6 +3,7 @@ import { Pressable, StyleSheet, View } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
 import { atoms as a, flatten } from '../styles';
+import { Z_INDEX } from '../styles/z-index';
 import {
   ARROW_SIZE,
   BUBBLE_MAX_WIDTH,
@@ -154,6 +155,6 @@ const webStyles = StyleSheet.create({
     left: 0,
     right: 0,
     bottom: 0,
-    zIndex: 40,
+    zIndex: Z_INDEX.tooltip,
   },
 });