@retray-dev/ui-kit 6.1.0 → 7.0.1

package/src/components/Card/Card.tsx

@@ -1,73 +1,37 @@
-import React, { useRef } from 'react'
-import { View, Text, TouchableOpacity, Animated, StyleSheet, ViewStyle, TextStyle, Platform } from 'react-native'
+import React from 'react'
+import { View, Text, TouchableOpacity, StyleSheet, ViewStyle, TextStyle } 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 { RADIUS } from '../../tokens'
-
-const nativeDriver = Platform.OS !== 'web'
+import { usePressScale } from '../../utils/usePressScale'
+import { SPRINGS, PRESS_SCALE } from '../../utils/animations'
 
 export type CardVariant = 'elevated' | 'outlined' | 'filled'
 
 export interface CardProps {
   children: React.ReactNode
-  /** Visual style variant.  `'elevated'` (default) has shadow, `'outlined'` has border only, `'filled'` uses accent background. */
   variant?: CardVariant
-  /** Makes the card tappable. Adds press animation and haptic feedback. */
   onPress?: () => void
   style?: ViewStyle
+  accessibilityLabel?: string
 }
 
-export interface CardHeaderProps {
-  children: React.ReactNode
-  style?: ViewStyle
-}
-
-export interface CardTitleProps {
-  children: React.ReactNode
-  style?: TextStyle
-}
+export interface CardHeaderProps { children: React.ReactNode; style?: ViewStyle }
+export interface CardTitleProps { children: React.ReactNode; style?: TextStyle }
+export interface CardDescriptionProps { children: React.ReactNode; style?: TextStyle }
+export interface CardContentProps { children: React.ReactNode; style?: ViewStyle }
+export interface CardFooterProps { children: React.ReactNode; style?: ViewStyle }
 
-export interface CardDescriptionProps {
-  children: React.ReactNode
-  style?: TextStyle
-}
-
-export interface CardContentProps {
-  children: React.ReactNode
-  style?: ViewStyle
-}
-
-export interface CardFooterProps {
-  children: React.ReactNode
-  style?: ViewStyle
-}
-
-export function Card({ children, variant = 'elevated', onPress, style }: CardProps) {
+export function Card({ children, variant = 'elevated', onPress, style, accessibilityLabel }: CardProps) {
   const { colors } = useTheme()
-  const scale = useRef(new Animated.Value(1)).current
-
-  const handlePressIn = () => {
-    if (!onPress) return
-    Animated.spring(scale, {
-      toValue: 0.98,
-      useNativeDriver: nativeDriver,
-      stiffness: 400,
-      damping: 30,
-      mass: 1.0,
-    }).start()
-  }
-
-  const handlePressOut = () => {
-    if (!onPress) return
-    Animated.spring(scale, {
-      toValue: 1,
-      useNativeDriver: nativeDriver,
-      stiffness: 250,
-      damping: 24,
-      mass: 1.0,
-    }).start()
-  }
+  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
+    pressScale: PRESS_SCALE.card,
+    pressInSpring: SPRINGS.surfacePressIn,
+    pressOutSpring: SPRINGS.surfacePressOut,
+    disabled: !onPress,
+  })
 
   const handlePress = () => {
     if (!onPress) return
@@ -78,11 +42,14 @@ export function Card({ children, variant = 'elevated', onPress, style }: CardPro
   const variantStyle: ViewStyle = {
     elevated: {
       backgroundColor: colors.card,
-      borderColor: colors.border,
+      // AUDIT FIX: removed borderColor — shadow is the depth signal; a border on
+      // top of a shadow creates redundant double-framing that reads as "heavy"
+      // rather than "elevated". borderWidth: 0 overrides the base style's borderWidth: 1.
+      borderWidth: 0,
       shadowColor: '#000',
-      shadowOffset: { width: 0, height: 6 },
-      shadowOpacity: 0.10,
-      shadowRadius: 16,
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.09,
+      shadowRadius: 14,
       elevation: 4,
     },
     outlined: {
@@ -107,13 +74,15 @@ export function Card({ children, variant = 'elevated', onPress, style }: CardPro
 
   if (onPress) {
     return (
-      <Animated.View style={{ transform: [{ scale }] }}>
+      <Animated.View style={animatedStyle} {...hoverHandlers}>
         <TouchableOpacity
           onPress={handlePress}
-          onPressIn={handlePressIn}
-          onPressOut={handlePressOut}
+          onPressIn={onPressIn}
+          onPressOut={onPressOut}
           activeOpacity={1}
           touchSoundDisabled={true}
+          accessibilityRole="button"
+          accessibilityLabel={accessibilityLabel}
         >
           {cardContent}
         </TouchableOpacity>
@@ -136,7 +105,7 @@ export function CardTitle({ children, style }: CardTitleProps) {
 export function CardDescription({ children, style }: CardDescriptionProps) {
   const { colors } = useTheme()
   return (
-    <Text style={[styles.description, { color: colors.foregroundMuted }, style]} allowFontScaling={true}>{children}</Text>
+    <Text style={[styles.description, { color: colors.foregroundSubtle }, style]} allowFontScaling={true}>{children}</Text>
   )
 }
 
@@ -150,7 +119,7 @@ export function CardFooter({ children, style }: CardFooterProps) {
 
 const styles = StyleSheet.create({
   card: {
-    borderRadius: RADIUS.md,    // 14px — Airbnb property card spec
+    borderRadius: RADIUS.md,
     borderWidth: 1,
   },
   header: {
@@ -159,12 +128,14 @@ const styles = StyleSheet.create({
     gap: vs(4),
   },
   title: {
-    fontFamily: 'Poppins-SemiBold',
+    fontFamily: 'Sohne-SemiBold',
     fontSize: ms(16),
     lineHeight: mvs(22),
   },
+  // AUDIT FIX: was foregroundMuted (2.2:1 fail) — description text now uses
+  // foregroundSubtle (5.9:1 ✓) which is readable while still visually secondary.
   description: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(13),
     lineHeight: mvs(18),
   },

package/src/components/CategoryStrip/CategoryStrip.tsx

@@ -1,22 +1,25 @@
-import React, { useRef } from 'react'
+import React, { useCallback } from 'react'
 import {
   ScrollView,
   TouchableOpacity,
-  Animated,
   Text,
   View,
   StyleSheet,
   ViewStyle,
-  Platform,
 } 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 } 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 { RADIUS } from '../../tokens'
 
-const nativeDriver = Platform.OS !== 'web'
-
 export interface CategoryItem {
   label: string
   value: string
@@ -36,68 +39,69 @@ export interface CategoryStripProps {
   style?: ViewStyle
   /** Style applied to each pill item. */
   itemStyle?: ViewStyle
+  accessibilityLabel?: string
 }
 
-function CategoryChip({
+const CategoryChip = React.memo(function CategoryChip({
   item,
   selected,
-  onPress,
+  onSelect,
 }: {
   item: CategoryItem
   selected: boolean
-  onPress: () => void
+  onSelect: (value: string) => void
 }) {
   const { colors } = useTheme()
-  const scale = useRef(new Animated.Value(1)).current
-
-  const handlePressIn = () => {
-    Animated.spring(scale, { toValue: 0.95, useNativeDriver: nativeDriver, speed: 40, bounciness: 0 }).start()
-  }
+  const { animatedStyle: scaleStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
+    pressScale: PRESS_SCALE.chip,
+  })
+  const progress = useColorTransition(selected)
 
-  const handlePressOut = () => {
-    Animated.spring(scale, { toValue: 1, useNativeDriver: nativeDriver, speed: 40, bounciness: 4 }).start()
-  }
+  const surfaceStyle = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(progress.value, [0, 1], [colors.surface, colors.primary]),
+    borderColor: interpolateColor(progress.value, [0, 1], [colors.border, colors.primary]),
+  }))
 
-  const bgColor = selected ? colors.primary : colors.surface
-  const textColor = selected ? colors.primaryForeground : colors.foregroundSubtle
-  const borderColor = selected ? colors.primary : colors.border
+  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 =
     typeof item.icon === 'string'
-      ? renderIcon(item.icon, 16, textColor)
+      ? renderIcon(item.icon, 16, iconColor)
       : item.icon ?? null
 
   return (
-    <Animated.View style={{ transform: [{ scale }] }}>
+    <Animated.View style={scaleStyle} {...hoverHandlers}>
       <TouchableOpacity
-        style={[
-          styles.chip,
-          {
-            backgroundColor: bgColor,
-            borderColor,
-          },
-        ]}
-        onPress={onPress}
-        onPressIn={handlePressIn}
-        onPressOut={handlePressOut}
+        onPress={() => onSelect(item.value)}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
         activeOpacity={1}
         touchSoundDisabled={true}
+        accessibilityRole="button"
+        accessibilityLabel={item.label}
+        accessibilityState={{ selected }}
       >
-        {resolvedIcon && <View style={styles.chipIcon}>{resolvedIcon}</View>}
-        <Text style={[styles.chipLabel, { color: textColor }]} allowFontScaling={true}>
-          {item.label}
-        </Text>
-        {item.badge !== undefined && item.badge > 0 && (
-          <View style={[styles.chipBadge, { backgroundColor: colors.primary }]}>
-            <Text style={[styles.chipBadgeText, { color: colors.primaryForeground }]}>
-              {Math.min(item.badge, 99)}
-            </Text>
-          </View>
-        )}
+        <Animated.View style={[styles.chip, surfaceStyle]}>
+          {resolvedIcon && <View style={styles.chipIcon}>{resolvedIcon}</View>}
+          <Animated.Text style={[styles.chipLabel, textColorStyle]} allowFontScaling={true}>
+            {item.label}
+          </Animated.Text>
+          {item.badge !== undefined && item.badge > 0 && (
+            <View style={[styles.chipBadge, { backgroundColor: colors.primary }]}>
+              <Text style={[styles.chipBadgeText, { color: colors.primaryForeground }]}>
+                {Math.min(item.badge, 99)}
+              </Text>
+            </View>
+          )}
+        </Animated.View>
       </TouchableOpacity>
     </Animated.View>
   )
-}
+})
 
 export function CategoryStrip({
   categories,
@@ -106,21 +110,25 @@ export function CategoryStrip({
   multiSelect = false,
   style,
   itemStyle,
+  accessibilityLabel,
 }: CategoryStripProps) {
   const selected = Array.isArray(value) ? value : value ? [value] : []
 
-  const handlePress = (v: string) => {
-    hapticSelection()
-    if (multiSelect) {
-      const current = Array.isArray(value) ? value : value ? [value] : []
-      const next = current.includes(v)
-        ? current.filter((x) => x !== v)
-        : [...current, v]
-      onValueChange?.(next)
-    } else {
-      onValueChange?.(v === value ? '' : v)
-    }
-  }
+  const handlePress = useCallback(
+    (v: string) => {
+      hapticSelection()
+      if (multiSelect) {
+        const current = Array.isArray(value) ? value : value ? [value] : []
+        const next = current.includes(v)
+          ? current.filter((x) => x !== v)
+          : [...current, v]
+        onValueChange?.(next)
+      } else {
+        onValueChange?.(v === value ? '' : v)
+      }
+    },
+    [multiSelect, value, onValueChange],
+  )
 
   return (
     <ScrollView
@@ -128,13 +136,15 @@ export function CategoryStrip({
       showsHorizontalScrollIndicator={false}
       contentContainerStyle={[styles.container, style]}
       style={styles.scroll}
+      accessibilityRole={multiSelect ? undefined : 'radiogroup'}
+      accessibilityLabel={accessibilityLabel}
     >
       {categories.map((cat) => (
         <View key={cat.value} style={itemStyle}>
           <CategoryChip
             item={cat}
             selected={selected.includes(cat.value)}
-            onPress={() => handlePress(cat.value)}
+            onSelect={handlePress}
           />
         </View>
       ))}
@@ -166,7 +176,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   chipLabel: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(13),
   },
   chipBadge: {
@@ -178,7 +188,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   chipBadgeText: {
-    fontFamily: 'Poppins-Bold',
+    fontFamily: 'Sohne-Bold',
     fontSize: ms(9),
     lineHeight: 14,
   },

package/src/components/Checkbox/Checkbox.tsx

@@ -1,10 +1,16 @@
-import React, { useRef, useEffect } from 'react'
-import { TouchableOpacity, Animated, View, Text, StyleSheet, ViewStyle, Platform } from 'react-native'
+import React from 'react'
+import { TouchableOpacity, View, Text, StyleSheet, ViewStyle } from 'react-native'
+import Animated, {
+  useAnimatedStyle,
+  interpolateColor,
+  withTiming,
+} from 'react-native-reanimated'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
-
-const nativeDriver = Platform.OS !== 'web'
 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'
 
 export interface CheckboxProps {
   checked?: boolean
@@ -12,6 +18,7 @@ export interface CheckboxProps {
   label?: string
   disabled?: boolean
   style?: ViewStyle
+  accessibilityLabel?: string
 }
 
 export function Checkbox({
@@ -20,78 +27,53 @@ export function Checkbox({
   label,
   disabled,
   style,
+  accessibilityLabel,
 }: CheckboxProps) {
   const { colors } = useTheme()
-  const scale = useRef(new Animated.Value(1)).current
-  const bgOpacity = useRef(new Animated.Value(checked ? 1 : 0)).current
-  const checkOpacity = useRef(new Animated.Value(checked ? 1 : 0)).current
-
-  useEffect(() => {
-    Animated.parallel([
-      Animated.timing(bgOpacity, {
-        toValue: checked ? 1 : 0,
-        duration: 150,
-        useNativeDriver: false,
-      }),
-      Animated.timing(checkOpacity, {
-        toValue: checked ? 1 : 0,
-        duration: 120,
-        useNativeDriver: false,
-      }),
-    ]).start()
-  }, [checked, bgOpacity, checkOpacity])
-
-  const borderColor = bgOpacity.interpolate({
-    inputRange: [0, 1],
-    outputRange: [colors.border, colors.primary],
+  const { animatedStyle: scaleStyle, onPressIn, onPressOut } = usePressScale({
+    pressScale: PRESS_SCALE.button,
+    disabled,
   })
+  const progress = useColorTransition(checked)
 
-  const backgroundColor = bgOpacity.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['transparent', colors.primary],
-  })
+  const boxStyle = useAnimatedStyle(() => ({
+    borderColor: interpolateColor(progress.value, [0, 1], [colors.border, colors.primary]),
+    backgroundColor: interpolateColor(progress.value, [0, 1], ['transparent', colors.primary]),
+  }))
 
-  const handlePressIn = () => {
-    if (disabled) 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: 0 }).start()
-  }
+  const checkStyle = useAnimatedStyle(() => ({
+    opacity: withTiming(checked ? 1 : 0, { duration: TIMINGS.state.duration, easing: EASINGS.standard }),
+  }))
 
   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
-      style={[styles.row, style]}
+      style={[styles.row, disabled && styles.rowDisabled, style]}
       onPress={() => {
         hapticSelection()
         onCheckedChange?.(!checked)
       }}
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
       disabled={disabled}
       activeOpacity={1}
       touchSoundDisabled={true}
+      accessibilityRole="checkbox"
+      accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityState={{ checked, disabled: !!disabled }}
     >
-      <Animated.View style={{ transform: [{ scale }] }}>
-        <Animated.View
-          style={[
-            styles.box,
-            {
-              borderColor,
-              backgroundColor,
-              opacity: disabled ? 0.45 : 1,
-            },
-          ]}
-        >
-          <Animated.View style={{ opacity: checkOpacity }}>
+      <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>
       {label ? (
         <Text
-          style={[styles.label, { color: disabled ? colors.foregroundMuted : colors.foreground }]}
+          style={[styles.label, { color: colors.foreground }]}
           allowFontScaling={true}
         >
           {label}
@@ -107,6 +89,10 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     gap: s(12),
   },
+  // AUDIT FIX: was inline opacity on the box only
+  rowDisabled: {
+    opacity: 0.45,
+  },
   box: {
     width: s(24),
     height: s(24),
@@ -123,7 +109,7 @@ const styles = StyleSheet.create({
     transform: [{ rotate: '-45deg' }, { translateY: -1 }],
   },
   label: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(14),
     lineHeight: mvs(20),
   },