@retray-dev/ui-kit 6.1.0 → 7.0.1

package/src/components/Chip/Chip.tsx

@@ -1,38 +1,31 @@
-import React, { useEffect, useRef } from 'react'
-import {
-  TouchableOpacity,
-  Animated,
-  View,
-  Text,
-  StyleSheet,
-  ViewStyle,
-  Platform,
-  Easing,
-} from 'react-native'
+import React from 'react'
+import { TouchableOpacity, View, StyleSheet, ViewStyle } from 'react-native'
+import Animated, {
+  useAnimatedStyle,
+  interpolateColor,
+} from 'react-native-reanimated'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
 import { renderIcon } from '../../utils/icons'
-
-const nativeDriver = Platform.OS !== 'web'
+import { usePressScale } from '../../utils/usePressScale'
+import { useColorTransition } from '../../utils/useColorTransition'
+import { PRESS_SCALE } from '../../utils/animations'
 
 export interface ChipProps {
   label: string
   selected?: boolean
   onPress?: () => void
-  /** JSX icon rendered before the label. */
   icon?: React.ReactNode
-  /** Icon name from @expo/vector-icons resolved automatically. */
   iconName?: string
   style?: ViewStyle
+  accessibilityLabel?: string
 }
 
 export interface ChipOption {
   label: string
   value: string | number
-  /** Icon name resolved via renderIcon (Feather, AntDesign, etc.). */
   iconName?: string
-  /** Icon tint color override. */
   iconColor?: string
   disabled?: boolean
 }
@@ -41,79 +34,50 @@ export interface ChipGroupProps {
   options: ChipOption[]
   value?: string | number | (string | number)[]
   onValueChange?: (value: string | number | (string | number)[]) => void
-  /** When true, allows selecting multiple chips. `value` and `onValueChange` will use arrays. */
   multiSelect?: boolean
   style?: ViewStyle
 }
 
-export function Chip({ label, selected = false, onPress, icon, iconName, style }: ChipProps) {
+function ChipBase({ label, selected = false, onPress, icon, iconName, style, accessibilityLabel }: ChipProps) {
   const { colors } = useTheme()
-  const scale = useRef(new Animated.Value(1)).current
-  const pressAnim = useRef(new Animated.Value(selected ? 1 : 0)).current
+  const { animatedStyle: scaleStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
+    pressScale: PRESS_SCALE.chip,
+  })
+  const colorProgress = useColorTransition(selected)
 
-  useEffect(() => {
-    Animated.timing(pressAnim, {
-      toValue: selected ? 1 : 0,
-      duration: 150,
-      easing: Easing.out(Easing.ease),
-      useNativeDriver: false,
-    }).start()
-  }, [selected, pressAnim])
+  const surfaceStyle = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(colorProgress.value, [0, 1], [colors.surface, colors.primary]),
+    borderColor: interpolateColor(colorProgress.value, [0, 1], [colors.border, colors.primary]),
+  }))
 
-  const handlePressIn = () => {
-    Animated.spring(scale, {
-      toValue: 0.95,
-      useNativeDriver: nativeDriver,
-      speed: 40,
-      bounciness: 0,
-    }).start()
-  }
-
-  const handlePressOut = () => {
-    Animated.spring(scale, {
-      toValue: 1,
-      useNativeDriver: nativeDriver,
-      speed: 40,
-      bounciness: 4,
-    }).start()
-  }
+  const textStyle = useAnimatedStyle(() => ({
+    color: interpolateColor(colorProgress.value, [0, 1], [colors.foreground, colors.primaryForeground]),
+  }))
 
   const handlePress = () => {
     hapticSelection()
     onPress?.()
   }
 
-  const backgroundColor = pressAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [colors.surface, colors.primary],
-  })
-
-  const textColor = pressAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [colors.foreground, colors.primaryForeground],
-  })
-
-  const borderColor = pressAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [colors.border, colors.primary],
-  })
-
   const resolvedIcon = iconName
     ? renderIcon(iconName, ms(13), selected ? colors.primaryForeground : colors.foreground)
     : icon
 
   return (
-    <Animated.View style={[styles.wrapper, { transform: [{ scale }] }, style]}>
+    <Animated.View style={[styles.wrapper, scaleStyle, style]} {...hoverHandlers}>
       <TouchableOpacity
         onPress={handlePress}
-        onPressIn={handlePressIn}
-        onPressOut={handlePressOut}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
         activeOpacity={1}
         touchSoundDisabled={true}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel ?? label}
+        accessibilityState={{ selected }}
       >
-        <Animated.View style={[styles.chip, { backgroundColor, borderColor }]}>
+        <Animated.View style={[styles.chip, surfaceStyle]}>
           {resolvedIcon ? <View style={styles.chipIcon}>{resolvedIcon}</View> : null}
-          <Animated.Text style={[styles.label, { color: textColor }]} allowFontScaling={true}>
+          <Animated.Text style={[styles.label, textStyle]} allowFontScaling={true}>
             {label}
           </Animated.Text>
         </Animated.View>
@@ -122,33 +86,24 @@ export function Chip({ label, selected = false, onPress, icon, iconName, style }
   )
 }
 
+export const Chip = React.memo(ChipBase)
+
 export function ChipGroup({ options, value, onValueChange, multiSelect = false, style }: ChipGroupProps) {
   const handlePress = (optionValue: string | number) => {
     if (!multiSelect) {
       onValueChange?.(optionValue)
       return
     }
-
-    // Multiselect logic
     const currentArray = Array.isArray(value) ? value : value ? [value] : []
     const isSelected = currentArray.includes(optionValue)
-
-    let newArray: (string | number)[]
-    if (isSelected) {
-      // Remove from selection
-      newArray = currentArray.filter((v) => v !== optionValue)
-    } else {
-      // Add to selection
-      newArray = [...currentArray, optionValue]
-    }
-
+    const newArray: (string | number)[] = isSelected
+      ? currentArray.filter((v) => v !== optionValue)
+      : [...currentArray, optionValue]
     onValueChange?.(newArray)
   }
 
   const isSelected = (optionValue: string | number): boolean => {
-    if (Array.isArray(value)) {
-      return value.includes(optionValue)
-    }
+    if (Array.isArray(value)) return value.includes(optionValue)
     return optionValue === value
   }
 
@@ -161,7 +116,11 @@ export function ChipGroup({ options, value, onValueChange, multiSelect = false,
           selected={isSelected(opt.value)}
           onPress={opt.disabled ? undefined : () => handlePress(opt.value)}
           iconName={opt.iconName}
-          style={opt.disabled ? { opacity: 0.4 } : undefined}
+          // AUDIT FIX: was style={{ opacity: 0.4 }} with no accessibilityState.
+          // Now passes disabled state to the Chip's TouchableOpacity via onPress=undefined
+          // and adds explicit accessibility state for screen readers.
+          style={opt.disabled ? styles.chipDisabled : undefined}
+          accessibilityLabel={opt.disabled ? `${opt.label}, unavailable` : opt.label}
         />
       ))}
     </View>
@@ -173,19 +132,25 @@ const styles = StyleSheet.create({
   chip: {
     borderRadius: 999,
     paddingHorizontal: s(14),
-    paddingVertical: vs(5),
+    // AUDIT FIX: was vs(5) → ~28px total height — below WCAG 44px tap target.
+    // vs(10) → ~44px total height meets WCAG 2.5.5 (AAA) minimum.
+    paddingVertical: vs(10),
+    minHeight: 44,
     borderWidth: 1,
     alignItems: 'center',
     justifyContent: 'center',
     flexDirection: 'row',
     gap: s(5),
   },
+  chipDisabled: {
+    opacity: 0.4,
+  },
   chipIcon: {
     alignItems: 'center',
     justifyContent: 'center',
   },
   label: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(13),
     lineHeight: mvs(18),
   },

package/src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -120,12 +120,12 @@ const styles = StyleSheet.create({
     gap: vs(12),
   },
   title: {
-    fontFamily: 'Poppins-SemiBold',
+    fontFamily: 'Sohne-SemiBold',
     fontSize: ms(18),
     lineHeight: mvs(26),
   },
   description: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(15),
     lineHeight: mvs(22),
   },

package/src/components/CurrencyDisplay/CurrencyDisplay.tsx

@@ -49,7 +49,7 @@ function formatValue(value: number | string, prefix: string, showDecimals: boole
   return `${sign}${prefix}${intPart}`
 }
 
-export function CurrencyDisplay({ value, prefix = '$', showDecimals = false, textColor, variant, autoScale, maxFontSize, style }: CurrencyDisplayProps) {
+function CurrencyDisplayBase({ value, prefix = '$', showDecimals = false, textColor, variant, autoScale, maxFontSize, style }: CurrencyDisplayProps) {
   const { colors } = useTheme()
   const formatted = formatValue(value, prefix, showDecimals)
   const baseFontSize = variant ? variantFontSize[variant] : ms(56)
@@ -71,12 +71,14 @@ export function CurrencyDisplay({ value, prefix = '$', showDecimals = false, tex
   )
 }
 
+export const CurrencyDisplay = React.memo(CurrencyDisplayBase)
+
 const styles = StyleSheet.create({
   container: {
     alignSelf: 'flex-start',
   },
   amount: {
-    fontFamily: 'Poppins-Bold',
+    fontFamily: 'Sohne-Bold',
     includeFontPadding: false,
     textAlignVertical: 'top',
   },

package/src/components/CurrencyInput/CurrencyInput.tsx

@@ -59,8 +59,8 @@ export function CurrencyInput({
   }
 
   const inputStyle: TextStyle = size === 'large'
-    ? { fontFamily: 'Poppins-Regular', fontSize: ms(36) }
-    : { fontFamily: 'Poppins-Regular' }
+    ? { fontFamily: 'Sohne-Regular', fontSize: ms(36) }
+    : { fontFamily: 'Sohne-Regular' }
 
   const dollarIcon = renderIcon('dollar-sign', size === 'large' ? 24 : 16, colors.foregroundMuted)
 

package/src/components/DetailRow/DetailRow.tsx

@@ -1,17 +1,17 @@
 import React from 'react'
 import { View, Text, StyleSheet, ViewStyle, TextStyle } 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 type DetailRowSeparator = 'dotted' | 'solid' | 'dashed' | 'none'
 export type DetailRowLabelWeight = 'normal' | 'medium' | 'semibold' | 'bold'
 
 const weightMap: Record<DetailRowLabelWeight, string> = {
-  normal:   'Poppins-Regular',
-  medium:   'Poppins-Medium',
-  semibold: 'Poppins-SemiBold',
-  bold:     'Poppins-Bold',
+  normal:   'Sohne-Regular',
+  medium:   'Sohne-Medium',
+  semibold: 'Sohne-SemiBold',
+  bold:     'Sohne-Bold',
 }
 
 export interface DetailRowProps {
@@ -38,7 +38,7 @@ export interface DetailRowProps {
   valueStyle?: TextStyle
 }
 
-export function DetailRow({
+function DetailRowBase({
   label,
   value,
   separator = 'dotted',
@@ -108,6 +108,8 @@ export function DetailRow({
   )
 }
 
+export const DetailRow = React.memo(DetailRowBase)
+
 const styles = StyleSheet.create({
   row: {
     flexDirection: 'row',
@@ -138,7 +140,7 @@ const styles = StyleSheet.create({
     flexShrink: 0,
   },
   valueText: {
-    fontFamily: 'Poppins-SemiBold',
+    fontFamily: 'Sohne-SemiBold',
     fontSize: ms(13),
     lineHeight: mvs(18),
   },

package/src/components/EmptyState/EmptyState.tsx

@@ -109,7 +109,7 @@ const styles = StyleSheet.create({
     marginTop: vs(16),
   },
   title: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(18),
     textAlign: 'center',
   },
@@ -118,7 +118,7 @@ const styles = StyleSheet.create({
     marginTop: vs(10),
   },
   description: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(14),
     lineHeight: mvs(20),
     textAlign: 'center',

package/src/components/Form/Form.tsx

@@ -0,0 +1,149 @@
+import React from 'react'
+import { View, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native'
+import { useTheme } from '../../theme'
+import { s, vs } from '../../utils/scaling'
+
+export interface FormProps {
+  children: React.ReactNode
+  style?: ViewStyle
+}
+
+export interface FormFieldProps {
+  children: React.ReactNode
+  label?: string
+  error?: string
+  required?: boolean
+  style?: ViewStyle
+  labelStyle?: TextStyle
+  errorStyle?: TextStyle
+}
+
+export interface FormSectionProps {
+  children: React.ReactNode
+  title?: string
+  description?: string
+  style?: ViewStyle
+}
+
+export interface FormFooterProps {
+  children: React.ReactNode
+  style?: ViewStyle
+}
+
+/**
+ * Form wrapper with consistent spacing between fields.
+ * Use Form.Field for individual inputs with label + error,
+ * Form.Section for grouped fields, and Form.Footer for action buttons.
+ */
+export function Form({ children, style }: FormProps) {
+  return <View style={[styles.form, style]}>{children}</View>
+}
+
+/**
+ * Wraps a single form input with optional label and error message.
+ * Automatically spaces children properly.
+ */
+export function FormField({
+  children,
+  label,
+  error,
+  required,
+  style,
+  labelStyle,
+  errorStyle,
+}: FormFieldProps) {
+  const { colors } = useTheme()
+
+  return (
+    <View style={[styles.field, style]}>
+      {label ? (
+        <Text style={[styles.label, { color: colors.foreground }, labelStyle]} allowFontScaling={true}>
+          {label}
+          {required ? <Text style={{ color: colors.destructive }}> *</Text> : null}
+        </Text>
+      ) : null}
+      {children}
+      {error ? (
+        <Text style={[styles.error, { color: colors.destructive }, errorStyle]} allowFontScaling={true}>
+          {error}
+        </Text>
+      ) : null}
+    </View>
+  )
+}
+
+/**
+ * Groups related form fields with optional title and description.
+ */
+export function FormSection({ children, title, description, style }: FormSectionProps) {
+  const { colors } = useTheme()
+
+  return (
+    <View style={[styles.section, style]}>
+      {title ? (
+        <View style={styles.sectionHeader}>
+          <Text style={[styles.sectionTitle, { color: colors.foreground }]} allowFontScaling={true}>
+            {title}
+          </Text>
+          {description ? (
+            <Text style={[styles.sectionDescription, { color: colors.foregroundMuted }]} allowFontScaling={true}>
+              {description}
+            </Text>
+          ) : null}
+        </View>
+      ) : null}
+      {children}
+    </View>
+  )
+}
+
+/**
+ * Footer area for submit/cancel buttons or form actions.
+ */
+export function FormFooter({ children, style }: FormFooterProps) {
+  return <View style={[styles.footer, style]}>{children}</View>
+}
+
+Form.Field = FormField
+Form.Section = FormSection
+Form.Footer = FormFooter
+
+const styles = StyleSheet.create({
+  form: {
+    gap: vs(16),
+  },
+  field: {
+    gap: vs(6),
+  },
+  label: {
+    fontFamily: 'Sohne-Medium',
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  error: {
+    fontFamily: 'Sohne-Regular',
+    fontSize: 12,
+    lineHeight: 16,
+  },
+  section: {
+    gap: vs(16),
+  },
+  sectionHeader: {
+    gap: vs(4),
+  },
+  sectionTitle: {
+    fontFamily: 'Sohne-SemiBold',
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  sectionDescription: {
+    fontFamily: 'Sohne-Regular',
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  footer: {
+    flexDirection: 'row',
+    gap: s(12),
+    paddingTop: vs(8),
+  },
+})

package/src/components/Form/index.ts

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

package/src/components/IconButton/IconButton.tsx

@@ -1,21 +1,20 @@
-import React, { useRef } from 'react'
+import React from 'react'
 import {
   TouchableOpacity,
-  Animated,
   ActivityIndicator,
   StyleSheet,
   View,
   Text,
   TouchableOpacityProps,
   ViewStyle,
-  Platform,
 } from 'react-native'
-
-const nativeDriver = Platform.OS !== 'web'
+import Animated from 'react-native-reanimated'
 import { impactLight } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, ms } from '../../utils/scaling'
 import { renderIcon } from '../../utils/icons'
+import { usePressScale } from '../../utils/usePressScale'
+import { PRESS_SCALE } from '../../utils/animations'
 
 // primary: filled primary
 // secondary: filled surface — icon on neutral bg (Airbnb icon-button-circle)
@@ -45,7 +44,7 @@ const sizeMap: Record<IconButtonSize, { container: number; icon: number }> = {
   lg: { container: s(52), icon: 24 },
 }
 
-export function IconButton({
+function IconButtonBase({
   iconName,
   icon,
   iconColor,
@@ -56,20 +55,16 @@ export function IconButton({
   disabled,
   style,
   onPress,
+  accessibilityLabel,
+  accessibilityHint,
   ...props
 }: IconButtonProps) {
   const { colors } = useTheme()
   const isDisabled = disabled || loading
-  const scale = useRef(new Animated.Value(1)).current
-
-  const handlePressIn = () => {
-    if (isDisabled) return
-    Animated.spring(scale, { toValue: 0.95, useNativeDriver: nativeDriver, speed: 40, bounciness: 0 }).start()
-  }
-
-  const handlePressOut = () => {
-    Animated.spring(scale, { toValue: 1, useNativeDriver: nativeDriver, speed: 40, bounciness: 4 }).start()
-  }
+  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
+    pressScale: PRESS_SCALE.button,
+    disabled: isDisabled,
+  })
 
   const handlePress: TouchableOpacityProps['onPress'] = (e) => {
     impactLight()
@@ -109,7 +104,10 @@ export function IconButton({
   const showCount = typeof badge === 'number' && badge > 0
 
   return (
-    <Animated.View style={[styles.wrapper, { transform: [{ scale }] }]}>
+    <Animated.View
+      style={[styles.wrapper, animatedStyle]}
+      {...hoverHandlers}
+    >
       <TouchableOpacity
         style={[
           styles.base,
@@ -122,8 +120,12 @@ export function IconButton({
         activeOpacity={1}
         touchSoundDisabled={true}
         onPress={handlePress}
-        onPressIn={handlePressIn}
-        onPressOut={handlePressOut}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel ?? iconName ?? 'icon button'}
+        accessibilityHint={accessibilityHint}
+        accessibilityState={{ disabled: isDisabled, busy: loading }}
         {...props}
       >
         {loading ? (
@@ -149,6 +151,8 @@ export function IconButton({
   )
 }
 
+export const IconButton = React.memo(IconButtonBase)
+
 const styles = StyleSheet.create({
   wrapper: {
     alignSelf: 'flex-start',
@@ -180,7 +184,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 3,
   },
   badgeText: {
-    fontFamily: 'Poppins-Bold',
+    fontFamily: 'Sohne-Bold',
     fontSize: ms(9),
     lineHeight: 14,
   },