@retray-dev/ui-kit 1.0.0 → 1.5.0

package/src/components/Toast/Toast.tsx

@@ -1,5 +1,14 @@
-import React, { createContext, useContext, useState, useCallback, useEffect, useRef } from 'react'
-import { View, Text, TouchableOpacity, Animated, StyleSheet } from 'react-native'
+import React, { createContext, useContext, useState, useCallback, useEffect } from 'react'
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+  withTiming,
+  runOnJS,
+  Easing,
+} from 'react-native-reanimated'
+import { Gesture, GestureDetector } from 'react-native-gesture-handler'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import * as Haptics from 'expo-haptics'
 import { useTheme } from '../../theme'
@@ -11,6 +20,7 @@ export interface ToastItem {
   title?: string
   description?: string
   variant?: ToastVariant
+  /** Auto-dismiss delay in milliseconds. Defaults to `3000`. */
   duration?: number
 }
 
@@ -28,57 +38,83 @@ export function useToast() {
   return useContext(ToastContext)
 }
 
+const SWIPE_THRESHOLD = 80
+const VELOCITY_THRESHOLD = 800
+
 function ToastNotification({ item, onDismiss }: { item: ToastItem; onDismiss: () => void }) {
   const { colors } = useTheme()
-  const translateY = useRef(new Animated.Value(-80)).current
-  const opacity = useRef(new Animated.Value(0)).current
+  const translateY = useSharedValue(-80)
+  const translateX = useSharedValue(0)
+  const opacity = useSharedValue(0)
 
   useEffect(() => {
-    Animated.parallel([
-      Animated.spring(translateY, { toValue: 0, useNativeDriver: true, bounciness: 2 }),
-      Animated.timing(opacity, { toValue: 1, duration: 200, useNativeDriver: true }),
-    ]).start()
+    translateY.value = withTiming(0, { duration: 120, easing: Easing.out(Easing.exp) })
+    opacity.value = withTiming(1, { duration: 100 })
 
     const timer = setTimeout(() => {
-      Animated.parallel([
-        Animated.timing(translateY, { toValue: -80, duration: 200, useNativeDriver: true }),
-        Animated.timing(opacity, { toValue: 0, duration: 200, useNativeDriver: true }),
-      ]).start(onDismiss)
+      translateY.value = withTiming(-80, { duration: 200 })
+      opacity.value = withTiming(0, { duration: 200 }, (done) => {
+        if (done) runOnJS(onDismiss)()
+      })
     }, item.duration ?? 3000)
 
     return () => clearTimeout(timer)
   }, [])
 
+  const panGesture = Gesture.Pan()
+    .onUpdate((e) => {
+      translateX.value = e.translationX
+    })
+    .onEnd((e) => {
+      const shouldDismiss =
+        Math.abs(translateX.value) > SWIPE_THRESHOLD ||
+        Math.abs(e.velocityX) > VELOCITY_THRESHOLD
+      if (shouldDismiss) {
+        const direction = translateX.value > 0 ? 1 : -1
+        translateX.value = withTiming(direction * 500, { duration: 200 }, (done) => {
+          if (done) runOnJS(onDismiss)()
+        })
+        opacity.value = withTiming(0, { duration: 150 })
+      } else {
+        translateX.value = withSpring(0, { damping: 20, stiffness: 300 })
+      }
+    })
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+    transform: [{ translateY: translateY.value }, { translateX: translateX.value }],
+  }))
+
   const bgColor = {
     default: colors.foreground,
     destructive: colors.destructive,
-    success: '#16a34a',
+    success: colors.success,
   }[item.variant ?? 'default']
 
   const textColor = {
     default: colors.background,
     destructive: colors.destructiveForeground,
-    success: '#ffffff',
+    success: colors.successForeground,
   }[item.variant ?? 'default']
 
   return (
-    <Animated.View
-      style={[styles.toast, { backgroundColor: bgColor, opacity, transform: [{ translateY }] }]}
-    >
-      <View style={styles.toastContent}>
-        {item.title ? (
-          <Text style={[styles.toastTitle, { color: textColor }]}>{item.title}</Text>
-        ) : null}
-        {item.description ? (
-          <Text style={[styles.toastDescription, { color: textColor, opacity: 0.85 }]}>
-            {item.description}
-          </Text>
-        ) : null}
-      </View>
-      <TouchableOpacity onPress={onDismiss} style={styles.dismissButton}>
-        <Text style={[styles.dismissIcon, { color: textColor }]}>✕</Text>
-      </TouchableOpacity>
-    </Animated.View>
+    <GestureDetector gesture={panGesture}>
+      <Animated.View style={[styles.toast, { backgroundColor: bgColor }, animatedStyle]}>
+        <View style={styles.toastContent}>
+          {item.title ? (
+            <Text style={[styles.toastTitle, { color: textColor }]}>{item.title}</Text>
+          ) : null}
+          {item.description ? (
+            <Text style={[styles.toastDescription, { color: textColor, opacity: 0.85 }]}>
+              {item.description}
+            </Text>
+          ) : null}
+        </View>
+        <TouchableOpacity onPress={onDismiss} style={styles.dismissButton} touchSoundDisabled={true}>
+          <Text style={[styles.dismissIcon, { color: textColor }]}>✕</Text>
+        </TouchableOpacity>
+      </Animated.View>
+    </GestureDetector>
   )
 }
 
@@ -155,8 +191,8 @@ const styles = StyleSheet.create({
     fontSize: 13,
   },
   dismissButton: {
-    padding: 4,
-    marginLeft: 8,
+    padding: 12,
+    marginLeft: 4,
   },
   dismissIcon: {
     fontSize: 12,

package/src/components/Toggle/Toggle.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import { TouchableOpacity, Text, StyleSheet, TouchableOpacityProps, ViewStyle } from 'react-native'
+import React, { useRef } from 'react'
+import { TouchableOpacity, Animated, Text, StyleSheet, TouchableOpacityProps, ViewStyle } from 'react-native'
 import * as Haptics from 'expo-haptics'
 import { useTheme } from '../../theme'
 
@@ -33,32 +33,44 @@ export function Toggle({
   ...props
 }: ToggleProps) {
   const { colors } = useTheme()
+  const scale = useRef(new Animated.Value(1)).current
+
+  const handlePressIn = () => {
+    if (disabled) return
+    Animated.spring(scale, { toValue: 0.95, useNativeDriver: true, speed: 40, bounciness: 0 }).start()
+  }
+
+  const handlePressOut = () => {
+    Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start()
+  }
 
   const containerStyle: ViewStyle = pressed
     ? { backgroundColor: colors.accent }
     : variant === 'outline'
-    ? { backgroundColor: 'transparent', borderWidth: 1, borderColor: colors.border }
-    : { backgroundColor: 'transparent' }
+      ? { backgroundColor: 'transparent', borderWidth: 1, borderColor: colors.border }
+      : { backgroundColor: 'transparent' }
 
   const textColor = pressed ? colors.accentForeground : colors.foreground
 
   return (
-    <TouchableOpacity
-      style={[
-        styles.base,
-        containerStyle,
-        sizeStyles[size],
-        disabled && styles.disabled,
-        style,
-      ]}
-      onPress={() => { Haptics.selectionAsync(); onPressedChange?.(!pressed) }}
-      disabled={disabled}
-      activeOpacity={0.7}
-      {...props}
-    >
-      {icon}
-      {label ? <Text style={[styles.label, { color: textColor }]}>{label}</Text> : null}
-    </TouchableOpacity>
+    <Animated.View style={{ transform: [{ scale }] }}>
+      <TouchableOpacity
+        style={[styles.base, containerStyle, sizeStyles[size], disabled && styles.disabled, style]}
+        onPress={() => {
+          Haptics.selectionAsync()
+          onPressedChange?.(!pressed)
+        }}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        disabled={disabled}
+        activeOpacity={1}
+        touchSoundDisabled={true}
+        {...props}
+      >
+        {icon}
+        {label ? <Text style={[styles.label, { color: textColor }]}>{label}</Text> : null}
+      </TouchableOpacity>
+    </Animated.View>
   )
 }
 

package/src/theme/colors.ts

@@ -18,6 +18,8 @@ export const defaultLight: ThemeColors = {
   border: '#e5e5e5',
   input: '#e5e5e5',
   ring: '#a3a3a3',
+  success: '#16a34a',
+  successForeground: '#ffffff',
 }
 
 export const defaultDark: ThemeColors = {
@@ -38,4 +40,6 @@ export const defaultDark: ThemeColors = {
   border: '#2a2a2a',
   input: '#2a2a2a',
   ring: '#d4d4d4',
+  success: '#22c55e',
+  successForeground: '#ffffff',
 }

package/src/theme/types.ts

@@ -16,6 +16,8 @@ export type ThemeColors = {
   border: string
   input: string
   ring: string
+  success: string
+  successForeground: string
 }
 
 export type Theme = {