@retray-dev/ui-kit 1.7.0 → 2.3.0

package/dist/index.mjs

@@ -1,10 +1,12 @@
 import React23, { createContext, useMemo, useContext, useRef, useState, useEffect, useCallback } from 'react';
-import { StyleSheet, useColorScheme, Animated, TouchableOpacity, ActivityIndicator, Text, View, TextInput, Image, Easing, PanResponder } 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 { 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 +20,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,14 +67,19 @@ 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 },
@@ -103,31 +110,33 @@ function Button({
     if (isDisabled) return;
     Animated.spring(scale, {
       toValue: 0.95,
-      useNativeDriver: true,
+      useNativeDriver: nativeDriver,
       speed: 40,
       bounciness: 0
     }).start();
   };
   const handlePressOut = () => {
-    Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start();
+    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 = {
     primary: { backgroundColor: colors.primary },
     secondary: { backgroundColor: colors.secondary },
     outline: { backgroundColor: "transparent", borderWidth: 1.5, borderColor: colors.border },
-    ghost: { backgroundColor: "transparent" }
+    ghost: { backgroundColor: "transparent" },
+    destructive: { backgroundColor: colors.destructive }
   }[variant];
   const labelVariantStyle = {
     primary: { color: colors.primaryForeground },
     secondary: { color: colors.secondaryForeground },
     outline: { color: colors.foreground },
-    ghost: { color: colors.foreground }
+    ghost: { color: colors.foreground },
+    destructive: { color: colors.destructiveForeground }
   }[variant];
-  const spinnerColor = variant === "primary" || variant === "secondary" ? colors.primaryForeground : colors.foreground;
+  const spinnerColor = variant === "destructive" ? colors.destructiveForeground : variant === "primary" || variant === "secondary" ? colors.primaryForeground : colors.foreground;
   return /* @__PURE__ */ React23.createElement(Animated.View, { style: [fullWidth && styles.fullWidth, { transform: [{ scale }] }] }, /* @__PURE__ */ React23.createElement(
     TouchableOpacity,
     {
@@ -161,7 +170,7 @@ var styles = StyleSheet.create({
     width: "100%"
   },
   disabled: {
-    opacity: 0.45
+    opacity: 0.5
   },
   label: {
     fontWeight: "600"
@@ -191,33 +200,52 @@ 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(Text, { style: [styles2.suffixText, { color: colors.mutedForeground }] }, showPassword ? "\u{1F441}" : "\u{1F441}\u200D\u{1F5E8}")) : 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({
@@ -229,18 +257,56 @@ var styles2 = StyleSheet.create({
     fontWeight: "500",
     marginBottom: 6
   },
-  input: {
+  inputWrapper: {
+    flexDirection: "row",
+    alignItems: "center",
     borderWidth: 1.5,
     borderRadius: 14,
     paddingHorizontal: 20,
-    paddingVertical: 16,
-    fontSize: 17
+    paddingVertical: 16
+  },
+  input: {
+    flex: 1,
+    fontSize: 17,
+    paddingVertical: 0
+  },
+  prefixContainer: {
+    marginRight: 8
+  },
+  prefixText: {
+    fontSize: 17,
+    marginRight: 8
+  },
+  suffixContainer: {
+    marginLeft: 8
+  },
+  suffixText: {
+    fontSize: 17,
+    marginLeft: 8
+  },
+  passwordToggle: {
+    padding: 4
   },
   helperText: {
     fontSize: 13
   }
 });
-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 },
@@ -254,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"
+    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: 1 },
+      shadowOpacity: 0.05,
+      shadowRadius: 2,
+      elevation: 1
     },
-    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);
@@ -441,7 +567,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() ?? "?"
   ));
@@ -455,12 +582,13 @@ var styles7 = StyleSheet.create({
     fontWeight: "500"
   }
 });
-function Alert({ title, description, variant = "default", icon, style }) {
+function AlertBanner({ title, description, variant = "default", icon, style }) {
   const { colors } = useTheme();
-  const borderColor = variant === "destructive" ? colors.destructive : colors.border;
-  const titleColor = variant === "destructive" ? colors.destructive : colors.foreground;
-  const descColor = variant === "destructive" ? colors.destructive : colors.mutedForeground;
-  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 }] }, variant === "destructive" ? "\u26A0" : "\u2139")), /* @__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 borderColor = variant === "destructive" ? colors.destructive : variant === "success" ? colors.success : colors.border;
+  const titleColor = variant === "destructive" ? colors.destructive : variant === "success" ? colors.success : colors.foreground;
+  const descColor = variant === "destructive" ? colors.destructive : variant === "success" ? colors.success : colors.mutedForeground;
+  const defaultIcon = variant === "destructive" ? "\u26A0" : variant === "success" ? "\u2713" : "\u2139";
+  return /* @__PURE__ */ React23.createElement(View, { style: [styles8.container, { backgroundColor: colors.card, borderColor }, style] }, icon ? /* @__PURE__ */ React23.createElement(View, { style: styles8.icon }, icon) : /* @__PURE__ */ React23.createElement(View, { style: styles8.icon }, /* @__PURE__ */ React23.createElement(Text, { style: [styles8.defaultIcon, { color: titleColor }], allowFontScaling: true }, defaultIcon)), /* @__PURE__ */ React23.createElement(View, { style: styles8.content }, title ? /* @__PURE__ */ React23.createElement(Text, { style: [styles8.title, { color: titleColor }], allowFontScaling: true }, title) : null, description ? /* @__PURE__ */ React23.createElement(Text, { style: [styles8.description, { color: descColor }], allowFontScaling: true }, description) : null));
 }
 var styles8 = StyleSheet.create({
   container: {
@@ -531,9 +659,40 @@ var styles9 = StyleSheet.create({
     borderRadius: 999
   }
 });
-function EmptyState({ icon, title, description, action, style }) {
+function EmptyState({ icon, title, description, action, size = "default", style }) {
   const { colors } = useTheme();
-  return /* @__PURE__ */ React23.createElement(View, { style: [styles10.container, { borderColor: colors.border }, style] }, icon ? /* @__PURE__ */ React23.createElement(View, { style: [styles10.iconWrapper, { backgroundColor: colors.muted }] }, icon) : null, /* @__PURE__ */ React23.createElement(View, { style: styles10.textWrapper }, /* @__PURE__ */ React23.createElement(Text, { style: [styles10.title, { color: colors.foreground }] }, title), description ? /* @__PURE__ */ React23.createElement(Text, { style: [styles10.description, { color: colors.mutedForeground }] }, description) : null), action ? /* @__PURE__ */ React23.createElement(View, { style: styles10.action }, action) : null);
+  const isCompact = size === "compact";
+  return /* @__PURE__ */ React23.createElement(
+    View,
+    {
+      style: [
+        styles10.container,
+        isCompact && styles10.containerCompact,
+        { borderColor: colors.border },
+        style
+      ]
+    },
+    icon ? /* @__PURE__ */ React23.createElement(
+      View,
+      {
+        style: [
+          styles10.iconWrapper,
+          isCompact && styles10.iconWrapperCompact,
+          { backgroundColor: colors.muted }
+        ]
+      },
+      icon
+    ) : null,
+    /* @__PURE__ */ React23.createElement(View, { style: styles10.textWrapper }, /* @__PURE__ */ React23.createElement(
+      Text,
+      {
+        style: [styles10.title, isCompact && styles10.titleCompact, { color: colors.foreground }],
+        allowFontScaling: true
+      },
+      title
+    ), 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
+  );
 }
 var styles10 = StyleSheet.create({
   container: {
@@ -545,6 +704,10 @@ var styles10 = StyleSheet.create({
     padding: 32,
     gap: 16
   },
+  containerCompact: {
+    padding: 20,
+    gap: 10
+  },
   iconWrapper: {
     width: 48,
     height: 48,
@@ -552,6 +715,11 @@ var styles10 = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center"
   },
+  iconWrapperCompact: {
+    width: 36,
+    height: 36,
+    borderRadius: 8
+  },
   textWrapper: {
     alignItems: "center",
     gap: 8,
@@ -562,6 +730,9 @@ var styles10 = StyleSheet.create({
     fontWeight: "500",
     textAlign: "center"
   },
+  titleCompact: {
+    fontSize: 15
+  },
   description: {
     fontSize: 14,
     lineHeight: 20,
@@ -571,6 +742,7 @@ var styles10 = StyleSheet.create({
     marginTop: 8
   }
 });
+var webInputResetStyle2 = Platform.OS === "web" ? { outlineStyle: "none", outlineWidth: 0, outlineColor: "transparent", boxShadow: "none" } : {};
 function Textarea({
   label,
   error,
@@ -593,11 +765,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) => {
@@ -655,7 +828,7 @@ function Checkbox({
     {
       style: [styles12.row, style],
       onPress: () => {
-        Haptics11.selectionAsync();
+        Haptics12.selectionAsync();
         onCheckedChange?.(!checked);
       },
       onPressIn: handlePressIn,
@@ -713,6 +886,7 @@ var styles12 = StyleSheet.create({
     lineHeight: 22
   }
 });
+var nativeDriver3 = Platform.OS !== "web";
 var TRACK_WIDTH = 60;
 var TRACK_HEIGHT = 36;
 var THUMB_SIZE = 28;
@@ -726,7 +900,7 @@ function Switch({ checked = false, onCheckedChange, disabled, style }) {
     Animated.parallel([
       Animated.spring(translateX, {
         toValue: checked ? THUMB_TRAVEL : 0,
-        useNativeDriver: true,
+        useNativeDriver: nativeDriver3,
         bounciness: 4
       }),
       Animated.timing(trackOpacity, {
@@ -740,17 +914,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,
@@ -761,7 +935,7 @@ function Switch({ checked = false, onCheckedChange, disabled, style }) {
         ]
       }
     ))
-  );
+  ));
 }
 var styles13 = StyleSheet.create({
   wrapper: {},
@@ -839,10 +1013,14 @@ 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(View, { style: [styles14.checkContainer, { borderColor: colors.primary, backgroundColor: colors.primary }] }, /* @__PURE__ */ React23.createElement(Text, { style: [styles14.checkMark, { color: colors.primaryForeground }] }, "\u2713"));
+    }
+    const custom = renderProp(icon);
+    if (custom) return /* @__PURE__ */ React23.createElement(React23.Fragment, null, custom);
+    return /* @__PURE__ */ React23.createElement(View, { style: [styles14.checkContainer, { borderColor: colors.mutedForeground }] });
   };
   return /* @__PURE__ */ React23.createElement(Animated.View, { style: { transform: [{ scale }] } }, /* @__PURE__ */ React23.createElement(
     Animated.View,
@@ -860,7 +1038,7 @@ function Toggle({
       {
         style: styles14.touchable,
         onPress: () => {
-          Haptics11.selectionAsync();
+          Haptics12.selectionAsync();
           onPressedChange?.(!pressed);
         },
         onPressIn: handlePressIn,
@@ -927,7 +1105,7 @@ function RadioItem({
       style: styles15.row,
       onPress: () => {
         if (!option.disabled) {
-          Haptics11.selectionAsync();
+          Haptics12.selectionAsync();
           onSelect();
         }
       },
@@ -1085,7 +1263,7 @@ function Tabs({ tabs, value, onValueChange, children, style }) {
     }
   }, [active]);
   const handlePress = (v) => {
-    Haptics11.selectionAsync();
+    Haptics12.selectionAsync();
     if (!value) setInternal(v);
     onValueChange?.(v);
   };
@@ -1210,7 +1388,7 @@ function AccordionItemComponent({
     {
       style: styles17.trigger,
       onPress: () => {
-        Haptics11.selectionAsync();
+        Haptics12.selectionAsync();
         onToggle();
       },
       onPressIn: handlePressIn,
@@ -1284,116 +1462,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({
@@ -1409,7 +1534,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();
@@ -1465,6 +1590,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,
@@ -1476,8 +1604,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;
@@ -1487,24 +1617,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: [
@@ -1527,57 +1659,97 @@ 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,
+  )) : 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: {
@@ -1608,44 +1780,45 @@ var styles20 = StyleSheet.create({
   helperText: {
     fontSize: 13
   },
-  sheetBackground: {
-    borderTopLeftRadius: 24,
-    borderTopRightRadius: 24
+  iosBackdrop: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.4)"
   },
-  sheetHandle: {
-    width: 36,
-    height: 4,
-    borderRadius: 2
+  iosSheet: {
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    paddingBottom: 32
   },
-  sheetContent: {
+  iosToolbar: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
     paddingHorizontal: 20,
-    paddingBottom: 36
+    paddingVertical: 12,
+    borderBottomWidth: 1
   },
-  sheetTitle: {
+  iosToolbarTitle: {
     fontSize: 17,
-    fontWeight: "600",
-    paddingVertical: 16,
-    paddingHorizontal: 4
+    fontWeight: "600"
   },
-  option: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingHorizontal: 16,
-    paddingVertical: 16,
-    borderRadius: 12
+  iosDoneBtn: {
+    padding: 4
   },
-  optionText: {
+  iosDoneBtnText: {
     fontSize: 17,
-    flex: 1
+    fontWeight: "600"
   },
-  disabledOption: {
-    opacity: 0.45
+  androidHiddenPicker: {
+    height: 0,
+    opacity: 0,
+    position: "absolute"
   },
-  checkmark: {
-    fontSize: 16,
-    fontWeight: "600",
-    marginLeft: 8
+  webPicker: {
+    borderWidth: 1.5,
+    borderRadius: 14,
+    paddingHorizontal: 20,
+    paddingVertical: 16,
+    fontSize: 17
   }
 });
 var ToastContext = createContext({
@@ -1712,11 +1885,11 @@ 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));
   }, []);
@@ -1785,12 +1958,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;
@@ -1801,6 +1976,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,
     {
@@ -1812,7 +1988,8 @@ function CurrencyInput({
       hint,
       placeholder: placeholder ?? `${prefix}0`,
       editable,
-      containerStyle
+      containerStyle,
+      style: [inputStyle, style]
     }
   );
 }
@@ -1828,10 +2005,10 @@ function formatValue(value, prefix, showDecimals) {
   }
   return `${sign}${prefix}${intPart}`;
 }
-function CurrencyDisplay({ value, prefix = "$", showDecimals = false, style }) {
+function CurrencyDisplay({ value, prefix = "$", showDecimals = false, textColor, style }) {
   const { colors } = useTheme();
   const formatted = formatValue(value, prefix, showDecimals);
-  return /* @__PURE__ */ React23.createElement(View, { style: [styles22.container, style] }, /* @__PURE__ */ React23.createElement(Text, { style: [styles22.amount, { color: colors.foreground }], allowFontScaling: true }, formatted));
+  return /* @__PURE__ */ React23.createElement(View, { style: [styles22.container, style] }, /* @__PURE__ */ React23.createElement(Text, { style: [styles22.amount, { color: textColor ?? colors.foreground }], allowFontScaling: true }, formatted));
 }
 var styles22 = StyleSheet.create({
   container: {},
@@ -1840,48 +2017,342 @@ 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);
+var nativeDriver4 = 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: nativeDriver4,
+      speed: 40,
+      bounciness: 0
+    }).start();
+  };
+  const handlePressOut = () => {
+    Animated.spring(scale, {
+      toValue: 1,
+      useNativeDriver: nativeDriver4,
+      speed: 40,
+      bounciness: 4
+    }).start();
+  };
+  const handlePress = () => {
+    Haptics12.selectionAsync();
+    onPress?.();
+  };
+  return /* @__PURE__ */ React23.createElement(Animated.View, { style: [{ transform: [{ scale }] }, disabled && styles23.disabled] }, /* @__PURE__ */ React23.createElement(
+    TouchableOpacity,
+    {
+      style: [styles23.container, style],
+      onPress: onPress ? handlePress : void 0,
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      disabled,
+      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
+  ));
 }
-function CurrencyInputLarge({
-  value,
-  onChangeText,
-  onChangeValue,
-  prefix = "$",
-  thousandsSeparator = ".",
-  label,
-  error,
-  hint,
-  placeholder,
-  editable,
-  containerStyle
-}) {
-  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);
+var styles23 = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    gap: 12
+  },
+  iconWrapper: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  content: {
+    flex: 1,
+    gap: 3
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: "500",
+    lineHeight: 22
+  },
+  subtitle: {
+    fontSize: 13,
+    lineHeight: 18
+  },
+  trailing: {
+    fontSize: 15
+  },
+  disabled: {
+    opacity: 0.45
+  }
+});
+var nativeDriver5 = Platform.OS !== "web";
+function Chip({ label, selected = false, onPress, style }) {
+  const { colors } = useTheme();
+  const scale = useRef(new Animated.Value(1)).current;
+  const pressAnim = useRef(new Animated.Value(selected ? 1 : 0)).current;
+  useEffect(() => {
+    Animated.timing(pressAnim, {
+      toValue: selected ? 1 : 0,
+      duration: 150,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: false
+    }).start();
+  }, [selected, pressAnim]);
+  const handlePressIn = () => {
+    Animated.spring(scale, {
+      toValue: 0.95,
+      useNativeDriver: nativeDriver5,
+      speed: 40,
+      bounciness: 0
+    }).start();
   };
-  return /* @__PURE__ */ React23.createElement(
-    Input,
+  const handlePressOut = () => {
+    Animated.spring(scale, {
+      toValue: 1,
+      useNativeDriver: nativeDriver5,
+      speed: 40,
+      bounciness: 4
+    }).start();
+  };
+  const handlePress = () => {
+    Haptics12.selectionAsync();
+    onPress?.();
+  };
+  const backgroundColor = pressAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [colors.secondary, colors.primary]
+  });
+  const textColor = pressAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [colors.foreground, colors.primaryForeground]
+  });
+  const borderColor = pressAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [colors.border, colors.primary]
+  });
+  return /* @__PURE__ */ React23.createElement(Animated.View, { style: [styles24.wrapper, { transform: [{ scale }] }, style] }, /* @__PURE__ */ React23.createElement(
+    TouchableOpacity,
     {
-      value,
-      onChangeText: handleChange,
-      keyboardType: "numeric",
-      label,
-      error,
-      hint,
-      placeholder: placeholder ?? `${prefix}0`,
-      editable,
-      containerStyle,
-      style: { fontSize: 36 }
+      onPress: handlePress,
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      activeOpacity: 1,
+      touchSoundDisabled: true
+    },
+    /* @__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, 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: isSelected(opt.value),
+      onPress: () => handlePress(opt.value)
+    }
+  )));
 }
+var styles24 = StyleSheet.create({
+  wrapper: {},
+  chip: {
+    borderRadius: 999,
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    borderWidth: 1.5,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: "500",
+    lineHeight: 20
+  },
+  group: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 8
+  }
+});
+function ConfirmDialog({
+  visible,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  confirmVariant = "primary",
+  onConfirm,
+  onCancel
+}) {
+  const { colors } = useTheme();
+  return /* @__PURE__ */ React23.createElement(Modal, { visible, transparent: true, animationType: "fade", onRequestClose: onCancel }, /* @__PURE__ */ React23.createElement(TouchableOpacity, { style: styles25.overlay, activeOpacity: 1, onPress: onCancel }, /* @__PURE__ */ React23.createElement(
+    View,
+    {
+      style: [styles25.dialog, { backgroundColor: colors.card }],
+      onStartShouldSetResponder: () => true
+    },
+    /* @__PURE__ */ React23.createElement(Text, { style: [styles25.title, { color: colors.cardForeground }], allowFontScaling: true }, title),
+    description ? /* @__PURE__ */ React23.createElement(Text, { style: [styles25.description, { color: colors.mutedForeground }], allowFontScaling: true }, description) : null,
+    /* @__PURE__ */ React23.createElement(View, { style: styles25.actions }, /* @__PURE__ */ React23.createElement(Button, { label: cancelLabel, variant: "outline", fullWidth: true, onPress: onCancel }), /* @__PURE__ */ React23.createElement(Button, { label: confirmLabel, variant: confirmVariant, fullWidth: true, onPress: onConfirm }))
+  )));
+}
+var styles25 = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.5)",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 24
+  },
+  dialog: {
+    width: "100%",
+    maxWidth: 400,
+    borderRadius: 16,
+    padding: 24,
+    gap: 12,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.15,
+    shadowRadius: 16,
+    elevation: 8
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "600",
+    lineHeight: 26
+  },
+  description: {
+    fontSize: 15,
+    lineHeight: 22
+  },
+  actions: {
+    gap: 10,
+    marginTop: 8
+  }
+});
+function LabelValue({ label, value, style }) {
+  const { colors } = useTheme();
+  return /* @__PURE__ */ React23.createElement(View, { style: [styles26.container, style] }, /* @__PURE__ */ React23.createElement(Text, { style: [styles26.label, { color: colors.mutedForeground }], allowFontScaling: true }, label), typeof value === "string" ? /* @__PURE__ */ React23.createElement(Text, { style: [styles26.value, { color: colors.foreground }], allowFontScaling: true }, value) : value);
+}
+var styles26 = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: 12
+  },
+  label: {
+    fontSize: 13,
+    lineHeight: 18
+  },
+  value: {
+    fontSize: 15,
+    fontWeight: "500",
+    lineHeight: 22,
+    textAlign: "right"
+  }
+});
+var MONTH_NAMES = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+function MonthPicker({ value, onChange, style }) {
+  const { colors } = useTheme();
+  const handlePrev = () => {
+    Haptics12.selectionAsync();
+    if (value.month === 1) {
+      onChange({ month: 12, year: value.year - 1 });
+    } else {
+      onChange({ month: value.month - 1, year: value.year });
+    }
+  };
+  const handleNext = () => {
+    Haptics12.selectionAsync();
+    if (value.month === 12) {
+      onChange({ month: 1, year: value.year + 1 });
+    } else {
+      onChange({ month: value.month + 1, year: value.year });
+    }
+  };
+  return /* @__PURE__ */ React23.createElement(View, { style: [styles27.container, style] }, /* @__PURE__ */ React23.createElement(
+    TouchableOpacity,
+    {
+      style: styles27.arrow,
+      onPress: handlePrev,
+      activeOpacity: 0.6,
+      touchSoundDisabled: true
+    },
+    /* @__PURE__ */ React23.createElement(Text, { style: [styles27.arrowText, { color: colors.foreground }], allowFontScaling: true }, "\u2039")
+  ), /* @__PURE__ */ React23.createElement(Text, { style: [styles27.label, { color: colors.foreground }], allowFontScaling: true }, MONTH_NAMES[value.month - 1], " ", value.year), /* @__PURE__ */ React23.createElement(
+    TouchableOpacity,
+    {
+      style: styles27.arrow,
+      onPress: handleNext,
+      activeOpacity: 0.6,
+      touchSoundDisabled: true
+    },
+    /* @__PURE__ */ React23.createElement(Text, { style: [styles27.arrowText, { color: colors.foreground }], allowFontScaling: true }, "\u203A")
+  ));
+}
+var styles27 = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  arrow: {
+    width: 44,
+    height: 44,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  arrowText: {
+    fontSize: 24,
+    lineHeight: 30
+  },
+  label: {
+    fontSize: 17,
+    fontWeight: "500",
+    lineHeight: 24,
+    textAlign: "center",
+    minWidth: 160
+  }
+});
 
-export { Accordion, Alert, Avatar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CurrencyDisplay, CurrencyInput, CurrencyInputLarge, EmptyState, Input, 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 };