@retray-dev/ui-kit 6.1.0 → 6.2.0

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 { 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
@@ -42,20 +47,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,13 +64,16 @@ 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
@@ -99,21 +100,20 @@ 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
+  // Shared values drive the pill position on the UI thread — no JS bridge cost on slide.
+  const pillX = useSharedValue(0)
+  const pillWidth = useSharedValue(0)
   const initialised = useRef(false)
 
   const animatePill = (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()
+      pillX.value = withSpring(layout.x, SPRINGS.glide)
+      pillWidth.value = withSpring(layout.width, SPRINGS.glide)
     } else {
-      pillX.setValue(layout.x)
-      pillWidth.setValue(layout.width)
+      pillX.value = layout.x
+      pillWidth.value = layout.width
     }
   }
 
@@ -127,11 +127,19 @@ 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 +149,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 +157,7 @@ export function Tabs({ tabs, variant = 'pill', value, onValueChange, children, s
                 shadowRadius: 2,
                 elevation: 2,
               },
+              pillAnimatedStyle,
             ]}
           />
         )}
@@ -178,7 +186,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({

package/src/components/Textarea/Textarea.tsx

@@ -1,8 +1,14 @@
 import React, { useState } from 'react'
 import { TextInput, View, Text, StyleSheet, TextInputProps, ViewStyle, Platform } from 'react-native'
+import Animated, {
+  useAnimatedStyle,
+  interpolateColor,
+} 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 =
   Platform.OS === 'web'
@@ -39,29 +45,33 @@ 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
 
+  const borderColorStyle = useAnimatedStyle(() => ({
+    borderColor: error
+      ? colors.destructive
+      : interpolateColor(focusProgress.value, [0, 1], [colors.border, colors.primary]),
+  }))
+
   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 },
+          borderColorStyle,
         ]}
       >
         {resolvedPrefixIcon ? <View style={styles.prefixIcon}>{resolvedPrefixIcon}</View> : null}
@@ -88,11 +98,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>
@@ -112,7 +129,7 @@ const styles = StyleSheet.create({
     marginBottom: vs(2),
   },
   inputWrapper: {
-    borderWidth: 1,
+    borderWidth: 2,
     borderRadius: 8,
     paddingHorizontal: s(14),
     paddingVertical: vs(11),

package/src/components/Toggle/Toggle.tsx

@@ -1,12 +1,17 @@
-import React, { useRef, useEffect } from 'react'
-import { TouchableOpacity, Animated, StyleSheet, TouchableOpacityProps, ViewStyle, View, Easing, Platform } from 'react-native'
-
-const nativeDriver = Platform.OS !== 'web'
+import React from 'react'
+import { TouchableOpacity, StyleSheet, TouchableOpacityProps, ViewStyle, View } from 'react-native'
+import Animated, {
+  useAnimatedStyle,
+  interpolateColor,
+} from 'react-native-reanimated'
 import { FontAwesome5 } from '@expo/vector-icons'
 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'
 
 export type ToggleVariant = 'default' | 'outline'
 export type ToggleSize = 'sm' | 'md' | 'lg'
@@ -59,47 +64,26 @@ export function Toggle({
   activeIconColor,
   disabled,
   style,
+  accessibilityLabel,
   ...props
 }: ToggleProps) {
   const { colors } = useTheme()
-  const scale = useRef(new Animated.Value(1)).current
-  // 0 = unpressed, 1 = pressed — used to interpolate colors (JS thread)
-  const pressAnim = useRef(new Animated.Value(pressed ? 1 : 0)).current
-
-  useEffect(() => {
-    Animated.timing(pressAnim, {
-      toValue: pressed ? 1 : 0,
-      duration: 150,
-      easing: Easing.out(Easing.ease),
-      useNativeDriver: false,
-    }).start()
-  }, [pressed, pressAnim])
-
-  const handlePressIn = () => {
-    if (disabled) return
-    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()
-  }
-
-  // Keep borderWidth constant at 2 to prevent layout jumps when pressing.
-  // Animate borderColor and backgroundColor instead.
-  const borderColor = pressAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [variant === 'outline' ? colors.border : 'transparent', colors.primary],
+  const { animatedStyle: scaleStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
+    pressScale: PRESS_SCALE.button,
+    disabled,
   })
+  const progress = useColorTransition(pressed)
 
-  const backgroundColor = pressAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['transparent', colors.surfaceStrong],
-  })
+  const inactiveBorder = variant === 'outline' ? colors.border : 'transparent'
 
-  const textColor = pressAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [colors.foreground, colors.primary],
-  })
+  const surfaceStyle = useAnimatedStyle(() => ({
+    borderColor: interpolateColor(progress.value, [0, 1], [inactiveBorder, colors.primary]),
+    backgroundColor: interpolateColor(progress.value, [0, 1], ['transparent', colors.surfaceStrong]),
+  }))
+
+  const textStyle = useAnimatedStyle(() => ({
+    color: interpolateColor(progress.value, [0, 1], [colors.foreground, colors.primary]),
+  }))
 
   const iconSize = iconSizeMap[size]
 
@@ -121,34 +105,44 @@ export function Toggle({
     const custom = renderProp(icon)
     if (custom) return <>{custom}</>
 
-    // Default: empty circle to signal an action is available
     return <FontAwesome5 name="circle" size={iconSize} color={colors.foregroundMuted} />
   }
 
   return (
-    <Animated.View style={[{ transform: [{ scale }] }, disabled && styles.disabled, style]}>
+    <Animated.View
+      style={[scaleStyle, disabled && styles.disabled, style]}
+      {...hoverHandlers}
+    >
       <TouchableOpacity
         onPress={() => {
           hapticSelection()
           onPressedChange?.(!pressed)
         }}
-        onPressIn={handlePressIn}
-        onPressOut={handlePressOut}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
         disabled={disabled}
         activeOpacity={1}
         touchSoundDisabled={true}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel ?? label}
+        accessibilityState={{ selected: pressed, disabled: !!disabled }}
         {...props}
       >
         <Animated.View
           style={[
             styles.base,
             sizeStyles[size],
-            { borderColor, backgroundColor, borderWidth: 2 },
+            { borderWidth: 2 },
+            surfaceStyle,
           ]}
         >
           <View style={styles.inner}>
             <LeftIcon />
-            {label ? <Animated.Text style={[styles.label, { color: textColor }]} allowFontScaling={true}>{label}</Animated.Text> : null}
+            {label ? (
+              <Animated.Text style={[styles.label, textStyle]} allowFontScaling={true}>
+                {label}
+              </Animated.Text>
+            ) : null}
           </View>
         </Animated.View>
       </TouchableOpacity>

package/src/utils/animations.ts

@@ -0,0 +1,58 @@
+import { Easing } from 'react-native-reanimated'
+
+// ─── Spring presets ──────────────────────────────────────────────────────────
+// Tuned for the "Apple HIG / Airbnb" press-feel: snap inward fast, settle out elastically.
+// `stiffness`/`damping`/`mass` model — Reanimated v4 default physics units.
+//
+// pressIn:  high stiffness, heavy damping  → fast, controlled compression
+// pressOut: lower stiffness, less damping  → soft, elastic rebound
+// settle:   pillows / drawers / large surfaces → calm, never twitchy
+export const SPRINGS = {
+  /** Tight, premium press feel — Buttons, Toggle, Tabs triggers. */
+  pressIn: { stiffness: 600, damping: 35, mass: 0.8 },
+  pressOut: { stiffness: 280, damping: 22, mass: 0.8 },
+
+  /** Slightly softer for larger surfaces — Card, ListItem, MenuItem. */
+  surfacePressIn: { stiffness: 380, damping: 30, mass: 0.95 },
+  surfacePressOut: { stiffness: 220, damping: 20, mass: 0.95 },
+
+  /** Settled transitions for moving indicators — Tabs pill, Switch thumb. */
+  glide: { stiffness: 380, damping: 38, mass: 1.0 },
+
+  /** Elastic indicator — Switch thumb, RadioGroup dot. */
+  elastic: { stiffness: 320, damping: 22, mass: 0.7 },
+} as const
+
+// ─── Timing presets ──────────────────────────────────────────────────────────
+// All timings target the UI thread via Reanimated `withTiming`.
+export const TIMINGS = {
+  /** Color/opacity transitions on toggles, checkboxes, switches. */
+  state: { duration: 160 },
+  /** Focus ring on inputs. */
+  focusIn: { duration: 140 },
+  focusOut: { duration: 100 },
+  /** Accordion / collapsible content. */
+  expand: { duration: 240 },
+  collapse: { duration: 200 },
+  /** Skeleton shimmer cycle (full pass). */
+  shimmer: { duration: 1400 },
+} as const
+
+// ─── Easing presets ──────────────────────────────────────────────────────────
+export const EASINGS = {
+  /** Material-style ease-out — natural deceleration for state changes. */
+  standard: Easing.bezier(0.2, 0, 0, 1),
+  /** Strong ease-out for expanding surfaces (Accordion open). */
+  expand: Easing.bezier(0.23, 1, 0.32, 1),
+  /** Quick ease-in for collapsing. */
+  collapse: Easing.in(Easing.ease),
+} as const
+
+// ─── Press scale tokens ──────────────────────────────────────────────────────
+// Per-component press intensities — taken from DESIGN.md.
+export const PRESS_SCALE = {
+  button: 0.95,
+  card: 0.98,
+  row: 0.97,
+  chip: 0.94,
+} as const

package/src/utils/useColorTransition.ts

@@ -0,0 +1,40 @@
+import { useEffect } from 'react'
+import {
+  useSharedValue,
+  withTiming,
+  interpolateColor,
+  type SharedValue,
+} from 'react-native-reanimated'
+import { TIMINGS, EASINGS } from './animations'
+
+export interface UseColorTransitionOptions {
+  /** Animation duration in ms. Defaults to `160`. */
+  duration?: number
+}
+
+/**
+ * Drives a 0→1 `SharedValue` based on a boolean state, animated via `withTiming` on the UI thread.
+ * Use with Reanimated's `interpolateColor` inside a `useAnimatedStyle` to drive borderColor/backgroundColor/etc.
+ *
+ * @example
+ *   const progress = useColorTransition(focused)
+ *   const animatedStyle = useAnimatedStyle(() => ({
+ *     borderColor: interpolateColor(progress.value, [0, 1], [colors.border, colors.primary]),
+ *   }))
+ */
+export function useColorTransition(
+  active: boolean,
+  options: UseColorTransitionOptions = {},
+): SharedValue<number> {
+  const { duration = TIMINGS.state.duration } = options
+  const progress = useSharedValue(active ? 1 : 0)
+
+  useEffect(() => {
+    progress.value = withTiming(active ? 1 : 0, { duration, easing: EASINGS.standard })
+  }, [active, duration, progress])
+
+  return progress
+}
+
+// Re-export interpolateColor for ergonomic consumer access
+export { interpolateColor }

package/src/utils/usePressScale.ts

@@ -0,0 +1,73 @@
+import { useCallback } from 'react'
+import { Platform } from 'react-native'
+import {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+} from 'react-native-reanimated'
+import { SPRINGS, PRESS_SCALE } from './animations'
+import { useHover } from './hover'
+
+export interface SpringConfig {
+  stiffness?: number
+  damping?: number
+  mass?: number
+}
+
+export interface UsePressScaleOptions {
+  /** Scale value while pressed. Defaults to `0.95` (button). */
+  pressScale?: number
+  /** Scale value while hovered on web. Defaults to `1.02`. Set to `1` to disable. */
+  hoverScale?: number
+  /** Spring config for press-in. Defaults to `SPRINGS.pressIn`. */
+  pressInSpring?: SpringConfig
+  /** Spring config for press-out. Defaults to `SPRINGS.pressOut`. */
+  pressOutSpring?: SpringConfig
+  /** Disable all interaction animations (still returns stable handlers). */
+  disabled?: boolean
+}
+
+/**
+ * Unified press + hover scale primitive.
+ * All animation lives on the UI thread via Reanimated v4 worklets — zero JS-thread cost.
+ *
+ * Returns:
+ *  - `animatedStyle`: spread onto an `Animated.View` (from `react-native-reanimated`)
+ *  - `onPressIn` / `onPressOut`: bind to a `TouchableOpacity`
+ *  - `hoverHandlers`: spread for web hover scaling (no-op on native)
+ */
+export function usePressScale({
+  pressScale = PRESS_SCALE.button,
+  hoverScale = 1.02,
+  pressInSpring = SPRINGS.pressIn,
+  pressOutSpring = SPRINGS.pressOut,
+  disabled = false,
+}: UsePressScaleOptions = {}) {
+  const scale = useSharedValue(1)
+  const { hovered, hoverHandlers } = useHover()
+
+  const onPressIn = useCallback(() => {
+    if (disabled) return
+    scale.value = withSpring(pressScale, pressInSpring)
+  }, [disabled, pressScale, pressInSpring, scale])
+
+  const onPressOut = useCallback(() => {
+    if (disabled) return
+    scale.value = withSpring(1, pressOutSpring)
+  }, [disabled, pressOutSpring, scale])
+
+  const hoverActive = Platform.OS === 'web' && hovered && hoverScale !== 1 && !disabled
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      { scale: scale.value * (hoverActive ? hoverScale : 1) },
+    ],
+  }))
+
+  return {
+    animatedStyle,
+    onPressIn,
+    onPressOut,
+    hoverHandlers,
+  }
+}