@retray-dev/ui-kit 2.5.1 → 2.6.0

package/src/components/Progress/Progress.tsx

@@ -1,6 +1,7 @@
 import React, { useRef, useState, useEffect } from 'react'
 import { View, Animated, StyleSheet, ViewStyle } from 'react-native'
 import { useTheme } from '../../theme'
+import { vs } from '../../utils/scaling'
 
 export interface ProgressProps {
   /** Current progress value. Clamped to `[0, max]`. Defaults to `0`. */
@@ -40,7 +41,7 @@ export function Progress({ value = 0, max = 100, style }: ProgressProps) {
 
 const styles = StyleSheet.create({
   track: {
-    height: 8,
+    height: vs(8),
     borderRadius: 999,
     overflow: 'hidden',
     width: '100%',

package/src/components/RadioGroup/RadioGroup.tsx

@@ -1,7 +1,10 @@
 import React, { useRef } from 'react'
-import { TouchableOpacity, Animated, View, Text, StyleSheet, ViewStyle } from 'react-native'
-import * as Haptics from 'expo-haptics'
+import { TouchableOpacity, Animated, View, Text, StyleSheet, ViewStyle, Platform } from 'react-native'
+import { selectionAsync as hapticSelection } from '../../utils/haptics'
+
+const nativeDriver = Platform.OS !== 'web'
 import { useTheme } from '../../theme'
+import { s, vs, ms, mvs } from '../../utils/scaling'
 
 export interface RadioOption {
   label: string
@@ -31,11 +34,11 @@ function RadioItem({
 
   const handlePressIn = () => {
     if (option.disabled) return
-    Animated.spring(scale, { toValue: 0.95, useNativeDriver: true, speed: 40, bounciness: 0 }).start()
+    Animated.spring(scale, { toValue: 0.95, useNativeDriver: nativeDriver, speed: 40, bounciness: 0 }).start()
   }
 
   const handlePressOut = () => {
-    Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start()
+    Animated.spring(scale, { toValue: 1, useNativeDriver: nativeDriver, speed: 40, bounciness: 4 }).start()
   }
 
   return (
@@ -44,7 +47,7 @@ function RadioItem({
         style={styles.row}
         onPress={() => {
           if (!option.disabled) {
-            Haptics.selectionAsync()
+            hapticSelection()
             onSelect()
           }
         }}
@@ -101,7 +104,7 @@ export function RadioGroup({
 
 const styles = StyleSheet.create({
   container: {
-    gap: 12,
+    gap: vs(12),
   },
   horizontal: {
     flexDirection: 'row',
@@ -110,23 +113,23 @@ const styles = StyleSheet.create({
   row: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: 12,
+    gap: s(12),
   },
   radio: {
-    width: 24,
-    height: 24,
-    borderRadius: 12,
+    width: s(24),
+    height: s(24),
+    borderRadius: s(12),
     borderWidth: 1.5,
     alignItems: 'center',
     justifyContent: 'center',
   },
   dot: {
-    width: 10,
-    height: 10,
-    borderRadius: 5,
+    width: s(10),
+    height: s(10),
+    borderRadius: s(5),
   },
   label: {
-    fontSize: 14,
-    lineHeight: 20,
+    fontSize: ms(14),
+    lineHeight: mvs(20),
   },
 })

package/src/components/Select/Select.tsx

@@ -2,8 +2,9 @@ import React, { useRef, useState } from 'react'
 import { View, Text, TouchableOpacity, Modal, Animated, StyleSheet, ViewStyle, Platform } from 'react-native'
 import { Picker } from '@react-native-picker/picker'
 import { Entypo } from '@expo/vector-icons'
-import * as Haptics from 'expo-haptics'
+import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
+import { s, vs, ms } from '../../utils/scaling'
 
 const isIOS = Platform.OS === 'ios'
 const isAndroid = Platform.OS === 'android'
@@ -55,7 +56,7 @@ export function Select({
 
   const handleOpen = () => {
     if (disabled) return
-    Haptics.selectionAsync()
+    hapticSelection()
     if (isIOS) {
       setPendingValue(value)
       setPickerVisible(true)
@@ -70,7 +71,7 @@ export function Select({
 
   const handleConfirm = () => {
     if (pendingValue !== undefined && pendingValue !== '') {
-      Haptics.selectionAsync()
+      hapticSelection()
       onValueChange?.(pendingValue)
     }
     setPickerVisible(false)
@@ -165,7 +166,7 @@ export function Select({
           selectedValue={value ?? ''}
           onValueChange={(val) => {
             if (val !== '') {
-              Haptics.selectionAsync()
+              hapticSelection()
               onValueChange?.(val as string)
             }
           }}
@@ -227,10 +228,10 @@ export function Select({
 
 const styles = StyleSheet.create({
   container: {
-    gap: 8,
+    gap: vs(8),
   },
   label: {
-    fontSize: 15,
+    fontSize: ms(15),
     fontWeight: '500',
   },
   trigger: {
@@ -238,9 +239,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'space-between',
     borderWidth: 1.5,
-    borderRadius: 8,
-    paddingHorizontal: 16,
-    paddingVertical: 14,
+    borderRadius: ms(8),
+    paddingHorizontal: s(16),
+    paddingVertical: vs(14),
     shadowColor: '#000',
     shadowOffset: { width: 0, height: 1 },
     shadowOpacity: 0.04,
@@ -248,41 +249,41 @@ const styles = StyleSheet.create({
     elevation: 1,
   },
   triggerText: {
-    fontSize: 17,
+    fontSize: ms(17),
     flex: 1,
   },
   chevron: {
-    marginLeft: 8,
+    marginLeft: s(8),
   },
   helperText: {
-    fontSize: 13,
+    fontSize: ms(13),
   },
   iosBackdrop: {
     flex: 1,
     backgroundColor: 'rgba(0,0,0,0.4)',
   },
   iosSheet: {
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-    paddingBottom: 32,
+    borderTopLeftRadius: ms(16),
+    borderTopRightRadius: ms(16),
+    paddingBottom: vs(32),
   },
   iosToolbar: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
+    paddingHorizontal: s(16),
+    paddingVertical: vs(12),
     borderBottomWidth: 1,
   },
   iosToolbarTitle: {
-    fontSize: 17,
+    fontSize: ms(17),
     fontWeight: '600',
   },
   iosDoneBtn: {
-    padding: 4,
+    padding: s(4),
   },
   iosDoneBtnText: {
-    fontSize: 17,
+    fontSize: ms(17),
     fontWeight: '600',
   },
   androidHiddenPicker: {
@@ -292,9 +293,9 @@ const styles = StyleSheet.create({
   },
   webPicker: {
     borderWidth: 1.5,
-    borderRadius: 8,
-    paddingHorizontal: 16,
-    paddingVertical: 14,
-    fontSize: 17,
+    borderRadius: ms(8),
+    paddingHorizontal: s(16),
+    paddingVertical: vs(14),
+    fontSize: ms(17),
   },
 })

package/src/components/Sheet/Sheet.tsx

@@ -7,8 +7,9 @@ import {
   BottomSheetModalProvider,
   type BottomSheetBackdropProps,
 } from '@gorhom/bottom-sheet'
-import * as Haptics from 'expo-haptics'
+import { impactLight } from '../../utils/haptics'
 import { useTheme } from '../../theme'
+import { s, vs, ms, mvs } from '../../utils/scaling'
 
 export { BottomSheetModalProvider }
 
@@ -41,7 +42,7 @@ export function Sheet({
 
   useEffect(() => {
     if (open) {
-      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
+      impactLight()
       ref.current?.present()
     } else {
       ref.current?.dismiss()
@@ -88,28 +89,28 @@ export function Sheet({
 
 const styles = StyleSheet.create({
   background: {
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
+    borderTopLeftRadius: ms(16),
+    borderTopRightRadius: ms(16),
   },
   handle: {
-    width: 36,
-    height: 4,
-    borderRadius: 2,
+    width: s(36),
+    height: vs(4),
+    borderRadius: ms(2),
   },
   content: {
-    paddingHorizontal: 24,
-    paddingBottom: 32,
+    paddingHorizontal: s(24),
+    paddingBottom: vs(32),
   },
   header: {
-    gap: 8,
-    marginBottom: 16,
+    gap: vs(8),
+    marginBottom: vs(16),
   },
   title: {
-    fontSize: 18,
+    fontSize: ms(18),
     fontWeight: '600',
   },
   description: {
-    fontSize: 14,
-    lineHeight: 20,
+    fontSize: ms(14),
+    lineHeight: mvs(20),
   },
 })

package/src/components/Slider/Slider.tsx

@@ -1,8 +1,9 @@
 import React, { useRef } from 'react'
 import { View, Text, StyleSheet, ViewStyle } from 'react-native'
 import RNSlider from '@react-native-community/slider'
-import * as Haptics from 'expo-haptics'
+import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
+import { vs, ms } from '../../utils/scaling'
 
 export interface SliderProps {
   value?: number
@@ -39,7 +40,7 @@ export function Slider({
   const handleValueChange = (v: number) => {
     if (step && v !== lastSteppedValue.current) {
       lastSteppedValue.current = v
-      Haptics.selectionAsync()
+      hapticSelection()
     }
     onValueChange?.(v)
   }
@@ -82,7 +83,7 @@ export function Slider({
 
 const styles = StyleSheet.create({
   wrapper: {
-    gap: 8,
+    gap: vs(8),
   },
   header: {
     flexDirection: 'row',
@@ -90,16 +91,16 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   label: {
-    fontSize: 15,
+    fontSize: ms(15),
     fontWeight: '500',
   },
   valueText: {
-    fontSize: 14,
+    fontSize: ms(14),
     fontWeight: '500',
   },
   slider: {
     width: '100%',
-    height: 40,
+    height: vs(40),
   },
   disabled: {
     opacity: 0.45,

package/src/components/Switch/Switch.tsx

@@ -2,13 +2,14 @@ import React, { useEffect, useRef } from 'react'
 import { TouchableOpacity, Animated, StyleSheet, ViewStyle, Platform, View } from 'react-native'
 
 const nativeDriver = Platform.OS !== 'web'
-import * as Haptics from 'expo-haptics'
+import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
+import { s, vs } from '../../utils/scaling'
 
-const TRACK_WIDTH = 60
-const TRACK_HEIGHT = 36
-const THUMB_SIZE = 28
-const THUMB_OFFSET = 4
+const TRACK_WIDTH = s(60)
+const TRACK_HEIGHT = vs(36)
+const THUMB_SIZE = s(28)
+const THUMB_OFFSET = s(4)
 const THUMB_TRAVEL = TRACK_WIDTH - THUMB_SIZE - THUMB_OFFSET * 2
 
 export interface SwitchProps {
@@ -47,7 +48,7 @@ export function Switch({ checked = false, onCheckedChange, disabled, style }: Sw
     <View style={[{ opacity: disabled ? 0.45 : 1 }, style]}>
       <TouchableOpacity
         onPress={() => {
-          Haptics.selectionAsync()
+          hapticSelection()
           onCheckedChange?.(!checked)
         }}
         disabled={disabled}

package/src/components/Tabs/Tabs.tsx

@@ -1,7 +1,10 @@
 import React, { useState, useRef, useEffect } from 'react'
-import { View, TouchableOpacity, Text, Animated, StyleSheet, ViewStyle } from 'react-native'
-import * as Haptics from 'expo-haptics'
+import { View, TouchableOpacity, Text, Animated, StyleSheet, ViewStyle, Platform } from 'react-native'
+import { selectionAsync as hapticSelection } from '../../utils/haptics'
+
+const nativeDriver = Platform.OS !== 'web'
 import { useTheme } from '../../theme'
+import { s, vs, ms } from '../../utils/scaling'
 
 export interface TabItem {
   label: string
@@ -43,11 +46,11 @@ function TabTrigger({
   const scale = useRef(new Animated.Value(1)).current
 
   const handlePressIn = () => {
-    Animated.spring(scale, { toValue: 0.95, useNativeDriver: true, speed: 40, bounciness: 0 }).start()
+    Animated.spring(scale, { toValue: 0.95, useNativeDriver: nativeDriver, speed: 40, bounciness: 0 }).start()
   }
 
   const handlePressOut = () => {
-    Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start()
+    Animated.spring(scale, { toValue: 1, useNativeDriver: nativeDriver, speed: 40, bounciness: 4 }).start()
   }
 
   return (
@@ -123,7 +126,7 @@ export function Tabs({ tabs, value, onValueChange, children, style }: TabsProps)
   }, [active])
 
   const handlePress = (v: string) => {
-    Haptics.selectionAsync()
+    hapticSelection()
     if (!value) setInternal(v)
     onValueChange?.(v)
   }
@@ -180,16 +183,16 @@ export function TabsContent({ value, activeValue, children, style }: TabsContent
 const styles = StyleSheet.create({
   list: {
     flexDirection: 'row',
-    borderRadius: 12,
-    padding: 4,
-    gap: 4,
+    borderRadius: ms(12),
+    padding: s(4),
+    gap: s(4),
   },
   pill: {},
   trigger: {
     flex: 1,
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-    borderRadius: 8,
+    paddingVertical: vs(12),
+    paddingHorizontal: s(16),
+    borderRadius: ms(8),
     alignItems: 'center',
     justifyContent: 'center',
     zIndex: 1,
@@ -198,15 +201,15 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    gap: 8,
+    gap: s(8),
   },
   triggerIcon: {
-    marginRight: 6,
+    marginRight: s(6),
     alignItems: 'center',
     justifyContent: 'center',
   },
   triggerLabel: {
-    fontSize: 15,
+    fontSize: ms(15),
     fontWeight: '400',
   },
   activeTriggerLabel: {

package/src/components/Text/Text.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Text as RNText, TextProps as RNTextProps, TextStyle } from 'react-native'
 import { useTheme } from '../../theme'
+import { ms, mvs } from '../../utils/scaling'
 
 export type TextVariant = 'h1' | 'h2' | 'h3' | 'body' | 'caption' | 'label'
 
@@ -10,12 +11,12 @@ export interface TextProps extends RNTextProps {
 }
 
 const variantStyles: Record<TextVariant, TextStyle> = {
-  h1: { fontSize: 40, fontWeight: '700', lineHeight: 52 },
-  h2: { fontSize: 28, fontWeight: '700', lineHeight: 36 },
-  h3: { fontSize: 22, fontWeight: '600', lineHeight: 30 },
-  body: { fontSize: 17, fontWeight: '400', lineHeight: 26 },
-  caption: { fontSize: 13, fontWeight: '400', lineHeight: 20 },
-  label: { fontSize: 15, fontWeight: '500', lineHeight: 22 },
+  h1: { fontSize: ms(40), fontWeight: '700', lineHeight: mvs(52) },
+  h2: { fontSize: ms(28), fontWeight: '700', lineHeight: mvs(36) },
+  h3: { fontSize: ms(22), fontWeight: '600', lineHeight: mvs(30) },
+  body: { fontSize: ms(17), fontWeight: '400', lineHeight: mvs(26) },
+  caption: { fontSize: ms(13), fontWeight: '400', lineHeight: mvs(20) },
+  label: { fontSize: ms(15), fontWeight: '500', lineHeight: mvs(22) },
 }
 
 export function Text({ variant = 'body', color, style, children, ...props }: TextProps) {

package/src/components/Textarea/Textarea.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { TextInput, View, Text, StyleSheet, TextInputProps, ViewStyle, Platform } from 'react-native'
 import { useTheme } from '../../theme'
+import { s, vs, ms } from '../../utils/scaling'
 
 const webInputResetStyle: any =
   Platform.OS === 'web'
@@ -50,7 +51,7 @@ export function Textarea({
                 : colors.border,
             color: colors.foreground,
             backgroundColor: colors.background,
-            minHeight: rows * 30,
+            minHeight: rows * vs(30),
           },
           webInputResetStyle,
           style,
@@ -79,20 +80,20 @@ export function Textarea({
 
 const styles = StyleSheet.create({
   container: {
-    gap: 8,
+    gap: vs(8),
   },
   label: {
-    fontSize: 15,
+    fontSize: ms(15),
     fontWeight: '500',
   },
   input: {
     borderWidth: 1.5,
-    borderRadius: 8,
-    paddingHorizontal: 16,
-    paddingVertical: 14,
-    fontSize: 17,
+    borderRadius: ms(8),
+    paddingHorizontal: s(16),
+    paddingVertical: vs(14),
+    fontSize: ms(17),
   },
   helperText: {
-    fontSize: 13,
+    fontSize: ms(13),
   },
 })

package/src/components/Toast/Toast.tsx

@@ -11,8 +11,10 @@ import Animated, {
 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 { 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'
 
@@ -22,6 +24,13 @@ export interface ToastItem {
   description?: string
   variant?: ToastVariant
   icon?: React.ReactNode
+  /**
+   * Icon name from `@expo/vector-icons`. See https://icons.expo.fyi.
+   * Takes precedence over `icon`. When neither is set, a default variant icon is shown.
+   */
+  iconName?: string
+  /** Override the resolved icon color. Defaults to the variant text color. */
+  iconColor?: string
   /** Auto-dismiss delay in milliseconds. Defaults to `3000`. */
   duration?: number
 }
@@ -108,7 +117,9 @@ function ToastNotification({ item, onDismiss }: { item: ToastItem; onDismiss: ()
       <Entypo name="info-with-circle" size={22} color={textColor} />
     )
 
-  const leftIcon = item.icon ?? defaultIcon
+  const leftIcon: React.ReactNode = item.iconName
+    ? renderIcon(item.iconName, 22, item.iconColor ?? textColor)
+    : item.icon ?? defaultIcon
 
   return (
     <GestureDetector gesture={panGesture}>
@@ -148,11 +159,11 @@ export function ToastProvider({ children }: ToastProviderProps) {
   const toast = useCallback((item: Omit<ToastItem, 'id'>) => {
     const id = Math.random().toString(36).slice(2)
     if (item.variant === 'success') {
-      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success)
+      notificationSuccess()
     } else if (item.variant === 'destructive') {
-      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error)
+      notificationError()
     } else {
-      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
+      impactLight()
     }
     setToasts((prev) => [{ ...item, id }, ...prev].slice(0, 3))
   }, [])
@@ -176,23 +187,23 @@ export function ToastProvider({ children }: ToastProviderProps) {
 const styles = StyleSheet.create({
   container: {
     position: 'absolute',
-    left: 16,
-    right: 16,
-    gap: 8,
+    left: s(16),
+    right: s(16),
+    gap: vs(8),
     zIndex: 9999,
   },
   containerWeb: {
     left: undefined,
     right: undefined,
     alignSelf: 'center',
-    width: 400,
+    width: s(400),
   },
   toast: {
     flexDirection: 'row',
     alignItems: 'center',
-    borderRadius: 16,
-    paddingHorizontal: 20,
-    paddingVertical: 14,
+    borderRadius: ms(16),
+    paddingHorizontal: s(20),
+    paddingVertical: vs(14),
     shadowColor: '#000',
     shadowOffset: { width: 0, height: 4 },
     shadowOpacity: 0.15,
@@ -201,23 +212,23 @@ const styles = StyleSheet.create({
   },
   toastContent: {
     flex: 1,
-    gap: 4,
+    gap: vs(4),
   },
   leftIconContainer: {
-    width: 40,
+    width: s(40),
     alignItems: 'center',
     justifyContent: 'center',
-    marginRight: 8,
+    marginRight: s(8),
   },
   toastTitle: {
-    fontSize: 15,
+    fontSize: ms(15),
     fontWeight: '600',
   },
   toastDescription: {
-    fontSize: 14,
+    fontSize: ms(14),
   },
   dismissButton: {
-    padding: 8,
-    marginLeft: 4,
+    padding: s(8),
+    marginLeft: s(4),
   },
 })