@webority-technologies/mobile 0.0.21 → 0.0.23

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) {

package/lib/commonjs/components/Slider/Slider.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); }
 const SIZE_MAP = {
@@ -79,10 +80,15 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   const [trackWidth, setTrackWidth] = (0, _react.useState)(0);
   const fillColor = theme.colors[TONE_TO_COLOR_KEY[tone]];
   const isRange = props.range === true;
+  const [currentValue, setCurrentValue] = (0, _index3.useControllableState)({
+    value: props.value,
+    defaultValue: props.defaultValue ?? (isRange ? [min, max] : min),
+    onChange: props.onChange
+  });
 
   // Current value is mirrored in refs so PanResponder closures get fresh values.
-  const lowRef = (0, _react.useRef)(isRange ? props.value[0] : props.value);
-  const highRef = (0, _react.useRef)(isRange ? props.value[1] : props.value);
+  const lowRef = (0, _react.useRef)(isRange ? currentValue[0] : currentValue);
+  const highRef = (0, _react.useRef)(isRange ? currentValue[1] : currentValue);
   const lastReportedLow = (0, _react.useRef)(lowRef.current);
   const lastReportedHigh = (0, _react.useRef)(highRef.current);
 
@@ -120,7 +126,7 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   (0, _react.useEffect)(() => {
     if (trackWidth <= 0) return;
     if (isRange) {
-      const [v0, v1] = props.value;
+      const [v0, v1] = currentValue;
       const lo = Math.min(v0, v1);
       const hi = Math.max(v0, v1);
       lowRef.current = lo;
@@ -130,38 +136,34 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
       (0, _index.setNativeValue)(lowX, valueToPx(lo, trackWidth));
       (0, _index.setNativeValue)(highX, valueToPx(hi, trackWidth));
     } else {
-      const v = props.value;
+      const v = currentValue;
       lowRef.current = v;
       highRef.current = v;
       lastReportedLow.current = v;
       (0, _index.setNativeValue)(lowX, valueToPx(v, trackWidth));
     }
-    // We intentionally listen to props.value across both shapes via JSON; ESLint is fine.
+    // We intentionally listen to the value across both shapes via JSON; ESLint is fine.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [JSON.stringify(props.value), trackWidth, isRange, valueToPx]);
+  }, [JSON.stringify(currentValue), trackWidth, isRange, valueToPx]);
   const onTrackLayout = (0, _react.useCallback)(e => {
     const w = e.nativeEvent.layout.width;
     setTrackWidth(w);
     // Initialize positions immediately.
     if (isRange) {
-      const [v0, v1] = props.value;
+      const [v0, v1] = currentValue;
       const lo = Math.min(v0, v1);
       const hi = Math.max(v0, v1);
       (0, _index.setNativeValue)(lowX, valueToPx(lo, w));
       (0, _index.setNativeValue)(highX, valueToPx(hi, w));
     } else {
-      (0, _index.setNativeValue)(lowX, valueToPx(props.value, w));
+      (0, _index.setNativeValue)(lowX, valueToPx(currentValue, w));
     }
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [isRange, valueToPx]);
   const fireChange = (0, _react.useCallback)((lo, hi) => {
-    if (isRange) {
-      props.onChange([lo, hi]);
-    } else {
-      props.onChange(lo);
-    }
-  }, [isRange, props]);
+    setCurrentValue(isRange ? [lo, hi] : lo);
+  }, [isRange, setCurrentValue]);
   const animateThumbPress = (0, _react.useCallback)((target, opacity, pressed) => {
     if (thumbPressAnimationEnabled) {
       _reactNative.Animated.spring(target, {
@@ -196,24 +198,29 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
         if (trackWidth <= 0) return;
         const nextPx = clamp(dragOffsetRef.current + gesture.dx, 0, trackWidth);
         let nextValue = pxToValue(nextPx, trackWidth);
+
+        // Only touch the native driver + fire onChange when the snapped value
+        // actually changes — between step boundaries the drag is a visual
+        // no-op (px is derived from the snapped value), so this drops the
+        // per-frame native round-trip and per-frame consumer re-render.
         if (which === 'low') {
           if (isRange && nextValue > highRef.current) nextValue = highRef.current;
           if (nextValue !== lastReportedLow.current) {
             if (sliderTheme?.stepHaptic ?? false) (0, _index2.triggerHaptic)('selection');
             lastReportedLow.current = nextValue;
+            lowRef.current = nextValue;
+            (0, _index.setNativeValue)(lowX, valueToPx(nextValue, trackWidth));
+            fireChange(nextValue, highRef.current);
           }
-          lowRef.current = nextValue;
-          (0, _index.setNativeValue)(lowX, valueToPx(nextValue, trackWidth));
-          fireChange(nextValue, highRef.current);
         } else {
           if (isRange && nextValue < lowRef.current) nextValue = lowRef.current;
           if (nextValue !== lastReportedHigh.current) {
             if (sliderTheme?.stepHaptic ?? false) (0, _index2.triggerHaptic)('selection');
             lastReportedHigh.current = nextValue;
+            highRef.current = nextValue;
+            (0, _index.setNativeValue)(highX, valueToPx(nextValue, trackWidth));
+            fireChange(lowRef.current, nextValue);
           }
-          highRef.current = nextValue;
-          (0, _index.setNativeValue)(highX, valueToPx(nextValue, trackWidth));
-          fireChange(lowRef.current, nextValue);
         }
       },
       onPanResponderRelease: () => {
@@ -272,12 +279,21 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
       }
     }
   }, [disabled, step, isRange, min, max, valueToPx, trackWidth, lowX, fireChange, sliderTheme]);
-
-  // Computed values for fill bar.
-  const fillLeft = isRange ? lowX : new _reactNative.Animated.Value(0);
-  const fillWidth = isRange ? _reactNative.Animated.subtract(highX, lowX) : lowX;
   const thumbRadius = sizeCfg.thumbDiameter / 2;
 
+  // Stable Animated nodes for the fill bar and thumb offsets — created once and
+  // memoised so a render doesn't rebuild `new Animated.Value(...)` /
+  // Animated.subtract nodes and re-attach the animation graph every pass.
+  const zeroX = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const thumbRadiusX = (0, _react.useRef)((0, _index.createAnimatedValue)(thumbRadius)).current;
+  (0, _react.useEffect)(() => {
+    (0, _index.setNativeValue)(thumbRadiusX, thumbRadius);
+  }, [thumbRadius, thumbRadiusX]);
+  const fillLeft = isRange ? lowX : zeroX;
+  const fillWidth = (0, _react.useMemo)(() => isRange ? _reactNative.Animated.subtract(highX, lowX) : lowX, [isRange, highX, lowX]);
+  const lowTranslateX = (0, _react.useMemo)(() => _reactNative.Animated.subtract(lowX, thumbRadiusX), [lowX, thumbRadiusX]);
+  const highTranslateX = (0, _react.useMemo)(() => _reactNative.Animated.subtract(highX, thumbRadiusX), [highX, thumbRadiusX]);
+
   // Display values for labels.
   const lowDisplayValue = isRange ? lowRef.current : lowRef.current;
   const highDisplayValue = highRef.current;
@@ -330,7 +346,7 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
             backgroundColor: theme.colors.background.elevated,
             borderColor: disabled ? theme.colors.surface.disabled : fillColor,
             transform: [{
-              translateX: _reactNative.Animated.subtract(lowX, new _reactNative.Animated.Value(thumbRadius))
+              translateX: lowTranslateX
             }, {
               scale: lowScale
             }],
@@ -358,7 +374,7 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
             backgroundColor: theme.colors.background.elevated,
             borderColor: disabled ? theme.colors.surface.disabled : fillColor,
             transform: [{
-              translateX: _reactNative.Animated.subtract(highX, new _reactNative.Animated.Value(thumbRadius))
+              translateX: highTranslateX
             }, {
               scale: highScale
             }],

package/lib/commonjs/components/Spinner/Spinner.js

@@ -10,9 +10,9 @@ 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 sizeMap = {
-  small: 20,
-  medium: 32,
-  large: 48
+  sm: 20,
+  md: 32,
+  lg: 48
 };
 const DOT_COUNT = 3;
 const DOT_STAGGER_MS = 150;
@@ -55,7 +55,7 @@ const Dot = ({
 };
 const Spinner = exports.Spinner = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   const {
-    size = 'medium',
+    size = 'md',
     color,
     message,
     overlay = false,
@@ -98,7 +98,7 @@ const Spinner = exports.Spinner = /*#__PURE__*/(0, _react.forwardRef)((props, re
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
       color: resolvedColor,
-      size: size === 'small' ? 'small' : 'large',
+      size: size === 'sm' ? 'small' : 'large',
       style: {
         width: dimension,
         height: dimension

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

@@ -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 {

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