@retray-dev/ui-kit 6.2.0 → 9.0.0

package/src/components/Button/Button.tsx

@@ -1,30 +1,23 @@
 import React from 'react'
 import {
-  TouchableOpacity,
+  View,
   Text,
   ActivityIndicator,
   StyleSheet,
-  TouchableOpacityProps,
   ViewStyle,
   TextStyle,
 } from 'react-native'
-import Animated from 'react-native-reanimated'
 import { impactMedium } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
 import { renderIcon } from '../../utils/icons'
 import { RADIUS, TYPOGRAPHY } from '../../tokens'
-import { usePressScale } from '../../utils/usePressScale'
-import { PRESS_SCALE } from '../../utils/animations'
+import { PressableButton } from '../../utils/pressable'
 
-// primary: filled primary — main CTA (pill-shaped, Airbnb-style)
-// secondary: outlined primary border — alternative actions
-// text: fully transparent — low-emphasis, in-context actions
-// destructive: filled destructive — delete/danger actions
 export type ButtonVariant = 'primary' | 'secondary' | 'text' | 'destructive'
 export type ButtonSize = 'sm' | 'md' | 'lg'
 
-export interface ButtonProps extends TouchableOpacityProps {
+export interface ButtonProps {
   label: string
   variant?: ButtonVariant
   size?: ButtonSize
@@ -34,11 +27,16 @@ export interface ButtonProps extends TouchableOpacityProps {
   iconName?: string
   iconColor?: string
   iconPosition?: 'left' | 'right'
+  disabled?: boolean
+  style?: ViewStyle
+  onPress?: () => void
+  accessibilityLabel?: string
+  accessibilityHint?: string
 }
 
-// Airbnb-spec sizing: md=48px height, padding 14px vertical 24px horizontal
 const containerSizeStyles: Record<ButtonSize, ViewStyle> = {
-  sm: { paddingHorizontal: s(16), paddingVertical: vs(10), minHeight: 40 },
+  // AUDIT FIX: sm was 40pt — below Apple HIG 44pt minimum touch target.
+  sm: { paddingHorizontal: s(16), paddingVertical: vs(12), minHeight: 44 },
   md: { paddingHorizontal: s(24), paddingVertical: vs(14), minHeight: 48 },
   lg: { paddingHorizontal: s(28), paddingVertical: vs(16), minHeight: 56 },
 }
@@ -51,7 +49,7 @@ const labelSizeStyles: Record<ButtonSize, TextStyle> = {
 
 const iconSizeMap: Record<ButtonSize, number> = { sm: 16, md: 18, lg: 20 }
 
-export function Button({
+function ButtonBase({
   label,
   variant = 'primary',
   size = 'md',
@@ -66,18 +64,13 @@ export function Button({
   onPress,
   accessibilityLabel,
   accessibilityHint,
-  ...props
 }: ButtonProps) {
   const { colors } = useTheme()
   const isDisabled = disabled || loading
-  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
-    pressScale: PRESS_SCALE.button,
-    disabled: isDisabled,
-  })
 
-  const handlePress: TouchableOpacityProps['onPress'] = (e) => {
+  const handlePress = () => {
     impactMedium()
-    onPress?.(e)
+    onPress?.()
   }
 
   const containerVariantStyle: ViewStyle = {
@@ -90,7 +83,10 @@ export function Button({
   const labelVariantStyle: TextStyle = {
     primary:     { color: colors.primaryForeground },
     secondary:   { color: colors.primary },
-    text:        { color: colors.foreground },
+    // AUDIT FIX: was colors.foreground — visually indistinguishable from plain text,
+    // no affordance that it's a CTA. Now uses accentResolved so text-only buttons
+    // carry the brand voltage. Falls back to primary when no accent is defined.
+    text:        { color: colors.accentResolved },
     destructive: { color: colors.destructiveForeground },
   }[variant]
 
@@ -103,19 +99,15 @@ export function Button({
   const spinnerColor =
     variant === 'destructive' ? colors.destructiveForeground
     : variant === 'primary' ? colors.primaryForeground
-    : colors.foreground
+    : colors.accentResolved
 
-  // Extract flex from style for wrapper — ButtonGroup sets flex: 1
   const styleArray = Array.isArray(style) ? style : style ? [style] : []
   const flatStyle = StyleSheet.flatten(styleArray)
   const { flex, ...restStyle } = flatStyle || {}
 
   return (
-    <Animated.View
-      style={[fullWidth && styles.fullWidth, flex !== undefined && { flex }, animatedStyle]}
-      {...hoverHandlers}
-    >
-      <TouchableOpacity
+    <View style={[fullWidth && styles.fullWidth, flex !== undefined && { flex }]}>
+      <PressableButton
         style={[
           styles.base,
           containerVariantStyle,
@@ -124,17 +116,15 @@ export function Button({
           isDisabled && styles.disabled,
           restStyle,
         ]}
-        disabled={isDisabled}
-        activeOpacity={1}
-        touchSoundDisabled={true}
+        enabled={!isDisabled}
         onPress={handlePress}
-        onPressIn={onPressIn}
-        onPressOut={onPressOut}
+        rippleColor="transparent"
+        touchSoundDisabled
+        activateOnHover
         accessibilityRole="button"
         accessibilityLabel={accessibilityLabel ?? label}
         accessibilityHint={accessibilityHint}
         accessibilityState={{ disabled: isDisabled, busy: loading }}
-        {...props}
       >
         {loading ? (
           <>
@@ -160,14 +150,16 @@ export function Button({
             {effectiveIcon && iconPosition === 'right' && <>{effectiveIcon}</>}
           </>
         )}
-      </TouchableOpacity>
-    </Animated.View>
+      </PressableButton>
+    </View>
   )
 }
 
+export const Button = React.memo(ButtonBase)
+
 const styles = StyleSheet.create({
   base: {
-    borderRadius: RADIUS.md,   // 14px — Airbnb-aligned rounded rect (not pill)
+    borderRadius: RADIUS.md,
     alignItems: 'center',
     justifyContent: 'center',
     flexDirection: 'row',
@@ -179,7 +171,7 @@ const styles = StyleSheet.create({
     opacity: 0.45,
   },
   label: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     flexShrink: 1,
   },
   labelWithIcon: {

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -33,16 +33,19 @@ export function ButtonGroup({ children, gap = 12, vertical = false, style }: But
         style,
       ]}
     >
-      {React.Children.map(children, (child) =>
-        React.isValidElement(child)
-          ? React.cloneElement(child as React.ReactElement<any>, {
-              style: [
-                (child as React.ReactElement<any>).props.style,
-                { flex: 1 },
-              ],
-            })
-          : child,
-      )}
+      {React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) return child
+        const childProps = child.props as Record<string, unknown>
+        const extraProps: Record<string, unknown> = {
+          style: [(child as React.ReactElement<{ style?: unknown }>).props.style, { flex: 1 }],
+        }
+        // Horizontal ButtonGroup: default Button children to sm size to prevent
+        // oversized layout. Only applies when consumer hasn't explicitly set size.
+        if (!vertical && 'label' in childProps && childProps['size'] === undefined) {
+          extraProps['size'] = 'sm'
+        }
+        return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, extraProps)
+      })}
     </View>
   )
 }

package/src/components/Card/Card.tsx

@@ -1,59 +1,29 @@
 import React from 'react'
-import { View, Text, TouchableOpacity, StyleSheet, ViewStyle, TextStyle } from 'react-native'
-import Animated from 'react-native-reanimated'
+import { View, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native'
 import { impactLight } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
 import { RADIUS } from '../../tokens'
-import { usePressScale } from '../../utils/usePressScale'
-import { SPRINGS, PRESS_SCALE } from '../../utils/animations'
+import { PressableCard } from '../../utils/pressable'
 
 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
-  /** Accessibility label for the card (when interactive). */
   accessibilityLabel?: string
 }
 
-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 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 function Card({ children, variant = 'elevated', onPress, style, accessibilityLabel }: CardProps) {
   const { colors } = useTheme()
-  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
-    pressScale: PRESS_SCALE.card,
-    pressInSpring: SPRINGS.surfacePressIn,
-    pressOutSpring: SPRINGS.surfacePressOut,
-    disabled: !onPress,
-  })
 
   const handlePress = () => {
     if (!onPress) return
@@ -64,11 +34,14 @@ export function Card({ children, variant = 'elevated', onPress, style, accessibi
   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: {
@@ -93,19 +66,16 @@ export function Card({ children, variant = 'elevated', onPress, style, accessibi
 
   if (onPress) {
     return (
-      <Animated.View style={animatedStyle} {...hoverHandlers}>
-        <TouchableOpacity
-          onPress={handlePress}
-          onPressIn={onPressIn}
-          onPressOut={onPressOut}
-          activeOpacity={1}
-          touchSoundDisabled={true}
-          accessibilityRole="button"
-          accessibilityLabel={accessibilityLabel}
-        >
-          {cardContent}
-        </TouchableOpacity>
-      </Animated.View>
+      <PressableCard
+        onPress={handlePress}
+        rippleColor="transparent"
+        touchSoundDisabled
+        activateOnHover
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel}
+      >
+        {cardContent}
+      </PressableCard>
     )
   }
 
@@ -124,7 +94,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>
   )
 }
 
@@ -147,12 +117,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,4 +1,4 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import {
   ScrollView,
   TouchableOpacity,
@@ -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 {
@@ -42,30 +39,19 @@ export interface CategoryStripProps {
   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 { 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 =
@@ -76,7 +62,7 @@ function CategoryChip({
   return (
     <Animated.View style={scaleStyle} {...hoverHandlers}>
       <TouchableOpacity
-        onPress={onPress}
+        onPress={() => onSelect(item.value)}
         onPressIn={onPressIn}
         onPressOut={onPressOut}
         activeOpacity={1}
@@ -85,11 +71,21 @@ 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,11 +93,11 @@ function CategoryChip({
               </Text>
             </View>
           )}
-        </Animated.View>
+        </EaseView>
       </TouchableOpacity>
     </Animated.View>
   )
-}
+})
 
 export function CategoryStrip({
   categories,
@@ -114,18 +110,21 @@ export function CategoryStrip({
 }: 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
@@ -141,7 +140,7 @@ export function CategoryStrip({
           <CategoryChip
             item={cat}
             selected={selected.includes(cat.value)}
-            onPress={() => handlePress(cat.value)}
+            onSelect={handlePress}
           />
         </View>
       ))}
@@ -173,7 +172,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   chipLabel: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(13),
   },
   chipBadge: {
@@ -185,7 +184,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,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,55 +25,47 @@ 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 (
-    <TouchableOpacity
-      style={[styles.row, style]}
-      onPress={() => {
-        hapticSelection()
-        onCheckedChange?.(!checked)
-      }}
-      onPressIn={onPressIn}
-      onPressOut={onPressOut}
-      disabled={disabled}
-      activeOpacity={1}
-      touchSoundDisabled={true}
+    // 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.
+    <PressableButton
+      style={[styles.row, disabled && styles.rowDisabled, style]}
+      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, { opacity: disabled ? 0.45 : 1 }, 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: disabled ? colors.foregroundMuted : colors.foreground }]}
+          style={[styles.label, { color: colors.foreground }]}
           allowFontScaling={true}
         >
           {label}
         </Text>
       ) : null}
-    </TouchableOpacity>
+    </PressableButton>
   )
 }
 
@@ -88,6 +75,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),
@@ -104,7 +95,7 @@ const styles = StyleSheet.create({
     transform: [{ rotate: '-45deg' }, { translateY: -1 }],
   },
   label: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(14),
     lineHeight: mvs(20),
   },