@retray-dev/ui-kit 1.8.0 → 2.5.0

package/dist/index.mjs

@@ -1,10 +1,13 @@
 import React23, { createContext, useMemo, useContext, useRef, useState, useEffect, useCallback } from 'react';
-import { Platform, StyleSheet, useColorScheme, Animated, TouchableOpacity, ActivityIndicator, Text, View, TextInput, Image, Easing, PanResponder, Modal } from 'react-native';
-import * as Haptics11 from 'expo-haptics';
+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';
 import { BottomSheetModal, BottomSheetView, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
 export { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+import { Picker } from '@react-native-picker/picker';
 import { scheduleOnRN } from 'react-native-worklets';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -18,41 +21,41 @@ var defaultLight = {
   card: "#ffffff",
   cardForeground: "#171717",
   primary: "#1a1a1a",
-  primaryForeground: "#fafafa",
-  secondary: "#f5f5f5",
-  secondaryForeground: "#1a1a1a",
-  muted: "#f5f5f5",
-  mutedForeground: "#646464",
-  accent: "#f5f5f5",
-  accentForeground: "#1a1a1a",
+  primaryForeground: "#ffffff",
+  secondary: "#f1f1f1",
+  secondaryForeground: "#171717",
+  muted: "#f1f1f1",
+  mutedForeground: "#a2a2a2",
+  accent: "#e4e4e4",
+  accentForeground: "#171717",
   destructive: "#ef4444",
-  destructiveForeground: "#fafafa",
+  destructiveForeground: "#1a1a1a",
   border: "#e5e5e5",
   input: "#e5e5e5",
-  ring: "#a3a3a3",
+  ring: "#1a1a1a",
   success: "#16a34a",
-  successForeground: "#ffffff"
+  successForeground: "#1a1a1a"
 };
 var defaultDark = {
   background: "#171717",
   foreground: "#fafafa",
-  card: "#1f1f1f",
+  card: "#222222",
   cardForeground: "#fafafa",
   primary: "#fafafa",
   primaryForeground: "#1a1a1a",
-  secondary: "#2a2a2a",
+  secondary: "#323232",
   secondaryForeground: "#fafafa",
-  muted: "#2a2a2a",
-  mutedForeground: "#a3a3a3",
-  accent: "#2a2a2a",
+  muted: "#323232",
+  mutedForeground: "#888888",
+  accent: "#323232",
   accentForeground: "#fafafa",
   destructive: "#dc2626",
-  destructiveForeground: "#fafafa",
+  destructiveForeground: "#1a1a1a",
   border: "#2a2a2a",
   input: "#2a2a2a",
-  ring: "#d4d4d4",
+  ring: "#fafafa",
   success: "#22c55e",
-  successForeground: "#ffffff"
+  successForeground: "#1a1a1a"
 };
 
 // src/theme/ThemeProvider.tsx
@@ -65,19 +68,23 @@ function ThemeProvider({ children, theme, colorScheme = "system" }) {
   const resolvedScheme = colorScheme === "system" ? systemScheme : colorScheme;
   const colors = useMemo(() => {
     const base = resolvedScheme === "dark" ? defaultDark : defaultLight;
-    const overrides = resolvedScheme === "dark" ? theme?.dark : theme?.light;
-    return { ...base, ...overrides };
+    const override = resolvedScheme === "dark" ? theme?.dark : theme?.light;
+    return override ? { ...base, ...override } : base;
   }, [resolvedScheme, theme]);
   return /* @__PURE__ */ React23.createElement(ThemeContext.Provider, { value: { colors, colorScheme: resolvedScheme } }, children);
 }
 function useTheme() {
-  return useContext(ThemeContext);
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
 }
 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 },
@@ -113,7 +120,7 @@ function Button({
     Animated.spring(scale, { toValue: 1, useNativeDriver: nativeDriver, speed: 40, bounciness: 4 }).start();
   };
   const handlePress = (e) => {
-    Haptics11.impactAsync(Haptics11.ImpactFeedbackStyle.Light);
+    Haptics12.impactAsync(Haptics12.ImpactFeedbackStyle.Light);
     onPress?.(e);
   };
   const containerVariantStyle = {
@@ -164,13 +171,13 @@ var styles = StyleSheet.create({
     width: "100%"
   },
   disabled: {
-    opacity: 0.45
+    opacity: 0.5
   },
   label: {
     fontWeight: "600"
   },
   labelWithIcon: {
-    marginHorizontal: 6
+    marginHorizontal: 8
   }
 });
 var variantStyles = {
@@ -194,56 +201,112 @@ function Text2({ variant = "body", color, style, children, ...props }) {
     children
   );
 }
-function Input({ label, error, hint, containerStyle, style, onFocus, onBlur, ...props }) {
+var webInputResetStyle = Platform.OS === "web" ? { outlineStyle: "none", outlineWidth: 0, outlineColor: "transparent", boxShadow: "none" } : {};
+function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, type = "text", containerStyle, style, onFocus, onBlur, secureTextEntry, ...props }) {
   const { colors } = useTheme();
   const [focused, setFocused] = useState(false);
+  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(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(
-    TextInput,
+    View,
     {
       style: [
-        styles2.input,
+        styles2.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
+        }
+      ]
+    },
+    prefix ? typeof prefix === "string" ? /* @__PURE__ */ React23.createElement(Text, { style: [styles2.prefixText, { color: colors.mutedForeground }, prefixStyle], allowFontScaling: true }, prefix) : /* @__PURE__ */ React23.createElement(View, { style: styles2.prefixContainer }, prefix) : null,
+    /* @__PURE__ */ React23.createElement(
+      TextInput,
+      {
+        style: [
+          styles2.input,
+          {
+            color: colors.foreground
+          },
+          webInputResetStyle,
+          style
+        ],
+        onFocus: (e) => {
+          setFocused(true);
+          onFocus?.(e);
         },
-        style
-      ],
-      onFocus: (e) => {
-        setFocused(true);
-        onFocus?.(e);
-      },
-      onBlur: (e) => {
-        setFocused(false);
-        onBlur?.(e);
-      },
-      placeholderTextColor: colors.mutedForeground,
-      allowFontScaling: true,
-      ...props
-    }
+        onBlur: (e) => {
+          setFocused(false);
+          onBlur?.(e);
+        },
+        placeholderTextColor: colors.mutedForeground,
+        allowFontScaling: true,
+        secureTextEntry: effectiveSecure,
+        ...props
+      }
+    ),
+    effectiveSuffix ? typeof effectiveSuffix === "string" ? /* @__PURE__ */ React23.createElement(Text, { style: [styles2.suffixText, { color: colors.mutedForeground }, suffixStyle], allowFontScaling: true }, effectiveSuffix) : /* @__PURE__ */ React23.createElement(View, { style: styles2.suffixContainer }, effectiveSuffix) : null
   ), error ? /* @__PURE__ */ React23.createElement(Text, { style: [styles2.helperText, { color: colors.destructive }], allowFontScaling: true }, error) : null, !error && hint ? /* @__PURE__ */ React23.createElement(Text, { style: [styles2.helperText, { color: colors.mutedForeground }], allowFontScaling: true }, hint) : null);
 }
 var styles2 = StyleSheet.create({
   container: {
-    gap: 6
+    gap: 8
   },
   label: {
     fontSize: 15,
-    fontWeight: "500",
-    marginBottom: 6
+    fontWeight: "500"
   },
-  input: {
+  inputWrapper: {
+    flexDirection: "row",
+    alignItems: "center",
     borderWidth: 1.5,
-    borderRadius: 14,
-    paddingHorizontal: 20,
-    paddingVertical: 16,
-    fontSize: 17
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 14
+  },
+  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
   }
 });
-function Badge({ label, variant = "default", style }) {
+var sizePadding = {
+  sm: { paddingHorizontal: 8, paddingVertical: 2 },
+  md: { paddingHorizontal: 10, paddingVertical: 4 },
+  lg: { paddingHorizontal: 12, paddingVertical: 6 }
+};
+var sizeFontSize = {
+  sm: { fontSize: 11 },
+  md: { fontSize: 13 },
+  lg: { fontSize: 15 }
+};
+var sizeIconGap = {
+  sm: 4,
+  md: 6,
+  lg: 6
+};
+function Badge({ label, children, variant = "default", size = "md", icon, style }) {
   const { colors } = useTheme();
   const containerStyle = {
     default: { backgroundColor: colors.primary },
@@ -257,40 +320,100 @@ function Badge({ label, variant = "default", style }) {
     destructive: colors.destructiveForeground,
     outline: colors.foreground
   }[variant];
-  return /* @__PURE__ */ React23.createElement(View, { style: [styles3.container, containerStyle, style] }, /* @__PURE__ */ React23.createElement(Text, { style: [styles3.label, { color: textColor }], allowFontScaling: true }, label));
+  const content = children ?? label;
+  return /* @__PURE__ */ React23.createElement(View, { style: [styles3.container, containerStyle, sizePadding[size], { gap: sizeIconGap[size] }, style] }, icon ? /* @__PURE__ */ React23.createElement(View, { style: styles3.iconContainer }, icon) : null, typeof content === "string" ? /* @__PURE__ */ React23.createElement(Text, { style: [styles3.label, { color: textColor }, sizeFontSize[size]], allowFontScaling: true }, content) : content);
 }
 var styles3 = StyleSheet.create({
   container: {
-    borderRadius: 8,
-    paddingHorizontal: 10,
-    paddingVertical: 4,
-    alignSelf: "flex-start"
+    borderRadius: 6,
+    alignSelf: "flex-start",
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  iconContainer: {
+    justifyContent: "center",
+    alignItems: "center"
   },
   label: {
-    fontSize: 13,
     fontWeight: "500"
   }
 });
-function Card({ children, style }) {
+var nativeDriver2 = Platform.OS !== "web";
+function Card({ children, variant = "elevated", onPress, style }) {
   const { colors } = useTheme();
-  return /* @__PURE__ */ React23.createElement(
-    View,
-    {
-      style: [styles4.card, { backgroundColor: colors.card, borderColor: colors.border }, style]
+  const scale = useRef(new Animated.Value(1)).current;
+  const handlePressIn = () => {
+    if (!onPress) return;
+    Animated.spring(scale, {
+      toValue: 0.98,
+      useNativeDriver: nativeDriver2,
+      speed: 40,
+      bounciness: 0
+    }).start();
+  };
+  const handlePressOut = () => {
+    if (!onPress) return;
+    Animated.spring(scale, {
+      toValue: 1,
+      useNativeDriver: nativeDriver2,
+      speed: 40,
+      bounciness: 4
+    }).start();
+  };
+  const handlePress = () => {
+    if (!onPress) return;
+    Haptics12.impactAsync(Haptics12.ImpactFeedbackStyle.Light);
+    onPress();
+  };
+  const variantStyle = {
+    elevated: {
+      backgroundColor: colors.card,
+      borderColor: colors.border,
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.06,
+      shadowRadius: 12,
+      elevation: 3
     },
-    children
-  );
+    outlined: {
+      backgroundColor: colors.card,
+      borderColor: colors.border,
+      shadowOpacity: 0,
+      elevation: 0
+    },
+    filled: {
+      backgroundColor: colors.accent,
+      borderColor: colors.border,
+      shadowOpacity: 0,
+      elevation: 0
+    }
+  }[variant];
+  const cardContent = /* @__PURE__ */ React23.createElement(View, { style: [styles4.card, variantStyle, style] }, children);
+  if (onPress) {
+    return /* @__PURE__ */ React23.createElement(Animated.View, { style: { transform: [{ scale }] } }, /* @__PURE__ */ React23.createElement(
+      TouchableOpacity,
+      {
+        onPress: handlePress,
+        onPressIn: handlePressIn,
+        onPressOut: handlePressOut,
+        activeOpacity: 1,
+        touchSoundDisabled: true
+      },
+      cardContent
+    ));
+  }
+  return cardContent;
 }
 function CardHeader({ children, style }) {
   return /* @__PURE__ */ React23.createElement(View, { style: [styles4.header, style] }, children);
 }
 function CardTitle({ children, style }) {
   const { colors } = useTheme();
-  return /* @__PURE__ */ React23.createElement(Text, { style: [styles4.title, { color: colors.cardForeground }, style] }, children);
+  return /* @__PURE__ */ React23.createElement(Text, { style: [styles4.title, { color: colors.cardForeground }, style], allowFontScaling: true }, children);
 }
 function CardDescription({ children, style }) {
   const { colors } = useTheme();
-  return /* @__PURE__ */ React23.createElement(Text, { style: [styles4.description, { color: colors.mutedForeground }, style] }, children);
+  return /* @__PURE__ */ React23.createElement(Text, { style: [styles4.description, { color: colors.mutedForeground }, style], allowFontScaling: true }, children);
 }
 function CardContent({ children, style }) {
   return /* @__PURE__ */ React23.createElement(View, { style: [styles4.content, style] }, children);
@@ -300,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
   },
@@ -323,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"
@@ -444,7 +562,8 @@ function Avatar({ src, fallback, size = "md", style }) {
   ) : /* @__PURE__ */ React23.createElement(
     Text,
     {
-      style: [styles7.fallback, { color: colors.mutedForeground, fontSize: fontSizeMap[size] }]
+      style: [styles7.fallback, { color: colors.mutedForeground, fontSize: fontSizeMap[size] }],
+      allowFontScaling: true
     },
     fallback?.slice(0, 2).toUpperCase() ?? "?"
   ));
@@ -463,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 }] }, defaultIcon)), /* @__PURE__ */ React23.createElement(View, { style: styles8.content }, title ? /* @__PURE__ */ React23.createElement(Text, { style: [styles8.title, { color: titleColor }] }, title) : null, description ? /* @__PURE__ */ React23.createElement(Text, { style: [styles8.description, { color: descColor }] }, 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,
@@ -489,10 +613,6 @@ var styles8 = StyleSheet.create({
   description: {
     fontSize: 14,
     lineHeight: 20
-  },
-  defaultIcon: {
-    fontSize: 18,
-    fontWeight: "700"
   }
 });
 function Progress({ value = 0, max = 100, style }) {
@@ -562,10 +682,11 @@ function EmptyState({ icon, title, description, action, size = "default", style
     /* @__PURE__ */ React23.createElement(View, { style: styles10.textWrapper }, /* @__PURE__ */ React23.createElement(
       Text,
       {
-        style: [styles10.title, isCompact && styles10.titleCompact, { color: colors.foreground }]
+        style: [styles10.title, isCompact && styles10.titleCompact, { color: colors.foreground }],
+        allowFontScaling: true
       },
       title
-    ), description && !isCompact ? /* @__PURE__ */ React23.createElement(Text, { style: [styles10.description, { color: colors.mutedForeground }] }, description) : null),
+    ), description && !isCompact ? /* @__PURE__ */ React23.createElement(Text, { style: [styles10.description, { color: colors.mutedForeground }], allowFontScaling: true }, description) : null),
     action && !isCompact ? /* @__PURE__ */ React23.createElement(View, { style: styles10.action }, action) : null
   );
 }
@@ -617,6 +738,7 @@ var styles10 = StyleSheet.create({
     marginTop: 8
   }
 });
+var webInputResetStyle2 = Platform.OS === "web" ? { outlineStyle: "none", outlineWidth: 0, outlineColor: "transparent", boxShadow: "none" } : {};
 function Textarea({
   label,
   error,
@@ -639,11 +761,12 @@ function Textarea({
       style: [
         styles11.input,
         {
-          borderColor: error ? colors.destructive : focused ? colors.ring : colors.border,
+          borderColor: error ? colors.destructive : focused ? colors.ring ?? colors.primary : colors.border,
           color: colors.foreground,
           backgroundColor: colors.background,
           minHeight: rows * 30
         },
+        webInputResetStyle2,
         style
       ],
       onFocus: (e) => {
@@ -662,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: {
@@ -701,7 +823,7 @@ function Checkbox({
     {
       style: [styles12.row, style],
       onPress: () => {
-        Haptics11.selectionAsync();
+        Haptics12.selectionAsync();
         onCheckedChange?.(!checked);
       },
       onPressIn: handlePressIn,
@@ -740,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 }]
@@ -759,7 +881,7 @@ var styles12 = StyleSheet.create({
     lineHeight: 22
   }
 });
-var nativeDriver2 = Platform.OS !== "web";
+var nativeDriver3 = Platform.OS !== "web";
 var TRACK_WIDTH = 60;
 var TRACK_HEIGHT = 36;
 var THUMB_SIZE = 28;
@@ -773,7 +895,7 @@ function Switch({ checked = false, onCheckedChange, disabled, style }) {
     Animated.parallel([
       Animated.spring(translateX, {
         toValue: checked ? THUMB_TRAVEL : 0,
-        useNativeDriver: nativeDriver2,
+        useNativeDriver: nativeDriver3,
         bounciness: 4
       }),
       Animated.timing(trackOpacity, {
@@ -787,17 +909,17 @@ function Switch({ checked = false, onCheckedChange, disabled, style }) {
     inputRange: [0, 1],
     outputRange: [colors.muted, colors.primary]
   });
-  return /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React23.createElement(View, { style: [{ opacity: disabled ? 0.45 : 1 }, style] }, /* @__PURE__ */ React23.createElement(
     TouchableOpacity,
     {
       onPress: () => {
-        Haptics11.selectionAsync();
+        Haptics12.selectionAsync();
         onCheckedChange?.(!checked);
       },
       disabled,
       activeOpacity: 0.8,
       touchSoundDisabled: true,
-      style: [styles13.wrapper, { opacity: disabled ? 0.45 : 1 }, style]
+      style: styles13.wrapper
     },
     /* @__PURE__ */ React23.createElement(Animated.View, { style: [styles13.track, { backgroundColor: trackColor }] }, /* @__PURE__ */ React23.createElement(
       Animated.View,
@@ -808,7 +930,7 @@ function Switch({ checked = false, onCheckedChange, disabled, style }) {
         ]
       }
     ))
-  );
+  ));
 }
 var styles13 = StyleSheet.create({
   wrapper: {},
@@ -886,53 +1008,51 @@ function Toggle({
       if (typeof prop === "function") return prop(pressed);
       return prop;
     };
-    if (!pressed) return renderProp(icon);
-    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 }] }, /* @__PURE__ */ React23.createElement(Text, { style: [styles14.checkMark, { color: colors.primary }] }, "\u2713"));
+    if (pressed) {
+      const active = renderProp(activeIcon);
+      if (active) return /* @__PURE__ */ React23.createElement(React23.Fragment, null, active);
+      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(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: () => {
-          Haptics11.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
@@ -940,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({
@@ -974,7 +1082,7 @@ function RadioItem({
       style: styles15.row,
       onPress: () => {
         if (!option.disabled) {
-          Haptics11.selectionAsync();
+          Haptics12.selectionAsync();
           onSelect();
         }
       },
@@ -1028,7 +1136,7 @@ function RadioGroup({
 }
 var styles15 = StyleSheet.create({
   container: {
-    gap: 10
+    gap: 12
   },
   horizontal: {
     flexDirection: "row",
@@ -1037,7 +1145,7 @@ var styles15 = StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 10
+    gap: 12
   },
   radio: {
     width: 24,
@@ -1132,7 +1240,7 @@ function Tabs({ tabs, value, onValueChange, children, style }) {
     }
   }, [active]);
   const handlePress = (v) => {
-    Haptics11.selectionAsync();
+    Haptics12.selectionAsync();
     if (!value) setInternal(v);
     onValueChange?.(v);
   };
@@ -1257,7 +1365,7 @@ function AccordionItemComponent({
     {
       style: styles17.trigger,
       onPress: () => {
-        Haptics11.selectionAsync();
+        Haptics12.selectionAsync();
         onToggle();
       },
       onPressIn: handlePressIn,
@@ -1266,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 }) {
@@ -1315,7 +1417,6 @@ var styles17 = StyleSheet.create({
     flex: 1
   },
   chevron: {
-    fontSize: 18,
     marginLeft: 8
   },
   content: {
@@ -1331,116 +1432,63 @@ function Slider({
   step = 0,
   onValueChange,
   onSlidingComplete,
+  label,
+  showValue = false,
+  formatValue: formatValue2 = (v) => v.toFixed(2),
+  accessibilityLabel,
   disabled,
   style
 }) {
   const { colors } = useTheme();
-  const trackWidth = useRef(0);
   const lastSteppedValue = useRef(value);
-  const [internalValue, setInternalValue] = useState(value);
-  const currentValue = value ?? internalValue;
-  const clamp = (v) => Math.min(Math.max(v, minimumValue), maximumValue);
-  const snapToStep = (v) => {
-    if (!step) return v;
-    return Math.round((v - minimumValue) / step) * step + minimumValue;
-  };
-  const xToValue = (x) => {
-    const ratio = Math.min(Math.max(x / trackWidth.current, 0), 1);
-    const raw = ratio * (maximumValue - minimumValue) + minimumValue;
-    return clamp(snapToStep(raw));
-  };
-  const panResponder = useRef(
-    PanResponder.create({
-      onStartShouldSetPanResponder: () => !disabled,
-      onMoveShouldSetPanResponder: () => !disabled,
-      onPanResponderGrant: (e) => {
-        const x = e.nativeEvent.locationX;
-        const newValue = xToValue(x);
-        setInternalValue(newValue);
-        onValueChange?.(newValue);
-      },
-      onPanResponderMove: (e) => {
-        const x = e.nativeEvent.locationX;
-        const newValue = xToValue(x);
-        if (newValue !== lastSteppedValue.current) {
-          lastSteppedValue.current = newValue;
-          Haptics11.selectionAsync();
-        }
-        setInternalValue(newValue);
-        onValueChange?.(newValue);
-      },
-      onPanResponderRelease: (e) => {
-        const x = e.nativeEvent.locationX;
-        const newValue = xToValue(x);
-        setInternalValue(newValue);
-        onSlidingComplete?.(newValue);
-      }
-    })
-  ).current;
-  const onLayout = (e) => {
-    trackWidth.current = e.nativeEvent.layout.width;
+  const handleValueChange = (v) => {
+    if (step && v !== lastSteppedValue.current) {
+      lastSteppedValue.current = v;
+      Haptics12.selectionAsync();
+    }
+    onValueChange?.(v);
   };
-  const percent = (currentValue - minimumValue) / (maximumValue - minimumValue) * 100;
-  return /* @__PURE__ */ React23.createElement(
-    View,
+  return /* @__PURE__ */ React23.createElement(View, { style: [styles18.wrapper, style], accessibilityLabel }, label || showValue ? /* @__PURE__ */ React23.createElement(View, { style: styles18.header }, label ? /* @__PURE__ */ React23.createElement(Text, { style: [styles18.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, showValue ? /* @__PURE__ */ React23.createElement(Text, { style: [styles18.valueText, { color: colors.mutedForeground }], allowFontScaling: true }, formatValue2(value)) : null) : null, /* @__PURE__ */ React23.createElement(View, { style: disabled ? styles18.disabled : void 0 }, /* @__PURE__ */ React23.createElement(
+    RNSlider,
     {
-      style: [styles18.container, disabled && styles18.disabled, style],
-      ...panResponder.panHandlers,
-      onLayout
-    },
-    /* @__PURE__ */ React23.createElement(View, { style: [styles18.track, { backgroundColor: colors.muted }] }, /* @__PURE__ */ React23.createElement(
-      View,
-      {
-        style: [styles18.range, { width: `${percent}%`, backgroundColor: colors.primary }]
-      }
-    )),
-    /* @__PURE__ */ React23.createElement(
-      View,
-      {
-        style: [
-          styles18.thumb,
-          {
-            left: `${percent}%`,
-            backgroundColor: colors.primary,
-            borderColor: colors.background,
-            transform: [{ translateX: -14 }]
-          }
-        ],
-        pointerEvents: "none"
-      }
-    )
-  );
+      value,
+      minimumValue,
+      maximumValue,
+      step: step || 0,
+      disabled,
+      onValueChange: handleValueChange,
+      onSlidingComplete,
+      minimumTrackTintColor: colors.primary,
+      maximumTrackTintColor: colors.muted,
+      thumbTintColor: colors.primary,
+      style: styles18.slider,
+      accessibilityLabel
+    }
+  )));
 }
 var styles18 = StyleSheet.create({
-  container: {
-    height: 32,
-    justifyContent: "center",
-    position: "relative"
+  wrapper: {
+    gap: 8
   },
-  disabled: {
-    opacity: 0.45
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
   },
-  track: {
-    height: 6,
-    borderRadius: 3,
-    overflow: "hidden",
-    width: "100%"
+  label: {
+    fontSize: 15,
+    fontWeight: "500"
   },
-  range: {
-    height: "100%",
-    borderRadius: 3
+  valueText: {
+    fontSize: 14,
+    fontWeight: "500"
   },
-  thumb: {
-    position: "absolute",
-    width: 28,
-    height: 28,
-    borderRadius: 14,
-    borderWidth: 2,
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.2,
-    shadowRadius: 2,
-    elevation: 2
+  slider: {
+    width: "100%",
+    height: 40
+  },
+  disabled: {
+    opacity: 0.45
   }
 });
 function Sheet({
@@ -1456,7 +1504,7 @@ function Sheet({
   const ref = useRef(null);
   useEffect(() => {
     if (open) {
-      Haptics11.impactAsync(Haptics11.ImpactFeedbackStyle.Light);
+      Haptics12.impactAsync(Haptics12.ImpactFeedbackStyle.Light);
       ref.current?.present();
     } else {
       ref.current?.dismiss();
@@ -1512,6 +1560,9 @@ var styles19 = StyleSheet.create({
     lineHeight: 20
   }
 });
+var isIOS = Platform.OS === "ios";
+var isAndroid = Platform.OS === "android";
+var isWeb = Platform.OS === "web";
 function Select({
   options,
   value,
@@ -1523,8 +1574,10 @@ function Select({
   style
 }) {
   const { colors } = useTheme();
-  const bottomSheetRef = useRef(null);
   const scale = useRef(new Animated.Value(1)).current;
+  const [pickerVisible, setPickerVisible] = useState(false);
+  const [pendingValue, setPendingValue] = useState(value);
+  const pickerRef = useRef(null);
   const selected = options.find((o) => o.value === value);
   const handlePressIn = () => {
     if (disabled) return;
@@ -1534,24 +1587,26 @@ function Select({
     Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start();
   };
   const handleOpen = () => {
-    if (!disabled) {
-      Haptics11.selectionAsync();
-      bottomSheetRef.current?.present();
+    if (disabled) return;
+    Haptics12.selectionAsync();
+    if (isIOS) {
+      setPendingValue(value);
+      setPickerVisible(true);
+    } else if (isAndroid) {
+      pickerRef.current?.focus();
     }
   };
-  const renderBackdrop = useCallback(
-    (props) => /* @__PURE__ */ React23.createElement(
-      BottomSheetBackdrop,
-      {
-        ...props,
-        disappearsOnIndex: -1,
-        appearsOnIndex: 0,
-        pressBehavior: "close"
-      }
-    ),
-    []
-  );
-  return /* @__PURE__ */ React23.createElement(View, { style: [styles20.container, style] }, label ? /* @__PURE__ */ React23.createElement(Text, { style: [styles20.label, { color: colors.foreground }] }, label) : null, /* @__PURE__ */ React23.createElement(Animated.View, { style: { transform: [{ scale }], opacity: disabled ? 0.45 : 1 } }, /* @__PURE__ */ React23.createElement(
+  const handleDismiss = () => {
+    setPickerVisible(false);
+  };
+  const handleConfirm = () => {
+    if (pendingValue !== void 0 && pendingValue !== "") {
+      Haptics12.selectionAsync();
+      onValueChange?.(pendingValue);
+    }
+    setPickerVisible(false);
+  };
+  return /* @__PURE__ */ React23.createElement(View, { style: [styles20.container, style] }, label ? /* @__PURE__ */ React23.createElement(Text, { style: [styles20.label, { color: colors.foreground }] }, label) : null, !isWeb ? /* @__PURE__ */ React23.createElement(Animated.View, { style: { transform: [{ scale }], opacity: disabled ? 0.45 : 1 } }, /* @__PURE__ */ React23.createElement(
     TouchableOpacity,
     {
       style: [
@@ -1574,125 +1629,169 @@ function Select({
           styles20.triggerText,
           { color: selected ? colors.foreground : colors.mutedForeground }
         ],
-        numberOfLines: 1
+        numberOfLines: 1,
+        allowFontScaling: true
       },
       selected?.label ?? placeholder
     ),
-    /* @__PURE__ */ React23.createElement(Text, { style: [styles20.chevron, { color: colors.mutedForeground }] }, "\u25BE")
-  )), error ? /* @__PURE__ */ React23.createElement(Text, { style: [styles20.helperText, { color: colors.destructive }] }, error) : null, /* @__PURE__ */ React23.createElement(
-    BottomSheetModal,
+    /* @__PURE__ */ React23.createElement(Entypo, { name: "chevron-with-circle-down", size: 20, color: colors.mutedForeground })
+  )) : null, isIOS ? /* @__PURE__ */ React23.createElement(
+    Modal,
     {
-      ref: bottomSheetRef,
-      enableDynamicSizing: true,
-      enablePanDownToClose: true,
-      backdropComponent: renderBackdrop,
-      backgroundStyle: [styles20.sheetBackground, { backgroundColor: colors.card }],
-      handleIndicatorStyle: [styles20.sheetHandle, { backgroundColor: colors.border }]
+      visible: pickerVisible,
+      transparent: true,
+      animationType: "slide",
+      onRequestClose: handleDismiss
     },
-    /* @__PURE__ */ React23.createElement(BottomSheetView, { style: styles20.sheetContent }, label ? /* @__PURE__ */ React23.createElement(Text, { style: [styles20.sheetTitle, { color: colors.foreground }] }, label) : null, options.map((item) => {
-      const isSelected = item.value === value;
-      return /* @__PURE__ */ React23.createElement(
-        TouchableOpacity,
+    /* @__PURE__ */ React23.createElement(TouchableOpacity, { style: styles20.iosBackdrop, activeOpacity: 1, onPress: handleDismiss }),
+    /* @__PURE__ */ React23.createElement(View, { style: [styles20.iosSheet, { backgroundColor: colors.card }] }, /* @__PURE__ */ React23.createElement(View, { style: [styles20.iosToolbar, { borderBottomColor: colors.border }] }, label ? /* @__PURE__ */ React23.createElement(Text, { style: [styles20.iosToolbarTitle, { color: colors.foreground }], allowFontScaling: true }, label) : /* @__PURE__ */ React23.createElement(View, null), /* @__PURE__ */ React23.createElement(TouchableOpacity, { onPress: handleConfirm, style: styles20.iosDoneBtn, hitSlop: { top: 8, bottom: 8, left: 8, right: 8 } }, /* @__PURE__ */ React23.createElement(Text, { style: [styles20.iosDoneBtnText, { color: colors.primary }], allowFontScaling: true }, "Done"))), /* @__PURE__ */ React23.createElement(
+      Picker,
+      {
+        selectedValue: pendingValue ?? "",
+        onValueChange: (val) => setPendingValue(val),
+        itemStyle: { color: colors.foreground }
+      },
+      !value ? /* @__PURE__ */ React23.createElement(Picker.Item, { label: placeholder, value: "", color: colors.mutedForeground, enabled: false }) : null,
+      options.map((o) => /* @__PURE__ */ React23.createElement(
+        Picker.Item,
         {
-          key: item.value,
-          style: [
-            styles20.option,
-            isSelected && { backgroundColor: colors.accent },
-            item.disabled && styles20.disabledOption
-          ],
-          onPress: () => {
-            if (!item.disabled) {
-              Haptics11.selectionAsync();
-              onValueChange?.(item.value);
-              bottomSheetRef.current?.dismiss();
-            }
-          },
-          activeOpacity: 0.7,
-          touchSoundDisabled: true
-        },
-        /* @__PURE__ */ React23.createElement(
-          Text,
-          {
-            style: [
-              styles20.optionText,
-              { color: item.disabled ? colors.mutedForeground : colors.foreground },
-              isSelected && { fontWeight: "500" }
-            ]
-          },
-          item.label
-        ),
-        isSelected ? /* @__PURE__ */ React23.createElement(Text, { style: [styles20.checkmark, { color: colors.primary }] }, "\u2713") : null
-      );
-    }))
-  ));
+          key: o.value,
+          label: o.label,
+          value: o.value,
+          enabled: !o.disabled,
+          color: o.disabled ? colors.mutedForeground : colors.foreground
+        }
+      ))
+    ))
+  ) : null, isAndroid ? /* @__PURE__ */ React23.createElement(
+    Picker,
+    {
+      ref: pickerRef,
+      selectedValue: value ?? "",
+      onValueChange: (val) => {
+        if (val !== "") {
+          Haptics12.selectionAsync();
+          onValueChange?.(val);
+        }
+      },
+      mode: "dialog",
+      enabled: !disabled,
+      prompt: label,
+      style: styles20.androidHiddenPicker
+    },
+    !value ? /* @__PURE__ */ React23.createElement(Picker.Item, { label: placeholder, value: "", enabled: false }) : null,
+    options.map((o) => /* @__PURE__ */ React23.createElement(
+      Picker.Item,
+      {
+        key: o.value,
+        label: o.label,
+        value: o.value,
+        enabled: !o.disabled
+      }
+    ))
+  ) : null, isWeb ? /* @__PURE__ */ React23.createElement(
+    Picker,
+    {
+      selectedValue: value ?? "",
+      onValueChange: (val) => {
+        if (val !== "") {
+          onValueChange?.(val);
+        }
+      },
+      enabled: !disabled,
+      style: [
+        styles20.webPicker,
+        {
+          borderColor: error ? colors.destructive : colors.border,
+          color: selected ? colors.foreground : colors.mutedForeground,
+          backgroundColor: colors.background,
+          opacity: disabled ? 0.45 : 1
+        }
+      ]
+    },
+    /* @__PURE__ */ React23.createElement(Picker.Item, { label: placeholder, value: "", enabled: false }),
+    options.map((o) => /* @__PURE__ */ React23.createElement(
+      Picker.Item,
+      {
+        key: o.value,
+        label: o.label,
+        value: o.value,
+        enabled: !o.disabled
+      }
+    ))
+  ) : null, error ? /* @__PURE__ */ React23.createElement(Text, { style: [styles20.helperText, { color: colors.destructive }] }, error) : null);
 }
 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: {
     fontSize: 13
   },
-  sheetBackground: {
-    borderTopLeftRadius: 24,
-    borderTopRightRadius: 24
-  },
-  sheetHandle: {
-    width: 36,
-    height: 4,
-    borderRadius: 2
-  },
-  sheetContent: {
-    paddingHorizontal: 20,
-    paddingBottom: 36
+  iosBackdrop: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.4)"
   },
-  sheetTitle: {
-    fontSize: 17,
-    fontWeight: "600",
-    paddingVertical: 16,
-    paddingHorizontal: 4
+  iosSheet: {
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    paddingBottom: 32
   },
-  option: {
+  iosToolbar: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
     paddingHorizontal: 16,
-    paddingVertical: 16,
-    borderRadius: 12
+    paddingVertical: 12,
+    borderBottomWidth: 1
   },
-  optionText: {
+  iosToolbarTitle: {
     fontSize: 17,
-    flex: 1
+    fontWeight: "600"
   },
-  disabledOption: {
-    opacity: 0.45
+  iosDoneBtn: {
+    padding: 4
   },
-  checkmark: {
-    fontSize: 16,
-    fontWeight: "600",
-    marginLeft: 8
+  iosDoneBtnText: {
+    fontSize: 17,
+    fontWeight: "600"
+  },
+  androidHiddenPicker: {
+    height: 0,
+    opacity: 0,
+    position: "absolute"
+  },
+  webPicker: {
+    borderWidth: 1.5,
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    fontSize: 17
   }
 });
 var ToastContext = createContext({
@@ -1750,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([]);
@@ -1759,18 +1859,18 @@ function ToastProvider({ children }) {
   const toast = useCallback((item) => {
     const id = Math.random().toString(36).slice(2);
     if (item.variant === "success") {
-      Haptics11.notificationAsync(Haptics11.NotificationFeedbackType.Success);
+      Haptics12.notificationAsync(Haptics12.NotificationFeedbackType.Success);
     } else if (item.variant === "destructive") {
-      Haptics11.notificationAsync(Haptics11.NotificationFeedbackType.Error);
+      Haptics12.notificationAsync(Haptics12.NotificationFeedbackType.Error);
     } else {
-      Haptics11.impactAsync(Haptics11.ImpactFeedbackStyle.Light);
+      Haptics12.impactAsync(Haptics12.ImpactFeedbackStyle.Light);
     }
     setToasts((prev) => [{ ...item, id }, ...prev].slice(0, 3));
   }, []);
   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: {
@@ -1780,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",
@@ -1797,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"
@@ -1814,11 +1916,8 @@ var styles21 = StyleSheet.create({
     fontSize: 14
   },
   dismissButton: {
-    padding: 12,
+    padding: 8,
     marginLeft: 4
-  },
-  dismissIcon: {
-    fontSize: 14
   }
 });
 function formatCurrency(raw, separator) {
@@ -1832,12 +1931,14 @@ function CurrencyInput({
   onChangeValue,
   prefix = "$",
   thousandsSeparator = ".",
+  size = "default",
   label,
   error,
   hint,
   placeholder,
   editable,
-  containerStyle
+  containerStyle,
+  style
 }) {
   const handleChange = (text) => {
     const withoutPrefix = prefix && text.startsWith(prefix) ? text.slice(prefix.length) : text;
@@ -1848,6 +1949,7 @@ function CurrencyInput({
     const raw = parseFloat(formatted.replace(separatorRegex, "") || "0");
     onChangeValue?.(isNaN(raw) ? 0 : raw);
   };
+  const inputStyle = size === "large" ? { fontSize: 36 } : {};
   return /* @__PURE__ */ React23.createElement(
     Input,
     {
@@ -1859,7 +1961,8 @@ function CurrencyInput({
       hint,
       placeholder: placeholder ?? `${prefix}0`,
       editable,
-      containerStyle
+      containerStyle,
+      style: [inputStyle, style]
     }
   );
 }
@@ -1887,58 +1990,32 @@ var styles22 = StyleSheet.create({
     fontWeight: "700"
   }
 });
-function formatCurrency2(raw, separator) {
-  const digits = raw.replace(/\D/g, "");
-  if (!digits) return "";
-  return digits.replace(/\B(?=(\d{3})+(?!\d))/g, separator);
-}
-function CurrencyInputLarge({
-  value,
-  onChangeText,
-  onChangeValue,
-  prefix = "$",
-  thousandsSeparator = ".",
-  label,
-  error,
-  hint,
-  placeholder,
-  editable,
-  containerStyle
+var nativeDriver4 = Platform.OS !== "web";
+function ListItem({
+  leftRender,
+  rightRender,
+  trailing,
+  icon,
+  title,
+  subtitle,
+  caption,
+  variant = "plain",
+  showChevron = false,
+  showSeparator = false,
+  onPress,
+  disabled,
+  style,
+  titleStyle,
+  subtitleStyle,
+  captionStyle
 }) {
-  const handleChange = (text) => {
-    const withoutPrefix = prefix && text.startsWith(prefix) ? text.slice(prefix.length) : text;
-    const formatted = formatCurrency2(withoutPrefix, thousandsSeparator);
-    const display = formatted ? `${prefix}${formatted}` : "";
-    onChangeText?.(display);
-    const separatorRegex = new RegExp(`\\${thousandsSeparator}`, "g");
-    const raw = parseFloat(formatted.replace(separatorRegex, "") || "0");
-    onChangeValue?.(isNaN(raw) ? 0 : raw);
-  };
-  return /* @__PURE__ */ React23.createElement(
-    Input,
-    {
-      value,
-      onChangeText: handleChange,
-      keyboardType: "numeric",
-      label,
-      error,
-      hint,
-      placeholder: placeholder ?? `${prefix}0`,
-      editable,
-      containerStyle,
-      style: { fontSize: 36 }
-    }
-  );
-}
-var nativeDriver3 = Platform.OS !== "web";
-function ListItem({ icon, title, subtitle, trailing, onPress, disabled, style }) {
   const { colors } = useTheme();
   const scale = useRef(new Animated.Value(1)).current;
   const handlePressIn = () => {
     if (!onPress || disabled) return;
     Animated.spring(scale, {
       toValue: 0.97,
-      useNativeDriver: nativeDriver3,
+      useNativeDriver: nativeDriver4,
       speed: 40,
       bounciness: 0
     }).start();
@@ -1946,19 +2023,32 @@ function ListItem({ icon, title, subtitle, trailing, onPress, disabled, style })
   const handlePressOut = () => {
     Animated.spring(scale, {
       toValue: 1,
-      useNativeDriver: nativeDriver3,
+      useNativeDriver: nativeDriver4,
       speed: 40,
       bounciness: 4
     }).start();
   };
   const handlePress = () => {
-    Haptics11.selectionAsync();
+    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,
@@ -1966,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: {
@@ -1979,31 +2108,54 @@ 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
   },
-  trailing: {
+  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
   }
 });
-var nativeDriver4 = Platform.OS !== "web";
+var nativeDriver5 = Platform.OS !== "web";
 function Chip({ label, selected = false, onPress, style }) {
   const { colors } = useTheme();
   const scale = useRef(new Animated.Value(1)).current;
@@ -2019,7 +2171,7 @@ function Chip({ label, selected = false, onPress, style }) {
   const handlePressIn = () => {
     Animated.spring(scale, {
       toValue: 0.95,
-      useNativeDriver: nativeDriver4,
+      useNativeDriver: nativeDriver5,
       speed: 40,
       bounciness: 0
     }).start();
@@ -2027,13 +2179,13 @@ function Chip({ label, selected = false, onPress, style }) {
   const handlePressOut = () => {
     Animated.spring(scale, {
       toValue: 1,
-      useNativeDriver: nativeDriver4,
+      useNativeDriver: nativeDriver5,
       speed: 40,
       bounciness: 4
     }).start();
   };
   const handlePress = () => {
-    Haptics11.selectionAsync();
+    Haptics12.selectionAsync();
     onPress?.();
   };
   const backgroundColor = pressAnim.interpolate({
@@ -2060,14 +2212,35 @@ function Chip({ label, selected = false, onPress, style }) {
     /* @__PURE__ */ React23.createElement(Animated.View, { style: [styles24.chip, { backgroundColor, borderColor }] }, /* @__PURE__ */ React23.createElement(Animated.Text, { style: [styles24.label, { color: textColor }], allowFontScaling: true }, label))
   ));
 }
-function ChipGroup({ options, value, onValueChange, style }) {
+function ChipGroup({ options, value, onValueChange, multiSelect = false, style }) {
+  const handlePress = (optionValue) => {
+    if (!multiSelect) {
+      onValueChange?.(optionValue);
+      return;
+    }
+    const currentArray = Array.isArray(value) ? value : value ? [value] : [];
+    const isSelected2 = currentArray.includes(optionValue);
+    let newArray;
+    if (isSelected2) {
+      newArray = currentArray.filter((v) => v !== optionValue);
+    } else {
+      newArray = [...currentArray, optionValue];
+    }
+    onValueChange?.(newArray);
+  };
+  const isSelected = (optionValue) => {
+    if (Array.isArray(value)) {
+      return value.includes(optionValue);
+    }
+    return optionValue === value;
+  };
   return /* @__PURE__ */ React23.createElement(View, { style: [styles24.group, style] }, options.map((opt) => /* @__PURE__ */ React23.createElement(
     Chip,
     {
       key: opt.value,
       label: opt.label,
-      selected: opt.value === value,
-      onPress: () => onValueChange?.(opt.value)
+      selected: isSelected(opt.value),
+      onPress: () => handlePress(opt.value)
     }
   )));
 }
@@ -2187,7 +2360,7 @@ var MONTH_NAMES = [
 function MonthPicker({ value, onChange, style }) {
   const { colors } = useTheme();
   const handlePrev = () => {
-    Haptics11.selectionAsync();
+    Haptics12.selectionAsync();
     if (value.month === 1) {
       onChange({ month: 12, year: value.year - 1 });
     } else {
@@ -2195,7 +2368,7 @@ function MonthPicker({ value, onChange, style }) {
     }
   };
   const handleNext = () => {
-    Haptics11.selectionAsync();
+    Haptics12.selectionAsync();
     if (value.month === 12) {
       onChange({ month: 1, year: value.year + 1 });
     } else {
@@ -2210,7 +2383,7 @@ function MonthPicker({ value, onChange, style }) {
       activeOpacity: 0.6,
       touchSoundDisabled: true
     },
-    /* @__PURE__ */ React23.createElement(Text, { style: [styles27.arrowText, { color: colors.foreground }] }, "\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,
     {
@@ -2219,7 +2392,7 @@ function MonthPicker({ value, onChange, style }) {
       activeOpacity: 0.6,
       touchSoundDisabled: true
     },
-    /* @__PURE__ */ React23.createElement(Text, { style: [styles27.arrowText, { color: colors.foreground }] }, "\u203A")
+    /* @__PURE__ */ React23.createElement(Entypo, { name: "chevron-right", size: 22, color: colors.foreground })
   ));
 }
 var styles27 = StyleSheet.create({
@@ -2234,10 +2407,6 @@ var styles27 = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center"
   },
-  arrowText: {
-    fontSize: 24,
-    lineHeight: 30
-  },
   label: {
     fontSize: 17,
     fontWeight: "500",
@@ -2247,4 +2416,4 @@ var styles27 = StyleSheet.create({
   }
 });
 
-export { Accordion, AlertBanner, Avatar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, ChipGroup, ConfirmDialog, CurrencyDisplay, CurrencyInput, CurrencyInputLarge, EmptyState, Input, LabelValue, ListItem, MonthPicker, Progress, RadioGroup, Select, Separator, Sheet, Skeleton, Slider, Spinner, Switch, Tabs, TabsContent, Text2 as Text, Textarea, ThemeProvider, ToastProvider, Toggle, defaultDark, defaultLight, useTheme, useToast };
+export { Accordion, AlertBanner, Avatar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, ChipGroup, ConfirmDialog, CurrencyDisplay, CurrencyInput, CurrencyInput as CurrencyInputLarge, EmptyState, Input, LabelValue, ListItem, MonthPicker, Progress, RadioGroup, Select, Separator, Sheet, Skeleton, Slider, Spinner, Switch, Tabs, TabsContent, Text2 as Text, Textarea, ThemeProvider, ToastProvider, Toggle, defaultDark, defaultLight, useTheme, useToast };