@coinbase/cds-web 8.32.3 → 8.33.1

package/CHANGELOG.md

@@ -8,6 +8,22 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.33.1 (12/19/2025 PST)
+
+#### 🐞 Fixes
+
+- Fix RemoteImageGroup zIndex and trailing space issue. [[#170](https://github.com/coinbase/cds/pull/170)]
+
+#### 📘 Misc
+
+- Fix: rename invalid class names on docsite. [[#265](https://github.com/coinbase/cds/pull/265)]
+
+## 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/media/RemoteImageGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RemoteImageGroup.d.ts","sourceRoot":"","sources":["../../src/media/RemoteImageGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AACjE,OAAO,KAAK,EACV,UAAU,EACV,KAAK,EACL,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AASpC,MAAM,MAAM,yBAAyB,GAAG,WAAW,GACjD,wBAAwB,GAAG;IACzB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC3B;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,uBAAuB;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEJ,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,CAAC;AAoB9D,eAAO,MAAM,gBAAgB,GAAI,kDAO9B,qBAAqB,4CAwEvB,CAAC"}
+{"version":3,"file":"RemoteImageGroup.d.ts","sourceRoot":"","sources":["../../src/media/RemoteImageGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AACjE,OAAO,KAAK,EACV,UAAU,EAGV,KAAK,EACL,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AASpC,MAAM,MAAM,yBAAyB,GAAG,WAAW,GACjD,wBAAwB,GAAG;IACzB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC3B;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,uBAAuB;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEJ,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,CAAC;AAwB9D,eAAO,MAAM,gBAAgB,GAAI,kDAO9B,qBAAqB,4CAgFvB,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 web.
+ *
+ * The web implementation differs from mobile due to platform-specific animation libraries:
+ * - Web uses framer-motion with imperative `animate` calls
+ * - Mobile uses react-native-reanimated with shared values and worklets
+ *
+ * For the "every" variant, web renders only the necessary digits above/below the current
+ * value using CSS positioning. Mobile renders all 10 digits (0-9) stacked with absolute
+ * positioning.
+ *
+ * For the "single" variant, web uses imperative opacity crossfades on DOM sections.
+ * Mobile uses reanimated's `entering`/`exiting` props with custom animation worklets.
+ */
 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":"AASA,OAAO,EAEL,KAAK,2BAA2B,EAEjC,MAAM,iBAAiB,CAAC;AAqCzB;;;;MAIM;AACN,eAAO,MAAM,yBAAyB,EAAE,2BAgFvC,CAAC"}
+{"version":3,"file":"DefaultRollingNumberDigit.d.ts","sourceRoot":"","sources":["../../../src/numbers/RollingNumber/DefaultRollingNumberDigit.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAEL,KAAK,2BAA2B,EAEjC,MAAM,iBAAiB,CAAC;AAqCzB;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,yBAAyB,EAAE,2BAsIvC,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;AAWzB,eAAO,MAAM,gCAAgC,EAAE,kCA+G9C,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;AAWzB,eAAO,MAAM,gCAAgC,EAAE,kCAyH9C,CAAC"}

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

@@ -1,5 +1,6 @@
 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 Transition } from 'framer-motion';
 import type { Polymorphic } from '../../core/polymorphism';
@@ -9,16 +10,33 @@ import { type TextBaseProps, type TextDefaultElement, type TextProps } from '../
  */
 type RollingNumberTransitionConfig = {
   /**
-   * Transition override applied to the vertical translation animation.
+   * Transition applied to the vertical translation animation (digit roll).
    */
   y?: Transition;
   /**
-   * Transition override applied to the color interpolation animation.
+   * Transition applied to the opacity animation during digit transitions.
+   * Controls how digits fade in/out during the single variant animation.
+   */
+  opacity?: Transition;
+  /**
+   * Transition applied to the color interpolation animation (color pulse).
    */
   color?: Transition;
 };
+/**
+ * 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 declare const defaultTransitionConfig: {
   readonly y: {
+    readonly type: 'spring';
+    readonly stiffness: 280;
+    readonly damping: 18;
+    readonly mass: 0.3;
+  };
+  readonly opacity: {
     readonly duration: number;
     readonly ease: import('@coinbase/cds-common/motion/tokens').EasingArray;
   };
@@ -98,6 +116,15 @@ export type RollingNumberValueSectionProps = TextProps<TextDefaultElement> & {
    * 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;
   /**
    * Inline style overrides applied to the value section.
    */
@@ -146,6 +173,15 @@ export type RollingNumberDigitProps = TextProps<TextDefaultElement> & {
    * 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;
   /**
    * Inline style overrides applied to the digit component.
    */
@@ -267,19 +303,22 @@ 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;
     /**
-     * Enables color pulsing on positive or negative changes. Defaults to {@code false}.
+     * Enables color pulsing on positive or negative changes.
      */
     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;
     /**
@@ -290,6 +329,13 @@ export type RollingNumberBaseProps = SharedProps &
      * Framer Motion 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.
      */
@@ -299,11 +345,13 @@ export type RollingNumberBaseProps = SharedProps &
      */
     accessibilityLabelSuffix?: string;
     /**
-     * aria-live politeness level. Defaults to {@code 'polite'}.
+     * aria-live politeness level.
+     * @default 'polite'
      */
     ariaLive?: React.AriaAttributes['aria-live'];
     /**
-     * Enables tabular figures on the underlying {@link Text}. Defaults to {@code true}.
+     * Enables tabular figures on the underlying {@link Text}.
+     * @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/media/RemoteImageGroup.css

@@ -2,4 +2,5 @@
 .square-s4x9tgq{border-radius:4px;}
 .hexagon-h112niag{border-radius:0;}
 .squircle-s8clfq8{border-radius:8px;}
-.rectangle-ra2rof2{border-radius:0;}}
+.rectangle-ra2rof2{border-radius:0;}
+.isolateCss-i1shf7o1{isolation:isolate;}}

package/esm/media/RemoteImageGroup.js

@@ -18,6 +18,7 @@ const borderRadiusCss = {
   squircle: "squircle-s8clfq8",
   rectangle: "rectangle-ra2rof2"
 };
+const isolateCss = "isolateCss-i1shf7o1";
 export const RemoteImageGroup = _ref => {
   let {
       children,
@@ -32,7 +33,7 @@ export const RemoteImageGroup = _ref => {
   } = useTheme();
   const borderRadius = borderRadiusCss[shape];
   const sizeAsNumber = typeof size === 'number' ? size : avatarSize[size];
-  const overlapSpacing = sizeAsNumber <= 40 ? 8 : 16;
+  const overlapSpacing = sizeAsNumber <= 40 ? -1 : -2;
   const excess = Children.count(children) - max;
   const groupChildren = useMemo(() => {
     const arrayChildren = Children.toArray(children);
@@ -43,7 +44,9 @@ export const RemoteImageGroup = _ref => {
   }, [children, excess]);
   return /*#__PURE__*/_jsxs(Box, _objectSpread(_objectSpread({
     alignItems: "center",
-    display: "flex",
+    className: isolateCss,
+    display: "inline-flex",
+    overflow: "visible",
     position: "relative",
     testID: testID
   }, props), {}, {
@@ -63,7 +66,7 @@ export const RemoteImageGroup = _ref => {
       // zIndex is progressively lower so that each child is stacked below the previous one
       const zIndex = -index;
       return /*#__PURE__*/_jsx(Box, {
-        left: index === 0 ? 'initial' : overlapSpacing * zIndex,
+        marginStart: index === 0 ? undefined : overlapSpacing,
         position: "relative",
         testID: "".concat(testID ? "".concat(testID, "-") : '', "inner-box-").concat(index),
         zIndex: zIndex,
@@ -75,7 +78,7 @@ export const RemoteImageGroup = _ref => {
       className: borderRadius,
       height: sizeAsNumber,
       justifyContent: "center",
-      left: groupChildren.length * overlapSpacing * -1,
+      marginStart: overlapSpacing,
       position: "relative",
       width: sizeAsNumber,
       zIndex: groupChildren.length * -1,

package/esm/numbers/RollingNumber/DefaultRollingNumberDigit.js

@@ -1,4 +1,4 @@
-const _excluded = ["value", "initialValue", "transitionConfig", "RollingNumberMaskComponent", "color", "className", "styles", "style", "classNames"];
+const _excluded = ["value", "initialValue", "transitionConfig", "digitTransitionVariant", "direction", "RollingNumberMaskComponent", "color", "className", "styles", "style", "classNames"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -6,7 +6,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 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, useImperativeHandle, useLayoutEffect, useRef } from 'react';
+import { forwardRef, memo, useCallback, useImperativeHandle, useLayoutEffect, useMemo, useRef } from 'react';
 import { getWidthInEm } from '@coinbase/cds-common';
 import { animate, m } from 'framer-motion';
 import { cx } from '../../cx';
@@ -22,15 +22,26 @@ const bottomNonActiveCss = "bottomNonActiveCss-b1n8654t";
 const digitSpanCss = "digitSpanCss-d1240w0v";
 
 /**
- * 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 web.
+ *
+ * The web implementation differs from mobile due to platform-specific animation libraries:
+ * - Web uses framer-motion with imperative `animate` calls
+ * - Mobile uses react-native-reanimated with shared values and worklets
+ *
+ * For the "every" variant, web renders only the necessary digits above/below the current
+ * value using CSS positioning. Mobile renders all 10 digits (0-9) stacked with absolute
+ * positioning.
+ *
+ * For the "single" variant, web uses imperative opacity crossfades on DOM sections.
+ * Mobile uses reanimated's `entering`/`exiting` props with custom animation worklets.
+ */
 export const DefaultRollingNumberDigit = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       value,
       initialValue,
       transitionConfig,
+      digitTransitionVariant = 'every',
+      direction,
       RollingNumberMaskComponent = DefaultRollingNumberMask,
       color = 'inherit',
       className,
@@ -42,27 +53,60 @@ export const DefaultRollingNumberDigit = /*#__PURE__*/memo(/*#__PURE__*/forwardR
   const internalRef = useRef(null);
   useImperativeHandle(ref, () => internalRef.current);
   const numberRefs = useRef(new Array(10));
+  const singleVariantPrevDigitRef = useRef(null);
+  const singleVariantCurrentDigitRef = useRef(null);
   const prevValue = useRef(initialValue !== null && initialValue !== void 0 ? initialValue : value);
+  const isSingleVariant = useMemo(() => digitTransitionVariant === 'single', [digitTransitionVariant]);
   useLayoutEffect(() => {
     var _transitionConfig$y;
     const prevDigit = numberRefs.current[prevValue.current];
     const currDigit = numberRefs.current[value];
     if (!internalRef.current || !prevDigit || !currDigit || value === prevValue.current) return;
     const box = internalRef.current.getBoundingClientRect();
-    const initialY = box.height * (value - prevValue.current);
+    // Every: distance based on numeric difference (rolls through every intermediate digit)
+    // Single: distance is always 1 height (rolls directly to the new digit)
+    const directionSign = direction === 'up' ? 1 : -1;
+    const initialY = isSingleVariant ? box.height * directionSign : box.height * (value - prevValue.current);
     const prevWidth = getWidthInEm(prevDigit);
     const currentWidth = getWidthInEm(currDigit);
     animate(internalRef.current, {
       y: [initialY, 0],
       width: [prevWidth, currentWidth]
     }, (_transitionConfig$y = transitionConfig === null || transitionConfig === void 0 ? void 0 : transitionConfig.y) !== null && _transitionConfig$y !== void 0 ? _transitionConfig$y : defaultTransitionConfig.y);
+
+    // Single variant: add opacity crossfade (prev fades out, current fades in)
+    if (isSingleVariant) {
+      var _transitionConfig$opa;
+      const opacityTransition = (_transitionConfig$opa = transitionConfig === null || transitionConfig === void 0 ? void 0 : transitionConfig.opacity) !== null && _transitionConfig$opa !== void 0 ? _transitionConfig$opa : defaultTransitionConfig.opacity;
+      if (singleVariantPrevDigitRef.current) {
+        animate(singleVariantPrevDigitRef.current, {
+          opacity: [1, 0]
+        }, opacityTransition);
+      }
+      if (singleVariantCurrentDigitRef.current) {
+        animate(singleVariantCurrentDigitRef.current, {
+          opacity: [0, 1]
+        }, opacityTransition);
+      }
+    }
     prevValue.current = value;
-  }, [transitionConfig, value]);
+  }, [isSingleVariant, transitionConfig, value, direction]);
   const renderDigit = useCallback(digit => /*#__PURE__*/_jsx("span", {
     ref: r => void (numberRefs.current[digit] = r),
     className: digitSpanCss,
     children: digit
   }, digit), []);
+
+  // Use direction prop for single variant positioning
+  const isGoingUp = direction === 'up';
+  const isGoingDown = direction === 'down';
+
+  // Every: render all digits above/below current (shows every intermediate digit during animation)
+  // Single: render only the previous digit in the appropriate section (direct transition)
+  const showTopSection = isSingleVariant ? isGoingUp : value !== 0;
+  const showBottomSection = isSingleVariant ? isGoingDown : value !== 9;
+  const topDigits = isSingleVariant ? renderDigit(prevValue.current) : new Array(value).fill(null).map((_, i) => renderDigit(i));
+  const bottomDigits = isSingleVariant ? renderDigit(prevValue.current) : new Array(9 - value).fill(null).map((_, i) => renderDigit(value + i + 1));
   return /*#__PURE__*/_jsx(RollingNumberMaskComponent, {
     children: /*#__PURE__*/_jsxs(MotionText, _objectSpread(_objectSpread({
       ref: internalRef,
@@ -70,12 +114,17 @@ export const DefaultRollingNumberDigit = /*#__PURE__*/memo(/*#__PURE__*/forwardR
       color: color,
       style: _objectSpread(_objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root), styles === null || styles === void 0 ? void 0 : styles.text)
     }, props), {}, {
-      children: [value !== 0 && /*#__PURE__*/_jsx("span", {
+      children: [showTopSection && /*#__PURE__*/_jsx("span", {
+        ref: isSingleVariant ? singleVariantPrevDigitRef : undefined,
         className: cx(digitNonActiveCss, topNonActiveCss),
-        children: new Array(value).fill(null).map((_, i) => renderDigit(i))
-      }), renderDigit(value), value !== 9 && /*#__PURE__*/_jsx("span", {
+        children: topDigits
+      }), /*#__PURE__*/_jsx("span", {
+        ref: isSingleVariant ? singleVariantCurrentDigitRef : undefined,
+        children: renderDigit(value)
+      }), showBottomSection && /*#__PURE__*/_jsx("span", {
+        ref: isSingleVariant ? singleVariantPrevDigitRef : undefined,
         className: cx(digitNonActiveCss, bottomNonActiveCss),
-        children: new Array(9 - value).fill(null).map((_, i) => renderDigit(value + i + 1))
+        children: bottomDigits
       })]
     }))
   });

package/esm/numbers/RollingNumber/DefaultRollingNumberValueSection.js

@@ -1,4 +1,4 @@
-const _excluded = ["intlNumberParts", "color", "justifyContent", "className", "RollingNumberDigitComponent", "RollingNumberSymbolComponent", "RollingNumberMaskComponent", "formattedValue", "transitionConfig", "styles", "classNames", "style"];
+const _excluded = ["intlNumberParts", "color", "justifyContent", "className", "RollingNumberDigitComponent", "RollingNumberSymbolComponent", "RollingNumberMaskComponent", "formattedValue", "transitionConfig", "digitTransitionVariant", "direction", "styles", "classNames", "style"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -29,6 +29,8 @@ export const DefaultRollingNumberValueSection = /*#__PURE__*/memo(/*#__PURE__*/f
       RollingNumberMaskComponent = DefaultRollingNumberMask,
       formattedValue,
       transitionConfig,
+      digitTransitionVariant,
+      direction,
       styles,
       classNames,
       style
@@ -49,18 +51,22 @@ export const DefaultRollingNumberValueSection = /*#__PURE__*/memo(/*#__PURE__*/f
     classNames: {
       text: classNames === null || classNames === void 0 ? void 0 : classNames.text
     },
+    digitTransitionVariant: digitTransitionVariant,
+    direction: direction,
     initialValue: hasMounted ? 0 : undefined,
     styles: {
       text: styles === null || styles === void 0 ? void 0 : styles.text
     },
     transitionConfig: transitionConfig,
     value: part.value
-  }, part.key)), [intlNumberParts, RollingNumberSymbolComponent, justifyContent, RollingNumberDigitComponent, hasMounted, transitionConfig, RollingNumberMaskComponent, styles === null || styles === void 0 ? void 0 : styles.text, classNames === null || classNames === void 0 ? void 0 : classNames.text]);
+  }, part.key)), [intlNumberParts, RollingNumberSymbolComponent, justifyContent, RollingNumberDigitComponent, hasMounted, transitionConfig, digitTransitionVariant, direction, RollingNumberMaskComponent, styles === null || styles === void 0 ? void 0 : styles.text, classNames === null || classNames === void 0 ? void 0 : classNames.text]);
   const formattedValueDigits = useMemo(() => formattedValue === null || formattedValue === void 0 ? void 0 : formattedValue.split('').map((char, index) => isDigit(char) ? /*#__PURE__*/_jsx(RollingNumberDigitComponent, {
     RollingNumberMaskComponent: RollingNumberMaskComponent,
     classNames: {
       text: classNames === null || classNames === void 0 ? void 0 : classNames.text
     },
+    digitTransitionVariant: digitTransitionVariant,
+    direction: direction,
     initialValue: hasMounted ? 0 : undefined,
     styles: {
       text: styles === null || styles === void 0 ? void 0 : styles.text
@@ -76,7 +82,7 @@ export const DefaultRollingNumberValueSection = /*#__PURE__*/memo(/*#__PURE__*/f
       text: styles === null || styles === void 0 ? void 0 : styles.text
     },
     value: char
-  }, index)), [RollingNumberDigitComponent, RollingNumberSymbolComponent, formattedValue, hasMounted, justifyContent, RollingNumberMaskComponent, transitionConfig, styles === null || styles === void 0 ? void 0 : styles.text, classNames === null || classNames === void 0 ? void 0 : classNames.text]);
+  }, index)), [RollingNumberDigitComponent, RollingNumberSymbolComponent, formattedValue, hasMounted, justifyContent, RollingNumberMaskComponent, transitionConfig, digitTransitionVariant, direction, styles === null || styles === void 0 ? void 0 : styles.text, classNames === null || classNames === void 0 ? void 0 : classNames.text]);
   return /*#__PURE__*/_jsx(MotionText, _objectSpread(_objectSpread({
     ref: ref,
     className: cx(containerCss, className, classNames === null || classNames === void 0 ? void 0 : classNames.root, classNames === null || classNames === void 0 ? void 0 : classNames.text),

package/esm/numbers/RollingNumber/RollingNumber.js

@@ -1,4 +1,4 @@
-const _excluded = ["as", "value", "transition", "color", "colorPulseOnUpdate", "positivePulseColor", "negativePulseColor", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "locale", "format", "formattedValue", "style", "ariaLive", "prefix", "suffix", "classNames", "styles", "enableSubscriptNotation", "RollingNumberMaskComponent", "RollingNumberAffixSectionComponent", "RollingNumberValueSectionComponent", "RollingNumberDigitComponent", "RollingNumberSymbolComponent", "accessibilityLabel", "tabularNumbers", "accessibilityLabelPrefix", "accessibilityLabelSuffix"];
+const _excluded = ["as", "value", "transition", "color", "colorPulseOnUpdate", "positivePulseColor", "negativePulseColor", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "locale", "format", "formattedValue", "style", "ariaLive", "prefix", "suffix", "classNames", "styles", "enableSubscriptNotation", "digitTransitionVariant", "RollingNumberMaskComponent", "RollingNumberAffixSectionComponent", "RollingNumberValueSectionComponent", "RollingNumberDigitComponent", "RollingNumberSymbolComponent", "accessibilityLabel", "tabularNumbers", "accessibilityLabelPrefix", "accessibilityLabelSuffix"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -9,6 +9,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import { forwardRef, memo, useMemo } from 'react';
 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 { m } from 'framer-motion';
 import { cx } from '../../cx';
@@ -29,9 +30,21 @@ const screenReaderOnlyCss = "screenReaderOnlyCss-sa1j2r";
  * Defines transition overrides for RollingNumber animations.
  */
 
+/**
+ * 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 const defaultTransitionConfig = {
   y: {
-    duration: durations.moderate3 / 1000,
+    type: 'spring',
+    stiffness: 280,
+    damping: 18,
+    mass: 0.3
+  },
+  opacity: {
+    duration: durations.fast2 / 1000,
     ease: curves.global
   },
   color: {
@@ -68,6 +81,7 @@ export const RollingNumber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, re
       classNames,
       styles,
       enableSubscriptNotation,
+      digitTransitionVariant = 'every',
       RollingNumberMaskComponent = DefaultRollingNumberMask,
       RollingNumberAffixSectionComponent = DefaultRollingNumberAffixSection,
       RollingNumberValueSectionComponent = DefaultRollingNumberValueSection,
@@ -91,6 +105,7 @@ export const RollingNumber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, re
     locale
   }), [value, format, locale]);
   const formatted = useMemo(() => formattedValue !== null && formattedValue !== void 0 ? formattedValue : intlNumberFormatter.format(), [formattedValue, intlNumberFormatter]);
+  const direction = useValueChangeDirection(value);
   const colorControls = useColorPulse({
     value,
     defaultColor: color,
@@ -151,6 +166,8 @@ export const RollingNumber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, re
         classNames: {
           text: classNames === null || classNames === void 0 ? void 0 : classNames.text
         },
+        digitTransitionVariant: digitTransitionVariant,
+        direction: direction,
         intlNumberParts: pre,
         justifyContent: "flex-end",
         style: styles === null || styles === void 0 ? void 0 : styles.i18nPrefix,
@@ -166,6 +183,8 @@ export const RollingNumber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, re
         classNames: {
           text: classNames === null || classNames === void 0 ? void 0 : classNames.text
         },
+        digitTransitionVariant: digitTransitionVariant,
+        direction: direction,
         intlNumberParts: integer,
         justifyContent: "flex-end",
         style: styles === null || styles === void 0 ? void 0 : styles.integer,
@@ -181,6 +200,8 @@ export const RollingNumber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, re
         classNames: {
           text: classNames === null || classNames === void 0 ? void 0 : classNames.text
         },
+        digitTransitionVariant: digitTransitionVariant,
+        direction: direction,
         intlNumberParts: fraction,
         justifyContent: "flex-start",
         style: styles === null || styles === void 0 ? void 0 : styles.fraction,
@@ -196,6 +217,8 @@ export const RollingNumber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, re
         classNames: {
           text: classNames === null || classNames === void 0 ? void 0 : classNames.text
         },
+        digitTransitionVariant: digitTransitionVariant,
+        direction: direction,
         intlNumberParts: post,
         justifyContent: "flex-start",
         style: styles === null || styles === void 0 ? void 0 : styles.i18nSuffix,
@@ -205,7 +228,7 @@ export const RollingNumber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, re
         transitionConfig: transitionConfig
       })]
     });
-  }, [intlNumberFormatter, enableSubscriptNotation, classNames === null || classNames === void 0 ? void 0 : classNames.formattedValueSection, classNames === null || classNames === void 0 ? void 0 : classNames.i18nPrefix, classNames === null || classNames === void 0 ? void 0 : classNames.integer, classNames === null || classNames === void 0 ? void 0 : classNames.fraction, classNames === null || classNames === void 0 ? void 0 : classNames.i18nSuffix, styles === null || styles === void 0 ? void 0 : styles.formattedValueSection, styles === null || styles === void 0 ? void 0 : styles.i18nPrefix, styles === null || styles === void 0 ? void 0 : styles.integer, styles === null || styles === void 0 ? void 0 : styles.fraction, styles === null || styles === void 0 ? void 0 : styles.i18nSuffix, RollingNumberValueSectionComponent, RollingNumberMaskComponent, RollingNumberDigitComponent, RollingNumberSymbolComponent, transitionConfig, styles === null || styles === void 0 ? void 0 : styles.text, classNames === null || classNames === void 0 ? void 0 : classNames.text]);
+  }, [intlNumberFormatter, enableSubscriptNotation, classNames === null || classNames === void 0 ? void 0 : classNames.formattedValueSection, classNames === null || classNames === void 0 ? void 0 : classNames.i18nPrefix, classNames === null || classNames === void 0 ? void 0 : classNames.integer, classNames === null || classNames === void 0 ? void 0 : classNames.fraction, classNames === null || classNames === void 0 ? void 0 : classNames.i18nSuffix, styles === null || styles === void 0 ? void 0 : styles.formattedValueSection, styles === null || styles === void 0 ? void 0 : styles.i18nPrefix, styles === null || styles === void 0 ? void 0 : styles.integer, styles === null || styles === void 0 ? void 0 : styles.fraction, styles === null || styles === void 0 ? void 0 : styles.i18nSuffix, RollingNumberValueSectionComponent, RollingNumberMaskComponent, RollingNumberDigitComponent, RollingNumberSymbolComponent, transitionConfig, digitTransitionVariant, direction, styles === null || styles === void 0 ? void 0 : styles.text, classNames === null || classNames === void 0 ? void 0 : classNames.text]);
   const formattedValueValueSection = useMemo(() => /*#__PURE__*/_jsx(RollingNumberValueSectionComponent, {
     RollingNumberDigitComponent: RollingNumberDigitComponent,
     RollingNumberMaskComponent: RollingNumberMaskComponent,
@@ -214,6 +237,8 @@ export const RollingNumber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, re
     classNames: {
       text: classNames === null || classNames === void 0 ? void 0 : classNames.text
     },
+    digitTransitionVariant: digitTransitionVariant,
+    direction: direction,
     formattedValue: formattedValue,
     intlNumberParts: [],
     justifyContent: "flex-start",
@@ -222,7 +247,7 @@ export const RollingNumber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, re
       text: styles === null || styles === void 0 ? void 0 : styles.text
     },
     transitionConfig: transitionConfig
-  }), [classNames === null || classNames === void 0 ? void 0 : classNames.formattedValueSection, styles === null || styles === void 0 ? void 0 : styles.formattedValueSection, classNames === null || classNames === void 0 ? void 0 : classNames.text, styles === null || styles === void 0 ? void 0 : styles.text, RollingNumberValueSectionComponent, RollingNumberDigitComponent, RollingNumberSymbolComponent, formattedValue, RollingNumberMaskComponent, transitionConfig]);
+  }), [classNames === null || classNames === void 0 ? void 0 : classNames.formattedValueSection, styles === null || styles === void 0 ? void 0 : styles.formattedValueSection, classNames === null || classNames === void 0 ? void 0 : classNames.text, styles === null || styles === void 0 ? void 0 : styles.text, RollingNumberValueSectionComponent, RollingNumberDigitComponent, RollingNumberSymbolComponent, formattedValue, RollingNumberMaskComponent, transitionConfig, digitTransitionVariant, direction]);
   const screenReaderOnlySection = useMemo(() => {
     const prefixString = typeof prefix === 'string' ? prefix : '';
     const suffixString = typeof suffix === 'string' ? suffix : '';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.32.3",
+  "version": "8.33.1",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -203,7 +203,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.32.3",
+    "@coinbase/cds-common": "^8.33.1",
     "@coinbase/cds-icons": "^5.8.0",
     "@coinbase/cds-illustrations": "^4.29.0",
     "@coinbase/cds-lottie-files": "^3.3.4",