@retray-dev/ui-kit 6.1.0 → 7.0.1

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,49 +39,54 @@ 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)
+
+  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 (
+    // AUDIT FIX: opacity was applied only to the radio circle, leaving the label
+    // at full opacity when disabled. The whole row now dims uniformly so users
+    // get a single, consistent disabled signal across the entire item.
     <TouchableOpacity
-      style={styles.row}
+      style={[styles.row, option.disabled && styles.rowDisabled]}
       onPress={() => {
         if (!option.disabled) {
           hapticSelection()
           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, radioStyle]}>
+          <Animated.View style={[styles.dot, { backgroundColor: colors.primary }, dotStyle]} />
+        </Animated.View>
       </Animated.View>
       <Text
-        style={[
-          styles.label,
-          { color: option.disabled ? colors.foregroundMuted : colors.foreground },
-        ]}
+        style={[styles.label, { color: colors.foreground }]}
         allowFontScaling={true}
       >
         {option.label}
@@ -87,9 +101,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}
@@ -115,6 +134,10 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     gap: s(12),
   },
+  // AUDIT FIX: was opacity on the inner circle only
+  rowDisabled: {
+    opacity: 0.45,
+  },
   radio: {
     width: s(24),
     height: s(24),
@@ -129,7 +152,7 @@ const styles = StyleSheet.create({
     borderRadius: s(5),
   },
   label: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(14),
     lineHeight: mvs(20),
   },

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()
@@ -62,7 +60,7 @@ export function Select({
       setPendingValue(value)
       setPickerVisible(true)
     } else if (isAndroid) {
-      ;(pickerRef.current as any)?.focus()
+      ;(pickerRef.current as { focus?: () => void })?.focus?.()
     }
   }
 
@@ -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={[
@@ -232,7 +234,7 @@ const styles = StyleSheet.create({
     gap: vs(8),
   },
   label: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(13),
   },
   trigger: {
@@ -245,7 +247,7 @@ const styles = StyleSheet.create({
     paddingVertical: vs(11),
   },
   triggerText: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(15),
     flex: 1,
   },
@@ -253,7 +255,7 @@ const styles = StyleSheet.create({
     marginLeft: s(8),
   },
   helperText: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(13),
   },
   iosBackdrop: {
@@ -274,14 +276,14 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
   },
   iosToolbarTitle: {
-    fontFamily: 'Poppins-SemiBold',
+    fontFamily: 'Sohne-SemiBold',
     fontSize: ms(17),
   },
   iosDoneBtn: {
     padding: s(4),
   },
   iosDoneBtnText: {
-    fontFamily: 'Poppins-SemiBold',
+    fontFamily: 'Sohne-SemiBold',
     fontSize: ms(17),
   },
   androidHiddenPicker: {

package/src/components/Separator/Separator.tsx

@@ -14,7 +14,7 @@ export function Separator({ orientation = 'horizontal', style }: SeparatorProps)
     <View
       style={[
         orientation === 'horizontal' ? styles.horizontal : styles.vertical,
-        { backgroundColor: colors.border },
+        { backgroundColor: colors.separator },
         style,
       ]}
     />
@@ -25,11 +25,9 @@ const styles = StyleSheet.create({
   horizontal: {
     height: 1,
     width: '100%',
-    opacity: 0.7,
   },
   vertical: {
     width: 1,
     height: '100%',
-    opacity: 0.7,
   },
 })

package/src/components/Sheet/Sheet.tsx

@@ -25,6 +25,21 @@ export { BottomSheetModalProvider }
 // Re-export BottomSheetTextInput as SheetTextInput for consumer convenience
 export { BottomSheetTextInput as SheetTextInput }
 
+export interface SheetHeaderProps {
+  children: React.ReactNode
+  style?: ViewStyle
+}
+
+export interface SheetContentProps {
+  children: React.ReactNode
+  style?: ViewStyle
+}
+
+export interface SheetFooterProps {
+  children: React.ReactNode
+  style?: ViewStyle
+}
+
 export interface SheetProps {
   open: boolean
   onClose: () => void
@@ -80,6 +95,23 @@ export interface SheetProps {
   snapPoints?: (string | number)[]
 }
 
+export function SheetHeader({ children, style }: SheetHeaderProps) {
+  return <View style={[styles.header, style]}>{children}</View>
+}
+
+export function SheetContent({ children, style }: SheetContentProps) {
+  return <View style={[styles.sheetContent, style]}>{children}</View>
+}
+
+export function SheetFooter({ children, style }: SheetFooterProps) {
+  const { colors } = useTheme()
+  return (
+    <View style={[styles.sheetFooter, { backgroundColor: colors.card, borderTopColor: colors.border }, style]}>
+      {children}
+    </View>
+  )
+}
+
 export function Sheet({
   open,
   onClose,
@@ -125,21 +157,26 @@ export function Sheet({
     />
   ), [])
 
-  const renderFooter = useCallback((props: BottomSheetFooterProps) => {
-    if (!footer) return null
-    return (
-      <BottomSheetFooter {...props}>
-        {footer}
-      </BottomSheetFooter>
-    )
-  }, [footer])
+  // Detect compound components in children
+  const childArray = React.Children.toArray(children)
+  const customHeader = childArray.find((child) => React.isValidElement(child) && child.type === SheetHeader)
+  const customContent = childArray.find((child) => React.isValidElement(child) && child.type === SheetContent)
+  const customFooter = childArray.find((child) => React.isValidElement(child) && child.type === SheetFooter)
+  
+  // If using compound components, filter them out from main children
+  const filteredChildren = customHeader || customContent || customFooter
+    ? childArray.filter(
+        (child) =>
+          !React.isValidElement(child) ||
+          (child.type !== SheetHeader && child.type !== SheetContent && child.type !== SheetFooter)
+      )
+    : children
 
   const effectiveSubtitle = subtitle ?? description
+  const showHeader = !!(title || effectiveSubtitle || showCloseButton) && !customHeader
 
-  const showHeader = !!(title || effectiveSubtitle || showCloseButton)
-
-  const headerNode = showHeader ? (
-    <View style={styles.header}>
+  const headerNode = customHeader ? customHeader : (showHeader ? (
+    <View style={styles.header} accessibilityRole="header">
       <View style={styles.headerRow}>
         {title ? (
           <Text style={[styles.title, { color: colors.foreground }]} allowFontScaling={true}>
@@ -152,6 +189,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>
@@ -163,7 +203,19 @@ export function Sheet({
         </Text>
       ) : null}
     </View>
-  ) : null
+  ) : null)
+
+  const contentNode = customContent ? customContent : filteredChildren
+  const effectiveFooter = customFooter ? customFooter : footer
+
+  const renderFooter = useCallback((props: BottomSheetFooterProps) => {
+    if (!effectiveFooter) return null
+    return (
+      <BottomSheetFooter {...props}>
+        {effectiveFooter}
+      </BottomSheetFooter>
+    )
+  }, [effectiveFooter])
 
   const useScroll = scrollable || !!maxHeight
   const effectiveMaxHeight = maxHeight ?? DEFAULT_MAX_HEIGHT
@@ -179,7 +231,7 @@ export function Sheet({
       maxDynamicContentSize={useDynamicSizing ? effectiveMaxHeight : undefined}
       onDismiss={onClose}
       backdropComponent={renderBackdrop}
-      footerComponent={footer ? renderFooter : undefined}
+      footerComponent={effectiveFooter ? renderFooter : undefined}
       backgroundStyle={[styles.background, { backgroundColor: colors.card }]}
       handleIndicatorStyle={[styles.handle, { backgroundColor: colors.border }]}
       enablePanDownToClose
@@ -201,18 +253,22 @@ export function Sheet({
           persistentScrollbar={isAndroid}
         >
           {headerNode}
-          {children}
+          {contentNode}
         </BottomSheetScrollView>
       ) : (
         <BottomSheetView style={[styles.content, contentStyle, style]}>
           {headerNode}
-          {children}
+          {contentNode}
         </BottomSheetView>
       )}
     </BottomSheetModal>
   )
 }
 
+Sheet.Header = SheetHeader
+Sheet.Content = SheetContent
+Sheet.Footer = SheetFooter
+
 const styles = StyleSheet.create({
   background: {
     borderTopLeftRadius: ms(16),
@@ -235,12 +291,12 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
   },
   title: {
-    fontFamily: 'Poppins-SemiBold',
+    fontFamily: 'Sohne-SemiBold',
     fontSize: ms(18),
     flex: 1,
   },
   subtitle: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(14),
     lineHeight: mvs(20),
   },
@@ -257,4 +313,15 @@ const styles = StyleSheet.create({
     paddingBottom: vs(32),
     paddingRight: s(16),
   },
+  sheetContent: {
+    gap: vs(16),
+  },
+  sheetFooter: {
+    paddingHorizontal: s(16),
+    paddingVertical: vs(16),
+    borderTopWidth: 1,
+    flexDirection: 'row',
+    gap: s(12),
+  },
 })
+

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 =
@@ -66,12 +74,15 @@ export function Skeleton({
     <View
       style={[
         styles.base,
-        { width: resolvedWidth as any, height: resolvedHeight, borderRadius: resolvedRadius, backgroundColor: colors.surface },
+        { width: resolvedWidth as number | `${number}%`, height: resolvedHeight, borderRadius: resolvedRadius, backgroundColor: colors.surface },
         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 ? (
@@ -91,11 +101,11 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   label: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(15),
   },
   valueText: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(14),
   },
   slider: {

package/src/components/Spinner/Spinner.tsx

@@ -49,7 +49,7 @@ const styles = StyleSheet.create({
     gap: vs(6),
   },
   label: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     lineHeight: mvs(18),
   },
 })