@retray-dev/ui-kit 2.5.1 → 2.5.2

package/src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { Modal, View, Text, StyleSheet, TouchableOpacity } from 'react-native'
 import { useTheme } from '../../theme'
 import { Button } from '../Button'
+import { s, vs, ms, mvs } from '../../utils/scaling'
 
 export interface ConfirmDialogProps {
   visible: boolean
@@ -57,14 +58,14 @@ const styles = StyleSheet.create({
     backgroundColor: 'rgba(0,0,0,0.5)',
     justifyContent: 'center',
     alignItems: 'center',
-    padding: 24,
+    padding: s(24),
   },
   dialog: {
     width: '100%',
-    maxWidth: 400,
-    borderRadius: 16,
-    padding: 24,
-    gap: 12,
+    maxWidth: s(400),
+    borderRadius: ms(16),
+    padding: s(24),
+    gap: vs(12),
     shadowColor: '#000',
     shadowOffset: { width: 0, height: 8 },
     shadowOpacity: 0.15,
@@ -72,16 +73,16 @@ const styles = StyleSheet.create({
     elevation: 8,
   },
   title: {
-    fontSize: 18,
+    fontSize: ms(18),
     fontWeight: '600',
-    lineHeight: 26,
+    lineHeight: mvs(26),
   },
   description: {
-    fontSize: 15,
-    lineHeight: 22,
+    fontSize: ms(15),
+    lineHeight: mvs(22),
   },
   actions: {
-    gap: 10,
-    marginTop: 8,
+    gap: vs(10),
+    marginTop: vs(8),
   },
 })

package/src/components/CurrencyDisplay/CurrencyDisplay.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { View, Text, StyleSheet, ViewStyle } from 'react-native'
 import { useTheme } from '../../theme'
+import { ms } from '../../utils/scaling'
 
 export interface CurrencyDisplayProps {
   value: number | string
@@ -42,7 +43,7 @@ export function CurrencyDisplay({ value, prefix = '$', showDecimals = false, tex
 const styles = StyleSheet.create({
   container: {},
   amount: {
-    fontSize: 56,
+    fontSize: ms(56),
     fontWeight: '700',
   },
 })

package/src/components/CurrencyInput/CurrencyInput.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { ViewStyle, TextStyle } from 'react-native'
 import { Input } from '../Input'
+import { ms } from '../../utils/scaling'
 
 export interface CurrencyInputProps {
   value?: string
@@ -54,7 +55,7 @@ export function CurrencyInput({
     onChangeValue?.(isNaN(raw) ? 0 : raw)
   }
 
-  const inputStyle: TextStyle = size === 'large' ? { fontSize: 36 } : {}
+  const inputStyle: TextStyle = size === 'large' ? { fontSize: ms(36) } : {}
 
   return (
     <Input

package/src/components/EmptyState/EmptyState.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { View, Text, StyleSheet, ViewStyle } from 'react-native'
 import { useTheme } from '../../theme'
+import { s, vs, ms, mvs } from '../../utils/scaling'
 
 export interface EmptyStateProps {
   icon?: React.ReactNode
@@ -58,45 +59,45 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     borderWidth: 1,
     borderStyle: 'dashed',
-    borderRadius: 12,
-    padding: 32,
-    gap: 16,
+    borderRadius: ms(12),
+    padding: s(32),
+    gap: vs(16),
   },
   containerCompact: {
-    padding: 20,
-    gap: 10,
+    padding: s(20),
+    gap: vs(10),
   },
   iconWrapper: {
-    width: 48,
-    height: 48,
-    borderRadius: 12,
+    width: s(48),
+    height: s(48),
+    borderRadius: ms(12),
     alignItems: 'center',
     justifyContent: 'center',
   },
   iconWrapperCompact: {
-    width: 36,
-    height: 36,
-    borderRadius: 8,
+    width: s(36),
+    height: s(36),
+    borderRadius: ms(8),
   },
   textWrapper: {
     alignItems: 'center',
-    gap: 8,
-    maxWidth: 320,
+    gap: vs(8),
+    maxWidth: s(320),
   },
   title: {
-    fontSize: 18,
+    fontSize: ms(18),
     fontWeight: '500',
     textAlign: 'center',
   },
   titleCompact: {
-    fontSize: 15,
+    fontSize: ms(15),
   },
   description: {
-    fontSize: 14,
-    lineHeight: 20,
+    fontSize: ms(14),
+    lineHeight: mvs(20),
     textAlign: 'center',
   },
   action: {
-    marginTop: 8,
+    marginTop: vs(8),
   },
 })

package/src/components/Input/Input.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { TextInput, View, Text, StyleSheet, TextInputProps, ViewStyle, TextStyle, TouchableOpacity, Platform } from 'react-native'
 import { AntDesign } from '@expo/vector-icons'
 import { useTheme } from '../../theme'
+import { s, vs, ms } from '../../utils/scaling'
 
 const webInputResetStyle: any =
   Platform.OS === 'web'
@@ -112,43 +113,43 @@ export function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixS
 
 const styles = StyleSheet.create({
   container: {
-    gap: 8,
+    gap: vs(8),
   },
   label: {
-    fontSize: 15,
+    fontSize: ms(15),
     fontWeight: '500',
   },
   inputWrapper: {
     flexDirection: 'row',
     alignItems: 'center',
     borderWidth: 1.5,
-    borderRadius: 8,
-    paddingHorizontal: 16,
-    paddingVertical: 14,
+    borderRadius: ms(8),
+    paddingHorizontal: s(16),
+    paddingVertical: vs(14),
   },
   input: {
     flex: 1,
-    fontSize: 17,
+    fontSize: ms(17),
     paddingVertical: 0,
   },
   prefixContainer: {
-    marginRight: 8,
+    marginRight: s(8),
   },
   prefixText: {
-    fontSize: 17,
-    marginRight: 8,
+    fontSize: ms(17),
+    marginRight: s(8),
   },
   suffixContainer: {
-    marginLeft: 8,
+    marginLeft: s(8),
   },
   suffixText: {
-    fontSize: 17,
-    marginLeft: 8,
+    fontSize: ms(17),
+    marginLeft: s(8),
   },
   passwordToggle: {
-    padding: 4,
+    padding: s(4),
   },
   helperText: {
-    fontSize: 13,
+    fontSize: ms(13),
   },
 })

package/src/components/LabelValue/LabelValue.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { View, Text, StyleSheet, ViewStyle } from 'react-native'
 import { useTheme } from '../../theme'
+import { s, vs, ms, mvs } from '../../utils/scaling'
 
 export interface LabelValueProps {
   label: string
@@ -32,16 +33,16 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    gap: 12,
+    gap: s(12),
   },
   label: {
-    fontSize: 13,
-    lineHeight: 18,
+    fontSize: ms(13),
+    lineHeight: mvs(18),
   },
   value: {
-    fontSize: 15,
+    fontSize: ms(15),
     fontWeight: '500',
-    lineHeight: 22,
+    lineHeight: mvs(22),
     textAlign: 'right',
   },
 })

package/src/components/ListItem/ListItem.tsx

@@ -10,8 +10,9 @@ import {
   Platform,
 } from 'react-native'
 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, mvs } from '../../utils/scaling'
 
 const nativeDriver = Platform.OS !== 'web'
 
@@ -104,7 +105,7 @@ export function ListItem({
   }
 
   const handlePress = () => {
-    Haptics.selectionAsync()
+    hapticSelection()
     onPress?.()
   }
 
@@ -192,7 +193,7 @@ export function ListItem({
         <View
           style={[
             styles.separator,
-            { backgroundColor: colors.border, marginLeft: effectiveLeft ? 16 + 44 + 12 : 16 },
+            { backgroundColor: colors.border, marginLeft: effectiveLeft ? s(16) + s(44) + s(12) : s(16) },
           ]}
         />
       ) : null}
@@ -204,52 +205,52 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 14,
-    gap: 12,
+    paddingHorizontal: s(16),
+    paddingVertical: vs(14),
+    gap: s(12),
   },
   leftContainer: {
-    width: 44,
-    height: 44,
+    width: s(44),
+    height: s(44),
     alignItems: 'center',
     justifyContent: 'center',
     flexShrink: 0,
   },
   content: {
     flex: 1,
-    gap: 4,
+    gap: vs(4),
   },
   title: {
-    fontSize: 17,
+    fontSize: ms(17),
     fontWeight: '500',
-    lineHeight: 24,
+    lineHeight: mvs(24),
   },
   subtitle: {
-    fontSize: 14,
+    fontSize: ms(14),
     fontWeight: '400',
-    lineHeight: 20,
+    lineHeight: mvs(20),
   },
   caption: {
-    fontSize: 12,
+    fontSize: ms(12),
     fontWeight: '400',
-    lineHeight: 16,
+    lineHeight: mvs(16),
     opacity: 0.7,
   },
   rightContainer: {
     alignItems: 'flex-end',
     justifyContent: 'center',
     flexShrink: 0,
-    maxWidth: 160,
+    maxWidth: s(160),
   },
   rightText: {
-    fontSize: 15,
+    fontSize: ms(15),
   },
   chevron: {
-    marginLeft: 4,
+    marginLeft: s(4),
   },
   separator: {
     height: StyleSheet.hairlineWidth,
-    marginRight: 16,
+    marginRight: s(16),
   },
   disabled: {
     opacity: 0.45,

package/src/components/MonthPicker/MonthPicker.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
 import { View, Text, TouchableOpacity, StyleSheet, ViewStyle } from 'react-native'
 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, mvs } from '../../utils/scaling'
 
 const MONTH_NAMES = [
   'January', 'February', 'March', 'April', 'May', 'June',
@@ -25,7 +26,7 @@ export function MonthPicker({ value, onChange, style }: MonthPickerProps) {
   const { colors } = useTheme()
 
   const handlePrev = () => {
-    Haptics.selectionAsync()
+    hapticSelection()
     if (value.month === 1) {
       onChange({ month: 12, year: value.year - 1 })
     } else {
@@ -34,7 +35,7 @@ export function MonthPicker({ value, onChange, style }: MonthPickerProps) {
   }
 
   const handleNext = () => {
-    Haptics.selectionAsync()
+    hapticSelection()
     if (value.month === 12) {
       onChange({ month: 1, year: value.year + 1 })
     } else {
@@ -74,16 +75,16 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
   },
   arrow: {
-    width: 44,
-    height: 44,
+    width: s(44),
+    height: s(44),
     alignItems: 'center',
     justifyContent: 'center',
   },
   label: {
-    fontSize: 17,
+    fontSize: ms(17),
     fontWeight: '500',
-    lineHeight: 24,
+    lineHeight: mvs(24),
     textAlign: 'center',
-    minWidth: 160,
+    minWidth: s(160),
   },
 })

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),
   },
 })