@oxyhq/bloom 0.8.1 → 0.8.3

package/src/popover/index.web.tsx

@@ -11,6 +11,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 { PopoverContext, usePopoverContext } from './context';
 import type {
   PopoverContentProps,
@@ -32,6 +33,8 @@ export type {
 
 export { usePopoverContext };
 
+const popoverZIndex = createOverlayZIndex();
+
 /**
  * Web self-contained control. Unlike native (which proxies a `BottomSheet`
  * via `useDialogControl`), the web popover owns its own open state and
@@ -307,12 +310,12 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     bottom: 0,
-    zIndex: 50,
+    zIndex: popoverZIndex.backdrop,
     pointerEvents: 'auto',
   },
   panel: {
     position: 'fixed' as 'absolute',
-    zIndex: 60,
+    zIndex: popoverZIndex.surface,
     borderRadius: 12,
     borderWidth: 1,
     paddingVertical: 4,

package/src/portal/index.tsx

@@ -11,6 +11,7 @@ import React, {
   useState,
 } from 'react';
 import { View, StyleSheet, Platform } from 'react-native';
+import { Z_INDEX } from '../styles/z-index';
 
 type Component = React.ReactElement;
 
@@ -120,6 +121,6 @@ const styles = StyleSheet.create({
     right: 0,
     bottom: 0,
     pointerEvents: 'box-none',
-    zIndex: 999999,
+    zIndex: Z_INDEX.portalRoot,
   },
 });

package/src/portal/index.web.tsx

@@ -15,6 +15,7 @@
  */
 import React, { Fragment, memo, useLayoutEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
+import { Z_INDEX } from '../styles/z-index';
 
 /**
  * Render children into a stable container appended to `document.body`.
@@ -52,7 +53,7 @@ function getPortalRoot(): HTMLElement | null {
     root.style.pointerEvents = 'none';
     // Above the document flow; individual portaled components can use
     // their own z-index for stacking among themselves.
-    root.style.zIndex = '999999';
+    root.style.zIndex = String(Z_INDEX.portalRoot);
     document.body.appendChild(root);
   }
   return root;

package/src/prompt-input/PromptInput.tsx

@@ -11,6 +11,7 @@ import {
 
 import { useTheme } from '../theme/use-theme';
 import { Portal } from '../portal';
+import { Z_INDEX } from '../styles/z-index';
 import { PromptInputContext, type Attachment } from './context';
 import { PromptInputTextarea } from './Textarea';
 import { PromptInputActions } from './Actions';
@@ -198,7 +199,7 @@ export function PromptInput({
               position: 'absolute',
               top: 8,
               right: 8,
-              zIndex: 10,
+              zIndex: Z_INDEX.floating,
               backgroundColor: theme.colors.background,
               borderRadius: 9999,
               padding: 6,
@@ -233,7 +234,7 @@ export function PromptInput({
             style={[
               StyleSheet.absoluteFill,
               {
-                zIndex: 9998,
+                zIndex: Z_INDEX.fullscreen,
                 backgroundColor: theme.colors.background,
                 // Opt back in from the Portal root's `pointer-events: none`
                 // (web only — harmless on native).
@@ -247,7 +248,7 @@ export function PromptInput({
                 position: 'absolute',
                 top: 16,
                 right: 16,
-                zIndex: 50,
+                zIndex: Z_INDEX.fullscreenControl,
                 padding: 8,
                 backgroundColor: theme.colors.background,
                 borderRadius: 9999,

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,
   },
 });