@webority-technologies/mobile 0.0.22 → 0.0.24

package/lib/commonjs/components/Stepper/Stepper.js

@@ -39,7 +39,7 @@ const StepCircle = ({
   pulseSize,
   pulseEnabled,
   pulseDuration,
-  pressHapticEnabled,
+  pressHaptic,
   circleSlotStyle
 }) => {
   const isActive = status === 'active';
@@ -86,7 +86,7 @@ const StepCircle = ({
   const canPress = interactive && status === 'complete';
   const handlePress = () => {
     if (!canPress) return;
-    if (pressHapticEnabled) (0, _hapticUtils.triggerHaptic)('selection');
+    if (pressHaptic) (0, _hapticUtils.triggerHaptic)(pressHaptic);
     onPress?.(index);
   };
   const inner = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -181,6 +181,7 @@ const Stepper = exports.Stepper = /*#__PURE__*/(0, _react.forwardRef)((props, re
     circleStyle,
     labelStyle,
     connectorStyle,
+    haptic,
     testID
   } = props;
   const theme = (0, _index.useTheme)();
@@ -189,7 +190,7 @@ const Stepper = exports.Stepper = /*#__PURE__*/(0, _react.forwardRef)((props, re
   const pulseSize = stepperTheme?.pulseSize ?? PULSE_SIZE;
   const pulseEnabled = stepperTheme?.pulseAnimation ?? false;
   const pulseDuration = stepperTheme?.pulseDuration ?? PULSE_DURATION;
-  const pressHapticEnabled = stepperTheme?.pressHaptic ?? false;
+  const pressHaptic = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const toneColor = toneColorFor(theme, tone);
   const upcomingColor = theme.colors.border.primary;
@@ -270,7 +271,7 @@ const Stepper = exports.Stepper = /*#__PURE__*/(0, _react.forwardRef)((props, re
           pulseSize: pulseSize,
           pulseEnabled: pulseEnabled,
           pulseDuration: pulseDuration,
-          pressHapticEnabled: pressHapticEnabled,
+          pressHaptic: pressHaptic,
           circleSlotStyle: circleStyle
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.hLabel, {
@@ -309,7 +310,7 @@ const Stepper = exports.Stepper = /*#__PURE__*/(0, _react.forwardRef)((props, re
             pulseSize: pulseSize,
             pulseEnabled: pulseEnabled,
             pulseDuration: pulseDuration,
-            pressHapticEnabled: pressHapticEnabled,
+            pressHaptic: pressHaptic,
             circleSlotStyle: circleStyle
           }), !isLast ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
             style: [styles.vConnectorContainer, connectorStyle],

package/lib/commonjs/components/Swipeable/Swipeable.js

@@ -62,6 +62,7 @@ const Swipeable = props => {
     onSwipeOpen,
     onSwipeClose,
     disabled = false,
+    haptic,
     containerStyle,
     contentStyle: contentSlotStyle,
     actionStyle,
@@ -80,9 +81,6 @@ const Swipeable = props => {
     stiffness: swipeTheme?.springStiffness ?? SPRING_CONFIG.stiffness,
     mass: swipeTheme?.springMass ?? SPRING_CONFIG.mass
   };
-  const fullSwipeHapticEnabled = swipeTheme?.fullSwipeHaptic ?? true;
-  const actionPressHapticEnabled = swipeTheme?.actionPressHaptic ?? true;
-  const a11yActionHapticEnabled = swipeTheme?.a11yActionHaptic ?? true;
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const hasLeft = !!leftActions && leftActions.length > 0;
   const hasRight = !!rightActions && rightActions.length > 0;
@@ -122,22 +120,23 @@ const Swipeable = props => {
     const list = side === 'left' ? leftActions : rightActions;
     const first = list?.[0];
     if (!first) return;
-    if (fullSwipeHapticEnabled) (0, _index2.triggerHaptic)('notificationSuccess');
+    if (haptic !== false) (0, _index2.triggerHaptic)('notificationSuccess');
     first.onPress();
     // After the off-screen slide, snap back to 0 silently.
     translateX.value = (0, _reactNativeReanimated.withSpring)(0, springConfig);
     openSideRef.current = null;
     onSwipeClose?.();
-  }, [leftActions, rightActions, translateX, onSwipeClose, springConfig, fullSwipeHapticEnabled]);
+  }, [leftActions, rightActions, translateX, onSwipeClose, springConfig, haptic]);
   const close = (0, _react.useCallback)(() => {
     translateX.value = (0, _reactNativeReanimated.withSpring)(0, springConfig);
     notifyClose();
   }, [translateX, notifyClose, springConfig]);
   const handleActionPress = (0, _react.useCallback)(action => {
-    if (actionPressHapticEnabled) (0, _index2.triggerHaptic)('selection');
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index2.triggerHaptic)(h);
     action.onPress();
     close();
-  }, [close, actionPressHapticEnabled]);
+  }, [close, haptic]);
 
   // ───────── Pan gesture (UI thread) ─────────
   const panGesture = (0, _react.useMemo)(() => {
@@ -243,10 +242,10 @@ const Swipeable = props => {
     const all = [...(leftActions ?? []), ...(rightActions ?? [])];
     const match = all.find(a => a.key === name);
     if (match) {
-      if (a11yActionHapticEnabled) (0, _index2.triggerHaptic)('selection');
+      if (haptic !== false) (0, _index2.triggerHaptic)('selection');
       match.onPress();
     }
-  }, [leftActions, rightActions, a11yActionHapticEnabled]);
+  }, [leftActions, rightActions, haptic]);
 
   // ───────── Render ─────────
   // No actions configured → render children directly; zero gesture overhead.

package/lib/commonjs/components/Switch/Switch.js

@@ -7,6 +7,7 @@ exports.default = exports.Switch = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _index = require("../../theme/index.js");
+var _index2 = require("../../hooks/index.js");
 var _hapticUtils = require("../../utils/hapticUtils.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); }
@@ -46,7 +47,8 @@ const toneColor = (theme, tone) => {
 const Switch = exports.Switch = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   const {
     value,
-    onValueChange,
+    defaultValue,
+    onChange,
     disabled = false,
     size = 'md',
     tone = 'primary',
@@ -61,6 +63,11 @@ const Switch = exports.Switch = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     testID,
     ...rest
   } = props;
+  const [current, setCurrent] = (0, _index2.useControllableState)({
+    value,
+    defaultValue: defaultValue ?? false,
+    onChange
+  });
   const theme = (0, _index.useTheme)();
   const sizeStyles = {
     ...sizeMap[size],
@@ -70,25 +77,29 @@ const Switch = exports.Switch = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const offTrackColor = theme.mode === 'dark' ? theme.colors.secondary : theme.colors.surface.disabled;
   const onTrackColor = toneColor(theme, tone);
-  const progress = (0, _react.useRef)((0, _index.createAnimatedValue)(value ? 1 : 0)).current;
+  const progress = (0, _react.useRef)((0, _index.createAnimatedValue)(current ? 1 : 0)).current;
   (0, _react.useEffect)(() => {
-    _reactNative.Animated.spring(progress, {
-      toValue: value ? 1 : 0,
+    const anim = _reactNative.Animated.spring(progress, {
+      toValue: current ? 1 : 0,
       damping: theme.motion.spring.snappy.damping,
       stiffness: theme.motion.spring.snappy.stiffness,
       mass: theme.motion.spring.snappy.mass,
       useNativeDriver: true
-    }).start();
-  }, [value, progress, theme.motion.spring.snappy]);
-  const trackBgAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(value ? 1 : 0)).current;
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [current, progress, theme.motion.spring.snappy]);
+  const trackBgAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(current ? 1 : 0)).current;
   (0, _react.useEffect)(() => {
-    _reactNative.Animated.timing(trackBgAnim, {
-      toValue: value ? 1 : 0,
+    const anim = _reactNative.Animated.timing(trackBgAnim, {
+      toValue: current ? 1 : 0,
       duration: theme.motion.duration.fast,
       easing: _reactNative.Easing.out(_reactNative.Easing.ease),
       useNativeDriver: false
-    }).start();
-  }, [value, trackBgAnim, theme.motion.duration.fast]);
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [current, trackBgAnim, theme.motion.duration.fast]);
   const offX = sizeStyles.padding;
   const onX = sizeStyles.trackWidth - sizeStyles.thumbSize - sizeStyles.padding;
   const translateX = progress.interpolate({
@@ -107,7 +118,7 @@ const Switch = exports.Switch = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
       isFirstRender.current = false;
       return;
     }
-    _reactNative.Animated.sequence([_reactNative.Animated.spring(bounceScale, {
+    const anim = _reactNative.Animated.sequence([_reactNative.Animated.spring(bounceScale, {
       toValue: 1.15,
       damping: 10,
       stiffness: 220,
@@ -119,12 +130,14 @@ const Switch = exports.Switch = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
       stiffness: 240,
       mass: 1,
       useNativeDriver: true
-    })]).start();
-  }, [value, bounce, bounceScale]);
+    })]);
+    anim.start();
+    return () => anim.stop();
+  }, [current, bounce, bounceScale]);
   const handlePress = event => {
     if (disabled) return;
     if (haptic !== false) (0, _hapticUtils.triggerHaptic)(haptic);
-    onValueChange(!value);
+    setCurrent(!current);
     rest.onPressOut?.(event);
   };
   const accessibleLabel = accessibilityLabel ?? label;
@@ -135,7 +148,7 @@ const Switch = exports.Switch = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     accessibilityRole: "switch",
     accessibilityLabel: accessibleLabel,
     accessibilityState: {
-      checked: value,
+      checked: current,
       disabled
     },
     testID: testID,

package/lib/commonjs/components/Tabs/Tabs.js

@@ -38,6 +38,7 @@ const Tabs = exports.Tabs = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
     dividerStyle,
     indicatorStyle,
     progress,
+    haptic,
     accessibilityLabel,
     testID
   } = props;
@@ -51,7 +52,6 @@ const Tabs = exports.Tabs = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
   const pillInset = tabsTokens?.pillInset ?? 4;
   const disabledOpacity = tabsTokens?.disabledOpacity ?? 0.45;
   const badgeGap = tabsTokens?.badgeGap ?? 6;
-  const hapticOnPress = tabsTokens?.hapticOnPress ?? false;
 
   // Per-tab measured layouts (key → {x, width}).
   const [layouts, setLayouts] = (0, _react.useState)({});
@@ -87,7 +87,7 @@ const Tabs = exports.Tabs = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
     if (!activeLayout) return;
     if (useProgress) return;
     const spring = theme.motion.spring.snappy;
-    _reactNative.Animated.parallel([
+    const anim = _reactNative.Animated.parallel([
     // Both must use the JS driver: width can't run on native, and mixing
     // drivers on the same view (transform native + width JS) trips RN's
     // "node already moved to native" guard under the new architecture.
@@ -103,7 +103,9 @@ const Tabs = exports.Tabs = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
       stiffness: spring.stiffness,
       mass: spring.mass,
       useNativeDriver: false
-    })]).start();
+    })]);
+    anim.start();
+    return () => anim.stop();
   }, [activeLayout, activeKey, indicatorTranslateX, indicatorWidth, theme.motion.spring.snappy, useProgress]);
   const handleLayout = (0, _react.useCallback)(key => e => {
     const {
@@ -125,9 +127,10 @@ const Tabs = exports.Tabs = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
   const handlePress = (0, _react.useCallback)(tab => {
     if (tab.disabled) return;
     if (tab.key === activeKey) return;
-    if (hapticOnPress) (0, _index2.triggerHaptic)('selection');
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index2.triggerHaptic)(h);
     onChange(tab.key);
-  }, [activeKey, onChange, hapticOnPress]);
+  }, [activeKey, onChange, haptic]);
   const indicatorIsPill = variant === 'pills';
 
   // Indicator visual.

package/lib/commonjs/components/Text/Text.js

@@ -0,0 +1,142 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Text = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/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 VARIANTS = {
+  display: {
+    size: '4xl',
+    weight: 'bold',
+    line: 'tight',
+    color: 'primary',
+    heading: true
+  },
+  h1: {
+    size: '3xl',
+    weight: 'bold',
+    line: 'tight',
+    color: 'primary',
+    heading: true
+  },
+  h2: {
+    size: '2xl',
+    weight: 'semibold',
+    line: 'tight',
+    color: 'primary',
+    heading: true
+  },
+  h3: {
+    size: 'xl',
+    weight: 'semibold',
+    line: 'tight',
+    color: 'primary',
+    heading: true
+  },
+  title: {
+    size: 'lg',
+    weight: 'semibold',
+    line: 'normal',
+    color: 'primary'
+  },
+  body: {
+    size: 'base',
+    weight: 'normal',
+    line: 'normal',
+    color: 'primary'
+  },
+  bodySmall: {
+    size: 'sm',
+    weight: 'normal',
+    line: 'normal',
+    color: 'secondary'
+  },
+  caption: {
+    size: 'xs',
+    weight: 'normal',
+    line: 'normal',
+    color: 'tertiary'
+  },
+  label: {
+    size: 'sm',
+    weight: 'medium',
+    line: 'normal',
+    color: 'secondary'
+  },
+  overline: {
+    size: 'xs',
+    weight: 'semibold',
+    line: 'normal',
+    color: 'secondary',
+    uppercase: true,
+    letterSpacing: 'wide'
+  }
+};
+const TEXT_ROLES = {
+  primary: true,
+  secondary: true,
+  tertiary: true,
+  inverse: true,
+  disabled: true,
+  link: true
+};
+const SEMANTIC = {
+  success: true,
+  warning: true,
+  error: true,
+  info: true
+};
+const resolveColor = (theme, color) => {
+  // Text roles win over the same-named brand colour ('primary' -> text.primary),
+  // which is the intent the vast majority of the time for text.
+  if (TEXT_ROLES[color]) return theme.colors.text[color];
+  if (SEMANTIC[color]) return theme.colors[color];
+  return color; // raw colour string
+};
+const Text = exports.Text = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    variant = 'body',
+    color,
+    weight,
+    size,
+    align,
+    italic,
+    underline,
+    style,
+    children,
+    ...rest
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const textStyle = (0, _react.useMemo)(() => {
+    const spec = VARIANTS[variant];
+    const fontSize = typeof size === 'number' ? size : theme.typography.fontSize[size ?? spec.size];
+    const lineHeight = Math.round(fontSize * theme.typography.lineHeight[spec.line]);
+    return {
+      fontSize,
+      lineHeight,
+      color: resolveColor(theme, color ?? spec.color),
+      textAlign: align,
+      textTransform: spec.uppercase ? 'uppercase' : undefined,
+      letterSpacing: spec.letterSpacing ? theme.typography.letterSpacing[spec.letterSpacing] : undefined,
+      fontStyle: italic ? 'italic' : undefined,
+      textDecorationLine: underline ? 'underline' : undefined,
+      ...(0, _index.fontFor)(theme, weight ?? spec.weight)
+    };
+  }, [theme, variant, color, weight, size, align, italic, underline]);
+  const heading = VARIANTS[variant].heading;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    ref: ref,
+    style: [textStyle, style],
+    accessibilityRole: heading ? 'header' : rest.accessibilityRole,
+    ...rest,
+    children: children
+  });
+});
+Text.displayName = 'Text';
+var _default = exports.default = Text;
+//# sourceMappingURL=Text.js.map

package/lib/commonjs/components/Text/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Text", {
+  enumerable: true,
+  get: function () {
+    return _Text.Text;
+  }
+});
+var _Text = require("./Text.js");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/TimePicker/TimePicker.js

@@ -17,12 +17,12 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 /**
  * TimePicker supports two modes:
  *
- * 1. Controlled-modal mode — pass `visible`, `onSelect`, `onClose`. The
+ * 1. Controlled-modal mode — pass `visible`, `onChange`, `onClose`. The
  *    component renders only the modal sheet and the caller owns open/close
  *    state plus its own trigger UI.
  * 2. Trigger mode — omit `visible`. The component renders a PickerTrigger
  *    field (label / value / placeholder / chevron / clear / helper / error)
- *    and manages its own modal open state. `onSelect` is still called on
+ *    and manages its own modal open state. `onChange` is still called on
  *    confirm.
  */
 
@@ -76,6 +76,7 @@ const Wheel = ({
   onIndexChange,
   formatItem,
   theme,
+  haptic,
   testID
 }) => {
   const listRef = (0, _react.useRef)(null);
@@ -98,7 +99,6 @@ const Wheel = ({
       });
     }
   }, [selectedIndex, scrollY]);
-  const hapticEnabled = theme.components.timePicker?.haptic ?? false;
   const hapticDebounceMs = theme.components.timePicker?.hapticDebounceMs ?? HAPTIC_DEBOUNCE_MS;
   const onScroll = (0, _react.useMemo)(() => _reactNative.Animated.event([{
     nativeEvent: {
@@ -113,14 +113,15 @@ const Wheel = ({
       const idx = Math.round(y / ITEM_HEIGHT);
       if (idx !== lastIndexRef.current && idx >= 0 && idx < data.length) {
         const now = Date.now();
-        if (hapticEnabled && now - lastHapticAtRef.current >= hapticDebounceMs) {
-          (0, _hapticUtils.triggerHaptic)('selection');
+        if (now - lastHapticAtRef.current >= hapticDebounceMs) {
+          const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+          if (h) (0, _hapticUtils.triggerHaptic)(h);
           lastHapticAtRef.current = now;
         }
         lastIndexRef.current = idx;
       }
     }
-  }), [scrollY, data.length, hapticEnabled, hapticDebounceMs]);
+  }), [scrollY, data.length, haptic, hapticDebounceMs]);
   const onMomentumScrollEnd = (0, _react.useCallback)(event => {
     const y = event.nativeEvent.contentOffset.y;
     const idx = Math.max(0, Math.min(data.length - 1, Math.round(y / ITEM_HEIGHT)));
@@ -223,7 +224,7 @@ const TimePicker = props => {
   const {
     visible,
     value,
-    onSelect,
+    onChange,
     onClose,
     format = '12h',
     minuteStep = 1,
@@ -246,7 +247,8 @@ const TimePicker = props => {
     clearable,
     onClear,
     formatValue,
-    triggerStyle
+    triggerStyle,
+    haptic
   } = props;
   const isControlled = props.visible !== undefined;
   const [internalOpen, setInternalOpen] = (0, _react.useState)(false);
@@ -310,8 +312,9 @@ const TimePicker = props => {
   const opacity = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   const translateY = (0, _react.useRef)((0, _index.createAnimatedValue)(40)).current;
   (0, _react.useEffect)(() => {
+    let anim;
     if (open) {
-      _reactNative.Animated.parallel([
+      anim = _reactNative.Animated.parallel([
       // Backdrop opacity uses JS driver — see Modal.tsx for the Fabric reason.
       _reactNative.Animated.timing(opacity, {
         toValue: 1,
@@ -324,11 +327,13 @@ const TimePicker = props => {
         stiffness: theme.motion.spring.snappy.stiffness,
         mass: theme.motion.spring.snappy.mass,
         useNativeDriver: true
-      })]).start();
+      })]);
+      anim.start();
     } else {
       opacity.setValue(0);
       (0, _index.setNativeValue)(translateY, 40);
     }
+    return () => anim?.stop();
   }, [open, opacity, translateY, theme.motion]);
   const announce = (0, _react.useCallback)(msg => {
     if (_reactNative.Platform.OS === 'ios' || _reactNative.Platform.OS === 'android') {
@@ -348,21 +353,21 @@ const TimePicker = props => {
     announce(periods[idx] ?? '');
   }, [periods, announce]);
   const handleCancel = (0, _react.useCallback)(() => {
-    if (theme.components.timePicker?.haptic) (0, _hapticUtils.triggerHaptic)('selection');
+    if (haptic !== false) (0, _hapticUtils.triggerHaptic)('selection');
     handleCloseModal();
-  }, [handleCloseModal, theme.components.timePicker]);
+  }, [handleCloseModal, haptic]);
   const handleConfirm = (0, _react.useCallback)(() => {
     const displayHour = hours[hourIndex] ?? 0;
     const period = periods[periodIndex] ?? 'AM';
     const hour24 = to24h(displayHour, period, format);
     const minute = minutes[minuteIndex] ?? 0;
-    if (theme.components.timePicker?.haptic) (0, _hapticUtils.triggerHaptic)('notificationSuccess');
-    onSelect?.({
+    if (haptic !== false) (0, _hapticUtils.triggerHaptic)('notificationSuccess');
+    onChange?.({
       hour: hour24,
       minute
     });
     handleCloseModal();
-  }, [hours, hourIndex, periods, periodIndex, minutes, minuteIndex, format, onSelect, handleCloseModal, theme.components.timePicker]);
+  }, [hours, hourIndex, periods, periodIndex, minutes, minuteIndex, format, onChange, handleCloseModal, haptic]);
   const summary = (0, _react.useMemo)(() => {
     const displayHour = hours[hourIndex] ?? 0;
     const minute = minutes[minuteIndex] ?? 0;
@@ -446,6 +451,7 @@ const TimePicker = props => {
             onIndexChange: handleHourIndex,
             formatItem: formatHourItem,
             theme: theme,
+            haptic: haptic,
             testID: "time-picker-hour"
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: styles.separator,
@@ -458,6 +464,7 @@ const TimePicker = props => {
             onIndexChange: handleMinuteIndex,
             formatItem: formatMinuteItem,
             theme: theme,
+            haptic: haptic,
             testID: "time-picker-minute"
           }), format === '12h' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -470,6 +477,7 @@ const TimePicker = props => {
               onIndexChange: handlePeriodIndex,
               formatItem: formatPeriodItem,
               theme: theme,
+              haptic: haptic,
               testID: "time-picker-period"
             })]
           }) : null]

package/lib/commonjs/components/Toast/Toast.js

@@ -44,6 +44,18 @@ const Toast = ({
   const translateX = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   const opacity = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   const dismissedRef = (0, _react.useRef)(false);
+  const stackTranslate = position === 'top' ? index * stackOffset : -index * stackOffset;
+  const stackScale = Math.max(1 - index * stackScaleStep, stackMinScale);
+
+  // The stack offset rides on its own value so the enter spring (translateY)
+  // and the layout offset compose once instead of rebuilding a fresh
+  // `new Animated.Value` + `Animated.add` node on every render. setNativeValue
+  // keeps it in sync after the node has moved to the native driver.
+  const stackTranslateY = (0, _react.useRef)((0, _index.createAnimatedValue)(stackTranslate)).current;
+  (0, _react.useEffect)(() => {
+    (0, _index.setNativeValue)(stackTranslateY, stackTranslate);
+  }, [stackTranslate, stackTranslateY]);
+  const composedTranslateY = (0, _react.useMemo)(() => _reactNative.Animated.add(translateY, stackTranslateY), [translateY, stackTranslateY]);
   const dismiss = (animateOut = true) => {
     if (dismissedRef.current) return;
     dismissedRef.current = true;
@@ -62,7 +74,7 @@ const Toast = ({
     }
   };
   (0, _react.useEffect)(() => {
-    _reactNative.Animated.parallel([_reactNative.Animated.spring(translateY, {
+    const enter = _reactNative.Animated.parallel([_reactNative.Animated.spring(translateY, {
       toValue: 0,
       damping: enterSpringDamping,
       stiffness: enterSpringStiffness,
@@ -72,13 +84,17 @@ const Toast = ({
       toValue: 1,
       duration: theme.motion.duration.fast,
       useNativeDriver: true
-    })]).start();
+    })]);
+    enter.start();
     const duration = toast.duration ?? defaultDurationMs;
     if (duration > 0) {
       const timer = setTimeout(() => dismiss(true), duration);
-      return () => clearTimeout(timer);
+      return () => {
+        enter.stop();
+        clearTimeout(timer);
+      };
     }
-    return undefined;
+    return () => enter.stop();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const panResponder = (0, _react.useMemo)(() => _reactNative.PanResponder.create({
@@ -113,11 +129,7 @@ const Toast = ({
         })]).start();
       }
     }
-  }),
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  []);
-  const stackTranslate = position === 'top' ? index * stackOffset : -index * stackOffset;
-  const stackScale = Math.max(1 - index * stackScaleStep, stackMinScale);
+  }), [translateX, opacity, swipeDismissThreshold, swipeVelocityThreshold, theme.motion.duration.fast, onDismiss, toast.id]);
   const handleActionPress = () => {
     toast.action?.onPress();
     dismiss(true);
@@ -157,7 +169,7 @@ const Toast = ({
       shadowColor: theme.shadows.md.shadowColor,
       opacity,
       transform: [{
-        translateY: _reactNative.Animated.add(translateY, new _reactNative.Animated.Value(stackTranslate))
+        translateY: composedTranslateY
       }, {
         translateX
       }, {

package/lib/commonjs/components/Tooltip/Tooltip.js

@@ -107,6 +107,7 @@ const Tooltip = props => {
         }
       };
     }
+    let anim;
     if (visible) {
       measureAnchor();
       const enterAnims = [_reactNative.Animated.timing(opacity, {
@@ -123,7 +124,8 @@ const Tooltip = props => {
           useNativeDriver: true
         }));
       }
-      _reactNative.Animated.parallel(enterAnims).start();
+      anim = _reactNative.Animated.parallel(enterAnims);
+      anim.start();
       if (trigger === 'press') {
         if (autoHideTimer.current) clearTimeout(autoHideTimer.current);
         autoHideTimer.current = setTimeout(() => {
@@ -143,13 +145,15 @@ const Tooltip = props => {
           useNativeDriver: true
         }));
       }
-      _reactNative.Animated.parallel(exitAnims).start();
+      anim = _reactNative.Animated.parallel(exitAnims);
+      anim.start();
       if (autoHideTimer.current) {
         clearTimeout(autoHideTimer.current);
         autoHideTimer.current = null;
       }
     }
     return () => {
+      anim?.stop();
       if (autoHideTimer.current) {
         clearTimeout(autoHideTimer.current);
         autoHideTimer.current = null;