@oxyhq/bloom 0.8.2 → 0.8.4

package/lib/typescript/module/styles/z-index.d.ts

@@ -0,0 +1,49 @@
+/**
+ * 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 declare const Z_INDEX: {
+    readonly base: 0;
+    readonly raised: 1;
+    readonly floating: 10;
+    readonly sticky: 20;
+    readonly dropdown: 40;
+    readonly dropdownSurface: 41;
+    readonly overlayBackdrop: 50;
+    readonly overlaySurface: 60;
+    readonly tooltip: 70;
+    readonly toast: 80;
+    readonly fullscreen: 90;
+    readonly fullscreenControl: 91;
+    readonly sheetHandle: 100;
+    readonly portalRoot: 999999;
+};
+export declare const Z_INDEX_LAYER_STEP = 10;
+export declare function createDropdownZIndex(layer?: number): {
+    readonly root: number;
+    readonly surface: number;
+};
+export declare function createOverlayZIndex(layer?: number): {
+    readonly backdrop: number;
+    readonly surface: number;
+};
+export declare const zIndex: {
+    readonly base: 0;
+    readonly raised: 1;
+    readonly floating: 10;
+    readonly sticky: 20;
+    readonly dropdown: 40;
+    readonly dropdownSurface: 41;
+    readonly overlayBackdrop: 50;
+    readonly overlaySurface: 60;
+    readonly tooltip: 70;
+    readonly toast: 80;
+    readonly fullscreen: 90;
+    readonly fullscreenControl: 91;
+    readonly sheetHandle: 100;
+    readonly portalRoot: 999999;
+};
+//# sourceMappingURL=z-index.d.ts.map

package/lib/typescript/module/styles/z-index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"z-index.d.ts","sourceRoot":"","sources":["../../../../src/styles/z-index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;CAeV,CAAC;AAEX,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAMrC,wBAAgB,oBAAoB,CAAC,KAAK,SAAI;;;EAM7C;AAED,wBAAgB,mBAAmB,CAAC,KAAK,SAAI;;;EAM5C;AAED,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;CAAU,CAAC"}

package/lib/typescript/module/tooltip/index.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/tooltip/index.web.tsx"],"names":[],"mappings":"AAyBA;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CAEA;yBANe,mBAAmB;;;AASnC,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,QAAmB,EACnB,OAAO,EACP,eAAe,GAChB,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC7C,2CAkBA;AAED,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAMjE;AAED,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;CACf,kDAgEA;AAED,eAAO,MAAM,UAAU;;6CAA4B,CAAC"}
+{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/tooltip/index.web.tsx"],"names":[],"mappings":"AA0BA;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CAEA;yBANe,mBAAmB;;;AASnC,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,QAAmB,EACnB,OAAO,EACP,eAAe,GAChB,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC7C,2CAkBA;AAED,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAMjE;AAED,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;CACf,kDAgEA;AAED,eAAO,MAAM,UAAU;;6CAA4B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.8.2",
+  "version": "0.8.4",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",

package/src/avatar/Avatar.tsx

@@ -4,6 +4,7 @@ import type { TextStyle } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
 import { useImageResolver } from '../image-resolver/context';
+import { Z_INDEX } from '../styles/z-index';
 import { lazyRequire } from '../utils/lazy-require';
 import { useAvatarPlaceholder } from './placeholder-context';
 import type { AvatarProps } from './types';
@@ -308,7 +309,7 @@ const styles = StyleSheet.create({
     right: -2,
     justifyContent: 'center',
     alignItems: 'center',
-    zIndex: 1,
+    zIndex: Z_INDEX.raised,
   },
   errorDetector: {
     position: 'absolute',

package/src/badge/Badge.tsx

@@ -2,6 +2,7 @@ import React, { memo, useMemo } from 'react';
 import { View, Text, type ViewStyle, type TextStyle } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
+import { Z_INDEX } from '../styles/z-index';
 import type { BadgeProps, BadgeColor, BadgeVariant } from './types';
 
 const SIZE_CONFIG = {
@@ -135,7 +136,7 @@ const BadgeComponent: React.FC<BadgeProps> = ({
           style={[
             {
               position: 'absolute',
-              zIndex: 1,
+              zIndex: Z_INDEX.raised,
               ...PLACEMENT_CONFIG[placement],
             },
             badgeStyle,

package/src/bottom-sheet/index.tsx

@@ -11,6 +11,7 @@ import {
     type StyleProp,
 } from 'react-native';
 import { Gesture, GestureDetector, GestureHandlerRootView, type GestureType } from 'react-native-gesture-handler';
+import { Z_INDEX } from '../styles/z-index';
 import Animated, {
     interpolate,
     runOnJS,
@@ -764,7 +765,7 @@ const styles = StyleSheet.create({
         width: 36,
         height: 5,
         borderRadius: 3,
-        zIndex: 100,
+        zIndex: Z_INDEX.sheetHandle,
     },
     /**
      * Hit area for the drag handle in `manualActivation` mode. Absolutely
@@ -781,7 +782,7 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         justifyContent: 'flex-start',
         paddingTop: 6,
-        zIndex: 100,
+        zIndex: Z_INDEX.sheetHandle,
     },
     background: {
         ...StyleSheet.absoluteFill,

package/src/context-menu/index.web.tsx

@@ -19,6 +19,7 @@ import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { Portal } from '../portal/index.web';
 import { useInteractionState } from '../hooks/useInteractionState';
+import { createOverlayZIndex } from '../styles/z-index';
 import { ItemCtx, useItemContext } from './context';
 import type {
   ContextMenuContextValue,
@@ -31,6 +32,8 @@ import type {
   TriggerProps,
 } from './types';
 
+const contextMenuZIndex = createOverlayZIndex();
+
 // ---------------------------------------------------------------------------
 // Web-specific context (extends base with position)
 // ---------------------------------------------------------------------------
@@ -327,13 +330,13 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     bottom: 0,
-    zIndex: 50,
+    zIndex: contextMenuZIndex.backdrop,
     // Opt back in from the Portal root's `pointer-events: none`.
     pointerEvents: 'auto',
   },
   dropdown: {
     position: 'fixed' as 'absolute',
-    zIndex: 60,
+    zIndex: contextMenuZIndex.surface,
     borderRadius: 8,
     padding: 4,
     borderWidth: 1,

package/src/dialog/CenteredDialog.web.tsx

@@ -5,6 +5,7 @@ import { RemoveScrollBar } from 'react-remove-scroll-bar';
 import { useInteractionStates } from '../hooks/useInteractionState';
 import { TimesLarge_Stroke2_Corner0_Rounded as CloseIcon } from '../icons/Times';
 import { Portal } from '../portal/index.web';
+import { createOverlayZIndex } from '../styles/z-index';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import type { CenteredDialogProps } from './centered-dialog-types';
@@ -18,6 +19,7 @@ import {
 
 const FADE_OUT_DURATION = 150;
 const CLOSE_HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 } as const;
+const dialogZIndex = createOverlayZIndex();
 
 /** Stable testID for the dimmed backdrop. Overridden when a `testID` is set. */
 export const CENTERED_DIALOG_BACKDROP_TESTID = 'bloom-centered-dialog-backdrop';
@@ -312,7 +314,7 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     bottom: 0,
-    zIndex: 50,
+    zIndex: dialogZIndex.backdrop,
     alignItems: 'center',
     justifyContent: 'center',
     pointerEvents: 'auto',
@@ -333,7 +335,7 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.18,
     shadowRadius: 24,
     shadowOffset: { width: 0, height: 8 },
-    zIndex: 60,
+    zIndex: dialogZIndex.surface,
   },
   header: {
     flexDirection: 'row',

package/src/dialog/Dialog.web.tsx

@@ -20,6 +20,7 @@ import {
 import { RemoveScrollBar } from 'react-remove-scroll-bar';
 
 import { Portal } from '../portal/index.web';
+import { createOverlayZIndex } from '../styles/z-index';
 import type { ThemeColors } from '../theme/types';
 import { useTheme } from '../theme/use-theme';
 import { Context, useDialogContext, useDialogControl } from './context';
@@ -31,6 +32,7 @@ import type {
 } from './types';
 
 const FADE_OUT_DURATION = 150;
+const dialogZIndex = createOverlayZIndex();
 
 const stopPropagation = (e: { stopPropagation: () => void }) => e.stopPropagation();
 
@@ -143,7 +145,7 @@ export function Dialog({
               left: 0,
               right: 0,
               bottom: 0,
-              zIndex: 50,
+              zIndex: dialogZIndex.backdrop,
               alignItems: 'center',
               justifyContent: 'center',
               paddingHorizontal: 20,
@@ -216,7 +218,7 @@ function DialogPanel({
           shadowRadius: 30,
           shadowOffset: { width: 0, height: 4 },
           padding: 20,
-          zIndex: 60,
+          zIndex: dialogZIndex.surface,
         },
         isClosing
           ? ({ animation: `bloomDialogZoomFadeOut ease-in ${FADE_OUT_DURATION}ms forwards` } as ViewStyle)

package/src/dialog/SheetShell.tsx

@@ -14,6 +14,7 @@ import React, { useCallback, useImperativeHandle, useMemo, useRef } from 'react'
 import { Pressable, StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
 
 import { BottomSheet, type BottomSheetRef } from '../bottom-sheet';
+import { Z_INDEX } from '../styles/z-index';
 import { useTheme } from '../theme/use-theme';
 import { Context } from './context';
 import type { DialogControlProps } from './types';
@@ -135,7 +136,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
     width: '100%',
     alignItems: 'center',
-    zIndex: 10,
+    zIndex: Z_INDEX.floating,
     height: 20,
   },
   handleBar: {

package/src/index.ts

@@ -2,7 +2,7 @@
 export * from './theme';
 
 // Styles & Utilities
-export { atoms, flatten } from './styles';
+export { atoms, flatten, Z_INDEX, zIndex } from './styles';
 export type { ViewStyleProp, TextStyleProp } from './styles';
 export * as tokens from './styles/tokens';
 export { web, native, ios, android, platform, select } from './styles/platform';

package/src/index.web.ts

@@ -7,7 +7,7 @@
 export * from './theme';
 
 // Styles & Utilities
-export { atoms, flatten } from './styles';
+export { atoms, flatten, Z_INDEX, zIndex } from './styles';
 export type { ViewStyleProp, TextStyleProp } from './styles';
 export * as tokens from './styles/tokens';
 export { web, native, ios, android, platform, select } from './styles/platform';

package/src/menu/index.web.tsx

@@ -5,6 +5,7 @@ import React, {
   useCallback,
   useEffect,
   useId,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -13,8 +14,9 @@ import { Pressable, StyleSheet, View, type StyleProp, type ViewStyle } from 'rea
 
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
-import { Portal } from '../portal/index.web';
 import type { DialogControlProps } from '../dialog/types';
+import { Portal } from '../portal/index.web';
+import { createDropdownZIndex } from '../styles/z-index';
 import {
   MenuContext,
   ItemContext,
@@ -32,6 +34,10 @@ import type {
 
 export { useMenuContext };
 
+const menuZIndex = createDropdownZIndex();
+const VIEWPORT_GUTTER = 8;
+const MENU_OFFSET = 6;
+
 export type MenuControlProps = {
   id: string;
   isOpen: boolean;
@@ -95,25 +101,58 @@ export function Root({
   const defaultControl = useMenuControl();
   const activeControl = control ?? defaultControl;
   const dialogControl = useMenuControlAsDialogControl(activeControl);
+  const rootRef = useRef<View>(null);
+  const triggerRef = useRef<unknown>(null);
+  const dropdownRef = useRef<unknown>(null);
 
   const context = useMemo<MenuContextType>(
-    () => ({ control: dialogControl, isOpen: activeControl.isOpen }),
+    () => ({
+      control: dialogControl,
+      isOpen: activeControl.isOpen,
+      triggerRef,
+      dropdownRef,
+    }),
     [activeControl.isOpen, dialogControl],
   );
 
+  useEffect(() => {
+    if (!activeControl.isOpen || typeof document === 'undefined') {
+      return undefined;
+    }
+
+    const handlePointerDown = (event: PointerEvent) => {
+      const rootNode = rootRef.current as unknown as HTMLElement | null;
+      const dropdownNode = dropdownRef.current as HTMLElement | null;
+      const eventTarget = event.target as Node;
+      if (rootNode?.contains(eventTarget) || dropdownNode?.contains(eventTarget)) {
+        return;
+      }
+      activeControl.close();
+    };
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        activeControl.close();
+      }
+    };
+
+    document.addEventListener('pointerdown', handlePointerDown, true);
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerDown, true);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [activeControl]);
+
   return (
     <MenuContext.Provider value={context}>
-      {activeControl.isOpen && (
-        <Portal>
-          <Pressable
-            style={styles.backdrop}
-            onPress={() => activeControl.close()}
-            accessibilityHint=""
-            accessibilityLabel="Close menu"
-          />
-        </Portal>
-      )}
-      {children}
+      <View
+        ref={rootRef}
+        style={[styles.root, activeControl.isOpen && styles.openRoot]}
+      >
+        {children}
+      </View>
     </MenuContext.Provider>
   );
 }
@@ -124,7 +163,7 @@ export function Trigger({
   role = 'button',
   hint,
 }: TriggerProps) {
-  const { control } = useMenuContext();
+  const { control, triggerRef } = useMenuContext();
   const [hovered, setHovered] = useState(false);
   const [focused, setFocused] = useState(false);
 
@@ -136,6 +175,7 @@ export function Trigger({
       pressed: false,
     },
     props: {
+      ref: triggerRef,
       onPress: () => control.open(),
       onFocus: () => setFocused(true),
       onBlur: () => setFocused(false),
@@ -155,29 +195,76 @@ export function Outer({
 }>) {
   const theme = useTheme();
   const context = useMenuContext();
-  const dropdownRef = useRef<View>(null);
+  const [position, setPosition] = useState<ViewStyle | null>(null);
+
+  useLayoutEffect(() => {
+    if (!context.isOpen || typeof window === 'undefined') {
+      return;
+    }
+
+    const triggerNode = context.triggerRef?.current as HTMLElement | null;
+    if (!triggerNode?.getBoundingClientRect) {
+      return;
+    }
+
+    const updatePosition = () => {
+      const rect = triggerNode.getBoundingClientRect();
+      const width = Math.max(180, rect.width);
+      const availableRight = window.innerWidth - VIEWPORT_GUTTER;
+      const left = Math.min(
+        Math.max(VIEWPORT_GUTTER, rect.right - width),
+        Math.max(VIEWPORT_GUTTER, availableRight - width),
+      );
+      const top = Math.min(
+        rect.bottom + MENU_OFFSET,
+        Math.max(VIEWPORT_GUTTER, window.innerHeight - VIEWPORT_GUTTER),
+      );
+
+      setPosition({
+        position: 'fixed' as 'absolute',
+        top,
+        left,
+        right: undefined,
+        bottom: undefined,
+        minWidth: width,
+      });
+    };
+
+    updatePosition();
+    window.addEventListener('resize', updatePosition);
+    window.addEventListener('scroll', updatePosition, true);
+
+    return () => {
+      window.removeEventListener('resize', updatePosition);
+      window.removeEventListener('scroll', updatePosition, true);
+    };
+  }, [context.isOpen, context.triggerRef]);
 
   if (!context.isOpen) {
     return null;
   }
 
   return (
-    <View
-      ref={dropdownRef}
-      style={[
-        styles.dropdown,
-        {
-          backgroundColor: theme.isDark
-            ? theme.colors.backgroundSecondary
-            : theme.colors.background,
-          borderColor: theme.colors.borderLight,
-          shadowColor: theme.colors.shadow,
-        },
-        style,
-      ]}
-    >
-      {children}
-    </View>
+    <Portal>
+      <View
+        ref={context.dropdownRef as React.Ref<View>}
+        style={[
+          styles.dropdown,
+          {
+            backgroundColor: theme.isDark
+              ? theme.colors.backgroundSecondary
+              : theme.colors.background,
+            borderColor: theme.colors.borderLight,
+            shadowColor: theme.colors.shadow,
+          },
+          style,
+          styles.portaledDropdown,
+          position,
+        ]}
+      >
+        {children}
+      </View>
+    </Portal>
   );
 }
 
@@ -294,26 +381,26 @@ export function Divider() {
 }
 
 const styles = StyleSheet.create({
-  backdrop: {
-    position: 'fixed' as 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    zIndex: 50,
-    // Opt back in from the Portal root's `pointer-events: none`.
-    pointerEvents: 'auto',
+  root: {
+    position: 'relative',
+  },
+  openRoot: {
+    zIndex: menuZIndex.root,
   },
   dropdown: {
     borderRadius: 8,
     padding: 4,
     borderWidth: 1,
     overflow: 'hidden',
+    zIndex: menuZIndex.surface,
     shadowOpacity: 0.15,
     shadowRadius: 12,
     shadowOffset: { width: 0, height: 4 },
     minWidth: 180,
   },
+  portaledDropdown: {
+    pointerEvents: 'auto',
+  },
   webItem: {
     flexDirection: 'row',
     alignItems: 'center',

package/src/menu/types.ts

@@ -10,9 +10,20 @@ import type {
 import type { Props as SVGIconProps } from '../icons/common';
 import type { DialogControlProps } from '../dialog/types';
 
+export type MenuAnchorRect = {
+  top: number;
+  left: number;
+  right: number;
+  bottom: number;
+  width: number;
+  height: number;
+};
+
 export type MenuContextType = {
   control: DialogControlProps;
   isOpen?: boolean;
+  triggerRef?: React.RefObject<unknown>;
+  dropdownRef?: React.RefObject<unknown>;
 };
 
 export type ItemContextType = {
@@ -27,6 +38,7 @@ export type TriggerChildProps = {
     pressed: boolean;
   };
   props: {
+    ref?: React.Ref<unknown>;
     onPress: () => void;
     onFocus?: () => void;
     onBlur?: () => void;

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',