@retray-dev/ui-kit 2.3.0 → 2.5.1

package/dist/index.mjs

@@ -1,6 +1,7 @@
 import React23, { createContext, useMemo, useContext, useRef, useState, useEffect, useCallback } from 'react';
 import { Platform, StyleSheet, useColorScheme, Animated, TouchableOpacity, ActivityIndicator, Text, View, TextInput, Image, Easing, Modal } from 'react-native';
 import * as Haptics12 from 'expo-haptics';
+import { AntDesign, Entypo, FontAwesome5, MaterialIcons } from '@expo/vector-icons';
 import { LinearGradient } from 'expo-linear-gradient';
 import ReanimatedAnimated, { useSharedValue, useAnimatedStyle, withTiming, Easing as Easing$1, withSpring } from 'react-native-reanimated';
 import RNSlider from '@react-native-community/slider';
@@ -81,9 +82,9 @@ function useTheme() {
 }
 var nativeDriver = Platform.OS !== "web";
 var containerSizeStyles = {
-  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 }
 };
 var labelSizeStyles = {
   sm: { fontSize: 15 },
@@ -176,7 +177,7 @@ var styles = StyleSheet.create({
     fontWeight: "600"
   },
   labelWithIcon: {
-    marginHorizontal: 6
+    marginHorizontal: 8
   }
 });
 var variantStyles = {
@@ -207,7 +208,7 @@ function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, t
   const [showPassword, setShowPassword] = useState(false);
   const isPassword = type === "password";
   const effectiveSecure = isPassword ? !showPassword : secureTextEntry;
-  const effectiveSuffix = isPassword && !suffix ? /* @__PURE__ */ React23.createElement(TouchableOpacity, { onPress: () => setShowPassword(!showPassword), style: styles2.passwordToggle, activeOpacity: 0.6 }, /* @__PURE__ */ React23.createElement(Text, { style: [styles2.suffixText, { color: colors.mutedForeground }] }, showPassword ? "\u{1F441}" : "\u{1F441}\u200D\u{1F5E8}")) : suffix;
+  const effectiveSuffix = isPassword && !suffix ? /* @__PURE__ */ React23.createElement(TouchableOpacity, { onPress: () => setShowPassword(!showPassword), style: styles2.passwordToggle, activeOpacity: 0.6 }, /* @__PURE__ */ React23.createElement(AntDesign, { name: showPassword ? "eye" : "eye-invisible", size: 20, color: colors.mutedForeground })) : suffix;
   return /* @__PURE__ */ React23.createElement(View, { style: [styles2.container, containerStyle] }, label ? /* @__PURE__ */ React23.createElement(Text, { style: [styles2.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, /* @__PURE__ */ React23.createElement(
     View,
     {
@@ -250,20 +251,19 @@ function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, t
 }
 var styles2 = StyleSheet.create({
   container: {
-    gap: 6
+    gap: 8
   },
   label: {
     fontSize: 15,
-    fontWeight: "500",
-    marginBottom: 6
+    fontWeight: "500"
   },
   inputWrapper: {
     flexDirection: "row",
     alignItems: "center",
     borderWidth: 1.5,
-    borderRadius: 14,
-    paddingHorizontal: 20,
-    paddingVertical: 16
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 14
   },
   input: {
     flex: 1,
@@ -325,7 +325,7 @@ function Badge({ label, children, variant = "default", size = "md", icon, style
 }
 var styles3 = StyleSheet.create({
   container: {
-    borderRadius: 8,
+    borderRadius: 6,
     alignSelf: "flex-start",
     flexDirection: "row",
     alignItems: "center"
@@ -370,10 +370,10 @@ function Card({ children, variant = "elevated", onPress, style }) {
       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,
@@ -423,16 +423,11 @@ function CardFooter({ children, style }) {
 }
 var styles4 = StyleSheet.create({
   card: {
-    borderRadius: 20,
-    borderWidth: 1,
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.05,
-    shadowRadius: 2,
-    elevation: 1
+    borderRadius: 12,
+    borderWidth: 1
   },
   header: {
-    padding: 28,
+    padding: 24,
     paddingBottom: 0,
     gap: 8
   },
@@ -446,10 +441,10 @@ var styles4 = StyleSheet.create({
     lineHeight: 22
   },
   content: {
-    padding: 28
+    padding: 24
   },
   footer: {
-    padding: 28,
+    padding: 24,
     paddingTop: 0,
     flexDirection: "row",
     alignItems: "center"
@@ -587,19 +582,24 @@ function AlertBanner({ title, description, variant = "default", icon, style }) {
   const borderColor = variant === "destructive" ? colors.destructive : variant === "success" ? colors.success : colors.border;
   const titleColor = variant === "destructive" ? colors.destructive : variant === "success" ? colors.success : colors.foreground;
   const descColor = variant === "destructive" ? colors.destructive : variant === "success" ? colors.success : colors.mutedForeground;
-  const defaultIcon = variant === "destructive" ? "\u26A0" : variant === "success" ? "\u2713" : "\u2139";
-  return /* @__PURE__ */ React23.createElement(View, { style: [styles8.container, { backgroundColor: colors.card, borderColor }, style] }, icon ? /* @__PURE__ */ React23.createElement(View, { style: styles8.icon }, icon) : /* @__PURE__ */ React23.createElement(View, { style: styles8.icon }, /* @__PURE__ */ React23.createElement(Text, { style: [styles8.defaultIcon, { color: titleColor }], allowFontScaling: true }, defaultIcon)), /* @__PURE__ */ React23.createElement(View, { style: styles8.content }, title ? /* @__PURE__ */ React23.createElement(Text, { style: [styles8.title, { color: titleColor }], allowFontScaling: true }, title) : null, description ? /* @__PURE__ */ React23.createElement(Text, { style: [styles8.description, { color: descColor }], allowFontScaling: true }, description) : null));
+  const defaultIcon = variant === "success" ? /* @__PURE__ */ React23.createElement(FontAwesome5, { name: "check-circle", size: 18, color: titleColor }) : variant === "destructive" ? /* @__PURE__ */ React23.createElement(MaterialIcons, { name: "error-outline", size: 20, color: titleColor }) : /* @__PURE__ */ React23.createElement(Entypo, { name: "info-with-circle", size: 18, color: titleColor });
+  return /* @__PURE__ */ React23.createElement(View, { style: [styles8.container, { backgroundColor: colors.card, borderColor }, style] }, /* @__PURE__ */ React23.createElement(View, { style: styles8.icon }, icon ?? defaultIcon), /* @__PURE__ */ React23.createElement(View, { style: styles8.content }, title ? /* @__PURE__ */ React23.createElement(Text, { style: [styles8.title, { color: titleColor }], allowFontScaling: true }, title) : null, description ? /* @__PURE__ */ React23.createElement(Text, { style: [styles8.description, { color: descColor }], allowFontScaling: true }, description) : null));
 }
 var styles8 = StyleSheet.create({
   container: {
     flexDirection: "row",
     borderWidth: 1,
-    borderRadius: 8,
+    borderRadius: 12,
     padding: 16,
-    gap: 12
+    gap: 12,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.06,
+    shadowRadius: 12,
+    elevation: 3
   },
   icon: {
-    marginTop: 2
+    marginTop: 0
   },
   content: {
     flex: 1,
@@ -613,10 +613,6 @@ var styles8 = StyleSheet.create({
   description: {
     fontSize: 14,
     lineHeight: 20
-  },
-  defaultIcon: {
-    fontSize: 18,
-    fontWeight: "700"
   }
 });
 function Progress({ value = 0, max = 100, style }) {
@@ -789,18 +785,17 @@ function Textarea({
 }
 var styles11 = StyleSheet.create({
   container: {
-    gap: 6
+    gap: 8
   },
   label: {
     fontSize: 15,
-    fontWeight: "500",
-    marginBottom: 6
+    fontWeight: "500"
   },
   input: {
     borderWidth: 1.5,
-    borderRadius: 14,
-    paddingHorizontal: 20,
-    paddingVertical: 16,
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
     fontSize: 17
   },
   helperText: {
@@ -867,16 +862,16 @@ var styles12 = 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 }]
@@ -1016,54 +1011,48 @@ function Toggle({
     if (pressed) {
       const active = renderProp(activeIcon);
       if (active) return /* @__PURE__ */ React23.createElement(React23.Fragment, null, active);
-      return /* @__PURE__ */ React23.createElement(View, { style: [styles14.checkContainer, { borderColor: colors.primary, backgroundColor: colors.primary }] }, /* @__PURE__ */ React23.createElement(Text, { style: [styles14.checkMark, { color: colors.primaryForeground }] }, "\u2713"));
+      return /* @__PURE__ */ React23.createElement(FontAwesome5, { name: "check-circle", size: 20, color: colors.primary });
     }
     const custom = renderProp(icon);
     if (custom) return /* @__PURE__ */ React23.createElement(React23.Fragment, null, custom);
-    return /* @__PURE__ */ React23.createElement(View, { style: [styles14.checkContainer, { borderColor: colors.mutedForeground }] });
+    return /* @__PURE__ */ React23.createElement(FontAwesome5, { name: "circle", size: 20, color: colors.mutedForeground });
   };
-  return /* @__PURE__ */ React23.createElement(Animated.View, { style: { transform: [{ scale }] } }, /* @__PURE__ */ React23.createElement(
-    Animated.View,
+  return /* @__PURE__ */ React23.createElement(Animated.View, { style: [{ transform: [{ scale }] }, disabled && styles14.disabled, style] }, /* @__PURE__ */ React23.createElement(
+    TouchableOpacity,
     {
-      style: [
-        styles14.base,
-        sizeStyles[size],
-        { borderColor, backgroundColor, borderWidth: 2 },
-        disabled && styles14.disabled,
-        style
-      ]
+      onPress: () => {
+        Haptics12.selectionAsync();
+        onPressedChange?.(!pressed);
+      },
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      disabled,
+      activeOpacity: 1,
+      touchSoundDisabled: true,
+      ...props
     },
     /* @__PURE__ */ React23.createElement(
-      TouchableOpacity,
+      Animated.View,
       {
-        style: styles14.touchable,
-        onPress: () => {
-          Haptics12.selectionAsync();
-          onPressedChange?.(!pressed);
-        },
-        onPressIn: handlePressIn,
-        onPressOut: handlePressOut,
-        disabled,
-        activeOpacity: 1,
-        touchSoundDisabled: true,
-        ...props
+        style: [
+          styles14.base,
+          sizeStyles[size],
+          { borderColor, backgroundColor, borderWidth: 2 }
+        ]
       },
-      /* @__PURE__ */ React23.createElement(LeftIcon, null),
-      label ? /* @__PURE__ */ React23.createElement(Animated.Text, { style: [styles14.label, { color: textColor }] }, label) : null
+      /* @__PURE__ */ React23.createElement(View, { style: styles14.inner }, /* @__PURE__ */ React23.createElement(LeftIcon, null), label ? /* @__PURE__ */ React23.createElement(Animated.Text, { style: [styles14.label, { color: textColor }] }, label) : null)
     )
   ));
 }
 var styles14 = StyleSheet.create({
   base: {
-    borderRadius: 8,
-    overflow: "hidden"
+    borderRadius: 8
   },
-  touchable: {
+  inner: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    gap: 8,
-    flex: 1
+    gap: 8
   },
   disabled: {
     opacity: 0.45
@@ -1071,18 +1060,6 @@ var styles14 = StyleSheet.create({
   label: {
     fontSize: 14,
     fontWeight: "500"
-  },
-  checkContainer: {
-    width: 24,
-    height: 24,
-    borderRadius: 12,
-    borderWidth: 2,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  checkMark: {
-    fontSize: 14,
-    fontWeight: "700"
   }
 });
 function RadioItem({
@@ -1159,7 +1136,7 @@ function RadioGroup({
 }
 var styles15 = StyleSheet.create({
   container: {
-    gap: 10
+    gap: 12
   },
   horizontal: {
     flexDirection: "row",
@@ -1168,7 +1145,7 @@ var styles15 = StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 10
+    gap: 12
   },
   radio: {
     width: 24,
@@ -1397,13 +1374,7 @@ function AccordionItemComponent({
       touchSoundDisabled: true
     },
     /* @__PURE__ */ React23.createElement(Text, { style: [styles17.triggerText, { color: colors.foreground }] }, item.trigger),
-    /* @__PURE__ */ React23.createElement(
-      ReanimatedAnimated.Text,
-      {
-        style: [styles17.chevron, { color: colors.foreground }, rotationStyle]
-      },
-      "\u25BE"
-    )
+    /* @__PURE__ */ React23.createElement(ReanimatedAnimated.View, { style: [styles17.chevron, rotationStyle] }, /* @__PURE__ */ React23.createElement(Entypo, { name: "chevron-down", size: 20, color: colors.foreground }))
   )), /* @__PURE__ */ React23.createElement(ReanimatedAnimated.View, { style: heightStyle }, /* @__PURE__ */ React23.createElement(View, { style: styles17.content, onLayout }, item.content)));
 }
 function Accordion({ items, type = "single", defaultValue, style }) {
@@ -1446,7 +1417,6 @@ var styles17 = StyleSheet.create({
     flex: 1
   },
   chevron: {
-    fontSize: 18,
     marginLeft: 8
   },
   content: {
@@ -1664,7 +1634,7 @@ function Select({
       },
       selected?.label ?? placeholder
     ),
-    /* @__PURE__ */ React23.createElement(Text, { style: [styles20.chevron, { color: colors.mutedForeground }] }, "\u25BE")
+    /* @__PURE__ */ React23.createElement(Entypo, { name: "chevron-with-circle-down", size: 20, color: colors.mutedForeground })
   )) : null, isIOS ? /* @__PURE__ */ React23.createElement(
     Modal,
     {
@@ -1753,28 +1723,31 @@ function Select({
 }
 var styles20 = StyleSheet.create({
   container: {
-    gap: 6
+    gap: 8
   },
   label: {
     fontSize: 15,
-    fontWeight: "500",
-    marginBottom: 2
+    fontWeight: "500"
   },
   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: {
@@ -1785,15 +1758,15 @@ var styles20 = 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
   },
@@ -1815,9 +1788,9 @@ var styles20 = StyleSheet.create({
   },
   webPicker: {
     borderWidth: 1.5,
-    borderRadius: 14,
-    paddingHorizontal: 20,
-    paddingVertical: 16,
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
     fontSize: 17
   }
 });
@@ -1876,8 +1849,9 @@ function ToastNotification({ item, onDismiss }) {
     destructive: colors.destructiveForeground,
     success: colors.successForeground
   }[item.variant ?? "default"];
-  const leftIcon = item.icon ?? /* @__PURE__ */ React23.createElement(Text, { style: [styles21.defaultIcon, { color: textColor }] }, item.variant === "success" ? "\u2713" : item.variant === "destructive" ? "\u2716" : "\u2139");
-  return /* @__PURE__ */ React23.createElement(GestureDetector, { gesture: panGesture }, /* @__PURE__ */ React23.createElement(ReanimatedAnimated.View, { style: [styles21.toast, { backgroundColor: bgColor }, animatedStyle] }, /* @__PURE__ */ React23.createElement(View, { style: styles21.leftIconContainer }, leftIcon), /* @__PURE__ */ React23.createElement(View, { style: styles21.toastContent }, item.title ? /* @__PURE__ */ React23.createElement(Text, { style: [styles21.toastTitle, { color: textColor }] }, item.title) : null, item.description ? /* @__PURE__ */ React23.createElement(Text, { style: [styles21.toastDescription, { color: textColor, opacity: 0.85 }] }, item.description) : null), /* @__PURE__ */ React23.createElement(TouchableOpacity, { onPress: onDismiss, style: styles21.dismissButton, touchSoundDisabled: true }, /* @__PURE__ */ React23.createElement(Text, { style: [styles21.dismissIcon, { color: textColor }] }, "\u2715"))));
+  const defaultIcon = item.variant === "success" ? /* @__PURE__ */ React23.createElement(FontAwesome5, { name: "check-circle", size: 22, color: textColor }) : item.variant === "destructive" ? /* @__PURE__ */ React23.createElement(MaterialIcons, { name: "error-outline", size: 24, color: textColor }) : /* @__PURE__ */ React23.createElement(Entypo, { name: "info-with-circle", size: 22, color: textColor });
+  const leftIcon = item.icon ?? defaultIcon;
+  return /* @__PURE__ */ React23.createElement(GestureDetector, { gesture: panGesture }, /* @__PURE__ */ React23.createElement(ReanimatedAnimated.View, { style: [styles21.toast, { backgroundColor: bgColor }, animatedStyle] }, /* @__PURE__ */ React23.createElement(View, { style: styles21.leftIconContainer }, leftIcon), /* @__PURE__ */ React23.createElement(View, { style: styles21.toastContent }, item.title ? /* @__PURE__ */ React23.createElement(Text, { style: [styles21.toastTitle, { color: textColor }] }, item.title) : null, item.description ? /* @__PURE__ */ React23.createElement(Text, { style: [styles21.toastDescription, { color: textColor, opacity: 0.85 }] }, item.description) : null), /* @__PURE__ */ React23.createElement(TouchableOpacity, { onPress: onDismiss, style: styles21.dismissButton, touchSoundDisabled: true }, /* @__PURE__ */ React23.createElement(AntDesign, { name: "close-circle", size: 18, color: textColor }))));
 }
 function ToastProvider({ children }) {
   const [toasts, setToasts] = useState([]);
@@ -1896,7 +1870,7 @@ function ToastProvider({ children }) {
   const dismiss = useCallback((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
-  return /* @__PURE__ */ React23.createElement(ToastContext.Provider, { value: { toast, dismiss } }, children, /* @__PURE__ */ React23.createElement(View, { style: [styles21.container, { top: insets.top + 8 }], pointerEvents: "box-none" }, toasts.map((item) => /* @__PURE__ */ React23.createElement(ToastNotification, { key: item.id, item, onDismiss: () => dismiss(item.id) }))));
+  return /* @__PURE__ */ React23.createElement(ToastContext.Provider, { value: { toast, dismiss } }, children, /* @__PURE__ */ React23.createElement(View, { style: [styles21.container, Platform.OS === "web" && styles21.containerWeb, { top: insets.top + 8 }], pointerEvents: "box-none" }, toasts.map((item) => /* @__PURE__ */ React23.createElement(ToastNotification, { key: item.id, item, onDismiss: () => dismiss(item.id) }))));
 }
 var styles21 = StyleSheet.create({
   container: {
@@ -1906,6 +1880,12 @@ var styles21 = StyleSheet.create({
     gap: 8,
     zIndex: 9999
   },
+  containerWeb: {
+    left: void 0,
+    right: void 0,
+    alignSelf: "center",
+    width: 400
+  },
   toast: {
     flexDirection: "row",
     alignItems: "center",
@@ -1923,15 +1903,11 @@ var styles21 = StyleSheet.create({
     gap: 4
   },
   leftIconContainer: {
-    width: 36,
+    width: 40,
     alignItems: "center",
     justifyContent: "center",
     marginRight: 8
   },
-  defaultIcon: {
-    fontSize: 22,
-    fontWeight: "700"
-  },
   toastTitle: {
     fontSize: 15,
     fontWeight: "600"
@@ -1940,11 +1916,8 @@ var styles21 = StyleSheet.create({
     fontSize: 14
   },
   dismissButton: {
-    padding: 12,
+    padding: 8,
     marginLeft: 4
-  },
-  dismissIcon: {
-    fontSize: 14
   }
 });
 function formatCurrency(raw, separator) {
@@ -2018,7 +1991,24 @@ var styles22 = StyleSheet.create({
   }
 });
 var nativeDriver4 = Platform.OS !== "web";
-function ListItem({ icon, title, subtitle, trailing, onPress, disabled, style }) {
+function ListItem({
+  leftRender,
+  rightRender,
+  trailing,
+  icon,
+  title,
+  subtitle,
+  caption,
+  variant = "plain",
+  showChevron = false,
+  showSeparator = false,
+  onPress,
+  disabled,
+  style,
+  titleStyle,
+  subtitleStyle,
+  captionStyle
+}) {
   const { colors } = useTheme();
   const scale = useRef(new Animated.Value(1)).current;
   const handlePressIn = () => {
@@ -2042,10 +2032,23 @@ function ListItem({ icon, title, subtitle, trailing, onPress, disabled, style })
     Haptics12.selectionAsync();
     onPress?.();
   };
+  const effectiveLeft = leftRender ?? icon;
+  const effectiveRight = rightRender ?? trailing;
+  const cardStyle = 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 /* @__PURE__ */ React23.createElement(Animated.View, { style: [{ transform: [{ scale }] }, disabled && styles23.disabled] }, /* @__PURE__ */ React23.createElement(
     TouchableOpacity,
     {
-      style: [styles23.container, style],
+      style: [styles23.container, cardStyle, style],
       onPress: onPress ? handlePress : void 0,
       onPressIn: handlePressIn,
       onPressOut: handlePressOut,
@@ -2053,10 +2056,49 @@ function ListItem({ icon, title, subtitle, trailing, onPress, disabled, style })
       activeOpacity: 1,
       touchSoundDisabled: true
     },
-    icon ? /* @__PURE__ */ React23.createElement(View, { style: styles23.iconWrapper }, icon) : null,
-    /* @__PURE__ */ React23.createElement(View, { style: styles23.content }, /* @__PURE__ */ React23.createElement(Text, { style: [styles23.title, { color: colors.foreground }], allowFontScaling: true }, title), subtitle ? /* @__PURE__ */ React23.createElement(Text, { style: [styles23.subtitle, { color: colors.mutedForeground }], allowFontScaling: true }, subtitle) : null),
-    trailing !== void 0 ? typeof trailing === "string" ? /* @__PURE__ */ React23.createElement(Text, { style: [styles23.trailing, { color: colors.mutedForeground }], allowFontScaling: true }, trailing) : trailing : null
-  ));
+    effectiveLeft ? /* @__PURE__ */ React23.createElement(View, { style: styles23.leftContainer }, effectiveLeft) : null,
+    /* @__PURE__ */ React23.createElement(View, { style: styles23.content }, /* @__PURE__ */ React23.createElement(
+      Text,
+      {
+        style: [styles23.title, { color: colors.foreground }, titleStyle],
+        numberOfLines: 2,
+        allowFontScaling: true
+      },
+      title
+    ), subtitle ? /* @__PURE__ */ React23.createElement(
+      Text,
+      {
+        style: [styles23.subtitle, { color: colors.mutedForeground }, subtitleStyle],
+        numberOfLines: 2,
+        allowFontScaling: true
+      },
+      subtitle
+    ) : null, caption ? /* @__PURE__ */ React23.createElement(
+      Text,
+      {
+        style: [styles23.caption, { color: colors.mutedForeground }, captionStyle],
+        numberOfLines: 1,
+        allowFontScaling: true
+      },
+      caption
+    ) : null),
+    effectiveRight !== void 0 ? /* @__PURE__ */ React23.createElement(View, { style: styles23.rightContainer }, typeof effectiveRight === "string" ? /* @__PURE__ */ React23.createElement(
+      Text,
+      {
+        style: [styles23.rightText, { color: colors.mutedForeground }],
+        allowFontScaling: true
+      },
+      effectiveRight
+    ) : effectiveRight) : showChevron ? /* @__PURE__ */ React23.createElement(Entypo, { name: "chevron-with-circle-right", size: 20, color: colors.mutedForeground }) : null
+  ), showSeparator ? /* @__PURE__ */ React23.createElement(
+    View,
+    {
+      style: [
+        styles23.separator,
+        { backgroundColor: colors.border, marginLeft: effectiveLeft ? 16 + 44 + 12 : 16 }
+      ]
+    }
+  ) : null);
 }
 var styles23 = StyleSheet.create({
   container: {
@@ -2066,26 +2108,49 @@ var styles23 = StyleSheet.create({
     paddingVertical: 14,
     gap: 12
   },
-  iconWrapper: {
+  leftContainer: {
+    width: 44,
+    height: 44,
     alignItems: "center",
-    justifyContent: "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
+  },
+  caption: {
+    fontSize: 12,
+    fontWeight: "400",
+    lineHeight: 16,
+    opacity: 0.7
+  },
+  rightContainer: {
+    alignItems: "flex-end",
+    justifyContent: "center",
+    flexShrink: 0,
+    maxWidth: 160
   },
-  trailing: {
+  rightText: {
     fontSize: 15
   },
+  chevron: {
+    marginLeft: 4
+  },
+  separator: {
+    height: StyleSheet.hairlineWidth,
+    marginRight: 16
+  },
   disabled: {
     opacity: 0.45
   }
@@ -2318,7 +2383,7 @@ function MonthPicker({ value, onChange, style }) {
       activeOpacity: 0.6,
       touchSoundDisabled: true
     },
-    /* @__PURE__ */ React23.createElement(Text, { style: [styles27.arrowText, { color: colors.foreground }], allowFontScaling: true }, "\u2039")
+    /* @__PURE__ */ React23.createElement(Entypo, { name: "chevron-left", size: 22, color: colors.foreground })
   ), /* @__PURE__ */ React23.createElement(Text, { style: [styles27.label, { color: colors.foreground }], allowFontScaling: true }, MONTH_NAMES[value.month - 1], " ", value.year), /* @__PURE__ */ React23.createElement(
     TouchableOpacity,
     {
@@ -2327,7 +2392,7 @@ function MonthPicker({ value, onChange, style }) {
       activeOpacity: 0.6,
       touchSoundDisabled: true
     },
-    /* @__PURE__ */ React23.createElement(Text, { style: [styles27.arrowText, { color: colors.foreground }], allowFontScaling: true }, "\u203A")
+    /* @__PURE__ */ React23.createElement(Entypo, { name: "chevron-right", size: 22, color: colors.foreground })
   ));
 }
 var styles27 = StyleSheet.create({
@@ -2342,10 +2407,6 @@ var styles27 = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center"
   },
-  arrowText: {
-    fontSize: 24,
-    lineHeight: 30
-  },
   label: {
     fontSize: 17,
     fontWeight: "500",