@coinbase/cds-mobile 8.32.3 → 8.33.0

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.33.0 (12/18/2025 PST)
+
+#### 🚀 Updates
+
+- New digitTransitionVariant for RollingNumber. [[#237](https://github.com/coinbase/cds/pull/237)]
+
 ## 8.32.3 (12/18/2025 PST)
 
 #### 🐞 Fixes

package/dts/motion/types.d.ts

@@ -1,3 +1,4 @@
+import type { WithSpringConfig, WithTimingConfig } from 'react-native-reanimated';
 export type HintMotionBaseProps = {
   /**
    * Disable animation on component mount
@@ -5,4 +6,24 @@ export type HintMotionBaseProps = {
    */
   disableAnimateOnMount?: boolean;
 };
+/**
+ * Transition configuration for Reanimated animations.
+ * Supports timing and spring animation types.
+ * Used for translations, opacity, color, and any other animated properties.
+ *
+ * @example
+ * // Spring animation
+ * { type: 'spring', damping: 18, stiffness: 280, mass: 0.3 }
+ *
+ * @example
+ * // Timing animation with easing
+ * { type: 'timing', duration: 300, easing: Easing.bezier(0.2, 0, 0, 1) }
+ */
+export type Transition =
+  | ({
+      type: 'timing';
+    } & WithTimingConfig)
+  | ({
+      type: 'spring';
+    } & WithSpringConfig);
 //# sourceMappingURL=types.d.ts.map

package/dts/motion/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/motion/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/motion/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAElF,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,UAAU,GAClB,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAAG,gBAAgB,CAAC,GACvC,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAAG,gBAAgB,CAAC,CAAC"}

package/dts/numbers/RollingNumber/DefaultRollingNumberDigit.d.ts

@@ -1,8 +1,17 @@
 import { type RollingNumberDigitComponent } from './RollingNumber';
 /**
- * Note that the DefaultRollingNumberDigit component implementation is different in web
- * and mobile due to different animation libraries and the performance issue in mobile.
- * This has nearly unnoticeable difference in animation effect.
- *  */
+ * Default digit component for RollingNumber on mobile.
+ *
+ * The mobile implementation differs from web due to platform-specific animation libraries:
+ * - Mobile uses react-native-reanimated with shared values and worklets
+ * - Web uses framer-motion with imperative `animate` calls
+ *
+ * For the "every" variant, mobile renders all 10 digits (0-9) stacked with absolute
+ * positioning and animates the container's translateY. Web renders only the necessary
+ * digits above/below the current value.
+ *
+ * For the "single" variant, mobile uses reanimated's `entering`/`exiting` props with
+ * custom animation worklets. Web uses imperative opacity crossfades on DOM sections.
+ */
 export declare const DefaultRollingNumberDigit: RollingNumberDigitComponent;
 //# sourceMappingURL=DefaultRollingNumberDigit.d.ts.map

package/dts/numbers/RollingNumber/DefaultRollingNumberDigit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultRollingNumberDigit.d.ts","sourceRoot":"","sources":["../../../src/numbers/RollingNumber/DefaultRollingNumberDigit.tsx"],"names":[],"mappings":"AAYA,OAAO,EAGL,KAAK,2BAA2B,EAEjC,MAAM,iBAAiB,CAAC;AAazB;;;;MAIM;AACN,eAAO,MAAM,yBAAyB,EAAE,2BAiEvC,CAAC"}
+{"version":3,"file":"DefaultRollingNumberDigit.d.ts","sourceRoot":"","sources":["../../../src/numbers/RollingNumber/DefaultRollingNumberDigit.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAGL,KAAK,2BAA2B,EAGjC,MAAM,iBAAiB,CAAC;AA6DzB;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,yBAAyB,EAAE,2BAoHvC,CAAC"}

package/dts/numbers/RollingNumber/DefaultRollingNumberValueSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultRollingNumberValueSection.d.ts","sourceRoot":"","sources":["../../../src/numbers/RollingNumber/DefaultRollingNumberValueSection.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EACV,kCAAkC,EAEnC,MAAM,iBAAiB,CAAC;AAOzB,eAAO,MAAM,gCAAgC,EAAE,kCA6I9C,CAAC"}
+{"version":3,"file":"DefaultRollingNumberValueSection.d.ts","sourceRoot":"","sources":["../../../src/numbers/RollingNumber/DefaultRollingNumberValueSection.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EACV,kCAAkC,EAEnC,MAAM,iBAAiB,CAAC;AAOzB,eAAO,MAAM,gCAAgC,EAAE,kCAuJ9C,CAAC"}

package/dts/numbers/RollingNumber/RollingNumber.d.ts

@@ -5,15 +5,13 @@ import {
   type ViewProps,
   type ViewStyle,
 } from 'react-native';
-import {
-  type AnimatedStyle,
-  type WithSpringConfig,
-  type WithTimingConfig,
-} from 'react-native-reanimated';
+import { type AnimatedStyle } from 'react-native-reanimated';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import type { KeyedNumberPart } from '@coinbase/cds-common/numbers/IntlNumberFormat';
+import { type SingleDirection } from '@coinbase/cds-common/numbers/useValueChangeDirection';
 import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
 import { type HStackProps } from '../../layout/HStack';
+import type { Transition } from '../../motion/types';
 import { Text, type TextBaseProps, type TextProps } from '../../typography/Text';
 export declare const digits: number[];
 /**
@@ -21,42 +19,26 @@ export declare const digits: number[];
  */
 export type RollingNumberTransitionConfig = {
   /**
-   * Transition override for the vertical translation animation.
+   * Transition override for the vertical translation animation (digit roll).
    */
-  y?:
-    | ({
-        type: 'timing';
-      } & WithTimingConfig)
-    | ({
-        type: 'spring';
-      } & WithSpringConfig);
+  y?: Transition;
   /**
-   * Transition override for the color interpolation animation.
+   * Transition override for the opacity animation during digit transitions.
+   * Controls how digits fade in/out during the single variant animation.
    */
-  color?:
-    | ({
-        type: 'timing';
-      } & WithTimingConfig)
-    | ({
-        type: 'spring';
-      } & WithSpringConfig);
-};
-export declare const defaultTransitionConfig: {
-  readonly y: {
-    readonly type: 'timing';
-    readonly duration: 300;
-    readonly easing: {
-      factory: () => (x: number) => number;
-    };
-  };
-  readonly color: {
-    readonly type: 'timing';
-    readonly duration: 1000;
-    readonly easing: {
-      factory: () => (x: number) => number;
-    };
-  };
+  opacity?: Transition;
+  /**
+   * Transition override for the color interpolation animation (color pulse).
+   */
+  color?: Transition;
 };
+export declare const defaultTransitionConfig: RollingNumberTransitionConfig;
+/**
+ * Defines the style of digit transition animation.
+ * - `'every'`: Rolls through every intermediate digit (e.g., 1→2→3→...→9). Default behavior.
+ * - `'single'`: Rolls directly to the new digit without showing intermediates (e.g., 1→9).
+ */
+export type DigitTransitionVariant = 'every' | 'single';
 export type RollingNumberMaskProps = HStackProps & {
   /**
    * Content rendered inside the mask container.
@@ -123,6 +105,15 @@ export type RollingNumberValueSectionProps = HStackProps & {
    * Transition overrides applied to digit and symbol animations.
    */
   transitionConfig?: RollingNumberTransitionConfig;
+  /**
+   * Style of digit transition animation.
+   * @default 'every'
+   */
+  digitTransitionVariant?: DigitTransitionVariant;
+  /**
+   * Direction of the roll animation. Only used when {@link digitTransitionVariant} is `'single'`.
+   */
+  direction?: SingleDirection;
   /**
    * Text props forwarded to Text children within the section.
    */
@@ -162,6 +153,15 @@ export type RollingNumberDigitProps = ViewProps & {
    * Component used to mask the digit column.
    */
   RollingNumberMaskComponent?: RollingNumberMaskComponent;
+  /**
+   * Style of digit transition animation.
+   * @default 'every'
+   */
+  digitTransitionVariant?: DigitTransitionVariant;
+  /**
+   * Direction of the roll animation. Only used when {@link digitTransitionVariant} is `'single'`.
+   */
+  direction?: SingleDirection;
   /**
    * Height of the digit column used to compute translations.
    */
@@ -269,7 +269,8 @@ export type RollingNumberBaseProps = SharedProps &
      */
     locale?: Intl.LocalesArgument;
     /**
-     * Base text color token. When {@link colorPulseOnUpdate} is true, the color briefly pulses to a positive or negative mid color before returning to this base color. Defaults to {@code 'fg'}.
+     * Base text color token. When {@link colorPulseOnUpdate} is true, the color briefly pulses to a positive or negative mid color before returning to this base color.
+     * @default 'fg'
      */
     color?: ThemeVars.Color;
     /**
@@ -277,11 +278,13 @@ export type RollingNumberBaseProps = SharedProps &
      */
     colorPulseOnUpdate?: boolean;
     /**
-     * Color token used for positive numeric changes. Defaults to {@code 'fgPositive'}.
+     * Color token used for positive numeric changes.
+     * @default 'fgPositive'
      */
     positivePulseColor?: ThemeVars.Color;
     /**
-     * Color token used for negative numeric changes. Defaults to {@code 'fgNegative'}.
+     * Color token used for negative numeric changes.
+     * @default 'fgNegative'
      */
     negativePulseColor?: ThemeVars.Color;
     /**
@@ -292,6 +295,13 @@ export type RollingNumberBaseProps = SharedProps &
      * Reanimated transition overrides. Supports per-property overrides for {@code y} and {@code color} only.
      */
     transition?: RollingNumberTransitionConfig;
+    /**
+     * Style of digit transition animation.
+     * - `'every'`: Rolls through every intermediate digit (e.g., 1→2→3→...→9).
+     * - `'single'`: Rolls directly to the new digit without showing intermediates (e.g., 1→9).
+     * @default 'every'
+     */
+    digitTransitionVariant?: DigitTransitionVariant;
     /**
      * Accessibility label prefix announced before the value.
      */
@@ -301,11 +311,13 @@ export type RollingNumberBaseProps = SharedProps &
      */
     accessibilityLabelSuffix?: string;
     /**
-     * accessibilityLiveRegion value used for screen readers on Android. Defaults to {@code 'polite'}.
+     * accessibilityLiveRegion value used for screen readers on Android.
+     * @default 'polite'
      */
     accessibilityLiveRegion?: React.ComponentProps<typeof Text>['accessibilityLiveRegion'];
     /**
-     * Enables tabular figures on the underlying {@link Text}. All digits render with equal width. Defaults to {@code true}.
+     * Enables tabular figures on the underlying {@link Text}. All digits render with equal width.
+     * @default true
      */
     tabularNumbers?: boolean;
   };
@@ -425,7 +437,8 @@ export declare const RollingNumber: import('react').MemoExoticComponent<
          */
         locale?: Intl.LocalesArgument;
         /**
-         * Base text color token. When {@link colorPulseOnUpdate} is true, the color briefly pulses to a positive or negative mid color before returning to this base color. Defaults to {@code 'fg'}.
+         * Base text color token. When {@link colorPulseOnUpdate} is true, the color briefly pulses to a positive or negative mid color before returning to this base color.
+         * @default 'fg'
          */
         color?: ThemeVars.Color;
         /**
@@ -433,11 +446,13 @@ export declare const RollingNumber: import('react').MemoExoticComponent<
          */
         colorPulseOnUpdate?: boolean;
         /**
-         * Color token used for positive numeric changes. Defaults to {@code 'fgPositive'}.
+         * Color token used for positive numeric changes.
+         * @default 'fgPositive'
          */
         positivePulseColor?: ThemeVars.Color;
         /**
-         * Color token used for negative numeric changes. Defaults to {@code 'fgNegative'}.
+         * Color token used for negative numeric changes.
+         * @default 'fgNegative'
          */
         negativePulseColor?: ThemeVars.Color;
         /**
@@ -448,6 +463,13 @@ export declare const RollingNumber: import('react').MemoExoticComponent<
          * Reanimated transition overrides. Supports per-property overrides for {@code y} and {@code color} only.
          */
         transition?: RollingNumberTransitionConfig;
+        /**
+         * Style of digit transition animation.
+         * - `'every'`: Rolls through every intermediate digit (e.g., 1→2→3→...→9).
+         * - `'single'`: Rolls directly to the new digit without showing intermediates (e.g., 1→9).
+         * @default 'every'
+         */
+        digitTransitionVariant?: DigitTransitionVariant;
         /**
          * Accessibility label prefix announced before the value.
          */
@@ -457,11 +479,13 @@ export declare const RollingNumber: import('react').MemoExoticComponent<
          */
         accessibilityLabelSuffix?: string;
         /**
-         * accessibilityLiveRegion value used for screen readers on Android. Defaults to {@code 'polite'}.
+         * accessibilityLiveRegion value used for screen readers on Android.
+         * @default 'polite'
          */
         accessibilityLiveRegion?: React.ComponentProps<typeof Text>['accessibilityLiveRegion'];
         /**
-         * Enables tabular figures on the underlying {@link Text}. All digits render with equal width. Defaults to {@code true}.
+         * Enables tabular figures on the underlying {@link Text}. All digits render with equal width.
+         * @default true
          */
         tabularNumbers?: boolean;
       } & {

package/dts/numbers/RollingNumber/RollingNumber.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RollingNumber.d.ts","sourceRoot":"","sources":["../../../src/numbers/RollingNumber/RollingNumber.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"RollingNumber.d.ts","sourceRoot":"","sources":["../../../src/numbers/RollingNumber/RollingNumber.tsx"],"names":[],"mappings":"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"}

package/esm/numbers/RollingNumber/DefaultRollingNumberDigit.js

@@ -1,13 +1,61 @@
-const _excluded = ["value", "digitHeight", "initialValue", "textProps", "style", "styles", "transitionConfig", "RollingNumberMaskComponent"];
+const _excluded = ["value", "digitHeight", "initialValue", "textProps", "style", "styles", "transitionConfig", "digitTransitionVariant", "direction", "RollingNumberMaskComponent"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
+import { forwardRef, memo, useEffect, useMemo, useRef, useState } from 'react';
 import { StyleSheet } from 'react-native';
-import Animated, { useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
+import Animated, { LayoutAnimationConfig, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
 import { Text } from '../../typography/Text';
 import { DefaultRollingNumberMask } from './DefaultRollingNumberMask';
 import { defaultTransitionConfig, digits } from './RollingNumber';
+
+/**
+ * Apply timing or spring animation based on a config.
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
+const applyTransition = (value, config) => {
+  'worklet';
+
+  if ((config == null ? void 0 : config.type) === 'timing') return withTiming(value, config);
+  return withSpring(value, config);
+};
+
+/**
+ * Creates a custom transition animation worklet for single variant.
+ * Combines y translation with opacity fade.
+ * @param isEntering - true for entering animation, false for exiting
+ * @param isGoingUp - direction of the number change
+ * @param transitionConfig - animation timing/spring configuration
+ */
+const createTransitionAnimation = (isEntering, isGoingUp, transitionConfig) => values => {
+  'worklet';
+
+  var _transitionConfig$y, _transitionConfig$opa;
+  const yConfig = (_transitionConfig$y = transitionConfig == null ? void 0 : transitionConfig.y) != null ? _transitionConfig$y : defaultTransitionConfig.y;
+  const opacityConfig = (_transitionConfig$opa = transitionConfig == null ? void 0 : transitionConfig.opacity) != null ? _transitionConfig$opa : defaultTransitionConfig.opacity;
+  const height = isEntering ? values.targetHeight : values.currentHeight;
+
+  // Entering: come from opposite direction (going up = enter from bottom = positive Y)
+  // Exiting: go in direction of change (going up = exit upward = negative Y)
+  const yOffset = isGoingUp ? isEntering ? height : -height : isEntering ? -height : height;
+  const initialY = isEntering ? yOffset : 0;
+  const targetY = isEntering ? 0 : yOffset;
+  const initialOpacity = isEntering ? 0 : 1;
+  const targetOpacity = isEntering ? 1 : 0;
+  return {
+    initialValues: {
+      opacity: initialOpacity,
+      transform: [{
+        translateY: initialY
+      }]
+    },
+    animations: {
+      opacity: applyTransition(targetOpacity, opacityConfig),
+      transform: [{
+        translateY: applyTransition(targetY, yConfig)
+      }]
+    }
+  };
+};
 const AnimatedText = Animated.createAnimatedComponent(Text);
 const baseStylesheet = StyleSheet.create({
   digitContainer: {
@@ -19,10 +67,19 @@ const baseStylesheet = StyleSheet.create({
 });
 
 /**
- * Note that the DefaultRollingNumberDigit component implementation is different in web
- * and mobile due to different animation libraries and the performance issue in mobile.
- * This has nearly unnoticeable difference in animation effect.
- *  */
+ * Default digit component for RollingNumber on mobile.
+ *
+ * The mobile implementation differs from web due to platform-specific animation libraries:
+ * - Mobile uses react-native-reanimated with shared values and worklets
+ * - Web uses framer-motion with imperative `animate` calls
+ *
+ * For the "every" variant, mobile renders all 10 digits (0-9) stacked with absolute
+ * positioning and animates the container's translateY. Web renders only the necessary
+ * digits above/below the current value.
+ *
+ * For the "single" variant, mobile uses reanimated's `entering`/`exiting` props with
+ * custom animation worklets. Web uses imperative opacity crossfades on DOM sections.
+ */
 export const DefaultRollingNumberDigit = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       value,
@@ -32,20 +89,34 @@ export const DefaultRollingNumberDigit = /*#__PURE__*/memo(/*#__PURE__*/forwardR
       style,
       styles,
       transitionConfig,
+      digitTransitionVariant = 'every',
+      direction,
       RollingNumberMaskComponent = DefaultRollingNumberMask
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const [singleVariantCurrentValue, setCurrentValue] = useState(initialValue);
   const position = useSharedValue(initialValue * digitHeight * -1);
   const prevValue = useRef(initialValue);
+  const isSingleVariant = useMemo(() => digitTransitionVariant === 'single', [digitTransitionVariant]);
+  const isGoingUp = useMemo(() => direction === 'up', [direction]);
+
+  // Single variant needs to re-render to give time for exit animation direction to be updated
+  useEffect(() => {
+    if (value !== singleVariantCurrentValue) {
+      setCurrentValue(value);
+    }
+  }, [value, singleVariantCurrentValue]);
+
+  // Every variant needs to update the position of the digit immediately
   useEffect(() => {
-    var _transitionConfig$y;
+    var _transitionConfig$y2;
     if (prevValue.current === value) return;
     const newPosition = value * digitHeight * -1;
-    if ((transitionConfig == null || (_transitionConfig$y = transitionConfig.y) == null ? void 0 : _transitionConfig$y.type) === 'spring') {
-      position.value = withSpring(newPosition, transitionConfig == null ? void 0 : transitionConfig.y);
+    const yConfig = (_transitionConfig$y2 = transitionConfig == null ? void 0 : transitionConfig.y) != null ? _transitionConfig$y2 : defaultTransitionConfig.y;
+    if ((yConfig == null ? void 0 : yConfig.type) === 'timing') {
+      position.value = withTiming(newPosition, yConfig);
     } else {
-      var _transitionConfig$y2;
-      position.value = withTiming(newPosition, (_transitionConfig$y2 = transitionConfig == null ? void 0 : transitionConfig.y) != null ? _transitionConfig$y2 : defaultTransitionConfig.y);
+      position.value = withSpring(newPosition, yConfig);
     }
     prevValue.current = value;
   }, [digitHeight, position, transitionConfig == null ? void 0 : transitionConfig.y, value]);
@@ -54,20 +125,36 @@ export const DefaultRollingNumberDigit = /*#__PURE__*/memo(/*#__PURE__*/forwardR
       translateY: position.value
     }]
   }));
-  const containerStyle = useMemo(() => [baseStylesheet.digitContainer, animatedStyle, style, styles == null ? void 0 : styles.root], [animatedStyle, style, styles == null ? void 0 : styles.root]);
+  const containerStyle = useMemo(() => [baseStylesheet.digitContainer, !isSingleVariant && animatedStyle, style, styles == null ? void 0 : styles.root], [animatedStyle, isSingleVariant, style, styles == null ? void 0 : styles.root]);
+  const singleVariantEnterTransition = useMemo(() => createTransitionAnimation(true, isGoingUp, transitionConfig), [isGoingUp, transitionConfig]);
+  const singleVariantExitTransition = useMemo(() => createTransitionAnimation(false, isGoingUp, transitionConfig), [isGoingUp, transitionConfig]);
+
+  // LayoutAnimationConfig disables mount/unmount animations on the digit container itself
+  // (e.g. when digits are added/removed going from $1,000 to $10,000 or vice versa).
+  // AnimatedText entering/exiting props handle value change animations separately.
   return /*#__PURE__*/_jsx(RollingNumberMaskComponent, _extends({
     ref: ref
   }, props, {
-    children: /*#__PURE__*/_jsx(Animated.View, {
-      style: containerStyle,
-      children: digits.map(digit => /*#__PURE__*/_jsx(AnimatedText, _extends({
-        style: [{
-          position: digit === 0 ? 'relative' : 'absolute',
-          top: digit * digitHeight
-        }, styles == null ? void 0 : styles.text]
-      }, textProps, {
-        children: digit
-      }), digit))
+    children: /*#__PURE__*/_jsx(LayoutAnimationConfig, {
+      skipEntering: true,
+      skipExiting: true,
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        style: containerStyle,
+        children: isSingleVariant ? /*#__PURE__*/_jsx(AnimatedText, _extends({
+          entering: singleVariantEnterTransition,
+          exiting: singleVariantExitTransition,
+          style: [styles == null ? void 0 : styles.text]
+        }, textProps, {
+          children: singleVariantCurrentValue
+        }), singleVariantCurrentValue) : digits.map(digit => /*#__PURE__*/_jsx(AnimatedText, _extends({
+          style: [{
+            position: digit === 0 ? 'relative' : 'absolute',
+            top: digit * digitHeight
+          }, styles == null ? void 0 : styles.text]
+        }, textProps, {
+          children: digit
+        }), digit))
+      })
     })
   }));
 }));

package/esm/numbers/RollingNumber/DefaultRollingNumberValueSection.js

@@ -1,4 +1,4 @@
-const _excluded = ["intlNumberParts", "textProps", "digitHeight", "formattedValue", "RollingNumberDigitComponent", "RollingNumberSymbolComponent", "RollingNumberMaskComponent", "style", "styles", "justifyContent", "transitionConfig"];
+const _excluded = ["intlNumberParts", "textProps", "digitHeight", "formattedValue", "RollingNumberDigitComponent", "RollingNumberSymbolComponent", "RollingNumberMaskComponent", "style", "styles", "justifyContent", "transitionConfig", "digitTransitionVariant", "direction"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { forwardRef, memo, useCallback, useMemo, useState } from 'react';
@@ -24,7 +24,9 @@ export const DefaultRollingNumberValueSection = /*#__PURE__*/memo(/*#__PURE__*/f
       style,
       styles,
       justifyContent = 'flex-start',
-      transitionConfig
+      transitionConfig,
+      digitTransitionVariant,
+      direction
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const [numberSectionHasRendered, setValueSectionHasRendered] = useState(false);
@@ -51,6 +53,8 @@ export const DefaultRollingNumberValueSection = /*#__PURE__*/memo(/*#__PURE__*/f
     return /*#__PURE__*/_jsx(RollingNumberDigitComponent, {
       RollingNumberMaskComponent: RollingNumberMaskComponent,
       digitHeight: digitHeight,
+      digitTransitionVariant: digitTransitionVariant,
+      direction: direction,
       initialValue: numberSectionHasRendered ? 0 : undefined,
       onLayout: () => setValueSectionHasRendered(true),
       styles: {
@@ -60,7 +64,7 @@ export const DefaultRollingNumberValueSection = /*#__PURE__*/memo(/*#__PURE__*/f
       transitionConfig: transitionConfig,
       value: part.value
     }, part.key);
-  }), [numberSectionHasRendered, setValueSectionHasRendered, intlNumberParts, digitHeight, RollingNumberDigitComponent, RollingNumberSymbolComponent, styles == null ? void 0 : styles.text, textProps, fallbackDigit, justifyContent, transitionConfig, RollingNumberMaskComponent]);
+  }), [numberSectionHasRendered, setValueSectionHasRendered, intlNumberParts, digitHeight, digitTransitionVariant, direction, RollingNumberDigitComponent, RollingNumberSymbolComponent, styles == null ? void 0 : styles.text, textProps, fallbackDigit, justifyContent, transitionConfig, RollingNumberMaskComponent]);
   const formattedValueDigits = useMemo(() => formattedValue == null ? void 0 : formattedValue.split('').map((char, index) => {
     if (!isDigit(char)) {
       return /*#__PURE__*/_jsx(RollingNumberSymbolComponent, {
@@ -76,6 +80,8 @@ export const DefaultRollingNumberValueSection = /*#__PURE__*/memo(/*#__PURE__*/f
     return /*#__PURE__*/_jsx(RollingNumberDigitComponent, {
       RollingNumberMaskComponent: RollingNumberMaskComponent,
       digitHeight: digitHeight,
+      digitTransitionVariant: digitTransitionVariant,
+      direction: direction,
       initialValue: numberSectionHasRendered ? 0 : undefined,
       onLayout: () => setValueSectionHasRendered(true),
       styles: {
@@ -85,7 +91,7 @@ export const DefaultRollingNumberValueSection = /*#__PURE__*/memo(/*#__PURE__*/f
       transitionConfig: transitionConfig,
       value: parseInt(char)
     }, index);
-  }), [numberSectionHasRendered, setValueSectionHasRendered, formattedValue, RollingNumberDigitComponent, RollingNumberSymbolComponent, styles == null ? void 0 : styles.text, digitHeight, textProps, fallbackDigit, justifyContent, transitionConfig, RollingNumberMaskComponent]);
+  }), [numberSectionHasRendered, setValueSectionHasRendered, formattedValue, RollingNumberDigitComponent, RollingNumberSymbolComponent, styles == null ? void 0 : styles.text, digitHeight, digitTransitionVariant, direction, textProps, fallbackDigit, justifyContent, transitionConfig, RollingNumberMaskComponent]);
   return /*#__PURE__*/_jsx(HStack, _extends({
     ref: ref,
     alignItems: "center",

package/esm/numbers/RollingNumber/RollingNumber.js

@@ -1,4 +1,4 @@
-const _excluded = ["value", "color", "colorPulseOnUpdate", "positivePulseColor", "negativePulseColor", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "tabularNumbers", "testID", "accessibilityLiveRegion", "locale", "format", "style", "prefix", "suffix", "styles", "enableSubscriptNotation", "transition", "formattedValue", "accessibilityLabel", "accessibilityLabelPrefix", "accessibilityLabelSuffix", "RollingNumberMaskComponent", "RollingNumberAffixSectionComponent", "RollingNumberValueSectionComponent", "RollingNumberDigitComponent", "RollingNumberSymbolComponent"];
+const _excluded = ["value", "color", "colorPulseOnUpdate", "positivePulseColor", "negativePulseColor", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "tabularNumbers", "testID", "accessibilityLiveRegion", "locale", "format", "style", "prefix", "suffix", "styles", "enableSubscriptNotation", "transition", "digitTransitionVariant", "formattedValue", "accessibilityLabel", "accessibilityLabelPrefix", "accessibilityLabelSuffix", "RollingNumberMaskComponent", "RollingNumberAffixSectionComponent", "RollingNumberValueSectionComponent", "RollingNumberDigitComponent", "RollingNumberSymbolComponent"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { forwardRef, memo, useMemo, useState } from 'react';
@@ -6,6 +6,7 @@ import { StyleSheet } from 'react-native';
 import { Easing } from 'react-native-reanimated';
 import { curves, durations } from '@coinbase/cds-common/motion/tokens';
 import { IntlNumberFormat } from '@coinbase/cds-common/numbers/IntlNumberFormat';
+import { useValueChangeDirection } from '@coinbase/cds-common/numbers/useValueChangeDirection';
 import { useLocale } from '@coinbase/cds-common/system/LocaleProvider';
 import { HStack } from '../../layout/HStack';
 import { Text } from '../../typography/Text';
@@ -42,8 +43,14 @@ const baseStylesheet = StyleSheet.create({
 
 export const defaultTransitionConfig = {
   y: {
+    type: 'spring',
+    stiffness: 280,
+    damping: 18,
+    mass: 0.3
+  },
+  opacity: {
     type: 'timing',
-    duration: durations.moderate3,
+    duration: durations.fast2,
     easing: Easing.bezier(...curves.global)
   },
   color: {
@@ -53,6 +60,12 @@ export const defaultTransitionConfig = {
   }
 };
 
+/**
+ * Defines the style of digit transition animation.
+ * - `'every'`: Rolls through every intermediate digit (e.g., 1→2→3→...→9). Default behavior.
+ * - `'single'`: Rolls directly to the new digit without showing intermediates (e.g., 1→9).
+ */
+
 // Subcomponent prop and component type declarations
 
 export const RollingNumber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
@@ -79,6 +92,7 @@ export const RollingNumber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, re
       styles,
       enableSubscriptNotation,
       transition = defaultTransitionConfig,
+      digitTransitionVariant = 'every',
       formattedValue,
       accessibilityLabel,
       accessibilityLabelPrefix,
@@ -95,6 +109,7 @@ export const RollingNumber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, re
   } = useLocale();
   const locale = localeProp != null ? localeProp : defaultLocale;
   const [digitHeight, setDigitHeight] = useState();
+  const direction = useValueChangeDirection(value);
   const handleMeasureDigits = e => {
     const {
       layout
@@ -176,6 +191,8 @@ export const RollingNumber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, re
         RollingNumberMaskComponent: RollingNumberMaskComponent,
         RollingNumberSymbolComponent: RollingNumberSymbolComponent,
         digitHeight: digitHeight,
+        digitTransitionVariant: digitTransitionVariant,
+        direction: direction,
         intlNumberParts: pre,
         justifyContent: "flex-end",
         style: styles == null ? void 0 : styles.i18nPrefix,
@@ -189,6 +206,8 @@ export const RollingNumber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, re
         RollingNumberMaskComponent: RollingNumberMaskComponent,
         RollingNumberSymbolComponent: RollingNumberSymbolComponent,
         digitHeight: digitHeight,
+        digitTransitionVariant: digitTransitionVariant,
+        direction: direction,
         intlNumberParts: integer,
         justifyContent: "flex-end",
         style: styles == null ? void 0 : styles.integer,
@@ -202,6 +221,8 @@ export const RollingNumber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, re
         RollingNumberMaskComponent: RollingNumberMaskComponent,
         RollingNumberSymbolComponent: RollingNumberSymbolComponent,
         digitHeight: digitHeight,
+        digitTransitionVariant: digitTransitionVariant,
+        direction: direction,
         intlNumberParts: fraction,
         justifyContent: "flex-start",
         style: styles == null ? void 0 : styles.fraction,
@@ -215,6 +236,8 @@ export const RollingNumber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, re
         RollingNumberMaskComponent: RollingNumberMaskComponent,
         RollingNumberSymbolComponent: RollingNumberSymbolComponent,
         digitHeight: digitHeight,
+        digitTransitionVariant: digitTransitionVariant,
+        direction: direction,
         intlNumberParts: post,
         justifyContent: "flex-start",
         style: styles == null ? void 0 : styles.i18nSuffix,
@@ -225,12 +248,14 @@ export const RollingNumber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, re
         transitionConfig: transitionConfig
       })]
     });
-  }, [intlNumberFormatter, enableSubscriptNotation, styles == null ? void 0 : styles.formattedValueSection, styles == null ? void 0 : styles.i18nPrefix, styles == null ? void 0 : styles.text, styles == null ? void 0 : styles.integer, styles == null ? void 0 : styles.fraction, styles == null ? void 0 : styles.i18nSuffix, RollingNumberValueSectionComponent, RollingNumberDigitComponent, RollingNumberMaskComponent, RollingNumberSymbolComponent, digitHeight, animatedColorStyle, textProps, transitionConfig]);
+  }, [intlNumberFormatter, enableSubscriptNotation, styles == null ? void 0 : styles.formattedValueSection, styles == null ? void 0 : styles.i18nPrefix, styles == null ? void 0 : styles.text, styles == null ? void 0 : styles.integer, styles == null ? void 0 : styles.fraction, styles == null ? void 0 : styles.i18nSuffix, RollingNumberValueSectionComponent, RollingNumberDigitComponent, RollingNumberMaskComponent, RollingNumberSymbolComponent, digitHeight, digitTransitionVariant, direction, animatedColorStyle, textProps, transitionConfig]);
   const formattedValueValueSection = useMemo(() => /*#__PURE__*/_jsx(RollingNumberValueSectionComponent, {
     RollingNumberDigitComponent: RollingNumberDigitComponent,
     RollingNumberMaskComponent: RollingNumberMaskComponent,
     RollingNumberSymbolComponent: RollingNumberSymbolComponent,
     digitHeight: digitHeight,
+    digitTransitionVariant: digitTransitionVariant,
+    direction: direction,
     formattedValue: formattedValue,
     intlNumberParts: [],
     justifyContent: "flex-start",
@@ -240,7 +265,7 @@ export const RollingNumber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, re
     },
     textProps: textProps,
     transitionConfig: transitionConfig
-  }), [RollingNumberMaskComponent, styles == null ? void 0 : styles.formattedValueSection, styles == null ? void 0 : styles.text, RollingNumberValueSectionComponent, RollingNumberDigitComponent, RollingNumberSymbolComponent, formattedValue, digitHeight, animatedColorStyle, textProps, transitionConfig]);
+  }), [RollingNumberMaskComponent, styles == null ? void 0 : styles.formattedValueSection, styles == null ? void 0 : styles.text, RollingNumberValueSectionComponent, RollingNumberDigitComponent, RollingNumberSymbolComponent, formattedValue, digitHeight, digitTransitionVariant, direction, animatedColorStyle, textProps, transitionConfig]);
   const screenReaderOnlySection = useMemo(() => {
     const prefixString = typeof prefix === 'string' ? prefix : '';
     const suffixString = typeof suffix === 'string' ? suffix : '';

package/esm/numbers/__stories__/RollingNumber.stories.js

@@ -327,6 +327,11 @@ export const ColorAndTransition = () => {
           duration: durations.moderate3,
           easing: Easing.inOut(Easing.quad)
         },
+        opacity: {
+          type: 'timing',
+          duration: durations.moderate3,
+          easing: Easing.inOut(Easing.quad)
+        },
         y: {
           type: 'timing',
           duration: durations.moderate3,
@@ -348,6 +353,11 @@ export const ColorAndTransition = () => {
           duration: durations.slow4,
           easing: Easing.inOut(Easing.quad)
         },
+        opacity: {
+          type: 'timing',
+          duration: durations.slow4,
+          easing: Easing.inOut(Easing.quad)
+        },
         y: {
           type: 'timing',
           duration: durations.slow4,
@@ -379,15 +389,20 @@ export const ColorAndTransition = () => {
         currency: 'EUR'
       },
       transition: {
-        y: {
+        color: {
+          type: 'timing',
+          duration: 5000,
+          easing: Easing.bezier(...curves.global)
+        },
+        opacity: {
           type: 'timing',
           duration: durations.fast1,
           easing: Easing.bezier(...curves.enterFunctional)
         },
-        color: {
+        y: {
           type: 'timing',
-          duration: 5000,
-          easing: Easing.bezier(...curves.global)
+          duration: durations.fast1,
+          easing: Easing.bezier(...curves.enterFunctional)
         }
       },
       value: price
@@ -422,15 +437,20 @@ export const ColorAndTransition = () => {
         currency: 'USD'
       },
       transition: {
-        y: {
+        color: {
+          type: 'timing',
+          duration: durations.slow1,
+          easing: Easing.bezier(...curves.exitFunctional)
+        },
+        opacity: {
           type: 'timing',
           duration: durations.moderate2,
           easing: Easing.bezier(...curves.enterExpressive)
         },
-        color: {
+        y: {
           type: 'timing',
-          duration: durations.slow1,
-          easing: Easing.bezier(...curves.exitFunctional)
+          duration: durations.moderate2,
+          easing: Easing.bezier(...curves.enterExpressive)
         }
       },
       value: price
@@ -940,6 +960,67 @@ const FunExamples = () => {
     children: [/*#__PURE__*/_jsx(CounterExample, {}), /*#__PURE__*/_jsx(CountDownExample, {}), /*#__PURE__*/_jsx(SubscriptionPriceExample, {}), /*#__PURE__*/_jsx(StatisticsExample, {}), /*#__PURE__*/_jsx(LiveBiddingExample, {})]
   });
 };
+const SingleTransition = () => {
+  const [price, setPrice] = React.useState(12345.67);
+  const onUp = () => setPrice(p => Math.round((p + Math.random() * 100) * 100) / 100);
+  const onDown = () => setPrice(p => Math.max(0, Math.round((p - Math.random() * 100) * 100) / 100));
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(RollingNumber, {
+      digitTransitionVariant: "single",
+      font: "title1",
+      format: {
+        style: 'currency',
+        currency: 'USD'
+      },
+      value: price
+    }), /*#__PURE__*/_jsxs(HStack, {
+      gap: 2,
+      children: [/*#__PURE__*/_jsx(Button, {
+        onPress: onUp,
+        children: "Increase"
+      }), /*#__PURE__*/_jsx(Button, {
+        onPress: onDown,
+        children: "Decrease"
+      })]
+    }), /*#__PURE__*/_jsx(Text, {
+      font: "label1",
+      children: "Comparison: Every vs Single"
+    }), /*#__PURE__*/_jsxs(HStack, {
+      gap: 2,
+      children: [/*#__PURE__*/_jsxs(VStack, {
+        gap: 0.5,
+        children: [/*#__PURE__*/_jsx(Text, {
+          color: "fgMuted",
+          font: "caption",
+          children: "Every (default)"
+        }), /*#__PURE__*/_jsx(RollingNumber, {
+          font: "title1",
+          format: {
+            style: 'currency',
+            currency: 'USD'
+          },
+          value: price
+        })]
+      }), /*#__PURE__*/_jsxs(VStack, {
+        gap: 0.5,
+        children: [/*#__PURE__*/_jsx(Text, {
+          color: "fgMuted",
+          font: "caption",
+          children: "Single"
+        }), /*#__PURE__*/_jsx(RollingNumber, {
+          digitTransitionVariant: "single",
+          font: "title1",
+          format: {
+            style: 'currency',
+            currency: 'USD'
+          },
+          value: price
+        })]
+      })]
+    })]
+  });
+};
 const Accessibility = () => {
   return /*#__PURE__*/_jsxs(VStack, {
     gap: 2,
@@ -982,6 +1063,9 @@ const RollingNumberScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       title: "Color and Transition",
       children: /*#__PURE__*/_jsx(ColorAndTransition, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Single Transition",
+      children: /*#__PURE__*/_jsx(SingleTransition, {})
     }), /*#__PURE__*/_jsx(Example, {
       title: "Format",
       children: /*#__PURE__*/_jsx(Format, {})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.32.3",
+  "version": "8.33.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -198,7 +198,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.32.3",
+    "@coinbase/cds-common": "^8.33.0",
     "@coinbase/cds-icons": "^5.8.0",
     "@coinbase/cds-illustrations": "^4.29.0",
     "@coinbase/cds-lottie-files": "^3.3.4",