@retray-dev/ui-kit 6.0.0 → 6.2.0

package/dist/index.mjs

@@ -1,5 +1,6 @@
-import React26, { createContext, useMemo, useContext, useRef, useState, useEffect, useCallback } from 'react';
-import { Platform, StyleSheet, Dimensions, useColorScheme, Animated, TouchableOpacity, ActivityIndicator, Text, View, TextInput, Easing as Easing$1, Image, Modal, ScrollView, Pressable } from 'react-native';
+import React26, { createContext, useMemo, useContext, useState, useEffect, useRef, useCallback } from 'react';
+import { Platform, StyleSheet, Dimensions, useColorScheme, TouchableOpacity, ActivityIndicator, Text, View, TextInput, Image, Modal, ScrollView, Pressable } from 'react-native';
+import Animated9, { Easing, useAnimatedStyle, interpolateColor, useSharedValue, withRepeat, withTiming, withSpring, useDerivedValue } from 'react-native-reanimated';
 import { verticalScale, scale, moderateVerticalScale, moderateScale } from 'react-native-size-matters';
 import AntDesign from '@expo/vector-icons/AntDesign';
 import Entypo from '@expo/vector-icons/Entypo';
@@ -9,7 +10,6 @@ import MaterialIcons from '@expo/vector-icons/MaterialIcons';
 import Ionicons from '@expo/vector-icons/Ionicons';
 import { AntDesign as AntDesign$1, FontAwesome5 as FontAwesome5$1, MaterialIcons as MaterialIcons$1, Entypo as Entypo$1, Feather as Feather$1 } from '@expo/vector-icons';
 import { LinearGradient } from 'expo-linear-gradient';
-import Animated12, { Easing, useSharedValue, useDerivedValue, withTiming, useAnimatedStyle } from 'react-native-reanimated';
 import RNSlider from '@react-native-community/slider';
 import { BottomSheetBackdrop, BottomSheetFooter, BottomSheetModal, BottomSheetScrollView, BottomSheetView } from '@gorhom/bottom-sheet';
 export { BottomSheetModalProvider, BottomSheetTextInput as SheetTextInput } from '@gorhom/bottom-sheet';
@@ -407,9 +407,87 @@ var TYPOGRAPHY = {
     letterSpacing: 0
   }
 };
+var SPRINGS = {
+  /** Tight, premium press feel — Buttons, Toggle, Tabs triggers. */
+  pressIn: { stiffness: 600, damping: 35, mass: 0.8 },
+  pressOut: { stiffness: 280, damping: 22, mass: 0.8 },
+  /** Slightly softer for larger surfaces — Card, ListItem, MenuItem. */
+  surfacePressIn: { stiffness: 380, damping: 30, mass: 0.95 },
+  surfacePressOut: { stiffness: 220, damping: 20, mass: 0.95 },
+  /** Settled transitions for moving indicators — Tabs pill, Switch thumb. */
+  glide: { stiffness: 380, damping: 38, mass: 1 },
+  /** Elastic indicator — Switch thumb, RadioGroup dot. */
+  elastic: { stiffness: 320, damping: 22, mass: 0.7 }
+};
+var TIMINGS = {
+  /** Color/opacity transitions on toggles, checkboxes, switches. */
+  state: { duration: 160 },
+  /** Focus ring on inputs. */
+  focusIn: { duration: 140 },
+  focusOut: { duration: 100 },
+  /** Accordion / collapsible content. */
+  expand: { duration: 240 },
+  collapse: { duration: 200 },
+  /** Skeleton shimmer cycle (full pass). */
+  shimmer: { duration: 1400 }
+};
+var EASINGS = {
+  /** Material-style ease-out — natural deceleration for state changes. */
+  standard: Easing.bezier(0.2, 0, 0, 1),
+  /** Strong ease-out for expanding surfaces (Accordion open). */
+  expand: Easing.bezier(0.23, 1, 0.32, 1),
+  /** Quick ease-in for collapsing. */
+  collapse: Easing.in(Easing.ease)
+};
+var PRESS_SCALE = {
+  button: 0.95,
+  card: 0.98,
+  row: 0.97,
+  chip: 0.94
+};
+function useHover() {
+  const [hovered, setHovered] = useState(false);
+  const onMouseEnter = useCallback(() => setHovered(true), []);
+  const onMouseLeave = useCallback(() => setHovered(false), []);
+  if (Platform.OS !== "web") {
+    return { hovered: false, hoverHandlers: {} };
+  }
+  return { hovered, hoverHandlers: { onMouseEnter, onMouseLeave } };
+}
+
+// src/utils/usePressScale.ts
+function usePressScale({
+  pressScale = PRESS_SCALE.button,
+  hoverScale = 1.02,
+  pressInSpring = SPRINGS.pressIn,
+  pressOutSpring = SPRINGS.pressOut,
+  disabled = false
+} = {}) {
+  const scale2 = useSharedValue(1);
+  const { hovered, hoverHandlers } = useHover();
+  const onPressIn = useCallback(() => {
+    if (disabled) return;
+    scale2.value = withSpring(pressScale, pressInSpring);
+  }, [disabled, pressScale, pressInSpring, scale2]);
+  const onPressOut = useCallback(() => {
+    if (disabled) return;
+    scale2.value = withSpring(1, pressOutSpring);
+  }, [disabled, pressOutSpring, scale2]);
+  const hoverActive = Platform.OS === "web" && hovered && hoverScale !== 1 && !disabled;
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      { scale: scale2.value * (hoverActive ? hoverScale : 1) }
+    ]
+  }));
+  return {
+    animatedStyle,
+    onPressIn,
+    onPressOut,
+    hoverHandlers
+  };
+}
 
 // src/components/Button/Button.tsx
-var nativeDriver = Platform.OS !== "web";
 var containerSizeStyles = {
   sm: { paddingHorizontal: s(16), paddingVertical: vs(10), minHeight: 40 },
   md: { paddingHorizontal: s(24), paddingVertical: vs(14), minHeight: 48 },
@@ -434,18 +512,16 @@ function Button({
   disabled,
   style,
   onPress,
+  accessibilityLabel,
+  accessibilityHint,
   ...props
 }) {
   const { colors } = useTheme();
   const isDisabled = disabled || loading;
-  const scale2 = useRef(new Animated.Value(1)).current;
-  const handlePressIn = () => {
-    if (isDisabled) return;
-    Animated.spring(scale2, { toValue: 0.95, useNativeDriver: nativeDriver, stiffness: 600, damping: 35, mass: 0.8 }).start();
-  };
-  const handlePressOut = () => {
-    Animated.spring(scale2, { toValue: 1, useNativeDriver: nativeDriver, stiffness: 280, damping: 22, mass: 0.8 }).start();
-  };
+  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
+    pressScale: PRESS_SCALE.button,
+    disabled: isDisabled
+  });
   const handlePress = (e) => {
     impactMedium();
     onPress?.(e);
@@ -468,43 +544,54 @@ function Button({
   const styleArray = Array.isArray(style) ? style : style ? [style] : [];
   const flatStyle = StyleSheet.flatten(styleArray);
   const { flex, ...restStyle } = flatStyle || {};
-  return /* @__PURE__ */ React26.createElement(Animated.View, { style: [fullWidth && styles.fullWidth, flex !== void 0 && { flex }, { transform: [{ scale: scale2 }] }] }, /* @__PURE__ */ React26.createElement(
-    TouchableOpacity,
+  return /* @__PURE__ */ React26.createElement(
+    Animated9.View,
     {
-      style: [
-        styles.base,
-        containerVariantStyle,
-        containerSizeStyles[size],
-        fullWidth && styles.fullWidth,
-        isDisabled && styles.disabled,
-        restStyle
-      ],
-      disabled: isDisabled,
-      activeOpacity: 1,
-      touchSoundDisabled: true,
-      onPress: handlePress,
-      onPressIn: handlePressIn,
-      onPressOut: handlePressOut,
-      ...props
+      style: [fullWidth && styles.fullWidth, flex !== void 0 && { flex }, animatedStyle],
+      ...hoverHandlers
     },
-    loading ? /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(ActivityIndicator, { size: "small", color: spinnerColor, style: { marginRight: s(6) } }), /* @__PURE__ */ React26.createElement(
-      Text,
-      {
-        style: [styles.label, labelVariantStyle, labelSizeStyles[size], styles.labelLoading],
-        allowFontScaling: true,
-        numberOfLines: 1
-      },
-      label
-    )) : /* @__PURE__ */ React26.createElement(React26.Fragment, null, effectiveIcon && iconPosition === "left" && /* @__PURE__ */ React26.createElement(React26.Fragment, null, effectiveIcon), /* @__PURE__ */ React26.createElement(
-      Text,
+    /* @__PURE__ */ React26.createElement(
+      TouchableOpacity,
       {
-        style: [styles.label, labelVariantStyle, labelSizeStyles[size], effectiveIcon ? styles.labelWithIcon : void 0],
-        allowFontScaling: true,
-        numberOfLines: 1
+        style: [
+          styles.base,
+          containerVariantStyle,
+          containerSizeStyles[size],
+          fullWidth && styles.fullWidth,
+          isDisabled && styles.disabled,
+          restStyle
+        ],
+        disabled: isDisabled,
+        activeOpacity: 1,
+        touchSoundDisabled: true,
+        onPress: handlePress,
+        onPressIn,
+        onPressOut,
+        accessibilityRole: "button",
+        accessibilityLabel: accessibilityLabel ?? label,
+        accessibilityHint,
+        accessibilityState: { disabled: isDisabled, busy: loading },
+        ...props
       },
-      label
-    ), effectiveIcon && iconPosition === "right" && /* @__PURE__ */ React26.createElement(React26.Fragment, null, effectiveIcon))
-  ));
+      loading ? /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(ActivityIndicator, { size: "small", color: spinnerColor, style: { marginRight: s(6) } }), /* @__PURE__ */ React26.createElement(
+        Text,
+        {
+          style: [styles.label, labelVariantStyle, labelSizeStyles[size], styles.labelLoading],
+          allowFontScaling: true,
+          numberOfLines: 1
+        },
+        label
+      )) : /* @__PURE__ */ React26.createElement(React26.Fragment, null, effectiveIcon && iconPosition === "left" && /* @__PURE__ */ React26.createElement(React26.Fragment, null, effectiveIcon), /* @__PURE__ */ React26.createElement(
+        Text,
+        {
+          style: [styles.label, labelVariantStyle, labelSizeStyles[size], effectiveIcon ? styles.labelWithIcon : void 0],
+          allowFontScaling: true,
+          numberOfLines: 1
+        },
+        label
+      ), effectiveIcon && iconPosition === "right" && /* @__PURE__ */ React26.createElement(React26.Fragment, null, effectiveIcon))
+    )
+  );
 }
 var styles = StyleSheet.create({
   base: {
@@ -564,7 +651,6 @@ var styles2 = StyleSheet.create({
     flexDirection: "column"
   }
 });
-var nativeDriver2 = Platform.OS !== "web";
 var sizeMap = {
   sm: { container: s(32), icon: 16 },
   md: { container: s(44), icon: 20 },
@@ -581,18 +667,16 @@ function IconButton({
   disabled,
   style,
   onPress,
+  accessibilityLabel,
+  accessibilityHint,
   ...props
 }) {
   const { colors } = useTheme();
   const isDisabled = disabled || loading;
-  const scale2 = useRef(new Animated.Value(1)).current;
-  const handlePressIn = () => {
-    if (isDisabled) return;
-    Animated.spring(scale2, { toValue: 0.95, useNativeDriver: nativeDriver2, speed: 40, bounciness: 0 }).start();
-  };
-  const handlePressOut = () => {
-    Animated.spring(scale2, { toValue: 1, useNativeDriver: nativeDriver2, speed: 40, bounciness: 4 }).start();
-  };
+  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
+    pressScale: PRESS_SCALE.button,
+    disabled: isDisabled
+  });
   const handlePress = (e) => {
     impactLight();
     onPress?.(e);
@@ -617,30 +701,42 @@ function IconButton({
   const showBadge = badge !== void 0 && badge !== false && badge !== 0;
   const badgeCount = typeof badge === "number" ? Math.min(badge, 99) : null;
   const showCount = typeof badge === "number" && badge > 0;
-  return /* @__PURE__ */ React26.createElement(Animated.View, { style: [styles3.wrapper, { transform: [{ scale: scale2 }] }] }, /* @__PURE__ */ React26.createElement(
-    TouchableOpacity,
+  return /* @__PURE__ */ React26.createElement(
+    Animated9.View,
     {
-      style: [
-        styles3.base,
-        containerVariantStyle,
-        { width: containerSize, height: containerSize },
-        isDisabled && styles3.disabled,
-        style
-      ],
-      disabled: isDisabled,
-      activeOpacity: 1,
-      touchSoundDisabled: true,
-      onPress: handlePress,
-      onPressIn: handlePressIn,
-      onPressOut: handlePressOut,
-      ...props
+      style: [styles3.wrapper, animatedStyle],
+      ...hoverHandlers
     },
-    loading ? /* @__PURE__ */ React26.createElement(ActivityIndicator, { size: "small", color: spinnerColor }) : resolvedIcon
-  ), showBadge && /* @__PURE__ */ React26.createElement(View, { style: [
-    styles3.badge,
-    { backgroundColor: colors.primary },
-    showCount ? styles3.badgeCount : styles3.badgeDot
-  ] }, showCount && /* @__PURE__ */ React26.createElement(Text, { style: [styles3.badgeText, { color: colors.primaryForeground }] }, badgeCount)));
+    /* @__PURE__ */ React26.createElement(
+      TouchableOpacity,
+      {
+        style: [
+          styles3.base,
+          containerVariantStyle,
+          { width: containerSize, height: containerSize },
+          isDisabled && styles3.disabled,
+          style
+        ],
+        disabled: isDisabled,
+        activeOpacity: 1,
+        touchSoundDisabled: true,
+        onPress: handlePress,
+        onPressIn,
+        onPressOut,
+        accessibilityRole: "button",
+        accessibilityLabel: accessibilityLabel ?? iconName ?? "icon button",
+        accessibilityHint,
+        accessibilityState: { disabled: isDisabled, busy: loading },
+        ...props
+      },
+      loading ? /* @__PURE__ */ React26.createElement(ActivityIndicator, { size: "small", color: spinnerColor }) : resolvedIcon
+    ),
+    showBadge && /* @__PURE__ */ React26.createElement(View, { style: [
+      styles3.badge,
+      { backgroundColor: colors.primary },
+      showCount ? styles3.badgeCount : styles3.badgeDot
+    ] }, showCount && /* @__PURE__ */ React26.createElement(Text, { style: [styles3.badgeText, { color: colors.primaryForeground }] }, badgeCount))
+  );
 }
 var styles3 = StyleSheet.create({
   wrapper: {
@@ -729,29 +825,49 @@ function Text3({ variant = "body-md", color, style, children, ...props }) {
     children
   );
 }
+function useColorTransition(active, options = {}) {
+  const { duration = TIMINGS.state.duration } = options;
+  const progress = useSharedValue(active ? 1 : 0);
+  useEffect(() => {
+    progress.value = withTiming(active ? 1 : 0, { duration, easing: EASINGS.standard });
+  }, [active, duration, progress]);
+  return progress;
+}
+
+// src/components/Input/Input.tsx
 var webInputResetStyle = Platform.OS === "web" ? { outlineStyle: "none", outlineWidth: 0, outlineColor: "transparent", boxShadow: "none" } : {};
-function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = "text", containerStyle, inputWrapperStyle, style, onFocus, onBlur, secureTextEntry, editable, ...props }) {
+function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = "text", containerStyle, inputWrapperStyle, style, onFocus, onBlur, secureTextEntry, editable, accessibilityLabel, ...props }) {
   const { colors } = useTheme();
   const [focused, setFocused] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
-  const focusAnim = useRef(new Animated.Value(0)).current;
+  const focusProgress = useColorTransition(focused, {
+    duration: focused ? TIMINGS.focusIn.duration : TIMINGS.focusOut.duration
+  });
   const isDisabled = disabled || editable === false;
   const isPassword = type === "password";
   const effectiveSecure = isPassword ? !showPassword : secureTextEntry;
   const effectivePrefix = prefixIcon ? renderIcon(prefixIcon, 20, prefixIconColor ?? colors.foregroundMuted) : prefix;
-  const effectiveSuffix = isPassword && !suffix && !suffixIcon ? /* @__PURE__ */ React26.createElement(TouchableOpacity, { onPress: () => setShowPassword(!showPassword), style: styles4.passwordToggle, activeOpacity: 0.6 }, /* @__PURE__ */ React26.createElement(AntDesign$1, { name: showPassword ? "eye" : "eye-invisible", size: 20, color: colors.foregroundMuted })) : suffixIcon ? renderIcon(suffixIcon, 20, suffixIconColor ?? colors.foregroundMuted) : suffix;
+  const effectiveSuffix = isPassword && !suffix && !suffixIcon ? /* @__PURE__ */ React26.createElement(
+    TouchableOpacity,
+    {
+      onPress: () => setShowPassword(!showPassword),
+      style: styles4.passwordToggle,
+      activeOpacity: 0.6,
+      accessibilityRole: "button",
+      accessibilityLabel: showPassword ? "Hide password" : "Show password"
+    },
+    /* @__PURE__ */ React26.createElement(AntDesign$1, { name: showPassword ? "eye" : "eye-invisible", size: 20, color: colors.foregroundMuted })
+  ) : suffixIcon ? renderIcon(suffixIcon, 20, suffixIconColor ?? colors.foregroundMuted) : suffix;
+  const borderColorStyle = useAnimatedStyle(() => ({
+    borderColor: error ? colors.destructive : interpolateColor(focusProgress.value, [0, 1], [colors.border, colors.primary])
+  }));
   return /* @__PURE__ */ React26.createElement(View, { style: [styles4.container, isDisabled && styles4.containerDisabled, containerStyle] }, label ? /* @__PURE__ */ React26.createElement(Text, { style: [styles4.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, /* @__PURE__ */ React26.createElement(
-    Animated.View,
+    Animated9.View,
     {
       style: [
         styles4.inputWrapper,
-        {
-          borderColor: error ? colors.destructive : focusAnim.interpolate({
-            inputRange: [0, 1],
-            outputRange: [colors.border, colors.primary]
-          }),
-          backgroundColor: isDisabled ? colors.surface : colors.background
-        },
+        { backgroundColor: isDisabled ? colors.surface : colors.background },
+        borderColorStyle,
         inputWrapperStyle
       ]
     },
@@ -761,31 +877,36 @@ function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suff
       {
         style: [
           styles4.input,
-          {
-            color: colors.foreground
-          },
+          { color: colors.foreground },
           webInputResetStyle,
           style
         ],
         onFocus: (e) => {
           setFocused(true);
-          Animated.timing(focusAnim, { toValue: 1, duration: 120, easing: Easing$1.out(Easing$1.ease), useNativeDriver: false }).start();
           onFocus?.(e);
         },
         onBlur: (e) => {
           setFocused(false);
-          Animated.timing(focusAnim, { toValue: 0, duration: 80, easing: Easing$1.out(Easing$1.ease), useNativeDriver: false }).start();
           onBlur?.(e);
         },
         placeholderTextColor: colors.foregroundMuted,
         allowFontScaling: true,
         secureTextEntry: effectiveSecure,
         editable: isDisabled ? false : editable,
+        accessibilityLabel: accessibilityLabel ?? label,
         ...props
       }
     ),
     effectiveSuffix ? typeof effectiveSuffix === "string" ? /* @__PURE__ */ React26.createElement(Text, { style: [styles4.suffixText, { color: colors.foregroundMuted }, suffixStyle], allowFontScaling: true }, effectiveSuffix) : /* @__PURE__ */ React26.createElement(View, { style: styles4.suffixContainer }, effectiveSuffix) : null
-  ), error ? /* @__PURE__ */ React26.createElement(Text, { style: [styles4.helperText, { color: colors.destructive }], allowFontScaling: true }, error) : null, !error && hint ? /* @__PURE__ */ React26.createElement(Text, { style: [styles4.helperText, { color: colors.foregroundMuted }], allowFontScaling: true }, hint) : null);
+  ), error ? /* @__PURE__ */ React26.createElement(
+    Text,
+    {
+      style: [styles4.helperText, { color: colors.destructive }],
+      allowFontScaling: true,
+      accessibilityLiveRegion: "polite"
+    },
+    error
+  ) : null, !error && hint ? /* @__PURE__ */ React26.createElement(Text, { style: [styles4.helperText, { color: colors.foregroundMuted }], allowFontScaling: true }, hint) : null);
 }
 var styles4 = StyleSheet.create({
   container: {
@@ -797,7 +918,6 @@ var styles4 = StyleSheet.create({
   label: {
     fontFamily: "Poppins-Medium",
     fontSize: ms(14)
-    // caption size for input labels
   },
   inputWrapper: {
     flexDirection: "row",
@@ -894,30 +1014,14 @@ var styles5 = StyleSheet.create({
     fontFamily: "Poppins-Medium"
   }
 });
-var nativeDriver3 = Platform.OS !== "web";
-function Card({ children, variant = "elevated", onPress, style }) {
+function Card({ children, variant = "elevated", onPress, style, accessibilityLabel }) {
   const { colors } = useTheme();
-  const scale2 = useRef(new Animated.Value(1)).current;
-  const handlePressIn = () => {
-    if (!onPress) return;
-    Animated.spring(scale2, {
-      toValue: 0.98,
-      useNativeDriver: nativeDriver3,
-      stiffness: 400,
-      damping: 30,
-      mass: 1
-    }).start();
-  };
-  const handlePressOut = () => {
-    if (!onPress) return;
-    Animated.spring(scale2, {
-      toValue: 1,
-      useNativeDriver: nativeDriver3,
-      stiffness: 250,
-      damping: 24,
-      mass: 1
-    }).start();
-  };
+  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
+    pressScale: PRESS_SCALE.card,
+    pressInSpring: SPRINGS.surfacePressIn,
+    pressOutSpring: SPRINGS.surfacePressOut,
+    disabled: !onPress
+  });
   const handlePress = () => {
     if (!onPress) return;
     impactLight();
@@ -948,14 +1052,16 @@ function Card({ children, variant = "elevated", onPress, style }) {
   }[variant];
   const cardContent = /* @__PURE__ */ React26.createElement(View, { style: [styles6.card, variantStyle, style] }, children);
   if (onPress) {
-    return /* @__PURE__ */ React26.createElement(Animated.View, { style: { transform: [{ scale: scale2 }] } }, /* @__PURE__ */ React26.createElement(
+    return /* @__PURE__ */ React26.createElement(Animated9.View, { style: animatedStyle, ...hoverHandlers }, /* @__PURE__ */ React26.createElement(
       TouchableOpacity,
       {
         onPress: handlePress,
-        onPressIn: handlePressIn,
-        onPressOut: handlePressOut,
+        onPressIn,
+        onPressOut,
         activeOpacity: 1,
-        touchSoundDisabled: true
+        touchSoundDisabled: true,
+        accessibilityRole: "button",
+        accessibilityLabel
       },
       cardContent
     ));
@@ -982,7 +1088,6 @@ function CardFooter({ children, style }) {
 var styles6 = StyleSheet.create({
   card: {
     borderRadius: RADIUS.md,
-    // 14px — Airbnb property card spec
     borderWidth: 1
   },
   header: {
@@ -1080,20 +1185,19 @@ function Skeleton({
   style
 }) {
   const { colors, colorScheme } = useTheme();
-  const shimmerAnim = useRef(new Animated.Value(0)).current;
+  const shimmer = useSharedValue(0);
   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.timing(shimmerAnim, { toValue: 1, duration: 1200, useNativeDriver: true })
+    shimmer.value = withRepeat(
+      withTiming(1, { duration: TIMINGS.shimmer.duration, easing: Easing.linear }),
+      -1,
+      false
     );
-    animation.start();
-    return () => animation.stop();
-  }, [shimmerAnim]);
-  const translateX = shimmerAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [-containerWidth, containerWidth]
-  });
+  }, [shimmer]);
+  const shimmerStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: -containerWidth + shimmer.value * (containerWidth * 2) }]
+  }));
   const resolvedWidth = preset === "circle" ? s(diameter) : preset === "text" ? "60%" : width;
   const resolvedHeight = preset === "circle" ? s(diameter) : preset === "text" ? 14 : height;
   const resolvedRadius = preset === "circle" ? 9999 : preset === "text" ? 4 : borderRadius;
@@ -1105,9 +1209,12 @@ function Skeleton({
         { width: resolvedWidth, height: resolvedHeight, borderRadius: resolvedRadius, backgroundColor: colors.surface },
         style
       ],
-      onLayout: (e) => setContainerWidth(e.nativeEvent.layout.width)
+      onLayout: (e) => setContainerWidth(e.nativeEvent.layout.width),
+      accessibilityRole: "progressbar",
+      accessibilityLabel: "Loading",
+      accessibilityState: { busy: true }
     },
-    /* @__PURE__ */ React26.createElement(Animated.View, { style: [StyleSheet.absoluteFill, { transform: [{ translateX }] }] }, /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React26.createElement(Animated9.View, { style: [StyleSheet.absoluteFill, shimmerStyle] }, /* @__PURE__ */ React26.createElement(
       LinearGradient,
       {
         colors: ["transparent", shimmerHighlight, "transparent"],
@@ -1253,31 +1360,32 @@ var styles11 = StyleSheet.create({
     lineHeight: ms(17)
   }
 });
-function Progress({ value = 0, max = 100, variant = "default", style }) {
+function Progress({ value = 0, max = 100, variant = "default", style, accessibilityLabel }) {
   const { colors } = useTheme();
   const percent = Math.min(Math.max(value / max * 100, 0), 100);
   const [trackWidth, setTrackWidth] = useState(0);
-  const animatedWidth = useRef(new Animated.Value(0)).current;
+  const animatedWidth = useSharedValue(0);
   useEffect(() => {
     if (trackWidth === 0) return;
-    Animated.spring(animatedWidth, {
-      toValue: percent / 100 * trackWidth,
-      useNativeDriver: false,
-      speed: 20,
-      bounciness: 0
-    }).start();
-  }, [percent, trackWidth]);
+    animatedWidth.value = withSpring(percent / 100 * trackWidth, SPRINGS.glide);
+  }, [percent, trackWidth, animatedWidth]);
+  const indicatorAnimatedStyle = useAnimatedStyle(() => ({
+    width: animatedWidth.value
+  }));
   const indicatorColor = variant === "success" ? colors.success : variant === "warning" ? colors.warning : variant === "destructive" ? colors.destructive : colors.primary;
   return /* @__PURE__ */ React26.createElement(
     View,
     {
       style: [styles12.track, { backgroundColor: colors.surface }, style],
-      onLayout: (e) => setTrackWidth(e.nativeEvent.layout.width)
+      onLayout: (e) => setTrackWidth(e.nativeEvent.layout.width),
+      accessibilityRole: "progressbar",
+      accessibilityLabel,
+      accessibilityValue: { min: 0, max: 100, now: Math.round(percent) }
     },
     /* @__PURE__ */ React26.createElement(
-      Animated.View,
+      Animated9.View,
       {
-        style: [styles12.indicator, { width: animatedWidth, backgroundColor: indicatorColor }]
+        style: [styles12.indicator, { backgroundColor: indicatorColor }, indicatorAnimatedStyle]
       }
     )
   );
@@ -1394,20 +1502,25 @@ function Textarea({
   style,
   onFocus,
   onBlur,
+  accessibilityLabel,
   ...props
 }) {
   const { colors } = useTheme();
   const [focused, setFocused] = useState(false);
+  const focusProgress = useColorTransition(focused, {
+    duration: focused ? TIMINGS.focusIn.duration : TIMINGS.focusOut.duration
+  });
   const resolvedPrefixIcon = prefixIcon ? renderIcon(prefixIcon, ms(16), prefixIconColor ?? colors.foregroundMuted) : prefixIconNode;
+  const borderColorStyle = useAnimatedStyle(() => ({
+    borderColor: error ? colors.destructive : interpolateColor(focusProgress.value, [0, 1], [colors.border, colors.primary])
+  }));
   return /* @__PURE__ */ React26.createElement(View, { style: [styles14.container, containerStyle] }, label ? /* @__PURE__ */ React26.createElement(Text, { style: [styles14.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, /* @__PURE__ */ React26.createElement(
-    View,
+    Animated9.View,
     {
       style: [
         styles14.inputWrapper,
-        {
-          borderColor: error ? colors.destructive : focused ? colors.ring ?? colors.primary : colors.border,
-          backgroundColor: colors.background
-        }
+        { backgroundColor: colors.background },
+        borderColorStyle
       ]
     },
     resolvedPrefixIcon ? /* @__PURE__ */ React26.createElement(View, { style: styles14.prefixIcon }, resolvedPrefixIcon) : null,
@@ -1436,10 +1549,19 @@ function Textarea({
         },
         placeholderTextColor: colors.foregroundMuted,
         allowFontScaling: true,
+        accessibilityLabel: accessibilityLabel ?? label,
         ...props
       }
     )
-  ), error ? /* @__PURE__ */ React26.createElement(Text, { style: [styles14.helperText, { color: colors.destructive }], allowFontScaling: true }, error) : null, !error && hint ? /* @__PURE__ */ React26.createElement(Text, { style: [styles14.helperText, { color: colors.foregroundMuted }], allowFontScaling: true }, hint) : null);
+  ), error ? /* @__PURE__ */ React26.createElement(
+    Text,
+    {
+      style: [styles14.helperText, { color: colors.destructive }],
+      allowFontScaling: true,
+      accessibilityLiveRegion: "polite"
+    },
+    error
+  ) : null, !error && hint ? /* @__PURE__ */ React26.createElement(Text, { style: [styles14.helperText, { color: colors.foregroundMuted }], allowFontScaling: true }, hint) : null);
 }
 var styles14 = StyleSheet.create({
   container: {
@@ -1452,7 +1574,7 @@ var styles14 = StyleSheet.create({
     marginBottom: vs(2)
   },
   inputWrapper: {
-    borderWidth: 1,
+    borderWidth: 2,
     borderRadius: 8,
     paddingHorizontal: s(14),
     paddingVertical: vs(11),
@@ -1477,47 +1599,27 @@ var styles14 = StyleSheet.create({
     marginTop: vs(4)
   }
 });
-var nativeDriver4 = Platform.OS !== "web";
 function Checkbox({
   checked = false,
   onCheckedChange,
   label,
   disabled,
-  style
+  style,
+  accessibilityLabel
 }) {
   const { colors } = useTheme();
-  const scale2 = useRef(new Animated.Value(1)).current;
-  const bgOpacity = useRef(new Animated.Value(checked ? 1 : 0)).current;
-  const checkOpacity = useRef(new Animated.Value(checked ? 1 : 0)).current;
-  useEffect(() => {
-    Animated.parallel([
-      Animated.timing(bgOpacity, {
-        toValue: checked ? 1 : 0,
-        duration: 150,
-        useNativeDriver: false
-      }),
-      Animated.timing(checkOpacity, {
-        toValue: checked ? 1 : 0,
-        duration: 120,
-        useNativeDriver: false
-      })
-    ]).start();
-  }, [checked, bgOpacity, checkOpacity]);
-  const borderColor = bgOpacity.interpolate({
-    inputRange: [0, 1],
-    outputRange: [colors.border, colors.primary]
-  });
-  const backgroundColor = bgOpacity.interpolate({
-    inputRange: [0, 1],
-    outputRange: ["transparent", colors.primary]
+  const { animatedStyle: scaleStyle, onPressIn, onPressOut } = usePressScale({
+    pressScale: PRESS_SCALE.button,
+    disabled
   });
-  const handlePressIn = () => {
-    if (disabled) return;
-    Animated.spring(scale2, { toValue: 0.95, useNativeDriver: nativeDriver4, speed: 40, bounciness: 0 }).start();
-  };
-  const handlePressOut = () => {
-    Animated.spring(scale2, { toValue: 1, useNativeDriver: nativeDriver4, speed: 40, bounciness: 0 }).start();
-  };
+  const progress = useColorTransition(checked);
+  const boxStyle = useAnimatedStyle(() => ({
+    borderColor: interpolateColor(progress.value, [0, 1], [colors.border, colors.primary]),
+    backgroundColor: interpolateColor(progress.value, [0, 1], ["transparent", colors.primary])
+  }));
+  const checkStyle = useAnimatedStyle(() => ({
+    opacity: withTiming(checked ? 1 : 0, { duration: TIMINGS.state.duration, easing: EASINGS.standard })
+  }));
   return /* @__PURE__ */ React26.createElement(
     TouchableOpacity,
     {
@@ -1526,25 +1628,21 @@ function Checkbox({
         selectionAsync();
         onCheckedChange?.(!checked);
       },
-      onPressIn: handlePressIn,
-      onPressOut: handlePressOut,
+      onPressIn,
+      onPressOut,
       disabled,
       activeOpacity: 1,
-      touchSoundDisabled: true
+      touchSoundDisabled: true,
+      accessibilityRole: "checkbox",
+      accessibilityLabel: accessibilityLabel ?? label,
+      accessibilityState: { checked, disabled: !!disabled }
     },
-    /* @__PURE__ */ React26.createElement(Animated.View, { style: { transform: [{ scale: scale2 }] } }, /* @__PURE__ */ React26.createElement(
-      Animated.View,
+    /* @__PURE__ */ React26.createElement(Animated9.View, { style: scaleStyle }, /* @__PURE__ */ React26.createElement(
+      Animated9.View,
       {
-        style: [
-          styles15.box,
-          {
-            borderColor,
-            backgroundColor,
-            opacity: disabled ? 0.45 : 1
-          }
-        ]
+        style: [styles15.box, { opacity: disabled ? 0.45 : 1 }, boxStyle]
       },
-      /* @__PURE__ */ React26.createElement(Animated.View, { style: { opacity: checkOpacity } }, /* @__PURE__ */ React26.createElement(View, { style: [styles15.checkmark, { borderColor: colors.primaryForeground }] }))
+      /* @__PURE__ */ React26.createElement(Animated9.View, { style: checkStyle }, /* @__PURE__ */ React26.createElement(View, { style: [styles15.checkmark, { borderColor: colors.primaryForeground }] }))
     )),
     label ? /* @__PURE__ */ React26.createElement(
       Text,
@@ -1583,47 +1681,34 @@ var styles15 = StyleSheet.create({
     lineHeight: mvs(20)
   }
 });
-var nativeDriver5 = Platform.OS !== "web";
 var TRACK_WIDTH = s(52);
 var TRACK_HEIGHT = s(30);
 var THUMB_SIZE = s(24);
 var THUMB_OFFSET = s(3);
 var THUMB_TRAVEL = TRACK_WIDTH - THUMB_SIZE - THUMB_OFFSET * 2;
 var ICON_SIZE = s(13);
-function Switch({ checked = false, onCheckedChange, disabled, style }) {
+function Switch({ checked = false, onCheckedChange, disabled, style, accessibilityLabel }) {
   const { colors } = useTheme();
-  const translateX = useRef(new Animated.Value(checked ? THUMB_TRAVEL : 0)).current;
-  const trackOpacity = useRef(new Animated.Value(checked ? 1 : 0)).current;
-  const checkOpacity = useRef(new Animated.Value(checked ? 1 : 0)).current;
-  const crossOpacity = useRef(new Animated.Value(checked ? 0 : 1)).current;
+  const progress = useSharedValue(checked ? 1 : 0);
   useEffect(() => {
-    Animated.parallel([
-      Animated.spring(translateX, {
-        toValue: checked ? THUMB_TRAVEL : 0,
-        useNativeDriver: nativeDriver5,
-        bounciness: 4
-      }),
-      Animated.timing(trackOpacity, {
-        toValue: checked ? 1 : 0,
-        duration: 150,
-        useNativeDriver: false
-      }),
-      Animated.timing(checkOpacity, {
-        toValue: checked ? 1 : 0,
-        duration: 120,
-        useNativeDriver: true
-      }),
-      Animated.timing(crossOpacity, {
-        toValue: checked ? 0 : 1,
-        duration: 120,
-        useNativeDriver: true
-      })
-    ]).start();
-  }, [checked, translateX, trackOpacity, checkOpacity, crossOpacity]);
-  const trackColor = trackOpacity.interpolate({
-    inputRange: [0, 1],
-    outputRange: [colors.surface, colors.primary]
-  });
+    progress.value = withSpring(checked ? 1 : 0, SPRINGS.elastic);
+  }, [checked, progress]);
+  const thumbStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: progress.value * THUMB_TRAVEL }]
+  }));
+  const trackStyle = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(
+      progress.value,
+      [0, 1],
+      [colors.surfaceStrong, colors.primary]
+    )
+  }));
+  const checkIconStyle = useAnimatedStyle(() => ({
+    opacity: withTiming(checked ? 1 : 0, { duration: TIMINGS.state.duration, easing: EASINGS.standard })
+  }));
+  const crossIconStyle = useAnimatedStyle(() => ({
+    opacity: withTiming(checked ? 0 : 1, { duration: TIMINGS.state.duration, easing: EASINGS.standard })
+  }));
   return /* @__PURE__ */ React26.createElement(View, { style: [{ opacity: disabled ? 0.45 : 1 }, style] }, /* @__PURE__ */ React26.createElement(
     TouchableOpacity,
     {
@@ -1634,29 +1719,25 @@ function Switch({ checked = false, onCheckedChange, disabled, style }) {
       disabled,
       activeOpacity: 0.8,
       touchSoundDisabled: true,
-      style: styles16.wrapper
+      accessibilityRole: "switch",
+      accessibilityLabel,
+      accessibilityState: { checked, disabled: !!disabled }
     },
-    /* @__PURE__ */ React26.createElement(Animated.View, { style: [styles16.track, { backgroundColor: trackColor }] }, /* @__PURE__ */ React26.createElement(
-      Animated.View,
+    /* @__PURE__ */ React26.createElement(Animated9.View, { style: [styles16.track, trackStyle] }, /* @__PURE__ */ React26.createElement(
+      Animated9.View,
       {
-        style: [
-          styles16.thumb,
-          { backgroundColor: colors.primaryForeground, transform: [{ translateX }] }
-        ]
+        style: [styles16.thumb, { backgroundColor: colors.primaryForeground }, thumbStyle]
       },
-      /* @__PURE__ */ React26.createElement(Animated.View, { style: [styles16.iconWrapper, { opacity: checkOpacity }] }, /* @__PURE__ */ React26.createElement(Feather$1, { name: "check", size: ICON_SIZE, color: colors.primary })),
-      /* @__PURE__ */ React26.createElement(Animated.View, { style: [styles16.iconWrapper, { opacity: crossOpacity }] }, /* @__PURE__ */ React26.createElement(Feather$1, { name: "x", size: ICON_SIZE, color: colors.foregroundMuted }))
+      /* @__PURE__ */ React26.createElement(Animated9.View, { style: [styles16.iconWrapper, checkIconStyle] }, /* @__PURE__ */ React26.createElement(Feather$1, { name: "check", size: ICON_SIZE, color: colors.primary })),
+      /* @__PURE__ */ React26.createElement(Animated9.View, { style: [styles16.iconWrapper, crossIconStyle] }, /* @__PURE__ */ React26.createElement(Feather$1, { name: "x", size: ICON_SIZE, color: colors.foregroundMuted }))
     ))
   ));
 }
 var styles16 = StyleSheet.create({
-  wrapper: {},
   track: {
     width: TRACK_WIDTH,
     height: TRACK_HEIGHT,
     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",
@@ -1677,7 +1758,6 @@ var styles16 = StyleSheet.create({
     position: "absolute"
   }
 });
-var nativeDriver6 = Platform.OS !== "web";
 var sizeStyles = {
   sm: { paddingHorizontal: s(12), paddingVertical: vs(8), minWidth: s(40), minHeight: vs(40) },
   md: { paddingHorizontal: s(16), paddingVertical: vs(12), minWidth: s(44), minHeight: vs(44) },
@@ -1698,38 +1778,23 @@ function Toggle({
   activeIconColor,
   disabled,
   style,
+  accessibilityLabel,
   ...props
 }) {
   const { colors } = useTheme();
-  const scale2 = 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$1.out(Easing$1.ease),
-      useNativeDriver: false
-    }).start();
-  }, [pressed, pressAnim]);
-  const handlePressIn = () => {
-    if (disabled) return;
-    Animated.spring(scale2, { toValue: 0.95, useNativeDriver: nativeDriver6, stiffness: 600, damping: 35, mass: 0.8 }).start();
-  };
-  const handlePressOut = () => {
-    Animated.spring(scale2, { toValue: 1, useNativeDriver: nativeDriver6, stiffness: 280, damping: 22, mass: 0.8 }).start();
-  };
-  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.surfaceStrong]
-  });
-  const textColor = pressAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [colors.foreground, colors.primary]
+  const { animatedStyle: scaleStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
+    pressScale: PRESS_SCALE.button,
+    disabled
   });
+  const progress = useColorTransition(pressed);
+  const inactiveBorder = variant === "outline" ? colors.border : "transparent";
+  const surfaceStyle = useAnimatedStyle(() => ({
+    borderColor: interpolateColor(progress.value, [0, 1], [inactiveBorder, colors.primary]),
+    backgroundColor: interpolateColor(progress.value, [0, 1], ["transparent", colors.surfaceStrong])
+  }));
+  const textStyle = useAnimatedStyle(() => ({
+    color: interpolateColor(progress.value, [0, 1], [colors.foreground, colors.primary])
+  }));
   const iconSize = iconSizeMap2[size];
   const LeftIcon = () => {
     const renderProp = (prop) => {
@@ -1748,32 +1813,43 @@ function Toggle({
     if (custom) return /* @__PURE__ */ React26.createElement(React26.Fragment, null, custom);
     return /* @__PURE__ */ React26.createElement(FontAwesome5$1, { name: "circle", size: iconSize, color: colors.foregroundMuted });
   };
-  return /* @__PURE__ */ React26.createElement(Animated.View, { style: [{ transform: [{ scale: scale2 }] }, disabled && styles17.disabled, style] }, /* @__PURE__ */ React26.createElement(
-    TouchableOpacity,
+  return /* @__PURE__ */ React26.createElement(
+    Animated9.View,
     {
-      onPress: () => {
-        selectionAsync();
-        onPressedChange?.(!pressed);
-      },
-      onPressIn: handlePressIn,
-      onPressOut: handlePressOut,
-      disabled,
-      activeOpacity: 1,
-      touchSoundDisabled: true,
-      ...props
+      style: [scaleStyle, disabled && styles17.disabled, style],
+      ...hoverHandlers
     },
     /* @__PURE__ */ React26.createElement(
-      Animated.View,
+      TouchableOpacity,
       {
-        style: [
-          styles17.base,
-          sizeStyles[size],
-          { borderColor, backgroundColor, borderWidth: 2 }
-        ]
+        onPress: () => {
+          selectionAsync();
+          onPressedChange?.(!pressed);
+        },
+        onPressIn,
+        onPressOut,
+        disabled,
+        activeOpacity: 1,
+        touchSoundDisabled: true,
+        accessibilityRole: "button",
+        accessibilityLabel: accessibilityLabel ?? label,
+        accessibilityState: { selected: pressed, disabled: !!disabled },
+        ...props
       },
-      /* @__PURE__ */ React26.createElement(View, { style: styles17.inner }, /* @__PURE__ */ React26.createElement(LeftIcon, null), label ? /* @__PURE__ */ React26.createElement(Animated.Text, { style: [styles17.label, { color: textColor }], allowFontScaling: true }, label) : null)
+      /* @__PURE__ */ React26.createElement(
+        Animated9.View,
+        {
+          style: [
+            styles17.base,
+            sizeStyles[size],
+            { borderWidth: 2 },
+            surfaceStyle
+          ]
+        },
+        /* @__PURE__ */ React26.createElement(View, { style: styles17.inner }, /* @__PURE__ */ React26.createElement(LeftIcon, null), label ? /* @__PURE__ */ React26.createElement(Animated9.Text, { style: [styles17.label, textStyle], allowFontScaling: true }, label) : null)
+      )
     )
-  ));
+  );
 }
 var styles17 = StyleSheet.create({
   base: {
@@ -1793,21 +1869,28 @@ var styles17 = StyleSheet.create({
     fontSize: ms(14)
   }
 });
-var nativeDriver7 = Platform.OS !== "web";
 function RadioItem({
   option,
   selected,
   onSelect
 }) {
   const { colors } = useTheme();
-  const scale2 = useRef(new Animated.Value(1)).current;
-  const handlePressIn = () => {
-    if (option.disabled) return;
-    Animated.spring(scale2, { toValue: 0.95, useNativeDriver: nativeDriver7, speed: 40, bounciness: 0 }).start();
-  };
-  const handlePressOut = () => {
-    Animated.spring(scale2, { toValue: 1, useNativeDriver: nativeDriver7, speed: 40, bounciness: 4 }).start();
-  };
+  const { animatedStyle: scaleStyle, onPressIn, onPressOut } = usePressScale({
+    pressScale: PRESS_SCALE.button,
+    disabled: option.disabled
+  });
+  const colorProgress = useColorTransition(selected);
+  const dotScale = useSharedValue(selected ? 1 : 0);
+  useEffect(() => {
+    dotScale.value = withSpring(selected ? 1 : 0, SPRINGS.elastic);
+  }, [selected, dotScale]);
+  const radioStyle = useAnimatedStyle(() => ({
+    borderColor: interpolateColor(colorProgress.value, [0, 1], [colors.border, colors.primary])
+  }));
+  const dotStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: dotScale.value }],
+    opacity: dotScale.value
+  }));
   return /* @__PURE__ */ React26.createElement(
     TouchableOpacity,
     {
@@ -1818,26 +1901,26 @@ function RadioItem({
           onSelect();
         }
       },
-      onPressIn: handlePressIn,
-      onPressOut: handlePressOut,
+      onPressIn,
+      onPressOut,
       activeOpacity: 1,
       touchSoundDisabled: true,
-      disabled: option.disabled
+      disabled: option.disabled,
+      accessibilityRole: "radio",
+      accessibilityLabel: option.label,
+      accessibilityState: { checked: selected, disabled: !!option.disabled }
     },
-    /* @__PURE__ */ React26.createElement(
-      Animated.View,
+    /* @__PURE__ */ React26.createElement(Animated9.View, { style: scaleStyle }, /* @__PURE__ */ React26.createElement(
+      Animated9.View,
       {
         style: [
           styles18.radio,
-          {
-            borderColor: selected ? colors.primary : colors.border,
-            opacity: option.disabled ? 0.45 : 1,
-            transform: [{ scale: scale2 }]
-          }
+          { opacity: option.disabled ? 0.45 : 1 },
+          radioStyle
         ]
       },
-      selected ? /* @__PURE__ */ React26.createElement(View, { style: [styles18.dot, { backgroundColor: colors.primary }] }) : null
-    ),
+      /* @__PURE__ */ React26.createElement(Animated9.View, { style: [styles18.dot, { backgroundColor: colors.primary }, dotStyle] })
+    )),
     /* @__PURE__ */ React26.createElement(
       Text,
       {
@@ -1856,17 +1939,26 @@ function RadioGroup({
   value,
   onValueChange,
   orientation = "vertical",
-  style
+  style,
+  accessibilityLabel
 }) {
-  return /* @__PURE__ */ React26.createElement(View, { style: [styles18.container, orientation === "horizontal" && styles18.horizontal, style] }, options.map((option) => /* @__PURE__ */ React26.createElement(
-    RadioItem,
+  return /* @__PURE__ */ React26.createElement(
+    View,
     {
-      key: option.value,
-      option,
-      selected: option.value === value,
-      onSelect: () => onValueChange?.(option.value)
-    }
-  )));
+      style: [styles18.container, orientation === "horizontal" && styles18.horizontal, style],
+      accessibilityRole: "radiogroup",
+      accessibilityLabel
+    },
+    options.map((option) => /* @__PURE__ */ React26.createElement(
+      RadioItem,
+      {
+        key: option.value,
+        option,
+        selected: option.value === value,
+        onSelect: () => onValueChange?.(option.value)
+      }
+    ))
+  );
 }
 var styles18 = StyleSheet.create({
   container: {
@@ -1900,7 +1992,6 @@ var styles18 = StyleSheet.create({
     lineHeight: mvs(20)
   }
 });
-var nativeDriver8 = Platform.OS !== "web";
 function TabTrigger({
   tab,
   isActive,
@@ -1909,13 +2000,9 @@ function TabTrigger({
   variant
 }) {
   const { colors } = useTheme();
-  const scale2 = useRef(new Animated.Value(1)).current;
-  const handlePressIn = () => {
-    Animated.spring(scale2, { toValue: 0.95, useNativeDriver: nativeDriver8, stiffness: 600, damping: 35, mass: 0.8 }).start();
-  };
-  const handlePressOut = () => {
-    Animated.spring(scale2, { toValue: 1, useNativeDriver: nativeDriver8, stiffness: 280, damping: 22, mass: 0.8 }).start();
-  };
+  const { animatedStyle, onPressIn, onPressOut } = usePressScale({
+    pressScale: PRESS_SCALE.button
+  });
   const isUnderline = variant === "underline";
   return /* @__PURE__ */ React26.createElement(
     TouchableOpacity,
@@ -1926,13 +2013,16 @@ function TabTrigger({
         isUnderline && isActive && { borderBottomColor: colors.primary }
       ],
       onPress,
-      onPressIn: handlePressIn,
-      onPressOut: handlePressOut,
+      onPressIn,
+      onPressOut,
       onLayout,
       activeOpacity: 1,
-      touchSoundDisabled: true
+      touchSoundDisabled: true,
+      accessibilityRole: "tab",
+      accessibilityState: { selected: isActive },
+      accessibilityLabel: tab.label
     },
-    /* @__PURE__ */ React26.createElement(Animated.View, { style: { transform: [{ scale: scale2 }] } }, /* @__PURE__ */ React26.createElement(View, { style: styles19.triggerInner }, tab.icon ? typeof tab.icon === "function" ? tab.icon(isActive) : tab.icon : null, /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React26.createElement(Animated9.View, { style: animatedStyle }, /* @__PURE__ */ React26.createElement(View, { style: styles19.triggerInner }, tab.icon ? typeof tab.icon === "function" ? tab.icon(isActive) : tab.icon : null, /* @__PURE__ */ React26.createElement(
       Text,
       {
         style: [
@@ -1951,20 +2041,18 @@ function Tabs({ tabs, variant = "pill", value, onValueChange, children, style })
   const { colors } = useTheme();
   const active = value ?? internal;
   const tabLayouts = useRef({});
-  const pillX = useRef(new Animated.Value(0)).current;
-  const pillWidth = useRef(new Animated.Value(0)).current;
+  const pillX = useSharedValue(0);
+  const pillWidth = useSharedValue(0);
   const initialised = useRef(false);
   const animatePill = (tabValue, animate) => {
     const layout = tabLayouts.current[tabValue];
     if (!layout) return;
     if (animate) {
-      Animated.parallel([
-        Animated.spring(pillX, { toValue: layout.x, useNativeDriver: false, stiffness: 380, damping: 38, mass: 1 }),
-        Animated.spring(pillWidth, { toValue: layout.width, useNativeDriver: false, stiffness: 380, damping: 38, mass: 1 })
-      ]).start();
+      pillX.value = withSpring(layout.x, SPRINGS.glide);
+      pillWidth.value = withSpring(layout.width, SPRINGS.glide);
     } else {
-      pillX.setValue(layout.x);
-      pillWidth.setValue(layout.width);
+      pillX.value = layout.x;
+      pillWidth.value = layout.width;
     }
   };
   useEffect(() => {
@@ -1975,51 +2063,63 @@ function Tabs({ tabs, variant = "pill", value, onValueChange, children, style })
     if (!value) setInternal(v);
     onValueChange?.(v);
   };
-  return /* @__PURE__ */ React26.createElement(View, { style }, /* @__PURE__ */ React26.createElement(View, { style: [
-    variant === "pill" ? [styles19.list, { backgroundColor: colors.surface }] : styles19.listUnderline
-  ] }, variant === "pill" && /* @__PURE__ */ React26.createElement(
-    Animated.View,
+  const pillAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: pillX.value }],
+    width: pillWidth.value
+  }));
+  return /* @__PURE__ */ React26.createElement(View, { style }, /* @__PURE__ */ React26.createElement(
+    View,
     {
       style: [
-        styles19.pill,
-        {
-          backgroundColor: colors.background,
-          position: "absolute",
-          top: 4,
-          bottom: 4,
-          left: pillX,
-          width: pillWidth,
-          borderRadius: 8,
-          shadowColor: "#000",
-          shadowOffset: { width: 0, height: 1 },
-          shadowOpacity: 0.08,
-          shadowRadius: 2,
-          elevation: 2
-        }
-      ]
-    }
-  ), tabs.map((tab) => /* @__PURE__ */ React26.createElement(
-    TabTrigger,
-    {
-      key: tab.value,
-      tab,
-      isActive: tab.value === active,
-      onPress: () => handlePress(tab.value),
-      variant,
-      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;
+        variant === "pill" ? [styles19.list, { backgroundColor: colors.surface }] : styles19.listUnderline
+      ],
+      accessibilityRole: "tablist"
+    },
+    variant === "pill" && /* @__PURE__ */ React26.createElement(
+      Animated9.View,
+      {
+        style: [
+          styles19.pill,
+          {
+            backgroundColor: colors.background,
+            position: "absolute",
+            top: 4,
+            bottom: 4,
+            left: 0,
+            borderRadius: 8,
+            shadowColor: "#000",
+            shadowOffset: { width: 0, height: 1 },
+            shadowOpacity: 0.08,
+            shadowRadius: 2,
+            elevation: 2
+          },
+          pillAnimatedStyle
+        ]
+      }
+    ),
+    tabs.map((tab) => /* @__PURE__ */ React26.createElement(
+      TabTrigger,
+      {
+        key: tab.value,
+        tab,
+        isActive: tab.value === active,
+        onPress: () => handlePress(tab.value),
+        variant,
+        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;
+          }
         }
       }
-    }
-  ))), children);
+    ))
+  ), children);
 }
 function TabsContent({ value, activeValue, children, style }) {
   if (value !== activeValue) return null;
-  return /* @__PURE__ */ React26.createElement(View, { style }, children);
+  return /* @__PURE__ */ React26.createElement(View, { style, accessibilityRole: "none" }, children);
 }
 var styles19 = StyleSheet.create({
   list: {
@@ -2068,8 +2168,6 @@ var styles19 = StyleSheet.create({
     fontSize: ms(14)
   }
 });
-var easingExpand = Easing.bezier(0.23, 1, 0.32, 1);
-var easingCollapse = Easing.in(Easing.ease);
 function AccordionItemComponent({
   item,
   isOpen,
@@ -2084,14 +2182,14 @@ function AccordionItemComponent({
   }, [isOpen]);
   const derivedHeight = useDerivedValue(
     () => withTiming(height.value * Number(isExpanded.value), {
-      duration: 220,
-      easing: isExpanded.value ? easingExpand : easingCollapse
+      duration: isExpanded.value ? TIMINGS.expand.duration : TIMINGS.collapse.duration,
+      easing: isExpanded.value ? EASINGS.expand : EASINGS.collapse
     })
   );
   const derivedRotation = useDerivedValue(
     () => withTiming(isExpanded.value ? 1 : 0, {
-      duration: 220,
-      easing: isExpanded.value ? easingExpand : easingCollapse
+      duration: isExpanded.value ? TIMINGS.expand.duration : TIMINGS.collapse.duration,
+      easing: isExpanded.value ? EASINGS.expand : EASINGS.collapse
     })
   );
   const bodyStyle = useAnimatedStyle(() => ({
@@ -2108,11 +2206,14 @@ function AccordionItemComponent({
       onPress: () => {
         selectionAsync();
         onToggle();
-      }
+      },
+      accessibilityRole: "button",
+      accessibilityState: { expanded: isOpen },
+      accessibilityLabel: item.trigger
     },
     /* @__PURE__ */ React26.createElement(View, { style: styles20.triggerContent }, resolvedIcon ? /* @__PURE__ */ React26.createElement(View, { style: styles20.icon }, resolvedIcon) : null, /* @__PURE__ */ React26.createElement(Text, { style: [styles20.triggerText, { color: colors.foreground }], allowFontScaling: true }, item.trigger)),
-    /* @__PURE__ */ React26.createElement(Animated12.View, { style: [styles20.chevron, rotationStyle] }, /* @__PURE__ */ React26.createElement(Entypo$1, { name: "chevron-down", size: 18, color: colors.foregroundMuted }))
-  ), /* @__PURE__ */ React26.createElement(Animated12.View, { style: bodyStyle }, /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React26.createElement(Animated9.View, { style: [styles20.chevron, rotationStyle] }, /* @__PURE__ */ React26.createElement(Entypo$1, { name: "chevron-down", size: 18, color: colors.foregroundMuted }))
+  ), /* @__PURE__ */ React26.createElement(Animated9.View, { style: bodyStyle }, /* @__PURE__ */ React26.createElement(
     View,
     {
       style: styles20.content,
@@ -2212,23 +2313,38 @@ function Slider({
     }
     onValueChange?.(v);
   };
-  return /* @__PURE__ */ React26.createElement(View, { style: [styles21.wrapper, style], accessibilityLabel }, label || showValue ? /* @__PURE__ */ React26.createElement(View, { style: styles21.header }, label ? /* @__PURE__ */ React26.createElement(Text, { style: [styles21.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, showValue ? /* @__PURE__ */ React26.createElement(Text, { style: [styles21.valueText, { color: colors.foregroundMuted }], allowFontScaling: true }, formatValue2(value)) : null) : null, /* @__PURE__ */ React26.createElement(View, { style: disabled ? styles21.disabled : void 0 }, /* @__PURE__ */ React26.createElement(
-    RNSlider,
+  return /* @__PURE__ */ React26.createElement(
+    View,
     {
-      value,
-      minimumValue,
-      maximumValue,
-      step: step || 0,
-      disabled,
-      onValueChange: handleValueChange,
-      onSlidingComplete,
-      minimumTrackTintColor: colors.primary,
-      maximumTrackTintColor: colors.surface,
-      thumbTintColor: colors.primary,
-      style: styles21.slider,
-      accessibilityLabel
-    }
-  )));
+      style: [styles21.wrapper, style],
+      accessibilityRole: "adjustable",
+      accessibilityLabel: accessibilityLabel ?? label,
+      accessibilityValue: {
+        min: minimumValue,
+        max: maximumValue,
+        now: value,
+        text: formatValue2(value)
+      }
+    },
+    label || showValue ? /* @__PURE__ */ React26.createElement(View, { style: styles21.header }, label ? /* @__PURE__ */ React26.createElement(Text, { style: [styles21.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, showValue ? /* @__PURE__ */ React26.createElement(Text, { style: [styles21.valueText, { color: colors.foregroundMuted }], allowFontScaling: true }, formatValue2(value)) : null) : null,
+    /* @__PURE__ */ React26.createElement(View, { style: disabled ? styles21.disabled : void 0 }, /* @__PURE__ */ React26.createElement(
+      RNSlider,
+      {
+        value,
+        minimumValue,
+        maximumValue,
+        step: step || 0,
+        disabled,
+        onValueChange: handleValueChange,
+        onSlidingComplete,
+        minimumTrackTintColor: colors.primary,
+        maximumTrackTintColor: colors.surface,
+        thumbTintColor: colors.primary,
+        style: styles21.slider,
+        accessibilityLabel
+      }
+    ))
+  );
 }
 var styles21 = StyleSheet.create({
   wrapper: {
@@ -2304,13 +2420,16 @@ function Sheet({
   }, [footer]);
   const effectiveSubtitle = subtitle ?? description;
   const showHeader = !!(title || effectiveSubtitle || showCloseButton);
-  const headerNode = showHeader ? /* @__PURE__ */ React26.createElement(View, { style: styles22.header }, /* @__PURE__ */ React26.createElement(View, { style: styles22.headerRow }, title ? /* @__PURE__ */ React26.createElement(Text, { style: [styles22.title, { color: colors.foreground }], allowFontScaling: true }, title) : /* @__PURE__ */ React26.createElement(View, { style: { flex: 1 } }), showCloseButton ? /* @__PURE__ */ React26.createElement(
+  const headerNode = showHeader ? /* @__PURE__ */ React26.createElement(View, { style: styles22.header, accessibilityRole: "header" }, /* @__PURE__ */ React26.createElement(View, { style: styles22.headerRow }, title ? /* @__PURE__ */ React26.createElement(Text, { style: [styles22.title, { color: colors.foreground }], allowFontScaling: true }, title) : /* @__PURE__ */ React26.createElement(View, { style: { flex: 1 } }), showCloseButton ? /* @__PURE__ */ React26.createElement(
     TouchableOpacity,
     {
       onPress: onClose,
       style: styles22.closeButton,
       activeOpacity: 0.6,
-      touchSoundDisabled: true
+      touchSoundDisabled: true,
+      accessibilityRole: "button",
+      accessibilityLabel: "Close",
+      hitSlop: { top: 12, bottom: 12, left: 12, right: 12 }
     },
     /* @__PURE__ */ React26.createElement(AntDesign$1, { name: "close", size: ms(18), color: colors.foregroundMuted })
   ) : null), effectiveSubtitle ? /* @__PURE__ */ React26.createElement(Text, { style: [styles22.subtitle, { color: colors.foregroundMuted }], allowFontScaling: true }, effectiveSubtitle) : null) : null;
@@ -2401,7 +2520,6 @@ var styles22 = StyleSheet.create({
 var isIOS = Platform.OS === "ios";
 var isAndroid2 = Platform.OS === "android";
 var isWeb2 = Platform.OS === "web";
-var nativeDriver9 = Platform.OS !== "web";
 function Select({
   options,
   value,
@@ -2410,21 +2528,18 @@ function Select({
   label,
   error,
   disabled,
-  style
+  style,
+  accessibilityLabel
 }) {
   const { colors } = useTheme();
-  const scale2 = useRef(new Animated.Value(1)).current;
+  const { animatedStyle, onPressIn, onPressOut } = usePressScale({
+    pressScale: PRESS_SCALE.button,
+    disabled
+  });
   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;
-    Animated.spring(scale2, { toValue: 0.95, useNativeDriver: nativeDriver9, speed: 40, bounciness: 0 }).start();
-  };
-  const handlePressOut = () => {
-    Animated.spring(scale2, { toValue: 1, useNativeDriver: nativeDriver9, speed: 40, bounciness: 4 }).start();
-  };
   const handleOpen = () => {
     if (disabled) return;
     selectionAsync();
@@ -2445,7 +2560,7 @@ function Select({
     }
     setPickerVisible(false);
   };
-  return /* @__PURE__ */ React26.createElement(View, { style: [styles23.container, style] }, label ? /* @__PURE__ */ React26.createElement(Text, { style: [styles23.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, !isWeb2 ? /* @__PURE__ */ React26.createElement(Animated.View, { style: { transform: [{ scale: scale2 }], opacity: disabled ? 0.45 : 1 } }, /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React26.createElement(View, { style: [styles23.container, style] }, label ? /* @__PURE__ */ React26.createElement(Text, { style: [styles23.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, !isWeb2 ? /* @__PURE__ */ React26.createElement(Animated9.View, { style: [animatedStyle, { opacity: disabled ? 0.45 : 1 }] }, /* @__PURE__ */ React26.createElement(
     TouchableOpacity,
     {
       style: [
@@ -2456,10 +2571,14 @@ function Select({
         }
       ],
       onPress: handleOpen,
-      onPressIn: handlePressIn,
-      onPressOut: handlePressOut,
+      onPressIn,
+      onPressOut,
       activeOpacity: 1,
-      touchSoundDisabled: true
+      touchSoundDisabled: true,
+      accessibilityRole: "combobox",
+      accessibilityLabel: accessibilityLabel ?? label,
+      accessibilityValue: { text: selected?.label ?? placeholder },
+      accessibilityState: { disabled: !!disabled, expanded: pickerVisible }
     },
     /* @__PURE__ */ React26.createElement(
       Text,
@@ -2773,7 +2892,6 @@ var styles24 = StyleSheet.create({
     textAlignVertical: "top"
   }
 });
-var nativeDriver10 = Platform.OS !== "web";
 function ListItem({
   leftRender,
   rightRender,
@@ -2794,29 +2912,16 @@ function ListItem({
   style,
   titleStyle,
   subtitleStyle,
-  captionStyle
+  captionStyle,
+  accessibilityLabel
 }) {
   const { colors } = useTheme();
-  const scale2 = useRef(new Animated.Value(1)).current;
-  const handlePressIn = () => {
-    if (!onPress || disabled) return;
-    Animated.spring(scale2, {
-      toValue: 0.97,
-      useNativeDriver: nativeDriver10,
-      stiffness: 350,
-      damping: 28,
-      mass: 0.9
-    }).start();
-  };
-  const handlePressOut = () => {
-    Animated.spring(scale2, {
-      toValue: 1,
-      useNativeDriver: nativeDriver10,
-      stiffness: 220,
-      damping: 20,
-      mass: 0.9
-    }).start();
-  };
+  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
+    pressScale: PRESS_SCALE.row,
+    pressInSpring: SPRINGS.surfacePressIn,
+    pressOutSpring: SPRINGS.surfacePressOut,
+    disabled: !onPress || disabled
+  });
   const handlePress = () => {
     selectionAsync();
     onPress?.();
@@ -2834,16 +2939,20 @@ function ListItem({
     shadowRadius: 6,
     elevation: 2
   } : {};
-  return /* @__PURE__ */ React26.createElement(Animated.View, { style: [{ transform: [{ scale: scale2 }] }, disabled && styles25.disabled] }, /* @__PURE__ */ React26.createElement(
+  const a11yLabel = accessibilityLabel ?? [title, subtitle, caption].filter(Boolean).join(". ");
+  return /* @__PURE__ */ React26.createElement(Animated9.View, { style: [animatedStyle, disabled && styles25.disabled], ...hoverHandlers }, /* @__PURE__ */ React26.createElement(
     TouchableOpacity,
     {
       style: [styles25.container, cardStyle, style],
       onPress: onPress ? handlePress : void 0,
-      onPressIn: handlePressIn,
-      onPressOut: handlePressOut,
+      onPressIn,
+      onPressOut,
       disabled,
       activeOpacity: 1,
-      touchSoundDisabled: true
+      touchSoundDisabled: true,
+      accessibilityRole: onPress ? "button" : void 0,
+      accessibilityLabel: onPress ? a11yLabel : void 0,
+      accessibilityState: onPress ? { disabled: !!disabled } : void 0
     },
     effectiveLeft ? /* @__PURE__ */ React26.createElement(View, { style: styles25.leftContainer }, effectiveLeft) : null,
     /* @__PURE__ */ React26.createElement(View, { style: styles25.content }, /* @__PURE__ */ React26.createElement(
@@ -2937,9 +3046,6 @@ var styles25 = StyleSheet.create({
     fontFamily: "Poppins-Regular",
     fontSize: ms(14)
   },
-  chevron: {
-    marginLeft: s(4)
-  },
   separator: {
     height: StyleSheet.hairlineWidth,
     marginRight: 0
@@ -2948,9 +3054,9 @@ var styles25 = StyleSheet.create({
     opacity: 0.45
   }
 });
-var nativeDriver11 = Platform.OS !== "web";
 function MenuItem({
   label,
+  subtitle,
   iconName,
   icon,
   iconColor,
@@ -2961,29 +3067,16 @@ function MenuItem({
   variant = "plain",
   showSeparator = false,
   style,
-  labelStyle
+  labelStyle,
+  accessibilityLabel
 }) {
   const { colors } = useTheme();
-  const scale2 = useRef(new Animated.Value(1)).current;
-  const handlePressIn = () => {
-    if (disabled) return;
-    Animated.spring(scale2, {
-      toValue: 0.97,
-      useNativeDriver: nativeDriver11,
-      stiffness: 350,
-      damping: 28,
-      mass: 0.9
-    }).start();
-  };
-  const handlePressOut = () => {
-    Animated.spring(scale2, {
-      toValue: 1,
-      useNativeDriver: nativeDriver11,
-      stiffness: 220,
-      damping: 20,
-      mass: 0.9
-    }).start();
-  };
+  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
+    pressScale: PRESS_SCALE.row,
+    pressInSpring: SPRINGS.surfacePressIn,
+    pressOutSpring: SPRINGS.surfacePressOut,
+    disabled
+  });
   const handlePress = () => {
     selectionAsync();
     onPress();
@@ -3000,19 +3093,23 @@ function MenuItem({
     shadowRadius: 6,
     elevation: 2
   } : {};
-  return /* @__PURE__ */ React26.createElement(Animated.View, { style: [{ transform: [{ scale: scale2 }] }, disabled && styles26.disabled] }, /* @__PURE__ */ React26.createElement(
+  const a11yLabel = accessibilityLabel ?? (subtitle ? `${label}. ${subtitle}` : label);
+  return /* @__PURE__ */ React26.createElement(Animated9.View, { style: [animatedStyle, disabled && styles26.disabled], ...hoverHandlers }, /* @__PURE__ */ React26.createElement(
     TouchableOpacity,
     {
       style: [styles26.container, cardStyle, style],
       onPress: handlePress,
-      onPressIn: handlePressIn,
-      onPressOut: handlePressOut,
+      onPressIn,
+      onPressOut,
       disabled,
       activeOpacity: 1,
-      touchSoundDisabled: true
+      touchSoundDisabled: true,
+      accessibilityRole: "button",
+      accessibilityLabel: a11yLabel,
+      accessibilityState: { disabled }
     },
     resolvedIcon ? /* @__PURE__ */ React26.createElement(View, { style: styles26.iconContainer }, resolvedIcon) : null,
-    /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React26.createElement(View, { style: styles26.labelContainer }, /* @__PURE__ */ React26.createElement(
       Text,
       {
         style: [styles26.label, { color: colors.foreground }, labelStyle],
@@ -3020,7 +3117,15 @@ function MenuItem({
         allowFontScaling: true
       },
       label
-    ),
+    ), subtitle ? /* @__PURE__ */ React26.createElement(
+      Text,
+      {
+        style: [styles26.subtitle, { color: colors.foregroundMuted }],
+        numberOfLines: 1,
+        allowFontScaling: true
+      },
+      subtitle
+    ) : null),
     rightRender !== void 0 ? /* @__PURE__ */ React26.createElement(
       View,
       {
@@ -3060,10 +3165,18 @@ var styles26 = StyleSheet.create({
     justifyContent: "center",
     flexShrink: 0
   },
+  labelContainer: {
+    flex: 1,
+    justifyContent: "center"
+  },
   label: {
     fontFamily: "Poppins-Medium",
-    fontSize: ms(15),
-    flex: 1
+    fontSize: ms(15)
+  },
+  subtitle: {
+    fontFamily: "Poppins-Regular",
+    fontSize: ms(12),
+    marginTop: vs(1)
   },
   rightContainer: {
     alignItems: "flex-end",
@@ -3078,62 +3191,37 @@ var styles26 = StyleSheet.create({
     opacity: 0.45
   }
 });
-var nativeDriver12 = Platform.OS !== "web";
-function Chip({ label, selected = false, onPress, icon, iconName, style }) {
+function Chip({ label, selected = false, onPress, icon, iconName, style, accessibilityLabel }) {
   const { colors } = useTheme();
-  const scale2 = 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$1.out(Easing$1.ease),
-      useNativeDriver: false
-    }).start();
-  }, [selected, pressAnim]);
-  const handlePressIn = () => {
-    Animated.spring(scale2, {
-      toValue: 0.95,
-      useNativeDriver: nativeDriver12,
-      speed: 40,
-      bounciness: 0
-    }).start();
-  };
-  const handlePressOut = () => {
-    Animated.spring(scale2, {
-      toValue: 1,
-      useNativeDriver: nativeDriver12,
-      speed: 40,
-      bounciness: 4
-    }).start();
-  };
+  const { animatedStyle: scaleStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
+    pressScale: PRESS_SCALE.chip
+  });
+  const colorProgress = useColorTransition(selected);
+  const surfaceStyle = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(colorProgress.value, [0, 1], [colors.surface, colors.primary]),
+    borderColor: interpolateColor(colorProgress.value, [0, 1], [colors.border, colors.primary])
+  }));
+  const textStyle = useAnimatedStyle(() => ({
+    color: interpolateColor(colorProgress.value, [0, 1], [colors.foreground, colors.primaryForeground])
+  }));
   const handlePress = () => {
     selectionAsync();
     onPress?.();
   };
-  const backgroundColor = pressAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [colors.surface, 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]
-  });
   const resolvedIcon = iconName ? renderIcon(iconName, ms(13), selected ? colors.primaryForeground : colors.foreground) : icon;
-  return /* @__PURE__ */ React26.createElement(Animated.View, { style: [styles27.wrapper, { transform: [{ scale: scale2 }] }, style] }, /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React26.createElement(Animated9.View, { style: [styles27.wrapper, scaleStyle, style], ...hoverHandlers }, /* @__PURE__ */ React26.createElement(
     TouchableOpacity,
     {
       onPress: handlePress,
-      onPressIn: handlePressIn,
-      onPressOut: handlePressOut,
+      onPressIn,
+      onPressOut,
       activeOpacity: 1,
-      touchSoundDisabled: true
+      touchSoundDisabled: true,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? label,
+      accessibilityState: { selected }
     },
-    /* @__PURE__ */ React26.createElement(Animated.View, { style: [styles27.chip, { backgroundColor, borderColor }] }, resolvedIcon ? /* @__PURE__ */ React26.createElement(View, { style: styles27.chipIcon }, resolvedIcon) : null, /* @__PURE__ */ React26.createElement(Animated.Text, { style: [styles27.label, { color: textColor }], allowFontScaling: true }, label))
+    /* @__PURE__ */ React26.createElement(Animated9.View, { style: [styles27.chip, surfaceStyle] }, resolvedIcon ? /* @__PURE__ */ React26.createElement(View, { style: styles27.chipIcon }, resolvedIcon) : null, /* @__PURE__ */ React26.createElement(Animated9.Text, { style: [styles27.label, textStyle], allowFontScaling: true }, label))
   ));
 }
 function ChipGroup({ options, value, onValueChange, multiSelect = false, style }) {
@@ -3144,12 +3232,7 @@ function ChipGroup({ options, value, onValueChange, multiSelect = false, style }
     }
     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];
-    }
+    const newArray = isSelected2 ? currentArray.filter((v) => v !== optionValue) : [...currentArray, optionValue];
     onValueChange?.(newArray);
   };
   const isSelected = (optionValue) => {
@@ -3363,22 +3446,36 @@ function MonthPicker({ value, onChange, locale = "en", formatLabel, style }) {
       onChange({ month: value.month + 1, year: value.year });
     }
   };
-  return /* @__PURE__ */ React26.createElement(View, { style: [styles30.container, style] }, /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React26.createElement(View, { style: [styles30.container, style], accessibilityRole: "adjustable", accessibilityLabel: getLabel() }, /* @__PURE__ */ React26.createElement(
     TouchableOpacity,
     {
       style: styles30.arrow,
       onPress: handlePrev,
       activeOpacity: 0.6,
-      touchSoundDisabled: true
+      touchSoundDisabled: true,
+      accessibilityRole: "button",
+      accessibilityLabel: "Previous month",
+      hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }
     },
     /* @__PURE__ */ React26.createElement(Entypo$1, { name: "chevron-left", size: 22, color: colors.foreground })
-  ), /* @__PURE__ */ React26.createElement(Text, { style: [styles30.label, { color: colors.foreground }], allowFontScaling: true }, getLabel()), /* @__PURE__ */ React26.createElement(
+  ), /* @__PURE__ */ React26.createElement(
+    Text,
+    {
+      style: [styles30.label, { color: colors.foreground }],
+      allowFontScaling: true,
+      accessibilityLiveRegion: "polite"
+    },
+    getLabel()
+  ), /* @__PURE__ */ React26.createElement(
     TouchableOpacity,
     {
       style: styles30.arrow,
       onPress: handleNext,
       activeOpacity: 0.6,
-      touchSoundDisabled: true
+      touchSoundDisabled: true,
+      accessibilityRole: "button",
+      accessibilityLabel: "Next month",
+      hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }
     },
     /* @__PURE__ */ React26.createElement(Entypo$1, { name: "chevron-right", size: 22, color: colors.foreground })
   ));
@@ -3403,18 +3500,6 @@ var styles30 = StyleSheet.create({
     minWidth: s(160)
   }
 });
-function useHover() {
-  const [hovered, setHovered] = useState(false);
-  const onMouseEnter = useCallback(() => setHovered(true), []);
-  const onMouseLeave = useCallback(() => setHovered(false), []);
-  if (Platform.OS !== "web") {
-    return { hovered: false, hoverHandlers: {} };
-  }
-  return { hovered, hoverHandlers: { onMouseEnter, onMouseLeave } };
-}
-
-// src/components/MediaCard/MediaCard.tsx
-var nativeDriver13 = Platform.OS !== "web";
 var aspectRatioMap = {
   "1:1": 1,
   "4:3": 3 / 4,
@@ -3436,19 +3521,17 @@ function MediaCard({
   onPress,
   style,
   imageStyle,
-  footer
+  footer,
+  accessibilityLabel
 }) {
   const { colors } = useTheme();
-  const scale2 = useRef(new Animated.Value(1)).current;
   const { hovered, hoverHandlers } = useHover();
-  const handlePressIn = () => {
-    if (!onPress) return;
-    Animated.spring(scale2, { toValue: 0.98, useNativeDriver: nativeDriver13, speed: 40, bounciness: 0 }).start();
-  };
-  const handlePressOut = () => {
-    if (!onPress) return;
-    Animated.spring(scale2, { toValue: 1, useNativeDriver: nativeDriver13, speed: 40, bounciness: 4 }).start();
-  };
+  const { animatedStyle, onPressIn, onPressOut } = usePressScale({
+    pressScale: PRESS_SCALE.card,
+    pressInSpring: SPRINGS.surfacePressIn,
+    pressOutSpring: SPRINGS.surfacePressOut,
+    disabled: !onPress
+  });
   const handlePress = () => {
     if (!onPress) return;
     impactLight();
@@ -3456,6 +3539,7 @@ function MediaCard({
   };
   const ratio = aspectRatioMap[aspectRatio];
   const resolvedActionIcon = actionIconName ? renderIcon(actionIconName, 18, actionActive ? colors.primary : colors.background) : actionIcon ?? renderIcon("heart", 18, actionActive ? colors.primary : colors.background);
+  const a11yLabel = accessibilityLabel ?? [title, subtitle].filter(Boolean).join(". ");
   const cardContent = /* @__PURE__ */ React26.createElement(
     View,
     {
@@ -3482,21 +3566,26 @@ function MediaCard({
           onActionPress?.();
         },
         activeOpacity: 0.8,
-        touchSoundDisabled: true
+        touchSoundDisabled: true,
+        accessibilityRole: "button",
+        accessibilityLabel: actionIconName ?? "action",
+        accessibilityState: { selected: actionActive }
       },
       resolvedActionIcon
     )),
     (title || subtitle || caption || footer) && /* @__PURE__ */ React26.createElement(View, { style: styles31.meta }, title ? /* @__PURE__ */ React26.createElement(Text, { style: [styles31.title, { color: colors.foreground }], numberOfLines: 2, allowFontScaling: true }, title) : null, subtitle ? /* @__PURE__ */ React26.createElement(Text, { style: [styles31.subtitle, { color: colors.foregroundSubtle }], numberOfLines: 1, allowFontScaling: true }, subtitle) : null, caption ? /* @__PURE__ */ React26.createElement(Text, { style: [styles31.caption, { color: colors.foregroundMuted }], numberOfLines: 1, allowFontScaling: true }, caption) : null, footer)
   );
   if (onPress) {
-    return /* @__PURE__ */ React26.createElement(Animated.View, { style: { transform: [{ scale: scale2 }] } }, /* @__PURE__ */ React26.createElement(
+    return /* @__PURE__ */ React26.createElement(Animated9.View, { style: animatedStyle }, /* @__PURE__ */ React26.createElement(
       TouchableOpacity,
       {
         onPress: handlePress,
-        onPressIn: handlePressIn,
-        onPressOut: handlePressOut,
+        onPressIn,
+        onPressOut,
         activeOpacity: 1,
-        touchSoundDisabled: true
+        touchSoundDisabled: true,
+        accessibilityRole: "button",
+        accessibilityLabel: a11yLabel
       },
       cardContent
     ));
@@ -3506,12 +3595,10 @@ function MediaCard({
 var styles31 = StyleSheet.create({
   card: {
     borderRadius: RADIUS.md,
-    // 14px — Airbnb property card spec
     overflow: "hidden",
     backgroundColor: "transparent"
   },
   cardHovered: {
-    // Web hover: lift shadow
     ...SHADOWS.md
   },
   imageContainer: {
@@ -3562,43 +3649,38 @@ var styles31 = StyleSheet.create({
     lineHeight: mvs(16)
   }
 });
-var nativeDriver14 = Platform.OS !== "web";
 function CategoryChip({
   item,
   selected,
   onPress
 }) {
   const { colors } = useTheme();
-  const scale2 = useRef(new Animated.Value(1)).current;
-  const handlePressIn = () => {
-    Animated.spring(scale2, { toValue: 0.95, useNativeDriver: nativeDriver14, speed: 40, bounciness: 0 }).start();
-  };
-  const handlePressOut = () => {
-    Animated.spring(scale2, { toValue: 1, useNativeDriver: nativeDriver14, speed: 40, bounciness: 4 }).start();
-  };
-  const bgColor = selected ? colors.primary : colors.surface;
-  const textColor = selected ? colors.primaryForeground : colors.foregroundSubtle;
-  const borderColor = selected ? colors.primary : colors.border;
-  const resolvedIcon = typeof item.icon === "string" ? renderIcon(item.icon, 16, textColor) : item.icon ?? null;
-  return /* @__PURE__ */ React26.createElement(Animated.View, { style: { transform: [{ scale: scale2 }] } }, /* @__PURE__ */ React26.createElement(
+  const { animatedStyle: scaleStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
+    pressScale: PRESS_SCALE.chip
+  });
+  const progress = useColorTransition(selected);
+  const surfaceStyle = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(progress.value, [0, 1], [colors.surface, colors.primary]),
+    borderColor: interpolateColor(progress.value, [0, 1], [colors.border, colors.primary])
+  }));
+  const textColorStyle = useAnimatedStyle(() => ({
+    color: interpolateColor(progress.value, [0, 1], [colors.foregroundSubtle, colors.primaryForeground])
+  }));
+  const iconColor = selected ? colors.primaryForeground : colors.foregroundSubtle;
+  const resolvedIcon = typeof item.icon === "string" ? renderIcon(item.icon, 16, iconColor) : item.icon ?? null;
+  return /* @__PURE__ */ React26.createElement(Animated9.View, { style: scaleStyle, ...hoverHandlers }, /* @__PURE__ */ React26.createElement(
     TouchableOpacity,
     {
-      style: [
-        styles32.chip,
-        {
-          backgroundColor: bgColor,
-          borderColor
-        }
-      ],
       onPress,
-      onPressIn: handlePressIn,
-      onPressOut: handlePressOut,
+      onPressIn,
+      onPressOut,
       activeOpacity: 1,
-      touchSoundDisabled: true
+      touchSoundDisabled: true,
+      accessibilityRole: "button",
+      accessibilityLabel: item.label,
+      accessibilityState: { selected }
     },
-    resolvedIcon && /* @__PURE__ */ React26.createElement(View, { style: styles32.chipIcon }, resolvedIcon),
-    /* @__PURE__ */ React26.createElement(Text, { style: [styles32.chipLabel, { color: textColor }], allowFontScaling: true }, item.label),
-    item.badge !== void 0 && item.badge > 0 && /* @__PURE__ */ React26.createElement(View, { style: [styles32.chipBadge, { backgroundColor: colors.primary }] }, /* @__PURE__ */ React26.createElement(Text, { style: [styles32.chipBadgeText, { color: colors.primaryForeground }] }, Math.min(item.badge, 99)))
+    /* @__PURE__ */ React26.createElement(Animated9.View, { style: [styles32.chip, surfaceStyle] }, resolvedIcon && /* @__PURE__ */ React26.createElement(View, { style: styles32.chipIcon }, resolvedIcon), /* @__PURE__ */ React26.createElement(Animated9.Text, { style: [styles32.chipLabel, textColorStyle], allowFontScaling: true }, item.label), item.badge !== void 0 && item.badge > 0 && /* @__PURE__ */ React26.createElement(View, { style: [styles32.chipBadge, { backgroundColor: colors.primary }] }, /* @__PURE__ */ React26.createElement(Text, { style: [styles32.chipBadgeText, { color: colors.primaryForeground }] }, Math.min(item.badge, 99))))
   ));
 }
 function CategoryStrip({
@@ -3607,7 +3689,8 @@ function CategoryStrip({
   onValueChange,
   multiSelect = false,
   style,
-  itemStyle
+  itemStyle,
+  accessibilityLabel
 }) {
   const selected = Array.isArray(value) ? value : value ? [value] : [];
   const handlePress = (v) => {
@@ -3626,7 +3709,9 @@ function CategoryStrip({
       horizontal: true,
       showsHorizontalScrollIndicator: false,
       contentContainerStyle: [styles32.container, style],
-      style: styles32.scroll
+      style: styles32.scroll,
+      accessibilityRole: multiSelect ? void 0 : "radiogroup",
+      accessibilityLabel
     },
     categories.map((cat) => /* @__PURE__ */ React26.createElement(View, { key: cat.value, style: itemStyle }, /* @__PURE__ */ React26.createElement(
       CategoryChip,
@@ -3679,62 +3764,45 @@ var styles32 = StyleSheet.create({
     lineHeight: 14
   }
 });
-var nativeDriver15 = Platform.OS !== "web";
 function Pressable2({
   children,
   onPress,
-  pressScale = 0.98,
-  bounciness = 4,
+  pressScale = PRESS_SCALE.card,
   haptics = true,
   style,
   disabled,
   hoverScale = 1.02,
   ...touchableProps
 }) {
-  const scale2 = useRef(new Animated.Value(1)).current;
-  const { hovered, hoverHandlers } = useHover();
-  const handlePressIn = () => {
-    if (disabled) return;
-    Animated.spring(scale2, {
-      toValue: pressScale,
-      useNativeDriver: nativeDriver15,
-      speed: 40,
-      bounciness: 0
-    }).start();
-  };
-  const handlePressOut = () => {
-    if (disabled) return;
-    Animated.spring(scale2, {
-      toValue: 1,
-      useNativeDriver: nativeDriver15,
-      speed: 40,
-      bounciness
-    }).start();
-  };
+  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
+    pressScale,
+    hoverScale,
+    pressInSpring: SPRINGS.surfacePressIn,
+    pressOutSpring: SPRINGS.surfacePressOut,
+    disabled
+  });
   const handlePress = () => {
     if (disabled || !onPress) return;
     if (haptics) impactLight();
     onPress();
   };
-  const hoverScaleValue = hovered && hoverScale !== 1 ? hoverScale : 1;
   return /* @__PURE__ */ React26.createElement(
-    Animated.View,
+    Animated9.View,
     {
-      style: [
-        { transform: [{ scale: Animated.multiply(scale2, hoverScaleValue) }] },
-        style
-      ],
+      style: [animatedStyle, style],
       ...Platform.OS === "web" ? hoverHandlers : {}
     },
     /* @__PURE__ */ React26.createElement(
       TouchableOpacity,
       {
         onPress: handlePress,
-        onPressIn: handlePressIn,
-        onPressOut: handlePressOut,
+        onPressIn,
+        onPressOut,
         activeOpacity: 1,
         disabled,
         touchSoundDisabled: true,
+        accessibilityRole: "button",
+        accessibilityState: { disabled: !!disabled },
         ...touchableProps
       },
       children
@@ -3780,14 +3848,14 @@ function DetailRow({
       allowFontScaling: true
     },
     label
-  ) : label), separatorStyle ? /* @__PURE__ */ React26.createElement(View, { style: separatorStyle }) : /* @__PURE__ */ React26.createElement(View, { style: styles33.spacer }), /* @__PURE__ */ React26.createElement(View, { style: styles33.valueSide }, /* @__PURE__ */ React26.createElement(
+  ) : label), separatorStyle ? /* @__PURE__ */ React26.createElement(View, { style: separatorStyle }) : /* @__PURE__ */ React26.createElement(View, { style: styles33.spacer }), /* @__PURE__ */ React26.createElement(View, { style: styles33.valueSide }, typeof value === "string" ? /* @__PURE__ */ React26.createElement(
     Text,
     {
       style: [styles33.valueText, { color: valueColor ?? colors.foreground }, valueStyle],
       allowFontScaling: true
     },
     value
-  ), resolvedRightIcon ? /* @__PURE__ */ React26.createElement(View, { style: styles33.icon }, resolvedRightIcon) : null));
+  ) : value, resolvedRightIcon ? /* @__PURE__ */ React26.createElement(View, { style: styles33.icon }, resolvedRightIcon) : null));
 }
 var styles33 = StyleSheet.create({
   row: {