@retray-dev/ui-kit 6.1.0 → 7.0.1

package/src/components/Switch/Switch.tsx

@@ -1,66 +1,77 @@
-import React, { useEffect, useRef } from 'react'
-import { TouchableOpacity, Animated, StyleSheet, ViewStyle, Platform, View } from 'react-native'
+import React, { useEffect } from 'react'
+import { TouchableOpacity, StyleSheet, ViewStyle, View } from 'react-native'
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+  withTiming,
+  interpolateColor,
+} from 'react-native-reanimated'
 import { Feather } from '@expo/vector-icons'
-
-const nativeDriver = Platform.OS !== 'web'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s } from '../../utils/scaling'
+import { SPRINGS, TIMINGS, EASINGS } from '../../utils/animations'
 
-const TRACK_WIDTH = s(52)
+const TRACK_WIDTH  = s(52)
 const TRACK_HEIGHT = s(30)
-const THUMB_SIZE = s(24)
+const THUMB_SIZE   = s(24)
 const THUMB_OFFSET = s(3)
 const THUMB_TRAVEL = TRACK_WIDTH - THUMB_SIZE - THUMB_OFFSET * 2
+const ICON_SIZE    = s(13)
 
 export interface SwitchProps {
   checked?: boolean
   onCheckedChange?: (checked: boolean) => void
   disabled?: boolean
   style?: ViewStyle
+  accessibilityLabel?: string
 }
 
-const ICON_SIZE = s(13)
-
-export function Switch({ checked = false, onCheckedChange, disabled, style }: SwitchProps) {
+export function Switch({ checked = false, onCheckedChange, disabled, style, accessibilityLabel }: SwitchProps) {
   const { colors } = useTheme()
-  const translateX = useRef(new Animated.Value(checked ? THUMB_TRAVEL : 0)).current
-  const trackOpacity = useRef(new Animated.Value(checked ? 1 : 0)).current
-  const checkOpacity = useRef(new Animated.Value(checked ? 1 : 0)).current
-  const crossOpacity = useRef(new Animated.Value(checked ? 0 : 1)).current
+
+  const progress = useSharedValue(checked ? 1 : 0)
 
   useEffect(() => {
-    Animated.parallel([
-      Animated.spring(translateX, {
-        toValue: checked ? THUMB_TRAVEL : 0,
-        useNativeDriver: nativeDriver,
-        bounciness: 4,
-      }),
-      Animated.timing(trackOpacity, {
-        toValue: checked ? 1 : 0,
-        duration: 150,
-        useNativeDriver: false,
-      }),
-      Animated.timing(checkOpacity, {
-        toValue: checked ? 1 : 0,
-        duration: 120,
-        useNativeDriver: true,
-      }),
-      Animated.timing(crossOpacity, {
-        toValue: checked ? 0 : 1,
-        duration: 120,
-        useNativeDriver: true,
-      }),
-    ]).start()
-  }, [checked, translateX, trackOpacity, checkOpacity, crossOpacity])
+    progress.value = withSpring(checked ? 1 : 0, SPRINGS.elastic)
+  }, [checked, progress])
+
+  const thumbStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: progress.value * THUMB_TRAVEL }],
+  }))
+
+  const trackStyle = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(
+      progress.value,
+      [0, 1],
+      [colors.surfaceStrong, colors.primary],
+    ),
+  }))
+
+  // AUDIT FIX: the off-state track used surfaceStrong (~#ebebeb in light mode)
+  // with no border — nearly invisible on white page/card surfaces. A 1.5px border
+  // that fades out as the track fills gives the off state clear visual definition
+  // without adding visual weight to the on state.
+  const trackBorderStyle = useAnimatedStyle(() => ({
+    borderWidth: 1.5,
+    borderColor: interpolateColor(
+      progress.value,
+      [0, 1],
+      [colors.border, 'transparent'],
+    ),
+  }))
 
-  const trackColor = trackOpacity.interpolate({
-    inputRange: [0, 1],
-    outputRange: [colors.surface, colors.primary],
-  })
+  const checkIconStyle = useAnimatedStyle(() => ({
+    opacity: withTiming(checked ? 1 : 0, { duration: TIMINGS.state.duration, easing: EASINGS.standard }),
+  }))
+
+  const crossIconStyle = useAnimatedStyle(() => ({
+    opacity: withTiming(checked ? 0 : 1, { duration: TIMINGS.state.duration, easing: EASINGS.standard }),
+  }))
 
   return (
-    <View style={[{ opacity: disabled ? 0.45 : 1 }, style]}>
+    <View style={[{ opacity: disabled ? 0.45 : 1, alignSelf: 'flex-start' }, style]}>
       <TouchableOpacity
         onPress={() => {
           hapticSelection()
@@ -69,19 +80,20 @@ export function Switch({ checked = false, onCheckedChange, disabled, style }: Sw
         disabled={disabled}
         activeOpacity={0.8}
         touchSoundDisabled={true}
-        style={styles.wrapper}
+        accessibilityRole="switch"
+        accessibilityLabel={accessibilityLabel}
+        accessibilityState={{ checked, disabled: !!disabled }}
+        style={styles.touchable}
       >
-        <Animated.View style={[styles.track, { backgroundColor: trackColor }]}>
+        <Animated.View style={[styles.track, trackStyle]}>
+          <Animated.View style={[styles.trackBorder, trackBorderStyle]} pointerEvents="none" />
           <Animated.View
-            style={[
-              styles.thumb,
-              { backgroundColor: colors.primaryForeground, transform: [{ translateX }] },
-            ]}
+            style={[styles.thumb, { backgroundColor: colors.primaryForeground }, thumbStyle]}
           >
-            <Animated.View style={[styles.iconWrapper, { opacity: checkOpacity }]}>
+            <Animated.View style={[styles.iconWrapper, checkIconStyle]}>
               <Feather name="check" size={ICON_SIZE} color={colors.primary} />
             </Animated.View>
-            <Animated.View style={[styles.iconWrapper, { opacity: crossOpacity }]}>
+            <Animated.View style={[styles.iconWrapper, crossIconStyle]}>
               <Feather name="x" size={ICON_SIZE} color={colors.foregroundMuted} />
             </Animated.View>
           </Animated.View>
@@ -92,13 +104,17 @@ export function Switch({ checked = false, onCheckedChange, disabled, style }: Sw
 }
 
 const styles = StyleSheet.create({
-  wrapper: {},
+  touchable: {
+    alignSelf: 'flex-start',
+  },
   track: {
     width: TRACK_WIDTH,
     height: TRACK_HEIGHT,
     borderRadius: TRACK_HEIGHT / 2,
-    // No justifyContent/alignItems — thumb uses absolute positioning
-    // so the track's flex layout doesn't interfere with translateX animation
+  },
+  trackBorder: {
+    ...StyleSheet.absoluteFillObject,
+    borderRadius: TRACK_HEIGHT / 2,
   },
   thumb: {
     position: 'absolute',
@@ -117,5 +133,7 @@ const styles = StyleSheet.create({
   },
   iconWrapper: {
     position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center',
   },
 })

package/src/components/Tabs/Tabs.tsx

@@ -1,10 +1,15 @@
-import React, { useState, useRef, useEffect } from 'react'
-import { View, TouchableOpacity, Text, Animated, StyleSheet, ViewStyle, Platform } from 'react-native'
+import React, { useState, useRef, useEffect, useCallback } from 'react'
+import { View, TouchableOpacity, Text, StyleSheet, ViewStyle, LayoutChangeEvent } from 'react-native'
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+} from 'react-native-reanimated'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
-
-const nativeDriver = Platform.OS !== 'web'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
+import { usePressScale } from '../../utils/usePressScale'
+import { SPRINGS, PRESS_SCALE } from '../../utils/animations'
 
 export interface TabItem {
   label: string
@@ -12,8 +17,6 @@ export interface TabItem {
   icon?: React.ReactNode | ((active: boolean) => React.ReactNode)
 }
 
-// pill: animated sliding pill background (default)
-// underline: 2px bottom border on active tab — Airbnb product-tab style
 export type TabsVariant = 'pill' | 'underline'
 
 export interface TabsProps {
@@ -42,20 +45,13 @@ function TabTrigger({
   tab: TabItem
   isActive: boolean
   onPress: () => void
-  onLayout: (e: any) => void
+  onLayout: (e: LayoutChangeEvent) => void
   variant: TabsVariant
 }) {
   const { colors } = useTheme()
-  const scale = useRef(new Animated.Value(1)).current
-
-  const handlePressIn = () => {
-    Animated.spring(scale, { toValue: 0.95, useNativeDriver: nativeDriver, stiffness: 600, damping: 35, mass: 0.8 }).start()
-  }
-
-  const handlePressOut = () => {
-    Animated.spring(scale, { toValue: 1, useNativeDriver: nativeDriver, stiffness: 280, damping: 22, mass: 0.8 }).start()
-  }
-
+  const { animatedStyle, onPressIn, onPressOut } = usePressScale({
+    pressScale: PRESS_SCALE.button,
+  })
   const isUnderline = variant === 'underline'
 
   return (
@@ -66,22 +62,28 @@ function TabTrigger({
         isUnderline && isActive && { borderBottomColor: colors.primary },
       ]}
       onPress={onPress}
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
       onLayout={onLayout}
       activeOpacity={1}
       touchSoundDisabled={true}
+      accessibilityRole="tab"
+      accessibilityState={{ selected: isActive }}
+      accessibilityLabel={tab.label}
     >
-      <Animated.View style={{ transform: [{ scale }] }}>
+      <Animated.View style={animatedStyle}>
         <View style={styles.triggerInner}>
           {tab.icon ? (
-            (typeof tab.icon === 'function' ? (tab.icon as any)(isActive) : tab.icon) as React.ReactNode
+            typeof tab.icon === 'function' ? tab.icon(isActive) : tab.icon
           ) : null}
           <Text
             style={[
               styles.triggerLabel,
+              // AUDIT FIX: active state now only changes color, never font metrics.
+              // Previously: inactive=Regular, active=Medium (pill) or SemiBold+fontSize14 (underline)
+              // The weight/size change caused measurable layout reflow every tab switch.
+              // Solution: all labels render at SemiBold always; active = foreground, inactive = foregroundMuted.
               { color: isActive ? colors.foreground : colors.foregroundMuted },
-              isActive && (isUnderline ? styles.activeTriggerLabelUnderline : styles.activeTriggerLabel),
             ]}
             allowFontScaling={true}
           >
@@ -99,27 +101,27 @@ export function Tabs({ tabs, variant = 'pill', value, onValueChange, children, s
   const active = value ?? internal
 
   const tabLayouts = useRef<Record<string, { x: number; width: number }>>({})
-  const pillX = useRef(new Animated.Value(0)).current
-  const pillWidth = useRef(new Animated.Value(0)).current
+  const pillX = useSharedValue(0)
+  const pillWidth = useSharedValue(0)
   const initialised = useRef(false)
 
-  const animatePill = (tabValue: string, animate: boolean) => {
+  const animatePill = useCallback((tabValue: string, animate: boolean) => {
     const layout = tabLayouts.current[tabValue]
     if (!layout) return
     if (animate) {
-      Animated.parallel([
-        Animated.spring(pillX, { toValue: layout.x, useNativeDriver: false, stiffness: 380, damping: 38, mass: 1.0 }),
-        Animated.spring(pillWidth, { toValue: layout.width, useNativeDriver: false, stiffness: 380, damping: 38, mass: 1.0 }),
-      ]).start()
+      // eslint-disable-next-line react-hooks/immutability
+      pillX.value = withSpring(layout.x, SPRINGS.glide)
+      // eslint-disable-next-line react-hooks/immutability
+      pillWidth.value = withSpring(layout.width, SPRINGS.glide)
     } else {
-      pillX.setValue(layout.x)
-      pillWidth.setValue(layout.width)
+      pillX.value = layout.x
+      pillWidth.value = layout.width
     }
-  }
+  }, [pillX, pillWidth])
 
   useEffect(() => {
     if (initialised.current) animatePill(active, true)
-  }, [active])
+  }, [active, animatePill])
 
   const handlePress = (v: string) => {
     hapticSelection()
@@ -127,11 +129,21 @@ export function Tabs({ tabs, variant = 'pill', value, onValueChange, children, s
     onValueChange?.(v)
   }
 
+  const pillAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: pillX.value }],
+    width: pillWidth.value,
+  }))
+
   return (
     <View style={style}>
-      <View style={[
-        variant === 'pill' ? [styles.list, { backgroundColor: colors.surface }] : styles.listUnderline,
-      ]}>
+      <View
+        style={[
+          variant === 'pill'
+            ? [styles.list, { backgroundColor: colors.surface }]
+            : styles.listUnderline,
+        ]}
+        accessibilityRole="tablist"
+      >
         {variant === 'pill' && (
           <Animated.View
             style={[
@@ -141,8 +153,7 @@ export function Tabs({ tabs, variant = 'pill', value, onValueChange, children, s
                 position: 'absolute',
                 top: 4,
                 bottom: 4,
-                left: pillX,
-                width: pillWidth,
+                left: 0,
                 borderRadius: 8,
                 shadowColor: '#000',
                 shadowOffset: { width: 0, height: 1 },
@@ -150,6 +161,7 @@ export function Tabs({ tabs, variant = 'pill', value, onValueChange, children, s
                 shadowRadius: 2,
                 elevation: 2,
               },
+              pillAnimatedStyle,
             ]}
           />
         )}
@@ -178,7 +190,7 @@ export function Tabs({ tabs, variant = 'pill', value, onValueChange, children, s
 
 export function TabsContent({ value, activeValue, children, style }: TabsContentProps) {
   if (value !== activeValue) return null
-  return <View style={style}>{children}</View>
+  return <View style={style} accessibilityRole="none">{children}</View>
 }
 
 const styles = StyleSheet.create({
@@ -190,6 +202,8 @@ const styles = StyleSheet.create({
   },
   listUnderline: {
     flexDirection: 'row',
+    // AUDIT FIX: was missing borderBottomColor — the 1px hairline would render
+    // as transparent on some platforms. Explicit token reference ensures visibility.
     borderBottomWidth: 1,
   },
   pill: {},
@@ -216,15 +230,13 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     gap: s(4),
   },
+  // AUDIT FIX: was Sohne-Regular at rest, Sohne-Medium/SemiBold when active.
+  // Font-weight changes at runtime cause advance-width shifts → the tab bar would
+  // visibly jump/reflow on every selection. Now always SemiBold; active state
+  // is communicated by color alone (foreground vs foregroundMuted). The pill
+  // indicator provides additional active signal without text layout side-effects.
   triggerLabel: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-SemiBold',
     fontSize: ms(13),
   },
-  activeTriggerLabel: {
-    fontFamily: 'Poppins-Medium',
-  },
-  activeTriggerLabelUnderline: {
-    fontFamily: 'Poppins-SemiBold',
-    fontSize: ms(14),
-  },
 })

package/src/components/Text/Text.tsx

@@ -67,7 +67,7 @@ const defaultColorVariant: Partial<Record<TextVariant, 'foreground' | 'foregroun
   'button-sm':    'foreground',
 }
 
-export function Text({ variant = 'body-md', color, style, children, ...props }: TextProps) {
+function TextBase({ variant = 'body-md', color, style, children, ...props }: TextProps) {
   const { colors } = useTheme()
 
   const colorKey = defaultColorVariant[variant] ?? 'foreground'
@@ -83,3 +83,5 @@ export function Text({ variant = 'body-md', color, style, children, ...props }:
     </RNText>
   )
 }
+
+export const Text = React.memo(TextBase)

package/src/components/Textarea/Textarea.tsx

@@ -1,29 +1,29 @@
 import React, { useState } from 'react'
 import { TextInput, View, Text, StyleSheet, TextInputProps, ViewStyle, Platform } from 'react-native'
+import Animated, {
+  useAnimatedStyle,
+  interpolateColor,
+  interpolate,
+} from 'react-native-reanimated'
 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 =
+const webInputResetStyle: Record<string, unknown> =
   Platform.OS === 'web'
     ? { outlineStyle: 'none', outlineWidth: 0, outlineColor: 'transparent', boxShadow: 'none' }
     : {}
 
 export interface TextareaProps extends TextInputProps {
   label?: string
-  /** Red helper text below the textarea; also changes border to `destructive` color. Takes priority over `hint`. */
   error?: string
-  /** Helper text shown below the textarea when there is no error. */
   hint?: string
-  /** Number of visible text rows. Defaults to `4`. Controls `numberOfLines` and `minHeight`. */
   rows?: number
-  /** Icon name from @expo/vector-icons rendered inside top-left corner. */
   prefixIcon?: string
-  /** Custom icon node rendered top-left. */
   prefixIconNode?: React.ReactNode
-  /** Override prefix icon color. Defaults to foregroundMuted. */
   prefixIconColor?: string
-  /** Style for the outer container `View`. Use `style` (from `TextInputProps`) to style the `TextInput` itself. */
   containerStyle?: ViewStyle
 }
 
@@ -39,31 +39,40 @@ export function Textarea({
   style,
   onFocus,
   onBlur,
+  accessibilityLabel,
   ...props
 }: TextareaProps) {
   const { colors } = useTheme()
   const [focused, setFocused] = useState(false)
+  const focusProgress = useColorTransition(focused, {
+    duration: focused ? TIMINGS.focusIn.duration : TIMINGS.focusOut.duration,
+  })
 
   const resolvedPrefixIcon = prefixIcon
     ? renderIcon(prefixIcon, ms(16), prefixIconColor ?? colors.foregroundMuted)
     : prefixIconNode
 
+  // Border drawn on an absolute overlay (mirrors Input.tsx) so the 1px→2px
+  // focus weight change never resizes the box / reflows content.
+  const borderAnimStyle = useAnimatedStyle(() => ({
+    borderColor: error
+      ? colors.destructive
+      : interpolateColor(focusProgress.value, [0, 1], [colors.border, colors.primary]),
+    borderWidth: error
+      ? 2
+      : interpolate(focusProgress.value, [0, 1], [1, 2]),
+  }))
+
   return (
     <View style={[styles.container, containerStyle]}>
       {label ? <Text style={[styles.label, { color: colors.foreground }]} allowFontScaling={true}>{label}</Text> : null}
-      <View
+      <Animated.View
         style={[
           styles.inputWrapper,
-          {
-            borderColor: error
-              ? colors.destructive
-              : focused
-                ? (colors.ring ?? colors.primary)
-                : colors.border,
-            backgroundColor: colors.background,
-          },
+          { backgroundColor: colors.background },
         ]}
       >
+        <Animated.View style={[styles.borderOverlay, borderAnimStyle]} pointerEvents="none" />
         {resolvedPrefixIcon ? <View style={styles.prefixIcon}>{resolvedPrefixIcon}</View> : null}
         <TextInput
           multiline
@@ -88,11 +97,18 @@ export function Textarea({
           }}
           placeholderTextColor={colors.foregroundMuted}
           allowFontScaling={true}
+          accessibilityLabel={accessibilityLabel ?? label}
           {...props}
         />
-      </View>
+      </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>
@@ -106,32 +122,37 @@ const styles = StyleSheet.create({
     gap: vs(4),
   },
   label: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(13),
     lineHeight: vs(18),
     marginBottom: vs(2),
   },
   inputWrapper: {
-    borderWidth: 1,
+    // Border lives on borderOverlay (absolute); wrapper carries none so the
+    // focus weight change never reflows content.
     borderRadius: 8,
     paddingHorizontal: s(14),
     paddingVertical: vs(11),
     gap: s(8),
   },
+  borderOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    borderRadius: 8,
+  },
   prefixIcon: {
     alignItems: 'flex-start',
     justifyContent: 'flex-start',
     paddingTop: vs(2),
   },
   input: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(14),
     lineHeight: vs(22),
     padding: 0,
     margin: 0,
   },
   helperText: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(12),
     lineHeight: vs(16),
     marginTop: vs(4),

package/src/components/Toast/Toast.tsx

@@ -4,10 +4,8 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
 
-// Direct function API — no hook required
 export { sonnerToast as toast }
 
-// useToast — backward-compat wrapper
 export function useToast() {
   return {
     toast: sonnerToast,
@@ -15,7 +13,6 @@ export function useToast() {
   }
 }
 
-// ToastProvider — wraps children + renders the Toaster
 export function ToastProvider({ children }: { children: React.ReactNode }) {
   const { colorScheme } = useTheme()
   const insets = useSafeAreaInsets()
@@ -26,7 +23,10 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
       <Toaster
         theme={colorScheme}
         position="top-center"
-        richColors={false}
+        // AUDIT FIX: was richColors={false} — all semantic variants (error, success,
+        // warning) were visually identical. richColors={true} restores correct
+        // semantic coloring so users immediately recognise severity from colour alone.
+        richColors={true}
         gap={vs(8)}
         offset={insets.top + vs(8)}
         visibleToasts={3}
@@ -40,11 +40,11 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
             paddingVertical: vs(10),
           },
           titleStyle: {
-            fontFamily: 'Poppins-Medium',
+            fontFamily: 'Sohne-Medium',
             fontSize: ms(13),
           },
           descriptionStyle: {
-            fontFamily: 'Poppins-Regular',
+            fontFamily: 'Sohne-Regular',
             fontSize: ms(12),
             opacity: 0.85,
           },