@retray-dev/ui-kit 2.3.0 → 2.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "2.3.0",
+  "version": "2.5.1",
   "description": "Personal UI Kit for React Native / Expo",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -47,7 +47,8 @@
     "react-native-worklets": ">=0.8.0",
     "react-native-safe-area-context": ">=4.0.0",
     "@react-native-picker/picker": ">=2.0.0",
-    "@react-native-community/slider": ">=4.0.0"
+    "@react-native-community/slider": ">=4.0.0",
+    "@expo/vector-icons": ">=14.0.0"
   },
   "pnpm": {
     "overrides": {
@@ -65,6 +66,7 @@
     "@react-native-picker/picker": "2.11.4",
     "@react-native-community/slider": "^4.5.5",
     "@types/react": "^19.1.0",
+    "@expo/vector-icons": "^15.1.1",
     "expo-haptics": "~15.0.8",
     "expo-linear-gradient": "~15.0.8",
     "react": "19.1.0",

package/src/components/Accordion/Accordion.tsx

@@ -14,6 +14,7 @@ import ReanimatedAnimated, {
   withTiming,
   Easing,
 } from 'react-native-reanimated'
+import { Entypo } from '@expo/vector-icons'
 import * as Haptics from 'expo-haptics'
 import { useTheme } from '../../theme'
 
@@ -99,11 +100,9 @@ function AccordionItemComponent({
           touchSoundDisabled={true}
         >
           <Text style={[styles.triggerText, { color: colors.foreground }]}>{item.trigger}</Text>
-          <ReanimatedAnimated.Text
-            style={[styles.chevron, { color: colors.foreground }, rotationStyle]}
-          >
-            ▾
-          </ReanimatedAnimated.Text>
+          <ReanimatedAnimated.View style={[styles.chevron, rotationStyle]}>
+            <Entypo name="chevron-down" size={20} color={colors.foreground} />
+          </ReanimatedAnimated.View>
         </TouchableOpacity>
       </Animated.View>
 
@@ -162,7 +161,6 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   chevron: {
-    fontSize: 18,
     marginLeft: 8,
   },
   content: {

package/src/components/AlertBanner/AlertBanner.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { View, Text, StyleSheet, ViewStyle } from 'react-native'
+import { FontAwesome5, MaterialIcons, Entypo } from '@expo/vector-icons'
 import { useTheme } from '../../theme'
 
 export type AlertBannerVariant = 'default' | 'destructive' | 'success'
@@ -31,17 +32,17 @@ export function AlertBanner({ title, description, variant = 'default', icon, sty
     : colors.mutedForeground
 
   const defaultIcon =
-    variant === 'destructive' ? '⚠' : variant === 'success' ? '✓' : 'ℹ'
+    variant === 'success' ? (
+      <FontAwesome5 name="check-circle" size={18} color={titleColor} />
+    ) : variant === 'destructive' ? (
+      <MaterialIcons name="error-outline" size={20} color={titleColor} />
+    ) : (
+      <Entypo name="info-with-circle" size={18} color={titleColor} />
+    )
 
   return (
     <View style={[styles.container, { backgroundColor: colors.card, borderColor }, style]}>
-      {icon ? (
-        <View style={styles.icon}>{icon}</View>
-      ) : (
-        <View style={styles.icon}>
-          <Text style={[styles.defaultIcon, { color: titleColor }]} allowFontScaling={true}>{defaultIcon}</Text>
-        </View>
-      )}
+      <View style={styles.icon}>{icon ?? defaultIcon}</View>
       <View style={styles.content}>
         {title ? <Text style={[styles.title, { color: titleColor }]} allowFontScaling={true}>{title}</Text> : null}
         {description ? (
@@ -56,12 +57,17 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     borderWidth: 1,
-    borderRadius: 8,
+    borderRadius: 12,
     padding: 16,
     gap: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.06,
+    shadowRadius: 12,
+    elevation: 3,
   },
   icon: {
-    marginTop: 2,
+    marginTop: 0,
   },
   content: {
     flex: 1,
@@ -76,8 +82,4 @@ const styles = StyleSheet.create({
     fontSize: 14,
     lineHeight: 20,
   },
-  defaultIcon: {
-    fontSize: 18,
-    fontWeight: '700',
-  },
 })

package/src/components/Badge/Badge.tsx

@@ -69,7 +69,7 @@ export function Badge({ label, children, variant = 'default', size = 'md', icon,
 
 const styles = StyleSheet.create({
   container: {
-    borderRadius: 8,
+    borderRadius: 6,
     alignSelf: 'flex-start',
     flexDirection: 'row',
     alignItems: 'center',

package/src/components/Button/Button.tsx

@@ -38,9 +38,9 @@ export interface ButtonProps extends TouchableOpacityProps {
 }
 
 const containerSizeStyles: Record<ButtonSize, ViewStyle> = {
-  sm: { paddingHorizontal: 20, paddingVertical: 12 },
-  md: { paddingHorizontal: 24, paddingVertical: 16 },
-  lg: { paddingHorizontal: 32, paddingVertical: 20 },
+  sm: { paddingHorizontal: 20, paddingVertical: 10 },
+  md: { paddingHorizontal: 24, paddingVertical: 14 },
+  lg: { paddingHorizontal: 32, paddingVertical: 18 },
 }
 
 const labelSizeStyles: Record<ButtonSize, TextStyle> = {
@@ -156,6 +156,6 @@ const styles = StyleSheet.create({
     fontWeight: '600',
   },
   labelWithIcon: {
-    marginHorizontal: 6,
+    marginHorizontal: 8,
   },
 })

package/src/components/Card/Card.tsx

@@ -76,10 +76,10 @@ export function Card({ children, variant = 'elevated', onPress, style }: CardPro
       backgroundColor: colors.card,
       borderColor: colors.border,
       shadowColor: '#000',
-      shadowOffset: { width: 0, height: 1 },
-      shadowOpacity: 0.05,
-      shadowRadius: 2,
-      elevation: 1,
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.06,
+      shadowRadius: 12,
+      elevation: 3,
     },
     outlined: {
       backgroundColor: colors.card,
@@ -146,16 +146,11 @@ export function CardFooter({ children, style }: CardFooterProps) {
 
 const styles = StyleSheet.create({
   card: {
-    borderRadius: 20,
+    borderRadius: 12,
     borderWidth: 1,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.05,
-    shadowRadius: 2,
-    elevation: 1,
   },
   header: {
-    padding: 28,
+    padding: 24,
     paddingBottom: 0,
     gap: 8,
   },
@@ -169,10 +164,10 @@ const styles = StyleSheet.create({
     lineHeight: 22,
   },
   content: {
-    padding: 28,
+    padding: 24,
   },
   footer: {
-    padding: 28,
+    padding: 24,
     paddingTop: 0,
     flexDirection: 'row',
     alignItems: 'center',

package/src/components/Checkbox/Checkbox.tsx

@@ -77,16 +77,16 @@ const styles = StyleSheet.create({
     gap: 12,
   },
   box: {
-    width: 28,
-    height: 28,
+    width: 24,
+    height: 24,
     borderRadius: 8,
     borderWidth: 1.5,
     alignItems: 'center',
     justifyContent: 'center',
   },
   checkmark: {
-    width: 15,
-    height: 9,
+    width: 12,
+    height: 7,
     borderLeftWidth: 2,
     borderBottomWidth: 2,
     transform: [{ rotate: '-45deg' }, { translateY: -1 }],

package/src/components/Input/Input.tsx

@@ -1,5 +1,6 @@
 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'
 
 const webInputResetStyle: any =
@@ -38,7 +39,7 @@ export function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixS
   // 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>
+      <AntDesign name={showPassword ? 'eye' : 'eye-invisible'} size={20} color={colors.mutedForeground} />
     </TouchableOpacity>
   ) : suffix
 
@@ -111,20 +112,19 @@ export function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixS
 
 const styles = StyleSheet.create({
   container: {
-    gap: 6,
+    gap: 8,
   },
   label: {
     fontSize: 15,
     fontWeight: '500',
-    marginBottom: 6,
   },
   inputWrapper: {
     flexDirection: 'row',
     alignItems: 'center',
     borderWidth: 1.5,
-    borderRadius: 14,
-    paddingHorizontal: 20,
-    paddingVertical: 16,
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
   },
   input: {
     flex: 1,

package/src/components/ListItem/ListItem.tsx

@@ -6,24 +6,81 @@ import {
   Text,
   StyleSheet,
   ViewStyle,
+  TextStyle,
   Platform,
 } from 'react-native'
+import { Entypo } from '@expo/vector-icons'
 import * as Haptics from 'expo-haptics'
 import { useTheme } from '../../theme'
 
 const nativeDriver = Platform.OS !== 'web'
 
+export type ListItemVariant = 'plain' | 'card'
+
 export interface ListItemProps {
+  /**
+   * Arbitrary content rendered on the left (avatar, icon, image, etc.).
+   * Rendered inside a 44×44 aligned container.
+   */
+  leftRender?: React.ReactNode
+  /**
+   * Arbitrary content rendered on the right (badge, price, chevron, switch, etc.).
+   * Replaces the old `trailing` prop (still accepted as an alias).
+   */
+  rightRender?: React.ReactNode | string
+  /** @deprecated Use `rightRender` instead. */
+  trailing?: React.ReactNode | string
+  /** @deprecated Use `leftRender` instead. */
   icon?: React.ReactNode
+
   title: string
+  /** Secondary line below the title. */
   subtitle?: string
-  trailing?: string | React.ReactNode
+  /** Tertiary / caption line below the subtitle. */
+  caption?: string
+
+  /**
+   * - `plain` (default): no background, no border — designed to sit inside a parent surface (Card, list wrapper, etc.)
+   * - `card`: standalone surface with background, border and shadow.
+   */
+  variant?: ListItemVariant
+
+  /** Show a right-pointing chevron on the far right. Ignored when `rightRender` / `trailing` is set. */
+  showChevron?: boolean
+
+  /** Visual separator line at the bottom of the item. Useful when rendering multiple plain items in a list. */
+  showSeparator?: boolean
+
   onPress?: () => void
   disabled?: boolean
+  /** Style applied to the outer container. */
   style?: ViewStyle
+  /** Style applied to the title Text. */
+  titleStyle?: TextStyle
+  /** Style applied to the subtitle Text. */
+  subtitleStyle?: TextStyle
+  /** Style applied to the caption Text. */
+  captionStyle?: TextStyle
 }
 
-export function ListItem({ icon, title, subtitle, trailing, onPress, disabled, style }: ListItemProps) {
+export function ListItem({
+  leftRender,
+  rightRender,
+  trailing,
+  icon,
+  title,
+  subtitle,
+  caption,
+  variant = 'plain',
+  showChevron = false,
+  showSeparator = false,
+  onPress,
+  disabled,
+  style,
+  titleStyle,
+  subtitleStyle,
+  captionStyle,
+}: ListItemProps) {
   const { colors } = useTheme()
   const scale = useRef(new Animated.Value(1)).current
 
@@ -51,10 +108,29 @@ export function ListItem({ icon, title, subtitle, trailing, onPress, disabled, s
     onPress?.()
   }
 
+  // Support legacy props
+  const effectiveLeft = leftRender ?? icon
+  const effectiveRight = rightRender ?? trailing
+
+  const cardStyle: ViewStyle =
+    variant === 'card'
+      ? {
+          backgroundColor: colors.card,
+          borderRadius: 12,
+          borderWidth: 1,
+          borderColor: colors.border,
+          shadowColor: '#000',
+          shadowOffset: { width: 0, height: 2 },
+          shadowOpacity: 0.06,
+          shadowRadius: 6,
+          elevation: 2,
+        }
+      : {}
+
   return (
     <Animated.View style={[{ transform: [{ scale }] }, disabled && styles.disabled]}>
       <TouchableOpacity
-        style={[styles.container, style]}
+        style={[styles.container, cardStyle, style]}
         onPress={onPress ? handlePress : undefined}
         onPressIn={handlePressIn}
         onPressOut={handlePressOut}
@@ -62,27 +138,64 @@ export function ListItem({ icon, title, subtitle, trailing, onPress, disabled, s
         activeOpacity={1}
         touchSoundDisabled={true}
       >
-        {icon ? <View style={styles.iconWrapper}>{icon}</View> : null}
+        {effectiveLeft ? (
+          <View style={styles.leftContainer}>{effectiveLeft}</View>
+        ) : null}
+
         <View style={styles.content}>
-          <Text style={[styles.title, { color: colors.foreground }]} allowFontScaling={true}>
+          <Text
+            style={[styles.title, { color: colors.foreground }, titleStyle]}
+            numberOfLines={2}
+            allowFontScaling={true}
+          >
             {title}
           </Text>
           {subtitle ? (
-            <Text style={[styles.subtitle, { color: colors.mutedForeground }]} allowFontScaling={true}>
+            <Text
+              style={[styles.subtitle, { color: colors.mutedForeground }, subtitleStyle]}
+              numberOfLines={2}
+              allowFontScaling={true}
+            >
               {subtitle}
             </Text>
           ) : null}
-        </View>
-        {trailing !== undefined ? (
-          typeof trailing === 'string' ? (
-            <Text style={[styles.trailing, { color: colors.mutedForeground }]} allowFontScaling={true}>
-              {trailing}
+          {caption ? (
+            <Text
+              style={[styles.caption, { color: colors.mutedForeground }, captionStyle]}
+              numberOfLines={1}
+              allowFontScaling={true}
+            >
+              {caption}
             </Text>
-          ) : (
-            trailing
-          )
+          ) : null}
+        </View>
+
+        {effectiveRight !== undefined ? (
+          <View style={styles.rightContainer}>
+            {typeof effectiveRight === 'string' ? (
+              <Text
+                style={[styles.rightText, { color: colors.mutedForeground }]}
+                allowFontScaling={true}
+              >
+                {effectiveRight}
+              </Text>
+            ) : (
+              effectiveRight
+            )}
+          </View>
+        ) : showChevron ? (
+          <Entypo name="chevron-with-circle-right" size={20} color={colors.mutedForeground} />
         ) : null}
       </TouchableOpacity>
+
+      {showSeparator ? (
+        <View
+          style={[
+            styles.separator,
+            { backgroundColor: colors.border, marginLeft: effectiveLeft ? 16 + 44 + 12 : 16 },
+          ]}
+        />
+      ) : null}
     </Animated.View>
   )
 }
@@ -95,26 +208,49 @@ const styles = StyleSheet.create({
     paddingVertical: 14,
     gap: 12,
   },
-  iconWrapper: {
+  leftContainer: {
+    width: 44,
+    height: 44,
     alignItems: 'center',
     justifyContent: 'center',
+    flexShrink: 0,
   },
   content: {
     flex: 1,
-    gap: 3,
+    gap: 4,
   },
   title: {
-    fontSize: 16,
+    fontSize: 17,
     fontWeight: '500',
-    lineHeight: 22,
+    lineHeight: 24,
   },
   subtitle: {
-    fontSize: 13,
-    lineHeight: 18,
+    fontSize: 14,
+    fontWeight: '400',
+    lineHeight: 20,
   },
-  trailing: {
+  caption: {
+    fontSize: 12,
+    fontWeight: '400',
+    lineHeight: 16,
+    opacity: 0.7,
+  },
+  rightContainer: {
+    alignItems: 'flex-end',
+    justifyContent: 'center',
+    flexShrink: 0,
+    maxWidth: 160,
+  },
+  rightText: {
     fontSize: 15,
   },
+  chevron: {
+    marginLeft: 4,
+  },
+  separator: {
+    height: StyleSheet.hairlineWidth,
+    marginRight: 16,
+  },
   disabled: {
     opacity: 0.45,
   },

package/src/components/MonthPicker/MonthPicker.tsx

@@ -1,5 +1,6 @@
 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 { useTheme } from '../../theme'
 
@@ -49,7 +50,7 @@ export function MonthPicker({ value, onChange, style }: MonthPickerProps) {
         activeOpacity={0.6}
         touchSoundDisabled={true}
       >
-        <Text style={[styles.arrowText, { color: colors.foreground }]} allowFontScaling={true}>‹</Text>
+        <Entypo name="chevron-left" size={22} color={colors.foreground} />
       </TouchableOpacity>
       <Text style={[styles.label, { color: colors.foreground }]} allowFontScaling={true}>
         {MONTH_NAMES[value.month - 1]} {value.year}
@@ -60,7 +61,7 @@ export function MonthPicker({ value, onChange, style }: MonthPickerProps) {
         activeOpacity={0.6}
         touchSoundDisabled={true}
       >
-        <Text style={[styles.arrowText, { color: colors.foreground }]} allowFontScaling={true}>›</Text>
+        <Entypo name="chevron-right" size={22} color={colors.foreground} />
       </TouchableOpacity>
     </View>
   )
@@ -78,10 +79,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  arrowText: {
-    fontSize: 24,
-    lineHeight: 30,
-  },
   label: {
     fontSize: 17,
     fontWeight: '500',

package/src/components/RadioGroup/RadioGroup.tsx

@@ -101,7 +101,7 @@ export function RadioGroup({
 
 const styles = StyleSheet.create({
   container: {
-    gap: 10,
+    gap: 12,
   },
   horizontal: {
     flexDirection: 'row',
@@ -110,7 +110,7 @@ const styles = StyleSheet.create({
   row: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: 10,
+    gap: 12,
   },
   radio: {
     width: 24,

package/src/components/Select/Select.tsx

@@ -1,6 +1,7 @@
 import React, { useRef, useState } from 'react'
 import { View, Text, TouchableOpacity, Modal, Animated, StyleSheet, ViewStyle, Platform } from 'react-native'
 import { Picker } from '@react-native-picker/picker'
+import { Entypo } from '@expo/vector-icons'
 import * as Haptics from 'expo-haptics'
 import { useTheme } from '../../theme'
 
@@ -106,7 +107,7 @@ export function Select({
             >
               {selected?.label ?? placeholder}
             </Text>
-            <Text style={[styles.chevron, { color: colors.mutedForeground }]}>▾</Text>
+            <Entypo name="chevron-with-circle-down" size={20} color={colors.mutedForeground} />
           </TouchableOpacity>
         </Animated.View>
       ) : null}
@@ -226,28 +227,31 @@ export function Select({
 
 const styles = StyleSheet.create({
   container: {
-    gap: 6,
+    gap: 8,
   },
   label: {
     fontSize: 15,
     fontWeight: '500',
-    marginBottom: 2,
   },
   trigger: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
     borderWidth: 1.5,
-    borderRadius: 14,
-    paddingHorizontal: 20,
-    paddingVertical: 16,
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.04,
+    shadowRadius: 2,
+    elevation: 1,
   },
   triggerText: {
     fontSize: 17,
     flex: 1,
   },
   chevron: {
-    fontSize: 16,
     marginLeft: 8,
   },
   helperText: {
@@ -258,15 +262,15 @@ const styles = StyleSheet.create({
     backgroundColor: 'rgba(0,0,0,0.4)',
   },
   iosSheet: {
-    borderTopLeftRadius: 24,
-    borderTopRightRadius: 24,
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
     paddingBottom: 32,
   },
   iosToolbar: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    paddingHorizontal: 20,
+    paddingHorizontal: 16,
     paddingVertical: 12,
     borderBottomWidth: 1,
   },
@@ -288,9 +292,9 @@ const styles = StyleSheet.create({
   },
   webPicker: {
     borderWidth: 1.5,
-    borderRadius: 14,
-    paddingHorizontal: 20,
-    paddingVertical: 16,
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
     fontSize: 17,
   },
 })

package/src/components/Textarea/Textarea.tsx

@@ -79,18 +79,17 @@ export function Textarea({
 
 const styles = StyleSheet.create({
   container: {
-    gap: 6,
+    gap: 8,
   },
   label: {
     fontSize: 15,
     fontWeight: '500',
-    marginBottom: 6,
   },
   input: {
     borderWidth: 1.5,
-    borderRadius: 14,
-    paddingHorizontal: 20,
-    paddingVertical: 16,
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
     fontSize: 17,
   },
   helperText: {