@retray-dev/ui-kit 2.7.0 → 3.0.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

@@ -20,6 +20,8 @@ export interface CurrencyInputProps {
   hint?: string
   placeholder?: string
   editable?: boolean
+  /** Icon or element rendered at the left edge inside the input field. */
+  prefixIcon?: React.ReactNode
   containerStyle?: ViewStyle
   style?: TextStyle
 }
@@ -42,31 +44,36 @@ export function CurrencyInput({
   hint,
   placeholder,
   editable,
+  prefixIcon,
   containerStyle,
   style,
 }: CurrencyInputProps) {
   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' }
+
+  // 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={prefixIcon}
       containerStyle={containerStyle}
       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/IconButton/IconButton.tsx

@@ -0,0 +1,147 @@
+import React, { useRef } from 'react'
+import {
+  TouchableOpacity,
+  Animated,
+  ActivityIndicator,
+  StyleSheet,
+  TouchableOpacityProps,
+  ViewStyle,
+  Platform,
+} from 'react-native'
+
+const nativeDriver = Platform.OS !== 'web'
+import { impactLight } from '../../utils/haptics'
+import { useTheme } from '../../theme'
+import { s } from '../../utils/scaling'
+import { renderIcon } from '../../utils/icons'
+
+export type IconButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive'
+export type IconButtonSize = 'sm' | 'md' | 'lg'
+
+export interface IconButtonProps extends TouchableOpacityProps {
+  /**
+   * Icon name from `@expo/vector-icons` (e.g. `"home"`, `"star"`, `"plus"`).
+   * See https://icons.expo.fyi. Takes precedence over `icon` when both supplied.
+   */
+  iconName?: string
+  /** ReactNode icon — used when `iconName` is not provided. */
+  icon?: React.ReactNode
+  /** Override the resolved icon color. Defaults to the foreground color for the active variant. */
+  iconColor?: string
+  variant?: IconButtonVariant
+  size?: IconButtonSize
+  /** Replaces icon with a spinner and forces `disabled`. */
+  loading?: boolean
+}
+
+const sizeMap: Record<IconButtonSize, { container: number; icon: number }> = {
+  sm: { container: s(40), icon: 18 },
+  md: { container: s(44), icon: 20 },
+  lg: { container: s(52), icon: 24 },
+}
+
+export function IconButton({
+  iconName,
+  icon,
+  iconColor,
+  variant = 'primary',
+  size = 'md',
+  loading = false,
+  disabled,
+  style,
+  onPress,
+  ...props
+}: IconButtonProps) {
+  const { colors } = useTheme()
+  const isDisabled = disabled || loading
+  const scale = useRef(new Animated.Value(1)).current
+
+  const handlePressIn = () => {
+    if (isDisabled) return
+    Animated.spring(scale, {
+      toValue: 0.95,
+      useNativeDriver: nativeDriver,
+      speed: 40,
+      bounciness: 0,
+    }).start()
+  }
+
+  const handlePressOut = () => {
+    Animated.spring(scale, {
+      toValue: 1,
+      useNativeDriver: nativeDriver,
+      speed: 40,
+      bounciness: 4,
+    }).start()
+  }
+
+  const handlePress: TouchableOpacityProps['onPress'] = (e) => {
+    impactLight()
+    onPress?.(e)
+  }
+
+  const containerVariantStyle: ViewStyle = {
+    primary: { backgroundColor: colors.primary },
+    secondary: { backgroundColor: colors.secondary },
+    outline: { backgroundColor: 'transparent', borderWidth: 1.5, borderColor: colors.border },
+    ghost: { backgroundColor: 'transparent' },
+    destructive: { backgroundColor: colors.destructive },
+  }[variant]
+
+  const defaultIconColor: string = {
+    primary: colors.primaryForeground,
+    secondary: colors.secondaryForeground,
+    outline: colors.foreground,
+    ghost: colors.foreground,
+    destructive: colors.destructiveForeground,
+  }[variant]
+
+  const spinnerColor =
+    variant === 'destructive' ? colors.destructiveForeground
+    : variant === 'primary' || variant === 'secondary' ? colors.primaryForeground
+    : colors.foreground
+
+  const { container: containerSize, icon: iconSize } = sizeMap[size]
+
+  const resolvedIcon: React.ReactNode = iconName
+    ? renderIcon(iconName, iconSize, iconColor ?? defaultIconColor)
+    : icon
+
+  return (
+    <Animated.View style={{ transform: [{ scale }] }}>
+      <TouchableOpacity
+        style={[
+          styles.base,
+          containerVariantStyle,
+          { width: containerSize, height: containerSize },
+          isDisabled && styles.disabled,
+          style,
+        ]}
+        disabled={isDisabled}
+        activeOpacity={1}
+        touchSoundDisabled={true}
+        onPress={handlePress}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        {...props}
+      >
+        {loading ? (
+          <ActivityIndicator size="small" color={spinnerColor} />
+        ) : (
+          resolvedIcon
+        )}
+      </TouchableOpacity>
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  base: {
+    borderRadius: 999,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+})

package/src/components/IconButton/index.ts

@@ -0,0 +1,2 @@
+export { IconButton } from './IconButton'
+export type { IconButtonProps, IconButtonVariant, IconButtonSize } from './IconButton'

package/src/components/Input/Input.tsx

@@ -137,40 +137,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,42 +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 },
-          ]}
-        >
-          {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>
   )
 }
 
@@ -129,6 +129,7 @@ const styles = StyleSheet.create({
     borderRadius: s(5),
   },
   label: {
+    fontFamily: 'Poppins-Regular',
     fontSize: ms(14),
     lineHeight: mvs(20),
   },