@retray-dev/ui-kit 6.2.0 → 9.0.0

package/src/components/Chip/Chip.tsx

@@ -1,24 +1,18 @@
 import React from 'react'
-import { TouchableOpacity, View, StyleSheet, ViewStyle } from 'react-native'
-import Animated, {
-  useAnimatedStyle,
-  interpolateColor,
-} from 'react-native-reanimated'
+import { View, Text, StyleSheet, ViewStyle } from 'react-native'
+import { EaseView } from 'react-native-ease'
 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 { usePressScale } from '../../utils/usePressScale'
-import { useColorTransition } from '../../utils/useColorTransition'
-import { PRESS_SCALE } from '../../utils/animations'
+import { COLOR_TRANSITION } from '../../utils/animations'
+import { PressableChip as PressableChipComponent } from '../../utils/pressable'
 
 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
@@ -27,9 +21,7 @@ export interface ChipProps {
 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
 }
@@ -38,26 +30,12 @@ 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, accessibilityLabel }: ChipProps) {
+function ChipBase({ label, selected = false, onPress, icon, iconName, style, accessibilityLabel }: ChipProps) {
   const { colors } = useTheme()
-  const { animatedStyle: scaleStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
-    pressScale: PRESS_SCALE.chip,
-  })
-  const colorProgress = useColorTransition(selected)
-
-  const surfaceStyle = useAnimatedStyle(() => ({
-    backgroundColor: interpolateColor(colorProgress.value, [0, 1], [colors.surface, colors.primary]),
-    borderColor: interpolateColor(colorProgress.value, [0, 1], [colors.border, colors.primary]),
-  }))
-
-  const textStyle = useAnimatedStyle(() => ({
-    color: interpolateColor(colorProgress.value, [0, 1], [colors.foreground, colors.primaryForeground]),
-  }))
 
   const handlePress = () => {
     hapticSelection()
@@ -69,49 +47,54 @@ export function Chip({ label, selected = false, onPress, icon, iconName, style,
     : icon
 
   return (
-    <Animated.View style={[styles.wrapper, scaleStyle, style]} {...hoverHandlers}>
-      <TouchableOpacity
+    <View style={[styles.wrapper, style]}>
+      <PressableChipComponent
         onPress={handlePress}
-        onPressIn={onPressIn}
-        onPressOut={onPressOut}
-        activeOpacity={1}
-        touchSoundDisabled={true}
+        rippleColor="transparent"
+        touchSoundDisabled
         accessibilityRole="button"
         accessibilityLabel={accessibilityLabel ?? label}
         accessibilityState={{ selected }}
       >
-        <Animated.View style={[styles.chip, surfaceStyle]}>
+        <EaseView
+          style={styles.chip}
+          animate={{
+            backgroundColor: selected ? colors.primary : colors.surface,
+            borderColor: selected ? colors.primary : colors.border,
+          }}
+          transition={COLOR_TRANSITION}
+        >
           {resolvedIcon ? <View style={styles.chipIcon}>{resolvedIcon}</View> : null}
-          <Animated.Text style={[styles.label, textStyle]} allowFontScaling={true}>
+          <Text
+            style={[styles.label, { color: selected ? colors.primaryForeground : colors.foreground }]}
+            allowFontScaling={true}
+          >
             {label}
-          </Animated.Text>
-        </Animated.View>
-      </TouchableOpacity>
-    </Animated.View>
+          </Text>
+        </EaseView>
+      </PressableChipComponent>
+    </View>
   )
 }
 
+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
     }
-
     const currentArray = Array.isArray(value) ? value : value ? [value] : []
     const isSelected = currentArray.includes(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
   }
 
@@ -124,7 +107,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>
@@ -136,19 +123,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

@@ -2,15 +2,13 @@ import React from 'react'
 import { ViewStyle, TextStyle } from 'react-native'
 import { Input } from '../Input'
 import { ms, vs } from '../../utils/scaling'
-import { renderIcon } from '../../utils/icons'
-import { useTheme } from '../../theme'
 
 export interface CurrencyInputProps {
   value?: string
   onChangeText?: (formatted: string) => void
   /** Called with the parsed numeric value (no separators, no prefix). */
   onChangeValue?: (raw: number) => void
-  /** Symbol prepended to the formatted value. Defaults to `'$'`. */
+  /** Currency symbol shown left of the value. Any string (`'$'`, `'€'`, `'£'`, `'COP '`). Defaults to `'$'`. */
   prefix?: string
   /** Character used to separate groups of three digits. Defaults to `'.'`. */
   thousandsSeparator?: '.' | ','
@@ -47,7 +45,6 @@ export function CurrencyInput({
   containerStyle,
   style,
 }: CurrencyInputProps) {
-  const { colors } = useTheme()
   const handleChange = (text: string) => {
     const withoutPrefix = prefix && text.startsWith(prefix) ? text.slice(prefix.length) : text
     const formatted = formatCurrency(withoutPrefix, thousandsSeparator)
@@ -58,11 +55,15 @@ export function CurrencyInput({
     onChangeValue?.(isNaN(raw) ? 0 : raw)
   }
 
-  const inputStyle: TextStyle = size === 'large'
-    ? { fontFamily: 'Poppins-Regular', fontSize: ms(36) }
-    : { fontFamily: 'Poppins-Regular' }
+  const isLarge = size === 'large'
+  const inputStyle: TextStyle = isLarge
+    ? { fontFamily: 'Sohne-Regular', fontSize: ms(36) }
+    : { fontFamily: 'Sohne-Regular' }
 
-  const dollarIcon = renderIcon('dollar-sign', size === 'large' ? 24 : 16, colors.foregroundMuted)
+  const prefixStyle: TextStyle = {
+    fontFamily: 'Sohne-Regular',
+    fontSize: isLarge ? ms(32) : ms(17),
+  }
 
   // Remove prefix from display value if present
   const displayValue = value && prefix && value.startsWith(prefix) ? value.slice(prefix.length) : value
@@ -77,9 +78,10 @@ export function CurrencyInput({
       hint={hint}
       placeholder={placeholder ?? '0'}
       editable={editable}
-      prefix={dollarIcon}
+      prefix={prefix}
+      prefixStyle={prefixStyle}
       containerStyle={containerStyle}
-      inputWrapperStyle={size === 'large' ? { paddingVertical: vs(16), minHeight: 72 } : undefined}
+      inputWrapperStyle={isLarge ? { paddingVertical: vs(16), minHeight: 72 } : undefined}
       style={[inputStyle, style]}
     />
   )

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

@@ -84,8 +84,10 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderStyle: 'dashed',
     borderRadius: ms(12),
+    paddingBottom: vs(32),
   },
   containerCompact: {
+    paddingBottom: vs(20),
   },
   iconWrapper: {
     width: s(80),
@@ -109,7 +111,7 @@ const styles = StyleSheet.create({
     marginTop: vs(16),
   },
   title: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(18),
     textAlign: 'center',
   },
@@ -118,14 +120,13 @@ const styles = StyleSheet.create({
     marginTop: vs(10),
   },
   description: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(14),
     lineHeight: mvs(20),
     textAlign: 'center',
   },
   action: {
     marginTop: vs(8),
-    marginBottom: s(32),
     paddingHorizontal: s(32),
   },
 })

package/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,153 @@
+import React from 'react'
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
+import { useTheme } from '../../theme'
+import { renderIcon } from '../../utils/icons'
+import { s, vs, ms, mvs } from '../../utils/scaling'
+import { RADIUS } from '../../tokens'
+import { impactLight } from '../../utils/haptics'
+
+export interface ErrorFallbackProps {
+  error: Error
+  /** Reset the boundary and attempt to re-render children. */
+  reset: () => void
+}
+
+export interface ErrorBoundaryProps {
+  children: React.ReactNode
+  /**
+   * Custom fallback. Either a React node, or a render function receiving the
+   * caught error and a `reset` callback. Defaults to a themed error card.
+   */
+  fallback?: React.ReactNode | ((props: ErrorFallbackProps) => React.ReactNode)
+  /** Title shown by the default fallback. */
+  title?: string
+  /** Body message shown by the default fallback. */
+  message?: string
+  /** Called whenever an error is caught — wire your crash reporter here. */
+  onError?: (error: Error, info: React.ErrorInfo) => void
+}
+
+interface ErrorBoundaryState {
+  error: Error | null
+}
+
+/** Default themed fallback — uses `useTheme`, so it must be a component (not inline). */
+function DefaultErrorFallback({
+  error,
+  reset,
+  title = 'Something went wrong',
+  message,
+}: ErrorFallbackProps & { title?: string; message?: string }) {
+  const { colors } = useTheme()
+  return (
+    <View style={[styles.container, { backgroundColor: colors.background }]} accessibilityRole="alert">
+      <View style={[styles.iconCircle, { backgroundColor: colors.destructiveTint }]}>
+        {renderIcon('alert-triangle', ms(28), colors.destructive)}
+      </View>
+      <Text style={[styles.title, { color: colors.foreground }]} allowFontScaling={true}>
+        {title}
+      </Text>
+      <Text style={[styles.message, { color: colors.foregroundMuted }]} allowFontScaling={true}>
+        {message ?? error.message ?? 'An unexpected error occurred.'}
+      </Text>
+      <TouchableOpacity
+        style={[styles.button, { backgroundColor: colors.primary }]}
+        onPress={() => {
+          impactLight()
+          reset()
+        }}
+        activeOpacity={0.85}
+        touchSoundDisabled={true}
+        accessibilityRole="button"
+        accessibilityLabel="Try again"
+      >
+        <Text style={[styles.buttonLabel, { color: colors.primaryForeground }]} allowFontScaling={true}>
+          Try again
+        </Text>
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+/**
+ * Catches render-time errors in its subtree and shows a themed fallback instead
+ * of unmounting the whole app. Wrap screens or risky subtrees.
+ *
+ * @example
+ * <ErrorBoundary onError={reportCrash}>
+ *   <DocumentViewer />
+ * </ErrorBoundary>
+ */
+export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  state: ErrorBoundaryState = { error: null }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { error }
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    this.props.onError?.(error, info)
+  }
+
+  reset = () => {
+    this.setState({ error: null })
+  }
+
+  render() {
+    const { error } = this.state
+    if (error) {
+      const { fallback, title, message } = this.props
+      if (typeof fallback === 'function') {
+        return fallback({ error, reset: this.reset })
+      }
+      if (fallback !== undefined) {
+        return fallback
+      }
+      return <DefaultErrorFallback error={error} reset={this.reset} title={title} message={message} />
+    }
+    return this.props.children
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: s(32),
+    gap: vs(12),
+  },
+  iconCircle: {
+    width: s(64),
+    height: s(64),
+    borderRadius: RADIUS.full,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: vs(4),
+  },
+  title: {
+    fontFamily: 'Sohne-SemiBold',
+    fontSize: ms(18),
+    lineHeight: mvs(24),
+    textAlign: 'center',
+  },
+  message: {
+    fontFamily: 'Sohne-Regular',
+    fontSize: ms(14),
+    lineHeight: mvs(20),
+    textAlign: 'center',
+  },
+  button: {
+    marginTop: vs(8),
+    paddingHorizontal: s(20),
+    paddingVertical: vs(10),
+    borderRadius: RADIUS.md,
+    minHeight: vs(44),
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonLabel: {
+    fontFamily: 'Sohne-Medium',
+    fontSize: ms(15),
+  },
+})

package/src/components/ErrorBoundary/index.ts

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

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'