@retray-dev/ui-kit 2.8.0 → 3.1.0

package/src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -1,5 +1,13 @@
-import React from 'react'
-import { Modal, View, Text, StyleSheet, TouchableOpacity } from 'react-native'
+import React, { useEffect, useRef } from 'react'
+import { View, Text, StyleSheet } from 'react-native'
+import {
+  BottomSheetModal,
+  BottomSheetView,
+  BottomSheetBackdrop,
+  type BottomSheetBackdropProps,
+} from '@gorhom/bottom-sheet'
+import { Feather } from '@expo/vector-icons'
+import { impactLight } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { Button } from '../Button'
 import { s, vs, ms, mvs } from '../../utils/scaling'
@@ -26,58 +34,98 @@ export function ConfirmDialog({
   onCancel,
 }: ConfirmDialogProps) {
   const { colors } = useTheme()
+  const ref = useRef<BottomSheetModal>(null)
+
+  useEffect(() => {
+    if (visible) {
+      impactLight()
+      ref.current?.present()
+    } else {
+      ref.current?.dismiss()
+    }
+  }, [visible])
+
+  const renderBackdrop = (props: BottomSheetBackdropProps) => (
+    <BottomSheetBackdrop
+      {...props}
+      disappearsOnIndex={-1}
+      appearsOnIndex={0}
+      pressBehavior="close"
+    />
+  )
 
   return (
-    <Modal visible={visible} transparent animationType="fade" onRequestClose={onCancel}>
-      <TouchableOpacity style={styles.overlay} activeOpacity={1} onPress={onCancel}>
-        <View
-          style={[styles.dialog, { backgroundColor: colors.card }]}
-          onStartShouldSetResponder={() => true}
-        >
-          <Text style={[styles.title, { color: colors.cardForeground }]} allowFontScaling={true}>
-            {title}
+    <BottomSheetModal
+      ref={ref}
+      snapPoints={['35%']}
+      onDismiss={onCancel}
+      backdropComponent={renderBackdrop}
+      backgroundStyle={[styles.background, { backgroundColor: colors.card }]}
+      handleIndicatorStyle={[styles.handle, { backgroundColor: colors.border }]}
+      enablePanDownToClose
+    >
+      <BottomSheetView style={styles.content}>
+        <Text style={[styles.title, { color: colors.cardForeground }]} allowFontScaling={true}>
+          {title}
+        </Text>
+        {description ? (
+          <Text style={[styles.description, { color: colors.mutedForeground }]} allowFontScaling={true}>
+            {description}
           </Text>
-          {description ? (
-            <Text style={[styles.description, { color: colors.mutedForeground }]} allowFontScaling={true}>
-              {description}
-            </Text>
-          ) : null}
-          <View style={styles.actions}>
-            <Button label={cancelLabel} variant="outline" fullWidth onPress={onCancel} />
-            <Button label={confirmLabel} variant={confirmVariant} fullWidth onPress={onConfirm} />
-          </View>
+        ) : null}
+        <View style={styles.actions}>
+          <Button
+            label={cancelLabel}
+            variant="outline"
+            fullWidth
+            onPress={onCancel}
+            icon={<Feather name="x" size={15} color={colors.foreground} />}
+          />
+          <Button
+            label={confirmLabel}
+            variant={confirmVariant}
+            fullWidth
+            onPress={onConfirm}
+            icon={
+              <Feather
+                name={confirmVariant === 'destructive' ? 'trash-2' : 'check'}
+                size={15}
+                color={
+                  confirmVariant === 'destructive'
+                    ? colors.destructiveForeground
+                    : colors.primaryForeground
+                }
+              />
+            }
+          />
         </View>
-      </TouchableOpacity>
-    </Modal>
+      </BottomSheetView>
+    </BottomSheetModal>
   )
 }
 
 const styles = StyleSheet.create({
-  overlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0,0,0,0.5)',
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: s(24),
+  background: {
+    borderTopLeftRadius: ms(16),
+    borderTopRightRadius: ms(16),
+  },
+  handle: {
+    width: s(36),
+    height: vs(4),
+    borderRadius: ms(2),
   },
-  dialog: {
-    width: '100%',
-    maxWidth: s(400),
-    borderRadius: ms(16),
-    padding: s(24),
+  content: {
+    paddingHorizontal: s(24),
+    paddingBottom: vs(32),
     gap: vs(12),
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 8 },
-    shadowOpacity: 0.15,
-    shadowRadius: 16,
-    elevation: 8,
   },
   title: {
+    fontFamily: 'Poppins-SemiBold',
     fontSize: ms(18),
-    fontWeight: '600',
     lineHeight: mvs(26),
   },
   description: {
+    fontFamily: 'Poppins-Regular',
     fontSize: ms(15),
     lineHeight: mvs(22),
   },

package/src/components/CurrencyDisplay/CurrencyDisplay.tsx

@@ -43,7 +43,7 @@ export function CurrencyDisplay({ value, prefix = '$', showDecimals = false, tex
 const styles = StyleSheet.create({
   container: {},
   amount: {
+    fontFamily: 'Poppins-Bold',
     fontSize: ms(56),
-    fontWeight: '700',
   },
 })

package/src/components/CurrencyInput/CurrencyInput.tsx

@@ -2,6 +2,8 @@ import React from 'react'
 import { ViewStyle, TextStyle } from 'react-native'
 import { Input } from '../Input'
 import { ms } from '../../utils/scaling'
+import { renderIcon } from '../../utils/icons'
+import { useTheme } from '../../theme'
 
 export interface CurrencyInputProps {
   value?: string
@@ -45,29 +47,37 @@ export function CurrencyInput({
   containerStyle,
   style,
 }: CurrencyInputProps) {
+  const { colors } = useTheme()
   const handleChange = (text: string) => {
     const withoutPrefix = prefix && text.startsWith(prefix) ? text.slice(prefix.length) : text
     const formatted = formatCurrency(withoutPrefix, thousandsSeparator)
-    const display = formatted ? `${prefix}${formatted}` : ''
+    const display = formatted
     onChangeText?.(display)
     const separatorRegex = new RegExp(`\\${thousandsSeparator}`, 'g')
     const raw = parseFloat(formatted.replace(separatorRegex, '') || '0')
     onChangeValue?.(isNaN(raw) ? 0 : raw)
   }
 
-  const inputStyle: TextStyle = size === 'large' ? { fontSize: ms(36) } : {}
+  const inputStyle: TextStyle = size === 'large' ? { fontFamily: 'Poppins-Regular', fontSize: ms(36) } : { fontFamily: 'Poppins-Regular' }
+
+  const dollarIcon = renderIcon('dollar-sign', size === 'large' ? 24 : 16, colors.mutedForeground)
+
+  // Remove prefix from display value if present
+  const displayValue = value && prefix && value.startsWith(prefix) ? value.slice(prefix.length) : value
 
   return (
     <Input
-      value={value}
+      value={displayValue}
       onChangeText={handleChange}
       keyboardType="numeric"
       label={label}
       error={error}
       hint={hint}
-      placeholder={placeholder ?? `${prefix}0`}
+      placeholder={placeholder ?? '0'}
       editable={editable}
+      prefix={dollarIcon}
       containerStyle={containerStyle}
+      inputWrapperStyle={size === 'large' ? { paddingVertical: 10 } : undefined}
       style={[inputStyle, style]}
     />
   )

package/src/components/EmptyState/EmptyState.tsx

@@ -97,14 +97,15 @@ const styles = StyleSheet.create({
     maxWidth: s(320),
   },
   title: {
+    fontFamily: 'Poppins-Medium',
     fontSize: ms(18),
-    fontWeight: '500',
     textAlign: 'center',
   },
   titleCompact: {
     fontSize: ms(15),
   },
   description: {
+    fontFamily: 'Poppins-Regular',
     fontSize: ms(14),
     lineHeight: mvs(20),
     textAlign: 'center',

package/src/components/Input/Input.tsx

@@ -42,9 +42,11 @@ export interface InputProps extends TextInputProps {
   type?: 'text' | 'password'
   /** Style for the outer container \`View\`. Use \`style\` (from \`TextInputProps\`) to style the \`TextInput\` itself. */
   containerStyle?: ViewStyle
+  /** Style for the inner border wrapper (overrides padding, etc). */
+  inputWrapperStyle?: ViewStyle
 }
 
-export function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, 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, inputWrapperStyle, style, onFocus, onBlur, secureTextEntry, ...props }: InputProps) {
   const { colors } = useTheme()
   const [focused, setFocused] = useState(false)
   const [showPassword, setShowPassword] = useState(false)
@@ -79,6 +81,7 @@ export function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixS
                 : colors.border,
             backgroundColor: colors.background,
           },
+          inputWrapperStyle,
         ]}
       >
         {effectivePrefix ? (
@@ -137,40 +140,44 @@ const styles = StyleSheet.create({
     gap: vs(8),
   },
   label: {
-    fontSize: ms(15),
-    fontWeight: '500',
+    fontFamily: 'Poppins-Medium',
+    fontSize: ms(13),
   },
   inputWrapper: {
     flexDirection: 'row',
     alignItems: 'center',
-    borderWidth: 1.5,
+    borderWidth: 1,
     borderRadius: ms(8),
-    paddingHorizontal: s(16),
-    paddingVertical: vs(14),
+    paddingHorizontal: s(14),
+    paddingVertical: vs(11),
   },
   input: {
+    fontFamily: 'Poppins-Regular',
     flex: 1,
-    fontSize: ms(17),
+    fontSize: ms(15),
     paddingVertical: 0,
   },
   prefixContainer: {
     marginRight: s(8),
   },
   prefixText: {
-    fontSize: ms(17),
+    fontFamily: 'Poppins-Regular',
+    fontSize: ms(15),
     marginRight: s(8),
   },
   suffixContainer: {
     marginLeft: s(8),
   },
   suffixText: {
-    fontSize: ms(17),
+    fontFamily: 'Poppins-Regular',
+    fontSize: ms(15),
     marginLeft: s(8),
   },
   passwordToggle: {
     padding: s(4),
   },
   helperText: {
+    fontFamily: 'Poppins-Regular',
     fontSize: ms(13),
   },
 })

package/src/components/LabelValue/LabelValue.tsx

@@ -36,13 +36,14 @@ const styles = StyleSheet.create({
     gap: s(12),
   },
   label: {
+    fontFamily: 'Poppins-Regular',
     fontSize: ms(13),
     lineHeight: mvs(18),
   },
   value: {
-    fontSize: ms(15),
-    fontWeight: '500',
-    lineHeight: mvs(22),
+    fontFamily: 'Poppins-Medium',
+    fontSize: ms(14),
+    lineHeight: mvs(20),
     textAlign: 'right',
   },
 })

package/src/components/ListItem/ListItem.tsx

@@ -229,7 +229,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     paddingHorizontal: s(16),
-    paddingVertical: vs(14),
+    paddingVertical: vs(10),
     gap: s(12),
   },
   leftContainer: {
@@ -244,18 +244,18 @@ const styles = StyleSheet.create({
     gap: vs(4),
   },
   title: {
-    fontSize: ms(17),
-    fontWeight: '500',
-    lineHeight: mvs(24),
+    fontFamily: 'Poppins-Medium',
+    fontSize: ms(15),
+    lineHeight: mvs(22),
   },
   subtitle: {
-    fontSize: ms(14),
-    fontWeight: '400',
-    lineHeight: mvs(20),
+    fontFamily: 'Poppins-Regular',
+    fontSize: ms(13),
+    lineHeight: mvs(18),
   },
   caption: {
+    fontFamily: 'Poppins-Regular',
     fontSize: ms(12),
-    fontWeight: '400',
     lineHeight: mvs(16),
     opacity: 0.7,
   },
@@ -266,7 +266,8 @@ const styles = StyleSheet.create({
     maxWidth: s(160),
   },
   rightText: {
-    fontSize: ms(15),
+    fontFamily: 'Poppins-Regular',
+    fontSize: ms(14),
   },
   chevron: {
     marginLeft: s(4),

package/src/components/MonthPicker/MonthPicker.tsx

@@ -81,8 +81,8 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   label: {
+    fontFamily: 'Poppins-Medium',
     fontSize: ms(17),
-    fontWeight: '500',
     lineHeight: mvs(24),
     textAlign: 'center',
     minWidth: s(160),

package/src/components/RadioGroup/RadioGroup.tsx

@@ -42,43 +42,42 @@ function RadioItem({
   }
 
   return (
-    <Animated.View style={{ transform: [{ scale }] }}>
-      <TouchableOpacity
-        style={styles.row}
-        onPress={() => {
-          if (!option.disabled) {
-            hapticSelection()
-            onSelect()
-          }
-        }}
-        onPressIn={handlePressIn}
-        onPressOut={handlePressOut}
-        activeOpacity={1}
-        touchSoundDisabled={true}
-        disabled={option.disabled}
+    <TouchableOpacity
+      style={styles.row}
+      onPress={() => {
+        if (!option.disabled) {
+          hapticSelection()
+          onSelect()
+        }
+      }}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      activeOpacity={1}
+      touchSoundDisabled={true}
+      disabled={option.disabled}
+    >
+      <Animated.View
+        style={[
+          styles.radio,
+          {
+            borderColor: selected ? colors.primary : colors.border,
+            opacity: option.disabled ? 0.45 : 1,
+            transform: [{ scale }],
+          },
+        ]}
       >
-        <View
-          style={[
-            styles.radio,
-            {
-              borderColor: selected ? colors.primary : colors.border,
-              opacity: option.disabled ? 0.45 : 1,
-            },
-          ]}
-        >
-          {selected ? <View style={[styles.dot, { backgroundColor: colors.primary }]} /> : null}
-        </View>
-        <Text
-          style={[
-            styles.label,
-            { color: option.disabled ? colors.mutedForeground : colors.foreground },
-          ]}
-          allowFontScaling={true}
-        >
-          {option.label}
-        </Text>
-      </TouchableOpacity>
-    </Animated.View>
+        {selected ? <View style={[styles.dot, { backgroundColor: colors.primary }]} /> : null}
+      </Animated.View>
+      <Text
+        style={[
+          styles.label,
+          { color: option.disabled ? colors.mutedForeground : colors.foreground },
+        ]}
+        allowFontScaling={true}
+      >
+        {option.label}
+      </Text>
+    </TouchableOpacity>
   )
 }
 
@@ -130,6 +129,7 @@ const styles = StyleSheet.create({
     borderRadius: s(5),
   },
   label: {
+    fontFamily: 'Poppins-Regular',
     fontSize: ms(14),
     lineHeight: mvs(20),
   },

package/src/components/Select/Select.tsx

@@ -9,6 +9,7 @@ import { s, vs, ms } from '../../utils/scaling'
 const isIOS = Platform.OS === 'ios'
 const isAndroid = Platform.OS === 'android'
 const isWeb = Platform.OS === 'web'
+const nativeDriver = Platform.OS !== 'web'
 
 export interface SelectOption {
   label: string
@@ -47,11 +48,11 @@ export function Select({
 
   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()
   }
 
   const handleOpen = () => {
@@ -231,31 +232,28 @@ const styles = StyleSheet.create({
     gap: vs(8),
   },
   label: {
-    fontSize: ms(15),
-    fontWeight: '500',
+    fontFamily: 'Poppins-Medium',
+    fontSize: ms(13),
   },
   trigger: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    borderWidth: 1.5,
+    borderWidth: 1,
     borderRadius: ms(8),
-    paddingHorizontal: s(16),
-    paddingVertical: vs(14),
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.04,
-    shadowRadius: 2,
-    elevation: 1,
+    paddingHorizontal: s(14),
+    paddingVertical: vs(11),
   },
   triggerText: {
-    fontSize: ms(17),
+    fontFamily: 'Poppins-Regular',
+    fontSize: ms(15),
     flex: 1,
   },
   chevron: {
     marginLeft: s(8),
   },
   helperText: {
+    fontFamily: 'Poppins-Regular',
     fontSize: ms(13),
   },
   iosBackdrop: {
@@ -276,15 +274,15 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
   },
   iosToolbarTitle: {
+    fontFamily: 'Poppins-SemiBold',
     fontSize: ms(17),
-    fontWeight: '600',
   },
   iosDoneBtn: {
     padding: s(4),
   },
   iosDoneBtnText: {
+    fontFamily: 'Poppins-SemiBold',
     fontSize: ms(17),
-    fontWeight: '600',
   },
   androidHiddenPicker: {
     height: 0,
@@ -292,10 +290,10 @@ const styles = StyleSheet.create({
     position: 'absolute',
   },
   webPicker: {
-    borderWidth: 1.5,
+    borderWidth: 1,
     borderRadius: ms(8),
-    paddingHorizontal: s(16),
-    paddingVertical: vs(14),
-    fontSize: ms(17),
+    paddingHorizontal: s(14),
+    paddingVertical: vs(11),
+    fontSize: ms(15),
   },
 })

package/src/components/Sheet/Sheet.tsx

@@ -106,10 +106,11 @@ const styles = StyleSheet.create({
     marginBottom: vs(16),
   },
   title: {
+    fontFamily: 'Poppins-SemiBold',
     fontSize: ms(18),
-    fontWeight: '600',
   },
   description: {
+    fontFamily: 'Poppins-Regular',
     fontSize: ms(14),
     lineHeight: mvs(20),
   },

package/src/components/Slider/Slider.tsx

@@ -91,16 +91,16 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   label: {
+    fontFamily: 'Poppins-Medium',
     fontSize: ms(15),
-    fontWeight: '500',
   },
   valueText: {
+    fontFamily: 'Poppins-Medium',
     fontSize: ms(14),
-    fontWeight: '500',
   },
   slider: {
     width: '100%',
-    height: vs(40),
+    height: vs(60),
   },
   disabled: {
     opacity: 0.45,

package/src/components/Spinner/Spinner.tsx

@@ -1,12 +1,14 @@
 import React from 'react'
-import { ActivityIndicator, ActivityIndicatorProps } from 'react-native'
+import { ActivityIndicator, ActivityIndicatorProps, View, Text, StyleSheet } from 'react-native'
 import { useTheme } from '../../theme'
+import { vs, ms, mvs } from '../../utils/scaling'
 
 export type SpinnerSize = 'sm' | 'md' | 'lg'
 
 export interface SpinnerProps extends Omit<ActivityIndicatorProps, 'size'> {
   size?: SpinnerSize
   color?: string
+  label?: string
 }
 
 const sizeMap: Record<SpinnerSize, 'small' | 'large'> = {
@@ -15,7 +17,39 @@ const sizeMap: Record<SpinnerSize, 'small' | 'large'> = {
   lg: 'large',
 }
 
-export function Spinner({ size = 'md', color, ...props }: SpinnerProps) {
+const labelFontSize: Record<SpinnerSize, number> = {
+  sm: ms(11),
+  md: ms(13),
+  lg: ms(14),
+}
+
+export function Spinner({ size = 'md', color, label, ...props }: SpinnerProps) {
   const { colors } = useTheme()
+
+  if (label) {
+    return (
+      <View style={styles.wrapper}>
+        <ActivityIndicator size={sizeMap[size]} color={color ?? colors.primary} {...props} />
+        <Text
+          style={[styles.label, { color: colors.mutedForeground, fontSize: labelFontSize[size] }]}
+          allowFontScaling={true}
+        >
+          {label}
+        </Text>
+      </View>
+    )
+  }
+
   return <ActivityIndicator size={sizeMap[size]} color={color ?? colors.primary} {...props} />
 }
+
+const styles = StyleSheet.create({
+  wrapper: {
+    alignItems: 'center',
+    gap: vs(6),
+  },
+  label: {
+    fontFamily: 'Poppins-Regular',
+    lineHeight: mvs(18),
+  },
+})

package/src/components/Switch/Switch.tsx

@@ -6,10 +6,10 @@ import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs } from '../../utils/scaling'
 
-const TRACK_WIDTH = s(60)
-const TRACK_HEIGHT = vs(36)
-const THUMB_SIZE = s(28)
-const THUMB_OFFSET = s(4)
+const TRACK_WIDTH = s(52)
+const TRACK_HEIGHT = s(30)
+const THUMB_SIZE = s(24)
+const THUMB_OFFSET = s(3)
 const THUMB_TRAVEL = TRACK_WIDTH - THUMB_SIZE - THUMB_OFFSET * 2
 
 export interface SwitchProps {