@webority-technologies/mobile 0.0.1

package/lib/commonjs/components/BottomNavigation/BottomNavigation.js

@@ -0,0 +1,288 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.BottomNavigation = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+var _index = require("../../theme/index.js");
+var _index2 = require("../../utils/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+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); }
+const ICON_SIZE = 24;
+const PILL_HEIGHT = 36;
+const UNDERLINE_HEIGHT = 3;
+const formatBadge = value => {
+  if (value === null || value === undefined || value === false) return null;
+  if (value === true || value === '·') return {
+    text: '',
+    isDot: true
+  };
+  if (typeof value === 'number') {
+    if (value <= 0) return null;
+    return {
+      text: value > 99 ? '99+' : String(value),
+      isDot: false
+    };
+  }
+  if (typeof value === 'string') {
+    if (value.length === 0) return null;
+    return {
+      text: value,
+      isDot: false
+    };
+  }
+  return null;
+};
+const badgeAccessibilitySuffix = value => {
+  if (value === null || value === undefined || value === false) return '';
+  if (typeof value === 'number') {
+    return value > 0 ? `, ${value} unread` : '';
+  }
+  if (value === true || value === '·') return ', new updates';
+  if (typeof value === 'string' && value.length > 0) return `, ${value}`;
+  return '';
+};
+const BottomNavigation = exports.BottomNavigation = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    tabs,
+    activeTab,
+    onTabPress,
+    haptic = 'selection',
+    showLabels = true,
+    variant = 'pill',
+    style,
+    indicatorStyle,
+    labelStyle,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const activeIndex = Math.max(0, tabs.findIndex(tab => tab.key === activeTab));
+  const [tabWidth, setTabWidth] = _react.default.useState(0);
+  const indicatorTranslateX = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const iconScales = (0, _react.useRef)({});
+
+  // Ensure each tab has a persistent scale value
+  tabs.forEach(tab => {
+    if (!iconScales.current[tab.key]) {
+      iconScales.current[tab.key] = new _reactNative.Animated.Value(1);
+    }
+  });
+
+  // Animate indicator when active tab changes or layout settles
+  (0, _react.useEffect)(() => {
+    if (tabWidth <= 0) return;
+    _reactNative.Animated.spring(indicatorTranslateX, {
+      toValue: activeIndex * tabWidth,
+      tension: 120,
+      friction: 14,
+      useNativeDriver: true
+    }).start();
+  }, [activeIndex, tabWidth, indicatorTranslateX]);
+  const handleLayout = e => {
+    const total = e.nativeEvent.layout.width;
+    if (tabs.length > 0) {
+      setTabWidth(total / tabs.length);
+    }
+  };
+  const handlePress = tab => {
+    if (tab.key !== activeTab && haptic !== false) {
+      (0, _index2.triggerHaptic)(haptic);
+    }
+    const scale = iconScales.current[tab.key];
+    if (scale) {
+      _reactNative.Animated.sequence([_reactNative.Animated.timing(scale, {
+        toValue: 1.15,
+        duration: 120,
+        useNativeDriver: true
+      }), _reactNative.Animated.spring(scale, {
+        toValue: 1,
+        tension: 200,
+        friction: 8,
+        useNativeDriver: true
+      })]).start();
+    }
+    onTabPress(tab.key);
+  };
+  const paddingBottom = Math.max(8, insets.bottom);
+
+  // Pill width is intrinsic; we compute its rendered offset to keep it centered
+  // within each tab cell when it animates.
+  const pillWidth = tabWidth > 0 ? Math.min(tabWidth - 16, 120) : 0;
+  const pillOffset = tabWidth > 0 ? (tabWidth - pillWidth) / 2 : 0;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    ref: ref,
+    testID: testID,
+    accessibilityRole: "tablist",
+    style: [styles.container, theme.shadows.lg, {
+      backgroundColor: theme.colors.background.elevated,
+      borderTopColor: theme.colors.border.primary,
+      paddingBottom
+    }, style],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.tabRow,
+      onLayout: handleLayout,
+      children: [variant === 'pill' && pillWidth > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+        pointerEvents: "none",
+        style: [styles.pill, {
+          width: pillWidth,
+          height: PILL_HEIGHT,
+          backgroundColor: theme.colors.primaryMuted,
+          borderRadius: theme.radius.full,
+          transform: [{
+            translateX: _reactNative.Animated.add(indicatorTranslateX, new _reactNative.Animated.Value(pillOffset))
+          }]
+        }, indicatorStyle]
+      }) : null, tabs.map((tab, index) => {
+        const isActive = tab.key === activeTab;
+        const color = isActive ? theme.colors.primary : theme.colors.text.tertiary;
+        const renderIcon = isActive && tab.activeIcon ? tab.activeIcon : tab.icon;
+        const scale = iconScales.current[tab.key];
+        const badge = formatBadge(tab.badge ?? null);
+        const a11ySuffix = badgeAccessibilitySuffix(tab.badge ?? null);
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+          onPress: () => handlePress(tab),
+          accessibilityRole: "tab",
+          accessibilityState: {
+            selected: isActive
+          },
+          accessibilityLabel: `${tab.label}${a11ySuffix}`,
+          accessibilityHint: `Switches to ${tab.label}`,
+          hitSlop: {
+            top: 6,
+            bottom: 6,
+            left: 6,
+            right: 6
+          },
+          style: ({
+            pressed
+          }) => [styles.tab, pressed ? {
+            opacity: 0.85
+          } : null],
+          testID: testID ? `${testID}-tab-${tab.key}` : undefined,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+            style: [styles.iconWrap, {
+              transform: [{
+                scale
+              }]
+            }],
+            children: [renderIcon({
+              color,
+              size: ICON_SIZE,
+              focused: isActive
+            }), badge ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: [badge.isDot ? styles.badgeDot : styles.badgePill, {
+                backgroundColor: theme.colors.error,
+                borderColor: theme.colors.background.elevated
+              }],
+              children: badge.isDot ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: [styles.badgeText, {
+                  color: theme.colors.text.inverse
+                }],
+                numberOfLines: 1,
+                children: badge.text
+              })
+            }) : null]
+          }), showLabels ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            numberOfLines: 1,
+            style: [styles.label, {
+              color,
+              fontWeight: isActive ? theme.typography.fontWeight.semibold : theme.typography.fontWeight.normal
+            }, labelStyle],
+            children: tab.label
+          }) : null]
+        }, tab.key);
+      }), variant === 'underline' && tabWidth > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+        pointerEvents: "none",
+        style: [styles.underline, {
+          width: tabWidth,
+          backgroundColor: theme.colors.primary,
+          transform: [{
+            translateX: indicatorTranslateX
+          }]
+        }, indicatorStyle]
+      }) : null]
+    })
+  });
+});
+BottomNavigation.displayName = 'BottomNavigation';
+const buildStyles = theme => _reactNative.StyleSheet.create({
+  container: {
+    borderTopWidth: _reactNative.StyleSheet.hairlineWidth,
+    paddingTop: 6,
+    paddingHorizontal: 4
+  },
+  tabRow: {
+    flexDirection: 'row',
+    alignItems: 'stretch',
+    position: 'relative'
+  },
+  tab: {
+    flex: 1,
+    minHeight: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 6,
+    gap: 2
+  },
+  iconWrap: {
+    width: ICON_SIZE + 8,
+    height: ICON_SIZE + 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative'
+  },
+  label: {
+    fontSize: theme.typography.fontSize.xs,
+    lineHeight: theme.typography.fontSize.xs * theme.typography.lineHeight.tight,
+    textAlign: 'center'
+  },
+  pill: {
+    position: 'absolute',
+    top: 4,
+    left: 0
+  },
+  underline: {
+    position: 'absolute',
+    bottom: -6,
+    left: 0,
+    height: UNDERLINE_HEIGHT,
+    borderTopLeftRadius: 2,
+    borderTopRightRadius: 2
+  },
+  badgePill: {
+    position: 'absolute',
+    top: -4,
+    right: -8,
+    minWidth: 18,
+    height: 18,
+    borderRadius: 9,
+    paddingHorizontal: 4,
+    paddingVertical: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1.5
+  },
+  badgeDot: {
+    position: 'absolute',
+    top: -2,
+    right: -2,
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    borderWidth: 1.5
+  },
+  badgeText: {
+    fontSize: 10,
+    fontWeight: '700',
+    lineHeight: 12,
+    textAlign: 'center',
+    includeFontPadding: false
+  }
+});
+var _default = exports.default = BottomNavigation;
+//# sourceMappingURL=BottomNavigation.js.map

package/lib/commonjs/components/BottomNavigation/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BottomNavigation", {
+  enumerable: true,
+  get: function () {
+    return _BottomNavigation.BottomNavigation;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _BottomNavigation.default;
+  }
+});
+var _BottomNavigation = _interopRequireWildcard(require("./BottomNavigation.js"));
+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); }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,367 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.BottomSheet = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeGestureHandler = require("react-native-gesture-handler");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+var _index = require("../../theme/index.js");
+var _index2 = require("../../utils/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+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); }
+/**
+ * BottomSheet — Reanimated 3 + Gesture Handler 2 implementation.
+ *
+ * A polished, theme-aware bottom sheet with multi-snap-point support,
+ * UI-thread driven pan gestures, and native-driver spring animations.
+ *
+ * USAGE:
+ *
+ * const ref = useRef<BottomSheetRef>(null);
+ * <BottomSheet ref={ref} snapPoints={[200, '50%', '90%']}>
+ *   <YourContent />
+ * </BottomSheet>
+ *
+ * ref.current?.expand();   // open at first snap point (or `index` prop)
+ * ref.current?.expand(2);  // open at specific index
+ * ref.current?.collapse(); // animate to smallest snap point
+ * ref.current?.close();    // dismiss
+ */
+
+const SPRING_CONFIG = {
+  damping: 20,
+  stiffness: 240,
+  mass: 1
+};
+const CLOSE_VELOCITY_THRESHOLD = 1000;
+const DRAG_ACTIVATION_OFFSET = 10;
+const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    snapPoints,
+    index: controlledIndex,
+    onChange,
+    onAnimate,
+    enablePanDownToClose = true,
+    enableBackdropPress = true,
+    backdropOpacity = 0.5,
+    handleIndicatorStyle,
+    containerStyle,
+    children,
+    accessibilityLabel,
+    accessibilityViewIsModal,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  const [screenHeight, setScreenHeight] = (0, _react.useState)(() => _reactNative.Dimensions.get('window').height);
+
+  // Resolve snap points (px values), sorted ascending so larger height = smaller translateY.
+  const resolvedSnapPoints = (0, _react.useMemo)(() => resolveSnapPoints(snapPoints, screenHeight), [snapPoints, screenHeight]);
+
+  // Listen for orientation / window changes so % snap points stay accurate.
+  (0, _react.useEffect)(() => {
+    const sub = _reactNative.Dimensions.addEventListener('change', ({
+      window
+    }) => {
+      setScreenHeight(window.height);
+    });
+    return () => sub.remove();
+  }, []);
+  const closedY = screenHeight; // fully off-screen
+  const minSnapPoint = resolvedSnapPoints[0] ?? 0;
+  const maxSnapPoint = resolvedSnapPoints[resolvedSnapPoints.length - 1] ?? 0;
+
+  // translateY: 0 = top of screen, screenHeight = fully closed.
+  const translateY = (0, _reactNativeReanimated.useSharedValue)(closedY);
+  // Captures the translateY at gesture start so onUpdate can be additive.
+  const dragStartY = (0, _reactNativeReanimated.useSharedValue)(closedY);
+  // Tracks current snap index on the JS thread (mirrored to a shared value for worklets).
+  const currentIndexShared = (0, _reactNativeReanimated.useSharedValue)(-1);
+  const [currentIndex, setCurrentIndex] = (0, _react.useState)(-1);
+  const isAnimatingRef = (0, _react.useRef)(false);
+
+  // Convert a snap-point index → translateY position. -1 = closed.
+  const yForIndex = (0, _react.useCallback)(idx => {
+    if (idx < 0 || idx >= resolvedSnapPoints.length) return closedY;
+    const sheetHeight = resolvedSnapPoints[idx];
+    return screenHeight - sheetHeight;
+  }, [resolvedSnapPoints, screenHeight, closedY]);
+  const setIndexJS = (0, _react.useCallback)(next => {
+    const previous = currentIndex;
+    if (previous === next) return;
+    setCurrentIndex(next);
+    currentIndexShared.value = next;
+    onChange?.(next);
+  }, [currentIndex, currentIndexShared, onChange]);
+  const animateTo = (0, _react.useCallback)((to, fromIndex, toIndex) => {
+    isAnimatingRef.current = true;
+    onAnimate?.(fromIndex, toIndex);
+    translateY.value = (0, _reactNativeReanimated.withSpring)(to, SPRING_CONFIG, finished => {
+      'worklet';
+
+      if (finished) {
+        (0, _reactNativeReanimated.runOnJS)(markAnimationDone)();
+      }
+    });
+  }, [onAnimate, translateY]);
+  const markAnimationDone = (0, _react.useCallback)(() => {
+    isAnimatingRef.current = false;
+  }, []);
+  const expand = (0, _react.useCallback)(idx => {
+    const target = typeof idx === 'number' ? clamp(idx, 0, resolvedSnapPoints.length - 1) : currentIndex >= 0 ? currentIndex : 0;
+    const fromIndex = currentIndexShared.value;
+    const to = yForIndex(target);
+    setIndexJS(target);
+    animateTo(to, fromIndex, target);
+  }, [animateTo, currentIndex, currentIndexShared, resolvedSnapPoints.length, setIndexJS, yForIndex]);
+  const collapse = (0, _react.useCallback)(() => {
+    if (resolvedSnapPoints.length === 0) return;
+    const fromIndex = currentIndexShared.value;
+    const to = yForIndex(0);
+    setIndexJS(0);
+    animateTo(to, fromIndex, 0);
+  }, [animateTo, currentIndexShared, resolvedSnapPoints.length, setIndexJS, yForIndex]);
+  const close = (0, _react.useCallback)(() => {
+    const fromIndex = currentIndexShared.value;
+    setIndexJS(-1);
+    isAnimatingRef.current = true;
+    onAnimate?.(fromIndex, -1);
+    translateY.value = (0, _reactNativeReanimated.withTiming)(closedY, {
+      duration: 220
+    }, finished => {
+      'worklet';
+
+      if (finished) {
+        (0, _reactNativeReanimated.runOnJS)(markAnimationDone)();
+      }
+    });
+  }, [closedY, currentIndexShared, markAnimationDone, onAnimate, setIndexJS, translateY]);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    expand,
+    collapse,
+    close
+  }), [expand, collapse, close]);
+
+  // Drive the controlled `index` prop.
+  (0, _react.useEffect)(() => {
+    if (typeof controlledIndex !== 'number') return;
+    if (controlledIndex === currentIndex) return;
+    if (controlledIndex === -1) {
+      close();
+    } else {
+      expand(controlledIndex);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [controlledIndex]);
+
+  // ───────── Gesture (UI thread) ─────────
+  // Worklet helpers must be declared inline so they capture shared values correctly.
+  const minTopY = screenHeight - maxSnapPoint; // smallest translateY (sheet fully expanded)
+  const snapTargets = (0, _react.useMemo)(() => resolvedSnapPoints.map(h => screenHeight - h), [resolvedSnapPoints, screenHeight]);
+  const handleSnapEnd = (0, _react.useCallback)((toIndex, toY) => {
+    const fromIndex = currentIndexShared.value;
+    if (toIndex === -1) {
+      (0, _index2.triggerHaptic)('selection');
+      setIndexJS(-1);
+      isAnimatingRef.current = true;
+      onAnimate?.(fromIndex, -1);
+      translateY.value = (0, _reactNativeReanimated.withTiming)(closedY, {
+        duration: 220
+      }, finished => {
+        'worklet';
+
+        if (finished) {
+          (0, _reactNativeReanimated.runOnJS)(markAnimationDone)();
+        }
+      });
+      return;
+    }
+    setIndexJS(toIndex);
+    animateTo(toY, fromIndex, toIndex);
+  }, [animateTo, closedY, currentIndexShared, markAnimationDone, onAnimate, setIndexJS, translateY]);
+  const panGesture = (0, _react.useMemo)(() => {
+    const targets = snapTargets;
+    const closed = closedY;
+    const top = minTopY;
+    const canPanDownToClose = enablePanDownToClose;
+    return _reactNativeGestureHandler.Gesture.Pan().activeOffsetY([-DRAG_ACTIVATION_OFFSET, DRAG_ACTIVATION_OFFSET]).failOffsetX([-15, 15]).onStart(() => {
+      'worklet';
+
+      dragStartY.value = translateY.value;
+    }).onUpdate(event => {
+      'worklet';
+
+      const next = dragStartY.value + event.translationY;
+      // Clamp at the top (most-expanded) snap point with a touch of rubber-banding.
+      if (next < top) {
+        translateY.value = top + (next - top) * 0.25;
+      } else {
+        translateY.value = next;
+      }
+    }).onEnd(event => {
+      'worklet';
+
+      const releaseY = translateY.value;
+      const velocity = event.velocityY;
+
+      // Fast downward swipe → close (if allowed) or snap to smallest.
+      if (velocity > CLOSE_VELOCITY_THRESHOLD) {
+        if (canPanDownToClose) {
+          (0, _reactNativeReanimated.runOnJS)(handleSnapEnd)(-1, closed);
+          return;
+        }
+        (0, _reactNativeReanimated.runOnJS)(handleSnapEnd)(0, targets[0]);
+        return;
+      }
+
+      // Find nearest snap target by distance.
+      let nearestIdx = 0;
+      let nearestDist = Math.abs(releaseY - targets[0]);
+      for (let i = 1; i < targets.length; i++) {
+        const d = Math.abs(releaseY - targets[i]);
+        if (d < nearestDist) {
+          nearestDist = d;
+          nearestIdx = i;
+        }
+      }
+
+      // If user dragged below smallest snap point past threshold and pan-to-close is on, dismiss.
+      const smallest = targets[0];
+      const overshoot = releaseY - smallest;
+      if (canPanDownToClose && overshoot > 80) {
+        (0, _reactNativeReanimated.runOnJS)(handleSnapEnd)(-1, closed);
+        return;
+      }
+      (0, _reactNativeReanimated.runOnJS)(handleSnapEnd)(nearestIdx, targets[nearestIdx]);
+    });
+  }, [closedY, dragStartY, enablePanDownToClose, handleSnapEnd, minTopY, snapTargets, translateY]);
+
+  // ───────── Animated styles ─────────
+  const sheetStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    transform: [{
+      translateY: translateY.value
+    }]
+  }));
+  const backdropStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    // 0 opacity when sheet is closed, full backdropOpacity at minSnap height (and above).
+    const closedAt = screenHeight;
+    const openAt = screenHeight - minSnapPoint;
+    const opacity = (0, _reactNativeReanimated.interpolate)(translateY.value, [closedAt, openAt], [0, backdropOpacity], _reactNativeReanimated.Extrapolation.CLAMP);
+    return {
+      opacity,
+      // Disable hit-test entirely when fully closed so it doesn't swallow taps.
+      pointerEvents: translateY.value >= closedAt - 0.5 ? 'none' : 'auto'
+    };
+  }, [backdropOpacity, minSnapPoint, screenHeight]);
+  const isExpanded = currentIndex >= 0;
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const handleBackdropPress = (0, _react.useCallback)(() => {
+    if (!enableBackdropPress) return;
+    (0, _index2.triggerHaptic)('selection');
+    close();
+  }, [enableBackdropPress, close]);
+
+  // Don't render the heavy gesture tree at all when nothing's been opened yet.
+  // We still mount once `currentIndex` ≥ 0 OR an animation has started.
+  // For controlled `index`, we treat any value ≠ -1 as "opened".
+  const everOpenedRef = (0, _react.useRef)(false);
+  if (isExpanded || controlledIndex !== undefined) {
+    everOpenedRef.current = true;
+  }
+  if (!everOpenedRef.current) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: _reactNative.StyleSheet.absoluteFill,
+    pointerEvents: "box-none",
+    testID: testID,
+    accessibilityViewIsModal: accessibilityViewIsModal ?? isExpanded,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+      style: [styles.backdrop, {
+        backgroundColor: theme.colors.background.overlay
+      }, backdropStyle],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        style: _reactNative.StyleSheet.absoluteFill,
+        onPress: handleBackdropPress,
+        accessibilityRole: "button",
+        accessibilityLabel: "Close bottom sheet",
+        disabled: !enableBackdropPress || !isExpanded
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
+      gesture: panGesture,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
+        // 'dialog' is a valid platform role on web/iOS; RN's typings list it as a string union
+        // that varies by platform — cast keeps strict-mode happy.
+        accessibilityRole: 'dialog',
+        accessibilityLabel: accessibilityLabel,
+        accessibilityViewIsModal: accessibilityViewIsModal ?? isExpanded,
+        style: [styles.sheet, {
+          height: maxSnapPoint,
+          backgroundColor: theme.colors.background.elevated,
+          borderTopLeftRadius: theme.radius['2xl'],
+          borderTopRightRadius: theme.radius['2xl'],
+          paddingBottom: insets.bottom,
+          ...theme.shadows.xl
+        }, containerStyle, sheetStyle],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.handleRow,
+          pointerEvents: "box-none",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [styles.handle, {
+              backgroundColor: theme.colors.border.primary
+            }, handleIndicatorStyle]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.content,
+          children: children
+        })]
+      })
+    })]
+  });
+});
+BottomSheet.displayName = 'BottomSheet';
+
+// ───────── Helpers ─────────
+
+const resolveSnapPoints = (points, screenH) => {
+  const resolved = points.map(p => {
+    if (typeof p === 'number') return p;
+    const pct = parseFloat(p);
+    if (Number.isNaN(pct)) return 0;
+    return pct / 100 * screenH;
+  });
+  return [...resolved].sort((a, b) => a - b);
+};
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const buildStyles = _theme => _reactNative.StyleSheet.create({
+  backdrop: {
+    ..._reactNative.StyleSheet.absoluteFillObject
+  },
+  sheet: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    overflow: 'hidden'
+  },
+  handleRow: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: 10,
+    paddingBottom: 8
+  },
+  handle: {
+    width: 36,
+    height: 4,
+    borderRadius: 2
+  },
+  content: {
+    flex: 1
+  }
+});
+var _default = exports.default = BottomSheet;
+//# sourceMappingURL=BottomSheet.js.map

package/lib/commonjs/components/BottomSheet/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BottomSheet", {
+  enumerable: true,
+  get: function () {
+    return _BottomSheet.BottomSheet;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _BottomSheet.default;
+  }
+});
+var _BottomSheet = _interopRequireWildcard(require("./BottomSheet.js"));
+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); }
+//# sourceMappingURL=index.js.map