@retray-dev/ui-kit 6.2.0 → 9.0.0

package/dist/chunk-VQ57HWPL.mjs

@@ -0,0 +1,144 @@
+import { usePressScale } from './chunk-YNROWHQJ.mjs';
+import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
+import { PRESS_SCALE, COLOR_TRANSITION } from './chunk-DVK4G2GT.mjs';
+import { RADIUS } from './chunk-QY3X2UYR.mjs';
+import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { ms, s, vs } from './chunk-2CE3TQVY.mjs';
+import React, { useCallback } from 'react';
+import { TouchableOpacity, View, Text, StyleSheet, ScrollView } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { EaseView } from 'react-native-ease';
+
+var CategoryChip = React.memo(function CategoryChip2({
+  item,
+  selected,
+  onSelect
+}) {
+  const { colors } = useTheme();
+  const { animatedStyle: scaleStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
+    pressScale: PRESS_SCALE.chip
+  });
+  const iconColor = selected ? colors.primaryForeground : colors.foregroundSubtle;
+  const resolvedIcon = typeof item.icon === "string" ? renderIcon(item.icon, 16, iconColor) : item.icon ?? null;
+  return /* @__PURE__ */ React.createElement(Animated.View, { style: scaleStyle, ...hoverHandlers }, /* @__PURE__ */ React.createElement(
+    TouchableOpacity,
+    {
+      onPress: () => onSelect(item.value),
+      onPressIn,
+      onPressOut,
+      activeOpacity: 1,
+      touchSoundDisabled: true,
+      accessibilityRole: "button",
+      accessibilityLabel: item.label,
+      accessibilityState: { selected }
+    },
+    /* @__PURE__ */ React.createElement(
+      EaseView,
+      {
+        style: styles.chip,
+        animate: {
+          backgroundColor: selected ? colors.primary : colors.surface,
+          borderColor: selected ? colors.primary : colors.border
+        },
+        transition: COLOR_TRANSITION
+      },
+      resolvedIcon && /* @__PURE__ */ React.createElement(View, { style: styles.chipIcon }, resolvedIcon),
+      /* @__PURE__ */ React.createElement(
+        Text,
+        {
+          style: [styles.chipLabel, { color: selected ? colors.primaryForeground : colors.foregroundSubtle }],
+          allowFontScaling: true
+        },
+        item.label
+      ),
+      item.badge !== void 0 && item.badge > 0 && /* @__PURE__ */ React.createElement(View, { style: [styles.chipBadge, { backgroundColor: colors.primary }] }, /* @__PURE__ */ React.createElement(Text, { style: [styles.chipBadgeText, { color: colors.primaryForeground }] }, Math.min(item.badge, 99)))
+    )
+  ));
+});
+function CategoryStrip({
+  categories,
+  value,
+  onValueChange,
+  multiSelect = false,
+  style,
+  itemStyle,
+  accessibilityLabel
+}) {
+  const selected = Array.isArray(value) ? value : value ? [value] : [];
+  const handlePress = useCallback(
+    (v) => {
+      selectionAsync();
+      if (multiSelect) {
+        const current = Array.isArray(value) ? value : value ? [value] : [];
+        const next = current.includes(v) ? current.filter((x) => x !== v) : [...current, v];
+        onValueChange?.(next);
+      } else {
+        onValueChange?.(v === value ? "" : v);
+      }
+    },
+    [multiSelect, value, onValueChange]
+  );
+  return /* @__PURE__ */ React.createElement(
+    ScrollView,
+    {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      contentContainerStyle: [styles.container, style],
+      style: styles.scroll,
+      accessibilityRole: multiSelect ? void 0 : "radiogroup",
+      accessibilityLabel
+    },
+    categories.map((cat) => /* @__PURE__ */ React.createElement(View, { key: cat.value, style: itemStyle }, /* @__PURE__ */ React.createElement(
+      CategoryChip,
+      {
+        item: cat,
+        selected: selected.includes(cat.value),
+        onSelect: handlePress
+      }
+    )))
+  );
+}
+var styles = StyleSheet.create({
+  scroll: {
+    flexGrow: 0
+  },
+  container: {
+    flexDirection: "row",
+    gap: s(8),
+    paddingHorizontal: s(4),
+    paddingVertical: vs(4)
+  },
+  chip: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: RADIUS.full,
+    borderWidth: 1,
+    paddingHorizontal: s(14),
+    paddingVertical: vs(8),
+    gap: s(6)
+  },
+  chipIcon: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  chipLabel: {
+    fontFamily: "Sohne-Medium",
+    fontSize: ms(13)
+  },
+  chipBadge: {
+    minWidth: 16,
+    height: 16,
+    borderRadius: 9999,
+    paddingHorizontal: 3,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  chipBadgeText: {
+    fontFamily: "Sohne-Bold",
+    fontSize: ms(9),
+    lineHeight: 14
+  }
+});
+
+export { CategoryStrip };

package/dist/chunk-WBOOUHSS.mjs

@@ -0,0 +1,62 @@
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { ms, mvs, vs } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, View, ActivityIndicator, Text } from 'react-native';
+
+var sizeMap = {
+  sm: "small",
+  md: "small",
+  lg: "large"
+};
+var labelFontSize = {
+  sm: ms(11),
+  md: ms(13),
+  lg: ms(14)
+};
+function Spinner({ size = "md", color, label, ...props }) {
+  const { colors } = useTheme();
+  const a11yLabel = label || "Loading";
+  if (label) {
+    return /* @__PURE__ */ React.createElement(
+      View,
+      {
+        style: styles.wrapper,
+        accessibilityRole: "progressbar",
+        accessibilityLabel: a11yLabel,
+        accessibilityState: { busy: true }
+      },
+      /* @__PURE__ */ React.createElement(ActivityIndicator, { size: sizeMap[size], color: color ?? colors.primary, ...props }),
+      /* @__PURE__ */ React.createElement(
+        Text,
+        {
+          style: [styles.label, { color: colors.foregroundMuted, fontSize: labelFontSize[size] }],
+          allowFontScaling: true
+        },
+        label
+      )
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    ActivityIndicator,
+    {
+      size: sizeMap[size],
+      color: color ?? colors.primary,
+      accessibilityRole: "progressbar",
+      accessibilityLabel: a11yLabel,
+      accessibilityState: { busy: true },
+      ...props
+    }
+  );
+}
+var styles = StyleSheet.create({
+  wrapper: {
+    alignItems: "center",
+    gap: vs(6)
+  },
+  label: {
+    fontFamily: "Sohne-Regular",
+    lineHeight: mvs(18)
+  }
+});
+
+export { Spinner };

package/dist/chunk-WJLKJMKR.mjs

@@ -0,0 +1,78 @@
+import { TYPOGRAPHY } from './chunk-QY3X2UYR.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { mvs, ms } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { Text as Text$1 } from 'react-native';
+import { isLoaded } from 'expo-font';
+
+var warned = false;
+function warnIfFontsMissing() {
+  if (warned) return;
+  if (typeof __DEV__ !== "undefined" && !__DEV__) return;
+  warned = true;
+  try {
+    if (!isLoaded("Sohne-Regular")) {
+      console.warn(
+        "[retray-ui-kit] Sohne fonts are not loaded \u2014 text will fall back to the system font. Load them at your app root before rendering any UI kit component:\n\n  import { useFonts } from 'expo-font'\n  import { SohneFonts } from '@retray-dev/ui-kit/fonts'\n\n  const [fontsLoaded] = useFonts(SohneFonts)\n  if (!fontsLoaded) return null\n"
+      );
+    }
+  } catch {
+  }
+}
+
+// src/components/Text/Text.tsx
+var variantStyles = {
+  "display-hero": { ...TYPOGRAPHY["display-hero"], fontSize: ms(TYPOGRAPHY["display-hero"].fontSize), lineHeight: mvs(TYPOGRAPHY["display-hero"].lineHeight) },
+  "display-xl": { ...TYPOGRAPHY["display-xl"], fontSize: ms(TYPOGRAPHY["display-xl"].fontSize), lineHeight: mvs(TYPOGRAPHY["display-xl"].lineHeight) },
+  "display-lg": { ...TYPOGRAPHY["display-lg"], fontSize: ms(TYPOGRAPHY["display-lg"].fontSize), lineHeight: mvs(TYPOGRAPHY["display-lg"].lineHeight) },
+  "display-md": { ...TYPOGRAPHY["display-md"], fontSize: ms(TYPOGRAPHY["display-md"].fontSize), lineHeight: mvs(TYPOGRAPHY["display-md"].lineHeight) },
+  "display-sm": { ...TYPOGRAPHY["display-sm"], fontSize: ms(TYPOGRAPHY["display-sm"].fontSize), lineHeight: mvs(TYPOGRAPHY["display-sm"].lineHeight) },
+  "title-md": { ...TYPOGRAPHY["title-md"], fontSize: ms(TYPOGRAPHY["title-md"].fontSize), lineHeight: mvs(TYPOGRAPHY["title-md"].lineHeight) },
+  "title-sm": { ...TYPOGRAPHY["title-sm"], fontSize: ms(TYPOGRAPHY["title-sm"].fontSize), lineHeight: mvs(TYPOGRAPHY["title-sm"].lineHeight) },
+  "body-md": { ...TYPOGRAPHY["body-md"], fontSize: ms(TYPOGRAPHY["body-md"].fontSize), lineHeight: mvs(TYPOGRAPHY["body-md"].lineHeight) },
+  "body-sm": { ...TYPOGRAPHY["body-sm"], fontSize: ms(TYPOGRAPHY["body-sm"].fontSize), lineHeight: mvs(TYPOGRAPHY["body-sm"].lineHeight) },
+  caption: { ...TYPOGRAPHY["caption"], fontSize: ms(TYPOGRAPHY["caption"].fontSize), lineHeight: mvs(TYPOGRAPHY["caption"].lineHeight) },
+  "caption-sm": { ...TYPOGRAPHY["caption-sm"], fontSize: ms(TYPOGRAPHY["caption-sm"].fontSize), lineHeight: mvs(TYPOGRAPHY["caption-sm"].lineHeight) },
+  "badge-text": { ...TYPOGRAPHY["badge-text"], fontSize: ms(TYPOGRAPHY["badge-text"].fontSize), lineHeight: mvs(TYPOGRAPHY["badge-text"].lineHeight) },
+  "micro-label": { ...TYPOGRAPHY["micro-label"], fontSize: ms(TYPOGRAPHY["micro-label"].fontSize), lineHeight: mvs(TYPOGRAPHY["micro-label"].lineHeight) },
+  "uppercase-tag": { ...TYPOGRAPHY["uppercase-tag"], fontSize: ms(TYPOGRAPHY["uppercase-tag"].fontSize), lineHeight: mvs(TYPOGRAPHY["uppercase-tag"].lineHeight) },
+  "button-lg": { ...TYPOGRAPHY["button-lg"], fontSize: ms(TYPOGRAPHY["button-lg"].fontSize), lineHeight: mvs(TYPOGRAPHY["button-lg"].lineHeight) },
+  "button-sm": { ...TYPOGRAPHY["button-sm"], fontSize: ms(TYPOGRAPHY["button-sm"].fontSize), lineHeight: mvs(TYPOGRAPHY["button-sm"].lineHeight) }
+};
+var defaultColorVariant = {
+  "display-hero": "foreground",
+  "display-xl": "foreground",
+  "display-lg": "foreground",
+  "display-md": "foreground",
+  "display-sm": "foreground",
+  "title-md": "foreground",
+  "title-sm": "foreground",
+  "body-md": "foregroundSubtle",
+  // running text — slightly softer
+  "body-sm": "foregroundSubtle",
+  caption: "foregroundMuted",
+  "caption-sm": "foregroundMuted",
+  "badge-text": "foreground",
+  "micro-label": "foreground",
+  "uppercase-tag": "foregroundMuted",
+  "button-lg": "foreground",
+  "button-sm": "foreground"
+};
+function TextBase({ variant = "body-md", color, style, children, ...props }) {
+  warnIfFontsMissing();
+  const { colors } = useTheme();
+  const colorKey = defaultColorVariant[variant] ?? "foreground";
+  const resolvedColor = color ?? colors[colorKey];
+  return /* @__PURE__ */ React.createElement(
+    Text$1,
+    {
+      style: [variantStyles[variant], { color: resolvedColor }, style],
+      allowFontScaling: true,
+      ...props
+    },
+    children
+  );
+}
+var Text = React.memo(TextBase);
+
+export { Text };

package/dist/chunk-X4G6APW6.mjs

@@ -0,0 +1,134 @@
+import { usePressScale } from './chunk-YNROWHQJ.mjs';
+import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
+import { PRESS_SCALE, COLOR_TRANSITION, SPRING_ELASTIC } from './chunk-DVK4G2GT.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { mvs, ms, s, vs } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { EaseView } from 'react-native-ease';
+
+function RadioItem({
+  option,
+  selected,
+  onSelect
+}) {
+  const { colors } = useTheme();
+  const { animatedStyle: scaleStyle, onPressIn, onPressOut } = usePressScale({
+    pressScale: PRESS_SCALE.button,
+    disabled: option.disabled
+  });
+  return (
+    // AUDIT FIX: opacity was applied only to the radio circle, leaving the label
+    // at full opacity when disabled. The whole row now dims uniformly so users
+    // get a single, consistent disabled signal across the entire item.
+    /* @__PURE__ */ React.createElement(
+      TouchableOpacity,
+      {
+        style: [styles.row, option.disabled && styles.rowDisabled],
+        onPress: () => {
+          if (!option.disabled) {
+            selectionAsync();
+            onSelect();
+          }
+        },
+        onPressIn,
+        onPressOut,
+        activeOpacity: 1,
+        touchSoundDisabled: true,
+        disabled: option.disabled,
+        accessibilityRole: "radio",
+        accessibilityLabel: option.label,
+        accessibilityState: { checked: selected, disabled: !!option.disabled }
+      },
+      /* @__PURE__ */ React.createElement(Animated.View, { style: scaleStyle }, /* @__PURE__ */ React.createElement(
+        EaseView,
+        {
+          style: styles.radio,
+          animate: { borderColor: selected ? colors.primary : colors.border },
+          transition: COLOR_TRANSITION
+        },
+        /* @__PURE__ */ React.createElement(
+          EaseView,
+          {
+            style: [styles.dot, { backgroundColor: colors.primary }],
+            animate: { scale: selected ? 1 : 0, opacity: selected ? 1 : 0 },
+            transition: SPRING_ELASTIC
+          }
+        )
+      )),
+      /* @__PURE__ */ React.createElement(
+        Text,
+        {
+          style: [styles.label, { color: colors.foreground }],
+          allowFontScaling: true
+        },
+        option.label
+      )
+    )
+  );
+}
+function RadioGroup({
+  options,
+  value,
+  onValueChange,
+  orientation = "vertical",
+  style,
+  accessibilityLabel
+}) {
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [styles.container, orientation === "horizontal" && styles.horizontal, style],
+      accessibilityRole: "radiogroup",
+      accessibilityLabel
+    },
+    options.map((option) => /* @__PURE__ */ React.createElement(
+      RadioItem,
+      {
+        key: option.value,
+        option,
+        selected: option.value === value,
+        onSelect: () => onValueChange?.(option.value)
+      }
+    ))
+  );
+}
+var styles = StyleSheet.create({
+  container: {
+    gap: vs(12)
+  },
+  horizontal: {
+    flexDirection: "row",
+    flexWrap: "wrap"
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: s(12)
+  },
+  // AUDIT FIX: was opacity on the inner circle only
+  rowDisabled: {
+    opacity: 0.45
+  },
+  radio: {
+    width: s(24),
+    height: s(24),
+    borderRadius: s(12),
+    borderWidth: 1.5,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  dot: {
+    width: s(10),
+    height: s(10),
+    borderRadius: s(5)
+  },
+  label: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(14),
+    lineHeight: mvs(20)
+  }
+});
+
+export { RadioGroup };

package/dist/chunk-Y6FXYEAI.mjs

@@ -0,0 +1,8 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+export { __require };

package/dist/chunk-YFZ3ELX5.mjs

@@ -0,0 +1,16 @@
+import { ToastProvider } from './chunk-2UYENBLV.mjs';
+import { ThemeProvider } from './chunk-SOYNZDVY.mjs';
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { SafeAreaProvider, initialWindowMetrics } from 'react-native-safe-area-context';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+
+function RetrayProvider({ children, theme, colorScheme = "system" }) {
+  return /* @__PURE__ */ React.createElement(SafeAreaProvider, { initialMetrics: initialWindowMetrics }, /* @__PURE__ */ React.createElement(GestureHandlerRootView, { style: styles.root }, /* @__PURE__ */ React.createElement(ThemeProvider, { theme, colorScheme }, /* @__PURE__ */ React.createElement(BottomSheetModalProvider, null, /* @__PURE__ */ React.createElement(ToastProvider, null, children)))));
+}
+var styles = StyleSheet.create({
+  root: { flex: 1 }
+});
+
+export { RetrayProvider };

package/dist/chunk-YNROWHQJ.mjs

@@ -0,0 +1,46 @@
+import { PRESS_SCALE, SPRINGS } from './chunk-DVK4G2GT.mjs';
+import { useState, useCallback } from 'react';
+import { Platform } from 'react-native';
+import { useSharedValue, withSpring, useAnimatedStyle } from 'react-native-reanimated';
+
+function useHover() {
+  const [hovered, setHovered] = useState(false);
+  const onMouseEnter = useCallback(() => setHovered(true), []);
+  const onMouseLeave = useCallback(() => setHovered(false), []);
+  if (Platform.OS !== "web") {
+    return { hovered: false, hoverHandlers: {} };
+  }
+  return { hovered, hoverHandlers: { onMouseEnter, onMouseLeave } };
+}
+function usePressScale({
+  pressScale = PRESS_SCALE.button,
+  hoverScale = 1.02,
+  pressInSpring = SPRINGS.pressIn,
+  pressOutSpring = SPRINGS.pressOut,
+  disabled = false
+} = {}) {
+  const scale = useSharedValue(1);
+  const { hovered, hoverHandlers } = useHover();
+  const onPressIn = useCallback(() => {
+    if (disabled) return;
+    scale.value = withSpring(pressScale, pressInSpring);
+  }, [disabled, pressScale, pressInSpring, scale]);
+  const onPressOut = useCallback(() => {
+    if (disabled) return;
+    scale.value = withSpring(1, pressOutSpring);
+  }, [disabled, pressOutSpring, scale]);
+  const hoverActive = Platform.OS === "web" && hovered && hoverScale !== 1 && !disabled;
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      { scale: scale.value * (hoverActive ? hoverScale : 1) }
+    ]
+  }));
+  return {
+    animatedStyle,
+    onPressIn,
+    onPressOut,
+    hoverHandlers
+  };
+}
+
+export { useHover, usePressScale };

package/dist/chunk-Z4BVUWW6.mjs

@@ -0,0 +1,196 @@
+import { PagerDots } from './chunk-4K625MVM.mjs';
+import { renderIcon } from './chunk-T7XZ7H7Y.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 { 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';
+
+var MAX_SCALE = 3;
+var DOUBLE_TAP_SCALE = 2.5;
+function ZoomableImage({ source, width, height, onZoomChange }) {
+  const scale = useSharedValue(1);
+  const savedScale = useSharedValue(1);
+  const translateX = useSharedValue(0);
+  const translateY = useSharedValue(0);
+  const savedX = useSharedValue(0);
+  const savedY = useSharedValue(0);
+  const reportZoom = useCallback((zoomed) => onZoomChange(zoomed), [onZoomChange]);
+  const reset = () => {
+    "worklet";
+    scale.value = withTiming(1);
+    savedScale.value = 1;
+    translateX.value = withTiming(0);
+    translateY.value = withTiming(0);
+    savedX.value = 0;
+    savedY.value = 0;
+    runOnJS(reportZoom)(false);
+  };
+  const pinch = Gesture.Pinch().onUpdate((e) => {
+    scale.value = Math.max(1, Math.min(savedScale.value * e.scale, MAX_SCALE));
+  }).onEnd(() => {
+    savedScale.value = scale.value;
+    if (scale.value <= 1) {
+      reset();
+    } else {
+      runOnJS(reportZoom)(true);
+    }
+  });
+  const pan = Gesture.Pan().onUpdate((e) => {
+    if (scale.value <= 1) return;
+    translateX.value = savedX.value + e.translationX;
+    translateY.value = savedY.value + e.translationY;
+  }).onEnd(() => {
+    savedX.value = translateX.value;
+    savedY.value = translateY.value;
+  });
+  const doubleTap = Gesture.Tap().numberOfTaps(2).onEnd(() => {
+    if (scale.value > 1) {
+      reset();
+    } else {
+      scale.value = withTiming(DOUBLE_TAP_SCALE);
+      savedScale.value = DOUBLE_TAP_SCALE;
+      runOnJS(reportZoom)(true);
+    }
+  });
+  const composed = Gesture.Exclusive(doubleTap, Gesture.Simultaneous(pinch, pan));
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: translateX.value },
+      { translateY: translateY.value },
+      { 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"
+    }
+  )));
+}
+function ImageViewer({ images, visible, onClose, initialIndex = 0 }) {
+  const { width, height } = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  const [index, setIndex] = useState(initialIndex);
+  const [pagingEnabled, setPagingEnabled] = useState(true);
+  const scrollRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!visible) return;
+    const handle = requestAnimationFrame(() => {
+      setIndex(initialIndex);
+      setPagingEnabled(true);
+      scrollRef.current?.scrollTo({ x: initialIndex * width, animated: false });
+    });
+    return () => cancelAnimationFrame(handle);
+  }, [visible, initialIndex, width]);
+  const dragY = useSharedValue(0);
+  const DISMISS_THRESHOLD = height * 0.18;
+  const closeViewer = useCallback(() => onClose(), [onClose]);
+  const swipeDown = Gesture.Pan().enabled(pagingEnabled).activeOffsetY(12).failOffsetX([-16, 16]).onUpdate((e) => {
+    dragY.value = Math.max(0, e.translationY);
+  }).onEnd((e) => {
+    if (e.translationY > DISMISS_THRESHOLD || e.velocityY > 800) {
+      runOnJS(closeViewer)();
+    } else {
+      dragY.value = withTiming(0);
+    }
+  });
+  React.useEffect(() => {
+    if (visible) dragY.value = 0;
+  }, [visible, dragY]);
+  const dismissStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: dragY.value }]
+  }));
+  const backdropStyle = useAnimatedStyle(() => ({
+    opacity: 1 - Math.min(dragY.value / (height * 0.5), 0.85)
+  }));
+  const onMomentumEnd = (e) => {
+    const page = Math.round(e.nativeEvent.contentOffset.x / width);
+    setIndex(page);
+  };
+  const goTo = (page) => {
+    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(
+    ScrollView,
+    {
+      ref: scrollRef,
+      horizontal: true,
+      pagingEnabled: true,
+      scrollEnabled: pagingEnabled,
+      showsHorizontalScrollIndicator: false,
+      onMomentumScrollEnd: onMomentumEnd,
+      bounces: false
+    },
+    images.map((source, i) => /* @__PURE__ */ React.createElement(
+      ZoomableImage,
+      {
+        key: i,
+        source,
+        width,
+        height,
+        onZoomChange: (zoomed) => setPagingEnabled(!zoomed)
+      }
+    ))
+  ))), /* @__PURE__ */ React.createElement(
+    TouchableOpacity,
+    {
+      style: [styles.closeButton, { top: insets.top + vs(8) }],
+      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(
+    PagerDots,
+    {
+      count: images.length,
+      activeIndex: index,
+      onDotPress: goTo,
+      activeColor: "#fff",
+      inactiveColor: "rgba(255,255,255,0.4)"
+    }
+  )) : null)));
+}
+var styles = StyleSheet.create({
+  root: {
+    flex: 1
+  },
+  container: {
+    flex: 1
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "#000"
+  },
+  imageWrap: {
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden"
+  },
+  closeButton: {
+    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"
+  },
+  dots: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    alignItems: "center"
+  }
+});
+
+export { ImageViewer };