@retray-dev/ui-kit 7.0.1 → 9.0.0

package/src/components/ImageViewer/ImageViewer.tsx

@@ -0,0 +1,290 @@
+import React, { useState, useCallback } from 'react'
+import {
+  Modal,
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  useWindowDimensions,
+  ImageSourcePropType,
+  ScrollView,
+  NativeSyntheticEvent,
+  NativeScrollEvent,
+} from 'react-native'
+import { GestureHandlerRootView, GestureDetector, Gesture } from 'react-native-gesture-handler'
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  runOnJS,
+} from 'react-native-reanimated'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { renderIcon } from '../../utils/icons'
+import { PagerDots } from '../PagerDots'
+import { s, vs } from '../../utils/scaling'
+
+const MAX_SCALE = 3
+const DOUBLE_TAP_SCALE = 2.5
+
+interface ZoomableImageProps {
+  source: ImageSourcePropType
+  width: number
+  height: number
+  /** Reports whether this page is currently zoomed in, so the pager can lock paging. */
+  onZoomChange: (zoomed: boolean) => void
+}
+
+function ZoomableImage({ source, width, height, onZoomChange }: ZoomableImageProps) {
+  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: boolean) => 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 (
+    <GestureDetector gesture={composed}>
+      <Animated.View style={[{ width, height }, styles.imageWrap]}>
+        <Animated.Image
+          source={source}
+          style={[{ width, height }, animatedStyle]}
+          resizeMode="contain"
+        />
+      </Animated.View>
+    </GestureDetector>
+  )
+}
+
+export interface ImageViewerProps {
+  /** Images to show — URI strings via `{ uri }` or `require()` sources. */
+  images: ImageSourcePropType[]
+  visible: boolean
+  onClose: () => void
+  /** Page to open on. Defaults to 0. */
+  initialIndex?: number
+}
+
+/**
+ * Full-screen zoomable image gallery. Horizontal paging + pinch / double-tap
+ * zoom + pan. Page dots and a close button overlay the images.
+ *
+ * Requires `react-native-gesture-handler` (already a peer dependency).
+ *
+ * @example
+ * <ImageViewer images={pages} visible={open} initialIndex={page} onClose={() => setOpen(false)} />
+ */
+export function ImageViewer({ images, visible, onClose, initialIndex = 0 }: ImageViewerProps) {
+  const { width, height } = useWindowDimensions()
+  const insets = useSafeAreaInsets()
+  const [index, setIndex] = useState(initialIndex)
+  const [pagingEnabled, setPagingEnabled] = useState(true)
+  const scrollRef = React.useRef<ScrollView>(null)
+
+  // Reset to the requested page each time the viewer is opened. State updates are
+  // deferred to the next frame (also when contentOffset must land on the page),
+  // so this never sets state synchronously during the effect.
+  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])
+
+  // Swipe-down-to-dismiss. Only active when no image is zoomed (pagingEnabled).
+  // Drags the whole gallery down + fades the black backdrop; releases past
+  // threshold → close, otherwise springs back.
+  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)
+      }
+    })
+
+  // Reset drag offset whenever the viewer opens.
+  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: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const page = Math.round(e.nativeEvent.contentOffset.x / width)
+    setIndex(page)
+  }
+
+  const goTo = (page: number) => {
+    scrollRef.current?.scrollTo({ x: page * width, animated: true })
+    setIndex(page)
+  }
+
+  return (
+    <Modal visible={visible} transparent={false} animationType="fade" onRequestClose={onClose} statusBarTranslucent>
+      <GestureHandlerRootView style={styles.root}>
+        <Animated.View style={[styles.backdrop, backdropStyle]} pointerEvents="none" />
+        <Animated.View style={[styles.container, dismissStyle]}>
+          <GestureDetector gesture={swipeDown}>
+            <Animated.View style={styles.root}>
+              <ScrollView
+                ref={scrollRef}
+                horizontal
+                pagingEnabled
+                scrollEnabled={pagingEnabled}
+                showsHorizontalScrollIndicator={false}
+                onMomentumScrollEnd={onMomentumEnd}
+                bounces={false}
+              >
+                {images.map((source, i) => (
+                  <ZoomableImage
+                    key={i}
+                    source={source}
+                    width={width}
+                    height={height}
+                    onZoomChange={(zoomed) => setPagingEnabled(!zoomed)}
+                  />
+                ))}
+              </ScrollView>
+            </Animated.View>
+          </GestureDetector>
+
+          <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')}
+          </TouchableOpacity>
+
+          {images.length > 1 ? (
+            <View style={[styles.dots, { bottom: insets.bottom + vs(16) }]} pointerEvents="box-none">
+              <PagerDots
+                count={images.length}
+                activeIndex={index}
+                onDotPress={goTo}
+                activeColor="#fff"
+                inactiveColor="rgba(255,255,255,0.4)"
+              />
+            </View>
+          ) : null}
+        </Animated.View>
+      </GestureHandlerRootView>
+    </Modal>
+  )
+}
+
+const 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',
+  },
+})

package/src/components/ImageViewer/index.ts

@@ -0,0 +1 @@
+export * from './ImageViewer'

package/src/components/ListItem/ListItem.tsx

@@ -1,21 +1,18 @@
 import React from 'react'
 import {
-  TouchableOpacity,
   View,
   Text,
   StyleSheet,
   ViewStyle,
   TextStyle,
 } from 'react-native'
-import Animated from 'react-native-reanimated'
 import { Entypo } from '@expo/vector-icons'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
 import { renderIcon } from '../../utils/icons'
 import { RADIUS } from '../../tokens'
-import { usePressScale } from '../../utils/usePressScale'
-import { SPRINGS, PRESS_SCALE } from '../../utils/animations'
+import { PressableRow } from '../../utils/pressable'
 
 export type ListItemVariant = 'plain' | 'card'
 
@@ -105,12 +102,6 @@ function ListItemBase({
   accessibilityLabel,
 }: ListItemProps) {
   const { colors } = useTheme()
-  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
-    pressScale: PRESS_SCALE.row,
-    pressInSpring: SPRINGS.surfacePressIn,
-    pressOutSpring: SPRINGS.surfacePressOut,
-    disabled: !onPress || disabled,
-  })
 
   const handlePress = () => {
     hapticSelection()
@@ -142,79 +133,91 @@ function ListItemBase({
 
   const a11yLabel = accessibilityLabel ?? [title, subtitle, caption].filter(Boolean).join('. ')
 
-  return (
-    <Animated.View style={[animatedStyle, disabled && styles.disabled]} {...hoverHandlers}>
-      <TouchableOpacity
-        style={[styles.container, cardStyle, style]}
-        onPress={onPress ? handlePress : undefined}
-        onPressIn={onPressIn}
-        onPressOut={onPressOut}
-        disabled={disabled}
-        activeOpacity={1}
-        touchSoundDisabled={true}
-        accessibilityRole={onPress ? 'button' : undefined}
-        accessibilityLabel={onPress ? a11yLabel : undefined}
-        accessibilityState={onPress ? { disabled: !!disabled } : undefined}
-      >
-        {effectiveLeft ? (
-          <View style={styles.leftContainer}>{effectiveLeft}</View>
-        ) : null}
+  const content = (
+    <>
+      {effectiveLeft ? (
+        <View style={styles.leftContainer}>{effectiveLeft}</View>
+      ) : null}
 
-        <View style={styles.content}>
+      <View style={styles.content}>
+        <Text
+          style={[styles.title, { color: colors.foreground }, titleStyle]}
+          numberOfLines={2}
+          allowFontScaling={true}
+        >
+          {title}
+        </Text>
+        {subtitle ? (
           <Text
-            style={[styles.title, { color: colors.foreground }, titleStyle]}
+            style={[styles.subtitle, { color: colors.foregroundMuted }, subtitleStyle]}
             numberOfLines={2}
             allowFontScaling={true}
           >
-            {title}
+            {subtitle}
           </Text>
-          {subtitle ? (
-            <Text
-              style={[styles.subtitle, { color: colors.foregroundMuted }, subtitleStyle]}
-              numberOfLines={2}
-              allowFontScaling={true}
-            >
-              {subtitle}
-            </Text>
-          ) : null}
-          {caption ? (
+        ) : null}
+        {caption ? (
+          <Text
+            style={[styles.caption, { color: colors.foregroundMuted }, captionStyle]}
+            numberOfLines={1}
+            allowFontScaling={true}
+          >
+            {caption}
+          </Text>
+        ) : null}
+      </View>
+
+      {effectiveRight !== undefined ? (
+        <View style={styles.rightContainer}>
+          {typeof effectiveRight === 'string' ? (
             <Text
-              style={[styles.caption, { color: colors.foregroundMuted }, captionStyle]}
-              numberOfLines={1}
+              style={[styles.rightText, { color: colors.foregroundMuted }]}
               allowFontScaling={true}
             >
-              {caption}
+              {effectiveRight}
             </Text>
-          ) : null}
+          ) : (
+            effectiveRight
+          )}
         </View>
+      ) : showChevron ? (
+        <Entypo name="chevron-with-circle-right" size={20} color={colors.foregroundMuted} />
+      ) : null}
+    </>
+  )
 
-        {effectiveRight !== undefined ? (
-          <View style={styles.rightContainer}>
-            {typeof effectiveRight === 'string' ? (
-              <Text
-                style={[styles.rightText, { color: colors.foregroundMuted }]}
-                allowFontScaling={true}
-              >
-                {effectiveRight}
-              </Text>
-            ) : (
-              effectiveRight
-            )}
-          </View>
-        ) : showChevron ? (
-          <Entypo name="chevron-with-circle-right" size={20} color={colors.foregroundMuted} />
+  if (onPress) {
+    return (
+      <View style={disabled && styles.disabled}>
+        <PressableRow
+          style={[styles.container, cardStyle, style]}
+          onPress={handlePress}
+          enabled={!disabled}
+          rippleColor="transparent"
+          touchSoundDisabled
+          activateOnHover
+          accessibilityRole="button"
+          accessibilityLabel={a11yLabel}
+          accessibilityState={{ disabled: !!disabled }}
+        >
+          {content}
+        </PressableRow>
+        {showSeparator ? (
+          <View style={[styles.separator, { backgroundColor: colors.separator }]} />
         ) : null}
-      </TouchableOpacity>
+      </View>
+    )
+  }
 
+  return (
+    <View style={[disabled && styles.disabled]}>
+      <View style={[styles.container, cardStyle, style]}>
+        {content}
+      </View>
       {showSeparator ? (
-        <View
-          style={[
-            styles.separator,
-            { backgroundColor: colors.separator },
-          ]}
-        />
+        <View style={[styles.separator, { backgroundColor: colors.separator }]} />
       ) : null}
-    </Animated.View>
+    </View>
   )
 }
 

package/src/components/MediaCard/MediaCard.tsx

@@ -135,10 +135,16 @@ function MediaCardBase({
         {(onActionPress || actionIcon || actionIconName) && (
           <TouchableOpacity
             style={[styles.actionButton, { backgroundColor: 'rgba(0,0,0,0.24)' }]}
-            onPress={() => { impactLight(); onActionPress?.() }}
+            onPress={(e) => {
+              // Stop propagation to prevent triggering parent onPress
+              e?.stopPropagation?.()
+              impactLight()
+              onActionPress?.()
+            }}
             activeOpacity={0.8}
             touchSoundDisabled={true}
-            accessibilityRole="button"
+            // On web, avoid nested <button> by using a non-button role when parent is pressable
+            accessibilityRole={Platform.OS === 'web' && onPress ? undefined : 'button'}
             accessibilityLabel={actionIconName ?? 'action'}
             accessibilityState={{ selected: actionActive }}
           >

package/src/components/MenuItem/MenuItem.tsx

@@ -1,21 +1,18 @@
 import React from 'react'
 import {
-  TouchableOpacity,
   View,
   Text,
   StyleSheet,
   ViewStyle,
   TextStyle,
 } from 'react-native'
-import Animated from 'react-native-reanimated'
 import { Entypo } from '@expo/vector-icons'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
 import { renderIcon } from '../../utils/icons'
 import { RADIUS } from '../../tokens'
-import { usePressScale } from '../../utils/usePressScale'
-import { SPRINGS, PRESS_SCALE } from '../../utils/animations'
+import { PressableRow } from '../../utils/pressable'
 
 export type MenuItemVariant = 'plain' | 'card'
 
@@ -77,12 +74,6 @@ function MenuItemBase({
   accessibilityLabel,
 }: MenuItemProps) {
   const { colors } = useTheme()
-  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
-    pressScale: PRESS_SCALE.row,
-    pressInSpring: SPRINGS.surfacePressIn,
-    pressOutSpring: SPRINGS.surfacePressOut,
-    disabled,
-  })
 
   const handlePress = () => {
     hapticSelection()
@@ -111,15 +102,14 @@ function MenuItemBase({
   const a11yLabel = accessibilityLabel ?? (subtitle ? `${label}. ${subtitle}` : label)
 
   return (
-    <Animated.View style={[animatedStyle, disabled && styles.disabled]} {...hoverHandlers}>
-      <TouchableOpacity
+    <View style={disabled && styles.disabled}>
+      <PressableRow
         style={[styles.container, cardStyle, style]}
         onPress={handlePress}
-        onPressIn={onPressIn}
-        onPressOut={onPressOut}
-        disabled={disabled}
-        activeOpacity={1}
-        touchSoundDisabled={true}
+        enabled={!disabled}
+        rippleColor="transparent"
+        touchSoundDisabled
+        activateOnHover
         accessibilityRole="button"
         accessibilityLabel={a11yLabel}
         accessibilityState={{ disabled }}
@@ -158,17 +148,12 @@ function MenuItemBase({
         ) : showChevron ? (
           <Entypo name="chevron-right" size={18} color={colors.foregroundMuted} />
         ) : null}
-      </TouchableOpacity>
+      </PressableRow>
 
       {showSeparator ? (
-        <View
-          style={[
-            styles.separator,
-            { backgroundColor: colors.separator },
-          ]}
-        />
+        <View style={[styles.separator, { backgroundColor: colors.separator }]} />
       ) : null}
-    </Animated.View>
+    </View>
   )
 }
 

package/src/components/MonthPicker/MonthPicker.tsx

@@ -18,9 +18,27 @@ export interface MonthPickerValue {
   year: number
 }
 
+/** Convert a JS `Date` to a `MonthPickerValue` (uses local time). */
+export function dateToMonthPickerValue(date: Date): MonthPickerValue {
+  return { month: date.getMonth() + 1, year: date.getFullYear() }
+}
+
+/** Convert a `MonthPickerValue` to a `Date` at the first day of that month (local time). */
+export function monthPickerValueToDate(value: MonthPickerValue): Date {
+  return new Date(value.year, value.month - 1, 1)
+}
+
+// Absolute month index — lets us compare/clamp values with simple arithmetic.
+const toIndex = (v: MonthPickerValue) => v.year * 12 + (v.month - 1)
+const fromIndex = (i: number): MonthPickerValue => ({ year: Math.floor(i / 12), month: (i % 12) + 1 })
+
 export interface MonthPickerProps {
   value: MonthPickerValue
   onChange: (value: MonthPickerValue) => void
+  /** Earliest selectable month (inclusive). Prev arrow disables at this bound. */
+  minValue?: MonthPickerValue
+  /** Latest selectable month (inclusive). Next arrow disables at this bound — e.g. cap at the current month. */
+  maxValue?: MonthPickerValue
   /** BCP 47 locale tag. Built-in: 'en' | 'es' | 'pt' | 'fr'. For other locales supply formatLabel. */
   locale?: string
   /** Custom label formatter. Takes precedence over locale. */
@@ -28,9 +46,16 @@ export interface MonthPickerProps {
   style?: ViewStyle
 }
 
-export function MonthPicker({ value, onChange, locale = 'en', formatLabel, style }: MonthPickerProps) {
+export function MonthPicker({ value, onChange, minValue, maxValue, locale = 'en', formatLabel, style }: MonthPickerProps) {
   const { colors } = useTheme()
 
+  const index = toIndex(value)
+  const minIndex = minValue ? toIndex(minValue) : -Infinity
+  const maxIndex = maxValue ? toIndex(maxValue) : Infinity
+
+  const prevDisabled = index - 1 < minIndex
+  const nextDisabled = index + 1 > maxIndex
+
   const getLabel = (): string => {
     if (formatLabel) return formatLabel(value)
     const names = MONTH_NAMES[locale] ?? MONTH_NAMES.en
@@ -38,32 +63,28 @@ export function MonthPicker({ value, onChange, locale = 'en', formatLabel, style
   }
 
   const handlePrev = () => {
+    if (prevDisabled) return
     hapticSelection()
-    if (value.month === 1) {
-      onChange({ month: 12, year: value.year - 1 })
-    } else {
-      onChange({ month: value.month - 1, year: value.year })
-    }
+    onChange(fromIndex(index - 1))
   }
 
   const handleNext = () => {
+    if (nextDisabled) return
     hapticSelection()
-    if (value.month === 12) {
-      onChange({ month: 1, year: value.year + 1 })
-    } else {
-      onChange({ month: value.month + 1, year: value.year })
-    }
+    onChange(fromIndex(index + 1))
   }
 
   return (
     <View style={[styles.container, style]} accessibilityRole="adjustable" accessibilityLabel={getLabel()}>
       <TouchableOpacity
-        style={styles.arrow}
+        style={[styles.arrow, prevDisabled && styles.arrowDisabled]}
         onPress={handlePrev}
+        disabled={prevDisabled}
         activeOpacity={0.6}
         touchSoundDisabled={true}
         accessibilityRole="button"
         accessibilityLabel="Previous month"
+        accessibilityState={{ disabled: prevDisabled }}
         hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
       >
         <Entypo name="chevron-left" size={22} color={colors.foreground} />
@@ -76,12 +97,14 @@ export function MonthPicker({ value, onChange, locale = 'en', formatLabel, style
         {getLabel()}
       </Text>
       <TouchableOpacity
-        style={styles.arrow}
+        style={[styles.arrow, nextDisabled && styles.arrowDisabled]}
         onPress={handleNext}
+        disabled={nextDisabled}
         activeOpacity={0.6}
         touchSoundDisabled={true}
         accessibilityRole="button"
         accessibilityLabel="Next month"
+        accessibilityState={{ disabled: nextDisabled }}
         hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
       >
         <Entypo name="chevron-right" size={22} color={colors.foreground} />
@@ -102,6 +125,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  arrowDisabled: {
+    opacity: 0.3,
+  },
   label: {
     fontFamily: 'Sohne-Medium',
     fontSize: ms(17),

package/src/components/MonthPicker/index.ts

@@ -1,2 +1,2 @@
-export { MonthPicker } from './MonthPicker'
+export { MonthPicker, dateToMonthPickerValue, monthPickerValueToDate } from './MonthPicker'
 export type { MonthPickerProps, MonthPickerValue } from './MonthPicker'