@amityco/react-native-social-uikit 4.2.1-f052efd.0 → 4.3.0

package/lib/commonjs/core/design/atoms/Tab/Tab.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tab = Tab;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _styles = require("./styles");
+// Tab atom — ported from AmityUiKitWeb core/design/atoms/Tab.
+// One atom with three variants (pill, underlined, icon). Web react-aria Tab
+// (selection + click) → RN Pressable + `active`/`onPress`. Hover and
+// focus-visible are web-only interaction states and are intentionally omitted.
+
+function Tab({
+  variant = 'pill',
+  label,
+  icon,
+  active = false,
+  disabled = false,
+  onPress
+}) {
+  const {
+    styles,
+    iconColor
+  } = (0, _styles.useStyles)(variant, active, disabled);
+  const tintedIcon = /*#__PURE__*/(0, _react.isValidElement)(icon) ? /*#__PURE__*/(0, _react.cloneElement)(icon, {
+    color: iconColor
+  }) : icon;
+  return /*#__PURE__*/React.createElement(_reactNative.Pressable, {
+    style: styles.tab,
+    onPress: onPress,
+    disabled: disabled,
+    accessibilityRole: "tab",
+    accessibilityState: {
+      selected: active,
+      disabled
+    }
+  }, variant === 'icon' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.icon
+  }, tintedIcon), /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.indicator
+  })) : variant === 'underlined' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_reactNative.Text, {
+    style: styles.label
+  }, label), /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.indicator
+  })) : /*#__PURE__*/React.createElement(_reactNative.Text, {
+    style: styles.label
+  }, label));
+}
+//# sourceMappingURL=Tab.js.map

package/lib/commonjs/core/design/atoms/Tab/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_styles","Tab","variant","label","icon","active","disabled","onPress","styles","iconColor","useStyles","tintedIcon","isValidElement","cloneElement","color","React","createElement","Pressable","style","tab","accessibilityRole","accessibilityState","selected","Fragment","View","indicator","Text"],"sourceRoot":"../../../../../../src","sources":["core/design/atoms/Tab/Tab.tsx"],"mappings":";;;;;;AAKA,IAAAA,MAAA,GAAAC,OAAA;AAMA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AAZA;AACA;AACA;AACA;;AAsBO,SAASG,GAAGA,CAAC;EAClBC,OAAO,GAAG,MAAM;EAChBC,KAAK;EACLC,IAAI;EACJC,MAAM,GAAG,KAAK;EACdC,QAAQ,GAAG,KAAK;EAChBC;AACQ,CAAC,EAAE;EACX,MAAM;IAAEC,MAAM;IAAEC;EAAU,CAAC,GAAG,IAAAC,iBAAS,EAACR,OAAO,EAAEG,MAAM,EAAEC,QAAQ,CAAC;EAElE,MAAMK,UAAU,GAAG,iBAAAC,qBAAc,EAACR,IAAI,CAAC,gBACnC,IAAAS,mBAAY,EAACT,IAAI,EAAsC;IACrDU,KAAK,EAAEL;EACT,CAAC,CAAC,GACFL,IAAI;EAER,oBACEW,KAAA,CAAAC,aAAA,CAACjB,YAAA,CAAAkB,SAAS;IACRC,KAAK,EAAEV,MAAM,CAACW,GAAI;IAClBZ,OAAO,EAAEA,OAAQ;IACjBD,QAAQ,EAAEA,QAAS;IACnBc,iBAAiB,EAAC,KAAK;IACvBC,kBAAkB,EAAE;MAAEC,QAAQ,EAAEjB,MAAM;MAAEC;IAAS;EAAE,GAElDJ,OAAO,KAAK,MAAM,gBACjBa,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAQ,QAAA,qBACER,KAAA,CAAAC,aAAA,CAACjB,YAAA,CAAAyB,IAAI;IAACN,KAAK,EAAEV,MAAM,CAACJ;EAAK,GAAEO,UAAiB,CAAC,eAC7CI,KAAA,CAAAC,aAAA,CAACjB,YAAA,CAAAyB,IAAI;IAACN,KAAK,EAAEV,MAAM,CAACiB;EAAU,CAAE,CAChC,CAAC,GACDvB,OAAO,KAAK,YAAY,gBAC1Ba,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAQ,QAAA,qBACER,KAAA,CAAAC,aAAA,CAACjB,YAAA,CAAA2B,IAAI;IAACR,KAAK,EAAEV,MAAM,CAACL;EAAM,GAAEA,KAAY,CAAC,eACzCY,KAAA,CAAAC,aAAA,CAACjB,YAAA,CAAAyB,IAAI;IAACN,KAAK,EAAEV,MAAM,CAACiB;EAAU,CAAE,CAChC,CAAC,gBAEHV,KAAA,CAAAC,aAAA,CAACjB,YAAA,CAAA2B,IAAI;IAACR,KAAK,EAAEV,MAAM,CAACL;EAAM,GAAEA,KAAY,CAEjC,CAAC;AAEhB","ignoreList":[]}

package/lib/commonjs/core/design/atoms/Tab/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Tab", {
+  enumerable: true,
+  get: function () {
+    return _Tab.Tab;
+  }
+});
+var _Tab = require("./Tab");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/core/design/atoms/Tab/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_Tab","require"],"sourceRoot":"../../../../../../src","sources":["core/design/atoms/Tab/index.ts"],"mappings":";;;;;;;;;;;AAAA,IAAAA,IAAA,GAAAC,OAAA","ignoreList":[]}

package/lib/commonjs/core/design/atoms/Tab/styles.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStyles = void 0;
+var _reactNative = require("react-native");
+var _useToken = require("../../theme/useToken");
+var _amityColorTokens = require("../../tokens/amity-color-tokens");
+// Geometry from SoT (geometry.json → tabs), px:
+//   pill:       height 40, padding 8×12, radius 24, border 1, fontSize 17, lineHeight 24
+//   underlined: height 56, paddingTop 16, gap 14, indicator thickness 2
+//   icon:       height 56, paddingTop 16, gap 14, glyph 24×24, indicator 24×2
+const useStyles = (variant, active, disabled) => {
+  const token = (0, _useToken.useToken)();
+  const labelColor = variant === 'pill' ? token(disabled ? _amityColorTokens.AmityColorToken.TextTabPillDisabled : active ? _amityColorTokens.AmityColorToken.TextTabPillActive : _amityColorTokens.AmityColorToken.TextTabPillDefault) : token(disabled ? _amityColorTokens.AmityColorToken.TextTabUnderlinedDisabled : active ? _amityColorTokens.AmityColorToken.TextTabUnderlinedActive : _amityColorTokens.AmityColorToken.TextTabUnderlinedDefault);
+  const iconColor = token(disabled ? _amityColorTokens.AmityColorToken.IconTabDisabled : active ? _amityColorTokens.AmityColorToken.IconTabActive : _amityColorTokens.AmityColorToken.IconTabDefault);
+  const indicatorColor = !active ? 'transparent' : variant === 'icon' ? token(_amityColorTokens.AmityColorToken.LineTabIconActive) : token(_amityColorTokens.AmityColorToken.LineTabUnderlinedActive);
+  const pillSurface = token(disabled ? _amityColorTokens.AmityColorToken.SurfaceTabPillDisabled : active ? _amityColorTokens.AmityColorToken.SurfaceTabPillActive : _amityColorTokens.AmityColorToken.SurfaceTabPillDefault);
+  const pillBorder = token(disabled ? _amityColorTokens.AmityColorToken.BorderTabPillDisabled : active ? _amityColorTokens.AmityColorToken.BorderTabPillActive : _amityColorTokens.AmityColorToken.BorderTabPillDefault);
+  const tab = variant === 'pill' ? {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 40,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderRadius: 24,
+    borderWidth: 1,
+    borderColor: pillBorder,
+    backgroundColor: pillSurface
+  } : {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: 14,
+    height: 56,
+    paddingTop: 16,
+    backgroundColor: 'transparent'
+  };
+  const styles = _reactNative.StyleSheet.create({
+    tab,
+    label: {
+      fontSize: 17,
+      lineHeight: 24,
+      fontWeight: active ? '600' : '400',
+      color: labelColor
+    },
+    icon: {
+      width: 24,
+      height: 24
+    },
+    indicator: variant === 'icon' ? {
+      width: 24,
+      height: 2,
+      backgroundColor: indicatorColor
+    } : {
+      width: '100%',
+      height: 2,
+      backgroundColor: indicatorColor
+    }
+  });
+  return {
+    styles,
+    iconColor
+  };
+};
+exports.useStyles = useStyles;
+//# sourceMappingURL=styles.js.map

package/lib/commonjs/core/design/atoms/Tab/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_useToken","_amityColorTokens","useStyles","variant","active","disabled","token","useToken","labelColor","AmityColorToken","TextTabPillDisabled","TextTabPillActive","TextTabPillDefault","TextTabUnderlinedDisabled","TextTabUnderlinedActive","TextTabUnderlinedDefault","iconColor","IconTabDisabled","IconTabActive","IconTabDefault","indicatorColor","LineTabIconActive","LineTabUnderlinedActive","pillSurface","SurfaceTabPillDisabled","SurfaceTabPillActive","SurfaceTabPillDefault","pillBorder","BorderTabPillDisabled","BorderTabPillActive","BorderTabPillDefault","tab","flexDirection","alignItems","justifyContent","height","paddingVertical","paddingHorizontal","borderRadius","borderWidth","borderColor","backgroundColor","gap","paddingTop","styles","StyleSheet","create","label","fontSize","lineHeight","fontWeight","color","icon","width","indicator","exports"],"sourceRoot":"../../../../../../src","sources":["core/design/atoms/Tab/styles.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AAGA;AACA;AACA;AACA;AACO,MAAMG,SAAS,GAAGA,CACvBC,OAAmB,EACnBC,MAAe,EACfC,QAAiB,KACd;EACH,MAAMC,KAAK,GAAG,IAAAC,kBAAQ,EAAC,CAAC;EAExB,MAAMC,UAAU,GACdL,OAAO,KAAK,MAAM,GACdG,KAAK,CACHD,QAAQ,GACJI,iCAAe,CAACC,mBAAmB,GACnCN,MAAM,GACNK,iCAAe,CAACE,iBAAiB,GACjCF,iCAAe,CAACG,kBACtB,CAAC,GACDN,KAAK,CACHD,QAAQ,GACJI,iCAAe,CAACI,yBAAyB,GACzCT,MAAM,GACNK,iCAAe,CAACK,uBAAuB,GACvCL,iCAAe,CAACM,wBACtB,CAAC;EAEP,MAAMC,SAAS,GAAGV,KAAK,CACrBD,QAAQ,GACJI,iCAAe,CAACQ,eAAe,GAC/Bb,MAAM,GACNK,iCAAe,CAACS,aAAa,GAC7BT,iCAAe,CAACU,cACtB,CAAC;EAED,MAAMC,cAAc,GAAG,CAAChB,MAAM,GAC1B,aAAa,GACbD,OAAO,KAAK,MAAM,GAClBG,KAAK,CAACG,iCAAe,CAACY,iBAAiB,CAAC,GACxCf,KAAK,CAACG,iCAAe,CAACa,uBAAuB,CAAC;EAElD,MAAMC,WAAW,GAAGjB,KAAK,CACvBD,QAAQ,GACJI,iCAAe,CAACe,sBAAsB,GACtCpB,MAAM,GACNK,iCAAe,CAACgB,oBAAoB,GACpChB,iCAAe,CAACiB,qBACtB,CAAC;EACD,MAAMC,UAAU,GAAGrB,KAAK,CACtBD,QAAQ,GACJI,iCAAe,CAACmB,qBAAqB,GACrCxB,MAAM,GACNK,iCAAe,CAACoB,mBAAmB,GACnCpB,iCAAe,CAACqB,oBACtB,CAAC;EAED,MAAMC,GAAG,GACP5B,OAAO,KAAK,MAAM,GACd;IACE6B,aAAa,EAAE,KAAc;IAC7BC,UAAU,EAAE,QAAiB;IAC7BC,cAAc,EAAE,QAAiB;IACjCC,MAAM,EAAE,EAAE;IACVC,eAAe,EAAE,CAAC;IAClBC,iBAAiB,EAAE,EAAE;IACrBC,YAAY,EAAE,EAAE;IAChBC,WAAW,EAAE,CAAC;IACdC,WAAW,EAAEb,UAAU;IACvBc,eAAe,EAAElB;EACnB,CAAC,GACD;IACES,aAAa,EAAE,QAAiB;IAChCC,UAAU,EAAE,QAAiB;IAC7BS,GAAG,EAAE,EAAE;IACPP,MAAM,EAAE,EAAE;IACVQ,UAAU,EAAE,EAAE;IACdF,eAAe,EAAE;EACnB,CAAC;EAEP,MAAMG,MAAM,GAAGC,uBAAU,CAACC,MAAM,CAAC;IAC/Bf,GAAG;IACHgB,KAAK,EAAE;MACLC,QAAQ,EAAE,EAAE;MACZC,UAAU,EAAE,EAAE;MACdC,UAAU,EAAE9C,MAAM,GAAG,KAAK,GAAG,KAAK;MAClC+C,KAAK,EAAE3C;IACT,CAAC;IACD4C,IAAI,EAAE;MACJC,KAAK,EAAE,EAAE;MACTlB,MAAM,EAAE;IACV,CAAC;IACDmB,SAAS,EACPnD,OAAO,KAAK,MAAM,GACd;MAAEkD,KAAK,EAAE,EAAE;MAAElB,MAAM,EAAE,CAAC;MAAEM,eAAe,EAAErB;IAAe,CAAC,GACzD;MACEiC,KAAK,EAAE,MAAe;MACtBlB,MAAM,EAAE,CAAC;MACTM,eAAe,EAAErB;IACnB;EACR,CAAC,CAAC;EAEF,OAAO;IAAEwB,MAAM;IAAE5B;EAAU,CAAC;AAC9B,CAAC;AAACuC,OAAA,CAAArD,SAAA,GAAAA,SAAA","ignoreList":[]}

package/lib/commonjs/core/design/components/BottomSheet/BottomSheet.js

@@ -0,0 +1,485 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BottomSheet = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _reactNativeGestureHandler = require("react-native-gesture-handler");
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+var _styles = require("./styles");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } // BottomSheet — a sheet that owns its own height, position, drag and backdrop.
+//
+// Why it owns all four: every one of them has to agree about where the sheet's
+// bottom edge is, and a sheet that leaves any of them to something else ends up
+// describing its own box two different ways. Splitting them is what produced
+// the whole family of keyboard bugs this replaces — the sheet translating on
+// one timeline while its height changed on another, a drag measured against a
+// box that had already moved, and a sheet growing back mid-close because the
+// keyboard went away.
+//
+// So there is exactly one description of the box here:
+//
+//   height = open − keyboard               (bottom edge pinned)
+//   offset = drag − keyboard               (slides out, lifts clear of the keys)
+//
+// Opening, dragging and the keyboard are all the same quantity — height — which
+// is why a drag that interrupts an animation has nothing to disagree with.
+//
+// Every one of those values is a reanimated shared value, so the whole box is
+// computed on the UI thread. That matters most for `height`, which is a layout
+// property: RN's own Animated cannot drive layout natively, so on that driver a
+// sheet with a lot of content inside it dropped the entrance animation entirely
+// and simply appeared. Here the height animates in step with the transform even
+// while JS is busy laying the content out.
+//
+// It renders in a Modal on purpose. A Modal is its own native hierarchy, so
+// nothing an ancestor does to its layout — a keyboard-avoiding wrapper padding
+// the page, a parent that clips — reaches the sheet. That makes this component
+// the only thing moving it, which is the point.
+// 1. React / RN imports
+// 2. Third-party imports
+// 3. Internal imports (relative)
+// 4. Types
+
+const OPEN_DURATION = 300;
+const CLOSE_DURATION = 250;
+/**
+ * How far an easing carries the sheet in its opening frames scales with how
+ * tall that sheet is, so a curve that is merely brisk on a short menu can be a
+ * jump on a full-height one: an exponential-out moved a 700-high sheet 144 on
+ * frame one and half its travel inside 50ms, against 31 on frame one for a
+ * 150-high menu. This curve — the one platform sheets use — starts gently
+ * enough that the first frames read as movement at any height, then decelerates
+ * firmly into the end.
+ */
+const SHEET_EASING = _reactNativeReanimated.Easing.bezier(0.32, 0.72, 0, 1);
+/** Past this much of the sheet's height, releasing a drag closes it. */
+const DRAG_CLOSE_RATIO = 0.3;
+/** A flick this fast (points per second) closes the sheet whatever the distance. */
+const DRAG_CLOSE_FLING = 800;
+/** A drag has to travel this far before it is a drag and not a tap. */
+const DRAG_ACTIVATION_DISTANCE = 8;
+/**
+ * How far the sheet carries on underneath the keyboard. A sheet that stops
+ * exactly on the keyboard's top edge leaves the keyboard's own rounded corners
+ * standing over whatever is behind the sheet, so the two far corners show as
+ * dark nicks. Running the surface on past that edge puts sheet behind them.
+ * The overlap is hidden by the keyboard itself, and the content does not move
+ * with it — the sheet's bottom padding grows by the same amount.
+ */
+const KEYBOARD_OVERLAP = 20;
+/** The backdrop runs this much faster than the sheet, opening and closing. */
+const BACKDROP_SPEEDUP = 2.5;
+
+/**
+ * How the sheet and a scrolling body share one downward drag.
+ *
+ * The body registers its scroll view here and keeps the sheet posted on whether
+ * it is at the top. A drag down while the list is already at the top belongs to
+ * the sheet; anywhere else it belongs to the list. The two gestures are allowed
+ * to run at once so the hand-off happens without lifting a finger.
+ */
+
+const ScrollCoordinationContext = /*#__PURE__*/(0, _react.createContext)(null);
+
+// 5. Named function component
+const BottomSheetRoot = /*#__PURE__*/(0, _react.forwardRef)(function BottomSheet({
+  visible,
+  height,
+  containerHeight,
+  dark = false,
+  closeOnDragDown = true,
+  closeOnBackdropPress = true,
+  style,
+  onClose,
+  children
+}, ref) {
+  const {
+    styles
+  } = (0, _styles.useStyles)({
+    dark
+  });
+  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  const window = (0, _reactNative.useWindowDimensions)();
+  const container = containerHeight ?? window.height;
+  const resolvedHeight = typeof height === 'number' ? height : container * parseFloat(height) / 100;
+
+  // `visible` is optional: when it is not given the sheet keeps its own flag
+  // and the ref drives it.
+  const [selfVisible, setSelfVisible] = (0, _react.useState)(false);
+  const isOpen = visible ?? selfVisible;
+
+  // Kept mounted through the closing animation, so the sheet slides out instead
+  // of vanishing the moment it is told to close.
+  const [mounted, setMounted] = (0, _react.useState)(isOpen);
+
+  // One value for both the drag and the close: dragging moves the sheet down,
+  // and closing is the same move carried all the way past the bottom edge. As
+  // two separate quantities — a drag that shrank the height and a close that
+  // translated — releasing a drag reset the height and the sheet flashed back
+  // to full size for a frame on its way out.
+  const slide = (0, _reactNativeReanimated.useSharedValue)(0);
+  // The entrance, 0 below the screen to 1 at rest. It moves the sheet rather
+  // than resizing it: a sheet that grew from nothing laid its children out
+  // afresh every frame, and a body built as a fixed header, a flexible middle
+  // and a footer pinned to the bottom — which is how the taller sheets are
+  // built — spends those frames with its middle squeezed to nothing. That
+  // showed as the header arriving first above a hollow gap. Sliding a
+  // finished sheet into place has no intermediate states to show, lays the
+  // content out once instead of once per frame, and is what platform sheets
+  // do. Height stays reserved for the keyboard, which is a single change
+  // rather than an animation of its own.
+  const entrance = (0, _reactNativeReanimated.useSharedValue)(0);
+  // Whether the entrance has actually begun. Between the Modal being mounted
+  // and `startOpen` running there are a few frames that belong to the
+  // platform: on Android the dialog window arrives under its own steam, and
+  // the sheet was caught in one of them part way up the screen with no
+  // backdrop behind it — a flash of the sheet, then nothing, then the real
+  // entrance. The sheet is simply not drawn until it is ours to move.
+  const entranceStarted = (0, _reactNativeReanimated.useSharedValue)(0);
+  const keyboardInset = (0, _reactNativeReanimated.useSharedValue)(0);
+  const backdropProgress = (0, _reactNativeReanimated.useSharedValue)(0);
+
+  // While the sheet is on its way out the keyboard must not resize it: the
+  // dismissal that closes the sheet also dismisses the keyboard, and letting
+  // that grow the sheet back is exactly the upward flash this replaces.
+  const isClosing = (0, _react.useRef)(false);
+  const finishClose = (0, _react.useCallback)(() => {
+    isShown.current = false;
+    setMounted(false);
+    setSelfVisible(false);
+    isClosing.current = false;
+    onClose === null || onClose === void 0 || onClose();
+  }, [onClose]);
+  const close = (0, _react.useCallback)(() => {
+    if (isClosing.current) return;
+    isClosing.current = true;
+
+    // The keyboard leaves with the sheet. Dismissing it here rather than
+    // waiting for focus to be lost keeps the two on the same beat.
+    _reactNative.Keyboard.dismiss();
+
+    // The backdrop clears faster than the sheet, so the page behind is already
+    // readable while the last of the sheet is still on its way out.
+    backdropProgress.value = (0, _reactNativeReanimated.withTiming)(0, {
+      duration: CLOSE_DURATION / BACKDROP_SPEEDUP
+    });
+
+    // Carries on from wherever a drag left the sheet, straight past the
+    // bottom edge.
+    slide.value = (0, _reactNativeReanimated.withTiming)(container, {
+      duration: CLOSE_DURATION,
+      easing: SHEET_EASING
+    }, completed => {
+      'worklet';
+
+      // A close that was interrupted — the sheet reopened while it was
+      // still animating out — must not run the teardown, which would
+      // unmount the sheet that was just reopened and empty the content that
+      // was just put in it.
+      if (completed) (0, _reactNativeReanimated.runOnJS)(finishClose)();
+    });
+
+    // Nothing is reset here. `setMounted(false)` only takes effect on the next
+    // render, while a shared value reaches the native view at once — so
+    // resetting the slide here put the sheet back at its open position, full
+    // size and over a full-strength backdrop, for the frame before the unmount
+    // landed. That was the flash. The values are wound back when the sheet
+    // next opens instead, where nothing can see them.
+  }, [backdropProgress, container, slide, finishClose]);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    open: () => setSelfVisible(true),
+    close: () => setSelfVisible(false)
+  }), []);
+
+  // Held until the Modal is actually on screen — see `startOpen`.
+  const pendingOpen = (0, _react.useRef)(false);
+  // Whether the Modal has presented. `mounted` cannot answer that: it is
+  // seeded from `isOpen`, so a sheet whose component mounts with `visible`
+  // already true — which is how a sheet opened by mounting its owner behaves,
+  // as opposed to one kept mounted and toggled — starts life claiming to be
+  // on screen while the Modal has not even begun presenting. The entrance
+  // then ran against nothing: measured at 564ms of animation spent before the
+  // Modal so much as reported itself shown, which at these durations means
+  // the sheet finished opening before it was ever visible and arrived with no
+  // animation at all. The heavier the content the wider that gap, which is
+  // why tall sheets looked like the only casualties.
+  const isShown = (0, _react.useRef)(false);
+  const startOpen = (0, _react.useCallback)(() => {
+    entranceStarted.value = 1;
+    entrance.value = (0, _reactNativeReanimated.withTiming)(1, {
+      duration: OPEN_DURATION,
+      easing: SHEET_EASING
+    });
+    backdropProgress.value = (0, _reactNativeReanimated.withTiming)(1, {
+      duration: OPEN_DURATION / BACKDROP_SPEEDUP
+    });
+  }, [backdropProgress, entrance, entranceStarted]);
+
+  // Which way this effect last acted, so it acts on the transition rather
+  // than on every render it happens to be woken for. It is woken often: it
+  // depends on `close`, `close` on the caller's `onClose`, and a caller
+  // writing that inline hands over a new one each render. Without this, a
+  // render arriving mid-entrance re-ran the open path, which winds the
+  // entrance back to nothing and starts it again — the sheet appeared, snapped
+  // shut and opened a second time.
+  const openHandled = (0, _react.useRef)(false);
+
+  // Open / close from the outside.
+  (0, _react.useEffect)(() => {
+    if (isOpen) {
+      if (openHandled.current) return;
+      openHandled.current = true;
+      isClosing.current = false;
+      // Wound back here, off screen, rather than at the end of the close,
+      // where resetting them would repaint the sheet at its open position for
+      // the frame before the unmount lands.
+      slide.value = 0;
+      keyboardInset.value = 0;
+      // The close carries the sheet out on `slide` and never touches this, so
+      // it has to be wound back by hand or the second open starts at its
+      // target and plays nothing.
+      entrance.value = 0;
+      entranceStarted.value = 0;
+      if (mounted && isShown.current) {
+        // Genuinely on screen, interrupting its own close.
+        startOpen();
+      } else {
+        // A Modal takes a while to present — longer the more there is inside
+        // it — and an animation started now would spend that time off screen.
+        // It waits for `onShow` instead.
+        pendingOpen.current = true;
+        if (!mounted) setMounted(true);
+      }
+    } else {
+      openHandled.current = false;
+      if (mounted) close();
+    }
+  }, [isOpen, mounted, close, entrance, entranceStarted, keyboardInset, slide, startOpen]);
+
+  // The keyboard, on the keyboard's own curve. Reading `duration` off the
+  // event is what keeps the sheet and the keyboard on one timeline rather than
+  // two that happen to start together.
+  (0, _react.useEffect)(() => {
+    const isIOS = _reactNative.Platform.OS === 'ios';
+    // iOS announces the keyboard before it moves; Android only after.
+    const showEvent = isIOS ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvent = isIOS ? 'keyboardWillHide' : 'keyboardDidHide';
+    // iOS measures the keyboard from the bottom of the screen, home indicator
+    // included. Android measures it from the top of the navigation bar even
+    // though the keyboard is drawn over that bar, so it reads short by the
+    // inset and leaves the sheet's last row under the keys.
+    const bottomEdgeCorrection = isIOS ? 0 : insets.bottom;
+    const animateTo = (toValue, event) => {
+      keyboardInset.value = (0, _reactNativeReanimated.withTiming)(toValue, {
+        duration: (event === null || event === void 0 ? void 0 : event.duration) || OPEN_DURATION,
+        easing: SHEET_EASING
+      });
+    };
+    const show = _reactNative.Keyboard.addListener(showEvent, event => {
+      if (isClosing.current) return;
+      animateTo(event.endCoordinates.height + bottomEdgeCorrection, event);
+    });
+    const hide = _reactNative.Keyboard.addListener(hideEvent, event => {
+      if (isClosing.current) return;
+      animateTo(0, event);
+    });
+    return () => {
+      show.remove();
+      hide.remove();
+    };
+  }, [insets.bottom, keyboardInset]);
+
+  // Android's hardware back closes the sheet rather than the screen behind it.
+  (0, _react.useEffect)(() => {
+    if (!mounted) return undefined;
+    const subscription = _reactNative.BackHandler.addEventListener('hardwareBackPress', () => {
+      close();
+      return true;
+    });
+    return () => subscription.remove();
+  }, [mounted, close]);
+
+  // The gesture lives in react-native-gesture-handler, not in RN's responder
+  // system. The responder system hands a touch to exactly one view and settles
+  // that at touch-down, so a drag begun on a button or inside a list is that
+  // view's for good and the sheet is never consulted again — measured, not
+  // assumed. Gesture handler negotiates continuously instead, which is what
+  // lets a drag start anywhere on the sheet and still reach the sheet.
+  const scrollRef = (0, _react.useRef)(null);
+  // A shared value rather than a ref: the gesture's callbacks run on the UI
+  // thread, where a JS ref cannot be read.
+  const atTop = (0, _reactNativeReanimated.useSharedValue)(true);
+
+  // `close` changes identity whenever the caller's `onClose` does, and the
+  // gesture would be rebuilt and re-attached with it. This is the same call
+  // behind a handle that never changes.
+  const closeRef = (0, _react.useRef)(close);
+  closeRef.current = close;
+  const requestClose = (0, _react.useCallback)(() => closeRef.current(), []);
+  const pan = (0, _react.useMemo)(() => _reactNativeGestureHandler.Gesture.Pan()
+  // Downward only, and only past a few points — so a tap on a button is
+  // still a tap, and an upward flick belongs to the list.
+  .activeOffsetY(DRAG_ACTIVATION_DISTANCE).failOffsetY(-DRAG_ACTIVATION_DISTANCE).simultaneousWithExternalGesture(scrollRef).onUpdate(event => {
+    'worklet';
+
+    if (!closeOnDragDown) return;
+    // A list that can still scroll up keeps the drag.
+    if (!atTop.value) return;
+    if (event.translationY > 0) slide.value = event.translationY;
+  }).onEnd(event => {
+    'worklet';
+
+    if (!closeOnDragDown) return;
+    const passedDistance = event.translationY > resolvedHeight * DRAG_CLOSE_RATIO;
+    // velocityY is points per second here, not per frame.
+    const flickedDown = event.velocityY > DRAG_CLOSE_FLING;
+    if (atTop.value && (passedDistance || flickedDown)) {
+      (0, _reactNativeReanimated.runOnJS)(requestClose)();
+    } else {
+      slide.value = (0, _reactNativeReanimated.withTiming)(0, {
+        duration: OPEN_DURATION / 2,
+        easing: SHEET_EASING
+      });
+    }
+  }), [atTop, closeOnDragDown, requestClose, resolvedHeight, slide]);
+  const scrollCoordination = (0, _react.useMemo)(() => ({
+    scrollRef,
+    setAtTop: value => {
+      atTop.value = value;
+    }
+  }), [atTop]);
+
+  // open − keyboard for the box, drag − keyboard for where it sits. The
+  // keyboard never takes more than the sheet has, and the sheet rises by
+  // exactly what it loses — the two being the same number is what keeps the
+  // sheet's TOP edge still while the keyboard opens; only the body shortens.
+  const sheetStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    const lift = Math.min(keyboardInset.value, resolvedHeight);
+    // Only while there is a keyboard to hide it.
+    const overlap = Math.min(KEYBOARD_OVERLAP, keyboardInset.value);
+    return {
+      opacity: entranceStarted.value,
+      // Taller and lower by the overlap, which leaves the TOP edge where it
+      // was; the extra is bottom padding, so the content keeps its distance
+      // from the keys.
+      height: Math.max(resolvedHeight - lift + overlap, 0),
+      paddingBottom: insets.bottom + overlap,
+      transform: [
+      // Its own height below the screen at 0, in place at 1.
+      {
+        translateY: slide.value - lift + overlap + (1 - entrance.value) * resolvedHeight
+      }]
+    };
+  });
+
+  // The backdrop fades on its own faster curve, and thins again as the sheet is
+  // dragged away, so letting go halfway never leaves a full-strength scrim
+  // behind a half-gone sheet.
+  const backdropStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    const dragged = resolvedHeight > 0 ? Math.min(Math.max(slide.value / resolvedHeight, 0), 1) : 0;
+    return {
+      // The scrim's own colour token carries its alpha, so this animates the
+      // view between transparent and that colour, not to a fraction of it.
+      opacity: backdropProgress.value * (1 - dragged)
+    };
+  });
+  if (!mounted) return null;
+  return /*#__PURE__*/React.createElement(_reactNative.Modal, {
+    transparent: true,
+    visible: true,
+    animationType: "none",
+    statusBarTranslucent: true,
+    onRequestClose: close,
+    onShow: () => {
+      isShown.current = true;
+      if (!pendingOpen.current) return;
+      pendingOpen.current = false;
+      // Two frames after `onShow`, not on it: iOS reports the Modal as shown
+      // while it is still settling, and an animation started in that window
+      // spends its opening frames — the ones an ease-out puts most of the
+      // distance into — behind a view that is not on screen yet.
+      requestAnimationFrame(() => requestAnimationFrame(startOpen));
+    }
+  }, /*#__PURE__*/React.createElement(_reactNativeGestureHandler.GestureHandlerRootView, {
+    style: styles.root
+  }, /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.root,
+    accessibilityViewIsModal: true
+  }, /*#__PURE__*/React.createElement(_reactNativeReanimated.default.View, {
+    style: [styles.backdrop, backdropStyle],
+    pointerEvents: closeOnBackdropPress ? 'auto' : 'none'
+  }, /*#__PURE__*/React.createElement(_reactNative.Pressable, {
+    style: styles.backdropPressable,
+    onPress: closeOnBackdropPress ? close : undefined,
+    accessibilityRole: "button",
+    accessibilityLabel: "Close"
+  })), /*#__PURE__*/React.createElement(_reactNativeGestureHandler.GestureDetector, {
+    gesture: pan
+  }, /*#__PURE__*/React.createElement(_reactNativeReanimated.default.View, {
+    style: [styles.sheet, style,
+    // The resting position belongs in the plain style too, not
+    // only in the animated one. There is a frame on Android
+    // between the dialog window coming in and the animated style
+    // landing, and a view with no transform yet is drawn where it
+    // was laid out — which flashed the sheet on screen before the
+    // entrance had begun, then took it away again. Starting it
+    // off screen here means that frame shows nothing.
+    {
+      transform: [{
+        translateY: resolvedHeight
+      }]
+    }, sheetStyle]
+  }, /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.handleArea
+  }, /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.handle
+  })), /*#__PURE__*/React.createElement(ScrollCoordinationContext.Provider, {
+    value: scrollCoordination
+  }, /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.body
+  }, children)))))));
+});
+
+/**
+ * The scroll view a sheet's body should use.
+ *
+ * It is an ordinary ScrollView that also tells the sheet whether it is scrolled
+ * to the top and hands the sheet its ref, which is what lets one downward drag
+ * scroll the list until it reaches the top and then carry on into closing the
+ * sheet, without the finger ever coming up.
+ */
+const BottomSheetScrollView = /*#__PURE__*/(0, _react.forwardRef)(function BottomSheetScrollView({
+  onScroll,
+  scrollEventThrottle,
+  ...rest
+}, ref) {
+  const coordination = (0, _react.useContext)(ScrollCoordinationContext);
+  const handleScroll = event => {
+    coordination === null || coordination === void 0 || coordination.setAtTop(event.nativeEvent.contentOffset.y <= 0);
+    onScroll === null || onScroll === void 0 || onScroll(event);
+  };
+  return /*#__PURE__*/React.createElement(_reactNative.ScrollView, _extends({}, rest, {
+    ref: node => {
+      if (coordination) {
+        coordination.scrollRef.current = node;
+      }
+      if (typeof ref === 'function') ref(node);else if (ref) ref.current = node;
+    },
+    onScroll: handleScroll,
+    scrollEventThrottle: scrollEventThrottle ?? 16
+  }));
+});
+
+/**
+ * `BottomSheet.ScrollView` is the scroll view a sheet's body should use — see
+ * the note on the component below.
+ */
+const BottomSheet = exports.BottomSheet = Object.assign(BottomSheetRoot, {
+  ScrollView: BottomSheetScrollView
+});
+//# sourceMappingURL=BottomSheet.js.map