@retray-dev/ui-kit 7.0.1 → 9.1.0

package/src/components/CategoryStrip/CategoryStrip.tsx

@@ -7,17 +7,14 @@ import {
   StyleSheet,
   ViewStyle,
 } from 'react-native'
-import Animated, {
-  useAnimatedStyle,
-  interpolateColor,
-} from 'react-native-reanimated'
+import Animated from 'react-native-reanimated'
+import { EaseView } from 'react-native-ease'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms } 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, PRESS_SCALE } from '../../utils/animations'
 import { RADIUS } from '../../tokens'
 
 export interface CategoryItem {
@@ -55,17 +52,6 @@ const CategoryChip = React.memo(function CategoryChip({
   const { animatedStyle: scaleStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
     pressScale: PRESS_SCALE.chip,
   })
-  const progress = useColorTransition(selected)
-
-  const surfaceStyle = useAnimatedStyle(() => ({
-    backgroundColor: interpolateColor(progress.value, [0, 1], [colors.surface, colors.primary]),
-    borderColor: interpolateColor(progress.value, [0, 1], [colors.border, colors.primary]),
-  }))
-
-  const textColorStyle = useAnimatedStyle(() => ({
-    color: interpolateColor(progress.value, [0, 1], [colors.foregroundSubtle, colors.primaryForeground]),
-  }))
-
   // Static color for icon — icon families take a static color prop, not animated.
   const iconColor = selected ? colors.primaryForeground : colors.foregroundSubtle
   const resolvedIcon =
@@ -85,11 +71,21 @@ const CategoryChip = React.memo(function CategoryChip({
         accessibilityLabel={item.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>}
-          <Animated.Text style={[styles.chipLabel, textColorStyle]} allowFontScaling={true}>
+          <Text
+            style={[styles.chipLabel, { color: selected ? colors.primaryForeground : colors.foregroundSubtle }]}
+            allowFontScaling={true}
+          >
             {item.label}
-          </Animated.Text>
+          </Text>
           {item.badge !== undefined && item.badge > 0 && (
             <View style={[styles.chipBadge, { backgroundColor: colors.primary }]}>
               <Text style={[styles.chipBadgeText, { color: colors.primaryForeground }]}>
@@ -97,7 +93,7 @@ const CategoryChip = React.memo(function CategoryChip({
               </Text>
             </View>
           )}
-        </Animated.View>
+        </EaseView>
       </TouchableOpacity>
     </Animated.View>
   )

package/src/components/Checkbox/Checkbox.tsx

@@ -1,16 +1,11 @@
 import React from 'react'
-import { TouchableOpacity, View, Text, StyleSheet, ViewStyle } from 'react-native'
-import Animated, {
-  useAnimatedStyle,
-  interpolateColor,
-  withTiming,
-} 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 { usePressScale } from '../../utils/usePressScale'
-import { useColorTransition } from '../../utils/useColorTransition'
-import { PRESS_SCALE, TIMINGS, EASINGS } from '../../utils/animations'
+import { COLOR_TRANSITION, OPACITY_TRANSITION } from '../../utils/animations'
+import { PressableButton } from '../../utils/pressable'
 
 export interface CheckboxProps {
   checked?: boolean
@@ -30,47 +25,38 @@ export function Checkbox({
   accessibilityLabel,
 }: CheckboxProps) {
   const { colors } = useTheme()
-  const { animatedStyle: scaleStyle, onPressIn, onPressOut } = usePressScale({
-    pressScale: PRESS_SCALE.button,
-    disabled,
-  })
-  const progress = useColorTransition(checked)
 
-  const boxStyle = useAnimatedStyle(() => ({
-    borderColor: interpolateColor(progress.value, [0, 1], [colors.border, colors.primary]),
-    backgroundColor: interpolateColor(progress.value, [0, 1], ['transparent', colors.primary]),
-  }))
-
-  const checkStyle = useAnimatedStyle(() => ({
-    opacity: withTiming(checked ? 1 : 0, { duration: TIMINGS.state.duration, easing: EASINGS.standard }),
-  }))
+  const handlePress = () => {
+    hapticSelection()
+    onCheckedChange?.(!checked)
+  }
 
   return (
     // AUDIT FIX: opacity was applied only to the box, leaving the label at full
     // opacity when disabled — a contradictory visual signal. Now the entire row
     // dims uniformly so label and control communicate the same disabled state.
-    <TouchableOpacity
+    <PressableButton
       style={[styles.row, disabled && styles.rowDisabled, style]}
-      onPress={() => {
-        hapticSelection()
-        onCheckedChange?.(!checked)
-      }}
-      onPressIn={onPressIn}
-      onPressOut={onPressOut}
-      disabled={disabled}
-      activeOpacity={1}
-      touchSoundDisabled={true}
+      onPress={handlePress}
+      enabled={!disabled}
+      rippleColor="transparent"
+      touchSoundDisabled
       accessibilityRole="checkbox"
       accessibilityLabel={accessibilityLabel ?? label}
       accessibilityState={{ checked, disabled: !!disabled }}
     >
-      <Animated.View style={scaleStyle}>
-        <Animated.View style={[styles.box, boxStyle]}>
-          <Animated.View style={checkStyle}>
-            <View style={[styles.checkmark, { borderColor: colors.primaryForeground }]} />
-          </Animated.View>
-        </Animated.View>
-      </Animated.View>
+      <EaseView
+        style={styles.box}
+        animate={{
+          borderColor: checked ? colors.primary : colors.border,
+          backgroundColor: checked ? colors.primary : 'transparent',
+        }}
+        transition={COLOR_TRANSITION}
+      >
+        <EaseView animate={{ opacity: checked ? 1 : 0 }} transition={OPACITY_TRANSITION}>
+          <View style={[styles.checkmark, { borderColor: colors.primaryForeground }]} />
+        </EaseView>
+      </EaseView>
       {label ? (
         <Text
           style={[styles.label, { color: colors.foreground }]}
@@ -79,7 +65,7 @@ export function Checkbox({
           {label}
         </Text>
       ) : null}
-    </TouchableOpacity>
+    </PressableButton>
   )
 }
 

package/src/components/Chip/Chip.tsx

@@ -1,16 +1,12 @@
 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
@@ -40,19 +36,6 @@ export interface ChipGroupProps {
 
 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()
@@ -64,25 +47,33 @@ function ChipBase({ label, selected = false, onPress, icon, iconName, style, acc
     : 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>
   )
 }
 

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'
+  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/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),
@@ -125,7 +127,6 @@ const styles = StyleSheet.create({
   },
   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'