@retray-dev/ui-kit 2.5.1 → 2.6.0

package/src/components/Checkbox/Checkbox.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 CheckboxProps {
   checked?: boolean
@@ -23,11 +26,11 @@ export function Checkbox({
 
   const handlePressIn = () => {
     if (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 (
@@ -35,7 +38,7 @@ export function Checkbox({
     <TouchableOpacity
       style={[styles.row, style]}
       onPress={() => {
-        Haptics.selectionAsync()
+        hapticSelection()
         onCheckedChange?.(!checked)
       }}
       onPressIn={handlePressIn}
@@ -74,25 +77,25 @@ const styles = StyleSheet.create({
   row: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: 12,
+    gap: s(12),
   },
   box: {
-    width: 24,
-    height: 24,
-    borderRadius: 8,
+    width: s(24),
+    height: s(24),
+    borderRadius: ms(8),
     borderWidth: 1.5,
     alignItems: 'center',
     justifyContent: 'center',
   },
   checkmark: {
-    width: 12,
-    height: 7,
+    width: s(12),
+    height: vs(7),
     borderLeftWidth: 2,
     borderBottomWidth: 2,
     transform: [{ rotate: '-45deg' }, { translateY: -1 }],
   },
   label: {
-    fontSize: 15,
-    lineHeight: 22,
+    fontSize: ms(15),
+    lineHeight: mvs(22),
   },
 })

package/src/components/Chip/Chip.tsx

@@ -9,8 +9,9 @@ import {
   Platform,
   Easing,
 } from 'react-native'
-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'
 
@@ -68,7 +69,7 @@ export function Chip({ label, selected = false, onPress, style }: ChipProps) {
   }
 
   const handlePress = () => {
-    Haptics.selectionAsync()
+    hapticSelection()
     onPress?.()
   }
 
@@ -154,20 +155,20 @@ const styles = StyleSheet.create({
   wrapper: {},
   chip: {
     borderRadius: 999,
-    paddingHorizontal: 14,
-    paddingVertical: 8,
+    paddingHorizontal: s(14),
+    paddingVertical: vs(8),
     borderWidth: 1.5,
     alignItems: 'center',
     justifyContent: 'center',
   },
   label: {
-    fontSize: 14,
+    fontSize: ms(14),
     fontWeight: '500',
-    lineHeight: 20,
+    lineHeight: mvs(20),
   },
   group: {
     flexDirection: 'row',
     flexWrap: 'wrap',
-    gap: 8,
+    gap: s(8),
   },
 })

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,9 +1,18 @@
 import React from 'react'
 import { View, Text, StyleSheet, ViewStyle } from 'react-native'
 import { useTheme } from '../../theme'
+import { s, vs, ms, mvs } from '../../utils/scaling'
+import { renderIcon } from '../../utils/icons'
 
 export interface EmptyStateProps {
   icon?: React.ReactNode
+  /**
+   * Icon name from `@expo/vector-icons`. See https://icons.expo.fyi.
+   * Takes precedence over `icon`. Sized automatically to fit the slot (48 default, 32 compact).
+   */
+  iconName?: string
+  /** Override the resolved icon color. Defaults to `mutedForeground`. */
+  iconColor?: string
   title: string
   description?: string
   action?: React.ReactNode
@@ -12,10 +21,14 @@ export interface EmptyStateProps {
   style?: ViewStyle
 }
 
-export function EmptyState({ icon, title, description, action, size = 'default', style }: EmptyStateProps) {
+export function EmptyState({ icon, iconName, iconColor, title, description, action, size = 'default', style }: EmptyStateProps) {
   const { colors } = useTheme()
   const isCompact = size === 'compact'
 
+  const effectiveIcon: React.ReactNode = iconName
+    ? renderIcon(iconName, isCompact ? 32 : 48, iconColor ?? colors.mutedForeground)
+    : icon
+
   return (
     <View
       style={[
@@ -25,7 +38,7 @@ export function EmptyState({ icon, title, description, action, size = 'default',
         style,
       ]}
     >
-      {icon ? (
+      {effectiveIcon ? (
         <View
           style={[
             styles.iconWrapper,
@@ -33,7 +46,7 @@ export function EmptyState({ icon, title, description, action, size = 'default',
             { backgroundColor: colors.muted },
           ]}
         >
-          {icon}
+          {effectiveIcon}
         </View>
       ) : null}
       <View style={styles.textWrapper}>
@@ -58,45 +71,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,8 @@ 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'
+import { renderIcon } from '../../utils/icons'
 
 const webInputResetStyle: any =
   Platform.OS === 'web'
@@ -22,13 +24,27 @@ export interface InputProps extends TextInputProps {
   prefixStyle?: TextStyle
   /** Style applied to suffix text if suffix is a string. */
   suffixStyle?: TextStyle
+  /**
+   * Icon name from `@expo/vector-icons` rendered before the input text.
+   * See https://icons.expo.fyi. Takes precedence over `prefix`.
+   */
+  prefixIcon?: string
+  /**
+   * Icon name from `@expo/vector-icons` rendered after the input text.
+   * See https://icons.expo.fyi. Takes precedence over `suffix` (unless `type="password"`).
+   */
+  suffixIcon?: string
+  /** Override the resolved prefix icon color. Defaults to `mutedForeground`. */
+  prefixIconColor?: string
+  /** Override the resolved suffix icon color. Defaults to `mutedForeground`. */
+  suffixIconColor?: string
   /** Input type. When set to \`'password'\`, shows a toggle button to reveal/hide text. */
   type?: 'text' | 'password'
   /** Style for the outer container \`View\`. Use \`style\` (from \`TextInputProps\`) to style the \`TextInput\` itself. */
   containerStyle?: ViewStyle
 }
 
-export function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, type = 'text', containerStyle, style, onFocus, onBlur, secureTextEntry, ...props }: InputProps) {
+export function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = 'text', containerStyle, style, onFocus, onBlur, secureTextEntry, ...props }: InputProps) {
   const { colors } = useTheme()
   const [focused, setFocused] = useState(false)
   const [showPassword, setShowPassword] = useState(false)
@@ -36,12 +52,18 @@ export function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixS
   const isPassword = type === 'password'
   const effectiveSecure = isPassword ? !showPassword : secureTextEntry
 
-  // If type is password and no suffix is provided, add the toggle button
-  const effectiveSuffix = isPassword && !suffix ? (
+  const effectivePrefix: React.ReactNode = prefixIcon
+    ? renderIcon(prefixIcon, 20, prefixIconColor ?? colors.mutedForeground)
+    : prefix
+
+  // If type is password and no suffix override is provided, add the toggle button
+  const effectiveSuffix: React.ReactNode = isPassword && !suffix && !suffixIcon ? (
     <TouchableOpacity onPress={() => setShowPassword(!showPassword)} style={styles.passwordToggle} activeOpacity={0.6}>
       <AntDesign name={showPassword ? 'eye' : 'eye-invisible'} size={20} color={colors.mutedForeground} />
     </TouchableOpacity>
-  ) : suffix
+  ) : suffixIcon
+    ? renderIcon(suffixIcon, 20, suffixIconColor ?? colors.mutedForeground)
+    : suffix
 
   return (
     <View style={[styles.container, containerStyle]}>
@@ -59,13 +81,13 @@ export function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixS
           },
         ]}
       >
-        {prefix ? (
-          typeof prefix === 'string' ? (
+        {effectivePrefix ? (
+          typeof effectivePrefix === 'string' ? (
             <Text style={[styles.prefixText, { color: colors.mutedForeground }, prefixStyle]} allowFontScaling={true}>
-              {prefix}
+              {effectivePrefix}
             </Text>
           ) : (
-            <View style={styles.prefixContainer}>{prefix}</View>
+            <View style={styles.prefixContainer}>{effectivePrefix}</View>
           )
         ) : null}
         <TextInput
@@ -112,43 +134,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,10 @@ 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'
+import { renderIcon } from '../../utils/icons'
 
 const nativeDriver = Platform.OS !== 'web'
 
@@ -32,6 +34,20 @@ export interface ListItemProps {
   trailing?: React.ReactNode | string
   /** @deprecated Use `leftRender` instead. */
   icon?: React.ReactNode
+  /**
+   * Icon name from `@expo/vector-icons` rendered in the left slot.
+   * See https://icons.expo.fyi. Takes precedence over `leftRender`.
+   */
+  leftIcon?: string
+  /**
+   * Icon name from `@expo/vector-icons` rendered in the right slot.
+   * See https://icons.expo.fyi. Takes precedence over `rightRender`.
+   */
+  rightIcon?: string
+  /** Override the resolved left icon color. Defaults to `foreground`. */
+  leftIconColor?: string
+  /** Override the resolved right icon color. Defaults to `mutedForeground`. */
+  rightIconColor?: string
 
   title: string
   /** Secondary line below the title. */
@@ -68,6 +84,10 @@ export function ListItem({
   rightRender,
   trailing,
   icon,
+  leftIcon,
+  rightIcon,
+  leftIconColor,
+  rightIconColor,
   title,
   subtitle,
   caption,
@@ -104,13 +124,17 @@ export function ListItem({
   }
 
   const handlePress = () => {
-    Haptics.selectionAsync()
+    hapticSelection()
     onPress?.()
   }
 
-  // Support legacy props
-  const effectiveLeft = leftRender ?? icon
-  const effectiveRight = rightRender ?? trailing
+  const effectiveLeft: React.ReactNode = leftIcon
+    ? renderIcon(leftIcon, 24, leftIconColor ?? colors.foreground)
+    : leftRender ?? icon
+
+  const effectiveRight: React.ReactNode | string | undefined = rightIcon
+    ? renderIcon(rightIcon, 24, rightIconColor ?? colors.mutedForeground)
+    : rightRender ?? trailing
 
   const cardStyle: ViewStyle =
     variant === 'card'
@@ -192,7 +216,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 +228,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),
   },
 })