@oxyhq/bloom 0.13.0 → 0.14.0

package/src/index.ts

@@ -88,6 +88,14 @@ export type { ComboboxProps, ComboboxOption } from './combobox';
 export { BottomSheet } from './bottom-sheet';
 export type { BottomSheetRef, BottomSheetProps } from './bottom-sheet';
 
+// Responsive sheet — side-sheet on wide screens, bottom-sheet on narrow.
+export { ResponsiveSheet, RESPONSIVE_SHEET_BACKDROP_TESTID } from './responsive-sheet';
+export type {
+  ResponsiveSheetProps,
+  ResponsiveSheetSide,
+  ResponsiveSheetInset,
+} from './responsive-sheet';
+
 // Data display
 export * from './card';
 export * from './badge';

package/src/index.web.ts

@@ -93,6 +93,14 @@ export type { ComboboxProps, ComboboxOption } from './combobox/index.web';
 export { BottomSheet } from './bottom-sheet';
 export type { BottomSheetRef, BottomSheetProps } from './bottom-sheet';
 
+// Responsive sheet — side-sheet on wide screens, bottom-sheet on narrow.
+export { ResponsiveSheet, RESPONSIVE_SHEET_BACKDROP_TESTID } from './responsive-sheet/index.web';
+export type {
+  ResponsiveSheetProps,
+  ResponsiveSheetSide,
+  ResponsiveSheetInset,
+} from './responsive-sheet/index.web';
+
 // Data display
 export * from './card';
 export * from './badge';

package/src/responsive-sheet/ResponsiveSheet.native.tsx

@@ -0,0 +1,257 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Pressable,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+  type ViewStyle,
+} from 'react-native';
+import Animated, {
+  cancelAnimation,
+  Easing,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { Z_INDEX } from '../styles/z-index';
+import { useTheme } from '../theme/use-theme';
+import {
+  ANIMATION_DURATION,
+  BACKDROP_OPACITY,
+  DEFAULT_BREAKPOINT,
+  DEFAULT_LABEL,
+  DEFAULT_MAX_HEIGHT_RATIO,
+  DEFAULT_SIDE,
+  DEFAULT_WIDTH,
+  HANDLE_HEIGHT,
+  HANDLE_RADIUS,
+  HANDLE_WIDTH,
+  PANEL_RADIUS,
+  SIDE_SHEET_MIN_GUTTER,
+} from './const';
+import type { ResponsiveSheetProps } from './types';
+
+/** Stable testID for the dimmed backdrop dismiss button. */
+export const RESPONSIVE_SHEET_BACKDROP_TESTID = 'bloom-responsive-sheet-backdrop';
+
+/**
+ * Native variant of `<ResponsiveSheet>` (selected only by Metro).
+ *
+ * Uses `react-native-reanimated` to drive the same motion as the web/CSS
+ * default fork: a shared `progress` value times 0 -> 1 on open and 1 -> 0 on
+ * close, mapped to the panel translate/opacity and the backdrop opacity.
+ * Native exit animations are safe here — the web-only `removeChild` crash does
+ * not apply — so we keep the node mounted through the close timing and unmount
+ * from the animation completion callback.
+ *
+ * The panel itself is measured (not percentage-translated): we offset by the
+ * panel's own width/height so the hidden state sits fully off its side, which
+ * is the reanimated-friendly equivalent of the web `translate(±100%)`.
+ */
+export function ResponsiveSheet({
+  open,
+  onClose,
+  side = DEFAULT_SIDE,
+  breakpoint = DEFAULT_BREAKPOINT,
+  width = DEFAULT_WIDTH,
+  maxHeightRatio = DEFAULT_MAX_HEIGHT_RATIO,
+  inset,
+  showHandle = true,
+  dismissOnBackdrop = true,
+  panelStyle,
+  panelClassName,
+  containerStyle,
+  containerClassName,
+  label = DEFAULT_LABEL,
+  children,
+}: ResponsiveSheetProps) {
+  const theme = useTheme();
+  const { width: viewportWidth, height: viewportHeight } = useWindowDimensions();
+
+  // Keep the tree mounted through the exit timing; unmount once it settles.
+  const [mounted, setMounted] = useState(open);
+  // `progress`: 0 = fully hidden, 1 = fully shown. Drives both transform and
+  // opacity so a single timing controls the whole transition.
+  const progress = useSharedValue(open ? 1 : 0);
+
+  const isBottom = viewportWidth < breakpoint;
+
+  // Measured panel extent along the travel axis. Falls back to the geometry
+  // target so the very first frame is already off-screen before layout lands.
+  const insetTop = inset?.top ?? 0;
+  const insetBottom = inset?.bottom ?? 0;
+  const insetLeft = inset?.left ?? 0;
+  const insetRight = inset?.right ?? 0;
+  const anchorInset = side === 'left' ? insetLeft : insetRight;
+  const oppositeInset = side === 'left' ? insetRight : insetLeft;
+
+  const sideWidth = useMemo(() => {
+    const available = viewportWidth - anchorInset - oppositeInset - SIDE_SHEET_MIN_GUTTER;
+    return Math.max(0, Math.min(width, available));
+  }, [viewportWidth, anchorInset, oppositeInset, width]);
+
+  const bottomMaxHeight = useMemo(
+    () => Math.round(viewportHeight * maxHeightRatio),
+    [viewportHeight, maxHeightRatio],
+  );
+
+  // Travel distance for the hidden state: the panel's measured extent (height
+  // for the bottom-sheet, width for the side-sheet), with the geometry target
+  // as the pre-measurement fallback.
+  const travel = useSharedValue(isBottom ? bottomMaxHeight : sideWidth);
+  useEffect(() => {
+    travel.value = isBottom ? bottomMaxHeight : sideWidth;
+  }, [isBottom, bottomMaxHeight, sideWidth, travel]);
+
+  const finishClose = useCallback(() => {
+    setMounted(false);
+  }, []);
+
+  useEffect(() => {
+    cancelAnimation(progress);
+    const timing = { duration: ANIMATION_DURATION, easing: Easing.out(Easing.cubic) };
+    if (open) {
+      setMounted(true);
+      progress.value = withTiming(1, timing);
+      return;
+    }
+    if (!mounted) return;
+    progress.value = withTiming(0, timing, (finished) => {
+      if (finished) runOnJS(finishClose)();
+    });
+  }, [open, mounted, progress, finishClose]);
+
+  const handleBackdropPress = useCallback(() => {
+    if (dismissOnBackdrop) onClose();
+  }, [dismissOnBackdrop, onClose]);
+
+  const backdropAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: progress.value * BACKDROP_OPACITY,
+  }));
+
+  const hiddenSign = side === 'left' ? -1 : 1;
+  const panelAnimatedStyle = useAnimatedStyle(() => {
+    const hidden = 1 - progress.value;
+    if (isBottom) {
+      return {
+        opacity: progress.value,
+        transform: [{ translateY: hidden * travel.value }],
+      };
+    }
+    return {
+      opacity: progress.value,
+      transform: [{ translateX: hidden * travel.value * hiddenSign }],
+    };
+  }, [isBottom, hiddenSign]);
+
+  const measurePanel = useCallback(
+    (e: { nativeEvent: { layout: { width: number; height: number } } }) => {
+      const measured = isBottom ? e.nativeEvent.layout.height : e.nativeEvent.layout.width;
+      if (measured > 0) travel.value = measured;
+    },
+    [isBottom, travel],
+  );
+
+  const panelGeometry = useMemo<ViewStyle>(() => {
+    if (isBottom) {
+      return {
+        left: 0,
+        right: 0,
+        bottom: 0,
+        maxHeight: bottomMaxHeight,
+        borderTopLeftRadius: PANEL_RADIUS,
+        borderTopRightRadius: PANEL_RADIUS,
+      };
+    }
+    return {
+      top: insetTop,
+      bottom: insetBottom,
+      [side]: anchorInset,
+      width: sideWidth,
+      borderRadius: PANEL_RADIUS,
+    } as ViewStyle;
+  }, [isBottom, bottomMaxHeight, insetTop, insetBottom, side, anchorInset, sideWidth]);
+
+  if (!mounted) return null;
+
+  return (
+    <View
+      style={[styles.root, containerStyle]}
+      {...(containerClassName ? ({ className: containerClassName } as Record<string, string>) : {})}
+      pointerEvents="box-none"
+    >
+      <Animated.View style={[styles.backdrop, backdropAnimatedStyle]} pointerEvents="auto">
+        <Pressable
+          testID={RESPONSIVE_SHEET_BACKDROP_TESTID}
+          accessibilityRole="button"
+          accessibilityLabel={`Dismiss ${label}`}
+          onPress={handleBackdropPress}
+          disabled={!dismissOnBackdrop}
+          style={StyleSheet.absoluteFill}
+        />
+      </Animated.View>
+
+      <Animated.View
+        accessibilityViewIsModal
+        {...(panelClassName ? ({ className: panelClassName } as Record<string, string>) : {})}
+        onLayout={measurePanel}
+        style={[
+          styles.panel,
+          { backgroundColor: theme.colors.background, shadowColor: theme.colors.shadow },
+          panelGeometry,
+          panelAnimatedStyle,
+          panelStyle,
+        ]}
+        pointerEvents="auto"
+      >
+        {isBottom && showHandle ? (
+          <View style={styles.handleRow} pointerEvents="none">
+            <View style={[styles.handle, { backgroundColor: theme.colors.border }]} />
+          </View>
+        ) : null}
+        {children}
+      </Animated.View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    ...StyleSheet.absoluteFill,
+    zIndex: Z_INDEX.fullscreen,
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFill,
+    backgroundColor: '#000',
+  },
+  panel: {
+    position: 'absolute',
+    overflow: 'hidden',
+    shadowOpacity: 0.18,
+    shadowRadius: 24,
+    shadowOffset: { width: 0, height: 8 },
+    elevation: 12,
+  },
+  handleRow: {
+    width: '100%',
+    alignItems: 'center',
+    paddingTop: 8,
+    paddingBottom: 4,
+  },
+  handle: {
+    width: HANDLE_WIDTH,
+    height: HANDLE_HEIGHT,
+    borderRadius: HANDLE_RADIUS,
+    opacity: 0.5,
+  },
+});
+
+export default ResponsiveSheet;

package/src/responsive-sheet/ResponsiveSheet.stories.tsx

@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { ResponsiveSheet } from './index';
+import type { ResponsiveSheetSide } from './types';
+import { Button } from '../button';
+import { Text } from '../typography';
+
+const meta: Meta = {
+  title: 'Overlays/ResponsiveSheet',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+function Demo({ side }: { side: ResponsiveSheetSide }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <View style={{ padding: 24, minHeight: 480 }}>
+      <Button onPress={() => setOpen(true)}>Open sheet ({side})</Button>
+      <ResponsiveSheet
+        open={open}
+        onClose={() => setOpen(false)}
+        side={side}
+        width={420}
+        inset={{ top: 16, bottom: 16, left: 16 }}
+        label="Demo sheet"
+      >
+        <View style={{ padding: 20, gap: 12 }}>
+          <Text style={{ fontSize: 20, fontWeight: '700' }}>Responsive sheet</Text>
+          <Text>
+            On a wide viewport this is an anchored side-sheet; below the
+            breakpoint it becomes a bottom-sheet with a drag handle. Resize the
+            preview to switch modes.
+          </Text>
+          <Button variant="secondary" onPress={() => setOpen(false)}>
+            Close
+          </Button>
+        </View>
+      </ResponsiveSheet>
+    </View>
+  );
+}
+
+export const SideLeft: Story = {
+  render: () => <Demo side="left" />,
+};
+
+export const SideRight: Story = {
+  render: () => <Demo side="right" />,
+};

package/src/responsive-sheet/ResponsiveSheet.tsx

@@ -0,0 +1,327 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Pressable,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+  type ViewStyle,
+} from 'react-native';
+
+import { Z_INDEX } from '../styles/z-index';
+import { useTheme } from '../theme/use-theme';
+import {
+  ANIMATION_DURATION,
+  BACKDROP_OPACITY,
+  DEFAULT_BREAKPOINT,
+  DEFAULT_LABEL,
+  DEFAULT_MAX_HEIGHT_RATIO,
+  DEFAULT_SIDE,
+  DEFAULT_WIDTH,
+  EASE_OUT,
+  HANDLE_HEIGHT,
+  HANDLE_RADIUS,
+  HANDLE_WIDTH,
+  PANEL_RADIUS,
+  SIDE_SHEET_MIN_GUTTER,
+} from './const';
+import type { ResponsiveSheetProps } from './types';
+
+/** Stable testID for the dimmed backdrop dismiss button. */
+export const RESPONSIVE_SHEET_BACKDROP_TESTID = 'bloom-responsive-sheet-backdrop';
+
+/**
+ * Default / web variant of `<ResponsiveSheet>`.
+ *
+ * This file is BOTH the package's default entry (`react-native` export
+ * condition resolves it for downstream `tsc`, and non-Metro web bundlers pick
+ * it via the `browser` condition through `index.web`) AND the canonical web
+ * implementation. It MUST NOT import `react-native-reanimated` — reanimated has
+ * no web build and its worklets Babel plugin is native-only, so a static import
+ * here would break every web bundler and downstream type-check. The native
+ * fork (`ResponsiveSheet.native.tsx`, selected only by Metro) drives the same
+ * motion with reanimated.
+ *
+ * Motion is pure CSS transitions: react-native-web emits `transition-*` style
+ * props to the DOM, and the panel/backdrop toggle their transform/opacity by a
+ * `shown` flag. Presence is handled with a `mounted` + `shown` pair so both the
+ * open AND close directions animate while the node stays mounted through the
+ * exit. We deliberately do NOT use reanimated `exiting` on web — concurrent
+ * React unmounts there throw `Failed to execute 'removeChild' on 'Node'`, the
+ * exact bug this component exists to avoid.
+ */
+export function ResponsiveSheet({
+  open,
+  onClose,
+  side = DEFAULT_SIDE,
+  breakpoint = DEFAULT_BREAKPOINT,
+  width = DEFAULT_WIDTH,
+  maxHeightRatio = DEFAULT_MAX_HEIGHT_RATIO,
+  inset,
+  showHandle = true,
+  dismissOnBackdrop = true,
+  panelStyle,
+  panelClassName,
+  containerStyle,
+  containerClassName,
+  label = DEFAULT_LABEL,
+  children,
+}: ResponsiveSheetProps) {
+  const theme = useTheme();
+  const { width: viewportWidth, height: viewportHeight } = useWindowDimensions();
+
+  // Presence: `mounted` keeps the node in the tree through the exit transition;
+  // `shown` drives the enter/exit transform & opacity. On open we mount first,
+  // then flip `shown` on the next frame so the browser registers the start
+  // state and animates to the end. On close we flip `shown` off, then unmount
+  // after the transition duration.
+  const [mounted, setMounted] = useState(open);
+  const [shown, setShown] = useState(false);
+  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const frameRef = useRef<FrameToken | null>(null);
+
+  useEffect(() => {
+    if (open) {
+      if (closeTimerRef.current) {
+        clearTimeout(closeTimerRef.current);
+        closeTimerRef.current = null;
+      }
+      setMounted(true);
+      // Defer to the next frame so the entry start state paints before we
+      // transition to the shown state. Two frames guarantees the start
+      // transform has committed before the toggle (a single frame can be
+      // coalesced with the mount paint in some browsers).
+      frameRef.current = scheduleFrame(() => {
+        frameRef.current = scheduleFrame(() => setShown(true));
+      });
+      return () => {
+        if (frameRef.current !== null) {
+          cancelFrame(frameRef.current);
+          frameRef.current = null;
+        }
+      };
+    }
+
+    // Closing: only run the exit if something is currently mounted.
+    setShown(false);
+    if (!mounted) return;
+    closeTimerRef.current = setTimeout(() => {
+      setMounted(false);
+      closeTimerRef.current = null;
+    }, ANIMATION_DURATION);
+    return () => {
+      if (closeTimerRef.current) {
+        clearTimeout(closeTimerRef.current);
+        closeTimerRef.current = null;
+      }
+    };
+  }, [open, mounted]);
+
+  // Escape-to-close while open (web only; document is undefined elsewhere).
+  useEffect(() => {
+    if (!open || typeof document === 'undefined') return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.stopPropagation();
+        onClose();
+      }
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [open, onClose]);
+
+  const handleBackdropPress = useCallback(() => {
+    if (dismissOnBackdrop) onClose();
+  }, [dismissOnBackdrop, onClose]);
+
+  const isBottom = viewportWidth < breakpoint;
+  const panelBackground = theme.colors.background;
+
+  const panelTransition = useMemo<ViewStyle>(
+    () =>
+      ({
+        transitionProperty: 'transform, opacity',
+        transitionDuration: `${ANIMATION_DURATION}ms`,
+        transitionTimingFunction: EASE_OUT,
+      }) as ViewStyle,
+    [],
+  );
+
+  const backdropTransition = useMemo<ViewStyle>(
+    () =>
+      ({
+        transitionProperty: 'opacity',
+        transitionDuration: `${ANIMATION_DURATION}ms`,
+        transitionTimingFunction: EASE_OUT,
+      }) as ViewStyle,
+    [],
+  );
+
+  const panelGeometry = useMemo<ViewStyle>(() => {
+    if (isBottom) {
+      return {
+        left: 0,
+        right: 0,
+        bottom: 0,
+        maxHeight: Math.round(viewportHeight * maxHeightRatio),
+        borderTopLeftRadius: PANEL_RADIUS,
+        borderTopRightRadius: PANEL_RADIUS,
+        transform: [{ translateY: shown ? 0 : '100%' }],
+        opacity: shown ? 1 : 0,
+      } as ViewStyle;
+    }
+
+    // Side-sheet: full height minus top/bottom inset, anchored to `side`,
+    // offset by the matching horizontal inset. Width is capped so the panel
+    // always leaves a gutter on the opposite edge.
+    const insetTop = inset?.top ?? 0;
+    const insetBottom = inset?.bottom ?? 0;
+    const insetLeft = inset?.left ?? 0;
+    const insetRight = inset?.right ?? 0;
+    const anchorInset = side === 'left' ? insetLeft : insetRight;
+    const oppositeInset = side === 'left' ? insetRight : insetLeft;
+    const available = viewportWidth - anchorInset - oppositeInset - SIDE_SHEET_MIN_GUTTER;
+    const cappedWidth = Math.max(0, Math.min(width, available));
+    const hiddenSign = side === 'left' ? '-100%' : '100%';
+
+    return {
+      top: insetTop,
+      bottom: insetBottom,
+      [side]: anchorInset,
+      width: cappedWidth,
+      borderRadius: PANEL_RADIUS,
+      transform: [{ translateX: shown ? 0 : hiddenSign }],
+      opacity: shown ? 1 : 0,
+    } as ViewStyle;
+  }, [isBottom, shown, side, width, inset, viewportWidth, viewportHeight, maxHeightRatio]);
+
+  if (!mounted) return null;
+
+  return (
+    <View
+      style={[styles.root, containerStyle]}
+      // NativeWind reads `className` at runtime; RN core does not type it on
+      // View, so spread it conditionally (matching the Button/Fab pattern).
+      {...(containerClassName ? ({ className: containerClassName } as Record<string, string>) : {})}
+      pointerEvents="box-none"
+    >
+      <Pressable
+        testID={RESPONSIVE_SHEET_BACKDROP_TESTID}
+        accessibilityRole="button"
+        accessibilityLabel={`Dismiss ${label}`}
+        onPress={handleBackdropPress}
+        disabled={!dismissOnBackdrop}
+        style={[
+          styles.backdrop,
+          backdropTransition,
+          { opacity: shown ? BACKDROP_OPACITY : 0 },
+          isWeb ? webBackdropBlur : null,
+        ]}
+      />
+
+      <View
+        accessibilityViewIsModal
+        aria-label={label}
+        {...(panelClassName ? ({ className: panelClassName } as Record<string, string>) : {})}
+        style={[
+          styles.panel,
+          { backgroundColor: panelBackground, shadowColor: theme.colors.shadow },
+          panelGeometry,
+          panelTransition,
+          panelStyle,
+        ]}
+        pointerEvents="auto"
+      >
+        {isBottom && showHandle ? (
+          <View style={styles.handleRow} pointerEvents="none">
+            <View style={[styles.handle, { backgroundColor: theme.colors.border }]} />
+          </View>
+        ) : null}
+        {children}
+      </View>
+    </View>
+  );
+}
+
+// This module is the web/default impl, but it is also the fallback resolved by
+// a downstream consumer's `tsc` for the native target, so guard the web-only
+// `backdrop-blur` style behind a runtime check rather than assuming web.
+const isWeb = typeof document !== 'undefined';
+
+/**
+ * Opaque token returned by `scheduleFrame`. `requestAnimationFrame` returns a
+ * number; the `setTimeout` fallback returns a timer handle — both are kept so
+ * `cancelFrame` can route to the matching canceller.
+ */
+type FrameToken = { raf: number } | { timer: ReturnType<typeof setTimeout> };
+
+/**
+ * Schedule a callback for the next paint. Uses `requestAnimationFrame` in the
+ * browser; degrades to a 0ms timeout when rAF is unavailable (SSR/hydration,
+ * non-DOM test envs) so the enter transition's `shown` flip still fires.
+ */
+function scheduleFrame(cb: () => void): FrameToken {
+  if (typeof requestAnimationFrame === 'function') {
+    return { raf: requestAnimationFrame(cb) };
+  }
+  return { timer: setTimeout(cb, 0) };
+}
+
+function cancelFrame(token: FrameToken): void {
+  if ('raf' in token) {
+    if (typeof cancelAnimationFrame === 'function') cancelAnimationFrame(token.raf);
+    return;
+  }
+  clearTimeout(token.timer);
+}
+
+// `backdrop-filter` is web-only; react-native-web passes it through to the DOM.
+const webBackdropBlur = { backdropFilter: 'blur(2px)' } as unknown as ViewStyle;
+
+const styles = StyleSheet.create({
+  root: {
+    // `position: fixed` pins the overlay to the viewport on web; react-native
+    // does not type `'fixed'`, so cast to the RN-accepted `'absolute'`. On
+    // native the `.native` fork uses `StyleSheet.absoluteFill` instead.
+    position: 'fixed' as 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: Z_INDEX.fullscreen,
+  },
+  backdrop: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: '#000',
+  },
+  panel: {
+    position: 'absolute',
+    overflow: 'hidden',
+    shadowOpacity: 0.18,
+    shadowRadius: 24,
+    shadowOffset: { width: 0, height: 8 },
+  },
+  handleRow: {
+    width: '100%',
+    alignItems: 'center',
+    paddingTop: 8,
+    paddingBottom: 4,
+  },
+  handle: {
+    width: HANDLE_WIDTH,
+    height: HANDLE_HEIGHT,
+    borderRadius: HANDLE_RADIUS,
+    opacity: 0.5,
+  },
+});
+
+export default ResponsiveSheet;