@retray-dev/ui-kit 6.2.0 → 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/Input/Input.tsx

@@ -3,6 +3,7 @@ import { TextInput, View, Text, StyleSheet, TextInputProps, ViewStyle, TextStyle
 import Animated, {
   useAnimatedStyle,
   interpolateColor,
+  interpolate,
 } from 'react-native-reanimated'
 import { AntDesign } from '@expo/vector-icons'
 import { useTheme } from '../../theme'
@@ -11,46 +12,26 @@ import { renderIcon } from '../../utils/icons'
 import { useColorTransition } from '../../utils/useColorTransition'
 import { TIMINGS } from '../../utils/animations'
 
-const webInputResetStyle: any =
+const webInputResetStyle: Record<string, unknown> =
   Platform.OS === 'web'
     ? { outlineStyle: 'none', outlineWidth: 0, outlineColor: 'transparent', boxShadow: 'none' }
     : {}
 
 export interface InputProps extends TextInputProps {
   label?: string
-  /** Red helper text below the input; also changes border to `destructive` color. Takes priority over `hint`. */
   error?: string
-  /** Helper text shown below the input when there is no error. */
   hint?: string
-  /** Disabled visual state — dimmed appearance, not editable. Also sets `editable={false}`. */
   disabled?: boolean
-  /** Text or component rendered before the input text. */
   prefix?: React.ReactNode
-  /** Text or component rendered after the input text. */
   suffix?: React.ReactNode
-  /** Style applied to prefix text if prefix is a string. */
   prefixStyle?: TextStyle
-  /** Style applied to suffix text if suffix is a string. */
   suffixStyle?: TextStyle
-  /**
-   * Icon name from `@expo/vector-icons` rendered before the input text.
-   * See https://icons.expo.fyi. Takes precedence over `prefix`.
-   */
   prefixIcon?: string
-  /**
-   * Icon name from `@expo/vector-icons` rendered after the input text.
-   * See https://icons.expo.fyi. Takes precedence over `suffix` (unless `type="password"`).
-   */
   suffixIcon?: string
-  /** Override the resolved prefix icon color. Defaults to `mutedForeground`. */
   prefixIconColor?: string
-  /** Override the resolved suffix icon color. Defaults to `mutedForeground`. */
   suffixIconColor?: string
-  /** Input type. When set to \`'password'\`, shows a toggle button to reveal/hide text. */
   type?: 'text' | 'password'
-  /** Style for the outer container \`View\`. Use \`style\` (from \`TextInputProps\`) to style the \`TextInput\` itself. */
   containerStyle?: ViewStyle
-  /** Style for the inner border wrapper (overrides padding, etc). */
   inputWrapperStyle?: ViewStyle
 }
 
@@ -59,7 +40,6 @@ export function Input({ label, error, hint, disabled, prefix, suffix, prefixStyl
   const [focused, setFocused] = useState(false)
   const [showPassword, setShowPassword] = useState(false)
 
-  // Asymmetric durations — focus snaps in, blurs out subtly. Runs on UI thread.
   const focusProgress = useColorTransition(focused, {
     duration: focused ? TIMINGS.focusIn.duration : TIMINGS.focusOut.duration,
   })
@@ -75,6 +55,8 @@ export function Input({ label, error, hint, disabled, prefix, suffix, prefixStyl
   const effectiveSuffix: React.ReactNode = isPassword && !suffix && !suffixIcon ? (
     <TouchableOpacity
       onPress={() => setShowPassword(!showPassword)}
+      // AUDIT FIX: was padding: s(4) → ~28px target (below 44px minimum).
+      // padding: s(12) with negative margin keeps visual size but expands hit area.
       style={styles.passwordToggle}
       activeOpacity={0.6}
       accessibilityRole="button"
@@ -86,10 +68,16 @@ export function Input({ label, error, hint, disabled, prefix, suffix, prefixStyl
     ? renderIcon(suffixIcon, 20, suffixIconColor ?? colors.foregroundMuted)
     : suffix
 
-  const borderColorStyle = useAnimatedStyle(() => ({
+  // Border drawn on an absolute overlay so the 1px→2px weight change never
+  // resizes the layout box (which would reflow content / shift the interface).
+  // Wrapper keeps borderWidth: 0; overlay grows inward and is non-interactive.
+  const borderAnimStyle = useAnimatedStyle(() => ({
     borderColor: error
       ? colors.destructive
       : interpolateColor(focusProgress.value, [0, 1], [colors.border, colors.primary]),
+    borderWidth: error
+      ? 2
+      : interpolate(focusProgress.value, [0, 1], [1, 2]),
   }))
 
   return (
@@ -99,10 +87,10 @@ export function Input({ label, error, hint, disabled, prefix, suffix, prefixStyl
         style={[
           styles.inputWrapper,
           { backgroundColor: isDisabled ? colors.surface : colors.background },
-          borderColorStyle,
           inputWrapperStyle,
         ]}
       >
+        <Animated.View style={[styles.borderOverlay, borderAnimStyle]} pointerEvents="none" />
         {effectivePrefix ? (
           typeof effectivePrefix === 'string' ? (
             <Text style={[styles.prefixText, { color: colors.foregroundMuted }, prefixStyle]} allowFontScaling={true}>
@@ -168,20 +156,25 @@ const styles = StyleSheet.create({
     opacity: 0.6,
   },
   label: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(14),
   },
   inputWrapper: {
     flexDirection: 'row',
     alignItems: 'center',
-    borderWidth: 2,
+    // Border lives on borderOverlay (absolute) so its 1px→2px focus change
+    // never resizes this box. Wrapper itself carries no border.
     borderRadius: 8,
     paddingHorizontal: s(14),
     paddingVertical: vs(11),
     minHeight: 48,
   },
+  borderOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    borderRadius: 8,
+  },
   input: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     flex: 1,
     fontSize: ms(16),
     paddingVertical: vs(2),
@@ -191,7 +184,7 @@ const styles = StyleSheet.create({
     marginRight: s(8),
   },
   prefixText: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(15),
     marginRight: s(8),
   },
@@ -199,15 +192,18 @@ const styles = StyleSheet.create({
     marginLeft: s(8),
   },
   suffixText: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(15),
     marginLeft: s(8),
   },
+  // AUDIT FIX: was padding: s(4) → ~28px tap target. Now 12px padding → ~44px.
+  // Negative margin compensates so the visual icon position is unchanged.
   passwordToggle: {
-    padding: s(4),
+    padding: s(12),
+    margin: -s(8),
   },
   helperText: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(13),
   },
 })

package/src/components/LabelValue/LabelValue.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { View, Text, StyleSheet, ViewStyle } from 'react-native'
 import { useTheme } from '../../theme'
-import { s, vs, ms, mvs } from '../../utils/scaling'
+import { s, ms, mvs } from '../../utils/scaling'
 import { renderIcon } from '../../utils/icons'
 
 export interface LabelValueProps {
@@ -14,7 +14,7 @@ export interface LabelValueProps {
   style?: ViewStyle
 }
 
-export function LabelValue({ label, value, iconName, iconColor, style }: LabelValueProps) {
+function LabelValueBase({ label, value, iconName, iconColor, style }: LabelValueProps) {
   const { colors } = useTheme()
 
   const resolvedIcon = iconName
@@ -40,6 +40,8 @@ export function LabelValue({ label, value, iconName, iconColor, style }: LabelVa
   )
 }
 
+export const LabelValue = React.memo(LabelValueBase)
+
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
@@ -57,12 +59,12 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   label: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(13),
     lineHeight: mvs(18),
   },
   value: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(14),
     lineHeight: mvs(20),
     textAlign: 'right',

package/src/components/ListGroup/ListGroup.tsx

@@ -0,0 +1,145 @@
+import React from 'react'
+import { View, Text, StyleSheet, ViewStyle } from 'react-native'
+import { useTheme } from '../../theme'
+import { s, vs } from '../../utils/scaling'
+import { RADIUS } from '../../tokens'
+
+export type ListGroupVariant = 'plain' | 'card'
+
+export interface ListGroupProps {
+  children: React.ReactNode
+  /**
+   * - `plain` (default): no background, plain ListItems inside.
+   * - `card`: card surface with background + border wrapping plain ListItems.
+   */
+  variant?: ListGroupVariant
+  style?: ViewStyle
+}
+
+export interface ListGroupHeaderProps {
+  children: React.ReactNode
+  style?: ViewStyle
+}
+
+export interface ListGroupFooterProps {
+  children: React.ReactNode
+  style?: ViewStyle
+}
+
+/**
+ * ListGroup wraps multiple ListItems and auto-adds separators between them.
+ * Use variant="card" for a standalone surface or "plain" for items inside another container.
+ */
+export function ListGroup({ children, variant = 'plain', style }: ListGroupProps) {
+  const { colors } = useTheme()
+
+  // Auto-inject showSeparator={true} to all ListItem children except the last
+  const processedChildren = React.Children.map(children, (child, index) => {
+    if (!React.isValidElement(child)) return child
+    
+    // Skip ListGroup.Header and ListGroup.Footer
+    if (child.type === ListGroupHeader || child.type === ListGroupFooter) {
+      return child
+    }
+
+    // Check if it's a ListItem (has title prop as a heuristic)
+    const childProps = child.props as Record<string, unknown>
+    const isListItem = 'title' in childProps
+    if (!isListItem) return child
+
+    const isLast = index === React.Children.count(children) - 1
+
+    // Only add separator if not already explicitly set and not last item
+    if (childProps['showSeparator'] === undefined && !isLast) {
+      return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, {
+        showSeparator: true,
+      })
+    }
+
+    return child
+  })
+
+  const cardStyle: ViewStyle =
+    variant === 'card'
+      ? {
+          backgroundColor: colors.card,
+          borderRadius: RADIUS.md,
+          borderWidth: 1,
+          borderColor: colors.border,
+          shadowColor: '#000',
+          shadowOffset: { width: 0, height: 2 },
+          shadowOpacity: 0.06,
+          shadowRadius: 6,
+          elevation: 2,
+          paddingVertical: vs(4),
+        }
+      : {}
+
+  return (
+    <View style={[styles.container, cardStyle, style]}>
+      {processedChildren}
+    </View>
+  )
+}
+
+export function ListGroupHeader({ children, style }: ListGroupHeaderProps) {
+  const { colors } = useTheme()
+  
+  if (typeof children === 'string') {
+    return (
+      <View style={[styles.header, { borderBottomColor: colors.separator }, style]}>
+        <Text style={[styles.headerText, { color: colors.foregroundMuted }]} allowFontScaling={true}>
+          {children}
+        </Text>
+      </View>
+    )
+  }
+
+  return <View style={[styles.header, { borderBottomColor: colors.separator }, style]}>{children}</View>
+}
+
+export function ListGroupFooter({ children, style }: ListGroupFooterProps) {
+  const { colors } = useTheme()
+  
+  if (typeof children === 'string') {
+    return (
+      <View style={[styles.footer, style]}>
+        <Text style={[styles.footerText, { color: colors.foregroundMuted }]} allowFontScaling={true}>
+          {children}
+        </Text>
+      </View>
+    )
+  }
+
+  return <View style={[styles.footer, style]}>{children}</View>
+}
+
+ListGroup.Header = ListGroupHeader
+ListGroup.Footer = ListGroupFooter
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+  },
+  header: {
+    paddingHorizontal: s(16),
+    paddingTop: vs(12),
+    paddingBottom: vs(8),
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  headerText: {
+    fontFamily: 'Sohne-SemiBold',
+    fontSize: 13,
+    letterSpacing: 0.32,
+    textTransform: 'uppercase',
+  },
+  footer: {
+    paddingHorizontal: s(16),
+    paddingTop: vs(8),
+    paddingBottom: vs(12),
+  },
+  footerText: {
+    fontFamily: 'Sohne-Regular',
+    fontSize: 12,
+  },
+})

package/src/components/ListGroup/index.ts

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