@retray-dev/ui-kit 6.1.0 → 6.2.0

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)
@@ -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 ? (

package/src/components/Input/Input.tsx

@@ -1,9 +1,15 @@
-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,
+} 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 =
   Platform.OS === 'web'
@@ -48,11 +54,15 @@ export interface InputProps extends TextInputProps {
   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
+
+  // Asymmetric durations — focus snaps in, blurs out subtly. Runs on UI thread.
+  const focusProgress = useColorTransition(focused, {
+    duration: focused ? TIMINGS.focusIn.duration : TIMINGS.focusOut.duration,
+  })
 
   const isDisabled = disabled || editable === false
   const isPassword = type === 'password'
@@ -62,30 +72,34 @@ 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)}
+      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
 
+  const borderColorStyle = useAnimatedStyle(() => ({
+    borderColor: error
+      ? colors.destructive
+      : interpolateColor(focusProgress.value, [0, 1], [colors.border, colors.primary]),
+  }))
+
   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 },
+          borderColorStyle,
           inputWrapperStyle,
         ]}
       >
@@ -101,26 +115,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 +145,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>
@@ -152,7 +169,7 @@ const styles = StyleSheet.create({
   },
   label: {
     fontFamily: 'Poppins-Medium',
-    fontSize: ms(14),           // caption size for input labels
+    fontSize: ms(14),
   },
   inputWrapper: {
     flexDirection: 'row',

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,6 +77,8 @@ 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({
@@ -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,7 +210,7 @@ export function ListItem({
         <View
           style={[
             styles.separator,
-            { 
+            {
               backgroundColor: colors.border,
               marginLeft: effectiveLeft ? s(44) + s(12) : 0
             },
@@ -275,9 +266,6 @@ const styles = StyleSheet.create({
     fontFamily: 'Poppins-Regular',
     fontSize: ms(14),
   },
-  chevron: {
-    marginLeft: s(4),
-  },
   separator: {
     height: StyleSheet.hairlineWidth,
     marginRight: 0,

package/src/components/MediaCard/MediaCard.tsx

@@ -1,24 +1,24 @@
-import React, { useRef, useState } from 'react'
+import React from 'react'
 import {
   View,
   Image,
   Text,
   TouchableOpacity,
-  Animated,
   StyleSheet,
   ViewStyle,
   ImageSourcePropType,
   Platform,
 } from 'react-native'
+import Animated from 'react-native-reanimated'
 import { impactLight } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
 import { renderIcon } from '../../utils/icons'
 import { useHover } from '../../utils/hover'
+import { usePressScale } from '../../utils/usePressScale'
+import { SPRINGS, PRESS_SCALE } from '../../utils/animations'
 import { RADIUS, SHADOWS } from '../../tokens'
 
-const nativeDriver = Platform.OS !== 'web'
-
 export type MediaCardAspectRatio = '1:1' | '4:3' | '16:9' | '4:5' | '3:2'
 
 const aspectRatioMap: Record<MediaCardAspectRatio, number> = {
@@ -57,6 +57,8 @@ export interface MediaCardProps {
   imageStyle?: ViewStyle
   /** Additional content rendered below caption. */
   footer?: React.ReactNode
+  /** Accessibility label override. Defaults to title (and subtitle if present). */
+  accessibilityLabel?: string
 }
 
 export function MediaCard({
@@ -74,20 +76,16 @@ export function MediaCard({
   style,
   imageStyle,
   footer,
+  accessibilityLabel,
 }: MediaCardProps) {
   const { colors } = useTheme()
-  const scale = useRef(new Animated.Value(1)).current
   const { hovered, hoverHandlers } = useHover()
-
-  const handlePressIn = () => {
-    if (!onPress) return
-    Animated.spring(scale, { toValue: 0.98, useNativeDriver: nativeDriver, speed: 40, bounciness: 0 }).start()
-  }
-
-  const handlePressOut = () => {
-    if (!onPress) return
-    Animated.spring(scale, { toValue: 1, useNativeDriver: nativeDriver, speed: 40, bounciness: 4 }).start()
-  }
+  const { animatedStyle, onPressIn, onPressOut } = usePressScale({
+    pressScale: PRESS_SCALE.card,
+    pressInSpring: SPRINGS.surfacePressIn,
+    pressOutSpring: SPRINGS.surfacePressOut,
+    disabled: !onPress,
+  })
 
   const handlePress = () => {
     if (!onPress) return
@@ -102,6 +100,8 @@ export function MediaCard({
     ? renderIcon(actionIconName, 18, actionActive ? colors.primary : colors.background)
     : actionIcon ?? renderIcon('heart', 18, actionActive ? colors.primary : colors.background)
 
+  const a11yLabel = accessibilityLabel ?? [title, subtitle].filter(Boolean).join('. ')
+
   const cardContent = (
     <View
       style={[
@@ -111,7 +111,6 @@ export function MediaCard({
       ]}
       {...(Platform.OS === 'web' ? hoverHandlers : {})}
     >
-      {/* Image area */}
       <View style={[styles.imageContainer, imageStyle]}>
         <View style={{ paddingTop: `${ratio * 100}%` as any }}>
           <View style={StyleSheet.absoluteFill}>
@@ -127,27 +126,27 @@ export function MediaCard({
           </View>
         </View>
 
-        {/* Badge — top left */}
         {badge && (
           <View style={styles.badgeContainer}>
             {badge}
           </View>
         )}
 
-        {/* Action icon — top right */}
         {(onActionPress || actionIcon || actionIconName) && (
           <TouchableOpacity
             style={[styles.actionButton, { backgroundColor: 'rgba(0,0,0,0.24)' }]}
             onPress={() => { impactLight(); onActionPress?.() }}
             activeOpacity={0.8}
             touchSoundDisabled={true}
+            accessibilityRole="button"
+            accessibilityLabel={actionIconName ?? 'action'}
+            accessibilityState={{ selected: actionActive }}
           >
             {resolvedActionIcon}
           </TouchableOpacity>
         )}
       </View>
 
-      {/* Metadata */}
       {(title || subtitle || caption || footer) && (
         <View style={styles.meta}>
           {title ? (
@@ -173,13 +172,15 @@ export function MediaCard({
 
   if (onPress) {
     return (
-      <Animated.View style={{ transform: [{ scale }] }}>
+      <Animated.View style={animatedStyle}>
         <TouchableOpacity
           onPress={handlePress}
-          onPressIn={handlePressIn}
-          onPressOut={handlePressOut}
+          onPressIn={onPressIn}
+          onPressOut={onPressOut}
           activeOpacity={1}
           touchSoundDisabled={true}
+          accessibilityRole="button"
+          accessibilityLabel={a11yLabel}
         >
           {cardContent}
         </TouchableOpacity>
@@ -192,12 +193,11 @@ export function MediaCard({
 
 const styles = StyleSheet.create({
   card: {
-    borderRadius: RADIUS.md,    // 14px — Airbnb property card spec
+    borderRadius: RADIUS.md,
     overflow: 'hidden',
     backgroundColor: 'transparent',
   },
   cardHovered: {
-    // Web hover: lift shadow
     ...SHADOWS.md,
   },
   imageContainer: {

package/src/components/MenuItem/MenuItem.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 } 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 MenuItemVariant = 'plain' | 'card'
 
@@ -57,6 +56,8 @@ export interface MenuItemProps {
   style?: ViewStyle
   /** Style applied to the label Text. */
   labelStyle?: TextStyle
+  /** Accessibility label override. Defaults to label. */
+  accessibilityLabel?: string
 }
 
 export function MenuItem({
@@ -73,30 +74,15 @@ export function MenuItem({
   showSeparator = false,
   style,
   labelStyle,
+  accessibilityLabel,
 }: MenuItemProps) {
   const { colors } = useTheme()
-  const scale = useRef(new Animated.Value(1)).current
-
-  const handlePressIn = () => {
-    if (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,
+  })
 
   const handlePress = () => {
     hapticSelection()
@@ -122,16 +108,21 @@ export function MenuItem({
         }
       : {}
 
+  const a11yLabel = accessibilityLabel ?? (subtitle ? `${label}. ${subtitle}` : label)
+
   return (
-    <Animated.View style={[{ transform: [{ scale }] }, disabled && styles.disabled]}>
+    <Animated.View style={[animatedStyle, disabled && styles.disabled]} {...hoverHandlers}>
       <TouchableOpacity
         style={[styles.container, cardStyle, style]}
         onPress={handlePress}
-        onPressIn={handlePressIn}
-        onPressOut={handlePressOut}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
         disabled={disabled}
         activeOpacity={1}
         touchSoundDisabled={true}
+        accessibilityRole="button"
+        accessibilityLabel={a11yLabel}
+        accessibilityState={{ disabled }}
       >
         {resolvedIcon ? (
           <View style={styles.iconContainer}>{resolvedIcon}</View>
@@ -157,7 +148,7 @@ export function MenuItem({
         </View>
 
         {rightRender !== undefined ? (
-          <View 
+          <View
             style={styles.rightContainer}
             onStartShouldSetResponder={() => true}
             onResponderRelease={() => {}}

package/src/components/MonthPicker/MonthPicker.tsx

@@ -56,16 +56,23 @@ export function MonthPicker({ value, onChange, locale = 'en', formatLabel, style
   }
 
   return (
-    <View style={[styles.container, style]}>
+    <View style={[styles.container, style]} accessibilityRole="adjustable" accessibilityLabel={getLabel()}>
       <TouchableOpacity
         style={styles.arrow}
         onPress={handlePrev}
         activeOpacity={0.6}
         touchSoundDisabled={true}
+        accessibilityRole="button"
+        accessibilityLabel="Previous month"
+        hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
       >
         <Entypo name="chevron-left" size={22} color={colors.foreground} />
       </TouchableOpacity>
-      <Text style={[styles.label, { color: colors.foreground }]} allowFontScaling={true}>
+      <Text
+        style={[styles.label, { color: colors.foreground }]}
+        allowFontScaling={true}
+        accessibilityLiveRegion="polite"
+      >
         {getLabel()}
       </Text>
       <TouchableOpacity
@@ -73,6 +80,9 @@ export function MonthPicker({ value, onChange, locale = 'en', formatLabel, style
         onPress={handleNext}
         activeOpacity={0.6}
         touchSoundDisabled={true}
+        accessibilityRole="button"
+        accessibilityLabel="Next month"
+        hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
       >
         <Entypo name="chevron-right" size={22} color={colors.foreground} />
       </TouchableOpacity>