@oxyhq/bloom 0.13.0 → 0.14.0

package/lib/module/responsive-sheet/ResponsiveSheet.js

@@ -0,0 +1,293 @@
+"use strict";
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Pressable, StyleSheet, useWindowDimensions, View } from 'react-native';
+import { Z_INDEX } from "../styles/z-index.js";
+import { useTheme } from "../theme/use-theme.js";
+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.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** 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
+}) {
+  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(null);
+  const frameRef = useRef(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 => {
+      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(() => ({
+    transitionProperty: 'transform, opacity',
+    transitionDuration: `${ANIMATION_DURATION}ms`,
+    transitionTimingFunction: EASE_OUT
+  }), []);
+  const backdropTransition = useMemo(() => ({
+    transitionProperty: 'opacity',
+    transitionDuration: `${ANIMATION_DURATION}ms`,
+    transitionTimingFunction: EASE_OUT
+  }), []);
+  const panelGeometry = useMemo(() => {
+    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
+      };
+    }
+
+    // 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
+    };
+  }, [isBottom, shown, side, width, inset, viewportWidth, viewportHeight, maxHeightRatio]);
+  if (!mounted) return null;
+  return /*#__PURE__*/_jsxs(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
+    } : {}),
+    pointerEvents: "box-none",
+    children: [/*#__PURE__*/_jsx(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]
+    }), /*#__PURE__*/_jsxs(View, {
+      accessibilityViewIsModal: true,
+      "aria-label": label,
+      ...(panelClassName ? {
+        className: panelClassName
+      } : {}),
+      style: [styles.panel, {
+        backgroundColor: panelBackground,
+        shadowColor: theme.colors.shadow
+      }, panelGeometry, panelTransition, panelStyle],
+      pointerEvents: "auto",
+      children: [isBottom && showHandle ? /*#__PURE__*/_jsx(View, {
+        style: styles.handleRow,
+        pointerEvents: "none",
+        children: /*#__PURE__*/_jsx(View, {
+          style: [styles.handle, {
+            backgroundColor: theme.colors.border
+          }]
+        })
+      }) : null, children]
+    })]
+  });
+}
+
+// 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.
+ */
+
+/**
+ * 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) {
+  if (typeof requestAnimationFrame === 'function') {
+    return {
+      raf: requestAnimationFrame(cb)
+    };
+  }
+  return {
+    timer: setTimeout(cb, 0)
+  };
+}
+function cancelFrame(token) {
+  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)'
+};
+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',
+    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;
+//# sourceMappingURL=ResponsiveSheet.js.map

package/lib/module/responsive-sheet/ResponsiveSheet.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useEffect","useMemo","useRef","useState","Pressable","StyleSheet","useWindowDimensions","View","Z_INDEX","useTheme","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","jsx","_jsx","jsxs","_jsxs","RESPONSIVE_SHEET_BACKDROP_TESTID","ResponsiveSheet","open","onClose","side","breakpoint","width","maxHeightRatio","inset","showHandle","dismissOnBackdrop","panelStyle","panelClassName","containerStyle","containerClassName","label","children","theme","viewportWidth","height","viewportHeight","mounted","setMounted","shown","setShown","closeTimerRef","frameRef","current","clearTimeout","scheduleFrame","cancelFrame","setTimeout","document","handler","e","key","stopPropagation","addEventListener","removeEventListener","handleBackdropPress","isBottom","panelBackground","colors","background","panelTransition","transitionProperty","transitionDuration","transitionTimingFunction","backdropTransition","panelGeometry","left","right","bottom","maxHeight","Math","round","borderTopLeftRadius","borderTopRightRadius","transform","translateY","opacity","insetTop","top","insetBottom","insetLeft","insetRight","anchorInset","oppositeInset","available","cappedWidth","max","min","hiddenSign","borderRadius","translateX","style","styles","root","className","pointerEvents","testID","accessibilityRole","accessibilityLabel","onPress","disabled","backdrop","isWeb","webBackdropBlur","accessibilityViewIsModal","panel","backgroundColor","shadowColor","shadow","handleRow","handle","border","cb","requestAnimationFrame","raf","timer","token","cancelAnimationFrame","backdropFilter","create","position","zIndex","fullscreen","overflow","shadowOpacity","shadowRadius","shadowOffset","alignItems","paddingTop","paddingBottom"],"sourceRoot":"../../../src","sources":["responsive-sheet/ResponsiveSheet.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IACVC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,OAAO;AACd,SACEC,SAAS,EACTC,UAAU,EACVC,mBAAmB,EACnBC,IAAI,QAEC,cAAc;AAErB,SAASC,OAAO,QAAQ,sBAAmB;AAC3C,SAASC,QAAQ,QAAQ,uBAAoB;AAC7C,SACEC,kBAAkB,EAClBC,gBAAgB,EAChBC,kBAAkB,EAClBC,aAAa,EACbC,wBAAwB,EACxBC,YAAY,EACZC,aAAa,EACbC,QAAQ,EACRC,aAAa,EACbC,aAAa,EACbC,YAAY,EACZC,YAAY,EACZC,qBAAqB,QAChB,YAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGjB;AACA,OAAO,MAAMC,gCAAgC,GAAG,iCAAiC;;AAEjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,eAAeA,CAAC;EAC9BC,IAAI;EACJC,OAAO;EACPC,IAAI,GAAGhB,YAAY;EACnBiB,UAAU,GAAGpB,kBAAkB;EAC/BqB,KAAK,GAAGjB,aAAa;EACrBkB,cAAc,GAAGpB,wBAAwB;EACzCqB,KAAK;EACLC,UAAU,GAAG,IAAI;EACjBC,iBAAiB,GAAG,IAAI;EACxBC,UAAU;EACVC,cAAc;EACdC,cAAc;EACdC,kBAAkB;EAClBC,KAAK,GAAG7B,aAAa;EACrB8B;AACoB,CAAC,EAAE;EACvB,MAAMC,KAAK,GAAGnC,QAAQ,CAAC,CAAC;EACxB,MAAM;IAAEwB,KAAK,EAAEY,aAAa;IAAEC,MAAM,EAAEC;EAAe,CAAC,GAAGzC,mBAAmB,CAAC,CAAC;;EAE9E;EACA;EACA;EACA;EACA;EACA,MAAM,CAAC0C,OAAO,EAAEC,UAAU,CAAC,GAAG9C,QAAQ,CAAC0B,IAAI,CAAC;EAC5C,MAAM,CAACqB,KAAK,EAAEC,QAAQ,CAAC,GAAGhD,QAAQ,CAAC,KAAK,CAAC;EACzC,MAAMiD,aAAa,GAAGlD,MAAM,CAAuC,IAAI,CAAC;EACxE,MAAMmD,QAAQ,GAAGnD,MAAM,CAAoB,IAAI,CAAC;EAEhDF,SAAS,CAAC,MAAM;IACd,IAAI6B,IAAI,EAAE;MACR,IAAIuB,aAAa,CAACE,OAAO,EAAE;QACzBC,YAAY,CAACH,aAAa,CAACE,OAAO,CAAC;QACnCF,aAAa,CAACE,OAAO,GAAG,IAAI;MAC9B;MACAL,UAAU,CAAC,IAAI,CAAC;MAChB;MACA;MACA;MACA;MACAI,QAAQ,CAACC,OAAO,GAAGE,aAAa,CAAC,MAAM;QACrCH,QAAQ,CAACC,OAAO,GAAGE,aAAa,CAAC,MAAML,QAAQ,CAAC,IAAI,CAAC,CAAC;MACxD,CAAC,CAAC;MACF,OAAO,MAAM;QACX,IAAIE,QAAQ,CAACC,OAAO,KAAK,IAAI,EAAE;UAC7BG,WAAW,CAACJ,QAAQ,CAACC,OAAO,CAAC;UAC7BD,QAAQ,CAACC,OAAO,GAAG,IAAI;QACzB;MACF,CAAC;IACH;;IAEA;IACAH,QAAQ,CAAC,KAAK,CAAC;IACf,IAAI,CAACH,OAAO,EAAE;IACdI,aAAa,CAACE,OAAO,GAAGI,UAAU,CAAC,MAAM;MACvCT,UAAU,CAAC,KAAK,CAAC;MACjBG,aAAa,CAACE,OAAO,GAAG,IAAI;IAC9B,CAAC,EAAE5C,kBAAkB,CAAC;IACtB,OAAO,MAAM;MACX,IAAI0C,aAAa,CAACE,OAAO,EAAE;QACzBC,YAAY,CAACH,aAAa,CAACE,OAAO,CAAC;QACnCF,aAAa,CAACE,OAAO,GAAG,IAAI;MAC9B;IACF,CAAC;EACH,CAAC,EAAE,CAACzB,IAAI,EAAEmB,OAAO,CAAC,CAAC;;EAEnB;EACAhD,SAAS,CAAC,MAAM;IACd,IAAI,CAAC6B,IAAI,IAAI,OAAO8B,QAAQ,KAAK,WAAW,EAAE;IAC9C,MAAMC,OAAO,GAAIC,CAAgB,IAAK;MACpC,IAAIA,CAAC,CAACC,GAAG,KAAK,QAAQ,EAAE;QACtBD,CAAC,CAACE,eAAe,CAAC,CAAC;QACnBjC,OAAO,CAAC,CAAC;MACX;IACF,CAAC;IACD6B,QAAQ,CAACK,gBAAgB,CAAC,SAAS,EAAEJ,OAAO,CAAC;IAC7C,OAAO,MAAMD,QAAQ,CAACM,mBAAmB,CAAC,SAAS,EAAEL,OAAO,CAAC;EAC/D,CAAC,EAAE,CAAC/B,IAAI,EAAEC,OAAO,CAAC,CAAC;EAEnB,MAAMoC,mBAAmB,GAAGnE,WAAW,CAAC,MAAM;IAC5C,IAAIsC,iBAAiB,EAAEP,OAAO,CAAC,CAAC;EAClC,CAAC,EAAE,CAACO,iBAAiB,EAAEP,OAAO,CAAC,CAAC;EAEhC,MAAMqC,QAAQ,GAAGtB,aAAa,GAAGb,UAAU;EAC3C,MAAMoC,eAAe,GAAGxB,KAAK,CAACyB,MAAM,CAACC,UAAU;EAE/C,MAAMC,eAAe,GAAGtE,OAAO,CAC7B,OACG;IACCuE,kBAAkB,EAAE,oBAAoB;IACxCC,kBAAkB,EAAE,GAAG/D,kBAAkB,IAAI;IAC7CgE,wBAAwB,EAAEzD;EAC5B,CAAC,CAAc,EACjB,EACF,CAAC;EAED,MAAM0D,kBAAkB,GAAG1E,OAAO,CAChC,OACG;IACCuE,kBAAkB,EAAE,SAAS;IAC7BC,kBAAkB,EAAE,GAAG/D,kBAAkB,IAAI;IAC7CgE,wBAAwB,EAAEzD;EAC5B,CAAC,CAAc,EACjB,EACF,CAAC;EAED,MAAM2D,aAAa,GAAG3E,OAAO,CAAY,MAAM;IAC7C,IAAIkE,QAAQ,EAAE;MACZ,OAAO;QACLU,IAAI,EAAE,CAAC;QACPC,KAAK,EAAE,CAAC;QACRC,MAAM,EAAE,CAAC;QACTC,SAAS,EAAEC,IAAI,CAACC,KAAK,CAACnC,cAAc,GAAGb,cAAc,CAAC;QACtDiD,mBAAmB,EAAE9D,YAAY;QACjC+D,oBAAoB,EAAE/D,YAAY;QAClCgE,SAAS,EAAE,CAAC;UAAEC,UAAU,EAAEpC,KAAK,GAAG,CAAC,GAAG;QAAO,CAAC,CAAC;QAC/CqC,OAAO,EAAErC,KAAK,GAAG,CAAC,GAAG;MACvB,CAAC;IACH;;IAEA;IACA;IACA;IACA,MAAMsC,QAAQ,GAAGrD,KAAK,EAAEsD,GAAG,IAAI,CAAC;IAChC,MAAMC,WAAW,GAAGvD,KAAK,EAAE4C,MAAM,IAAI,CAAC;IACtC,MAAMY,SAAS,GAAGxD,KAAK,EAAE0C,IAAI,IAAI,CAAC;IAClC,MAAMe,UAAU,GAAGzD,KAAK,EAAE2C,KAAK,IAAI,CAAC;IACpC,MAAMe,WAAW,GAAG9D,IAAI,KAAK,MAAM,GAAG4D,SAAS,GAAGC,UAAU;IAC5D,MAAME,aAAa,GAAG/D,IAAI,KAAK,MAAM,GAAG6D,UAAU,GAAGD,SAAS;IAC9D,MAAMI,SAAS,GAAGlD,aAAa,GAAGgD,WAAW,GAAGC,aAAa,GAAGxE,qBAAqB;IACrF,MAAM0E,WAAW,GAAGf,IAAI,CAACgB,GAAG,CAAC,CAAC,EAAEhB,IAAI,CAACiB,GAAG,CAACjE,KAAK,EAAE8D,SAAS,CAAC,CAAC;IAC3D,MAAMI,UAAU,GAAGpE,IAAI,KAAK,MAAM,GAAG,OAAO,GAAG,MAAM;IAErD,OAAO;MACL0D,GAAG,EAAED,QAAQ;MACbT,MAAM,EAAEW,WAAW;MACnB,CAAC3D,IAAI,GAAG8D,WAAW;MACnB5D,KAAK,EAAE+D,WAAW;MAClBI,YAAY,EAAE/E,YAAY;MAC1BgE,SAAS,EAAE,CAAC;QAAEgB,UAAU,EAAEnD,KAAK,GAAG,CAAC,GAAGiD;MAAW,CAAC,CAAC;MACnDZ,OAAO,EAAErC,KAAK,GAAG,CAAC,GAAG;IACvB,CAAC;EACH,CAAC,EAAE,CAACiB,QAAQ,EAAEjB,KAAK,EAAEnB,IAAI,EAAEE,KAAK,EAAEE,KAAK,EAAEU,aAAa,EAAEE,cAAc,EAAEb,cAAc,CAAC,CAAC;EAExF,IAAI,CAACc,OAAO,EAAE,OAAO,IAAI;EAEzB,oBACEtB,KAAA,CAACnB,IAAI;IACH+F,KAAK,EAAE,CAACC,MAAM,CAACC,IAAI,EAAEhE,cAAc;IACnC;IACA;IAAA;IAAA,IACKC,kBAAkB,GAAI;MAAEgE,SAAS,EAAEhE;IAAmB,CAAC,GAA8B,CAAC,CAAC;IAC5FiE,aAAa,EAAC,UAAU;IAAA/D,QAAA,gBAExBnB,IAAA,CAACpB,SAAS;MACRuG,MAAM,EAAEhF,gCAAiC;MACzCiF,iBAAiB,EAAC,QAAQ;MAC1BC,kBAAkB,EAAE,WAAWnE,KAAK,EAAG;MACvCoE,OAAO,EAAE5C,mBAAoB;MAC7B6C,QAAQ,EAAE,CAAC1E,iBAAkB;MAC7BiE,KAAK,EAAE,CACLC,MAAM,CAACS,QAAQ,EACfrC,kBAAkB,EAClB;QAAEY,OAAO,EAAErC,KAAK,GAAGvC,gBAAgB,GAAG;MAAE,CAAC,EACzCsG,KAAK,GAAGC,eAAe,GAAG,IAAI;IAC9B,CACH,CAAC,eAEFxF,KAAA,CAACnB,IAAI;MACH4G,wBAAwB;MACxB,cAAYzE,KAAM;MAAA,IACbH,cAAc,GAAI;QAAEkE,SAAS,EAAElE;MAAe,CAAC,GAA8B,CAAC,CAAC;MACpF+D,KAAK,EAAE,CACLC,MAAM,CAACa,KAAK,EACZ;QAAEC,eAAe,EAAEjD,eAAe;QAAEkD,WAAW,EAAE1E,KAAK,CAACyB,MAAM,CAACkD;MAAO,CAAC,EACtE3C,aAAa,EACbL,eAAe,EACfjC,UAAU,CACV;MACFoE,aAAa,EAAC,MAAM;MAAA/D,QAAA,GAEnBwB,QAAQ,IAAI/B,UAAU,gBACrBZ,IAAA,CAACjB,IAAI;QAAC+F,KAAK,EAAEC,MAAM,CAACiB,SAAU;QAACd,aAAa,EAAC,MAAM;QAAA/D,QAAA,eACjDnB,IAAA,CAACjB,IAAI;UAAC+F,KAAK,EAAE,CAACC,MAAM,CAACkB,MAAM,EAAE;YAAEJ,eAAe,EAAEzE,KAAK,CAACyB,MAAM,CAACqD;UAAO,CAAC;QAAE,CAAE;MAAC,CACtE,CAAC,GACL,IAAI,EACP/E,QAAQ;IAAA,CACL,CAAC;EAAA,CACH,CAAC;AAEX;;AAEA;AACA;AACA;AACA,MAAMsE,KAAK,GAAG,OAAOtD,QAAQ,KAAK,WAAW;;AAE7C;AACA;AACA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA,SAASH,aAAaA,CAACmE,EAAc,EAAc;EACjD,IAAI,OAAOC,qBAAqB,KAAK,UAAU,EAAE;IAC/C,OAAO;MAAEC,GAAG,EAAED,qBAAqB,CAACD,EAAE;IAAE,CAAC;EAC3C;EACA,OAAO;IAAEG,KAAK,EAAEpE,UAAU,CAACiE,EAAE,EAAE,CAAC;EAAE,CAAC;AACrC;AAEA,SAASlE,WAAWA,CAACsE,KAAiB,EAAQ;EAC5C,IAAI,KAAK,IAAIA,KAAK,EAAE;IAClB,IAAI,OAAOC,oBAAoB,KAAK,UAAU,EAAEA,oBAAoB,CAACD,KAAK,CAACF,GAAG,CAAC;IAC/E;EACF;EACAtE,YAAY,CAACwE,KAAK,CAACD,KAAK,CAAC;AAC3B;;AAEA;AACA,MAAMZ,eAAe,GAAG;EAAEe,cAAc,EAAE;AAAY,CAAyB;AAE/E,MAAM1B,MAAM,GAAGlG,UAAU,CAAC6H,MAAM,CAAC;EAC/B1B,IAAI,EAAE;IACJ;IACA;IACA;IACA2B,QAAQ,EAAE,OAAqB;IAC/B1C,GAAG,EAAE,CAAC;IACNZ,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE,CAAC;IACTqD,MAAM,EAAE5H,OAAO,CAAC6H;EAClB,CAAC;EACDrB,QAAQ,EAAE;IACRmB,QAAQ,EAAE,UAAU;IACpB1C,GAAG,EAAE,CAAC;IACNZ,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE,CAAC;IACTsC,eAAe,EAAE;EACnB,CAAC;EACDD,KAAK,EAAE;IACLe,QAAQ,EAAE,UAAU;IACpBG,QAAQ,EAAE,QAAQ;IAClBC,aAAa,EAAE,IAAI;IACnBC,YAAY,EAAE,EAAE;IAChBC,YAAY,EAAE;MAAExG,KAAK,EAAE,CAAC;MAAEa,MAAM,EAAE;IAAE;EACtC,CAAC;EACD0E,SAAS,EAAE;IACTvF,KAAK,EAAE,MAAM;IACbyG,UAAU,EAAE,QAAQ;IACpBC,UAAU,EAAE,CAAC;IACbC,aAAa,EAAE;EACjB,CAAC;EACDnB,MAAM,EAAE;IACNxF,KAAK,EAAEb,YAAY;IACnB0B,MAAM,EAAE5B,aAAa;IACrBkF,YAAY,EAAEjF,aAAa;IAC3BoE,OAAO,EAAE;EACX;AACF,CAAC,CAAC;AAEF,eAAe3D,eAAe","ignoreList":[]}

package/lib/module/responsive-sheet/ResponsiveSheet.native.js

@@ -0,0 +1,219 @@
+"use strict";
+
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Pressable, StyleSheet, useWindowDimensions, View } from 'react-native';
+import Animated, { cancelAnimation, Easing, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { Z_INDEX } from "../styles/z-index.js";
+import { useTheme } from "../theme/use-theme.js";
+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.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** 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
+}) {
+  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 => {
+    const measured = isBottom ? e.nativeEvent.layout.height : e.nativeEvent.layout.width;
+    if (measured > 0) travel.value = measured;
+  }, [isBottom, travel]);
+  const panelGeometry = useMemo(() => {
+    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
+    };
+  }, [isBottom, bottomMaxHeight, insetTop, insetBottom, side, anchorInset, sideWidth]);
+  if (!mounted) return null;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.root, containerStyle],
+    ...(containerClassName ? {
+      className: containerClassName
+    } : {}),
+    pointerEvents: "box-none",
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.backdrop, backdropAnimatedStyle],
+      pointerEvents: "auto",
+      children: /*#__PURE__*/_jsx(Pressable, {
+        testID: RESPONSIVE_SHEET_BACKDROP_TESTID,
+        accessibilityRole: "button",
+        accessibilityLabel: `Dismiss ${label}`,
+        onPress: handleBackdropPress,
+        disabled: !dismissOnBackdrop,
+        style: StyleSheet.absoluteFill
+      })
+    }), /*#__PURE__*/_jsxs(Animated.View, {
+      accessibilityViewIsModal: true,
+      ...(panelClassName ? {
+        className: panelClassName
+      } : {}),
+      onLayout: measurePanel,
+      style: [styles.panel, {
+        backgroundColor: theme.colors.background,
+        shadowColor: theme.colors.shadow
+      }, panelGeometry, panelAnimatedStyle, panelStyle],
+      pointerEvents: "auto",
+      children: [isBottom && showHandle ? /*#__PURE__*/_jsx(View, {
+        style: styles.handleRow,
+        pointerEvents: "none",
+        children: /*#__PURE__*/_jsx(View, {
+          style: [styles.handle, {
+            backgroundColor: theme.colors.border
+          }]
+        })
+      }) : null, children]
+    })]
+  });
+}
+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;
+//# sourceMappingURL=ResponsiveSheet.native.js.map

package/lib/module/responsive-sheet/ResponsiveSheet.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useEffect","useMemo","useState","Pressable","StyleSheet","useWindowDimensions","View","Animated","cancelAnimation","Easing","runOnJS","useAnimatedStyle","useSharedValue","withTiming","Z_INDEX","useTheme","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","jsx","_jsx","jsxs","_jsxs","RESPONSIVE_SHEET_BACKDROP_TESTID","ResponsiveSheet","open","onClose","side","breakpoint","width","maxHeightRatio","inset","showHandle","dismissOnBackdrop","panelStyle","panelClassName","containerStyle","containerClassName","label","children","theme","viewportWidth","height","viewportHeight","mounted","setMounted","progress","isBottom","insetTop","top","insetBottom","bottom","insetLeft","left","insetRight","right","anchorInset","oppositeInset","sideWidth","available","Math","max","min","bottomMaxHeight","round","travel","value","finishClose","timing","duration","easing","out","cubic","finished","handleBackdropPress","backdropAnimatedStyle","opacity","hiddenSign","panelAnimatedStyle","hidden","transform","translateY","translateX","measurePanel","e","measured","nativeEvent","layout","panelGeometry","maxHeight","borderTopLeftRadius","borderTopRightRadius","borderRadius","style","styles","root","className","pointerEvents","backdrop","testID","accessibilityRole","accessibilityLabel","onPress","disabled","absoluteFill","accessibilityViewIsModal","onLayout","panel","backgroundColor","colors","background","shadowColor","shadow","handleRow","handle","border","create","zIndex","fullscreen","position","overflow","shadowOpacity","shadowRadius","shadowOffset","elevation","alignItems","paddingTop","paddingBottom"],"sourceRoot":"../../../src","sources":["responsive-sheet/ResponsiveSheet.native.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/responsive-sheet/const.js

@@ -0,0 +1,56 @@
+"use strict";
+
+/**
+ * Shared default constants for `ResponsiveSheet`.
+ *
+ * Platform-agnostic — imported by both the default/web CSS implementation
+ * (`ResponsiveSheet.tsx`) and the native reanimated implementation
+ * (`ResponsiveSheet.native.tsx`) so the two variants stay in lockstep.
+ */
+
+/** Below this viewport width the sheet renders as a bottom-sheet. */
+export const DEFAULT_BREAKPOINT = 768;
+
+/** Side-sheet width (px) on wide screens. Capped to fit the viewport. */
+export const DEFAULT_WIDTH = 460;
+
+/** Bottom-sheet maximum height as a fraction of the viewport height. */
+export const DEFAULT_MAX_HEIGHT_RATIO = 0.9;
+
+/** Anchored edge of the side-sheet on wide screens. */
+export const DEFAULT_SIDE = 'left';
+
+/**
+ * Open/close transition duration (ms). ~280–300ms ease-out reads as smooth
+ * without feeling sluggish; shared by the CSS transition and the native
+ * reanimated timing so both platforms match.
+ */
+export const ANIMATION_DURATION = 280;
+
+/**
+ * Standard CSS approximation of reanimated's `Easing.out(Easing.cubic)` so the
+ * web transition curve matches the native one.
+ */
+export const EASE_OUT = 'cubic-bezier(0.33, 1, 0.68, 1)';
+
+/** Corner radius for the side-sheet panel and the top of the bottom-sheet. */
+export const PANEL_RADIUS = 20;
+
+/** Backdrop dim opacity once fully shown (matches `bg-black/40`). */
+export const BACKDROP_OPACITY = 0.4;
+
+/** Drag-handle pill geometry for the bottom-sheet. */
+export const HANDLE_WIDTH = 36;
+export const HANDLE_HEIGHT = 5;
+export const HANDLE_RADIUS = 3;
+
+/**
+ * Minimum gutter kept between a wide side-sheet and the opposite viewport edge
+ * when capping its width, so the panel never spans the full screen on a narrow
+ * desktop window that is still above the breakpoint.
+ */
+export const SIDE_SHEET_MIN_GUTTER = 24;
+
+/** A11y label fallback when the host does not provide one. */
+export const DEFAULT_LABEL = 'Sheet';
+//# sourceMappingURL=const.js.map

package/lib/module/responsive-sheet/const.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DEFAULT_BREAKPOINT","DEFAULT_WIDTH","DEFAULT_MAX_HEIGHT_RATIO","DEFAULT_SIDE","ANIMATION_DURATION","EASE_OUT","PANEL_RADIUS","BACKDROP_OPACITY","HANDLE_WIDTH","HANDLE_HEIGHT","HANDLE_RADIUS","SIDE_SHEET_MIN_GUTTER","DEFAULT_LABEL"],"sourceRoot":"../../../src","sources":["responsive-sheet/const.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,OAAO,MAAMA,kBAAkB,GAAG,GAAG;;AAErC;AACA,OAAO,MAAMC,aAAa,GAAG,GAAG;;AAEhC;AACA,OAAO,MAAMC,wBAAwB,GAAG,GAAG;;AAE3C;AACA,OAAO,MAAMC,YAAY,GAAG,MAAe;;AAE3C;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,kBAAkB,GAAG,GAAG;;AAErC;AACA;AACA;AACA;AACA,OAAO,MAAMC,QAAQ,GAAG,gCAAgC;;AAExD;AACA,OAAO,MAAMC,YAAY,GAAG,EAAE;;AAE9B;AACA,OAAO,MAAMC,gBAAgB,GAAG,GAAG;;AAEnC;AACA,OAAO,MAAMC,YAAY,GAAG,EAAE;AAC9B,OAAO,MAAMC,aAAa,GAAG,CAAC;AAC9B,OAAO,MAAMC,aAAa,GAAG,CAAC;;AAE9B;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,qBAAqB,GAAG,EAAE;;AAEvC;AACA,OAAO,MAAMC,aAAa,GAAG,OAAO","ignoreList":[]}

package/lib/module/responsive-sheet/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { ResponsiveSheet, RESPONSIVE_SHEET_BACKDROP_TESTID } from './ResponsiveSheet';
+//# sourceMappingURL=index.js.map

package/lib/module/responsive-sheet/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ResponsiveSheet","RESPONSIVE_SHEET_BACKDROP_TESTID"],"sourceRoot":"../../../src","sources":["responsive-sheet/index.ts"],"mappings":";;AAAA,SAASA,eAAe,EAAEC,gCAAgC,QAAQ,mBAAmB","ignoreList":[]}

package/lib/module/responsive-sheet/index.web.js

@@ -0,0 +1,14 @@
+"use strict";
+
+// Web variant of the `./responsive-sheet` barrel.
+//
+// The default barrel (`./index.ts`) re-exports from `./ResponsiveSheet`, which
+// is itself the reanimated-free web/CSS implementation — Metro additionally
+// resolves `./ResponsiveSheet.native` for native targets. Web bundlers select
+// THIS file via the `"browser"` export condition in `package.json`'s
+// `exports['./responsive-sheet']`, pointing them explicitly at the CSS
+// implementation so a non-Metro bundler never follows the `.native` sibling
+// (which statically imports `react-native-reanimated`, a native-only module).
+// Types are platform-agnostic, so they come straight from `./types`.
+export { ResponsiveSheet, RESPONSIVE_SHEET_BACKDROP_TESTID } from './ResponsiveSheet';
+//# sourceMappingURL=index.web.js.map

package/lib/module/responsive-sheet/index.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ResponsiveSheet","RESPONSIVE_SHEET_BACKDROP_TESTID"],"sourceRoot":"../../../src","sources":["responsive-sheet/index.web.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,eAAe,EAAEC,gCAAgC,QAAQ,mBAAmB","ignoreList":[]}

package/lib/module/responsive-sheet/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/lib/module/responsive-sheet/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["responsive-sheet/types.ts"],"mappings":"","ignoreList":[]}

package/lib/typescript/commonjs/index.d.ts

@@ -49,6 +49,8 @@ export { Combobox } from './combobox';
 export type { ComboboxProps, ComboboxOption } from './combobox';
 export { BottomSheet } from './bottom-sheet';
 export type { BottomSheetRef, BottomSheetProps } from './bottom-sheet';
+export { ResponsiveSheet, RESPONSIVE_SHEET_BACKDROP_TESTID } from './responsive-sheet';
+export type { ResponsiveSheetProps, ResponsiveSheetSide, ResponsiveSheetInset, } from './responsive-sheet';
 export * from './card';
 export * from './badge';
 export * from './chip';