@retray-dev/ui-kit 2.3.0 → 2.5.1

package/src/components/Toast/Toast.tsx

@@ -1,5 +1,6 @@
 import React, { createContext, useContext, useState, useCallback, useEffect } from 'react'
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
+import { View, Text, TouchableOpacity, StyleSheet, Platform } from 'react-native'
+import { FontAwesome5, MaterialIcons, Entypo, AntDesign } from '@expo/vector-icons'
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
@@ -98,11 +99,16 @@ function ToastNotification({ item, onDismiss }: { item: ToastItem; onDismiss: ()
     success: colors.successForeground,
   }[item.variant ?? 'default']
 
-  const leftIcon = item.icon ?? (
-    <Text style={[styles.defaultIcon, { color: textColor }]}>
-      {item.variant === 'success' ? '✓' : item.variant === 'destructive' ? '✖' : 'ℹ'}
-    </Text>
-  )
+  const defaultIcon =
+    item.variant === 'success' ? (
+      <FontAwesome5 name="check-circle" size={22} color={textColor} />
+    ) : item.variant === 'destructive' ? (
+      <MaterialIcons name="error-outline" size={24} color={textColor} />
+    ) : (
+      <Entypo name="info-with-circle" size={22} color={textColor} />
+    )
+
+  const leftIcon = item.icon ?? defaultIcon
 
   return (
     <GestureDetector gesture={panGesture}>
@@ -113,13 +119,13 @@ function ToastNotification({ item, onDismiss }: { item: ToastItem; onDismiss: ()
             <Text style={[styles.toastTitle, { color: textColor }]}>{item.title}</Text>
           ) : null}
           {item.description ? (
-            <Text style={[styles.toastDescription, { color: textColor, opacity: 0.85 }]}> 
+            <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>
+          <AntDesign name="close-circle" size={18} color={textColor} />
         </TouchableOpacity>
       </Animated.View>
     </GestureDetector>
@@ -158,7 +164,7 @@ export function ToastProvider({ children }: ToastProviderProps) {
   return (
     <ToastContext.Provider value={{ toast, dismiss }}>
       {children}
-      <View style={[styles.container, { top: insets.top + 8 }]} pointerEvents="box-none">
+      <View style={[styles.container, Platform.OS === 'web' && styles.containerWeb, { top: insets.top + 8 }]} pointerEvents="box-none">
         {toasts.map((item) => (
           <ToastNotification key={item.id} item={item} onDismiss={() => dismiss(item.id)} />
         ))}
@@ -175,6 +181,12 @@ const styles = StyleSheet.create({
     gap: 8,
     zIndex: 9999,
   },
+  containerWeb: {
+    left: undefined,
+    right: undefined,
+    alignSelf: 'center',
+    width: 400,
+  },
   toast: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -192,15 +204,11 @@ const styles = StyleSheet.create({
     gap: 4,
   },
   leftIconContainer: {
-    width: 36,
+    width: 40,
     alignItems: 'center',
     justifyContent: 'center',
     marginRight: 8,
   },
-  defaultIcon: {
-    fontSize: 22,
-    fontWeight: '700',
-  },
   toastTitle: {
     fontSize: 15,
     fontWeight: '600',
@@ -209,10 +217,7 @@ const styles = StyleSheet.create({
     fontSize: 14,
   },
   dismissButton: {
-    padding: 12,
+    padding: 8,
     marginLeft: 4,
   },
-  dismissIcon: {
-    fontSize: 14,
-  },
 })

package/src/components/Toggle/Toggle.tsx

@@ -1,5 +1,6 @@
 import React, { useRef, useEffect } from 'react'
-import { TouchableOpacity, Animated, Text, StyleSheet, TouchableOpacityProps, ViewStyle, View, Easing } from 'react-native'
+import { TouchableOpacity, Animated, StyleSheet, TouchableOpacityProps, ViewStyle, View, Easing } from 'react-native'
+import { FontAwesome5 } from '@expo/vector-icons'
 import * as Haptics from 'expo-haptics'
 import { useTheme } from '../../theme'
 
@@ -86,50 +87,43 @@ export function Toggle({
     if (pressed) {
       const active = renderProp(activeIcon)
       if (active) return <>{active}</>
-      return (
-        <View style={[styles.checkContainer, { borderColor: colors.primary, backgroundColor: colors.primary }]}>
-          <Text style={[styles.checkMark, { color: colors.primaryForeground }]}>✓</Text>
-        </View>
-      )
+      return <FontAwesome5 name="check-circle" size={20} color={colors.primary} />
     }
 
     const custom = renderProp(icon)
     if (custom) return <>{custom}</>
 
     // Default: empty circle to signal an action is available
-    return (
-      <View style={[styles.checkContainer, { borderColor: colors.mutedForeground }]} />
-    )
+    return <FontAwesome5 name="circle" size={20} color={colors.mutedForeground} />
   }
 
   return (
-    <Animated.View style={{ transform: [{ scale }] }}>
-      <Animated.View
-        style={[
-          styles.base,
-          sizeStyles[size],
-          { borderColor, backgroundColor, borderWidth: 2 },
-          disabled && styles.disabled,
-          style,
-        ]}
+    <Animated.View style={[{ transform: [{ scale }] }, disabled && styles.disabled, style]}>
+      <TouchableOpacity
+        onPress={() => {
+          Haptics.selectionAsync()
+          onPressedChange?.(!pressed)
+        }}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        disabled={disabled}
+        activeOpacity={1}
+        touchSoundDisabled={true}
+        {...props}
       >
-        <TouchableOpacity
-          style={styles.touchable}
-          onPress={() => {
-            Haptics.selectionAsync()
-            onPressedChange?.(!pressed)
-          }}
-          onPressIn={handlePressIn}
-          onPressOut={handlePressOut}
-          disabled={disabled}
-          activeOpacity={1}
-          touchSoundDisabled={true}
-          {...props}
+        <Animated.View
+          style={[
+            styles.base,
+            sizeStyles[size],
+            { borderColor, backgroundColor, borderWidth: 2 },
+          ]}
         >
-          <LeftIcon />
-          {label ? <Animated.Text style={[styles.label, { color: textColor }]}>{label}</Animated.Text> : null}
-        </TouchableOpacity>
-      </Animated.View>
+          <View style={styles.inner}>
+            <LeftIcon />
+            {label ? <Animated.Text style={[styles.label, { color: textColor }]}>{label}</Animated.Text> : null}
+          </View>
+        </Animated.View>
+      </TouchableOpacity>
     </Animated.View>
   )
 }
@@ -137,14 +131,12 @@ export function Toggle({
 const styles = StyleSheet.create({
   base: {
     borderRadius: 8,
-    overflow: 'hidden',
   },
-  touchable: {
+  inner: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
     gap: 8,
-    flex: 1,
   },
   disabled: {
     opacity: 0.45,
@@ -153,16 +145,4 @@ const styles = StyleSheet.create({
     fontSize: 14,
     fontWeight: '500',
   },
-  checkContainer: {
-    width: 24,
-    height: 24,
-    borderRadius: 12,
-    borderWidth: 2,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  checkMark: {
-    fontSize: 14,
-    fontWeight: '700',
-  },
 })