@retray-dev/ui-kit 1.6.0 → 1.7.0

package/src/components/Toast/Toast.tsx

@@ -20,6 +20,7 @@ export interface ToastItem {
   title?: string
   description?: string
   variant?: ToastVariant
+  icon?: React.ReactNode
   /** Auto-dismiss delay in milliseconds. Defaults to `3000`. */
   duration?: number
 }
@@ -97,15 +98,22 @@ 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>
+  )
+
   return (
     <GestureDetector gesture={panGesture}>
       <Animated.View style={[styles.toast, { backgroundColor: bgColor }, animatedStyle]}>
+        <View style={styles.leftIconContainer}>{leftIcon}</View>
         <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 }]}>
+            <Text style={[styles.toastDescription, { color: textColor, opacity: 0.85 }]}> 
               {item.description}
             </Text>
           ) : null}
@@ -170,9 +178,9 @@ const styles = StyleSheet.create({
   toast: {
     flexDirection: 'row',
     alignItems: 'center',
-    borderRadius: 12,
-    paddingHorizontal: 16,
-    paddingVertical: 12,
+    borderRadius: 16,
+    paddingHorizontal: 20,
+    paddingVertical: 14,
     shadowColor: '#000',
     shadowOffset: { width: 0, height: 4 },
     shadowOpacity: 0.15,
@@ -183,18 +191,28 @@ const styles = StyleSheet.create({
     flex: 1,
     gap: 4,
   },
+  leftIconContainer: {
+    width: 36,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 8,
+  },
+  defaultIcon: {
+    fontSize: 22,
+    fontWeight: '700',
+  },
   toastTitle: {
-    fontSize: 14,
+    fontSize: 15,
     fontWeight: '600',
   },
   toastDescription: {
-    fontSize: 13,
+    fontSize: 14,
   },
   dismissButton: {
     padding: 12,
     marginLeft: 4,
   },
   dismissIcon: {
-    fontSize: 12,
+    fontSize: 14,
   },
 })

package/src/components/Toggle/Toggle.tsx

@@ -1,5 +1,5 @@
-import React, { useRef } from 'react'
-import { TouchableOpacity, Animated, Text, StyleSheet, TouchableOpacityProps, ViewStyle } from 'react-native'
+import React, { useRef, useEffect } from 'react'
+import { TouchableOpacity, Animated, Text, StyleSheet, TouchableOpacityProps, ViewStyle, View, Easing } from 'react-native'
 import * as Haptics from 'expo-haptics'
 import { useTheme } from '../../theme'
 
@@ -12,7 +12,10 @@ export interface ToggleProps extends TouchableOpacityProps {
   variant?: ToggleVariant
   size?: ToggleSize
   label?: string
-  icon?: React.ReactNode
+  /** Icon to show when not pressed */
+  icon?: React.ReactNode | ((pressed: boolean) => React.ReactNode)
+  /** Icon to show when pressed/active. If omitted, a default check mark is used. */
+  activeIcon?: React.ReactNode | ((pressed: boolean) => React.ReactNode)
 }
 
 const sizeStyles: Record<ToggleSize, ViewStyle> = {
@@ -28,12 +31,24 @@ export function Toggle({
   size = 'md',
   label,
   icon,
+  activeIcon,
   disabled,
   style,
   ...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
@@ -44,32 +59,70 @@ export function Toggle({
     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' }
+  // 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 backgroundColor = pressAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['transparent', colors.accent],
+  })
+
+  const textColor = pressAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [colors.foreground, colors.primary],
+  })
+
+  const LeftIcon = () => {
+    const renderProp = (prop?: any) => {
+      if (!prop) return null
+      if (typeof prop === 'function') return prop(pressed)
+      return prop
+    }
 
-  const textColor = pressed ? colors.accentForeground : colors.foreground
+    if (!pressed) return renderProp(icon)
+
+    const active = renderProp(activeIcon)
+    if (active) return <>{active}</>
+
+    return (
+      <View style={[styles.checkContainer, { borderColor: colors.primary }]}>
+        <Text style={[styles.checkMark, { color: colors.primary }]}>✓</Text>
+      </View>
+    )
+  }
 
   return (
     <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}
+      <Animated.View
+        style={[
+          styles.base,
+          sizeStyles[size],
+          { borderColor, backgroundColor, borderWidth: 2 },
+          disabled && styles.disabled,
+          style,
+        ]}
       >
-        {icon}
-        {label ? <Text style={[styles.label, { color: textColor }]}>{label}</Text> : null}
-      </TouchableOpacity>
+        <TouchableOpacity
+          style={styles.touchable}
+          onPress={() => {
+            Haptics.selectionAsync()
+            onPressedChange?.(!pressed)
+          }}
+          onPressIn={handlePressIn}
+          onPressOut={handlePressOut}
+          disabled={disabled}
+          activeOpacity={1}
+          touchSoundDisabled={true}
+          {...props}
+        >
+          <LeftIcon />
+          {label ? <Animated.Text style={[styles.label, { color: textColor }]}>{label}</Animated.Text> : null}
+        </TouchableOpacity>
+      </Animated.View>
     </Animated.View>
   )
 }
@@ -77,10 +130,14 @@ export function Toggle({
 const styles = StyleSheet.create({
   base: {
     borderRadius: 8,
+    overflow: 'hidden',
+  },
+  touchable: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
     gap: 8,
+    flex: 1,
   },
   disabled: {
     opacity: 0.45,
@@ -89,4 +146,16 @@ 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',
+  },
 })

package/src/index.ts

@@ -28,3 +28,5 @@ export * from './components/Sheet'
 export * from './components/Select'
 export * from './components/Toast'
 export * from './components/CurrencyInput'
+export * from './components/CurrencyDisplay'
+export * from './components/CurrencyInputLarge'