@retray-dev/ui-kit 9.3.1 → 10.1.0

package/dist/index.js

@@ -12,7 +12,7 @@ var Ionicons = require('@expo/vector-icons/Ionicons');
 var pressto = require('pressto');
 var Animated12 = require('react-native-reanimated');
 var expoFont = require('expo-font');
-var bottomSheet = require('@gorhom/bottom-sheet');
+var BottomSheet = require('@gorhom/bottom-sheet');
 var reactNativeEase = require('react-native-ease');
 var vectorIcons = require('@expo/vector-icons');
 var expoLinearGradient = require('expo-linear-gradient');
@@ -32,6 +32,7 @@ var FontAwesome5__default = /*#__PURE__*/_interopDefault(FontAwesome5);
 var MaterialIcons__default = /*#__PURE__*/_interopDefault(MaterialIcons);
 var Ionicons__default = /*#__PURE__*/_interopDefault(Ionicons);
 var Animated12__default = /*#__PURE__*/_interopDefault(Animated12);
+var BottomSheet__default = /*#__PURE__*/_interopDefault(BottomSheet);
 var RNSlider__default = /*#__PURE__*/_interopDefault(RNSlider);
 
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
@@ -1035,7 +1036,7 @@ function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suff
     },
     effectivePrefix ? typeof effectivePrefix === "string" ? /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles4.prefixText, { color: colors.foregroundMuted }, prefixStyle], allowFontScaling: true }, effectivePrefix) : /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: styles4.prefixContainer }, effectivePrefix) : null,
     sheetMode ? /* @__PURE__ */ React25__default.default.createElement(
-      bottomSheet.BottomSheetTextInput,
+      BottomSheet.BottomSheetTextInput,
       {
         style: [
           styles4.input,
@@ -2028,9 +2029,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__ */ React25__default.default.createElement(reactNative.View, { style: [{ opacity: disabled ? 0.45 : 1, alignSelf: "flex-start" }, style] }, /* @__PURE__ */ React25__default.default.createElement(
+  const isDisabled = !!disabled;
+  return /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: [{ alignSelf: "flex-start" }, style] }, /* @__PURE__ */ React25__default.default.createElement(
     reactNative.TouchableOpacity,
     {
       onPress: () => {
@@ -2042,47 +2045,68 @@ function Switch({ checked = false, onCheckedChange, disabled, style, accessibili
       touchSoundDisabled: true,
       accessibilityRole: "switch",
       accessibilityLabel,
-      accessibilityState: { checked, disabled: !!disabled },
+      accessibilityState: { checked, disabled: isDisabled },
       style: styles16.touchable
     },
-    /* @__PURE__ */ React25__default.default.createElement(
+    /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: styles16.trackContainer }, /* @__PURE__ */ React25__default.default.createElement(
       reactNativeEase.EaseView,
       {
-        style: styles16.track,
+        style: [styles16.track, isDisabled && styles16.disabledTrack],
         animate: { backgroundColor: checked ? colors.primary : colors.surfaceStrong },
         transition: COLOR_TRANSITION
+      }
+    ), /* @__PURE__ */ React25__default.default.createElement(
+      reactNativeEase.EaseView,
+      {
+        style: [styles16.trackBorder, { borderWidth: 1.5 }],
+        pointerEvents: "none",
+        animate: { borderColor: checked ? "transparent" : colors.border },
+        transition: COLOR_TRANSITION
+      }
+    ), /* @__PURE__ */ React25__default.default.createElement(
+      reactNativeEase.EaseView,
+      {
+        style: [styles16.thumb, { backgroundColor: colors.primaryForeground }],
+        animate: { translateX: checked ? THUMB_TRAVEL : 0 },
+        transition: SPRING_ELASTIC
       },
       /* @__PURE__ */ React25__default.default.createElement(
         reactNativeEase.EaseView,
         {
-          style: [styles16.trackBorder, { borderWidth: 1.5 }],
-          pointerEvents: "none",
-          animate: { borderColor: checked ? "transparent" : colors.border },
-          transition: COLOR_TRANSITION
-        }
+          style: styles16.iconWrapper,
+          animate: { opacity: checked ? isDisabled ? DISABLED_OPACITY : 1 : 0 },
+          transition: OPACITY_TRANSITION
+        },
+        /* @__PURE__ */ React25__default.default.createElement(vectorIcons.Feather, { name: "check", size: ICON_SIZE, color: colors.primary })
       ),
       /* @__PURE__ */ React25__default.default.createElement(
         reactNativeEase.EaseView,
         {
-          style: [styles16.thumb, { backgroundColor: colors.primaryForeground }],
-          animate: { translateX: checked ? THUMB_TRAVEL : 0 },
-          transition: SPRING_ELASTIC
+          style: styles16.iconWrapper,
+          animate: { opacity: checked ? 0 : isDisabled ? DISABLED_OPACITY : 1 },
+          transition: OPACITY_TRANSITION
         },
-        /* @__PURE__ */ React25__default.default.createElement(reactNativeEase.EaseView, { style: styles16.iconWrapper, animate: { opacity: checked ? 1 : 0 }, transition: OPACITY_TRANSITION }, /* @__PURE__ */ React25__default.default.createElement(vectorIcons.Feather, { name: "check", size: ICON_SIZE, color: colors.primary })),
-        /* @__PURE__ */ React25__default.default.createElement(reactNativeEase.EaseView, { style: styles16.iconWrapper, animate: { opacity: checked ? 0 : 1 }, transition: OPACITY_TRANSITION }, /* @__PURE__ */ React25__default.default.createElement(vectorIcons.Feather, { name: "x", size: ICON_SIZE, color: colors.foregroundMuted }))
+        /* @__PURE__ */ React25__default.default.createElement(vectorIcons.Feather, { name: "x", size: ICON_SIZE, color: colors.foregroundMuted })
       )
-    )
+    ))
   ));
 }
 var styles16 = 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
@@ -2601,9 +2625,9 @@ function AccordionItemComponent({
       },
       accessibilityRole: "button",
       accessibilityState: { expanded: isOpen },
-      accessibilityLabel: item.trigger
+      accessibilityLabel: typeof item.trigger === "string" ? item.trigger : void 0
     },
-    /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: styles20.triggerContent }, resolvedIcon ? /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: styles20.icon }, resolvedIcon) : null, /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles20.triggerText, { color: colors.foreground }], allowFontScaling: true }, item.trigger)),
+    /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: styles20.triggerContent }, resolvedIcon ? /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: styles20.icon }, resolvedIcon) : null, typeof item.trigger === "string" ? /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles20.triggerText, { color: colors.foreground }], allowFontScaling: true }, item.trigger) : item.trigger),
     /* @__PURE__ */ React25__default.default.createElement(Animated12__default.default.View, { style: [styles20.chevron, rotationStyle] }, /* @__PURE__ */ React25__default.default.createElement(vectorIcons.Entypo, { name: "chevron-down", size: 18, color: colors.foregroundMuted }))
   ), /* @__PURE__ */ React25__default.default.createElement(Animated12__default.default.View, { style: bodyStyle }, /* @__PURE__ */ React25__default.default.createElement(
     reactNative.View,
@@ -2811,13 +2835,13 @@ function Sheet({
   React25.useEffect(() => {
     if (open) {
       impactMedium();
-      ref.current?.present();
+      ref.current?.snapToIndex(0);
     } else {
-      ref.current?.dismiss();
+      ref.current?.close();
     }
   }, [open]);
   const renderBackdrop = React25.useCallback((props) => /* @__PURE__ */ React25__default.default.createElement(
-    bottomSheet.BottomSheetBackdrop,
+    BottomSheet.BottomSheetBackdrop,
     {
       ...props,
       disappearsOnIndex: -1,
@@ -2834,7 +2858,7 @@ function Sheet({
   ) : children;
   const effectiveSubtitle = subtitle ?? description;
   const showHeader = !!(title || effectiveSubtitle || showCloseButton) && !customHeader;
-  const headerNode = customHeader ? customHeader : showHeader ? /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: styles22.header, accessibilityRole: "header" }, /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: styles22.headerRow }, title ? /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles22.title, { color: colors.foreground }], allowFontScaling: true }, title) : /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: { flex: 1 } }), showCloseButton ? /* @__PURE__ */ React25__default.default.createElement(
+  const headerNode = customHeader ? customHeader : showHeader ? /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: [styles22.header, { backgroundColor: colors.card }], accessibilityRole: "header" }, /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: styles22.headerRow }, title ? /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles22.title, { color: colors.foreground }], allowFontScaling: true }, title) : /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: { flex: 1 } }), showCloseButton ? /* @__PURE__ */ React25__default.default.createElement(
     reactNative.TouchableOpacity,
     {
       onPress: onClose,
@@ -2851,7 +2875,7 @@ function Sheet({
   const effectiveFooter = customFooter ? customFooter : footer;
   const renderFooter = React25.useCallback((props) => {
     if (!effectiveFooter) return null;
-    return /* @__PURE__ */ React25__default.default.createElement(bottomSheet.BottomSheetFooter, { ...props }, effectiveFooter);
+    return /* @__PURE__ */ React25__default.default.createElement(BottomSheet.BottomSheetFooter, { ...props }, effectiveFooter);
   }, [effectiveFooter]);
   if (asDialog) {
     return /* @__PURE__ */ React25__default.default.createElement(reactNative.Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: onClose }, /* @__PURE__ */ React25__default.default.createElement(reactNative.Pressable, { style: styles22.dialogBackdrop, onPress: onClose, accessibilityRole: "button", accessibilityLabel: "Close" }, /* @__PURE__ */ React25__default.default.createElement(
@@ -2882,13 +2906,14 @@ function Sheet({
   const effectiveMaxHeight = maxHeight ?? DEFAULT_MAX_HEIGHT;
   const useDynamicSizing = !snapPoints;
   return /* @__PURE__ */ React25__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: [styles22.background, { backgroundColor: colors.card }],
@@ -2901,7 +2926,7 @@ function Sheet({
       enableBlurKeyboardOnGesture
     },
     useScroll ? /* @__PURE__ */ React25__default.default.createElement(
-      bottomSheet.BottomSheetScrollView,
+      BottomSheet.BottomSheetScrollView,
       {
         contentContainerStyle: [
           styles22.scrollContent,
@@ -2910,11 +2935,12 @@ function Sheet({
         style: contentStyle,
         showsVerticalScrollIndicator: true,
         indicatorStyle: "black",
-        persistentScrollbar: isAndroid
+        persistentScrollbar: isAndroid,
+        stickyHeaderIndices: headerNode ? [0] : void 0
       },
       headerNode,
       contentNode
-    ) : /* @__PURE__ */ React25__default.default.createElement(bottomSheet.BottomSheetView, { style: [styles22.content, contentStyle, style] }, headerNode, contentNode)
+    ) : /* @__PURE__ */ React25__default.default.createElement(BottomSheet.BottomSheetView, { style: [styles22.content, contentStyle, style] }, headerNode, contentNode)
   );
 }
 Sheet.Header = SheetHeader;
@@ -3900,26 +3926,29 @@ var styles29 = reactNative.StyleSheet.create({
 function ConfirmDialog({
   visible,
   title,
+  subtitle,
   description,
   confirmLabel = "Confirm",
   cancelLabel = "Cancel",
   confirmVariant = "primary",
   loading = false,
+  showCloseButton = false,
   onConfirm,
   onCancel
 }) {
   const { colors } = useTheme();
   const ref = React25.useRef(null);
+  const effectiveSubtitle = subtitle ?? description;
   React25.useEffect(() => {
     if (visible) {
       impactMedium();
-      ref.current?.present();
+      ref.current?.snapToIndex(0);
     } else {
-      ref.current?.dismiss();
+      ref.current?.close();
     }
   }, [visible]);
   const renderBackdrop = (props) => /* @__PURE__ */ React25__default.default.createElement(
-    bottomSheet.BottomSheetBackdrop,
+    BottomSheet.BottomSheetBackdrop,
     {
       ...props,
       disappearsOnIndex: -1,
@@ -3928,17 +3957,30 @@ function ConfirmDialog({
     }
   );
   return /* @__PURE__ */ React25__default.default.createElement(
-    bottomSheet.BottomSheetModal,
+    BottomSheet__default.default,
     {
       ref,
+      index: -1,
+      onClose: onCancel,
       enableDynamicSizing: true,
-      onDismiss: onCancel,
       backdropComponent: renderBackdrop,
       backgroundStyle: [styles30.background, { backgroundColor: colors.card }],
       handleIndicatorStyle: [styles30.handle, { backgroundColor: colors.border }],
       enablePanDownToClose: true
     },
-    /* @__PURE__ */ React25__default.default.createElement(bottomSheet.BottomSheetView, { style: styles30.content }, /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles30.title, { color: colors.foreground }], allowFontScaling: true }, title), description ? /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles30.description, { color: colors.foregroundMuted }], allowFontScaling: true }, description) : null, /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: styles30.actions }, /* @__PURE__ */ React25__default.default.createElement(
+    /* @__PURE__ */ React25__default.default.createElement(BottomSheet.BottomSheetView, { style: styles30.content }, /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: styles30.header, accessibilityRole: "header" }, /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: styles30.headerRow }, /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles30.title, { color: colors.foreground }], allowFontScaling: true }, title), showCloseButton ? /* @__PURE__ */ React25__default.default.createElement(
+      reactNative.TouchableOpacity,
+      {
+        onPress: onCancel,
+        style: styles30.closeButton,
+        activeOpacity: 0.6,
+        touchSoundDisabled: true,
+        accessibilityRole: "button",
+        accessibilityLabel: "Close",
+        hitSlop: { top: 12, bottom: 12, left: 12, right: 12 }
+      },
+      /* @__PURE__ */ React25__default.default.createElement(vectorIcons.Feather, { name: "x", size: ms(18), color: colors.foregroundMuted })
+    ) : null), effectiveSubtitle ? /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles30.subtitle, { color: colors.foregroundMuted }], allowFontScaling: true }, effectiveSubtitle) : null), /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: styles30.actions }, /* @__PURE__ */ React25__default.default.createElement(
       Button,
       {
         label: confirmLabel,
@@ -3985,19 +4027,32 @@ var styles30 = reactNative.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
   },
-  description: {
+  closeButton: {
+    padding: s(4),
+    marginLeft: s(8)
+  },
+  subtitle: {
     fontFamily: "Sohne-Regular",
-    fontSize: ms(15),
-    lineHeight: mvs(22)
+    fontSize: ms(14),
+    lineHeight: mvs(20)
   },
   actions: {
     gap: vs(10),
@@ -4620,7 +4675,7 @@ function VirtualListInner({ itemHeight, keyExtractor, renderItem, ...props }, re
 }
 var VirtualList = React25__default.default.forwardRef(VirtualListInner);
 function RetrayProvider({ children, theme, colorScheme = "system" }) {
-  return /* @__PURE__ */ React25__default.default.createElement(reactNativeSafeAreaContext.SafeAreaProvider, { initialMetrics: reactNativeSafeAreaContext.initialWindowMetrics }, /* @__PURE__ */ React25__default.default.createElement(reactNativeGestureHandler.GestureHandlerRootView, { style: styles37.root }, /* @__PURE__ */ React25__default.default.createElement(ThemeProvider, { theme, colorScheme }, /* @__PURE__ */ React25__default.default.createElement(bottomSheet.BottomSheetModalProvider, null, /* @__PURE__ */ React25__default.default.createElement(ToastProvider, null, children)))));
+  return /* @__PURE__ */ React25__default.default.createElement(reactNativeSafeAreaContext.SafeAreaProvider, { initialMetrics: reactNativeSafeAreaContext.initialWindowMetrics }, /* @__PURE__ */ React25__default.default.createElement(reactNativeGestureHandler.GestureHandlerRootView, { style: styles37.root }, /* @__PURE__ */ React25__default.default.createElement(ThemeProvider, { theme, colorScheme }, /* @__PURE__ */ React25__default.default.createElement(BottomSheet.BottomSheetModalProvider, null, /* @__PURE__ */ React25__default.default.createElement(ToastProvider, null, children)))));
 }
 var styles37 = reactNative.StyleSheet.create({
   root: { flex: 1 }
@@ -5381,17 +5436,12 @@ function ZoomableImage({ source, width, height, onZoomChange }) {
       { scale: scale2.value }
     ]
   }));
-  return /* @__PURE__ */ React25__default.default.createElement(reactNativeGestureHandler.GestureDetector, { gesture: composed }, /* @__PURE__ */ React25__default.default.createElement(Animated12__default.default.View, { style: [{ width, height }, styles44.imageWrap] }, /* @__PURE__ */ React25__default.default.createElement(
-    Animated12__default.default.Image,
-    {
-      source,
-      style: [{ width, height }, animatedStyle],
-      resizeMode: "contain"
-    }
-  )));
+  return /* @__PURE__ */ React25__default.default.createElement(reactNativeGestureHandler.GestureDetector, { gesture: composed }, /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: [{ width, height }, styles44.imageWrap], collapsable: false }, /* @__PURE__ */ React25__default.default.createElement(Animated12__default.default.View, { style: [{ width, height }, animatedStyle] }, /* @__PURE__ */ React25__default.default.createElement(reactNative.Image, { source, style: { width, height }, resizeMode: "contain" }))));
 }
 function ImageViewer({ images, visible, onClose, initialIndex = 0 }) {
-  const { width, height } = reactNative.useWindowDimensions();
+  const window = reactNative.useWindowDimensions();
+  const width = window.width > 0 ? window.width : reactNative.Dimensions.get("window").width;
+  const height = window.height > 0 ? window.height : reactNative.Dimensions.get("window").height;
   const insets = reactNativeSafeAreaContext.useSafeAreaInsets();
   const [index, setIndex] = React25.useState(initialIndex);
   const [pagingEnabled, setPagingEnabled] = React25.useState(true);
@@ -5434,7 +5484,7 @@ function ImageViewer({ images, visible, onClose, initialIndex = 0 }) {
     scrollRef.current?.scrollTo({ x: page * width, animated: true });
     setIndex(page);
   };
-  return /* @__PURE__ */ React25__default.default.createElement(reactNative.Modal, { visible, transparent: false, animationType: "fade", onRequestClose: onClose, statusBarTranslucent: true }, /* @__PURE__ */ React25__default.default.createElement(reactNativeGestureHandler.GestureHandlerRootView, { style: styles44.root }, /* @__PURE__ */ React25__default.default.createElement(Animated12__default.default.View, { style: [styles44.backdrop, backdropStyle], pointerEvents: "none" }), /* @__PURE__ */ React25__default.default.createElement(Animated12__default.default.View, { style: [styles44.container, dismissStyle] }, /* @__PURE__ */ React25__default.default.createElement(reactNativeGestureHandler.GestureDetector, { gesture: swipeDown }, /* @__PURE__ */ React25__default.default.createElement(Animated12__default.default.View, { style: styles44.root }, /* @__PURE__ */ React25__default.default.createElement(
+  return /* @__PURE__ */ React25__default.default.createElement(reactNative.Modal, { visible, transparent: false, animationType: "fade", onRequestClose: onClose, statusBarTranslucent: true }, /* @__PURE__ */ React25__default.default.createElement(reactNativeGestureHandler.GestureHandlerRootView, { style: styles44.root }, /* @__PURE__ */ React25__default.default.createElement(Animated12__default.default.View, { style: [styles44.backdrop, backdropStyle], pointerEvents: "none" }), /* @__PURE__ */ React25__default.default.createElement(Animated12__default.default.View, { style: [styles44.container, dismissStyle] }, /* @__PURE__ */ React25__default.default.createElement(reactNativeGestureHandler.GestureDetector, { gesture: swipeDown }, /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: styles44.root, collapsable: false }, /* @__PURE__ */ React25__default.default.createElement(
     reactNative.ScrollView,
     {
       ref: scrollRef,
@@ -5455,19 +5505,18 @@ function ImageViewer({ images, visible, onClose, initialIndex = 0 }) {
         onZoomChange: (zoomed) => setPagingEnabled(!zoomed)
       }
     ))
-  ))), /* @__PURE__ */ React25__default.default.createElement(
-    reactNative.TouchableOpacity,
+  ))), /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: [styles44.closeButtonWrapper, { top: insets.top + vs(8) }] }, /* @__PURE__ */ React25__default.default.createElement(
+    IconButton,
     {
-      style: [styles44.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__ */ React25__default.default.createElement(reactNative.View, { style: [styles44.dots, { bottom: insets.bottom + vs(16) }], pointerEvents: "box-none" }, /* @__PURE__ */ React25__default.default.createElement(
+      accessibilityLabel: "Close"
+    }
+  )), images.length > 1 ? /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: [styles44.dots, { bottom: insets.bottom + vs(16) }], pointerEvents: "box-none" }, /* @__PURE__ */ React25__default.default.createElement(
     PagerDots,
     {
       count: images.length,
@@ -5494,15 +5543,9 @@ var styles44 = reactNative.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",
@@ -5798,11 +5841,11 @@ function useConfirmDialog(options) {
 
 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; }
 });
 Object.defineProperty(exports, "toast", {
   enumerable: true,

package/dist/index.mjs

@@ -4,11 +4,11 @@ export { Textarea } from './chunk-CZCQZHG6.mjs';
 export { Toggle } from './chunk-KIHCWCWL.mjs';
 export { VirtualList } from './chunk-NC5ZTR2Y.mjs';
 export { Separator } from './chunk-MX6HRKMI.mjs';
-export { BottomSheetModalProvider, Sheet, BottomSheetTextInput as SheetTextInput } from './chunk-PFZTM6D5.mjs';
+export { BottomSheetModalProvider, Sheet, BottomSheetTextInput as SheetTextInput } from './chunk-Y2NS74WS.mjs';
 export { SheetSelect } from './chunk-URI2WBIV.mjs';
 export { Skeleton } from './chunk-AJ7ZDNBT.mjs';
 export { Slider } from './chunk-JMOZEC77.mjs';
-export { Switch } from './chunk-QKH5ZOD5.mjs';
+export { Switch } from './chunk-WF2XDFRK.mjs';
 export { TabBar } from './chunk-MLF3EZFW.mjs';
 export { Pressable } from './chunk-MBMXYJJV.mjs';
 export { PricingCard } from './chunk-4I7D47FH.mjs';
@@ -31,7 +31,7 @@ export { ErrorBoundary } from './chunk-LXJIIOYQ.mjs';
 export { Form, FormField, FormFooter, FormSection } from './chunk-6Q64UFIA.mjs';
 export { ImageUpload } from './chunk-Y4GL2MHX.mjs';
 export { Spinner } from './chunk-WBOOUHSS.mjs';
-export { ImageViewer } from './chunk-Z4BVUWW6.mjs';
+export { ImageViewer } from './chunk-WOEYDUJZ.mjs';
 export { PagerDots } from './chunk-4K625MVM.mjs';
 export { ButtonGroup } from './chunk-3BBOZ3OQ.mjs';
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-ID72TK46.mjs';
@@ -39,11 +39,11 @@ export { CategoryStrip } from './chunk-VQ57HWPL.mjs';
 import './chunk-YNROWHQJ.mjs';
 export { Checkbox } from './chunk-AV4EMIRH.mjs';
 export { Chip, ChipGroup } from './chunk-UREA2GYY.mjs';
-export { ConfirmDialog } from './chunk-FZZLPJ6B.mjs';
+export { ConfirmDialog } from './chunk-KZL5VTYK.mjs';
 export { CurrencyDisplay } from './chunk-BRKYVJVV.mjs';
 export { CurrencyInput } from './chunk-JUXSWN54.mjs';
 export { Input } from './chunk-ZUR7AU5R.mjs';
-export { Accordion } from './chunk-O3HA6TYM.mjs';
+export { Accordion } from './chunk-DJ7RN37L.mjs';
 export { AlertBanner } from './chunk-6MKGPAR2.mjs';
 export { AppHeader } from './chunk-AZJF2BLK.mjs';
 export { IconButton } from './chunk-3U4SSNWP.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "9.3.1",
+  "version": "10.1.0",
   "description": "Personal UI Kit for React Native / Expo",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -25,6 +25,7 @@
   "files": [
     "dist",
     "src",
+    "scripts",
     "COMPONENTS.md",
     "CONSUMER.md",
     "EXAMPLES.md",
@@ -32,6 +33,7 @@
     "DESIGN.md"
   ],
   "scripts": {
+    "postinstall": "node scripts/copy-fonts.js",
     "build": "tsup",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",

package/scripts/build-apk.sh

@@ -0,0 +1,84 @@
+#!/usr/bin/env bash
+#
+# build-apk.sh — Build a standalone release APK of the example app for phone install.
+#
+# Produces: build-output/retray-ui-kit-example.apk (signed with debug keystore,
+# installable on any Android phone via "Install unknown apps").
+#
+# Requirements (already set up on this machine):
+#   - Android SDK at $ANDROID_HOME (default: ~/Library/Android/sdk)
+#   - Java 17 (JDK)
+#   - pnpm, node
+#
+# Usage:
+#   ./scripts/build-apk.sh              # full build
+#   ./scripts/build-apk.sh --install    # build, then adb install to connected phone
+#   ./scripts/build-apk.sh --clean      # wipe android/ + gradle cache first (slow, fixes weird errors)
+#
+set -euo pipefail
+
+# --- resolve repo root regardless of cwd ---
+ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
+EXAMPLE="$ROOT/example"
+OUT_DIR="$ROOT/build-output"
+APK_NAME="retray-ui-kit-example.apk"
+
+export ANDROID_HOME="${ANDROID_HOME:-$HOME/Library/Android/sdk}"
+
+DO_INSTALL=false
+DO_CLEAN=false
+for arg in "$@"; do
+  case "$arg" in
+    --install) DO_INSTALL=true ;;
+    --clean)   DO_CLEAN=true ;;
+    *) echo "Unknown arg: $arg"; exit 1 ;;
+  esac
+done
+
+echo "==> repo:    $ROOT"
+echo "==> sdk:     $ANDROID_HOME"
+[ -d "$ANDROID_HOME" ] || { echo "ERROR: Android SDK not found at $ANDROID_HOME"; exit 1; }
+
+# --- 1. build the ui-kit (example depends on dist/) ---
+echo "==> [1/4] Building @retray-dev/ui-kit ..."
+( cd "$ROOT" && pnpm build )
+
+# --- 2. ensure deps + native android/ dir exist ---
+echo "==> [2/4] Prebuild (generate android/ if missing) ..."
+if $DO_CLEAN; then
+  echo "    --clean: removing android/ and gradle build cache"
+  rm -rf "$EXAMPLE/android"
+fi
+# babel-preset-expo must be a top-level dep of example so Metro resolves it
+# under pnpm hoisted layout. Declared in example/package.json devDependencies.
+( cd "$ROOT" && pnpm install --frozen-lockfile=false )
+if [ ! -d "$EXAMPLE/android" ]; then
+  ( cd "$EXAMPLE" && CI=1 npx expo prebuild --platform android --no-install )
+fi
+
+# --- 3. assemble release APK ---
+echo "==> [3/4] Gradle assembleRelease (first run ~7 min) ..."
+( cd "$EXAMPLE/android" && ANDROID_HOME="$ANDROID_HOME" ./gradlew assembleRelease )
+
+# --- 4. copy to build-output/ ---
+echo "==> [4/4] Copying APK ..."
+SRC_APK="$EXAMPLE/android/app/build/outputs/apk/release/app-release.apk"
+[ -f "$SRC_APK" ] || { echo "ERROR: APK not found at $SRC_APK"; exit 1; }
+mkdir -p "$OUT_DIR"
+cp "$SRC_APK" "$OUT_DIR/$APK_NAME"
+
+echo ""
+echo "✅ APK ready: $OUT_DIR/$APK_NAME ($(du -h "$OUT_DIR/$APK_NAME" | cut -f1))"
+
+# --- optional install ---
+if $DO_INSTALL; then
+  echo "==> adb install ..."
+  "$ANDROID_HOME/platform-tools/adb" install -r "$OUT_DIR/$APK_NAME"
+  echo "✅ Installed to connected device."
+else
+  echo ""
+  echo "To put on your phone:"
+  echo "  • USB:   $ANDROID_HOME/platform-tools/adb install -r \"$OUT_DIR/$APK_NAME\""
+  echo "  • or run again with --install"
+  echo "  • or AirDrop/Drive the .apk and tap it (enable 'Install unknown apps')"
+fi

package/scripts/copy-fonts.js

@@ -0,0 +1,90 @@
+#!/usr/bin/env node
+/**
+ * Postinstall script: copies Sohne font files to consumer project's assets/fonts/sohne/
+ *
+ * This runs automatically when a consumer installs @retray-dev/ui-kit.
+ * Fonts are copied from dist/assets/fonts/ to <consumer-root>/assets/fonts/sohne/
+ * so Metro can resolve require() calls in the consumer's App.tsx.
+ */
+const fs = require('fs')
+const path = require('path')
+
+// npm sets INIT_CWD to consumer project root, pnpm sets PROJECT_CWD
+const consumerRoot =
+  process.env.INIT_CWD ||
+  process.env.PROJECT_CWD ||
+  process.cwd()
+
+// Don't run when installing inside the ui-kit repo itself
+const pkgPath = path.join(consumerRoot, 'package.json')
+if (!fs.existsSync(pkgPath)) {
+  process.exit(0)
+}
+
+let pkg
+try {
+  pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'))
+} catch {
+  // Can't read package.json — skip silently
+  process.exit(0)
+}
+
+// Skip if we're in the ui-kit repo itself
+if (pkg.name === '@retray-dev/ui-kit') {
+  process.exit(0)
+}
+
+// Source: dist/assets/fonts/ (relative to this script in scripts/)
+const src = path.join(__dirname, '..', 'dist', 'assets', 'fonts')
+
+// Destination: consumer's assets/fonts/sohne/
+const dest = path.join(consumerRoot, 'assets', 'fonts', 'sohne')
+
+// If source doesn't exist (maybe dist not built yet), skip gracefully
+if (!fs.existsSync(src)) {
+  console.warn('[ui-kit] Font source not found:', src)
+  console.warn('[ui-kit] Run `pnpm build` in the ui-kit package first, or fonts will need manual setup.')
+  process.exit(0)
+}
+
+// Create destination directory
+try {
+  fs.mkdirSync(dest, { recursive: true })
+} catch (err) {
+  console.warn('[ui-kit] Could not create font directory:', dest)
+  console.warn('[ui-kit] Error:', err.message)
+  console.warn('[ui-kit] You may need to copy fonts manually. See FONTS.md for setup.')
+  process.exit(0)
+}
+
+// Copy .otf files (skip if already exists to avoid overwriting user modifications)
+const files = fs.readdirSync(src).filter(f => f.endsWith('.otf'))
+let copied = 0
+let skipped = 0
+
+for (const file of files) {
+  const srcFile = path.join(src, file)
+  const destFile = path.join(dest, file)
+
+  if (fs.existsSync(destFile)) {
+    skipped++
+    continue
+  }
+
+  try {
+    fs.copyFileSync(srcFile, destFile)
+    copied++
+  } catch (err) {
+    console.warn(`[ui-kit] Failed to copy ${file}:`, err.message)
+  }
+}
+
+if (copied > 0) {
+  console.log(`[ui-kit] Copied ${copied} Sohne font files → assets/fonts/sohne/`)
+}
+if (skipped > 0 && copied === 0) {
+  // All fonts already present — no message needed
+}
+if (copied > 0 || (skipped > 0 && process.env.VERBOSE)) {
+  console.log('[ui-kit] Add SohneFonts to your App.tsx — see CONSUMER.md for the boilerplate.')
+}