@retray-dev/ui-kit 1.6.0 → 1.8.0

package/dist/index.mjs

@@ -1,8 +1,8 @@
 import React23, { createContext, useMemo, useContext, useRef, useState, useEffect, useCallback } from 'react';
-import { StyleSheet, useColorScheme, Animated, TouchableOpacity, ActivityIndicator, Text, View, TextInput, Image, PanResponder } from 'react-native';
+import { Platform, StyleSheet, useColorScheme, Animated, TouchableOpacity, ActivityIndicator, Text, View, TextInput, Image, Easing, PanResponder, Modal } from 'react-native';
 import * as Haptics11 from 'expo-haptics';
 import { LinearGradient } from 'expo-linear-gradient';
-import ReanimatedAnimated, { useSharedValue, useAnimatedStyle, withTiming, Easing, withSpring } from 'react-native-reanimated';
+import ReanimatedAnimated, { useSharedValue, useAnimatedStyle, withTiming, Easing as Easing$1, withSpring } from 'react-native-reanimated';
 import { BottomSheetModal, BottomSheetView, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
 export { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 import { scheduleOnRN } from 'react-native-worklets';
@@ -73,14 +73,15 @@ function ThemeProvider({ children, theme, colorScheme = "system" }) {
 function useTheme() {
   return useContext(ThemeContext);
 }
+var nativeDriver = Platform.OS !== "web";
 var containerSizeStyles = {
-  sm: { paddingHorizontal: 16, paddingVertical: 10 },
-  md: { paddingHorizontal: 20, paddingVertical: 14 },
-  lg: { paddingHorizontal: 28, paddingVertical: 18 }
+  sm: { paddingHorizontal: 20, paddingVertical: 12 },
+  md: { paddingHorizontal: 24, paddingVertical: 16 },
+  lg: { paddingHorizontal: 32, paddingVertical: 20 }
 };
 var labelSizeStyles = {
-  sm: { fontSize: 14 },
-  md: { fontSize: 16 },
+  sm: { fontSize: 15 },
+  md: { fontSize: 17 },
   lg: { fontSize: 18 }
 };
 function Button({
@@ -103,13 +104,13 @@ 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);
@@ -119,15 +120,17 @@ function Button({
     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,
     {
@@ -147,12 +150,12 @@ function Button({
       onPressOut: handlePressOut,
       ...props
     },
-    loading ? /* @__PURE__ */ React23.createElement(ActivityIndicator, { size: "small", color: spinnerColor }) : /* @__PURE__ */ React23.createElement(React23.Fragment, null, icon && iconPosition === "left" && /* @__PURE__ */ React23.createElement(React23.Fragment, null, icon), /* @__PURE__ */ React23.createElement(Text, { style: [styles.label, labelVariantStyle, labelSizeStyles[size], icon ? styles.labelWithIcon : void 0] }, label), icon && iconPosition === "right" && /* @__PURE__ */ React23.createElement(React23.Fragment, null, icon))
+    loading ? /* @__PURE__ */ React23.createElement(ActivityIndicator, { size: "small", color: spinnerColor }) : /* @__PURE__ */ React23.createElement(React23.Fragment, null, icon && iconPosition === "left" && /* @__PURE__ */ React23.createElement(React23.Fragment, null, typeof icon === "function" ? icon({ label, size, variant }) : icon), /* @__PURE__ */ React23.createElement(Text, { style: [styles.label, labelVariantStyle, labelSizeStyles[size], icon ? styles.labelWithIcon : void 0] }, label), icon && iconPosition === "right" && /* @__PURE__ */ React23.createElement(React23.Fragment, null, typeof icon === "function" ? icon({ label, size, variant }) : icon))
   ));
 }
 var styles = StyleSheet.create({
   base: {
-    borderRadius: 8,
+    borderRadius: 999,
     alignItems: "center",
     justifyContent: "center",
     flexDirection: "row"
@@ -171,12 +174,12 @@ var styles = StyleSheet.create({
   }
 });
 var variantStyles = {
-  h1: { fontSize: 32, fontWeight: "700", lineHeight: 44 },
-  h2: { fontSize: 24, fontWeight: "700", lineHeight: 32 },
-  h3: { fontSize: 20, fontWeight: "600", lineHeight: 28 },
-  body: { fontSize: 16, fontWeight: "400", lineHeight: 24 },
-  caption: { fontSize: 12, fontWeight: "400", lineHeight: 18 },
-  label: { fontSize: 14, fontWeight: "500", lineHeight: 20 }
+  h1: { fontSize: 40, fontWeight: "700", lineHeight: 52 },
+  h2: { fontSize: 28, fontWeight: "700", lineHeight: 36 },
+  h3: { fontSize: 22, fontWeight: "600", lineHeight: 30 },
+  body: { fontSize: 17, fontWeight: "400", lineHeight: 26 },
+  caption: { fontSize: 13, fontWeight: "400", lineHeight: 20 },
+  label: { fontSize: 15, fontWeight: "500", lineHeight: 22 }
 };
 function Text2({ variant = "body", color, style, children, ...props }) {
   const { colors } = useTheme();
@@ -222,22 +225,22 @@ function Input({ label, error, hint, containerStyle, style, onFocus, onBlur, ...
 }
 var styles2 = StyleSheet.create({
   container: {
-    gap: 4
+    gap: 6
   },
   label: {
-    fontSize: 14,
+    fontSize: 15,
     fontWeight: "500",
-    marginBottom: 4
+    marginBottom: 6
   },
   input: {
     borderWidth: 1.5,
-    borderRadius: 8,
-    paddingHorizontal: 16,
-    paddingVertical: 14,
-    fontSize: 16
+    borderRadius: 14,
+    paddingHorizontal: 20,
+    paddingVertical: 16,
+    fontSize: 17
   },
   helperText: {
-    fontSize: 12
+    fontSize: 13
   }
 });
 function Badge({ label, variant = "default", style }) {
@@ -258,13 +261,13 @@ function Badge({ label, variant = "default", style }) {
 }
 var styles3 = StyleSheet.create({
   container: {
-    borderRadius: 6,
-    paddingHorizontal: 8,
-    paddingVertical: 2,
+    borderRadius: 8,
+    paddingHorizontal: 10,
+    paddingVertical: 4,
     alignSelf: "flex-start"
   },
   label: {
-    fontSize: 12,
+    fontSize: 13,
     fontWeight: "500"
   }
 });
@@ -297,7 +300,7 @@ function CardFooter({ children, style }) {
 }
 var styles4 = StyleSheet.create({
   card: {
-    borderRadius: 12,
+    borderRadius: 20,
     borderWidth: 1,
     shadowColor: "#000",
     shadowOffset: { width: 0, height: 1 },
@@ -306,24 +309,24 @@ var styles4 = StyleSheet.create({
     elevation: 1
   },
   header: {
-    padding: 24,
+    padding: 28,
     paddingBottom: 0,
-    gap: 6
+    gap: 8
   },
   title: {
-    fontSize: 18,
+    fontSize: 20,
     fontWeight: "600",
-    lineHeight: 24
+    lineHeight: 28
   },
   description: {
-    fontSize: 14,
-    lineHeight: 20
+    fontSize: 15,
+    lineHeight: 22
   },
   content: {
-    padding: 24
+    padding: 28
   },
   footer: {
-    padding: 24,
+    padding: 28,
     paddingTop: 0,
     flexDirection: "row",
     alignItems: "center"
@@ -408,16 +411,16 @@ var styles6 = StyleSheet.create({
   }
 });
 var sizeMap2 = {
-  sm: 24,
-  md: 32,
-  lg: 48,
-  xl: 64
+  sm: 28,
+  md: 40,
+  lg: 56,
+  xl: 72
 };
 var fontSizeMap = {
-  sm: 10,
-  md: 13,
-  lg: 18,
-  xl: 24
+  sm: 12,
+  md: 16,
+  lg: 22,
+  xl: 28
 };
 function Avatar({ src, fallback, size = "md", style }) {
   const { colors } = useTheme();
@@ -455,12 +458,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) : null, /* @__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 }] }, 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));
 }
 var styles8 = StyleSheet.create({
   container: {
@@ -485,6 +489,10 @@ var styles8 = StyleSheet.create({
   description: {
     fontSize: 14,
     lineHeight: 20
+  },
+  defaultIcon: {
+    fontSize: 18,
+    fontWeight: "700"
   }
 });
 function Progress({ value = 0, max = 100, style }) {
@@ -527,9 +535,39 @@ 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 }]
+      },
+      title
+    ), description && !isCompact ? /* @__PURE__ */ React23.createElement(Text, { style: [styles10.description, { color: colors.mutedForeground }] }, description) : null),
+    action && !isCompact ? /* @__PURE__ */ React23.createElement(View, { style: styles10.action }, action) : null
+  );
 }
 var styles10 = StyleSheet.create({
   container: {
@@ -541,6 +579,10 @@ var styles10 = StyleSheet.create({
     padding: 32,
     gap: 16
   },
+  containerCompact: {
+    padding: 20,
+    gap: 10
+  },
   iconWrapper: {
     width: 48,
     height: 48,
@@ -548,6 +590,11 @@ var styles10 = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center"
   },
+  iconWrapperCompact: {
+    width: 36,
+    height: 36,
+    borderRadius: 8
+  },
   textWrapper: {
     alignItems: "center",
     gap: 8,
@@ -558,6 +605,9 @@ var styles10 = StyleSheet.create({
     fontWeight: "500",
     textAlign: "center"
   },
+  titleCompact: {
+    fontSize: 15
+  },
   description: {
     fontSize: 14,
     lineHeight: 20,
@@ -592,7 +642,7 @@ function Textarea({
           borderColor: error ? colors.destructive : focused ? colors.ring : colors.border,
           color: colors.foreground,
           backgroundColor: colors.background,
-          minHeight: rows * 28
+          minHeight: rows * 30
         },
         style
       ],
@@ -612,22 +662,22 @@ function Textarea({
 }
 var styles11 = StyleSheet.create({
   container: {
-    gap: 4
+    gap: 6
   },
   label: {
-    fontSize: 14,
+    fontSize: 15,
     fontWeight: "500",
-    marginBottom: 4
+    marginBottom: 6
   },
   input: {
     borderWidth: 1.5,
-    borderRadius: 8,
-    paddingHorizontal: 16,
-    paddingVertical: 14,
-    fontSize: 16
+    borderRadius: 14,
+    paddingHorizontal: 20,
+    paddingVertical: 16,
+    fontSize: 17
   },
   helperText: {
-    fontSize: 12
+    fontSize: 13
   }
 });
 function Checkbox({
@@ -687,31 +737,32 @@ var styles12 = StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 10
+    gap: 12
   },
   box: {
-    width: 24,
-    height: 24,
-    borderRadius: 6,
+    width: 28,
+    height: 28,
+    borderRadius: 8,
     borderWidth: 1.5,
     alignItems: "center",
     justifyContent: "center"
   },
   checkmark: {
-    width: 13,
-    height: 8,
+    width: 15,
+    height: 9,
     borderLeftWidth: 2,
     borderBottomWidth: 2,
     transform: [{ rotate: "-45deg" }, { translateY: -1 }]
   },
   label: {
-    fontSize: 14,
-    lineHeight: 20
+    fontSize: 15,
+    lineHeight: 22
   }
 });
-var TRACK_WIDTH = 56;
-var TRACK_HEIGHT = 32;
-var THUMB_SIZE = 24;
+var nativeDriver2 = Platform.OS !== "web";
+var TRACK_WIDTH = 60;
+var TRACK_HEIGHT = 36;
+var THUMB_SIZE = 28;
 var THUMB_OFFSET = 4;
 var THUMB_TRAVEL = TRACK_WIDTH - THUMB_SIZE - THUMB_OFFSET * 2;
 function Switch({ checked = false, onCheckedChange, disabled, style }) {
@@ -722,7 +773,7 @@ function Switch({ checked = false, onCheckedChange, disabled, style }) {
     Animated.parallel([
       Animated.spring(translateX, {
         toValue: checked ? THUMB_TRAVEL : 0,
-        useNativeDriver: true,
+        useNativeDriver: nativeDriver2,
         bounciness: 4
       }),
       Animated.timing(trackOpacity, {
@@ -764,11 +815,14 @@ var styles13 = StyleSheet.create({
   track: {
     width: TRACK_WIDTH,
     height: TRACK_HEIGHT,
-    borderRadius: TRACK_HEIGHT / 2,
-    justifyContent: "center",
-    paddingHorizontal: THUMB_OFFSET
+    borderRadius: TRACK_HEIGHT / 2
+    // No justifyContent/alignItems — thumb uses absolute positioning
+    // so the track's flex layout doesn't interfere with translateX animation
   },
   thumb: {
+    position: "absolute",
+    top: THUMB_OFFSET,
+    left: THUMB_OFFSET,
     width: THUMB_SIZE,
     height: THUMB_SIZE,
     borderRadius: THUMB_SIZE / 2,
@@ -791,12 +845,22 @@ function Toggle({
   size = "md",
   label,
   icon,
+  activeIcon,
   disabled,
   style,
   ...props
 }) {
   const { colors } = useTheme();
   const scale = useRef(new Animated.Value(1)).current;
+  const pressAnim = useRef(new Animated.Value(pressed ? 1 : 0)).current;
+  useEffect(() => {
+    Animated.timing(pressAnim, {
+      toValue: pressed ? 1 : 0,
+      duration: 150,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: false
+    }).start();
+  }, [pressed, pressAnim]);
   const handlePressIn = () => {
     if (disabled) return;
     Animated.spring(scale, { toValue: 0.95, useNativeDriver: true, speed: 40, bounciness: 0 }).start();
@@ -804,34 +868,71 @@ function Toggle({
   const handlePressOut = () => {
     Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start();
   };
-  const containerStyle = pressed ? { backgroundColor: colors.accent } : variant === "outline" ? { backgroundColor: "transparent", borderWidth: 1, borderColor: colors.border } : { backgroundColor: "transparent" };
-  const textColor = pressed ? colors.accentForeground : colors.foreground;
+  const borderColor = pressAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [variant === "outline" ? colors.border : "transparent", colors.primary]
+  });
+  const backgroundColor = pressAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["transparent", colors.accent]
+  });
+  const textColor = pressAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [colors.foreground, colors.primary]
+  });
+  const LeftIcon = () => {
+    const renderProp = (prop) => {
+      if (!prop) return null;
+      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"));
+  };
   return /* @__PURE__ */ React23.createElement(Animated.View, { style: { transform: [{ scale }] } }, /* @__PURE__ */ React23.createElement(
-    TouchableOpacity,
+    Animated.View,
     {
-      style: [styles14.base, containerStyle, sizeStyles[size], disabled && styles14.disabled, style],
-      onPress: () => {
-        Haptics11.selectionAsync();
-        onPressedChange?.(!pressed);
-      },
-      onPressIn: handlePressIn,
-      onPressOut: handlePressOut,
-      disabled,
-      activeOpacity: 1,
-      touchSoundDisabled: true,
-      ...props
+      style: [
+        styles14.base,
+        sizeStyles[size],
+        { borderColor, backgroundColor, borderWidth: 2 },
+        disabled && styles14.disabled,
+        style
+      ]
     },
-    icon,
-    label ? /* @__PURE__ */ React23.createElement(Text, { style: [styles14.label, { color: textColor }] }, label) : null
+    /* @__PURE__ */ React23.createElement(
+      TouchableOpacity,
+      {
+        style: styles14.touchable,
+        onPress: () => {
+          Haptics11.selectionAsync();
+          onPressedChange?.(!pressed);
+        },
+        onPressIn: handlePressIn,
+        onPressOut: handlePressOut,
+        disabled,
+        activeOpacity: 1,
+        touchSoundDisabled: true,
+        ...props
+      },
+      /* @__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"
+  },
+  touchable: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    gap: 8
+    gap: 8,
+    flex: 1
   },
   disabled: {
     opacity: 0.45
@@ -839,6 +940,18 @@ 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({
@@ -969,7 +1082,7 @@ function TabTrigger({
       activeOpacity: 1,
       touchSoundDisabled: true
     },
-    /* @__PURE__ */ React23.createElement(Animated.View, { style: { transform: [{ scale }] } }, /* @__PURE__ */ React23.createElement(
+    /* @__PURE__ */ React23.createElement(Animated.View, { style: { transform: [{ scale }] } }, /* @__PURE__ */ React23.createElement(View, { style: styles16.triggerInner }, tab.icon ? /* @__PURE__ */ React23.createElement(View, { style: styles16.triggerIcon }, typeof tab.icon === "function" ? tab.icon(isActive) : tab.icon) : null, /* @__PURE__ */ React23.createElement(
       Text,
       {
         style: [
@@ -979,7 +1092,7 @@ function TabTrigger({
         ]
       },
       tab.label
-    ))
+    )))
   );
 }
 function Tabs({ tabs, value, onValueChange, children, style }) {
@@ -1035,7 +1148,7 @@ function Tabs({ tabs, value, onValueChange, children, style }) {
           bottom: 4,
           left: pillX,
           width: pillWidth,
-          borderRadius: 6,
+          borderRadius: 8,
           shadowColor: "#000",
           shadowOffset: { width: 0, height: 1 },
           shadowOpacity: 0.1,
@@ -1069,22 +1182,33 @@ function TabsContent({ value, activeValue, children, style }) {
 var styles16 = StyleSheet.create({
   list: {
     flexDirection: "row",
-    borderRadius: 8,
+    borderRadius: 12,
     padding: 4,
     gap: 4
   },
   pill: {},
   trigger: {
     flex: 1,
-    paddingVertical: 8,
-    paddingHorizontal: 12,
-    borderRadius: 6,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderRadius: 8,
     alignItems: "center",
     justifyContent: "center",
     zIndex: 1
   },
+  triggerInner: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8
+  },
+  triggerIcon: {
+    marginRight: 6,
+    alignItems: "center",
+    justifyContent: "center"
+  },
   triggerLabel: {
-    fontSize: 14,
+    fontSize: 15,
     fontWeight: "400"
   },
   activeTriggerLabel: {
@@ -1102,7 +1226,7 @@ function AccordionItemComponent({
   const contentHeight = useRef(0);
   const scale = useRef(new Animated.Value(1)).current;
   const toggle = (open) => {
-    const easing = open ? Easing.out(Easing.ease) : Easing.in(Easing.ease);
+    const easing = open ? Easing$1.out(Easing$1.ease) : Easing$1.in(Easing$1.ease);
     animatedHeight.value = withTiming(open ? contentHeight.current : 0, { duration: 220, easing });
     animatedRotation.value = withTiming(open ? 1 : 0, { duration: 220, easing });
   };
@@ -1183,19 +1307,19 @@ var styles17 = StyleSheet.create({
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    paddingVertical: 16
+    paddingVertical: 20
   },
   triggerText: {
-    fontSize: 15,
+    fontSize: 17,
     fontWeight: "500",
     flex: 1
   },
   chevron: {
-    fontSize: 16,
+    fontSize: 18,
     marginLeft: 8
   },
   content: {
-    paddingBottom: 16,
+    paddingBottom: 20,
     position: "absolute",
     width: "100%"
   }
@@ -1504,10 +1628,10 @@ function Select({
 }
 var styles20 = StyleSheet.create({
   container: {
-    gap: 4
+    gap: 6
   },
   label: {
-    fontSize: 14,
+    fontSize: 15,
     fontWeight: "500",
     marginBottom: 2
   },
@@ -1516,24 +1640,24 @@ var styles20 = StyleSheet.create({
     alignItems: "center",
     justifyContent: "space-between",
     borderWidth: 1.5,
-    borderRadius: 8,
-    paddingHorizontal: 16,
-    paddingVertical: 14
+    borderRadius: 14,
+    paddingHorizontal: 20,
+    paddingVertical: 16
   },
   triggerText: {
-    fontSize: 16,
+    fontSize: 17,
     flex: 1
   },
   chevron: {
-    fontSize: 14,
+    fontSize: 16,
     marginLeft: 8
   },
   helperText: {
-    fontSize: 12
+    fontSize: 13
   },
   sheetBackground: {
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24
   },
   sheetHandle: {
     width: 36,
@@ -1541,32 +1665,32 @@ var styles20 = StyleSheet.create({
     borderRadius: 2
   },
   sheetContent: {
-    paddingHorizontal: 16,
-    paddingBottom: 32
+    paddingHorizontal: 20,
+    paddingBottom: 36
   },
   sheetTitle: {
-    fontSize: 16,
+    fontSize: 17,
     fontWeight: "600",
-    paddingVertical: 12,
+    paddingVertical: 16,
     paddingHorizontal: 4
   },
   option: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    paddingHorizontal: 12,
-    paddingVertical: 14,
-    borderRadius: 8
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    borderRadius: 12
   },
   optionText: {
-    fontSize: 15,
+    fontSize: 17,
     flex: 1
   },
   disabledOption: {
     opacity: 0.45
   },
   checkmark: {
-    fontSize: 14,
+    fontSize: 16,
     fontWeight: "600",
     marginLeft: 8
   }
@@ -1588,7 +1712,7 @@ function ToastNotification({ item, onDismiss }) {
   const translateX = useSharedValue(0);
   const opacity = useSharedValue(0);
   useEffect(() => {
-    translateY.value = withTiming(0, { duration: 120, easing: Easing.out(Easing.exp) });
+    translateY.value = withTiming(0, { duration: 120, easing: Easing$1.out(Easing$1.exp) });
     opacity.value = withTiming(1, { duration: 100 });
     const timer = setTimeout(() => {
       translateY.value = withTiming(-80, { duration: 200 });
@@ -1626,7 +1750,8 @@ function ToastNotification({ item, onDismiss }) {
     destructive: colors.destructiveForeground,
     success: colors.successForeground
   }[item.variant ?? "default"];
-  return /* @__PURE__ */ React23.createElement(GestureDetector, { gesture: panGesture }, /* @__PURE__ */ React23.createElement(ReanimatedAnimated.View, { style: [styles21.toast, { backgroundColor: bgColor }, animatedStyle] }, /* @__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 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"))));
 }
 function ToastProvider({ children }) {
   const [toasts, setToasts] = useState([]);
@@ -1658,9 +1783,9 @@ var styles21 = StyleSheet.create({
   toast: {
     flexDirection: "row",
     alignItems: "center",
-    borderRadius: 12,
-    paddingHorizontal: 16,
-    paddingVertical: 12,
+    borderRadius: 16,
+    paddingHorizontal: 20,
+    paddingVertical: 14,
     shadowColor: "#000",
     shadowOffset: { width: 0, height: 4 },
     shadowOpacity: 0.15,
@@ -1671,19 +1796,29 @@ var styles21 = StyleSheet.create({
     flex: 1,
     gap: 4
   },
+  leftIconContainer: {
+    width: 36,
+    alignItems: "center",
+    justifyContent: "center",
+    marginRight: 8
+  },
+  defaultIcon: {
+    fontSize: 22,
+    fontWeight: "700"
+  },
   toastTitle: {
-    fontSize: 14,
+    fontSize: 15,
     fontWeight: "600"
   },
   toastDescription: {
-    fontSize: 13
+    fontSize: 14
   },
   dismissButton: {
     padding: 12,
     marginLeft: 4
   },
   dismissIcon: {
-    fontSize: 12
+    fontSize: 14
   }
 });
 function formatCurrency(raw, separator) {
@@ -1728,5 +1863,388 @@ function CurrencyInput({
     }
   );
 }
+function formatValue(value, prefix, showDecimals) {
+  const num = typeof value === "string" ? parseFloat(value.replace(/[^0-9.-]/g, "")) : value;
+  if (isNaN(num)) return `${prefix}0`;
+  const abs = Math.abs(num);
+  const sign = num < 0 ? "-" : "";
+  const intPart = Math.floor(abs).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+  if (showDecimals) {
+    const decStr = (abs % 1).toFixed(2).slice(2);
+    return `${sign}${prefix}${intPart},${decStr}`;
+  }
+  return `${sign}${prefix}${intPart}`;
+}
+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: textColor ?? colors.foreground }], allowFontScaling: true }, formatted));
+}
+var styles22 = StyleSheet.create({
+  container: {},
+  amount: {
+    fontSize: 56,
+    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
+}) {
+  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,
+      speed: 40,
+      bounciness: 0
+    }).start();
+  };
+  const handlePressOut = () => {
+    Animated.spring(scale, {
+      toValue: 1,
+      useNativeDriver: nativeDriver3,
+      speed: 40,
+      bounciness: 4
+    }).start();
+  };
+  const handlePress = () => {
+    Haptics11.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
+  ));
+}
+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 nativeDriver4 = 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: nativeDriver4,
+      speed: 40,
+      bounciness: 0
+    }).start();
+  };
+  const handlePressOut = () => {
+    Animated.spring(scale, {
+      toValue: 1,
+      useNativeDriver: nativeDriver4,
+      speed: 40,
+      bounciness: 4
+    }).start();
+  };
+  const handlePress = () => {
+    Haptics11.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,
+    {
+      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, style }) {
+  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)
+    }
+  )));
+}
+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 = () => {
+    Haptics11.selectionAsync();
+    if (value.month === 1) {
+      onChange({ month: 12, year: value.year - 1 });
+    } else {
+      onChange({ month: value.month - 1, year: value.year });
+    }
+  };
+  const handleNext = () => {
+    Haptics11.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 }] }, "\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 }] }, "\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, CurrencyInput, 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, 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 };