@retray-dev/ui-kit 1.0.0 → 1.6.0

package/src/components/Tabs/Tabs.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react'
 import { View, TouchableOpacity, Text, Animated, StyleSheet, ViewStyle } from 'react-native'
+import * as Haptics from 'expo-haptics'
 import { useTheme } from '../../theme'
 
 export interface TabItem {
@@ -9,6 +10,10 @@ export interface TabItem {
 
 export interface TabsProps {
   tabs: TabItem[]
+  /**
+   * Controlled active tab value. When omitted the component manages state internally
+   * (uncontrolled), defaulting to the first tab.
+   */
   value?: string
   onValueChange?: (value: string) => void
   children?: React.ReactNode
@@ -22,6 +27,53 @@ export interface TabsContentProps {
   style?: ViewStyle
 }
 
+function TabTrigger({
+  tab,
+  isActive,
+  onPress,
+  onLayout,
+}: {
+  tab: TabItem
+  isActive: boolean
+  onPress: () => void
+  onLayout: (e: any) => void
+}) {
+  const { colors } = useTheme()
+  const scale = useRef(new Animated.Value(1)).current
+
+  const handlePressIn = () => {
+    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()
+  }
+
+  return (
+    <TouchableOpacity
+      style={styles.trigger}
+      onPress={onPress}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      onLayout={onLayout}
+      activeOpacity={1}
+      touchSoundDisabled={true}
+    >
+      <Animated.View style={{ transform: [{ scale }] }}>
+        <Text
+          style={[
+            styles.triggerLabel,
+            { color: isActive ? colors.foreground : colors.mutedForeground },
+            isActive && styles.activeTriggerLabel,
+          ]}
+        >
+          {tab.label}
+        </Text>
+      </Animated.View>
+    </TouchableOpacity>
+  )
+}
+
 export function Tabs({ tabs, value, onValueChange, children, style }: TabsProps) {
   const [internal, setInternal] = useState(tabs[0]?.value ?? '')
   const { colors } = useTheme()
@@ -37,8 +89,18 @@ export function Tabs({ tabs, value, onValueChange, children, style }: TabsProps)
     if (!layout) return
     if (animate) {
       Animated.parallel([
-        Animated.spring(pillX, { toValue: layout.x, useNativeDriver: false, speed: 20, bounciness: 0 }),
-        Animated.spring(pillWidth, { toValue: layout.width, useNativeDriver: false, speed: 20, bounciness: 0 }),
+        Animated.spring(pillX, {
+          toValue: layout.x,
+          useNativeDriver: false,
+          speed: 20,
+          bounciness: 0,
+        }),
+        Animated.spring(pillWidth, {
+          toValue: layout.width,
+          useNativeDriver: false,
+          speed: 20,
+          bounciness: 0,
+        }),
       ]).start()
     } else {
       pillX.setValue(layout.x)
@@ -53,6 +115,7 @@ export function Tabs({ tabs, value, onValueChange, children, style }: TabsProps)
   }, [active])
 
   const handlePress = (v: string) => {
+    Haptics.selectionAsync()
     if (!value) setInternal(v)
     onValueChange?.(v)
   }
@@ -79,35 +142,22 @@ export function Tabs({ tabs, value, onValueChange, children, style }: TabsProps)
             },
           ]}
         />
-        {tabs.map((tab) => {
-          const isActive = tab.value === active
-          return (
-            <TouchableOpacity
-              key={tab.value}
-              style={styles.trigger}
-              onPress={() => handlePress(tab.value)}
-              activeOpacity={0.7}
-              onLayout={(e) => {
-                const { x, width } = e.nativeEvent.layout
-                tabLayouts.current[tab.value] = { x, width }
-                if (tab.value === active) {
-                  animatePill(tab.value, false)
-                  initialised.current = true
-                }
-              }}
-            >
-              <Text
-                style={[
-                  styles.triggerLabel,
-                  { color: isActive ? colors.foreground : colors.mutedForeground },
-                  isActive && styles.activeTriggerLabel,
-                ]}
-              >
-                {tab.label}
-              </Text>
-            </TouchableOpacity>
-          )
-        })}
+        {tabs.map((tab) => (
+          <TabTrigger
+            key={tab.value}
+            tab={tab}
+            isActive={tab.value === active}
+            onPress={() => handlePress(tab.value)}
+            onLayout={(e) => {
+              const { x, width } = e.nativeEvent.layout
+              tabLayouts.current[tab.value] = { x, width }
+              if (tab.value === active) {
+                animatePill(tab.value, false)
+                initialised.current = true
+              }
+            }}
+          />
+        ))}
       </View>
       {children}
     </View>
@@ -133,6 +183,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12,
     borderRadius: 6,
     alignItems: 'center',
+    justifyContent: 'center',
     zIndex: 1,
   },
   triggerLabel: {

package/src/components/Textarea/Textarea.tsx

@@ -1,23 +1,36 @@
 import React, { useState } from 'react'
-import { TextInput, View, Text, StyleSheet, TextInputProps } from 'react-native'
+import { TextInput, View, Text, StyleSheet, TextInputProps, ViewStyle } from 'react-native'
 import { useTheme } from '../../theme'
 
 export interface TextareaProps extends TextInputProps {
   label?: string
+  /** Red helper text below the textarea; also changes border to `destructive` color. Takes priority over `hint`. */
   error?: string
+  /** Helper text shown below the textarea when there is no error. */
   hint?: string
+  /** Number of visible text rows. Defaults to `4`. Controls `numberOfLines` and `minHeight`. */
   rows?: number
+  /** Style for the outer container `View`. Use `style` (from `TextInputProps`) to style the `TextInput` itself. */
+  containerStyle?: ViewStyle
 }
 
-export function Textarea({ label, error, hint, rows = 4, style, onFocus, onBlur, ...props }: TextareaProps) {
+export function Textarea({
+  label,
+  error,
+  hint,
+  rows = 4,
+  containerStyle,
+  style,
+  onFocus,
+  onBlur,
+  ...props
+}: TextareaProps) {
   const { colors } = useTheme()
   const [focused, setFocused] = useState(false)
 
   return (
-    <View style={styles.container}>
-      {label ? (
-        <Text style={[styles.label, { color: colors.foreground }]}>{label}</Text>
-      ) : null}
+    <View style={[styles.container, containerStyle]}>
+      {label ? <Text style={[styles.label, { color: colors.foreground }]} allowFontScaling={true}>{label}</Text> : null}
       <TextInput
         multiline
         numberOfLines={rows}
@@ -32,17 +45,23 @@ export function Textarea({ label, error, hint, rows = 4, style, onFocus, onBlur,
           },
           style,
         ]}
-        onFocus={(e) => { setFocused(true); onFocus?.(e) }}
-        onBlur={(e) => { setFocused(false); onBlur?.(e) }}
+        onFocus={(e) => {
+          setFocused(true)
+          onFocus?.(e)
+        }}
+        onBlur={(e) => {
+          setFocused(false)
+          onBlur?.(e)
+        }}
         placeholderTextColor={colors.mutedForeground}
         allowFontScaling={true}
         {...props}
       />
       {error ? (
-        <Text style={[styles.helperText, { color: colors.destructive }]}>{error}</Text>
+        <Text style={[styles.helperText, { color: colors.destructive }]} allowFontScaling={true}>{error}</Text>
       ) : null}
       {!error && hint ? (
-        <Text style={[styles.helperText, { color: colors.mutedForeground }]}>{hint}</Text>
+        <Text style={[styles.helperText, { color: colors.mutedForeground }]} allowFontScaling={true}>{hint}</Text>
       ) : null}
     </View>
   )

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,
+  Easing,
+} from 'react-native-reanimated'
+import { scheduleOnRN } from 'react-native-worklets'
+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) scheduleOnRN(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) scheduleOnRN(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/index.ts

@@ -27,3 +27,4 @@ export * from './components/Slider'
 export * from './components/Sheet'
 export * from './components/Select'
 export * from './components/Toast'
+export * from './components/CurrencyInput'

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 = {