@retray-dev/ui-kit 1.6.0 → 1.8.0

package/src/components/CurrencyInputLarge/CurrencyInputLarge.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import { ViewStyle } from 'react-native'
+import { Input } from '../Input'
+
+export interface CurrencyInputLargeProps {
+  value?: string
+  onChangeText?: (formatted: string) => void
+  /** Called with the parsed numeric value (no separators, no prefix). */
+  onChangeValue?: (raw: number) => void
+  /** Symbol prepended to the formatted value. Defaults to `'$'`. */
+  prefix?: string
+  /** Character used to separate groups of three digits. Defaults to `'.'`. */
+  thousandsSeparator?: '.' | ','
+  label?: string
+  /** Red helper text; also changes input border to destructive color. */
+  error?: string
+  hint?: string
+  placeholder?: string
+  editable?: boolean
+  containerStyle?: ViewStyle
+}
+
+function formatCurrency(raw: string, separator: '.' | ','): string {
+  const digits = raw.replace(/\D/g, '')
+  if (!digits) return ''
+  return digits.replace(/\B(?=(\d{3})+(?!\d))/g, separator)
+}
+
+export function CurrencyInputLarge({
+  value,
+  onChangeText,
+  onChangeValue,
+  prefix = '$',
+  thousandsSeparator = '.',
+  label,
+  error,
+  hint,
+  placeholder,
+  editable,
+  containerStyle,
+}: CurrencyInputLargeProps) {
+  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}` : ''
+    onChangeText?.(display)
+    const separatorRegex = new RegExp(`\\${thousandsSeparator}`, 'g')
+    const raw = parseFloat(formatted.replace(separatorRegex, '') || '0')
+    onChangeValue?.(isNaN(raw) ? 0 : raw)
+  }
+
+  return (
+    <Input
+      value={value}
+      onChangeText={handleChange}
+      keyboardType="numeric"
+      label={label}
+      error={error}
+      hint={hint}
+      placeholder={placeholder ?? `${prefix}0`}
+      editable={editable}
+      containerStyle={containerStyle}
+      style={{ fontSize: 36 }}
+    />
+  )
+}

package/src/components/CurrencyInputLarge/index.ts

@@ -0,0 +1 @@
+export * from './CurrencyInputLarge'

package/src/components/EmptyState/EmptyState.tsx

@@ -7,24 +7,46 @@ export interface EmptyStateProps {
   title: string
   description?: string
   action?: React.ReactNode
+  /** `compact` hides description/action and uses tighter spacing and a smaller icon. */
+  size?: 'default' | 'compact'
   style?: ViewStyle
 }
 
-export function EmptyState({ icon, title, description, action, style }: EmptyStateProps) {
+export function EmptyState({ icon, title, description, action, size = 'default', style }: EmptyStateProps) {
   const { colors } = useTheme()
+  const isCompact = size === 'compact'
 
   return (
-    <View style={[styles.container, { borderColor: colors.border }, style]}>
+    <View
+      style={[
+        styles.container,
+        isCompact && styles.containerCompact,
+        { borderColor: colors.border },
+        style,
+      ]}
+    >
       {icon ? (
-        <View style={[styles.iconWrapper, { backgroundColor: colors.muted }]}>{icon}</View>
+        <View
+          style={[
+            styles.iconWrapper,
+            isCompact && styles.iconWrapperCompact,
+            { backgroundColor: colors.muted },
+          ]}
+        >
+          {icon}
+        </View>
       ) : null}
       <View style={styles.textWrapper}>
-        <Text style={[styles.title, { color: colors.foreground }]}>{title}</Text>
-        {description ? (
+        <Text
+          style={[styles.title, isCompact && styles.titleCompact, { color: colors.foreground }]}
+        >
+          {title}
+        </Text>
+        {description && !isCompact ? (
           <Text style={[styles.description, { color: colors.mutedForeground }]}>{description}</Text>
         ) : null}
       </View>
-      {action ? <View style={styles.action}>{action}</View> : null}
+      {action && !isCompact ? <View style={styles.action}>{action}</View> : null}
     </View>
   )
 }
@@ -39,6 +61,10 @@ const styles = StyleSheet.create({
     padding: 32,
     gap: 16,
   },
+  containerCompact: {
+    padding: 20,
+    gap: 10,
+  },
   iconWrapper: {
     width: 48,
     height: 48,
@@ -46,6 +72,11 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  iconWrapperCompact: {
+    width: 36,
+    height: 36,
+    borderRadius: 8,
+  },
   textWrapper: {
     alignItems: 'center',
     gap: 8,
@@ -56,6 +87,9 @@ const styles = StyleSheet.create({
     fontWeight: '500',
     textAlign: 'center',
   },
+  titleCompact: {
+    fontSize: 15,
+  },
   description: {
     fontSize: 14,
     lineHeight: 20,

package/src/components/Input/Input.tsx

@@ -53,21 +53,21 @@ export function Input({ label, error, hint, containerStyle, style, onFocus, onBl
 
 const styles = StyleSheet.create({
   container: {
-    gap: 4,
+    gap: 6,
   },
   label: {
-    fontSize: 14,
+    fontSize: 15,
     fontWeight: '500',
-    marginBottom: 4,
+    marginBottom: 6,
   },
   input: {
     borderWidth: 1.5,
-    borderRadius: 8,
-    paddingHorizontal: 16,
-    paddingVertical: 14,
-    fontSize: 16,
+    borderRadius: 14,
+    paddingHorizontal: 20,
+    paddingVertical: 16,
+    fontSize: 17,
   },
   helperText: {
-    fontSize: 12,
+    fontSize: 13,
   },
 })

package/src/components/LabelValue/LabelValue.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { View, Text, StyleSheet, ViewStyle } from 'react-native'
+import { useTheme } from '../../theme'
+
+export interface LabelValueProps {
+  label: string
+  value: string | React.ReactNode
+  style?: ViewStyle
+}
+
+export function LabelValue({ label, value, style }: LabelValueProps) {
+  const { colors } = useTheme()
+
+  return (
+    <View style={[styles.container, style]}>
+      <Text style={[styles.label, { color: colors.mutedForeground }]} allowFontScaling={true}>
+        {label}
+      </Text>
+      {typeof value === 'string' ? (
+        <Text style={[styles.value, { color: colors.foreground }]} allowFontScaling={true}>
+          {value}
+        </Text>
+      ) : (
+        value
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: 12,
+  },
+  label: {
+    fontSize: 13,
+    lineHeight: 18,
+  },
+  value: {
+    fontSize: 15,
+    fontWeight: '500',
+    lineHeight: 22,
+    textAlign: 'right',
+  },
+})

package/src/components/LabelValue/index.ts

@@ -0,0 +1,2 @@
+export { LabelValue } from './LabelValue'
+export type { LabelValueProps } from './LabelValue'

package/src/components/ListItem/ListItem.tsx

@@ -0,0 +1,121 @@
+import React, { useRef } from 'react'
+import {
+  TouchableOpacity,
+  Animated,
+  View,
+  Text,
+  StyleSheet,
+  ViewStyle,
+  Platform,
+} from 'react-native'
+import * as Haptics from 'expo-haptics'
+import { useTheme } from '../../theme'
+
+const nativeDriver = Platform.OS !== 'web'
+
+export interface ListItemProps {
+  icon?: React.ReactNode
+  title: string
+  subtitle?: string
+  trailing?: string | React.ReactNode
+  onPress?: () => void
+  disabled?: boolean
+  style?: ViewStyle
+}
+
+export function ListItem({ icon, title, subtitle, trailing, onPress, disabled, style }: ListItemProps) {
+  const { colors } = useTheme()
+  const scale = useRef(new Animated.Value(1)).current
+
+  const handlePressIn = () => {
+    if (!onPress || disabled) return
+    Animated.spring(scale, {
+      toValue: 0.97,
+      useNativeDriver: nativeDriver,
+      speed: 40,
+      bounciness: 0,
+    }).start()
+  }
+
+  const handlePressOut = () => {
+    Animated.spring(scale, {
+      toValue: 1,
+      useNativeDriver: nativeDriver,
+      speed: 40,
+      bounciness: 4,
+    }).start()
+  }
+
+  const handlePress = () => {
+    Haptics.selectionAsync()
+    onPress?.()
+  }
+
+  return (
+    <Animated.View style={[{ transform: [{ scale }] }, disabled && styles.disabled]}>
+      <TouchableOpacity
+        style={[styles.container, style]}
+        onPress={onPress ? handlePress : undefined}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        disabled={disabled}
+        activeOpacity={1}
+        touchSoundDisabled={true}
+      >
+        {icon ? <View style={styles.iconWrapper}>{icon}</View> : null}
+        <View style={styles.content}>
+          <Text style={[styles.title, { color: colors.foreground }]} allowFontScaling={true}>
+            {title}
+          </Text>
+          {subtitle ? (
+            <Text style={[styles.subtitle, { color: colors.mutedForeground }]} allowFontScaling={true}>
+              {subtitle}
+            </Text>
+          ) : null}
+        </View>
+        {trailing !== undefined ? (
+          typeof trailing === 'string' ? (
+            <Text style={[styles.trailing, { color: colors.mutedForeground }]} allowFontScaling={true}>
+              {trailing}
+            </Text>
+          ) : (
+            trailing
+          )
+        ) : null}
+      </TouchableOpacity>
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    gap: 12,
+  },
+  iconWrapper: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  content: {
+    flex: 1,
+    gap: 3,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '500',
+    lineHeight: 22,
+  },
+  subtitle: {
+    fontSize: 13,
+    lineHeight: 18,
+  },
+  trailing: {
+    fontSize: 15,
+  },
+  disabled: {
+    opacity: 0.45,
+  },
+})

package/src/components/ListItem/index.ts

@@ -0,0 +1,2 @@
+export { ListItem } from './ListItem'
+export type { ListItemProps } from './ListItem'

package/src/components/MonthPicker/MonthPicker.tsx

@@ -0,0 +1,92 @@
+import React from 'react'
+import { View, Text, TouchableOpacity, StyleSheet, ViewStyle } from 'react-native'
+import * as Haptics from 'expo-haptics'
+import { useTheme } from '../../theme'
+
+const MONTH_NAMES = [
+  'January', 'February', 'March', 'April', 'May', 'June',
+  'July', 'August', 'September', 'October', 'November', 'December',
+]
+
+export interface MonthPickerValue {
+  /** Month number 1–12 */
+  month: number
+  year: number
+}
+
+export interface MonthPickerProps {
+  value: MonthPickerValue
+  onChange: (value: MonthPickerValue) => void
+  style?: ViewStyle
+}
+
+export function MonthPicker({ value, onChange, style }: MonthPickerProps) {
+  const { colors } = useTheme()
+
+  const handlePrev = () => {
+    Haptics.selectionAsync()
+    if (value.month === 1) {
+      onChange({ month: 12, year: value.year - 1 })
+    } else {
+      onChange({ month: value.month - 1, year: value.year })
+    }
+  }
+
+  const handleNext = () => {
+    Haptics.selectionAsync()
+    if (value.month === 12) {
+      onChange({ month: 1, year: value.year + 1 })
+    } else {
+      onChange({ month: value.month + 1, year: value.year })
+    }
+  }
+
+  return (
+    <View style={[styles.container, style]}>
+      <TouchableOpacity
+        style={styles.arrow}
+        onPress={handlePrev}
+        activeOpacity={0.6}
+        touchSoundDisabled={true}
+      >
+        <Text style={[styles.arrowText, { color: colors.foreground }]}>‹</Text>
+      </TouchableOpacity>
+      <Text style={[styles.label, { color: colors.foreground }]} allowFontScaling={true}>
+        {MONTH_NAMES[value.month - 1]} {value.year}
+      </Text>
+      <TouchableOpacity
+        style={styles.arrow}
+        onPress={handleNext}
+        activeOpacity={0.6}
+        touchSoundDisabled={true}
+      >
+        <Text style={[styles.arrowText, { color: colors.foreground }]}>›</Text>
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  arrow: {
+    width: 44,
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  arrowText: {
+    fontSize: 24,
+    lineHeight: 30,
+  },
+  label: {
+    fontSize: 17,
+    fontWeight: '500',
+    lineHeight: 24,
+    textAlign: 'center',
+    minWidth: 160,
+  },
+})

package/src/components/MonthPicker/index.ts

@@ -0,0 +1,2 @@
+export { MonthPicker } from './MonthPicker'
+export type { MonthPickerProps, MonthPickerValue } from './MonthPicker'

package/src/components/Select/Select.tsx

@@ -163,10 +163,10 @@ export function Select({
 
 const styles = StyleSheet.create({
   container: {
-    gap: 4,
+    gap: 6,
   },
   label: {
-    fontSize: 14,
+    fontSize: 15,
     fontWeight: '500',
     marginBottom: 2,
   },
@@ -175,24 +175,24 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'space-between',
     borderWidth: 1.5,
-    borderRadius: 8,
-    paddingHorizontal: 16,
-    paddingVertical: 14,
+    borderRadius: 14,
+    paddingHorizontal: 20,
+    paddingVertical: 16,
   },
   triggerText: {
-    fontSize: 16,
+    fontSize: 17,
     flex: 1,
   },
   chevron: {
-    fontSize: 14,
+    fontSize: 16,
     marginLeft: 8,
   },
   helperText: {
-    fontSize: 12,
+    fontSize: 13,
   },
   sheetBackground: {
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
   },
   sheetHandle: {
     width: 36,
@@ -200,32 +200,32 @@ const styles = StyleSheet.create({
     borderRadius: 2,
   },
   sheetContent: {
-    paddingHorizontal: 16,
-    paddingBottom: 32,
+    paddingHorizontal: 20,
+    paddingBottom: 36,
   },
   sheetTitle: {
-    fontSize: 16,
+    fontSize: 17,
     fontWeight: '600',
-    paddingVertical: 12,
+    paddingVertical: 16,
     paddingHorizontal: 4,
   },
   option: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    paddingHorizontal: 12,
-    paddingVertical: 14,
-    borderRadius: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    borderRadius: 12,
   },
   optionText: {
-    fontSize: 15,
+    fontSize: 17,
     flex: 1,
   },
   disabledOption: {
     opacity: 0.45,
   },
   checkmark: {
-    fontSize: 14,
+    fontSize: 16,
     fontWeight: '600',
     marginLeft: 8,
   },

package/src/components/Switch/Switch.tsx

@@ -1,11 +1,13 @@
 import React, { useEffect, useRef } from 'react'
-import { TouchableOpacity, Animated, StyleSheet, ViewStyle } from 'react-native'
+import { TouchableOpacity, Animated, StyleSheet, ViewStyle, Platform } from 'react-native'
+
+const nativeDriver = Platform.OS !== 'web'
 import * as Haptics from 'expo-haptics'
 import { useTheme } from '../../theme'
 
-const TRACK_WIDTH = 56
-const TRACK_HEIGHT = 32
-const THUMB_SIZE = 24
+const TRACK_WIDTH = 60
+const TRACK_HEIGHT = 36
+const THUMB_SIZE = 28
 const THUMB_OFFSET = 4
 const THUMB_TRAVEL = TRACK_WIDTH - THUMB_SIZE - THUMB_OFFSET * 2
 
@@ -25,7 +27,7 @@ export function Switch({ checked = false, onCheckedChange, disabled, style }: Sw
     Animated.parallel([
       Animated.spring(translateX, {
         toValue: checked ? THUMB_TRAVEL : 0,
-        useNativeDriver: true,
+        useNativeDriver: nativeDriver,
         bounciness: 4,
       }),
       Animated.timing(trackOpacity, {
@@ -70,10 +72,13 @@ const styles = StyleSheet.create({
     width: TRACK_WIDTH,
     height: TRACK_HEIGHT,
     borderRadius: TRACK_HEIGHT / 2,
-    justifyContent: 'center',
-    paddingHorizontal: THUMB_OFFSET,
+    // No justifyContent/alignItems — thumb uses absolute positioning
+    // so the track's flex layout doesn't interfere with translateX animation
   },
   thumb: {
+    position: 'absolute',
+    top: THUMB_OFFSET,
+    left: THUMB_OFFSET,
     width: THUMB_SIZE,
     height: THUMB_SIZE,
     borderRadius: THUMB_SIZE / 2,

package/src/components/Tabs/Tabs.tsx

@@ -6,6 +6,7 @@ import { useTheme } from '../../theme'
 export interface TabItem {
   label: string
   value: string
+  icon?: React.ReactNode
 }
 
 export interface TabsProps {
@@ -60,15 +61,22 @@ function TabTrigger({
       touchSoundDisabled={true}
     >
       <Animated.View style={{ transform: [{ scale }] }}>
-        <Text
-          style={[
-            styles.triggerLabel,
-            { color: isActive ? colors.foreground : colors.mutedForeground },
-            isActive && styles.activeTriggerLabel,
-          ]}
-        >
-          {tab.label}
-        </Text>
+        <View style={styles.triggerInner}>
+          {tab.icon ? (
+            <View style={styles.triggerIcon}>
+              {(typeof tab.icon === 'function' ? (tab.icon as any)(isActive) : tab.icon) as React.ReactNode}
+            </View>
+          ) : null}
+          <Text
+            style={[
+              styles.triggerLabel,
+              { color: isActive ? colors.foreground : colors.mutedForeground },
+              isActive && styles.activeTriggerLabel,
+            ]}
+          >
+            {tab.label}
+          </Text>
+        </View>
       </Animated.View>
     </TouchableOpacity>
   )
@@ -133,7 +141,7 @@ export function Tabs({ tabs, value, onValueChange, children, style }: TabsProps)
               bottom: 4,
               left: pillX,
               width: pillWidth,
-              borderRadius: 6,
+              borderRadius: 8,
               shadowColor: '#000',
               shadowOffset: { width: 0, height: 1 },
               shadowOpacity: 0.1,
@@ -172,22 +180,33 @@ export function TabsContent({ value, activeValue, children, style }: TabsContent
 const styles = StyleSheet.create({
   list: {
     flexDirection: 'row',
-    borderRadius: 8,
+    borderRadius: 12,
     padding: 4,
     gap: 4,
   },
   pill: {},
   trigger: {
     flex: 1,
-    paddingVertical: 8,
-    paddingHorizontal: 12,
-    borderRadius: 6,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderRadius: 8,
     alignItems: 'center',
     justifyContent: 'center',
     zIndex: 1,
   },
+  triggerInner: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+  },
+  triggerIcon: {
+    marginRight: 6,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   triggerLabel: {
-    fontSize: 14,
+    fontSize: 15,
     fontWeight: '400',
   },
   activeTriggerLabel: {