@retray-dev/ui-kit 5.4.0 → 6.0.0

package/src/components/Toast/Toast.tsx

@@ -1,281 +1,55 @@
-import React, { createContext, useContext, useState, useCallback, useEffect } from 'react'
-import { View, Text, TouchableOpacity, StyleSheet, Platform } from 'react-native'
-import { FontAwesome5, MaterialIcons, Entypo, AntDesign } from '@expo/vector-icons'
-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 React from 'react'
+import { Toaster, toast as sonnerToast } from 'sonner-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { notificationSuccess, notificationError, impactLight } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
-import { renderIcon } from '../../utils/icons'
 
-export type ToastVariant = 'default' | 'destructive' | 'success' | 'warning'
-
-export interface ToastAction {
-  label: string
-  onPress: () => void
-}
-
-export interface ToastItem {
-  id: string
-  title?: string
-  description?: string
-  variant?: ToastVariant
-  icon?: React.ReactNode
-  iconName?: string
-  iconColor?: string
-  /** Auto-dismiss delay in milliseconds. Defaults to `3000`. */
-  duration?: number
-  /** Optional inline action button rendered at the end of the toast. */
-  action?: ToastAction
-}
-
-interface ToastContextValue {
-  toast: (item: Omit<ToastItem, 'id'>) => void
-  dismiss: (id: string) => void
-}
-
-const ToastContext = createContext<ToastContextValue>({
-  toast: () => {},
-  dismiss: () => {},
-})
+// Direct function API — no hook required
+export { sonnerToast as toast }
 
+// useToast — backward-compat wrapper
 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 = useSharedValue(-80)
-  const translateX = useSharedValue(0)
-  const opacity = useSharedValue(0)
-
-  useEffect(() => {
-    translateY.value = withTiming(0, { duration: 120, easing: Easing.out(Easing.exp) })
-    opacity.value = withTiming(1, { duration: 100 })
-
-    const timer = setTimeout(() => {
-      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 variant = item.variant ?? 'default'
-
-  const bgColor = {
-    default:     colors.card,
-    destructive: colors.destructiveTint,
-    success:     colors.successTint,
-    warning:     colors.warningTint,
-  }[variant]
-
-  const borderColor = {
-    default:     colors.border,
-    destructive: colors.destructiveBorder,
-    success:     colors.successBorder,
-    warning:     colors.warningBorder,
-  }[variant]
-
-  const accentColor = {
-    default:     colors.primary,
-    destructive: colors.destructive,
-    success:     colors.success,
-    warning:     colors.warning,
-  }[variant]
-
-  const titleColor = variant === 'default' ? colors.foreground : accentColor
-  const descColor = variant === 'default' ? colors.foregroundMuted : accentColor
-
-  const defaultIcon =
-    variant === 'success' ? (
-      <FontAwesome5 name="check-circle" size={16} color={accentColor} />
-    ) : variant === 'destructive' ? (
-      <AntDesign name="exclamation-circle" size={16} color={accentColor} />
-    ) : variant === 'warning' ? (
-      <MaterialIcons name="warning-amber" size={17} color={accentColor} />
-    ) : (
-      <Entypo name="info-with-circle" size={16} color={accentColor} />
-    )
-
-  const leftIcon: React.ReactNode = item.iconName
-    ? renderIcon(item.iconName, 16, item.iconColor ?? accentColor)
-    : item.icon ?? defaultIcon
-
-  return (
-    <GestureDetector gesture={panGesture}>
-      <Animated.View style={[styles.toast, { backgroundColor: bgColor, borderColor }, animatedStyle]}>
-        <View style={styles.leftIconContainer}>{leftIcon}</View>
-        <View style={styles.toastContent}>
-          {item.title ? (
-            <Text style={[styles.toastTitle, { color: titleColor }]} allowFontScaling={true}>{item.title}</Text>
-          ) : null}
-          {item.description ? (
-            <Text style={[styles.toastDescription, { color: descColor }]} allowFontScaling={true}>
-              {item.description}
-            </Text>
-          ) : null}
-        </View>
-        {item.action && (
-          <TouchableOpacity
-            onPress={() => { item.action!.onPress(); onDismiss() }}
-            style={styles.actionButton}
-            touchSoundDisabled={true}
-          >
-            <Text style={[styles.actionLabel, { color: accentColor }]} allowFontScaling={true}>
-              {item.action.label}
-            </Text>
-          </TouchableOpacity>
-        )}
-        <TouchableOpacity onPress={onDismiss} style={styles.dismissButton} touchSoundDisabled={true}>
-          <AntDesign name="close-circle" size={16} color={descColor} />
-        </TouchableOpacity>
-      </Animated.View>
-    </GestureDetector>
-  )
-}
-
-/**
- * Must wrap the app root alongside ThemeProvider.
- * Renders toasts in an absolute overlay at the top of the screen.
- * Use `useToast()` anywhere inside to trigger toasts.
- */
-export interface ToastProviderProps {
-  children: React.ReactNode
+  return {
+    toast: sonnerToast,
+    dismiss: sonnerToast.dismiss,
+  }
 }
 
-export function ToastProvider({ children }: ToastProviderProps) {
-  const [toasts, setToasts] = useState<ToastItem[]>([])
+// ToastProvider — wraps children + renders the Toaster
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const { colorScheme } = useTheme()
   const insets = useSafeAreaInsets()
 
-  const toast = useCallback((item: Omit<ToastItem, 'id'>) => {
-    const id = Math.random().toString(36).slice(2)
-    if (item.variant === 'success') {
-      notificationSuccess()
-    } else if (item.variant === 'destructive') {
-      notificationError()
-    } else if (item.variant === 'warning') {
-      notificationError()
-    } else {
-      impactLight()
-    }
-    setToasts((prev) => [{ ...item, id }, ...prev].slice(0, 3))
-  }, [])
-
-  const dismiss = useCallback((id: string) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id))
-  }, [])
-
   return (
-    <ToastContext.Provider value={{ toast, dismiss }}>
+    <>
       {children}
-      <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)} />
-        ))}
-      </View>
-    </ToastContext.Provider>
+      <Toaster
+        theme={colorScheme}
+        position="top-center"
+        richColors={false}
+        gap={vs(8)}
+        offset={insets.top + vs(8)}
+        visibleToasts={3}
+        closeButton={false}
+        swipeToDismissDirection="up"
+        duration={4000}
+        toastOptions={{
+          style: {
+            borderRadius: ms(12),
+            paddingHorizontal: s(12),
+            paddingVertical: vs(10),
+          },
+          titleStyle: {
+            fontFamily: 'Poppins-Medium',
+            fontSize: ms(13),
+          },
+          descriptionStyle: {
+            fontFamily: 'Poppins-Regular',
+            fontSize: ms(12),
+            opacity: 0.85,
+          },
+        }}
+      />
+    </>
   )
 }
-
-const styles = StyleSheet.create({
-  container: {
-    position: 'absolute',
-    left: s(16),
-    right: s(16),
-    gap: vs(8),
-    zIndex: 9999,
-  },
-  containerWeb: {
-    left: undefined,
-    right: undefined,
-    alignSelf: 'center',
-    width: s(400),
-  },
-  toast: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    borderRadius: ms(10),
-    borderWidth: 0.5,
-    paddingHorizontal: s(12),
-    paddingVertical: vs(10),
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.06,
-    shadowRadius: 4,
-    elevation: 3,
-  },
-  toastContent: {
-    flex: 1,
-    gap: vs(2),
-  },
-  leftIconContainer: {
-    marginTop: vs(1),
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: s(10),
-  },
-  toastTitle: {
-    fontFamily: 'Poppins-Medium',
-    fontSize: ms(13),
-    lineHeight: ms(18),
-  },
-  toastDescription: {
-    fontFamily: 'Poppins-Regular',
-    fontSize: ms(12),
-    lineHeight: ms(17),
-    opacity: 0.85,
-  },
-  actionButton: {
-    paddingHorizontal: s(8),
-    paddingVertical: vs(4),
-    marginLeft: s(4),
-  },
-  actionLabel: {
-    fontFamily: 'Poppins-Medium',
-    fontSize: ms(12),
-    textDecorationLine: 'underline',
-  },
-  dismissButton: {
-    padding: s(6),
-    marginLeft: s(2),
-    marginTop: vs(0),
-  },
-})

package/src/components/Toast/index.ts

@@ -1,2 +1 @@
-export { ToastProvider, useToast } from './Toast'
-export type { ToastProviderProps, ToastItem, ToastVariant } from './Toast'
+export { ToastProvider, useToast, toast } from './Toast'

package/src/components/Toggle/Toggle.tsx

@@ -77,11 +77,11 @@ export function Toggle({
 
   const handlePressIn = () => {
     if (disabled) return
-    Animated.spring(scale, { toValue: 0.95, useNativeDriver: nativeDriver, speed: 40, bounciness: 0 }).start()
+    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, speed: 40, bounciness: 4 }).start()
+    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.

package/src/index.ts

@@ -34,6 +34,7 @@ export * from './components/CurrencyDisplay'
 // CurrencyInputLarge is deprecated — use <CurrencyInput size="large" /> instead
 export { CurrencyInput as CurrencyInputLarge } from './components/CurrencyInput'
 export * from './components/ListItem'
+export * from './components/MenuItem'
 export * from './components/Chip'
 export * from './components/ConfirmDialog'
 export * from './components/LabelValue'

package/src/theme/colors.ts

@@ -89,6 +89,9 @@ export function deriveColors(t: ThemeColors, scheme: 'light' | 'dark'): Resolved
     successBorder,
     warningTint,
     warningBorder,
+    overlay: t.overlay ?? 'rgba(0,0,0,0.45)',
+    accentResolved: t.accent ?? t.primary,
+    accentForegroundResolved: t.accentForeground ?? t.primaryForeground,
     ring: t.primary,       // focus ring always = primary
     input: t.border,       // input border always = border
   }

package/src/theme/types.ts

@@ -14,6 +14,12 @@ export type ThemeColors = {
   successForeground: string
   warning: string
   warningForeground: string
+  /** Backdrop/overlay color. Default: 'rgba(0,0,0,0.45)' */
+  overlay?: string
+  /** Color accent (e.g. Airbnb coral). Default: same as primary */
+  accent?: string
+  /** Text color on accent background. Default: same as primaryForeground */
+  accentForeground?: string
 }
 
 // Full resolved palette — what components actually consume via useTheme().
@@ -35,6 +41,11 @@ export type ResolvedColors = ThemeColors & {
   warningTint: string
   warningBorder: string
 
+  // Derived optional tokens (always present in ResolvedColors)
+  overlay: string            // backdrop — default 'rgba(0,0,0,0.45)'
+  accentResolved: string     // accent — default = primary
+  accentForegroundResolved: string  // text on accent — default = primaryForeground
+
   // Aliases (ring + input always equal primary + border for coherence)
   ring: string               // = primary
   input: string              // = border

package/src/tokens.ts

@@ -170,10 +170,10 @@ export const TYPOGRAPHY = {
   },
   'uppercase-tag': {
     fontFamily: 'Poppins-Bold',
-    fontSize: 8,
+    fontSize: 10,
     fontWeight: '700' as const,
-    lineHeight: 10,
-    letterSpacing: 0.32,
+    lineHeight: 13,
+    letterSpacing: 0.8,
     textTransform: 'uppercase' as const,
   },
   'button-lg': {