@retray-dev/ui-kit 1.7.0 → 2.3.0

package/src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -0,0 +1,87 @@
+import React from 'react'
+import { Modal, View, Text, StyleSheet, TouchableOpacity } from 'react-native'
+import { useTheme } from '../../theme'
+import { Button } from '../Button'
+
+export interface ConfirmDialogProps {
+  visible: boolean
+  title: string
+  description?: string
+  confirmLabel?: string
+  cancelLabel?: string
+  confirmVariant?: 'primary' | 'destructive'
+  onConfirm: () => void
+  onCancel: () => void
+}
+
+export function ConfirmDialog({
+  visible,
+  title,
+  description,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  confirmVariant = 'primary',
+  onConfirm,
+  onCancel,
+}: ConfirmDialogProps) {
+  const { colors } = useTheme()
+
+  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}
+          </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>
+        </View>
+      </TouchableOpacity>
+    </Modal>
+  )
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 24,
+  },
+  dialog: {
+    width: '100%',
+    maxWidth: 400,
+    borderRadius: 16,
+    padding: 24,
+    gap: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.15,
+    shadowRadius: 16,
+    elevation: 8,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+    lineHeight: 26,
+  },
+  description: {
+    fontSize: 15,
+    lineHeight: 22,
+  },
+  actions: {
+    gap: 10,
+    marginTop: 8,
+  },
+})

package/src/components/ConfirmDialog/index.ts

@@ -0,0 +1,2 @@
+export { ConfirmDialog } from './ConfirmDialog'
+export type { ConfirmDialogProps } from './ConfirmDialog'

package/src/components/CurrencyDisplay/CurrencyDisplay.tsx

@@ -8,6 +8,8 @@ export interface CurrencyDisplayProps {
   prefix?: string
   /** When true, shows two decimal places separated by a comma (e.g. `$25.000,00`). Defaults to `false`. */
   showDecimals?: boolean
+  /** Override the color of the formatted text. Defaults to the `foreground` theme token. */
+  textColor?: string
   style?: ViewStyle
 }
 
@@ -24,13 +26,13 @@ function formatValue(value: number | string, prefix: string, showDecimals: boole
   return `${sign}${prefix}${intPart}`
 }
 
-export function CurrencyDisplay({ value, prefix = '$', showDecimals = false, style }: CurrencyDisplayProps) {
+export function CurrencyDisplay({ value, prefix = '$', showDecimals = false, textColor, style }: CurrencyDisplayProps) {
   const { colors } = useTheme()
   const formatted = formatValue(value, prefix, showDecimals)
 
   return (
     <View style={[styles.container, style]}>
-      <Text style={[styles.amount, { color: colors.foreground }]} allowFontScaling={true}>
+      <Text style={[styles.amount, { color: textColor ?? colors.foreground }]} allowFontScaling={true}>
         {formatted}
       </Text>
     </View>

package/src/components/CurrencyInput/CurrencyInput.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ViewStyle } from 'react-native'
+import { ViewStyle, TextStyle } from 'react-native'
 import { Input } from '../Input'
 
 export interface CurrencyInputProps {
@@ -11,6 +11,8 @@ export interface CurrencyInputProps {
   prefix?: string
   /** Character used to separate groups of three digits. Defaults to `'.'`. */
   thousandsSeparator?: '.' | ','
+  /** Font size variant. `'large'` renders at 36pt, `'default'` at 17pt. */
+  size?: 'default' | 'large'
   label?: string
   /** Red helper text; also changes input border to destructive color. */
   error?: string
@@ -18,6 +20,7 @@ export interface CurrencyInputProps {
   placeholder?: string
   editable?: boolean
   containerStyle?: ViewStyle
+  style?: TextStyle
 }
 
 function formatCurrency(raw: string, separator: '.' | ','): string {
@@ -32,12 +35,14 @@ export function CurrencyInput({
   onChangeValue,
   prefix = '$',
   thousandsSeparator = '.',
+  size = 'default',
   label,
   error,
   hint,
   placeholder,
   editable,
   containerStyle,
+  style,
 }: CurrencyInputProps) {
   const handleChange = (text: string) => {
     const withoutPrefix = prefix && text.startsWith(prefix) ? text.slice(prefix.length) : text
@@ -49,6 +54,8 @@ export function CurrencyInput({
     onChangeValue?.(isNaN(raw) ? 0 : raw)
   }
 
+  const inputStyle: TextStyle = size === 'large' ? { fontSize: 36 } : {}
+
   return (
     <Input
       value={value}
@@ -60,6 +67,7 @@ export function CurrencyInput({
       placeholder={placeholder ?? `${prefix}0`}
       editable={editable}
       containerStyle={containerStyle}
+      style={[inputStyle, style]}
     />
   )
 }

package/src/components/EmptyState/EmptyState.tsx

@@ -7,24 +7,47 @@ 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.description, { color: colors.mutedForeground }]}>{description}</Text>
+        <Text
+          style={[styles.title, isCompact && styles.titleCompact, { color: colors.foreground }]}
+          allowFontScaling={true}
+        >
+          {title}
+        </Text>
+        {description && !isCompact ? (
+          <Text style={[styles.description, { color: colors.mutedForeground }]} allowFontScaling={true}>{description}</Text>
         ) : null}
       </View>
-      {action ? <View style={styles.action}>{action}</View> : null}
+      {action && !isCompact ? <View style={styles.action}>{action}</View> : null}
     </View>
   )
 }
@@ -39,6 +62,10 @@ const styles = StyleSheet.create({
     padding: 32,
     gap: 16,
   },
+  containerCompact: {
+    padding: 20,
+    gap: 10,
+  },
   iconWrapper: {
     width: 48,
     height: 48,
@@ -46,6 +73,11 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  iconWrapperCompact: {
+    width: 36,
+    height: 36,
+    borderRadius: 8,
+  },
   textWrapper: {
     alignItems: 'center',
     gap: 8,
@@ -56,6 +88,9 @@ const styles = StyleSheet.create({
     fontWeight: '500',
     textAlign: 'center',
   },
+  titleCompact: {
+    fontSize: 15,
+  },
   description: {
     fontSize: 14,
     lineHeight: 20,

package/src/components/Input/Input.tsx

@@ -1,46 +1,104 @@
 import React, { useState } from 'react'
-import { TextInput, View, Text, StyleSheet, TextInputProps, ViewStyle } from 'react-native'
+import { TextInput, View, Text, StyleSheet, TextInputProps, ViewStyle, TextStyle, TouchableOpacity, Platform } from 'react-native'
 import { useTheme } from '../../theme'
 
+const webInputResetStyle: any =
+  Platform.OS === 'web'
+    ? { outlineStyle: 'none', outlineWidth: 0, outlineColor: 'transparent', boxShadow: 'none' }
+    : {}
+
 export interface InputProps extends TextInputProps {
   label?: string
   /** Red helper text below the input; also changes border to `destructive` color. Takes priority over `hint`. */
   error?: string
   /** Helper text shown below the input when there is no error. */
   hint?: string
-  /** Style for the outer container `View`. Use `style` (from `TextInputProps`) to style the `TextInput` itself. */
+  /** Text or component rendered before the input text. */
+  prefix?: React.ReactNode
+  /** Text or component rendered after the input text. */
+  suffix?: React.ReactNode
+  /** Style applied to prefix text if prefix is a string. */
+  prefixStyle?: TextStyle
+  /** Style applied to suffix text if suffix is a string. */
+  suffixStyle?: TextStyle
+  /** 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, containerStyle, style, onFocus, onBlur, ...props }: InputProps) {
+export function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, type = 'text', containerStyle, style, onFocus, onBlur, secureTextEntry, ...props }: InputProps) {
   const { colors } = useTheme()
   const [focused, setFocused] = useState(false)
+  const [showPassword, setShowPassword] = useState(false)
+
+  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 ? (
+    <TouchableOpacity onPress={() => setShowPassword(!showPassword)} style={styles.passwordToggle} activeOpacity={0.6}>
+      <Text style={[styles.suffixText, { color: colors.mutedForeground }]}>{showPassword ? '👁' : '👁‍🗨'}</Text>
+    </TouchableOpacity>
+  ) : suffix
 
   return (
     <View style={[styles.container, containerStyle]}>
       {label ? <Text style={[styles.label, { color: colors.foreground }]} allowFontScaling={true}>{label}</Text> : null}
-      <TextInput
+      <View
         style={[
-          styles.input,
+          styles.inputWrapper,
           {
-            borderColor: error ? colors.destructive : focused ? colors.ring : colors.border,
-            color: colors.foreground,
+            borderColor: error
+              ? colors.destructive
+              : focused
+                ? (colors.ring ?? colors.primary)
+                : colors.border,
             backgroundColor: colors.background,
           },
-          style,
         ]}
-        onFocus={(e) => {
-          setFocused(true)
-          onFocus?.(e)
-        }}
-        onBlur={(e) => {
-          setFocused(false)
-          onBlur?.(e)
-        }}
-        placeholderTextColor={colors.mutedForeground}
-        allowFontScaling={true}
-        {...props}
-      />
+      >
+        {prefix ? (
+          typeof prefix === 'string' ? (
+            <Text style={[styles.prefixText, { color: colors.mutedForeground }, prefixStyle]} allowFontScaling={true}>
+              {prefix}
+            </Text>
+          ) : (
+            <View style={styles.prefixContainer}>{prefix}</View>
+          )
+        ) : null}
+        <TextInput
+          style={[
+            styles.input,
+            {
+              color: colors.foreground,
+            },
+            webInputResetStyle,
+            style,
+          ]}
+          onFocus={(e) => {
+            setFocused(true)
+            onFocus?.(e)
+          }}
+          onBlur={(e) => {
+            setFocused(false)
+            onBlur?.(e)
+          }}
+          placeholderTextColor={colors.mutedForeground}
+          allowFontScaling={true}
+          secureTextEntry={effectiveSecure}
+          {...props}
+        />
+        {effectiveSuffix ? (
+          typeof effectiveSuffix === 'string' ? (
+            <Text style={[styles.suffixText, { color: colors.mutedForeground }, suffixStyle]} allowFontScaling={true}>
+              {effectiveSuffix}
+            </Text>
+          ) : (
+            <View style={styles.suffixContainer}>{effectiveSuffix}</View>
+          )
+        ) : null}
+      </View>
       {error ? (
         <Text style={[styles.helperText, { color: colors.destructive }]} allowFontScaling={true}>{error}</Text>
       ) : null}
@@ -60,12 +118,35 @@ const styles = StyleSheet.create({
     fontWeight: '500',
     marginBottom: 6,
   },
-  input: {
+  inputWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
     borderWidth: 1.5,
     borderRadius: 14,
     paddingHorizontal: 20,
     paddingVertical: 16,
+  },
+  input: {
+    flex: 1,
     fontSize: 17,
+    paddingVertical: 0,
+  },
+  prefixContainer: {
+    marginRight: 8,
+  },
+  prefixText: {
+    fontSize: 17,
+    marginRight: 8,
+  },
+  suffixContainer: {
+    marginLeft: 8,
+  },
+  suffixText: {
+    fontSize: 17,
+    marginLeft: 8,
+  },
+  passwordToggle: {
+    padding: 4,
   },
   helperText: {
     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 }]} allowFontScaling={true}>‹</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 }]} allowFontScaling={true}>›</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'