@webority-technologies/mobile 0.0.22 → 0.0.23

package/lib/commonjs/components/NumberInput/NumberInput.js

@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.NumberInput = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
-var _index = require("../../theme/index.js");
-var _index2 = require("../../utils/index.js");
+var _index = require("../../hooks/index.js");
+var _index2 = require("../../theme/index.js");
+var _index3 = require("../../utils/index.js");
 var _FieldBase = require("../FieldBase/FieldBase.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -48,6 +49,7 @@ const sanitizeTyped = (raw, allowDecimal) => {
 const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   const {
     value,
+    defaultValue,
     onChange,
     min = Number.NEGATIVE_INFINITY,
     max = Number.POSITIVE_INFINITY,
@@ -71,7 +73,12 @@ const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((p
     textInputProps,
     testID
   } = props;
-  const theme = (0, _index.useTheme)();
+  const [current, setCurrent] = (0, _index.useControllableState)({
+    value,
+    defaultValue: defaultValue ?? props.min ?? 0,
+    onChange
+  });
+  const theme = (0, _index2.useTheme)();
   const sizeTokens = (0, _FieldBase.resolveFieldSize)(theme, size);
   const fieldText = (0, _FieldBase.resolveFieldTextStyle)(theme, {
     disabled
@@ -81,7 +88,7 @@ const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((p
   const longPressInterval = theme.components.numberInput?.longPressIntervalMs ?? DEFAULT_LONG_PRESS_INTERVAL;
   const pressHaptic = theme.components.numberInput?.pressHaptic ?? false;
   const inputRef = (0, _react.useRef)(null);
-  const [draft, setDraft] = (0, _react.useState)(formatValue(value, allowDecimal, precision));
+  const [draft, setDraft] = (0, _react.useState)(formatValue(current, allowDecimal, precision));
   const [editing, setEditing] = (0, _react.useState)(false);
   const [focused, setFocused] = (0, _react.useState)(false);
   const repeatTimeoutRef = (0, _react.useRef)(null);
@@ -99,41 +106,41 @@ const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((p
   (0, _react.useEffect)(() => clearRepeat, [clearRepeat]);
   (0, _react.useEffect)(() => {
     if (!editing) {
-      setDraft(formatValue(value, allowDecimal, precision));
+      setDraft(formatValue(current, allowDecimal, precision));
     }
-  }, [value, allowDecimal, precision, editing]);
-  const atMin = value <= min;
-  const atMax = value >= max;
+  }, [current, allowDecimal, precision, editing]);
+  const atMin = current <= min;
+  const atMax = current >= max;
   const interactive = !disabled;
   const setExternal = (0, _react.useCallback)(next => {
     const rounded = roundToPrecision(next, allowDecimal ? precision : 0);
     const clamped = clamp(rounded, min, max);
-    if (clamped !== value) {
-      onChange(clamped);
+    if (clamped !== current) {
+      setCurrent(clamped);
     }
-  }, [allowDecimal, max, min, onChange, precision, value]);
+  }, [allowDecimal, max, min, setCurrent, precision, current]);
   const decrement = (0, _react.useCallback)(() => {
     if (!interactive || atMin) return;
-    if (pressHaptic) (0, _index2.triggerHaptic)('impactLight');
-    setExternal(value - step);
-  }, [atMin, interactive, pressHaptic, setExternal, step, value]);
+    if (pressHaptic) (0, _index3.triggerHaptic)('impactLight');
+    setExternal(current - step);
+  }, [atMin, interactive, pressHaptic, setExternal, step, current]);
   const increment = (0, _react.useCallback)(() => {
     if (!interactive || atMax) return;
-    if (pressHaptic) (0, _index2.triggerHaptic)('impactLight');
-    setExternal(value + step);
-  }, [atMax, interactive, pressHaptic, setExternal, step, value]);
+    if (pressHaptic) (0, _index3.triggerHaptic)('impactLight');
+    setExternal(current + step);
+  }, [atMax, interactive, pressHaptic, setExternal, step, current]);
   _react.default.useImperativeHandle(ref, () => ({
     focus: () => inputRef.current?.focus(),
     blur: () => inputRef.current?.blur(),
     clear: () => {
       setDraft('');
       if (Number.isFinite(min) && min > 0) {
-        onChange(min);
+        setCurrent(min);
       } else {
-        onChange(0 < min ? min : 0 > max ? max : 0);
+        setCurrent(0 < min ? min : 0 > max ? max : 0);
       }
     }
-  }), [max, min, onChange]);
+  }), [max, min, setCurrent]);
   const startRepeating = (0, _react.useCallback)(direction => {
     if (!interactive) return;
     clearRepeat();
@@ -153,27 +160,27 @@ const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((p
     const parsed = Number(cleaned);
     if (cleaned !== '' && cleaned !== '-' && cleaned !== '.' && Number.isFinite(parsed)) {
       if (parsed >= min && parsed <= max) {
-        if (parsed !== value) {
-          onChange(roundToPrecision(parsed, allowDecimal ? precision : 0));
+        if (parsed !== current) {
+          setCurrent(roundToPrecision(parsed, allowDecimal ? precision : 0));
         }
       }
     }
-  }, [allowDecimal, max, min, onChange, precision, value]);
+  }, [allowDecimal, max, min, setCurrent, precision, current]);
   const handleBlur = (0, _react.useCallback)(() => {
     setEditing(false);
     setFocused(false);
     const parsed = Number(draft);
     if (draft === '' || !Number.isFinite(parsed)) {
-      setDraft(formatValue(value, allowDecimal, precision));
+      setDraft(formatValue(current, allowDecimal, precision));
       return;
     }
     const rounded = roundToPrecision(parsed, allowDecimal ? precision : 0);
     const clamped = clamp(rounded, min, max);
-    if (clamped !== value) {
-      onChange(clamped);
+    if (clamped !== current) {
+      setCurrent(clamped);
     }
     setDraft(formatValue(clamped, allowDecimal, precision));
-  }, [allowDecimal, draft, max, min, onChange, precision, value]);
+  }, [allowDecimal, draft, max, min, setCurrent, precision, current]);
   const handleFocus = (0, _react.useCallback)(() => {
     setEditing(true);
     setFocused(true);
@@ -237,7 +244,7 @@ const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((p
         accessibilityRole: "adjustable",
         accessibilityLabel: accessibleInputLabel,
         accessibilityValue: {
-          now: Number.isFinite(value) ? value : 0
+          now: Number.isFinite(current) ? current : 0
         },
         accessibilityState: {
           disabled

package/lib/commonjs/components/OTPInput/OTPInput.js

@@ -7,7 +7,8 @@ exports.default = exports.OTPInput = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _index = require("../../theme/index.js");
-var _index2 = require("../../utils/index.js");
+var _index2 = require("../../hooks/index.js");
+var _index3 = require("../../utils/index.js");
 var _FieldBase = require("../FieldBase/FieldBase.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -41,6 +42,7 @@ const sanitizeChar = (input, kind) => {
 const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   const {
     value,
+    defaultValue,
     onChange,
     onComplete,
     length = 6,
@@ -56,6 +58,11 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
     textStyle,
     testID
   } = props;
+  const [current, setCurrent] = (0, _index2.useControllableState)({
+    value,
+    defaultValue: defaultValue ?? '',
+    onChange
+  });
   const theme = (0, _index.useTheme)();
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const sizeStyles = {
@@ -86,6 +93,7 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
   }, [length]);
   const previousFocusedIndexRef = (0, _react.useRef)(-1);
   const shakeOnError = theme.components.otpInput?.shakeOnError ?? false;
+  const reduceMotion = (0, _index2.useReducedMotion)();
   const errorHaptic = theme.components.otpInput?.errorHaptic ?? false;
   const selectionHaptic = theme.components.otpInput?.selectionHaptic ?? false;
   const hasError = Boolean(error);
@@ -95,11 +103,12 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
   // error is initially true — there's no transition to animate.
   (0, _react.useEffect)(() => {
     const isFirstRun = previousErrorRef.current === null;
+    let anim;
     if (!isFirstRun && hasError && !previousErrorRef.current) {
-      if (errorHaptic) (0, _index2.triggerHaptic)('notificationError');
-      if (shakeOnError) {
+      if (errorHaptic) (0, _index3.triggerHaptic)('notificationError');
+      if (shakeOnError && !reduceMotion) {
         (0, _index.setNativeValue)(shake, 0);
-        _reactNative.Animated.sequence([_reactNative.Animated.timing(shake, {
+        anim = _reactNative.Animated.sequence([_reactNative.Animated.timing(shake, {
           toValue: 1,
           duration: 75,
           easing: _reactNative.Easing.linear,
@@ -119,10 +128,12 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
           duration: 75,
           easing: _reactNative.Easing.linear,
           useNativeDriver: true
-        })]).start();
+        })]);
+        anim.start();
       }
     }
     previousErrorRef.current = hasError;
+    return () => anim?.stop();
   }, [hasError, shake, shakeOnError, errorHaptic]);
 
   // Animate underline opacity for the focused cell. Skip on first mount
@@ -132,17 +143,21 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
     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;
-      _reactNative.Animated.timing(anim, {
+      const animation = _reactNative.Animated.timing(anim, {
         toValue: target,
         duration: theme.motion.duration.fast,
         easing: _reactNative.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 = (0, _react.useCallback)(index => {
     const target = inputsRef.current[index];
@@ -157,10 +172,10 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
       current?.blur();
     },
     clear: () => {
-      onChange('');
+      setCurrent('');
       focusCell(0);
     }
-  }), [focusCell, focusedIndex, onChange]);
+  }), [focusCell, focusedIndex, setCurrent]);
   (0, _react.useEffect)(() => {
     if (autoFocus && !disabled) {
       // Defer one frame so the inputs are mounted.
@@ -171,19 +186,19 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
   }, [autoFocus, disabled, focusCell]);
   const cells = (0, _react.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 = (0, _react.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 = (0, _react.useCallback)((index, raw) => {
     // Strip the ZWSP placeholder (used so iOS fires onKeyPress/Backspace on otherwise-empty cells).
     const stripped = raw.replace(/\u200B/g, '');
@@ -213,10 +228,10 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
       writeIndex += 1;
     }
     const next = chars.join('').slice(0, length);
-    const previousLength = value.length;
+    const previousLength = current.length;
     updateValue(next);
     if (next.length !== previousLength && selectionHaptic) {
-      (0, _index2.triggerHaptic)('selection');
+      (0, _index3.triggerHaptic)('selection');
     }
 
     // Move focus to the next empty cell or last cell.
@@ -226,7 +241,7 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
     } else {
       focusCell(nextFocus);
     }
-  }, [cells, focusCell, keyboardType, length, selectionHaptic, updateValue, value]);
+  }, [cells, focusCell, keyboardType, length, selectionHaptic, updateValue, current]);
   const handleKeyPress = (0, _react.useCallback)((index, e) => {
     const key = e.nativeEvent.key;
     if (key !== 'Backspace') return;

package/lib/commonjs/components/Radio/Radio.js

@@ -44,7 +44,7 @@ const Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
   const {
     value,
     selected: selectedProp,
-    onSelect,
+    onChange,
     disabled: disabledProp = false,
     label,
     size = 'md',
@@ -74,13 +74,15 @@ const Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
   const resolvedHaptic = haptic === undefined ? pressHapticEnabled ? 'selection' : false : haptic;
   const progress = (0, _react.useRef)((0, _index.createAnimatedValue)(selected ? 1 : 0)).current;
   (0, _react.useEffect)(() => {
-    _reactNative.Animated.spring(progress, {
+    const anim = _reactNative.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],
@@ -90,9 +92,9 @@ const Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
     if (disabled) return;
     if (resolvedHaptic !== false) (0, _hapticUtils.triggerHaptic)(resolvedHaptic);
     if (ctx) {
-      ctx.onSelect(value);
+      ctx.onChange(value);
     } else {
-      onSelect?.(value);
+      onChange?.(value);
     }
     rest.onPressOut?.(event);
   };

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

@@ -7,10 +7,12 @@ exports.default = exports.RadioGroup = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _Radio = require("./Radio.js");
+var _index = require("../../hooks/index.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const RadioGroup = ({
   value,
+  defaultValue,
   onChange,
   children,
   disabled = false,
@@ -18,11 +20,16 @@ const RadioGroup = ({
   style,
   testID
 }) => {
+  const [current, setCurrent] = (0, _index.useControllableState)({
+    value,
+    defaultValue: defaultValue ?? undefined,
+    onChange: onChange
+  });
   const ctx = (0, _react.useMemo)(() => ({
-    selectedValue: value,
-    onSelect: onChange,
+    selectedValue: current,
+    onChange: setCurrent,
     disabled
-  }), [value, onChange, disabled]);
+  }), [current, setCurrent, disabled]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Radio.RadioGroupContext.Provider, {
     value: ctx,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {

package/lib/commonjs/components/SearchBar/SearchBar.js

@@ -80,12 +80,14 @@ const SearchBar = exports.SearchBar = /*#__PURE__*/(0, _react.forwardRef)((props
   }, [debouncedValue, debounceMs, onChangeText]);
   const showCancelButton = showCancel && isFocused;
   (0, _react.useEffect)(() => {
-    _reactNative.Animated.timing(cancelAnim, {
+    const anim = _reactNative.Animated.timing(cancelAnim, {
       toValue: showCancelButton ? 1 : 0,
       duration: 200,
       easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
       useNativeDriver: false
-    }).start();
+    });
+    anim.start();
+    return () => anim.stop();
   }, [showCancelButton, cancelAnim, theme.motion.easing.standard]);
   const handleChangeText = (0, _react.useCallback)(text => {
     if (debounceMs !== undefined) {

package/lib/commonjs/components/SegmentedControl/SegmentedControl.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _index = require("../../theme/index.js");
 var _index2 = require("../../utils/index.js");
+var _index3 = require("../../hooks/index.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
@@ -34,7 +35,8 @@ const TRACK_PADDING = 2;
 const SegmentedControl = exports.SegmentedControl = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   const {
     segments,
-    value,
+    value: valueProp,
+    defaultValue,
     onChange,
     size = 'md',
     fullWidth = true,
@@ -49,6 +51,11 @@ const SegmentedControl = exports.SegmentedControl = /*#__PURE__*/(0, _react.forw
     labelStyle,
     testID
   } = props;
+  const [current, setCurrent] = (0, _index3.useControllableState)({
+    value: valueProp,
+    defaultValue: defaultValue ?? segments[0]?.value,
+    onChange
+  });
   const theme = (0, _index.useTheme)();
   const segTheme = theme.components.segmentedControl;
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
@@ -69,23 +76,26 @@ const SegmentedControl = exports.SegmentedControl = /*#__PURE__*/(0, _react.forw
   // only animate translateX via the native driver.
   const [trackWidth, setTrackWidth] = (0, _react.useState)(0);
   const thumbTranslateX = (0, _react.useRef)((0, _index.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 = (0, _react.useCallback)((index, segWidth) => {
-    if (segWidth <= 0) return;
+    if (segWidth <= 0) return undefined;
     const targetX = trackPadding + segWidth * index;
     const spring = theme.motion.spring.snappy;
-    _reactNative.Animated.spring(thumbTranslateX, {
+    const anim = _reactNative.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]);
   (0, _react.useEffect)(() => {
     if (segmentWidth > 0) {
-      animateThumb(activeIndex, segmentWidth);
+      const anim = animateThumb(activeIndex, segmentWidth);
+      return () => anim?.stop();
     }
   }, [activeIndex, segmentWidth, animateThumb]);
   const handleTrackLayout = (0, _react.useCallback)(e => {
@@ -96,10 +106,10 @@ const SegmentedControl = exports.SegmentedControl = /*#__PURE__*/(0, _react.forw
   }, [trackWidth]);
   const handlePress = (0, _react.useCallback)(segment => {
     if (disabled) return;
-    if (segment.value === value) return;
+    if (segment.value === current) return;
     if (changeHapticEnabled) (0, _index2.triggerHaptic)('selection');
-    onChange(segment.value);
-  }, [disabled, onChange, value, changeHapticEnabled]);
+    setCurrent(segment.value);
+  }, [disabled, setCurrent, current, changeHapticEnabled]);
   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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -130,7 +140,7 @@ const SegmentedControl = exports.SegmentedControl = /*#__PURE__*/(0, _react.forw
         ...theme.shadows.sm
       }, selectedIndicatorStyle]
     }) : null, segments.map(segment => {
-      const isActive = segment.value === value;
+      const isActive = segment.value === current;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
         onPress: () => handlePress(segment),
         disabled: disabled,

package/lib/commonjs/components/Select/Select.js

@@ -66,34 +66,32 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   const backdropAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   const sheetAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(sheetMaxHeight)).current;
   (0, _react.useEffect)(() => {
-    if (open) {
-      _reactNative.Animated.parallel([
-      // Backdrop opacity uses JS driver — see Modal.tsx for the Fabric reason.
-      _reactNative.Animated.timing(backdropAnim, {
-        toValue: 1,
-        duration: theme.motion.duration.fast,
-        easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
-        useNativeDriver: false
-      }), _reactNative.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 {
-      _reactNative.Animated.parallel([_reactNative.Animated.timing(backdropAnim, {
-        toValue: 0,
-        duration: theme.motion.duration.fast,
-        easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
-        useNativeDriver: false
-      }), _reactNative.Animated.timing(sheetAnim, {
-        toValue: sheetMaxHeight,
-        duration: theme.motion.duration.fast,
-        easing: _reactNative.Easing.bezier(...theme.motion.easing.accelerate),
-        useNativeDriver: true
-      })]).start();
-    }
+    const anim = open ? _reactNative.Animated.parallel([
+    // Backdrop opacity uses JS driver — see Modal.tsx for the Fabric reason.
+    _reactNative.Animated.timing(backdropAnim, {
+      toValue: 1,
+      duration: theme.motion.duration.fast,
+      easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    }), _reactNative.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
+    })]) : _reactNative.Animated.parallel([_reactNative.Animated.timing(backdropAnim, {
+      toValue: 0,
+      duration: theme.motion.duration.fast,
+      easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    }), _reactNative.Animated.timing(sheetAnim, {
+      toValue: sheetMaxHeight,
+      duration: theme.motion.duration.fast,
+      easing: _reactNative.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.
@@ -391,14 +389,17 @@ const Chevron = ({
   size,
   open
 }) => {
+  const theme = (0, _index.useTheme)();
   const rotate = (0, _react.useRef)((0, _index.createAnimatedValue)(open ? 1 : 0)).current;
   (0, _react.useEffect)(() => {
-    _reactNative.Animated.timing(rotate, {
+    const anim = _reactNative.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/commonjs/components/Skeleton/SkeletonContent.js

@@ -221,19 +221,22 @@ const SkeletonContent = ({
   const wasLoadingRef = (0, _react.useRef)(loading);
   const fadeAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(loading ? 0 : 1)).current;
   (0, _react.useEffect)(() => {
+    let anim;
     if (wasLoadingRef.current && !loading) {
       fadeAnim.setValue(0);
-      _reactNative.Animated.timing(fadeAnim, {
+      anim = _reactNative.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) {