@retray-dev/ui-kit 2.3.0 → 2.5.1

package/dist/index.js

@@ -3,6 +3,7 @@
 var React23 = require('react');
 var reactNative = require('react-native');
 var Haptics12 = require('expo-haptics');
+var vectorIcons = require('@expo/vector-icons');
 var expoLinearGradient = require('expo-linear-gradient');
 var ReanimatedAnimated = require('react-native-reanimated');
 var RNSlider = require('@react-native-community/slider');
@@ -107,9 +108,9 @@ function useTheme() {
 }
 var nativeDriver = reactNative.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 },
@@ -202,7 +203,7 @@ var styles = reactNative.StyleSheet.create({
     fontWeight: "600"
   },
   labelWithIcon: {
-    marginHorizontal: 6
+    marginHorizontal: 8
   }
 });
 var variantStyles = {
@@ -233,7 +234,7 @@ function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, t
   const [showPassword, setShowPassword] = React23.useState(false);
   const isPassword = type === "password";
   const effectiveSecure = isPassword ? !showPassword : secureTextEntry;
-  const effectiveSuffix = isPassword && !suffix ? /* @__PURE__ */ React23__default.default.createElement(reactNative.TouchableOpacity, { onPress: () => setShowPassword(!showPassword), style: styles2.passwordToggle, activeOpacity: 0.6 }, /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles2.suffixText, { color: colors.mutedForeground }] }, showPassword ? "\u{1F441}" : "\u{1F441}\u200D\u{1F5E8}")) : suffix;
+  const effectiveSuffix = isPassword && !suffix ? /* @__PURE__ */ React23__default.default.createElement(reactNative.TouchableOpacity, { onPress: () => setShowPassword(!showPassword), style: styles2.passwordToggle, activeOpacity: 0.6 }, /* @__PURE__ */ React23__default.default.createElement(vectorIcons.AntDesign, { name: showPassword ? "eye" : "eye-invisible", size: 20, color: colors.mutedForeground })) : suffix;
   return /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: [styles2.container, containerStyle] }, label ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles2.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, /* @__PURE__ */ React23__default.default.createElement(
     reactNative.View,
     {
@@ -276,20 +277,19 @@ function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, t
 }
 var styles2 = reactNative.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,
@@ -351,7 +351,7 @@ function Badge({ label, children, variant = "default", size = "md", icon, style
 }
 var styles3 = reactNative.StyleSheet.create({
   container: {
-    borderRadius: 8,
+    borderRadius: 6,
     alignSelf: "flex-start",
     flexDirection: "row",
     alignItems: "center"
@@ -396,10 +396,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,
@@ -449,16 +449,11 @@ function CardFooter({ children, style }) {
 }
 var styles4 = reactNative.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
   },
@@ -472,10 +467,10 @@ var styles4 = reactNative.StyleSheet.create({
     lineHeight: 22
   },
   content: {
-    padding: 28
+    padding: 24
   },
   footer: {
-    padding: 28,
+    padding: 24,
     paddingTop: 0,
     flexDirection: "row",
     alignItems: "center"
@@ -613,19 +608,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__default.default.createElement(reactNative.View, { style: [styles8.container, { backgroundColor: colors.card, borderColor }, style] }, icon ? /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: styles8.icon }, icon) : /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: styles8.icon }, /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles8.defaultIcon, { color: titleColor }], allowFontScaling: true }, defaultIcon)), /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: styles8.content }, title ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles8.title, { color: titleColor }], allowFontScaling: true }, title) : null, description ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles8.description, { color: descColor }], allowFontScaling: true }, description) : null));
+  const defaultIcon = variant === "success" ? /* @__PURE__ */ React23__default.default.createElement(vectorIcons.FontAwesome5, { name: "check-circle", size: 18, color: titleColor }) : variant === "destructive" ? /* @__PURE__ */ React23__default.default.createElement(vectorIcons.MaterialIcons, { name: "error-outline", size: 20, color: titleColor }) : /* @__PURE__ */ React23__default.default.createElement(vectorIcons.Entypo, { name: "info-with-circle", size: 18, color: titleColor });
+  return /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: [styles8.container, { backgroundColor: colors.card, borderColor }, style] }, /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: styles8.icon }, icon ?? defaultIcon), /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: styles8.content }, title ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles8.title, { color: titleColor }], allowFontScaling: true }, title) : null, description ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles8.description, { color: descColor }], allowFontScaling: true }, description) : null));
 }
 var styles8 = reactNative.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,
@@ -639,10 +639,6 @@ var styles8 = reactNative.StyleSheet.create({
   description: {
     fontSize: 14,
     lineHeight: 20
-  },
-  defaultIcon: {
-    fontSize: 18,
-    fontWeight: "700"
   }
 });
 function Progress({ value = 0, max = 100, style }) {
@@ -815,18 +811,17 @@ function Textarea({
 }
 var styles11 = reactNative.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: {
@@ -893,16 +888,16 @@ var styles12 = reactNative.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 }]
@@ -1042,54 +1037,48 @@ function Toggle({
     if (pressed) {
       const active = renderProp(activeIcon);
       if (active) return /* @__PURE__ */ React23__default.default.createElement(React23__default.default.Fragment, null, active);
-      return /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: [styles14.checkContainer, { borderColor: colors.primary, backgroundColor: colors.primary }] }, /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles14.checkMark, { color: colors.primaryForeground }] }, "\u2713"));
+      return /* @__PURE__ */ React23__default.default.createElement(vectorIcons.FontAwesome5, { name: "check-circle", size: 20, color: colors.primary });
     }
     const custom = renderProp(icon);
     if (custom) return /* @__PURE__ */ React23__default.default.createElement(React23__default.default.Fragment, null, custom);
-    return /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: [styles14.checkContainer, { borderColor: colors.mutedForeground }] });
+    return /* @__PURE__ */ React23__default.default.createElement(vectorIcons.FontAwesome5, { name: "circle", size: 20, color: colors.mutedForeground });
   };
-  return /* @__PURE__ */ React23__default.default.createElement(reactNative.Animated.View, { style: { transform: [{ scale }] } }, /* @__PURE__ */ React23__default.default.createElement(
-    reactNative.Animated.View,
+  return /* @__PURE__ */ React23__default.default.createElement(reactNative.Animated.View, { style: [{ transform: [{ scale }] }, disabled && styles14.disabled, style] }, /* @__PURE__ */ React23__default.default.createElement(
+    reactNative.TouchableOpacity,
     {
-      style: [
-        styles14.base,
-        sizeStyles[size],
-        { borderColor, backgroundColor, borderWidth: 2 },
-        disabled && styles14.disabled,
-        style
-      ]
+      onPress: () => {
+        Haptics12__namespace.selectionAsync();
+        onPressedChange?.(!pressed);
+      },
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      disabled,
+      activeOpacity: 1,
+      touchSoundDisabled: true,
+      ...props
     },
     /* @__PURE__ */ React23__default.default.createElement(
-      reactNative.TouchableOpacity,
+      reactNative.Animated.View,
       {
-        style: styles14.touchable,
-        onPress: () => {
-          Haptics12__namespace.selectionAsync();
-          onPressedChange?.(!pressed);
-        },
-        onPressIn: handlePressIn,
-        onPressOut: handlePressOut,
-        disabled,
-        activeOpacity: 1,
-        touchSoundDisabled: true,
-        ...props
+        style: [
+          styles14.base,
+          sizeStyles[size],
+          { borderColor, backgroundColor, borderWidth: 2 }
+        ]
       },
-      /* @__PURE__ */ React23__default.default.createElement(LeftIcon, null),
-      label ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Animated.Text, { style: [styles14.label, { color: textColor }] }, label) : null
+      /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: styles14.inner }, /* @__PURE__ */ React23__default.default.createElement(LeftIcon, null), label ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Animated.Text, { style: [styles14.label, { color: textColor }] }, label) : null)
     )
   ));
 }
 var styles14 = reactNative.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
@@ -1097,18 +1086,6 @@ var styles14 = reactNative.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({
@@ -1185,7 +1162,7 @@ function RadioGroup({
 }
 var styles15 = reactNative.StyleSheet.create({
   container: {
-    gap: 10
+    gap: 12
   },
   horizontal: {
     flexDirection: "row",
@@ -1194,7 +1171,7 @@ var styles15 = reactNative.StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 10
+    gap: 12
   },
   radio: {
     width: 24,
@@ -1423,13 +1400,7 @@ function AccordionItemComponent({
       touchSoundDisabled: true
     },
     /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles17.triggerText, { color: colors.foreground }] }, item.trigger),
-    /* @__PURE__ */ React23__default.default.createElement(
-      ReanimatedAnimated__default.default.Text,
-      {
-        style: [styles17.chevron, { color: colors.foreground }, rotationStyle]
-      },
-      "\u25BE"
-    )
+    /* @__PURE__ */ React23__default.default.createElement(ReanimatedAnimated__default.default.View, { style: [styles17.chevron, rotationStyle] }, /* @__PURE__ */ React23__default.default.createElement(vectorIcons.Entypo, { name: "chevron-down", size: 20, color: colors.foreground }))
   )), /* @__PURE__ */ React23__default.default.createElement(ReanimatedAnimated__default.default.View, { style: heightStyle }, /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: styles17.content, onLayout }, item.content)));
 }
 function Accordion({ items, type = "single", defaultValue, style }) {
@@ -1472,7 +1443,6 @@ var styles17 = reactNative.StyleSheet.create({
     flex: 1
   },
   chevron: {
-    fontSize: 18,
     marginLeft: 8
   },
   content: {
@@ -1690,7 +1660,7 @@ function Select({
       },
       selected?.label ?? placeholder
     ),
-    /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles20.chevron, { color: colors.mutedForeground }] }, "\u25BE")
+    /* @__PURE__ */ React23__default.default.createElement(vectorIcons.Entypo, { name: "chevron-with-circle-down", size: 20, color: colors.mutedForeground })
   )) : null, isIOS ? /* @__PURE__ */ React23__default.default.createElement(
     reactNative.Modal,
     {
@@ -1779,28 +1749,31 @@ function Select({
 }
 var styles20 = reactNative.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: {
@@ -1811,15 +1784,15 @@ var styles20 = reactNative.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
   },
@@ -1841,9 +1814,9 @@ var styles20 = reactNative.StyleSheet.create({
   },
   webPicker: {
     borderWidth: 1.5,
-    borderRadius: 14,
-    paddingHorizontal: 20,
-    paddingVertical: 16,
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
     fontSize: 17
   }
 });
@@ -1902,8 +1875,9 @@ function ToastNotification({ item, onDismiss }) {
     destructive: colors.destructiveForeground,
     success: colors.successForeground
   }[item.variant ?? "default"];
-  const leftIcon = item.icon ?? /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles21.defaultIcon, { color: textColor }] }, item.variant === "success" ? "\u2713" : item.variant === "destructive" ? "\u2716" : "\u2139");
-  return /* @__PURE__ */ React23__default.default.createElement(reactNativeGestureHandler.GestureDetector, { gesture: panGesture }, /* @__PURE__ */ React23__default.default.createElement(ReanimatedAnimated__default.default.View, { style: [styles21.toast, { backgroundColor: bgColor }, animatedStyle] }, /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: styles21.leftIconContainer }, leftIcon), /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: styles21.toastContent }, item.title ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles21.toastTitle, { color: textColor }] }, item.title) : null, item.description ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles21.toastDescription, { color: textColor, opacity: 0.85 }] }, item.description) : null), /* @__PURE__ */ React23__default.default.createElement(reactNative.TouchableOpacity, { onPress: onDismiss, style: styles21.dismissButton, touchSoundDisabled: true }, /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles21.dismissIcon, { color: textColor }] }, "\u2715"))));
+  const defaultIcon = item.variant === "success" ? /* @__PURE__ */ React23__default.default.createElement(vectorIcons.FontAwesome5, { name: "check-circle", size: 22, color: textColor }) : item.variant === "destructive" ? /* @__PURE__ */ React23__default.default.createElement(vectorIcons.MaterialIcons, { name: "error-outline", size: 24, color: textColor }) : /* @__PURE__ */ React23__default.default.createElement(vectorIcons.Entypo, { name: "info-with-circle", size: 22, color: textColor });
+  const leftIcon = item.icon ?? defaultIcon;
+  return /* @__PURE__ */ React23__default.default.createElement(reactNativeGestureHandler.GestureDetector, { gesture: panGesture }, /* @__PURE__ */ React23__default.default.createElement(ReanimatedAnimated__default.default.View, { style: [styles21.toast, { backgroundColor: bgColor }, animatedStyle] }, /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: styles21.leftIconContainer }, leftIcon), /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: styles21.toastContent }, item.title ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles21.toastTitle, { color: textColor }] }, item.title) : null, item.description ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles21.toastDescription, { color: textColor, opacity: 0.85 }] }, item.description) : null), /* @__PURE__ */ React23__default.default.createElement(reactNative.TouchableOpacity, { onPress: onDismiss, style: styles21.dismissButton, touchSoundDisabled: true }, /* @__PURE__ */ React23__default.default.createElement(vectorIcons.AntDesign, { name: "close-circle", size: 18, color: textColor }))));
 }
 function ToastProvider({ children }) {
   const [toasts, setToasts] = React23.useState([]);
@@ -1922,7 +1896,7 @@ function ToastProvider({ children }) {
   const dismiss = React23.useCallback((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
-  return /* @__PURE__ */ React23__default.default.createElement(ToastContext.Provider, { value: { toast, dismiss } }, children, /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: [styles21.container, { top: insets.top + 8 }], pointerEvents: "box-none" }, toasts.map((item) => /* @__PURE__ */ React23__default.default.createElement(ToastNotification, { key: item.id, item, onDismiss: () => dismiss(item.id) }))));
+  return /* @__PURE__ */ React23__default.default.createElement(ToastContext.Provider, { value: { toast, dismiss } }, children, /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: [styles21.container, reactNative.Platform.OS === "web" && styles21.containerWeb, { top: insets.top + 8 }], pointerEvents: "box-none" }, toasts.map((item) => /* @__PURE__ */ React23__default.default.createElement(ToastNotification, { key: item.id, item, onDismiss: () => dismiss(item.id) }))));
 }
 var styles21 = reactNative.StyleSheet.create({
   container: {
@@ -1932,6 +1906,12 @@ var styles21 = reactNative.StyleSheet.create({
     gap: 8,
     zIndex: 9999
   },
+  containerWeb: {
+    left: void 0,
+    right: void 0,
+    alignSelf: "center",
+    width: 400
+  },
   toast: {
     flexDirection: "row",
     alignItems: "center",
@@ -1949,15 +1929,11 @@ var styles21 = reactNative.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"
@@ -1966,11 +1942,8 @@ var styles21 = reactNative.StyleSheet.create({
     fontSize: 14
   },
   dismissButton: {
-    padding: 12,
+    padding: 8,
     marginLeft: 4
-  },
-  dismissIcon: {
-    fontSize: 14
   }
 });
 function formatCurrency(raw, separator) {
@@ -2044,7 +2017,24 @@ var styles22 = reactNative.StyleSheet.create({
   }
 });
 var nativeDriver4 = reactNative.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 = React23.useRef(new reactNative.Animated.Value(1)).current;
   const handlePressIn = () => {
@@ -2068,10 +2058,23 @@ function ListItem({ icon, title, subtitle, trailing, onPress, disabled, style })
     Haptics12__namespace.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__default.default.createElement(reactNative.Animated.View, { style: [{ transform: [{ scale }] }, disabled && styles23.disabled] }, /* @__PURE__ */ React23__default.default.createElement(
     reactNative.TouchableOpacity,
     {
-      style: [styles23.container, style],
+      style: [styles23.container, cardStyle, style],
       onPress: onPress ? handlePress : void 0,
       onPressIn: handlePressIn,
       onPressOut: handlePressOut,
@@ -2079,10 +2082,49 @@ function ListItem({ icon, title, subtitle, trailing, onPress, disabled, style })
       activeOpacity: 1,
       touchSoundDisabled: true
     },
-    icon ? /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: styles23.iconWrapper }, icon) : null,
-    /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: styles23.content }, /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles23.title, { color: colors.foreground }], allowFontScaling: true }, title), subtitle ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles23.subtitle, { color: colors.mutedForeground }], allowFontScaling: true }, subtitle) : null),
-    trailing !== void 0 ? typeof trailing === "string" ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles23.trailing, { color: colors.mutedForeground }], allowFontScaling: true }, trailing) : trailing : null
-  ));
+    effectiveLeft ? /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: styles23.leftContainer }, effectiveLeft) : null,
+    /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: styles23.content }, /* @__PURE__ */ React23__default.default.createElement(
+      reactNative.Text,
+      {
+        style: [styles23.title, { color: colors.foreground }, titleStyle],
+        numberOfLines: 2,
+        allowFontScaling: true
+      },
+      title
+    ), subtitle ? /* @__PURE__ */ React23__default.default.createElement(
+      reactNative.Text,
+      {
+        style: [styles23.subtitle, { color: colors.mutedForeground }, subtitleStyle],
+        numberOfLines: 2,
+        allowFontScaling: true
+      },
+      subtitle
+    ) : null, caption ? /* @__PURE__ */ React23__default.default.createElement(
+      reactNative.Text,
+      {
+        style: [styles23.caption, { color: colors.mutedForeground }, captionStyle],
+        numberOfLines: 1,
+        allowFontScaling: true
+      },
+      caption
+    ) : null),
+    effectiveRight !== void 0 ? /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: styles23.rightContainer }, typeof effectiveRight === "string" ? /* @__PURE__ */ React23__default.default.createElement(
+      reactNative.Text,
+      {
+        style: [styles23.rightText, { color: colors.mutedForeground }],
+        allowFontScaling: true
+      },
+      effectiveRight
+    ) : effectiveRight) : showChevron ? /* @__PURE__ */ React23__default.default.createElement(vectorIcons.Entypo, { name: "chevron-with-circle-right", size: 20, color: colors.mutedForeground }) : null
+  ), showSeparator ? /* @__PURE__ */ React23__default.default.createElement(
+    reactNative.View,
+    {
+      style: [
+        styles23.separator,
+        { backgroundColor: colors.border, marginLeft: effectiveLeft ? 16 + 44 + 12 : 16 }
+      ]
+    }
+  ) : null);
 }
 var styles23 = reactNative.StyleSheet.create({
   container: {
@@ -2092,26 +2134,49 @@ var styles23 = reactNative.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: reactNative.StyleSheet.hairlineWidth,
+    marginRight: 16
+  },
   disabled: {
     opacity: 0.45
   }
@@ -2344,7 +2409,7 @@ function MonthPicker({ value, onChange, style }) {
       activeOpacity: 0.6,
       touchSoundDisabled: true
     },
-    /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles27.arrowText, { color: colors.foreground }], allowFontScaling: true }, "\u2039")
+    /* @__PURE__ */ React23__default.default.createElement(vectorIcons.Entypo, { name: "chevron-left", size: 22, color: colors.foreground })
   ), /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles27.label, { color: colors.foreground }], allowFontScaling: true }, MONTH_NAMES[value.month - 1], " ", value.year), /* @__PURE__ */ React23__default.default.createElement(
     reactNative.TouchableOpacity,
     {
@@ -2353,7 +2418,7 @@ function MonthPicker({ value, onChange, style }) {
       activeOpacity: 0.6,
       touchSoundDisabled: true
     },
-    /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles27.arrowText, { color: colors.foreground }], allowFontScaling: true }, "\u203A")
+    /* @__PURE__ */ React23__default.default.createElement(vectorIcons.Entypo, { name: "chevron-right", size: 22, color: colors.foreground })
   ));
 }
 var styles27 = reactNative.StyleSheet.create({
@@ -2368,10 +2433,6 @@ var styles27 = reactNative.StyleSheet.create({
     alignItems: "center",
     justifyContent: "center"
   },
-  arrowText: {
-    fontSize: 24,
-    lineHeight: 30
-  },
   label: {
     fontSize: 17,
     fontWeight: "500",