@retray-dev/ui-kit 6.0.0 → 6.2.0

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>

package/src/components/Pressable/Pressable.tsx

@@ -1,15 +1,9 @@
-import React, { useRef } from 'react'
-import {
-  TouchableOpacity,
-  Animated,
-  ViewStyle,
-  Platform,
-  TouchableOpacityProps,
-} from 'react-native'
+import React from 'react'
+import { TouchableOpacity, Platform, ViewStyle, TouchableOpacityProps } from 'react-native'
+import Animated from 'react-native-reanimated'
 import { impactLight } from '../../utils/haptics'
-import { useHover } from '../../utils/hover'
-
-const nativeDriver = Platform.OS !== 'web'
+import { usePressScale } from '../../utils/usePressScale'
+import { PRESS_SCALE, SPRINGS } from '../../utils/animations'
 
 export interface PressableProps extends Omit<TouchableOpacityProps, 'activeOpacity'> {
   /** Children content to render inside the pressable. */
@@ -18,7 +12,10 @@ export interface PressableProps extends Omit<TouchableOpacityProps, 'activeOpaci
   onPress?: () => void
   /** Scale value on press. Defaults to `0.98` (MediaCard-style). */
   pressScale?: number
-  /** Bounciness of the spring animation on release. Defaults to `4`. */
+  /**
+   * @deprecated Use Reanimated spring config via `pressOutSpring` instead. Ignored.
+   * Kept for backwards compatibility with v6.x consumers.
+   */
   bounciness?: number
   /** Enable haptic feedback on press. Defaults to `true`. */
   haptics?: boolean
@@ -31,42 +28,29 @@ export interface PressableProps extends Omit<TouchableOpacityProps, 'activeOpaci
 }
 
 /**
- * Generic pressable with beautiful spring bounce effect matching MediaCard interaction.
- * Use for custom pressable content that needs consistent press feel.
+ * Generic pressable with a calibrated spring bounce — Apple HIG / Airbnb feel.
+ * All animation runs on the UI thread via Reanimated v4 worklets.
+ *
+ * Use this for any custom pressable surface that needs consistent press feel
+ * (cards, list rows, image tiles, etc).
  */
 export function Pressable({
   children,
   onPress,
-  pressScale = 0.98,
-  bounciness = 4,
+  pressScale = PRESS_SCALE.card,
   haptics = true,
   style,
   disabled,
   hoverScale = 1.02,
   ...touchableProps
 }: PressableProps) {
-  const scale = useRef(new Animated.Value(1)).current
-  const { hovered, hoverHandlers } = useHover()
-
-  const handlePressIn = () => {
-    if (disabled) return
-    Animated.spring(scale, {
-      toValue: pressScale,
-      useNativeDriver: nativeDriver,
-      speed: 40,
-      bounciness: 0,
-    }).start()
-  }
-
-  const handlePressOut = () => {
-    if (disabled) return
-    Animated.spring(scale, {
-      toValue: 1,
-      useNativeDriver: nativeDriver,
-      speed: 40,
-      bounciness,
-    }).start()
-  }
+  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
+    pressScale,
+    hoverScale,
+    pressInSpring: SPRINGS.surfacePressIn,
+    pressOutSpring: SPRINGS.surfacePressOut,
+    disabled,
+  })
 
   const handlePress = () => {
     if (disabled || !onPress) return
@@ -74,23 +58,20 @@ export function Pressable({
     onPress()
   }
 
-  const hoverScaleValue = hovered && hoverScale !== 1 ? hoverScale : 1
-
   return (
     <Animated.View
-      style={[
-        { transform: [{ scale: Animated.multiply(scale, hoverScaleValue) }] },
-        style,
-      ]}
+      style={[animatedStyle, style]}
       {...(Platform.OS === 'web' ? hoverHandlers : {})}
     >
       <TouchableOpacity
         onPress={handlePress}
-        onPressIn={handlePressIn}
-        onPressOut={handlePressOut}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
         activeOpacity={1}
         disabled={disabled}
         touchSoundDisabled={true}
+        accessibilityRole="button"
+        accessibilityState={{ disabled: !!disabled }}
         {...touchableProps}
       >
         {children}

package/src/components/Progress/Progress.tsx

@@ -1,7 +1,13 @@
-import React, { useRef, useState, useEffect } from 'react'
-import { View, Animated, StyleSheet, ViewStyle } from 'react-native'
+import React, { useEffect, useState } from 'react'
+import { View, StyleSheet, ViewStyle } from 'react-native'
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+} from 'react-native-reanimated'
 import { useTheme } from '../../theme'
 import { vs } from '../../utils/scaling'
+import { SPRINGS } from '../../utils/animations'
 
 export type ProgressVariant = 'default' | 'success' | 'warning' | 'destructive'
 
@@ -10,23 +16,23 @@ export interface ProgressProps {
   max?: number
   variant?: ProgressVariant
   style?: ViewStyle
+  accessibilityLabel?: string
 }
 
-export function Progress({ value = 0, max = 100, variant = 'default', style }: ProgressProps) {
+export function Progress({ value = 0, max = 100, variant = 'default', style, accessibilityLabel }: ProgressProps) {
   const { colors } = useTheme()
   const percent = Math.min(Math.max((value / max) * 100, 0), 100)
   const [trackWidth, setTrackWidth] = useState(0)
-  const animatedWidth = useRef(new Animated.Value(0)).current
+  const animatedWidth = useSharedValue(0)
 
   useEffect(() => {
     if (trackWidth === 0) return
-    Animated.spring(animatedWidth, {
-      toValue: (percent / 100) * trackWidth,
-      useNativeDriver: false,
-      speed: 20,
-      bounciness: 0,
-    }).start()
-  }, [percent, trackWidth])
+    animatedWidth.value = withSpring((percent / 100) * trackWidth, SPRINGS.glide)
+  }, [percent, trackWidth, animatedWidth])
+
+  const indicatorAnimatedStyle = useAnimatedStyle(() => ({
+    width: animatedWidth.value,
+  }))
 
   const indicatorColor =
     variant === 'success'     ? colors.success
@@ -38,9 +44,12 @@ export function Progress({ value = 0, max = 100, variant = 'default', style }: P
     <View
       style={[styles.track, { backgroundColor: colors.surface }, style]}
       onLayout={(e) => setTrackWidth(e.nativeEvent.layout.width)}
+      accessibilityRole="progressbar"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityValue={{ min: 0, max: 100, now: Math.round(percent) }}
     >
       <Animated.View
-        style={[styles.indicator, { width: animatedWidth, backgroundColor: indicatorColor }]}
+        style={[styles.indicator, { backgroundColor: indicatorColor }, indicatorAnimatedStyle]}
       />
     </View>
   )

package/src/components/RadioGroup/RadioGroup.tsx

@@ -1,10 +1,18 @@
-import React, { useRef } 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,
+  useSharedValue,
+  withSpring,
+  interpolateColor,
+} from 'react-native-reanimated'
+import { useEffect } from 'react'
 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 { SPRINGS, PRESS_SCALE } from '../../utils/animations'
 
 export interface RadioOption {
   label: string
@@ -18,6 +26,7 @@ export interface RadioGroupProps {
   onValueChange?: (value: string) => void
   orientation?: 'vertical' | 'horizontal'
   style?: ViewStyle
+  accessibilityLabel?: string
 }
 
 function RadioItem({
@@ -30,16 +39,26 @@ function RadioItem({
   onSelect: () => void
 }) {
   const { colors } = useTheme()
-  const scale = useRef(new Animated.Value(1)).current
+  const { animatedStyle: scaleStyle, onPressIn, onPressOut } = usePressScale({
+    pressScale: PRESS_SCALE.button,
+    disabled: option.disabled,
+  })
+  const colorProgress = useColorTransition(selected)
+
+  // Pop-in animation for the inner dot
+  const dotScale = useSharedValue(selected ? 1 : 0)
+  useEffect(() => {
+    dotScale.value = withSpring(selected ? 1 : 0, SPRINGS.elastic)
+  }, [selected, dotScale])
 
-  const handlePressIn = () => {
-    if (option.disabled) return
-    Animated.spring(scale, { toValue: 0.95, useNativeDriver: nativeDriver, speed: 40, bounciness: 0 }).start()
-  }
+  const radioStyle = useAnimatedStyle(() => ({
+    borderColor: interpolateColor(colorProgress.value, [0, 1], [colors.border, colors.primary]),
+  }))
 
-  const handlePressOut = () => {
-    Animated.spring(scale, { toValue: 1, useNativeDriver: nativeDriver, speed: 40, bounciness: 4 }).start()
-  }
+  const dotStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: dotScale.value }],
+    opacity: dotScale.value,
+  }))
 
   return (
     <TouchableOpacity
@@ -50,23 +69,25 @@ function RadioItem({
           onSelect()
         }
       }}
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
       activeOpacity={1}
       touchSoundDisabled={true}
       disabled={option.disabled}
+      accessibilityRole="radio"
+      accessibilityLabel={option.label}
+      accessibilityState={{ checked: selected, disabled: !!option.disabled }}
     >
-      <Animated.View
-        style={[
-          styles.radio,
-          {
-            borderColor: selected ? colors.primary : colors.border,
-            opacity: option.disabled ? 0.45 : 1,
-            transform: [{ scale }],
-          },
-        ]}
-      >
-        {selected ? <View style={[styles.dot, { backgroundColor: colors.primary }]} /> : null}
+      <Animated.View style={scaleStyle}>
+        <Animated.View
+          style={[
+            styles.radio,
+            { opacity: option.disabled ? 0.45 : 1 },
+            radioStyle,
+          ]}
+        >
+          <Animated.View style={[styles.dot, { backgroundColor: colors.primary }, dotStyle]} />
+        </Animated.View>
       </Animated.View>
       <Text
         style={[
@@ -87,9 +108,14 @@ export function RadioGroup({
   onValueChange,
   orientation = 'vertical',
   style,
+  accessibilityLabel,
 }: RadioGroupProps) {
   return (
-    <View style={[styles.container, orientation === 'horizontal' && styles.horizontal, style]}>
+    <View
+      style={[styles.container, orientation === 'horizontal' && styles.horizontal, style]}
+      accessibilityRole="radiogroup"
+      accessibilityLabel={accessibilityLabel}
+    >
       {options.map((option) => (
         <RadioItem
           key={option.value}

package/src/components/Select/Select.tsx

@@ -1,15 +1,17 @@
 import React, { useRef, useState } from 'react'
-import { View, Text, TouchableOpacity, Modal, Animated, StyleSheet, ViewStyle, Platform } from 'react-native'
+import { View, Text, TouchableOpacity, Modal, StyleSheet, ViewStyle, Platform } from 'react-native'
+import Animated from 'react-native-reanimated'
 import { Picker } from '@react-native-picker/picker'
 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 { usePressScale } from '../../utils/usePressScale'
+import { PRESS_SCALE } from '../../utils/animations'
 
 const isIOS = Platform.OS === 'ios'
 const isAndroid = Platform.OS === 'android'
 const isWeb = Platform.OS === 'web'
-const nativeDriver = Platform.OS !== 'web'
 
 export interface SelectOption {
   label: string
@@ -26,6 +28,7 @@ export interface SelectProps {
   error?: string
   disabled?: boolean
   style?: ViewStyle
+  accessibilityLabel?: string
 }
 
 export function Select({
@@ -37,24 +40,19 @@ export function Select({
   error,
   disabled,
   style,
+  accessibilityLabel,
 }: SelectProps) {
   const { colors } = useTheme()
-  const scale = useRef(new Animated.Value(1)).current
+  const { animatedStyle, onPressIn, onPressOut } = usePressScale({
+    pressScale: PRESS_SCALE.button,
+    disabled,
+  })
   const [pickerVisible, setPickerVisible] = useState(false)
   const [pendingValue, setPendingValue] = useState<string | undefined>(value)
   const pickerRef = useRef<React.ElementRef<typeof Picker>>(null)
 
   const selected = options.find((o) => o.value === value)
 
-  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: 4 }).start()
-  }
-
   const handleOpen = () => {
     if (disabled) return
     hapticSelection()
@@ -84,7 +82,7 @@ export function Select({
 
       {/* Trigger button — shown on iOS and Android only */}
       {!isWeb ? (
-        <Animated.View style={{ transform: [{ scale }], opacity: disabled ? 0.45 : 1 }}>
+        <Animated.View style={[animatedStyle, { opacity: disabled ? 0.45 : 1 }]}>
           <TouchableOpacity
             style={[
               styles.trigger,
@@ -94,10 +92,14 @@ export function Select({
               },
             ]}
             onPress={handleOpen}
-            onPressIn={handlePressIn}
-            onPressOut={handlePressOut}
+            onPressIn={onPressIn}
+            onPressOut={onPressOut}
             activeOpacity={1}
             touchSoundDisabled={true}
+            accessibilityRole="combobox"
+            accessibilityLabel={accessibilityLabel ?? label}
+            accessibilityValue={{ text: selected?.label ?? placeholder }}
+            accessibilityState={{ disabled: !!disabled, expanded: pickerVisible }}
           >
             <Text
               style={[

package/src/components/Sheet/Sheet.tsx

@@ -139,7 +139,7 @@ export function Sheet({
   const showHeader = !!(title || effectiveSubtitle || showCloseButton)
 
   const headerNode = showHeader ? (
-    <View style={styles.header}>
+    <View style={styles.header} accessibilityRole="header">
       <View style={styles.headerRow}>
         {title ? (
           <Text style={[styles.title, { color: colors.foreground }]} allowFontScaling={true}>
@@ -152,6 +152,9 @@ export function Sheet({
             style={styles.closeButton}
             activeOpacity={0.6}
             touchSoundDisabled={true}
+            accessibilityRole="button"
+            accessibilityLabel="Close"
+            hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
           >
             <AntDesign name="close" size={ms(18)} color={colors.foregroundMuted} />
           </TouchableOpacity>

package/src/components/Skeleton/Skeleton.tsx

@@ -1,8 +1,16 @@
-import React, { useEffect, useRef, useState } from 'react'
-import { Animated, StyleSheet, View, ViewStyle } from 'react-native'
+import React, { useEffect, useState } from 'react'
+import { StyleSheet, View, ViewStyle } from 'react-native'
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withRepeat,
+  withTiming,
+  Easing,
+} from 'react-native-reanimated'
 import { LinearGradient } from 'expo-linear-gradient'
 import { useTheme } from '../../theme'
 import { s } from '../../utils/scaling'
+import { TIMINGS } from '../../utils/animations'
 
 // circle: circular avatar placeholder  text: short line preset  base: custom dimensions
 export type SkeletonPreset = 'base' | 'circle' | 'text'
@@ -27,24 +35,24 @@ export function Skeleton({
   style,
 }: SkeletonProps) {
   const { colors, colorScheme } = useTheme()
-  const shimmerAnim = useRef(new Animated.Value(0)).current
+  const shimmer = useSharedValue(0)
   const [containerWidth, setContainerWidth] = useState(300)
 
   const shimmerHighlight =
     colorScheme === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,255,0.7)'
 
   useEffect(() => {
-    const animation = Animated.loop(
-      Animated.timing(shimmerAnim, { toValue: 1, duration: 1200, useNativeDriver: true })
+    // Repeats indefinitely on the UI thread — zero JS bridge cost per frame.
+    shimmer.value = withRepeat(
+      withTiming(1, { duration: TIMINGS.shimmer.duration, easing: Easing.linear }),
+      -1,
+      false,
     )
-    animation.start()
-    return () => animation.stop()
-  }, [shimmerAnim])
+  }, [shimmer])
 
-  const translateX = shimmerAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [-containerWidth, containerWidth],
-  })
+  const shimmerStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: -containerWidth + shimmer.value * (containerWidth * 2) }],
+  }))
 
   // Resolve dimensions by preset
   const resolvedWidth: number | string =
@@ -70,8 +78,11 @@ export function Skeleton({
         style,
       ]}
       onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
+      accessibilityRole="progressbar"
+      accessibilityLabel="Loading"
+      accessibilityState={{ busy: true }}
     >
-      <Animated.View style={[StyleSheet.absoluteFill, { transform: [{ translateX }] }]}>
+      <Animated.View style={[StyleSheet.absoluteFill, shimmerStyle]}>
         <LinearGradient
           colors={['transparent', shimmerHighlight, 'transparent']}
           start={{ x: 0, y: 0 }}

package/src/components/Slider/Slider.tsx

@@ -46,7 +46,17 @@ export function Slider({
   }
 
   return (
-    <View style={[styles.wrapper, style]} accessibilityLabel={accessibilityLabel}>
+    <View
+      style={[styles.wrapper, style]}
+      accessibilityRole="adjustable"
+      accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityValue={{
+        min: minimumValue,
+        max: maximumValue,
+        now: value,
+        text: formatValue(value),
+      }}
+    >
       {label || showValue ? (
         <View style={styles.header}>
           {label ? (

package/src/components/Switch/Switch.tsx

@@ -1,63 +1,62 @@
-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_HEIGHT = s(30)
 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
+
+  // Single 0→1 progress drives thumb position, track color, and icon crossfade — all UI thread.
+  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],
+    ),
+  }))
+
+  const checkIconStyle = useAnimatedStyle(() => ({
+    opacity: withTiming(checked ? 1 : 0, { duration: TIMINGS.state.duration, easing: EASINGS.standard }),
+  }))
 
-  const trackColor = trackOpacity.interpolate({
-    inputRange: [0, 1],
-    outputRange: [colors.surface, colors.primary],
-  })
+  const crossIconStyle = useAnimatedStyle(() => ({
+    opacity: withTiming(checked ? 0 : 1, { duration: TIMINGS.state.duration, easing: EASINGS.standard }),
+  }))
 
   return (
     <View style={[{ opacity: disabled ? 0.45 : 1 }, style]}>
@@ -69,19 +68,18 @@ 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 }}
       >
-        <Animated.View style={[styles.track, { backgroundColor: trackColor }]}>
+        <Animated.View style={[styles.track, trackStyle]}>
           <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 +90,10 @@ export function Switch({ checked = false, onCheckedChange, disabled, style }: Sw
 }
 
 const styles = StyleSheet.create({
-  wrapper: {},
   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
   },
   thumb: {
     position: 'absolute',