@retray-dev/ui-kit 6.1.0 → 7.0.1

package/src/components/Input/Input.tsx

@@ -1,58 +1,48 @@
-import React, { useState, useRef } from 'react'
-import { TextInput, View, Text, Animated, StyleSheet, TextInputProps, ViewStyle, TextStyle, TouchableOpacity, Platform, Easing } from 'react-native'
+import React, { useState } from 'react'
+import { TextInput, View, Text, StyleSheet, TextInputProps, ViewStyle, TextStyle, TouchableOpacity, Platform } from 'react-native'
+import Animated, {
+  useAnimatedStyle,
+  interpolateColor,
+  interpolate,
+} from 'react-native-reanimated'
 import { AntDesign } from '@expo/vector-icons'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
 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
 }
 
-export function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = 'text', containerStyle, inputWrapperStyle, style, onFocus, onBlur, secureTextEntry, editable, ...props }: InputProps) {
+export function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = 'text', containerStyle, inputWrapperStyle, style, onFocus, onBlur, secureTextEntry, editable, accessibilityLabel, ...props }: InputProps) {
   const { colors } = useTheme()
   const [focused, setFocused] = useState(false)
   const [showPassword, setShowPassword] = useState(false)
-  const focusAnim = useRef(new Animated.Value(0)).current
+
+  const focusProgress = useColorTransition(focused, {
+    duration: focused ? TIMINGS.focusIn.duration : TIMINGS.focusOut.duration,
+  })
 
   const isDisabled = disabled || editable === false
   const isPassword = type === 'password'
@@ -62,33 +52,45 @@ export function Input({ label, error, hint, disabled, prefix, suffix, prefixStyl
     ? renderIcon(prefixIcon, 20, prefixIconColor ?? colors.foregroundMuted)
     : prefix
 
-  // If type is password and no suffix override is provided, add the toggle button
   const effectiveSuffix: React.ReactNode = isPassword && !suffix && !suffixIcon ? (
-    <TouchableOpacity onPress={() => setShowPassword(!showPassword)} style={styles.passwordToggle} activeOpacity={0.6}>
+    <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"
+      accessibilityLabel={showPassword ? 'Hide password' : 'Show password'}
+    >
       <AntDesign name={showPassword ? 'eye' : 'eye-invisible'} size={20} color={colors.foregroundMuted} />
     </TouchableOpacity>
   ) : suffixIcon
     ? renderIcon(suffixIcon, 20, suffixIconColor ?? colors.foregroundMuted)
     : suffix
 
+  // 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 (
     <View style={[styles.container, isDisabled && styles.containerDisabled, containerStyle]}>
       {label ? <Text style={[styles.label, { color: colors.foreground }]} allowFontScaling={true}>{label}</Text> : null}
       <Animated.View
         style={[
           styles.inputWrapper,
-          {
-            borderColor: error
-              ? colors.destructive
-              : focusAnim.interpolate({
-                  inputRange: [0, 1],
-                  outputRange: [colors.border, colors.primary],
-                }),
-            backgroundColor: isDisabled ? colors.surface : colors.background,
-          },
+          { backgroundColor: isDisabled ? colors.surface : colors.background },
           inputWrapperStyle,
         ]}
       >
+        <Animated.View style={[styles.borderOverlay, borderAnimStyle]} pointerEvents="none" />
         {effectivePrefix ? (
           typeof effectivePrefix === 'string' ? (
             <Text style={[styles.prefixText, { color: colors.foregroundMuted }, prefixStyle]} allowFontScaling={true}>
@@ -101,26 +103,23 @@ export function Input({ label, error, hint, disabled, prefix, suffix, prefixStyl
         <TextInput
           style={[
             styles.input,
-            {
-              color: colors.foreground,
-            },
+            { color: colors.foreground },
             webInputResetStyle,
             style,
           ]}
           onFocus={(e) => {
             setFocused(true)
-            Animated.timing(focusAnim, { toValue: 1, duration: 120, easing: Easing.out(Easing.ease), useNativeDriver: false }).start()
             onFocus?.(e)
           }}
           onBlur={(e) => {
             setFocused(false)
-            Animated.timing(focusAnim, { toValue: 0, duration: 80, easing: Easing.out(Easing.ease), useNativeDriver: false }).start()
             onBlur?.(e)
           }}
           placeholderTextColor={colors.foregroundMuted}
           allowFontScaling={true}
           secureTextEntry={effectiveSecure}
           editable={isDisabled ? false : editable}
+          accessibilityLabel={accessibilityLabel ?? label}
           {...props}
         />
         {effectiveSuffix ? (
@@ -134,7 +133,13 @@ export function Input({ label, error, hint, disabled, prefix, suffix, prefixStyl
         ) : null}
       </Animated.View>
       {error ? (
-        <Text style={[styles.helperText, { color: colors.destructive }]} allowFontScaling={true}>{error}</Text>
+        <Text
+          style={[styles.helperText, { color: colors.destructive }]}
+          allowFontScaling={true}
+          accessibilityLiveRegion="polite"
+        >
+          {error}
+        </Text>
       ) : null}
       {!error && hint ? (
         <Text style={[styles.helperText, { color: colors.foregroundMuted }]} allowFontScaling={true}>{hint}</Text>
@@ -151,20 +156,25 @@ const styles = StyleSheet.create({
     opacity: 0.6,
   },
   label: {
-    fontFamily: 'Poppins-Medium',
-    fontSize: ms(14),           // caption size for input labels
+    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),
@@ -174,7 +184,7 @@ const styles = StyleSheet.create({
     marginRight: s(8),
   },
   prefixText: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(15),
     marginRight: s(8),
   },
@@ -182,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'

package/src/components/ListItem/ListItem.tsx

@@ -1,22 +1,21 @@
-import React, { useRef } from 'react'
+import React from 'react'
 import {
   TouchableOpacity,
-  Animated,
   View,
   Text,
   StyleSheet,
   ViewStyle,
   TextStyle,
-  Platform,
 } 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'
-
-const nativeDriver = Platform.OS !== 'web'
+import { usePressScale } from '../../utils/usePressScale'
+import { SPRINGS, PRESS_SCALE } from '../../utils/animations'
 
 export type ListItemVariant = 'plain' | 'card'
 
@@ -78,9 +77,11 @@ export interface ListItemProps {
   subtitleStyle?: TextStyle
   /** Style applied to the caption Text. */
   captionStyle?: TextStyle
+  /** Accessibility label override. Defaults to the title. */
+  accessibilityLabel?: string
 }
 
-export function ListItem({
+function ListItemBase({
   leftRender,
   rightRender,
   trailing,
@@ -101,30 +102,15 @@ export function ListItem({
   titleStyle,
   subtitleStyle,
   captionStyle,
+  accessibilityLabel,
 }: ListItemProps) {
   const { colors } = useTheme()
-  const scale = useRef(new Animated.Value(1)).current
-
-  const handlePressIn = () => {
-    if (!onPress || disabled) return
-    Animated.spring(scale, {
-      toValue: 0.97,
-      useNativeDriver: nativeDriver,
-      stiffness: 350,
-      damping: 28,
-      mass: 0.9,
-    }).start()
-  }
-
-  const handlePressOut = () => {
-    Animated.spring(scale, {
-      toValue: 1,
-      useNativeDriver: nativeDriver,
-      stiffness: 220,
-      damping: 20,
-      mass: 0.9,
-    }).start()
-  }
+  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
+    pressScale: PRESS_SCALE.row,
+    pressInSpring: SPRINGS.surfacePressIn,
+    pressOutSpring: SPRINGS.surfacePressOut,
+    disabled: !onPress || disabled,
+  })
 
   const handlePress = () => {
     hapticSelection()
@@ -154,16 +140,21 @@ export function ListItem({
         }
       : {}
 
+  const a11yLabel = accessibilityLabel ?? [title, subtitle, caption].filter(Boolean).join('. ')
+
   return (
-    <Animated.View style={[{ transform: [{ scale }] }, disabled && styles.disabled]}>
+    <Animated.View style={[animatedStyle, disabled && styles.disabled]} {...hoverHandlers}>
       <TouchableOpacity
         style={[styles.container, cardStyle, style]}
         onPress={onPress ? handlePress : undefined}
-        onPressIn={handlePressIn}
-        onPressOut={handlePressOut}
+        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>
@@ -219,10 +210,7 @@ export function ListItem({
         <View
           style={[
             styles.separator,
-            { 
-              backgroundColor: colors.border,
-              marginLeft: effectiveLeft ? s(44) + s(12) : 0
-            },
+            { backgroundColor: colors.separator },
           ]}
         />
       ) : null}
@@ -230,11 +218,13 @@ export function ListItem({
   )
 }
 
+export const ListItem = React.memo(ListItemBase)
+
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingHorizontal: 0,
+    paddingHorizontal: s(16),
     paddingVertical: vs(10),
     gap: s(12),
   },
@@ -250,17 +240,17 @@ const styles = StyleSheet.create({
     gap: vs(4),
   },
   title: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(15),
     lineHeight: mvs(22),
   },
   subtitle: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(13),
     lineHeight: mvs(18),
   },
   caption: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(12),
     lineHeight: mvs(16),
     opacity: 0.7,
@@ -272,12 +262,9 @@ const styles = StyleSheet.create({
     maxWidth: s(160),
   },
   rightText: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(14),
   },
-  chevron: {
-    marginLeft: s(4),
-  },
   separator: {
     height: StyleSheet.hairlineWidth,
     marginRight: 0,