@retray-dev/ui-kit 1.0.0 → 1.5.0

package/dist/index.mjs

@@ -1,8 +1,11 @@
 import React23, { createContext, useMemo, useContext, useRef, useState, useEffect, useCallback } from 'react';
-import { StyleSheet, useColorScheme, Animated, TouchableOpacity, ActivityIndicator, Text, View, TextInput, Image, PanResponder, Modal, FlatList, Easing } from 'react-native';
-import * as Haptics10 from 'expo-haptics';
+import { StyleSheet, useColorScheme, Animated, TouchableOpacity, ActivityIndicator, Text, View, TextInput, Image, PanResponder } from 'react-native';
+import * as Haptics11 from 'expo-haptics';
+import { LinearGradient } from 'expo-linear-gradient';
+import ReanimatedAnimated, { useSharedValue, useAnimatedStyle, withTiming, Easing, runOnJS, withSpring } from 'react-native-reanimated';
 import { BottomSheetModal, BottomSheetView, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
 export { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 // src/theme/ThemeProvider.tsx
@@ -25,7 +28,9 @@ var defaultLight = {
   destructiveForeground: "#fafafa",
   border: "#e5e5e5",
   input: "#e5e5e5",
-  ring: "#a3a3a3"
+  ring: "#a3a3a3",
+  success: "#16a34a",
+  successForeground: "#ffffff"
 };
 var defaultDark = {
   background: "#171717",
@@ -44,7 +49,9 @@ var defaultDark = {
   destructiveForeground: "#fafafa",
   border: "#2a2a2a",
   input: "#2a2a2a",
-  ring: "#d4d4d4"
+  ring: "#d4d4d4",
+  success: "#22c55e",
+  successForeground: "#ffffff"
 };
 
 // src/theme/ThemeProvider.tsx
@@ -81,6 +88,8 @@ function Button({
   size = "md",
   loading = false,
   fullWidth = false,
+  icon,
+  iconPosition = "left",
   disabled,
   style,
   onPress,
@@ -91,13 +100,18 @@ function Button({
   const scale = useRef(new Animated.Value(1)).current;
   const handlePressIn = () => {
     if (isDisabled) return;
-    Animated.spring(scale, { toValue: 0.97, useNativeDriver: true, speed: 40, bounciness: 0 }).start();
+    Animated.spring(scale, {
+      toValue: 0.95,
+      useNativeDriver: true,
+      speed: 40,
+      bounciness: 0
+    }).start();
   };
   const handlePressOut = () => {
-    Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 2 }).start();
+    Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start();
   };
   const handlePress = (e) => {
-    Haptics10.impactAsync(Haptics10.ImpactFeedbackStyle.Light);
+    Haptics11.impactAsync(Haptics11.ImpactFeedbackStyle.Light);
     onPress?.(e);
   };
   const containerVariantStyle = {
@@ -126,12 +140,13 @@ function Button({
       ],
       disabled: isDisabled,
       activeOpacity: 1,
+      touchSoundDisabled: true,
       onPress: handlePress,
       onPressIn: handlePressIn,
       onPressOut: handlePressOut,
       ...props
     },
-    loading ? /* @__PURE__ */ React23.createElement(ActivityIndicator, { size: "small", color: spinnerColor }) : /* @__PURE__ */ React23.createElement(Text, { style: [styles.label, labelVariantStyle, labelSizeStyles[size]] }, label)
+    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))
   ));
 }
 var styles = StyleSheet.create({
@@ -149,6 +164,9 @@ var styles = StyleSheet.create({
   },
   label: {
     fontWeight: "600"
+  },
+  labelWithIcon: {
+    marginHorizontal: 6
   }
 });
 var variantStyles = {
@@ -172,10 +190,10 @@ function Text2({ variant = "body", color, style, children, ...props }) {
     children
   );
 }
-function Input({ label, error, hint, style, onFocus, onBlur, ...props }) {
+function Input({ label, error, hint, containerStyle, style, onFocus, onBlur, ...props }) {
   const { colors } = useTheme();
   const [focused, setFocused] = useState(false);
-  return /* @__PURE__ */ React23.createElement(View, { style: styles2.container }, label ? /* @__PURE__ */ React23.createElement(Text, { style: [styles2.label, { color: colors.foreground }] }, label) : null, /* @__PURE__ */ React23.createElement(
+  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,
     {
       style: [
@@ -199,7 +217,7 @@ function Input({ label, error, hint, style, onFocus, onBlur, ...props }) {
       allowFontScaling: true,
       ...props
     }
-  ), error ? /* @__PURE__ */ React23.createElement(Text, { style: [styles2.helperText, { color: colors.destructive }] }, error) : null, !error && hint ? /* @__PURE__ */ React23.createElement(Text, { style: [styles2.helperText, { color: colors.mutedForeground }] }, hint) : null);
+  ), error ? /* @__PURE__ */ React23.createElement(Text, { style: [styles2.helperText, { color: colors.destructive }], allowFontScaling: true }, error) : null, !error && hint ? /* @__PURE__ */ React23.createElement(Text, { style: [styles2.helperText, { color: colors.mutedForeground }], allowFontScaling: true }, hint) : null);
 }
 var styles2 = StyleSheet.create({
   container: {
@@ -235,7 +253,7 @@ 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 }] }, label));
+  return /* @__PURE__ */ React23.createElement(View, { style: [styles3.container, containerStyle, style] }, /* @__PURE__ */ React23.createElement(Text, { style: [styles3.label, { color: textColor }], allowFontScaling: true }, label));
 }
 var styles3 = StyleSheet.create({
   container: {
@@ -254,11 +272,7 @@ function Card({ children, style }) {
   return /* @__PURE__ */ React23.createElement(
     View,
     {
-      style: [
-        styles4.card,
-        { backgroundColor: colors.card, borderColor: colors.border },
-        style
-      ]
+      style: [styles4.card, { backgroundColor: colors.card, borderColor: colors.border }, style]
     },
     children
   );
@@ -344,41 +358,53 @@ var sizeMap = {
 };
 function Spinner({ size = "md", color, ...props }) {
   const { colors } = useTheme();
-  return /* @__PURE__ */ React23.createElement(
-    ActivityIndicator,
-    {
-      size: sizeMap[size],
-      color: color ?? colors.primary,
-      ...props
-    }
-  );
+  return /* @__PURE__ */ React23.createElement(ActivityIndicator, { size: sizeMap[size], color: color ?? colors.primary, ...props });
 }
 function Skeleton({ width = "100%", height = 16, borderRadius = 6, style }) {
-  const { colors } = useTheme();
-  const opacity = useRef(new Animated.Value(1)).current;
+  const { colors, colorScheme } = useTheme();
+  const shimmerAnim = useRef(new Animated.Value(0)).current;
+  const [containerWidth, setContainerWidth] = useState(300);
+  const shimmerHighlight = colorScheme === "dark" ? "rgba(255,255,255,0.08)" : "rgba(255,255,255,0.7)";
   useEffect(() => {
     const animation = Animated.loop(
-      Animated.sequence([
-        Animated.timing(opacity, { toValue: 0.4, duration: 800, useNativeDriver: true }),
-        Animated.timing(opacity, { toValue: 1, duration: 800, useNativeDriver: true })
-      ])
+      Animated.timing(shimmerAnim, {
+        toValue: 1,
+        duration: 1200,
+        useNativeDriver: true
+      })
     );
     animation.start();
     return () => animation.stop();
-  }, [opacity]);
+  }, [shimmerAnim]);
+  const translateX = shimmerAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-containerWidth, containerWidth]
+  });
   return /* @__PURE__ */ React23.createElement(
-    Animated.View,
+    View,
     {
       style: [
         styles6.base,
-        { width, height, borderRadius, backgroundColor: colors.muted, opacity },
+        { width, height, borderRadius, backgroundColor: colors.muted },
         style
-      ]
-    }
+      ],
+      onLayout: (e) => setContainerWidth(e.nativeEvent.layout.width)
+    },
+    /* @__PURE__ */ React23.createElement(Animated.View, { style: [StyleSheet.absoluteFill, { transform: [{ translateX }] }] }, /* @__PURE__ */ React23.createElement(
+      LinearGradient,
+      {
+        colors: ["transparent", shimmerHighlight, "transparent"],
+        start: { x: 0, y: 0 },
+        end: { x: 1, y: 0 },
+        style: StyleSheet.absoluteFill
+      }
+    ))
   );
 }
 var styles6 = StyleSheet.create({
-  base: {}
+  base: {
+    overflow: "hidden"
+  }
 });
 var sizeMap2 = {
   sm: 24,
@@ -411,7 +437,13 @@ function Avatar({ src, fallback, size = "md", style }) {
       style: { width: dimension, height: dimension },
       onError: () => setImageError(true)
     }
-  ) : /* @__PURE__ */ React23.createElement(Text, { style: [styles7.fallback, { color: colors.mutedForeground, fontSize: fontSizeMap[size] }] }, fallback?.slice(0, 2).toUpperCase() ?? "?"));
+  ) : /* @__PURE__ */ React23.createElement(
+    Text,
+    {
+      style: [styles7.fallback, { color: colors.mutedForeground, fontSize: fontSizeMap[size] }]
+    },
+    fallback?.slice(0, 2).toUpperCase() ?? "?"
+  ));
 }
 var styles7 = StyleSheet.create({
   base: {
@@ -477,10 +509,7 @@ function Progress({ value = 0, max = 100, style }) {
     /* @__PURE__ */ React23.createElement(
       Animated.View,
       {
-        style: [
-          styles9.indicator,
-          { width: animatedWidth, backgroundColor: colors.primary }
-        ]
+        style: [styles9.indicator, { width: animatedWidth, backgroundColor: colors.primary }]
       }
     )
   );
@@ -537,10 +566,20 @@ var styles10 = StyleSheet.create({
     marginTop: 8
   }
 });
-function Textarea({ label, error, hint, rows = 4, style, onFocus, onBlur, ...props }) {
+function Textarea({
+  label,
+  error,
+  hint,
+  rows = 4,
+  containerStyle,
+  style,
+  onFocus,
+  onBlur,
+  ...props
+}) {
   const { colors } = useTheme();
   const [focused, setFocused] = useState(false);
-  return /* @__PURE__ */ React23.createElement(View, { style: styles11.container }, label ? /* @__PURE__ */ React23.createElement(Text, { style: [styles11.label, { color: colors.foreground }] }, label) : null, /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React23.createElement(View, { style: [styles11.container, containerStyle] }, label ? /* @__PURE__ */ React23.createElement(Text, { style: [styles11.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, /* @__PURE__ */ React23.createElement(
     TextInput,
     {
       multiline: true,
@@ -568,7 +607,7 @@ function Textarea({ label, error, hint, rows = 4, style, onFocus, onBlur, ...pro
       allowFontScaling: true,
       ...props
     }
-  ), error ? /* @__PURE__ */ React23.createElement(Text, { style: [styles11.helperText, { color: colors.destructive }] }, error) : null, !error && hint ? /* @__PURE__ */ React23.createElement(Text, { style: [styles11.helperText, { color: colors.mutedForeground }] }, hint) : null);
+  ), error ? /* @__PURE__ */ React23.createElement(Text, { style: [styles11.helperText, { color: colors.destructive }], allowFontScaling: true }, error) : null, !error && hint ? /* @__PURE__ */ React23.createElement(Text, { style: [styles11.helperText, { color: colors.mutedForeground }], allowFontScaling: true }, hint) : null);
 }
 var styles11 = StyleSheet.create({
   container: {
@@ -590,18 +629,35 @@ var styles11 = StyleSheet.create({
     fontSize: 12
   }
 });
-function Checkbox({ checked = false, onCheckedChange, label, disabled, style }) {
+function Checkbox({
+  checked = false,
+  onCheckedChange,
+  label,
+  disabled,
+  style
+}) {
   const { colors } = useTheme();
-  return /* @__PURE__ */ React23.createElement(
+  const scale = useRef(new Animated.Value(1)).current;
+  const handlePressIn = () => {
+    if (disabled) return;
+    Animated.spring(scale, { toValue: 0.95, useNativeDriver: true, speed: 40, bounciness: 0 }).start();
+  };
+  const handlePressOut = () => {
+    Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start();
+  };
+  return /* @__PURE__ */ React23.createElement(Animated.View, { style: { transform: [{ scale }] } }, /* @__PURE__ */ React23.createElement(
     TouchableOpacity,
     {
       style: [styles12.row, style],
       onPress: () => {
-        Haptics10.selectionAsync();
+        Haptics11.selectionAsync();
         onCheckedChange?.(!checked);
       },
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
       disabled,
-      activeOpacity: 0.7
+      activeOpacity: 1,
+      touchSoundDisabled: true
     },
     /* @__PURE__ */ React23.createElement(
       View,
@@ -617,8 +673,14 @@ function Checkbox({ checked = false, onCheckedChange, label, disabled, style })
       },
       checked ? /* @__PURE__ */ React23.createElement(View, { style: [styles12.checkmark, { borderColor: colors.primaryForeground }] }) : null
     ),
-    label ? /* @__PURE__ */ React23.createElement(Text, { style: [styles12.label, { color: disabled ? colors.mutedForeground : colors.foreground }] }, label) : null
-  );
+    label ? /* @__PURE__ */ React23.createElement(
+      Text,
+      {
+        style: [styles12.label, { color: disabled ? colors.mutedForeground : colors.foreground }]
+      },
+      label
+    ) : null
+  ));
 }
 var styles12 = StyleSheet.create({
   row: {
@@ -677,11 +739,12 @@ function Switch({ checked = false, onCheckedChange, disabled, style }) {
     TouchableOpacity,
     {
       onPress: () => {
-        Haptics10.selectionAsync();
+        Haptics11.selectionAsync();
         onCheckedChange?.(!checked);
       },
       disabled,
       activeOpacity: 0.8,
+      touchSoundDisabled: true,
       style: [styles13.wrapper, { opacity: disabled ? 0.45 : 1 }, style]
     },
     /* @__PURE__ */ React23.createElement(Animated.View, { style: [styles13.track, { backgroundColor: trackColor }] }, /* @__PURE__ */ React23.createElement(
@@ -732,29 +795,34 @@ function Toggle({
   ...props
 }) {
   const { colors } = useTheme();
+  const scale = useRef(new Animated.Value(1)).current;
+  const handlePressIn = () => {
+    if (disabled) return;
+    Animated.spring(scale, { toValue: 0.95, useNativeDriver: true, speed: 40, bounciness: 0 }).start();
+  };
+  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;
-  return /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React23.createElement(Animated.View, { style: { transform: [{ scale }] } }, /* @__PURE__ */ React23.createElement(
     TouchableOpacity,
     {
-      style: [
-        styles14.base,
-        containerStyle,
-        sizeStyles[size],
-        disabled && styles14.disabled,
-        style
-      ],
+      style: [styles14.base, containerStyle, sizeStyles[size], disabled && styles14.disabled, style],
       onPress: () => {
-        Haptics10.selectionAsync();
+        Haptics11.selectionAsync();
         onPressedChange?.(!pressed);
       },
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
       disabled,
-      activeOpacity: 0.7,
+      activeOpacity: 1,
+      touchSoundDisabled: true,
       ...props
     },
     icon,
     label ? /* @__PURE__ */ React23.createElement(Text, { style: [styles14.label, { color: textColor }] }, label) : null
-  );
+  ));
 }
 var styles14 = StyleSheet.create({
   base: {
@@ -772,6 +840,61 @@ var styles14 = StyleSheet.create({
     fontWeight: "500"
   }
 });
+function RadioItem({
+  option,
+  selected,
+  onSelect
+}) {
+  const { colors } = useTheme();
+  const scale = useRef(new Animated.Value(1)).current;
+  const handlePressIn = () => {
+    if (option.disabled) return;
+    Animated.spring(scale, { toValue: 0.95, useNativeDriver: true, speed: 40, bounciness: 0 }).start();
+  };
+  const handlePressOut = () => {
+    Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start();
+  };
+  return /* @__PURE__ */ React23.createElement(Animated.View, { style: { transform: [{ scale }] } }, /* @__PURE__ */ React23.createElement(
+    TouchableOpacity,
+    {
+      style: styles15.row,
+      onPress: () => {
+        if (!option.disabled) {
+          Haptics11.selectionAsync();
+          onSelect();
+        }
+      },
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      activeOpacity: 1,
+      touchSoundDisabled: true,
+      disabled: option.disabled
+    },
+    /* @__PURE__ */ React23.createElement(
+      View,
+      {
+        style: [
+          styles15.radio,
+          {
+            borderColor: selected ? colors.primary : colors.border,
+            opacity: option.disabled ? 0.45 : 1
+          }
+        ]
+      },
+      selected ? /* @__PURE__ */ React23.createElement(View, { style: [styles15.dot, { backgroundColor: colors.primary }] }) : null
+    ),
+    /* @__PURE__ */ React23.createElement(
+      Text,
+      {
+        style: [
+          styles15.label,
+          { color: option.disabled ? colors.mutedForeground : colors.foreground }
+        ]
+      },
+      option.label
+    )
+  ));
+}
 function RadioGroup({
   options,
   value,
@@ -779,58 +902,15 @@ function RadioGroup({
   orientation = "vertical",
   style
 }) {
-  const { colors } = useTheme();
-  return /* @__PURE__ */ React23.createElement(
-    View,
+  return /* @__PURE__ */ React23.createElement(View, { style: [styles15.container, orientation === "horizontal" && styles15.horizontal, style] }, options.map((option) => /* @__PURE__ */ React23.createElement(
+    RadioItem,
     {
-      style: [
-        styles15.container,
-        orientation === "horizontal" && styles15.horizontal,
-        style
-      ]
-    },
-    options.map((option) => {
-      const selected = option.value === value;
-      return /* @__PURE__ */ React23.createElement(
-        TouchableOpacity,
-        {
-          key: option.value,
-          style: styles15.row,
-          onPress: () => {
-            if (!option.disabled) {
-              Haptics10.selectionAsync();
-              onValueChange?.(option.value);
-            }
-          },
-          activeOpacity: 0.7,
-          disabled: option.disabled
-        },
-        /* @__PURE__ */ React23.createElement(
-          View,
-          {
-            style: [
-              styles15.radio,
-              {
-                borderColor: selected ? colors.primary : colors.border,
-                opacity: option.disabled ? 0.45 : 1
-              }
-            ]
-          },
-          selected ? /* @__PURE__ */ React23.createElement(View, { style: [styles15.dot, { backgroundColor: colors.primary }] }) : null
-        ),
-        /* @__PURE__ */ React23.createElement(
-          Text,
-          {
-            style: [
-              styles15.label,
-              { color: option.disabled ? colors.mutedForeground : colors.foreground }
-            ]
-          },
-          option.label
-        )
-      );
-    })
-  );
+      key: option.value,
+      option,
+      selected: option.value === value,
+      onSelect: () => onValueChange?.(option.value)
+    }
+  )));
 }
 var styles15 = StyleSheet.create({
   container: {
@@ -863,6 +943,44 @@ var styles15 = StyleSheet.create({
     lineHeight: 20
   }
 });
+function TabTrigger({
+  tab,
+  isActive,
+  onPress,
+  onLayout
+}) {
+  const { colors } = useTheme();
+  const scale = useRef(new Animated.Value(1)).current;
+  const handlePressIn = () => {
+    Animated.spring(scale, { toValue: 0.95, useNativeDriver: true, speed: 40, bounciness: 0 }).start();
+  };
+  const handlePressOut = () => {
+    Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start();
+  };
+  return /* @__PURE__ */ React23.createElement(
+    TouchableOpacity,
+    {
+      style: styles16.trigger,
+      onPress,
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      onLayout,
+      activeOpacity: 1,
+      touchSoundDisabled: true
+    },
+    /* @__PURE__ */ React23.createElement(Animated.View, { style: { transform: [{ scale }] } }, /* @__PURE__ */ React23.createElement(
+      Text,
+      {
+        style: [
+          styles16.triggerLabel,
+          { color: isActive ? colors.foreground : colors.mutedForeground },
+          isActive && styles16.activeTriggerLabel
+        ]
+      },
+      tab.label
+    ))
+  );
+}
 function Tabs({ tabs, value, onValueChange, children, style }) {
   const [internal, setInternal] = useState(tabs[0]?.value ?? "");
   const { colors } = useTheme();
@@ -876,8 +994,18 @@ function Tabs({ tabs, value, onValueChange, children, style }) {
     if (!layout) return;
     if (animate) {
       Animated.parallel([
-        Animated.spring(pillX, { toValue: layout.x, useNativeDriver: false, speed: 20, bounciness: 0 }),
-        Animated.spring(pillWidth, { toValue: layout.width, useNativeDriver: false, speed: 20, bounciness: 0 })
+        Animated.spring(pillX, {
+          toValue: layout.x,
+          useNativeDriver: false,
+          speed: 20,
+          bounciness: 0
+        }),
+        Animated.spring(pillWidth, {
+          toValue: layout.width,
+          useNativeDriver: false,
+          speed: 20,
+          bounciness: 0
+        })
       ]).start();
     } else {
       pillX.setValue(layout.x);
@@ -890,6 +1018,7 @@ function Tabs({ tabs, value, onValueChange, children, style }) {
     }
   }, [active]);
   const handlePress = (v) => {
+    Haptics11.selectionAsync();
     if (!value) setInternal(v);
     onValueChange?.(v);
   };
@@ -914,37 +1043,23 @@ function Tabs({ tabs, value, onValueChange, children, style }) {
         }
       ]
     }
-  ), tabs.map((tab) => {
-    const isActive = tab.value === active;
-    return /* @__PURE__ */ React23.createElement(
-      TouchableOpacity,
-      {
-        key: tab.value,
-        style: styles16.trigger,
-        onPress: () => handlePress(tab.value),
-        activeOpacity: 0.7,
-        onLayout: (e) => {
-          const { x, width } = e.nativeEvent.layout;
-          tabLayouts.current[tab.value] = { x, width };
-          if (tab.value === active) {
-            animatePill(tab.value, false);
-            initialised.current = true;
-          }
+  ), tabs.map((tab) => /* @__PURE__ */ React23.createElement(
+    TabTrigger,
+    {
+      key: tab.value,
+      tab,
+      isActive: tab.value === active,
+      onPress: () => handlePress(tab.value),
+      onLayout: (e) => {
+        const { x, width } = e.nativeEvent.layout;
+        tabLayouts.current[tab.value] = { x, width };
+        if (tab.value === active) {
+          animatePill(tab.value, false);
+          initialised.current = true;
         }
-      },
-      /* @__PURE__ */ React23.createElement(
-        Text,
-        {
-          style: [
-            styles16.triggerLabel,
-            { color: isActive ? colors.foreground : colors.mutedForeground },
-            isActive && styles16.activeTriggerLabel
-          ]
-        },
-        tab.label
-      )
-    );
-  })), children);
+      }
+    }
+  ))), children);
 }
 function TabsContent({ value, activeValue, children, style }) {
   if (value !== activeValue) return null;
@@ -964,6 +1079,7 @@ var styles16 = StyleSheet.create({
     paddingHorizontal: 12,
     borderRadius: 6,
     alignItems: "center",
+    justifyContent: "center",
     zIndex: 1
   },
   triggerLabel: {
@@ -980,24 +1096,14 @@ function AccordionItemComponent({
   onToggle
 }) {
   const { colors } = useTheme();
-  const animatedHeight = useRef(new Animated.Value(0)).current;
-  const animatedRotation = useRef(new Animated.Value(0)).current;
+  const animatedHeight = useSharedValue(0);
+  const animatedRotation = useSharedValue(0);
   const contentHeight = useRef(0);
+  const scale = useRef(new Animated.Value(1)).current;
   const toggle = (open) => {
-    Animated.parallel([
-      Animated.timing(animatedHeight, {
-        toValue: open ? contentHeight.current : 0,
-        duration: 220,
-        easing: open ? Easing.out(Easing.ease) : Easing.in(Easing.ease),
-        useNativeDriver: false
-      }),
-      Animated.timing(animatedRotation, {
-        toValue: open ? 1 : 0,
-        duration: 220,
-        easing: open ? Easing.out(Easing.ease) : Easing.in(Easing.ease),
-        useNativeDriver: true
-      })
-    ]).start();
+    const easing = open ? Easing.out(Easing.ease) : Easing.in(Easing.ease);
+    animatedHeight.value = withTiming(open ? contentHeight.current : 0, { duration: 220, easing });
+    animatedRotation.value = withTiming(open ? 1 : 0, { duration: 220, easing });
   };
   React23.useEffect(() => {
     toggle(isOpen);
@@ -1005,32 +1111,44 @@ function AccordionItemComponent({
   const onLayout = (e) => {
     if (contentHeight.current === 0) {
       contentHeight.current = e.nativeEvent.layout.height;
-      if (isOpen) animatedHeight.setValue(contentHeight.current);
+      if (isOpen) animatedHeight.value = contentHeight.current;
     }
   };
-  const rotate = animatedRotation.interpolate({
-    inputRange: [0, 1],
-    outputRange: ["0deg", "180deg"]
-  });
-  return /* @__PURE__ */ React23.createElement(View, { style: [styles17.item, { borderBottomColor: colors.border }] }, /* @__PURE__ */ React23.createElement(
+  const heightStyle = useAnimatedStyle(() => ({
+    height: animatedHeight.value,
+    overflow: "hidden"
+  }));
+  const rotationStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${animatedRotation.value * 180}deg` }]
+  }));
+  const handlePressIn = () => {
+    Animated.spring(scale, { toValue: 0.95, useNativeDriver: true, speed: 40, bounciness: 0 }).start();
+  };
+  const handlePressOut = () => {
+    Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start();
+  };
+  return /* @__PURE__ */ React23.createElement(View, { style: [styles17.item, { borderBottomColor: colors.border }] }, /* @__PURE__ */ React23.createElement(Animated.View, { style: { transform: [{ scale }] } }, /* @__PURE__ */ React23.createElement(
     TouchableOpacity,
     {
       style: styles17.trigger,
       onPress: () => {
-        Haptics10.selectionAsync();
+        Haptics11.selectionAsync();
         onToggle();
       },
-      activeOpacity: 0.7
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      activeOpacity: 1,
+      touchSoundDisabled: true
     },
     /* @__PURE__ */ React23.createElement(Text, { style: [styles17.triggerText, { color: colors.foreground }] }, item.trigger),
     /* @__PURE__ */ React23.createElement(
-      Animated.Text,
+      ReanimatedAnimated.Text,
       {
-        style: [styles17.chevron, { color: colors.foreground, transform: [{ rotate }] }]
+        style: [styles17.chevron, { color: colors.foreground }, rotationStyle]
       },
       "\u25BE"
     )
-  ), /* @__PURE__ */ React23.createElement(Animated.View, { style: [styles17.contentWrapper, { height: animatedHeight, overflow: "hidden" }] }, /* @__PURE__ */ React23.createElement(View, { style: styles17.content, onLayout }, item.content)));
+  )), /* @__PURE__ */ React23.createElement(ReanimatedAnimated.View, { style: heightStyle }, /* @__PURE__ */ React23.createElement(View, { style: styles17.content, onLayout }, item.content)));
 }
 function Accordion({ items, type = "single", defaultValue, style }) {
   const [openValues, setOpenValues] = useState(() => {
@@ -1075,7 +1193,6 @@ var styles17 = StyleSheet.create({
     fontSize: 16,
     marginLeft: 8
   },
-  contentWrapper: {},
   content: {
     paddingBottom: 16,
     position: "absolute",
@@ -1122,7 +1239,7 @@ function Slider({
         const newValue = xToValue(x);
         if (newValue !== lastSteppedValue.current) {
           lastSteppedValue.current = newValue;
-          Haptics10.selectionAsync();
+          Haptics11.selectionAsync();
         }
         setInternalValue(newValue);
         onValueChange?.(newValue);
@@ -1149,10 +1266,7 @@ function Slider({
     /* @__PURE__ */ React23.createElement(View, { style: [styles18.track, { backgroundColor: colors.muted }] }, /* @__PURE__ */ React23.createElement(
       View,
       {
-        style: [
-          styles18.range,
-          { width: `${percent}%`, backgroundColor: colors.primary }
-        ]
+        style: [styles18.range, { width: `${percent}%`, backgroundColor: colors.primary }]
       }
     )),
     /* @__PURE__ */ React23.createElement(
@@ -1217,7 +1331,7 @@ function Sheet({
   const ref = useRef(null);
   useEffect(() => {
     if (open) {
-      Haptics10.impactAsync(Haptics10.ImpactFeedbackStyle.Light);
+      Haptics11.impactAsync(Haptics11.ImpactFeedbackStyle.Light);
       ref.current?.present();
     } else {
       ref.current?.dismiss();
@@ -1284,26 +1398,49 @@ function Select({
   style
 }) {
   const { colors } = useTheme();
-  const [open, setOpen] = useState(false);
+  const bottomSheetRef = useRef(null);
+  const scale = useRef(new Animated.Value(1)).current;
   const selected = options.find((o) => o.value === value);
-  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(
+  const handlePressIn = () => {
+    if (disabled) return;
+    Animated.spring(scale, { toValue: 0.95, useNativeDriver: true, speed: 40, bounciness: 0 }).start();
+  };
+  const handlePressOut = () => {
+    Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start();
+  };
+  const handleOpen = () => {
+    if (!disabled) {
+      Haptics11.selectionAsync();
+      bottomSheetRef.current?.present();
+    }
+  };
+  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(
     TouchableOpacity,
     {
       style: [
         styles20.trigger,
         {
           borderColor: error ? colors.destructive : colors.border,
-          backgroundColor: colors.background,
-          opacity: disabled ? 0.45 : 1
+          backgroundColor: colors.background
         }
       ],
-      onPress: () => {
-        if (!disabled) {
-          Haptics10.selectionAsync();
-          setOpen(true);
-        }
-      },
-      activeOpacity: 0.7
+      onPress: handleOpen,
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      activeOpacity: 1,
+      touchSoundDisabled: true
     },
     /* @__PURE__ */ React23.createElement(
       Text,
@@ -1317,46 +1454,52 @@ function Select({
       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(Modal, { transparent: true, visible: open, onRequestClose: () => setOpen(false), animationType: "fade" }, /* @__PURE__ */ React23.createElement(TouchableOpacity, { style: styles20.overlay, onPress: () => setOpen(false), activeOpacity: 1 }, /* @__PURE__ */ React23.createElement(View, { style: [styles20.list, { backgroundColor: colors.card, borderColor: colors.border }] }, /* @__PURE__ */ React23.createElement(
-    FlatList,
+  )), error ? /* @__PURE__ */ React23.createElement(Text, { style: [styles20.helperText, { color: colors.destructive }] }, error) : null, /* @__PURE__ */ React23.createElement(
+    BottomSheetModal,
     {
-      data: options,
-      keyExtractor: (item) => item.value,
-      renderItem: ({ item }) => {
-        const isSelected = item.value === value;
-        return /* @__PURE__ */ React23.createElement(
-          TouchableOpacity,
+      ref: bottomSheetRef,
+      enableDynamicSizing: true,
+      enablePanDownToClose: true,
+      backdropComponent: renderBackdrop,
+      backgroundStyle: [styles20.sheetBackground, { backgroundColor: colors.card }],
+      handleIndicatorStyle: [styles20.sheetHandle, { backgroundColor: colors.border }]
+    },
+    /* @__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,
+        {
+          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.option,
-              isSelected && { backgroundColor: colors.accent },
-              item.disabled && styles20.disabledOption
-            ],
-            onPress: () => {
-              if (!item.disabled) {
-                Haptics10.selectionAsync();
-                onValueChange?.(item.value);
-                setOpen(false);
-              }
-            },
-            activeOpacity: 0.7
+              styles20.optionText,
+              { color: item.disabled ? colors.mutedForeground : colors.foreground },
+              isSelected && { fontWeight: "500" }
+            ]
           },
-          /* @__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
-        );
-      }
-    }
-  )))));
+          item.label
+        ),
+        isSelected ? /* @__PURE__ */ React23.createElement(Text, { style: [styles20.checkmark, { color: colors.primary }] }, "\u2713") : null
+      );
+    }))
+  ));
 }
 var styles20 = StyleSheet.create({
   container: {
@@ -1387,34 +1530,44 @@ var styles20 = StyleSheet.create({
   helperText: {
     fontSize: 12
   },
-  overlay: {
-    flex: 1,
-    backgroundColor: "rgba(0,0,0,0.3)",
-    justifyContent: "center",
-    padding: 24
+  sheetBackground: {
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16
   },
-  list: {
-    borderRadius: 12,
-    borderWidth: 1,
-    maxHeight: 300,
-    overflow: "hidden"
+  sheetHandle: {
+    width: 36,
+    height: 4,
+    borderRadius: 2
+  },
+  sheetContent: {
+    paddingHorizontal: 16,
+    paddingBottom: 32
+  },
+  sheetTitle: {
+    fontSize: 16,
+    fontWeight: "600",
+    paddingVertical: 12,
+    paddingHorizontal: 4
   },
   option: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
     paddingHorizontal: 12,
-    paddingVertical: 10
+    paddingVertical: 14,
+    borderRadius: 8
   },
   optionText: {
-    fontSize: 15
+    fontSize: 15,
+    flex: 1
   },
   disabledOption: {
     opacity: 0.45
   },
   checkmark: {
     fontSize: 14,
-    fontWeight: "600"
+    fontWeight: "600",
+    marginLeft: 8
   }
 });
 var ToastContext = createContext({
@@ -1426,41 +1579,53 @@ var ToastContext = createContext({
 function useToast() {
   return useContext(ToastContext);
 }
+var SWIPE_THRESHOLD = 80;
+var VELOCITY_THRESHOLD = 800;
 function ToastNotification({ item, onDismiss }) {
   const { colors } = useTheme();
-  const translateY = useRef(new Animated.Value(-80)).current;
-  const opacity = useRef(new Animated.Value(0)).current;
+  const translateY = useSharedValue(-80);
+  const translateX = useSharedValue(0);
+  const opacity = useSharedValue(0);
   useEffect(() => {
-    Animated.parallel([
-      Animated.spring(translateY, { toValue: 0, useNativeDriver: true, bounciness: 2 }),
-      Animated.timing(opacity, { toValue: 1, duration: 200, useNativeDriver: true })
-    ]).start();
+    translateY.value = withTiming(0, { duration: 120, easing: Easing.out(Easing.exp) });
+    opacity.value = withTiming(1, { duration: 100 });
     const timer = setTimeout(() => {
-      Animated.parallel([
-        Animated.timing(translateY, { toValue: -80, duration: 200, useNativeDriver: true }),
-        Animated.timing(opacity, { toValue: 0, duration: 200, useNativeDriver: true })
-      ]).start(onDismiss);
+      translateY.value = withTiming(-80, { duration: 200 });
+      opacity.value = withTiming(0, { duration: 200 }, (done) => {
+        if (done) runOnJS(onDismiss)();
+      });
     }, item.duration ?? 3e3);
     return () => clearTimeout(timer);
   }, []);
+  const panGesture = Gesture.Pan().onUpdate((e) => {
+    translateX.value = e.translationX;
+  }).onEnd((e) => {
+    const shouldDismiss = Math.abs(translateX.value) > SWIPE_THRESHOLD || Math.abs(e.velocityX) > VELOCITY_THRESHOLD;
+    if (shouldDismiss) {
+      const direction = translateX.value > 0 ? 1 : -1;
+      translateX.value = withTiming(direction * 500, { duration: 200 }, (done) => {
+        if (done) runOnJS(onDismiss)();
+      });
+      opacity.value = withTiming(0, { duration: 150 });
+    } else {
+      translateX.value = withSpring(0, { damping: 20, stiffness: 300 });
+    }
+  });
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+    transform: [{ translateY: translateY.value }, { translateX: translateX.value }]
+  }));
   const bgColor = {
     default: colors.foreground,
     destructive: colors.destructive,
-    success: "#16a34a"
+    success: colors.success
   }[item.variant ?? "default"];
   const textColor = {
     default: colors.background,
     destructive: colors.destructiveForeground,
-    success: "#ffffff"
+    success: colors.successForeground
   }[item.variant ?? "default"];
-  return /* @__PURE__ */ React23.createElement(
-    Animated.View,
-    {
-      style: [styles21.toast, { backgroundColor: bgColor, opacity, transform: [{ translateY }] }]
-    },
-    /* @__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 }, /* @__PURE__ */ React23.createElement(Text, { style: [styles21.dismissIcon, { color: textColor }] }, "\u2715"))
-  );
+  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"))));
 }
 function ToastProvider({ children }) {
   const [toasts, setToasts] = useState([]);
@@ -1468,11 +1633,11 @@ function ToastProvider({ children }) {
   const toast = useCallback((item) => {
     const id = Math.random().toString(36).slice(2);
     if (item.variant === "success") {
-      Haptics10.notificationAsync(Haptics10.NotificationFeedbackType.Success);
+      Haptics11.notificationAsync(Haptics11.NotificationFeedbackType.Success);
     } else if (item.variant === "destructive") {
-      Haptics10.notificationAsync(Haptics10.NotificationFeedbackType.Error);
+      Haptics11.notificationAsync(Haptics11.NotificationFeedbackType.Error);
     } else {
-      Haptics10.impactAsync(Haptics10.ImpactFeedbackStyle.Light);
+      Haptics11.impactAsync(Haptics11.ImpactFeedbackStyle.Light);
     }
     setToasts((prev) => [{ ...item, id }, ...prev].slice(0, 3));
   }, []);
@@ -1513,8 +1678,8 @@ var styles21 = StyleSheet.create({
     fontSize: 13
   },
   dismissButton: {
-    padding: 4,
-    marginLeft: 8
+    padding: 12,
+    marginLeft: 4
   },
   dismissIcon: {
     fontSize: 12