@retray-dev/ui-kit 10.0.0 → 10.1.0

package/dist/Sheet.js

@@ -2,7 +2,7 @@
 
 var React2 = require('react');
 var reactNative = require('react-native');
-var bottomSheet = require('@gorhom/bottom-sheet');
+var BottomSheet = require('@gorhom/bottom-sheet');
 var reactNativeSafeAreaContext = require('react-native-safe-area-context');
 var vectorIcons = require('@expo/vector-icons');
 var reactNativeSizeMatters = require('react-native-size-matters');
@@ -10,6 +10,7 @@ var reactNativeSizeMatters = require('react-native-size-matters');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React2__default = /*#__PURE__*/_interopDefault(React2);
+var BottomSheet__default = /*#__PURE__*/_interopDefault(BottomSheet);
 
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
   get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
@@ -256,13 +257,13 @@ function Sheet({
   React2.useEffect(() => {
     if (open) {
       impactMedium();
-      ref.current?.present();
+      ref.current?.snapToIndex(0);
     } else {
-      ref.current?.dismiss();
+      ref.current?.close();
     }
   }, [open]);
   const renderBackdrop = React2.useCallback((props) => /* @__PURE__ */ React2__default.default.createElement(
-    bottomSheet.BottomSheetBackdrop,
+    BottomSheet.BottomSheetBackdrop,
     {
       ...props,
       disappearsOnIndex: -1,
@@ -279,7 +280,7 @@ function Sheet({
   ) : children;
   const effectiveSubtitle = subtitle ?? description;
   const showHeader = !!(title || effectiveSubtitle || showCloseButton) && !customHeader;
-  const headerNode = customHeader ? customHeader : showHeader ? /* @__PURE__ */ React2__default.default.createElement(reactNative.View, { style: styles.header, accessibilityRole: "header" }, /* @__PURE__ */ React2__default.default.createElement(reactNative.View, { style: styles.headerRow }, title ? /* @__PURE__ */ React2__default.default.createElement(reactNative.Text, { style: [styles.title, { color: colors.foreground }], allowFontScaling: true }, title) : /* @__PURE__ */ React2__default.default.createElement(reactNative.View, { style: { flex: 1 } }), showCloseButton ? /* @__PURE__ */ React2__default.default.createElement(
+  const headerNode = customHeader ? customHeader : showHeader ? /* @__PURE__ */ React2__default.default.createElement(reactNative.View, { style: [styles.header, { backgroundColor: colors.card }], accessibilityRole: "header" }, /* @__PURE__ */ React2__default.default.createElement(reactNative.View, { style: styles.headerRow }, title ? /* @__PURE__ */ React2__default.default.createElement(reactNative.Text, { style: [styles.title, { color: colors.foreground }], allowFontScaling: true }, title) : /* @__PURE__ */ React2__default.default.createElement(reactNative.View, { style: { flex: 1 } }), showCloseButton ? /* @__PURE__ */ React2__default.default.createElement(
     reactNative.TouchableOpacity,
     {
       onPress: onClose,
@@ -296,7 +297,7 @@ function Sheet({
   const effectiveFooter = customFooter ? customFooter : footer;
   const renderFooter = React2.useCallback((props) => {
     if (!effectiveFooter) return null;
-    return /* @__PURE__ */ React2__default.default.createElement(bottomSheet.BottomSheetFooter, { ...props }, effectiveFooter);
+    return /* @__PURE__ */ React2__default.default.createElement(BottomSheet.BottomSheetFooter, { ...props }, effectiveFooter);
   }, [effectiveFooter]);
   if (asDialog) {
     return /* @__PURE__ */ React2__default.default.createElement(reactNative.Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: onClose }, /* @__PURE__ */ React2__default.default.createElement(reactNative.Pressable, { style: styles.dialogBackdrop, onPress: onClose, accessibilityRole: "button", accessibilityLabel: "Close" }, /* @__PURE__ */ React2__default.default.createElement(
@@ -327,13 +328,14 @@ function Sheet({
   const effectiveMaxHeight = maxHeight ?? DEFAULT_MAX_HEIGHT;
   const useDynamicSizing = !snapPoints;
   return /* @__PURE__ */ React2__default.default.createElement(
-    bottomSheet.BottomSheetModal,
+    BottomSheet__default.default,
     {
       ref,
+      index: -1,
+      onClose,
       enableDynamicSizing: useDynamicSizing,
       snapPoints,
       maxDynamicContentSize: useDynamicSizing ? effectiveMaxHeight : void 0,
-      onDismiss: onClose,
       backdropComponent: renderBackdrop,
       footerComponent: effectiveFooter ? renderFooter : void 0,
       backgroundStyle: [styles.background, { backgroundColor: colors.card }],
@@ -346,7 +348,7 @@ function Sheet({
       enableBlurKeyboardOnGesture
     },
     useScroll ? /* @__PURE__ */ React2__default.default.createElement(
-      bottomSheet.BottomSheetScrollView,
+      BottomSheet.BottomSheetScrollView,
       {
         contentContainerStyle: [
           styles.scrollContent,
@@ -355,11 +357,12 @@ function Sheet({
         style: contentStyle,
         showsVerticalScrollIndicator: true,
         indicatorStyle: "black",
-        persistentScrollbar: isAndroid
+        persistentScrollbar: isAndroid,
+        stickyHeaderIndices: headerNode ? [0] : void 0
       },
       headerNode,
       contentNode
-    ) : /* @__PURE__ */ React2__default.default.createElement(bottomSheet.BottomSheetView, { style: [styles.content, contentStyle, style] }, headerNode, contentNode)
+    ) : /* @__PURE__ */ React2__default.default.createElement(BottomSheet.BottomSheetView, { style: [styles.content, contentStyle, style] }, headerNode, contentNode)
   );
 }
 Sheet.Header = SheetHeader;
@@ -441,10 +444,10 @@ var styles = reactNative.StyleSheet.create({
 
 Object.defineProperty(exports, "BottomSheetModalProvider", {
   enumerable: true,
-  get: function () { return bottomSheet.BottomSheetModalProvider; }
+  get: function () { return BottomSheet.BottomSheetModalProvider; }
 });
 Object.defineProperty(exports, "SheetTextInput", {
   enumerable: true,
-  get: function () { return bottomSheet.BottomSheetTextInput; }
+  get: function () { return BottomSheet.BottomSheetTextInput; }
 });
 exports.Sheet = Sheet;

package/dist/Sheet.mjs

@@ -1,4 +1,4 @@
-export { BottomSheetModalProvider, Sheet, BottomSheetTextInput as SheetTextInput } from './chunk-PFZTM6D5.mjs';
+export { BottomSheetModalProvider, Sheet, BottomSheetTextInput as SheetTextInput } from './chunk-Y2NS74WS.mjs';
 import './chunk-EJ7ZPXOH.mjs';
 import './chunk-QY3X2UYR.mjs';
 import './chunk-SOYNZDVY.mjs';

package/dist/Switch.js

@@ -227,9 +227,11 @@ var THUMB_SIZE = s(24);
 var THUMB_OFFSET = s(3);
 var THUMB_TRAVEL = TRACK_WIDTH - THUMB_SIZE - THUMB_OFFSET * 2;
 var ICON_SIZE = s(13);
+var DISABLED_OPACITY = 0.45;
 function Switch({ checked = false, onCheckedChange, disabled, style, accessibilityLabel }) {
   const { colors } = useTheme();
-  return /* @__PURE__ */ React2__default.default.createElement(reactNative.View, { style: [{ opacity: disabled ? 0.45 : 1, alignSelf: "flex-start" }, style] }, /* @__PURE__ */ React2__default.default.createElement(
+  const isDisabled = !!disabled;
+  return /* @__PURE__ */ React2__default.default.createElement(reactNative.View, { style: [{ alignSelf: "flex-start" }, style] }, /* @__PURE__ */ React2__default.default.createElement(
     reactNative.TouchableOpacity,
     {
       onPress: () => {
@@ -241,47 +243,68 @@ function Switch({ checked = false, onCheckedChange, disabled, style, accessibili
       touchSoundDisabled: true,
       accessibilityRole: "switch",
       accessibilityLabel,
-      accessibilityState: { checked, disabled: !!disabled },
+      accessibilityState: { checked, disabled: isDisabled },
       style: styles.touchable
     },
-    /* @__PURE__ */ React2__default.default.createElement(
+    /* @__PURE__ */ React2__default.default.createElement(reactNative.View, { style: styles.trackContainer }, /* @__PURE__ */ React2__default.default.createElement(
       reactNativeEase.EaseView,
       {
-        style: styles.track,
+        style: [styles.track, isDisabled && styles.disabledTrack],
         animate: { backgroundColor: checked ? colors.primary : colors.surfaceStrong },
         transition: COLOR_TRANSITION
+      }
+    ), /* @__PURE__ */ React2__default.default.createElement(
+      reactNativeEase.EaseView,
+      {
+        style: [styles.trackBorder, { borderWidth: 1.5 }],
+        pointerEvents: "none",
+        animate: { borderColor: checked ? "transparent" : colors.border },
+        transition: COLOR_TRANSITION
+      }
+    ), /* @__PURE__ */ React2__default.default.createElement(
+      reactNativeEase.EaseView,
+      {
+        style: [styles.thumb, { backgroundColor: colors.primaryForeground }],
+        animate: { translateX: checked ? THUMB_TRAVEL : 0 },
+        transition: SPRING_ELASTIC
       },
       /* @__PURE__ */ React2__default.default.createElement(
         reactNativeEase.EaseView,
         {
-          style: [styles.trackBorder, { borderWidth: 1.5 }],
-          pointerEvents: "none",
-          animate: { borderColor: checked ? "transparent" : colors.border },
-          transition: COLOR_TRANSITION
-        }
+          style: styles.iconWrapper,
+          animate: { opacity: checked ? isDisabled ? DISABLED_OPACITY : 1 : 0 },
+          transition: OPACITY_TRANSITION
+        },
+        /* @__PURE__ */ React2__default.default.createElement(vectorIcons.Feather, { name: "check", size: ICON_SIZE, color: colors.primary })
       ),
       /* @__PURE__ */ React2__default.default.createElement(
         reactNativeEase.EaseView,
         {
-          style: [styles.thumb, { backgroundColor: colors.primaryForeground }],
-          animate: { translateX: checked ? THUMB_TRAVEL : 0 },
-          transition: SPRING_ELASTIC
+          style: styles.iconWrapper,
+          animate: { opacity: checked ? 0 : isDisabled ? DISABLED_OPACITY : 1 },
+          transition: OPACITY_TRANSITION
         },
-        /* @__PURE__ */ React2__default.default.createElement(reactNativeEase.EaseView, { style: styles.iconWrapper, animate: { opacity: checked ? 1 : 0 }, transition: OPACITY_TRANSITION }, /* @__PURE__ */ React2__default.default.createElement(vectorIcons.Feather, { name: "check", size: ICON_SIZE, color: colors.primary })),
-        /* @__PURE__ */ React2__default.default.createElement(reactNativeEase.EaseView, { style: styles.iconWrapper, animate: { opacity: checked ? 0 : 1 }, transition: OPACITY_TRANSITION }, /* @__PURE__ */ React2__default.default.createElement(vectorIcons.Feather, { name: "x", size: ICON_SIZE, color: colors.foregroundMuted }))
+        /* @__PURE__ */ React2__default.default.createElement(vectorIcons.Feather, { name: "x", size: ICON_SIZE, color: colors.foregroundMuted })
       )
-    )
+    ))
   ));
 }
 var styles = reactNative.StyleSheet.create({
   touchable: {
     alignSelf: "flex-start"
   },
-  track: {
+  trackContainer: {
+    position: "relative",
     width: TRACK_WIDTH,
-    height: TRACK_HEIGHT,
+    height: TRACK_HEIGHT
+  },
+  track: {
+    ...reactNative.StyleSheet.absoluteFillObject,
     borderRadius: TRACK_HEIGHT / 2
   },
+  disabledTrack: {
+    opacity: DISABLED_OPACITY
+  },
   trackBorder: {
     ...reactNative.StyleSheet.absoluteFillObject,
     borderRadius: TRACK_HEIGHT / 2

package/dist/Switch.mjs

@@ -1,4 +1,4 @@
-export { Switch } from './chunk-QKH5ZOD5.mjs';
+export { Switch } from './chunk-WF2XDFRK.mjs';
 import './chunk-EJ7ZPXOH.mjs';
 import './chunk-DVK4G2GT.mjs';
 import './chunk-SOYNZDVY.mjs';

package/dist/{chunk-O3HA6TYM.mjs → chunk-DJ7RN37L.mjs}

@@ -49,9 +49,9 @@ function AccordionItemComponent({
       },
       accessibilityRole: "button",
       accessibilityState: { expanded: isOpen },
-      accessibilityLabel: item.trigger
+      accessibilityLabel: typeof item.trigger === "string" ? item.trigger : void 0
     },
-    /* @__PURE__ */ React.createElement(View, { style: styles.triggerContent }, resolvedIcon ? /* @__PURE__ */ React.createElement(View, { style: styles.icon }, resolvedIcon) : null, /* @__PURE__ */ React.createElement(Text, { style: [styles.triggerText, { color: colors.foreground }], allowFontScaling: true }, item.trigger)),
+    /* @__PURE__ */ React.createElement(View, { style: styles.triggerContent }, resolvedIcon ? /* @__PURE__ */ React.createElement(View, { style: styles.icon }, resolvedIcon) : null, typeof item.trigger === "string" ? /* @__PURE__ */ React.createElement(Text, { style: [styles.triggerText, { color: colors.foreground }], allowFontScaling: true }, item.trigger) : item.trigger),
     /* @__PURE__ */ React.createElement(Animated.View, { style: [styles.chevron, rotationStyle] }, /* @__PURE__ */ React.createElement(Entypo, { name: "chevron-down", size: 18, color: colors.foregroundMuted }))
   ), /* @__PURE__ */ React.createElement(Animated.View, { style: bodyStyle }, /* @__PURE__ */ React.createElement(
     View,

package/dist/{chunk-FZZLPJ6B.mjs → chunk-KZL5VTYK.mjs}

@@ -3,29 +3,32 @@ import { impactMedium, notificationSuccess, selectionAsync } from './chunk-EJ7ZP
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { vs, mvs, ms, s } from './chunk-2CE3TQVY.mjs';
 import React, { useRef, useEffect } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import { BottomSheetModal, BottomSheetView, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
+import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
+import BottomSheet, { BottomSheetView, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
 import { Feather } from '@expo/vector-icons';
 
 function ConfirmDialog({
   visible,
   title,
+  subtitle,
   description,
   confirmLabel = "Confirm",
   cancelLabel = "Cancel",
   confirmVariant = "primary",
   loading = false,
+  showCloseButton = false,
   onConfirm,
   onCancel
 }) {
   const { colors } = useTheme();
   const ref = useRef(null);
+  const effectiveSubtitle = subtitle ?? description;
   useEffect(() => {
     if (visible) {
       impactMedium();
-      ref.current?.present();
+      ref.current?.snapToIndex(0);
     } else {
-      ref.current?.dismiss();
+      ref.current?.close();
     }
   }, [visible]);
   const renderBackdrop = (props) => /* @__PURE__ */ React.createElement(
@@ -38,17 +41,30 @@ function ConfirmDialog({
     }
   );
   return /* @__PURE__ */ React.createElement(
-    BottomSheetModal,
+    BottomSheet,
     {
       ref,
+      index: -1,
+      onClose: onCancel,
       enableDynamicSizing: true,
-      onDismiss: onCancel,
       backdropComponent: renderBackdrop,
       backgroundStyle: [styles.background, { backgroundColor: colors.card }],
       handleIndicatorStyle: [styles.handle, { backgroundColor: colors.border }],
       enablePanDownToClose: true
     },
-    /* @__PURE__ */ React.createElement(BottomSheetView, { style: styles.content }, /* @__PURE__ */ React.createElement(Text, { style: [styles.title, { color: colors.foreground }], allowFontScaling: true }, title), description ? /* @__PURE__ */ React.createElement(Text, { style: [styles.description, { color: colors.foregroundMuted }], allowFontScaling: true }, description) : null, /* @__PURE__ */ React.createElement(View, { style: styles.actions }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(BottomSheetView, { style: styles.content }, /* @__PURE__ */ React.createElement(View, { style: styles.header, accessibilityRole: "header" }, /* @__PURE__ */ React.createElement(View, { style: styles.headerRow }, /* @__PURE__ */ React.createElement(Text, { style: [styles.title, { color: colors.foreground }], allowFontScaling: true }, title), showCloseButton ? /* @__PURE__ */ React.createElement(
+      TouchableOpacity,
+      {
+        onPress: onCancel,
+        style: styles.closeButton,
+        activeOpacity: 0.6,
+        touchSoundDisabled: true,
+        accessibilityRole: "button",
+        accessibilityLabel: "Close",
+        hitSlop: { top: 12, bottom: 12, left: 12, right: 12 }
+      },
+      /* @__PURE__ */ React.createElement(Feather, { name: "x", size: ms(18), color: colors.foregroundMuted })
+    ) : null), effectiveSubtitle ? /* @__PURE__ */ React.createElement(Text, { style: [styles.subtitle, { color: colors.foregroundMuted }], allowFontScaling: true }, effectiveSubtitle) : null), /* @__PURE__ */ React.createElement(View, { style: styles.actions }, /* @__PURE__ */ React.createElement(
       Button,
       {
         label: confirmLabel,
@@ -95,19 +111,32 @@ var styles = StyleSheet.create({
     borderRadius: ms(2)
   },
   content: {
-    paddingHorizontal: s(24),
-    paddingBottom: vs(32),
-    gap: vs(12)
+    paddingHorizontal: s(16),
+    paddingBottom: vs(32)
+  },
+  header: {
+    paddingTop: vs(4),
+    paddingBottom: vs(12),
+    gap: vs(4)
+  },
+  headerRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
   },
   title: {
     fontFamily: "Sohne-SemiBold",
     fontSize: ms(18),
-    lineHeight: mvs(26)
+    flex: 1
+  },
+  closeButton: {
+    padding: s(4),
+    marginLeft: s(8)
   },
-  description: {
+  subtitle: {
     fontFamily: "Sohne-Regular",
-    fontSize: ms(15),
-    lineHeight: mvs(22)
+    fontSize: ms(14),
+    lineHeight: mvs(20)
   },
   actions: {
     gap: vs(10),

package/dist/{chunk-QKH5ZOD5.mjs → chunk-WF2XDFRK.mjs}

@@ -13,9 +13,11 @@ var THUMB_SIZE = s(24);
 var THUMB_OFFSET = s(3);
 var THUMB_TRAVEL = TRACK_WIDTH - THUMB_SIZE - THUMB_OFFSET * 2;
 var ICON_SIZE = s(13);
+var DISABLED_OPACITY = 0.45;
 function Switch({ checked = false, onCheckedChange, disabled, style, accessibilityLabel }) {
   const { colors } = useTheme();
-  return /* @__PURE__ */ React.createElement(View, { style: [{ opacity: disabled ? 0.45 : 1, alignSelf: "flex-start" }, style] }, /* @__PURE__ */ React.createElement(
+  const isDisabled = !!disabled;
+  return /* @__PURE__ */ React.createElement(View, { style: [{ alignSelf: "flex-start" }, style] }, /* @__PURE__ */ React.createElement(
     TouchableOpacity,
     {
       onPress: () => {
@@ -27,47 +29,68 @@ function Switch({ checked = false, onCheckedChange, disabled, style, accessibili
       touchSoundDisabled: true,
       accessibilityRole: "switch",
       accessibilityLabel,
-      accessibilityState: { checked, disabled: !!disabled },
+      accessibilityState: { checked, disabled: isDisabled },
       style: styles.touchable
     },
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(View, { style: styles.trackContainer }, /* @__PURE__ */ React.createElement(
       EaseView,
       {
-        style: styles.track,
+        style: [styles.track, isDisabled && styles.disabledTrack],
         animate: { backgroundColor: checked ? colors.primary : colors.surfaceStrong },
         transition: COLOR_TRANSITION
+      }
+    ), /* @__PURE__ */ React.createElement(
+      EaseView,
+      {
+        style: [styles.trackBorder, { borderWidth: 1.5 }],
+        pointerEvents: "none",
+        animate: { borderColor: checked ? "transparent" : colors.border },
+        transition: COLOR_TRANSITION
+      }
+    ), /* @__PURE__ */ React.createElement(
+      EaseView,
+      {
+        style: [styles.thumb, { backgroundColor: colors.primaryForeground }],
+        animate: { translateX: checked ? THUMB_TRAVEL : 0 },
+        transition: SPRING_ELASTIC
       },
       /* @__PURE__ */ React.createElement(
         EaseView,
         {
-          style: [styles.trackBorder, { borderWidth: 1.5 }],
-          pointerEvents: "none",
-          animate: { borderColor: checked ? "transparent" : colors.border },
-          transition: COLOR_TRANSITION
-        }
+          style: styles.iconWrapper,
+          animate: { opacity: checked ? isDisabled ? DISABLED_OPACITY : 1 : 0 },
+          transition: OPACITY_TRANSITION
+        },
+        /* @__PURE__ */ React.createElement(Feather, { name: "check", size: ICON_SIZE, color: colors.primary })
       ),
       /* @__PURE__ */ React.createElement(
         EaseView,
         {
-          style: [styles.thumb, { backgroundColor: colors.primaryForeground }],
-          animate: { translateX: checked ? THUMB_TRAVEL : 0 },
-          transition: SPRING_ELASTIC
+          style: styles.iconWrapper,
+          animate: { opacity: checked ? 0 : isDisabled ? DISABLED_OPACITY : 1 },
+          transition: OPACITY_TRANSITION
         },
-        /* @__PURE__ */ React.createElement(EaseView, { style: styles.iconWrapper, animate: { opacity: checked ? 1 : 0 }, transition: OPACITY_TRANSITION }, /* @__PURE__ */ React.createElement(Feather, { name: "check", size: ICON_SIZE, color: colors.primary })),
-        /* @__PURE__ */ React.createElement(EaseView, { style: styles.iconWrapper, animate: { opacity: checked ? 0 : 1 }, transition: OPACITY_TRANSITION }, /* @__PURE__ */ React.createElement(Feather, { name: "x", size: ICON_SIZE, color: colors.foregroundMuted }))
+        /* @__PURE__ */ React.createElement(Feather, { name: "x", size: ICON_SIZE, color: colors.foregroundMuted })
       )
-    )
+    ))
   ));
 }
 var styles = StyleSheet.create({
   touchable: {
     alignSelf: "flex-start"
   },
-  track: {
+  trackContainer: {
+    position: "relative",
     width: TRACK_WIDTH,
-    height: TRACK_HEIGHT,
+    height: TRACK_HEIGHT
+  },
+  track: {
+    ...StyleSheet.absoluteFillObject,
     borderRadius: TRACK_HEIGHT / 2
   },
+  disabledTrack: {
+    opacity: DISABLED_OPACITY
+  },
   trackBorder: {
     ...StyleSheet.absoluteFillObject,
     borderRadius: TRACK_HEIGHT / 2

package/dist/{chunk-Z4BVUWW6.mjs → chunk-WOEYDUJZ.mjs}

@@ -1,8 +1,8 @@
 import { PagerDots } from './chunk-4K625MVM.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { IconButton } from './chunk-3U4SSNWP.mjs';
 import { s, vs } from './chunk-2CE3TQVY.mjs';
 import React, { useState, useCallback } from 'react';
-import { StyleSheet, useWindowDimensions, Modal, ScrollView, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, useWindowDimensions, Dimensions, Modal, View, ScrollView, Image } from 'react-native';
 import { Gesture, GestureHandlerRootView, GestureDetector } from 'react-native-gesture-handler';
 import Animated, { useSharedValue, runOnJS, withTiming, useAnimatedStyle } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -62,17 +62,12 @@ function ZoomableImage({ source, width, height, onZoomChange }) {
       { scale: scale.value }
     ]
   }));
-  return /* @__PURE__ */ React.createElement(GestureDetector, { gesture: composed }, /* @__PURE__ */ React.createElement(Animated.View, { style: [{ width, height }, styles.imageWrap] }, /* @__PURE__ */ React.createElement(
-    Animated.Image,
-    {
-      source,
-      style: [{ width, height }, animatedStyle],
-      resizeMode: "contain"
-    }
-  )));
+  return /* @__PURE__ */ React.createElement(GestureDetector, { gesture: composed }, /* @__PURE__ */ React.createElement(View, { style: [{ width, height }, styles.imageWrap], collapsable: false }, /* @__PURE__ */ React.createElement(Animated.View, { style: [{ width, height }, animatedStyle] }, /* @__PURE__ */ React.createElement(Image, { source, style: { width, height }, resizeMode: "contain" }))));
 }
 function ImageViewer({ images, visible, onClose, initialIndex = 0 }) {
-  const { width, height } = useWindowDimensions();
+  const window = useWindowDimensions();
+  const width = window.width > 0 ? window.width : Dimensions.get("window").width;
+  const height = window.height > 0 ? window.height : Dimensions.get("window").height;
   const insets = useSafeAreaInsets();
   const [index, setIndex] = useState(initialIndex);
   const [pagingEnabled, setPagingEnabled] = useState(true);
@@ -115,7 +110,7 @@ function ImageViewer({ images, visible, onClose, initialIndex = 0 }) {
     scrollRef.current?.scrollTo({ x: page * width, animated: true });
     setIndex(page);
   };
-  return /* @__PURE__ */ React.createElement(Modal, { visible, transparent: false, animationType: "fade", onRequestClose: onClose, statusBarTranslucent: true }, /* @__PURE__ */ React.createElement(GestureHandlerRootView, { style: styles.root }, /* @__PURE__ */ React.createElement(Animated.View, { style: [styles.backdrop, backdropStyle], pointerEvents: "none" }), /* @__PURE__ */ React.createElement(Animated.View, { style: [styles.container, dismissStyle] }, /* @__PURE__ */ React.createElement(GestureDetector, { gesture: swipeDown }, /* @__PURE__ */ React.createElement(Animated.View, { style: styles.root }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Modal, { visible, transparent: false, animationType: "fade", onRequestClose: onClose, statusBarTranslucent: true }, /* @__PURE__ */ React.createElement(GestureHandlerRootView, { style: styles.root }, /* @__PURE__ */ React.createElement(Animated.View, { style: [styles.backdrop, backdropStyle], pointerEvents: "none" }), /* @__PURE__ */ React.createElement(Animated.View, { style: [styles.container, dismissStyle] }, /* @__PURE__ */ React.createElement(GestureDetector, { gesture: swipeDown }, /* @__PURE__ */ React.createElement(View, { style: styles.root, collapsable: false }, /* @__PURE__ */ React.createElement(
     ScrollView,
     {
       ref: scrollRef,
@@ -136,19 +131,18 @@ function ImageViewer({ images, visible, onClose, initialIndex = 0 }) {
         onZoomChange: (zoomed) => setPagingEnabled(!zoomed)
       }
     ))
-  ))), /* @__PURE__ */ React.createElement(
-    TouchableOpacity,
+  ))), /* @__PURE__ */ React.createElement(View, { style: [styles.closeButtonWrapper, { top: insets.top + vs(8) }] }, /* @__PURE__ */ React.createElement(
+    IconButton,
     {
-      style: [styles.closeButton, { top: insets.top + vs(8) }],
+      iconName: "x",
+      size: "md",
+      variant: "text",
+      style: { backgroundColor: "rgba(255,255,255,0.18)" },
+      iconColor: "#fff",
       onPress: onClose,
-      activeOpacity: 0.7,
-      touchSoundDisabled: true,
-      accessibilityRole: "button",
-      accessibilityLabel: "Close",
-      hitSlop: { top: 12, bottom: 12, left: 12, right: 12 }
-    },
-    renderIcon("x", 26, "#fff")
-  ), images.length > 1 ? /* @__PURE__ */ React.createElement(View, { style: [styles.dots, { bottom: insets.bottom + vs(16) }], pointerEvents: "box-none" }, /* @__PURE__ */ React.createElement(
+      accessibilityLabel: "Close"
+    }
+  )), images.length > 1 ? /* @__PURE__ */ React.createElement(View, { style: [styles.dots, { bottom: insets.bottom + vs(16) }], pointerEvents: "box-none" }, /* @__PURE__ */ React.createElement(
     PagerDots,
     {
       count: images.length,
@@ -175,15 +169,9 @@ var styles = StyleSheet.create({
     justifyContent: "center",
     overflow: "hidden"
   },
-  closeButton: {
+  closeButtonWrapper: {
     position: "absolute",
-    right: s(12),
-    width: s(40),
-    height: s(40),
-    borderRadius: s(20),
-    backgroundColor: "rgba(0,0,0,0.4)",
-    alignItems: "center",
-    justifyContent: "center"
+    right: s(12)
   },
   dots: {
     position: "absolute",

package/dist/{chunk-PFZTM6D5.mjs → chunk-Y2NS74WS.mjs}

@@ -4,7 +4,7 @@ import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { vs, s, mvs, ms } from './chunk-2CE3TQVY.mjs';
 import React, { useRef, useEffect, useCallback } from 'react';
 import { Dimensions, Platform, StyleSheet, useWindowDimensions, View, Text, TouchableOpacity, Modal, Pressable, ScrollView } from 'react-native';
-import { BottomSheetBackdrop, BottomSheetFooter, BottomSheetModal, BottomSheetScrollView, BottomSheetView } from '@gorhom/bottom-sheet';
+import BottomSheet, { BottomSheetBackdrop, BottomSheetFooter, BottomSheetScrollView, BottomSheetView } from '@gorhom/bottom-sheet';
 export { BottomSheetModalProvider, BottomSheetTextInput } from '@gorhom/bottom-sheet';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { AntDesign } from '@expo/vector-icons';
@@ -52,9 +52,9 @@ function Sheet({
   useEffect(() => {
     if (open) {
       impactMedium();
-      ref.current?.present();
+      ref.current?.snapToIndex(0);
     } else {
-      ref.current?.dismiss();
+      ref.current?.close();
     }
   }, [open]);
   const renderBackdrop = useCallback((props) => /* @__PURE__ */ React.createElement(
@@ -75,7 +75,7 @@ function Sheet({
   ) : children;
   const effectiveSubtitle = subtitle ?? description;
   const showHeader = !!(title || effectiveSubtitle || showCloseButton) && !customHeader;
-  const headerNode = customHeader ? customHeader : showHeader ? /* @__PURE__ */ React.createElement(View, { style: styles.header, accessibilityRole: "header" }, /* @__PURE__ */ React.createElement(View, { style: styles.headerRow }, title ? /* @__PURE__ */ React.createElement(Text, { style: [styles.title, { color: colors.foreground }], allowFontScaling: true }, title) : /* @__PURE__ */ React.createElement(View, { style: { flex: 1 } }), showCloseButton ? /* @__PURE__ */ React.createElement(
+  const headerNode = customHeader ? customHeader : showHeader ? /* @__PURE__ */ React.createElement(View, { style: [styles.header, { backgroundColor: colors.card }], accessibilityRole: "header" }, /* @__PURE__ */ React.createElement(View, { style: styles.headerRow }, title ? /* @__PURE__ */ React.createElement(Text, { style: [styles.title, { color: colors.foreground }], allowFontScaling: true }, title) : /* @__PURE__ */ React.createElement(View, { style: { flex: 1 } }), showCloseButton ? /* @__PURE__ */ React.createElement(
     TouchableOpacity,
     {
       onPress: onClose,
@@ -123,13 +123,14 @@ function Sheet({
   const effectiveMaxHeight = maxHeight ?? DEFAULT_MAX_HEIGHT;
   const useDynamicSizing = !snapPoints;
   return /* @__PURE__ */ React.createElement(
-    BottomSheetModal,
+    BottomSheet,
     {
       ref,
+      index: -1,
+      onClose,
       enableDynamicSizing: useDynamicSizing,
       snapPoints,
       maxDynamicContentSize: useDynamicSizing ? effectiveMaxHeight : void 0,
-      onDismiss: onClose,
       backdropComponent: renderBackdrop,
       footerComponent: effectiveFooter ? renderFooter : void 0,
       backgroundStyle: [styles.background, { backgroundColor: colors.card }],
@@ -151,7 +152,8 @@ function Sheet({
         style: contentStyle,
         showsVerticalScrollIndicator: true,
         indicatorStyle: "black",
-        persistentScrollbar: isAndroid
+        persistentScrollbar: isAndroid,
+        stickyHeaderIndices: headerNode ? [0] : void 0
       },
       headerNode,
       contentNode