@webority-technologies/mobile 0.0.22 → 0.0.24

package/lib/module/components/OTPInput/OTPInput.js

@@ -3,7 +3,8 @@
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { Animated, Easing, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
 import { fontFor, useTheme, createAnimatedValue, setNativeValue } from "../../theme/index.js";
-import { triggerHaptic } from "../../utils/index.js";
+import { useReducedMotion, useControllableState } from "../../hooks/index.js";
+import { triggerHaptic, resolveHaptic } from "../../utils/index.js";
 import { FieldBase } from "../FieldBase/FieldBase.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizeMap = {
@@ -36,6 +37,7 @@ const sanitizeChar = (input, kind) => {
 const OTPInput = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     value,
+    defaultValue,
     onChange,
     onComplete,
     length = 6,
@@ -45,12 +47,18 @@ const OTPInput = /*#__PURE__*/forwardRef((props, ref) => {
     error,
     size = 'md',
     secure = false,
+    haptic,
     accessibilityLabel,
     style,
     cellStyle,
     textStyle,
     testID
   } = props;
+  const [current, setCurrent] = useControllableState({
+    value,
+    defaultValue: defaultValue ?? '',
+    onChange
+  });
   const theme = useTheme();
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const sizeStyles = {
@@ -81,8 +89,7 @@ const OTPInput = /*#__PURE__*/forwardRef((props, ref) => {
   }, [length]);
   const previousFocusedIndexRef = useRef(-1);
   const shakeOnError = theme.components.otpInput?.shakeOnError ?? false;
-  const errorHaptic = theme.components.otpInput?.errorHaptic ?? false;
-  const selectionHaptic = theme.components.otpInput?.selectionHaptic ?? false;
+  const reduceMotion = useReducedMotion();
   const hasError = Boolean(error);
   const errorMessage = typeof error === 'string' ? error : undefined;
 
@@ -90,11 +97,12 @@ const OTPInput = /*#__PURE__*/forwardRef((props, ref) => {
   // error is initially true — there's no transition to animate.
   useEffect(() => {
     const isFirstRun = previousErrorRef.current === null;
+    let anim;
     if (!isFirstRun && hasError && !previousErrorRef.current) {
-      if (errorHaptic) triggerHaptic('notificationError');
-      if (shakeOnError) {
+      if (haptic !== false) triggerHaptic('notificationError');
+      if (shakeOnError && !reduceMotion) {
         setNativeValue(shake, 0);
-        Animated.sequence([Animated.timing(shake, {
+        anim = Animated.sequence([Animated.timing(shake, {
           toValue: 1,
           duration: 75,
           easing: Easing.linear,
@@ -114,11 +122,13 @@ const OTPInput = /*#__PURE__*/forwardRef((props, ref) => {
           duration: 75,
           easing: Easing.linear,
           useNativeDriver: true
-        })]).start();
+        })]);
+        anim.start();
       }
     }
     previousErrorRef.current = hasError;
-  }, [hasError, shake, shakeOnError, errorHaptic]);
+    return () => anim?.stop();
+  }, [hasError, shake, shakeOnError, haptic]);
 
   // Animate underline opacity for the focused cell. Skip on first mount
   // (no prior focus state) — values are already at 0 and there's nothing to animate.
@@ -127,17 +137,21 @@ const OTPInput = /*#__PURE__*/forwardRef((props, ref) => {
     previousFocusedIndexRef.current = focusedIndex;
     if (previous === focusedIndex) return;
     if (previous === -1 && focusedIndex === -1) return;
+    const anims = [];
     underlines.forEach((anim, idx) => {
       const target = idx === focusedIndex ? 1 : 0;
       // Only animate the cells whose target changed.
       if (idx !== focusedIndex && idx !== previous) return;
-      Animated.timing(anim, {
+      const animation = Animated.timing(anim, {
         toValue: target,
         duration: theme.motion.duration.fast,
         easing: Easing.bezier(...theme.motion.easing.standard),
         useNativeDriver: true
-      }).start();
+      });
+      animation.start();
+      anims.push(animation);
     });
+    return () => anims.forEach(a => a.stop());
   }, [focusedIndex, underlines, theme]);
   const focusCell = useCallback(index => {
     const target = inputsRef.current[index];
@@ -152,10 +166,10 @@ const OTPInput = /*#__PURE__*/forwardRef((props, ref) => {
       current?.blur();
     },
     clear: () => {
-      onChange('');
+      setCurrent('');
       focusCell(0);
     }
-  }), [focusCell, focusedIndex, onChange]);
+  }), [focusCell, focusedIndex, setCurrent]);
   useEffect(() => {
     if (autoFocus && !disabled) {
       // Defer one frame so the inputs are mounted.
@@ -166,19 +180,19 @@ const OTPInput = /*#__PURE__*/forwardRef((props, ref) => {
   }, [autoFocus, disabled, focusCell]);
   const cells = useMemo(() => {
     const arr = new Array(length).fill('');
-    for (let i = 0; i < Math.min(value.length, length); i += 1) {
-      arr[i] = value[i] ?? '';
+    for (let i = 0; i < Math.min(current.length, length); i += 1) {
+      arr[i] = current[i] ?? '';
     }
     return arr;
-  }, [value, length]);
+  }, [current, length]);
   const updateValue = useCallback(next => {
     const trimmed = next.slice(0, length);
-    if (trimmed === value) return;
-    onChange(trimmed);
+    if (trimmed === current) return;
+    setCurrent(trimmed);
     if (trimmed.length === length && onComplete) {
       onComplete(trimmed);
     }
-  }, [length, onChange, onComplete, value]);
+  }, [length, setCurrent, onComplete, current]);
   const handleChangeText = useCallback((index, raw) => {
     // Strip the ZWSP placeholder (used so iOS fires onKeyPress/Backspace on otherwise-empty cells).
     const stripped = raw.replace(/\u200B/g, '');
@@ -208,10 +222,11 @@ const OTPInput = /*#__PURE__*/forwardRef((props, ref) => {
       writeIndex += 1;
     }
     const next = chars.join('').slice(0, length);
-    const previousLength = value.length;
+    const previousLength = current.length;
     updateValue(next);
-    if (next.length !== previousLength && selectionHaptic) {
-      triggerHaptic('selection');
+    if (next.length !== previousLength) {
+      const h = resolveHaptic(haptic, 'selection');
+      if (h) triggerHaptic(h);
     }
 
     // Move focus to the next empty cell or last cell.
@@ -221,7 +236,7 @@ const OTPInput = /*#__PURE__*/forwardRef((props, ref) => {
     } else {
       focusCell(nextFocus);
     }
-  }, [cells, focusCell, keyboardType, length, selectionHaptic, updateValue, value]);
+  }, [cells, focusCell, keyboardType, length, haptic, updateValue, current]);
   const handleKeyPress = useCallback((index, e) => {
     const key = e.nativeEvent.key;
     if (key !== 'Backspace') return;

package/lib/module/components/Radio/Radio.js

@@ -3,7 +3,7 @@
 import React, { createContext, forwardRef, useContext, useEffect, useMemo, useRef } from 'react';
 import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useTheme, createAnimatedValue } from "../../theme/index.js";
-import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { triggerHaptic, resolveHaptic } from "../../utils/hapticUtils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const RadioGroupContext = /*#__PURE__*/createContext(null);
 export const useRadioGroup = () => useContext(RadioGroupContext);
@@ -38,7 +38,7 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     value,
     selected: selectedProp,
-    onSelect,
+    onChange,
     disabled: disabledProp = false,
     label,
     size = 'md',
@@ -64,17 +64,17 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
   const inner = sizeOverrides?.inner ?? sizeMap[size].inner;
   const radioBorderWidth = theme.colors.border.width;
   const radioLabelGap = theme.components.radio?.labelGap ?? 10;
-  const pressHapticEnabled = theme.components.radio?.pressHaptic ?? false;
-  const resolvedHaptic = haptic === undefined ? pressHapticEnabled ? 'selection' : false : haptic;
   const progress = useRef(createAnimatedValue(selected ? 1 : 0)).current;
   useEffect(() => {
-    Animated.spring(progress, {
+    const anim = Animated.spring(progress, {
       toValue: selected ? 1 : 0,
       damping: theme.motion.spring.snappy.damping,
       stiffness: theme.motion.spring.snappy.stiffness,
       mass: theme.motion.spring.snappy.mass,
       useNativeDriver: true
-    }).start();
+    });
+    anim.start();
+    return () => anim.stop();
   }, [selected, progress, theme.motion.spring.snappy]);
   const scale = progress.interpolate({
     inputRange: [0, 1],
@@ -82,11 +82,12 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
   });
   const handlePress = event => {
     if (disabled) return;
-    if (resolvedHaptic !== false) triggerHaptic(resolvedHaptic);
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     if (ctx) {
-      ctx.onSelect(value);
+      ctx.onChange(value);
     } else {
-      onSelect?.(value);
+      onChange?.(value);
     }
     rest.onPressOut?.(event);
   };

package/lib/module/components/Radio/RadioGroup.js

@@ -3,9 +3,11 @@
 import React, { useMemo } from 'react';
 import { View } from 'react-native';
 import { RadioGroupContext } from "./Radio.js";
+import { useControllableState } from "../../hooks/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const RadioGroup = ({
   value,
+  defaultValue,
   onChange,
   children,
   disabled = false,
@@ -13,11 +15,16 @@ const RadioGroup = ({
   style,
   testID
 }) => {
+  const [current, setCurrent] = useControllableState({
+    value,
+    defaultValue: defaultValue ?? undefined,
+    onChange: onChange
+  });
   const ctx = useMemo(() => ({
-    selectedValue: value,
-    onSelect: onChange,
+    selectedValue: current,
+    onChange: setCurrent,
     disabled
-  }), [value, onChange, disabled]);
+  }), [current, setCurrent, disabled]);
   return /*#__PURE__*/_jsx(RadioGroupContext.Provider, {
     value: ctx,
     children: /*#__PURE__*/_jsx(View, {

package/lib/module/components/Rating/Rating.js

@@ -3,7 +3,7 @@
 import React, { forwardRef, useCallback, useMemo, useRef } from 'react';
 import { Animated, Easing, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useTheme } from "../../theme/index.js";
-import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
 import { Skeleton } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizePxMap = {
@@ -80,6 +80,7 @@ const Rating = /*#__PURE__*/forwardRef((props, ref) => {
     tone = 'warning',
     label,
     loading = false,
+    haptic,
     accessibilityLabel,
     style,
     containerStyle,
@@ -116,7 +117,6 @@ const Rating = /*#__PURE__*/forwardRef((props, ref) => {
   }, [max]);
   const pulseOnPress = theme.components.rating?.pulseOnPress ?? false;
   const pulseScale = theme.components.rating?.pulseScale ?? 1.2;
-  const pressHapticEnabled = theme.components.rating?.pressHaptic ?? false;
   const pulse = useCallback(idx => {
     const v = scaleRefs[idx];
     if (!v) return;
@@ -136,10 +136,11 @@ const Rating = /*#__PURE__*/forwardRef((props, ref) => {
   const commit = useCallback((next, animatedIndex) => {
     if (!interactive || !onChange) return;
     const cleaned = clampToStep(next, max, step);
-    if (pressHapticEnabled) triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     if (pulseOnPress && typeof animatedIndex === 'number') pulse(animatedIndex);
     onChange(cleaned);
-  }, [interactive, onChange, max, step, pulse, pressHapticEnabled, pulseOnPress]);
+  }, [interactive, onChange, max, step, pulse, haptic, pulseOnPress]);
   const handleStarPress = useCallback(index => e => {
     if (!interactive) return;
     const w = starWidthRef.current || starSize;

package/lib/module/components/SearchBar/SearchBar.js

@@ -3,7 +3,7 @@
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Easing, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
 import { fontFor, useTheme, createAnimatedValue } from "../../theme/index.js";
-import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
 import { useDebounce } from "../../hooks/useDebounce.js";
 import { FieldBase, resolveFieldSize, resolveFieldTextStyle, resolveVariantColors } from "../FieldBase/FieldBase.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -24,6 +24,7 @@ const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
     size = 'md',
     variant: variantProp,
     cancelLabel = 'Cancel',
+    haptic,
     style,
     accessibilityLabel,
     testID,
@@ -75,12 +76,14 @@ const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
   }, [debouncedValue, debounceMs, onChangeText]);
   const showCancelButton = showCancel && isFocused;
   useEffect(() => {
-    Animated.timing(cancelAnim, {
+    const anim = Animated.timing(cancelAnim, {
       toValue: showCancelButton ? 1 : 0,
       duration: 200,
       easing: Easing.bezier(...theme.motion.easing.standard),
       useNativeDriver: false
-    }).start();
+    });
+    anim.start();
+    return () => anim.stop();
   }, [showCancelButton, cancelAnim, theme.motion.easing.standard]);
   const handleChangeText = useCallback(text => {
     if (debounceMs !== undefined) {
@@ -90,16 +93,18 @@ const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
     onChangeText(text);
   }, [debounceMs, onChangeText]);
   const handleClear = useCallback(() => {
-    triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     if (debounceMs !== undefined) {
       setInternalValue('');
       lastSentRef.current = '';
     }
     onChangeText('');
     onClear?.();
-  }, [debounceMs, onChangeText, onClear]);
+  }, [haptic, debounceMs, onChangeText, onClear]);
   const handleCancel = useCallback(() => {
-    triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     if (debounceMs !== undefined) {
       setInternalValue('');
       lastSentRef.current = '';
@@ -107,7 +112,7 @@ const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
     onChangeText('');
     setIsFocused(false);
     onCancel?.();
-  }, [debounceMs, onChangeText, onCancel]);
+  }, [haptic, debounceMs, onChangeText, onCancel]);
   const handleSubmit = useCallback(() => {
     onSubmit?.(debounceMs !== undefined ? internalValue : value);
   }, [onSubmit, debounceMs, internalValue, value]);

package/lib/module/components/SegmentedControl/SegmentedControl.js

@@ -11,7 +11,8 @@
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useTheme, createAnimatedValue } from "../../theme/index.js";
-import { triggerHaptic } from "../../utils/index.js";
+import { triggerHaptic, resolveHaptic } from "../../utils/index.js";
+import { useControllableState } from "../../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizeMap = {
   sm: {
@@ -29,12 +30,14 @@ const TRACK_PADDING = 2;
 const SegmentedControl = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     segments,
-    value,
+    value: valueProp,
+    defaultValue,
     onChange,
     size = 'md',
     fullWidth = true,
     disabled = false,
     tone = 'primary',
+    haptic,
     accessibilityLabel,
     style,
     containerStyle,
@@ -44,6 +47,11 @@ const SegmentedControl = /*#__PURE__*/forwardRef((props, ref) => {
     labelStyle,
     testID
   } = props;
+  const [current, setCurrent] = useControllableState({
+    value: valueProp,
+    defaultValue: defaultValue ?? segments[0]?.value,
+    onChange
+  });
   const theme = useTheme();
   const segTheme = theme.components.segmentedControl;
   const styles = useMemo(() => buildStyles(theme), [theme]);
@@ -54,7 +62,6 @@ const SegmentedControl = /*#__PURE__*/forwardRef((props, ref) => {
     paddingHorizontal: segTheme?.[size]?.paddingHorizontal ?? baseSize.paddingHorizontal
   };
   const trackPadding = segTheme?.trackPadding ?? TRACK_PADDING;
-  const changeHapticEnabled = segTheme?.changeHaptic ?? false;
 
   // Track width is measured from onLayout. Thumb width is a regular number (not
   // animated) — `width` cannot be driven by the native animated module, and mixing
@@ -64,23 +71,26 @@ const SegmentedControl = /*#__PURE__*/forwardRef((props, ref) => {
   // only animate translateX via the native driver.
   const [trackWidth, setTrackWidth] = useState(0);
   const thumbTranslateX = useRef(createAnimatedValue(0)).current;
-  const activeIndex = Math.max(0, segments.findIndex(s => s.value === value));
+  const activeIndex = Math.max(0, segments.findIndex(s => s.value === current));
   const segmentWidth = trackWidth > 0 ? (trackWidth - trackPadding * 2) / Math.max(segments.length, 1) : 0;
   const animateThumb = useCallback((index, segWidth) => {
-    if (segWidth <= 0) return;
+    if (segWidth <= 0) return undefined;
     const targetX = trackPadding + segWidth * index;
     const spring = theme.motion.spring.snappy;
-    Animated.spring(thumbTranslateX, {
+    const anim = Animated.spring(thumbTranslateX, {
       toValue: targetX,
       damping: spring.damping,
       stiffness: spring.stiffness,
       mass: spring.mass,
       useNativeDriver: true
-    }).start();
+    });
+    anim.start();
+    return anim;
   }, [theme.motion.spring.snappy, thumbTranslateX]);
   useEffect(() => {
     if (segmentWidth > 0) {
-      animateThumb(activeIndex, segmentWidth);
+      const anim = animateThumb(activeIndex, segmentWidth);
+      return () => anim?.stop();
     }
   }, [activeIndex, segmentWidth, animateThumb]);
   const handleTrackLayout = useCallback(e => {
@@ -91,10 +101,11 @@ const SegmentedControl = /*#__PURE__*/forwardRef((props, ref) => {
   }, [trackWidth]);
   const handlePress = useCallback(segment => {
     if (disabled) return;
-    if (segment.value === value) return;
-    if (changeHapticEnabled) triggerHaptic('selection');
-    onChange(segment.value);
-  }, [disabled, onChange, value, changeHapticEnabled]);
+    if (segment.value === current) return;
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
+    setCurrent(segment.value);
+  }, [disabled, setCurrent, current, haptic]);
   const thumbBg = tone === 'primary' ? theme.colors.background.elevated : theme.colors.background.elevated;
   const activeTextColor = tone === 'primary' ? theme.colors.text.primary : theme.colors.text.primary;
   return /*#__PURE__*/_jsxs(View, {
@@ -125,7 +136,7 @@ const SegmentedControl = /*#__PURE__*/forwardRef((props, ref) => {
         ...theme.shadows.sm
       }, selectedIndicatorStyle]
     }) : null, segments.map(segment => {
-      const isActive = segment.value === value;
+      const isActive = segment.value === current;
       return /*#__PURE__*/_jsxs(Pressable, {
         onPress: () => handlePress(segment),
         disabled: disabled,

package/lib/module/components/Select/Select.js

@@ -12,7 +12,7 @@ import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState }
 import { Animated, Dimensions, Easing, FlatList, Modal, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme, createAnimatedValue } from "../../theme/index.js";
-import { triggerHaptic } from "../../utils/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
 import { FieldBase, resolveFieldSize, resolveFieldTextStyle, resolveVariantColors } from "../FieldBase/FieldBase.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // `unknown` here keeps the forwardRef signature non-generic — consumers who
@@ -27,6 +27,7 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
     getOptionDescription,
     placeholder,
     searchable = false,
+    haptic,
     label,
     error,
     disabled = false,
@@ -61,34 +62,32 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
   const backdropAnim = useRef(createAnimatedValue(0)).current;
   const sheetAnim = useRef(createAnimatedValue(sheetMaxHeight)).current;
   useEffect(() => {
-    if (open) {
-      Animated.parallel([
-      // Backdrop opacity uses JS driver — see Modal.tsx for the Fabric reason.
-      Animated.timing(backdropAnim, {
-        toValue: 1,
-        duration: theme.motion.duration.fast,
-        easing: Easing.bezier(...theme.motion.easing.standard),
-        useNativeDriver: false
-      }), Animated.spring(sheetAnim, {
-        toValue: 0,
-        damping: theme.motion.spring.snappy.damping,
-        stiffness: theme.motion.spring.snappy.stiffness,
-        mass: theme.motion.spring.snappy.mass,
-        useNativeDriver: true
-      })]).start();
-    } else {
-      Animated.parallel([Animated.timing(backdropAnim, {
-        toValue: 0,
-        duration: theme.motion.duration.fast,
-        easing: Easing.bezier(...theme.motion.easing.standard),
-        useNativeDriver: false
-      }), Animated.timing(sheetAnim, {
-        toValue: sheetMaxHeight,
-        duration: theme.motion.duration.fast,
-        easing: Easing.bezier(...theme.motion.easing.accelerate),
-        useNativeDriver: true
-      })]).start();
-    }
+    const anim = open ? Animated.parallel([
+    // Backdrop opacity uses JS driver — see Modal.tsx for the Fabric reason.
+    Animated.timing(backdropAnim, {
+      toValue: 1,
+      duration: theme.motion.duration.fast,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    }), Animated.spring(sheetAnim, {
+      toValue: 0,
+      damping: theme.motion.spring.snappy.damping,
+      stiffness: theme.motion.spring.snappy.stiffness,
+      mass: theme.motion.spring.snappy.mass,
+      useNativeDriver: true
+    })]) : Animated.parallel([Animated.timing(backdropAnim, {
+      toValue: 0,
+      duration: theme.motion.duration.fast,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    }), Animated.timing(sheetAnim, {
+      toValue: sheetMaxHeight,
+      duration: theme.motion.duration.fast,
+      easing: Easing.bezier(...theme.motion.easing.accelerate),
+      useNativeDriver: true
+    })]);
+    anim.start();
+    return () => anim.stop();
   }, [open, backdropAnim, sheetAnim, sheetMaxHeight, theme.motion.duration.fast, theme.motion.easing.standard, theme.motion.easing.accelerate, theme.motion.spring.snappy]);
 
   // Selection helpers — typed to keep callbacks fully type-safe.
@@ -116,9 +115,10 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
   }, [searchable, query, options, labelOf, descriptionOf]);
   const handleOpen = useCallback(() => {
     if (disabled) return;
-    triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     setOpen(true);
-  }, [disabled]);
+  }, [disabled, haptic]);
   const handleClose = useCallback(() => {
     setOpen(false);
     setQuery('');
@@ -126,7 +126,8 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
   const handleSelect = useCallback(option => {
     if (disabledOf(option)) return;
     const optValue = valueOf(option);
-    triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     if (multi) {
       const current = props.value ?? [];
       const next = current.includes(optValue) ? current.filter(v => v !== optValue) : [...current, optValue];
@@ -135,7 +136,7 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
     }
     props.onChange(optValue);
     handleClose();
-  }, [multi, props, handleClose, disabledOf, valueOf]);
+  }, [multi, props, handleClose, disabledOf, valueOf, haptic]);
 
   // Trigger label / placeholder text.
   const triggerText = selectedOptions.length === 0 ? placeholder ?? 'Select…' : selectedOptions.map(o => labelOf(o)).join(', ');
@@ -386,14 +387,17 @@ const Chevron = ({
   size,
   open
 }) => {
+  const theme = useTheme();
   const rotate = useRef(createAnimatedValue(open ? 1 : 0)).current;
   useEffect(() => {
-    Animated.timing(rotate, {
+    const anim = Animated.timing(rotate, {
       toValue: open ? 1 : 0,
-      duration: 160,
+      duration: theme.motion.duration.fast,
       useNativeDriver: true
-    }).start();
-  }, [open, rotate]);
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [open, rotate, theme.motion.duration.fast]);
   const rotation = rotate.interpolate({
     inputRange: [0, 1],
     outputRange: ['0deg', '180deg']

package/lib/module/components/Skeleton/SkeletonContent.js

@@ -216,19 +216,22 @@ const SkeletonContent = ({
   const wasLoadingRef = useRef(loading);
   const fadeAnim = useRef(createAnimatedValue(loading ? 0 : 1)).current;
   useEffect(() => {
+    let anim;
     if (wasLoadingRef.current && !loading) {
       fadeAnim.setValue(0);
-      Animated.timing(fadeAnim, {
+      anim = Animated.timing(fadeAnim, {
         toValue: 1,
         duration: resolvedFadeDuration,
         useNativeDriver: true
-      }).start();
+      });
+      anim.start();
     } else if (!wasLoadingRef.current && loading) {
       // Going back into loading from loaded — snap opacity so the
       // placeholder appears instantly when data invalidates.
       fadeAnim.setValue(1);
     }
     wasLoadingRef.current = loading;
+    return () => anim?.stop();
   }, [loading, fadeAnim, resolvedFadeDuration]);
   if (!loading) {
     if (resolvedFadeDuration <= 0) {