@coinbase/cds-mobile 9.6.4 → 9.6.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dts/motion/AnimatedCaret.d.ts +1 -2
  3. package/dts/motion/AnimatedCaret.d.ts.map +1 -1
  4. package/dts/numbers/RollingNumber/RollingNumber.d.ts +20 -12
  5. package/dts/numbers/RollingNumber/RollingNumber.d.ts.map +1 -1
  6. package/esm/motion/AnimatedCaret.js +14 -16
  7. package/esm/numbers/RollingNumber/RollingNumber.js +18 -11
  8. package/esm/numbers/__stories__/RollingNumber.stories.js +15 -0
  9. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
8
8
 
9
9
  <!-- template-start -->
10
10
 
11
+ ## 9.6.6 (7/14/2026 PST)
12
+
13
+ #### 🐞 Fixes
14
+
15
+ - Fix: do not animate initial animated caret render. [[#792](https://github.com/coinbase/cds/pull/792)]
16
+
17
+ ## 9.6.5 (7/13/2026 PST)
18
+
19
+ #### 🐞 Fixes
20
+
21
+ - Chore(CDS-2463): Support non-token color customizations in RollingNumber. [[#787](https://github.com/coinbase/cds/pull/787)]
22
+
11
23
  ## 9.6.4 (7/13/2026 PST)
12
24
 
13
25
  #### 🐞 Fixes
package/dts/motion/AnimatedCaret.d.ts CHANGED
@@ -6,13 +6,12 @@ export type AnimatedCaretBaseProps = SharedProps & {
6
6
  rotate: number;
7
7
  };
8
8
  export type AnimatedCaretProps = AnimatedCaretBaseProps & Partial<Omit<IconProps, 'name'>>;
9
- export declare const useAnimatedCaretAnimation: () => {
9
+ export declare const useAnimatedCaretAnimation: (rotate: number) => {
10
10
  animatedStyles: {
11
11
  transform: {
12
12
  rotate: Animated.AnimatedInterpolation<string | number>;
13
13
  }[];
14
14
  };
15
- animate: (rotate: number) => void;
16
15
  };
17
16
  export declare const AnimatedCaret: React.NamedExoticComponent<AnimatedCaretProps>;
18
17
  //# sourceMappingURL=AnimatedCaret.d.ts.map
package/dts/motion/AnimatedCaret.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AnimatedCaret.d.ts","sourceRoot":"","sources":["../../src/motion/AnimatedCaret.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwD,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAG1E,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AAGrD,MAAM,MAAM,sBAAsB,GAAG,WAAW,GAAG;IACjD,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,GAAG,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;AAE3F,eAAO,MAAM,yBAAyB;;;;;;sBAIzB,MAAM;CAqBlB,CAAC;AAEF,eAAO,MAAM,aAAa,gDA2BxB,CAAC"}
1
+ {"version":3,"file":"AnimatedCaret.d.ts","sourceRoot":"","sources":["../../src/motion/AnimatedCaret.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAG1E,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AAGrD,MAAM,MAAM,sBAAsB,GAAG,WAAW,GAAG;IACjD,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,GAAG,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;AAE3F,eAAO,MAAM,yBAAyB,GAAI,QAAQ,MAAM;;;;;;CA2BvD,CAAC;AAEF,eAAO,MAAM,aAAa,gDAsBxB,CAAC"}
package/dts/numbers/RollingNumber/RollingNumber.d.ts CHANGED
@@ -253,12 +253,17 @@ export type RollingNumberBaseProps = SharedProps &
253
253
  */
254
254
  locale?: Intl.LocalesArgument;
255
255
  /**
256
- * 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.
256
+ * Base text color token. When {@link colorPulseOnUpdate} is true, the color briefly pulses to a
257
+ * positive or negative mid color before returning to this base color.
258
+ *
259
+ * Only CDS design token colors are accepted here. To apply a non-token color (e.g. a hex string),
260
+ * use `styles={{ text: { color: '#FF0000' } }}` instead.
257
261
  * @default 'fg'
258
262
  */
259
263
  color?: ThemeVars.Color;
260
264
  /**
261
- * Enables color pulsing on positive or negative changes.
265
+ * Enables color pulsing on positive or negative changes. Overriding the default color using
266
+ * `styles.text` nullifies the effect.
262
267
  */
263
268
  colorPulseOnUpdate?: boolean;
264
269
  /**
@@ -309,25 +314,28 @@ export type RollingNumberProps = TextProps &
309
314
  RollingNumberBaseProps & {
310
315
  /** Custom styles for individual elements of the RollingNumber component */
311
316
  styles?: {
312
- /** Outer container element */
317
+ /** Outer container element. */
313
318
  root?: StyleProp<ViewStyle>;
314
- /** Animated visible content wrapper */
319
+ /** Wrapper around the visible number (prefix, value, and suffix). */
315
320
  visibleContent?: StyleProp<ViewStyle>;
316
- /** Formatted numeric value wrapper */
321
+ /** Wrapper around the formatted numeric value (the four i18n sections). */
317
322
  formattedValueSection?: StyleProp<ViewStyle>;
318
- /** Prefix section (from props) */
323
+ /** Container for the `prefix` prop content. */
319
324
  prefix?: StyleProp<ViewStyle>;
320
- /** Suffix section (from props) */
325
+ /** Container for the `suffix` prop content. */
321
326
  suffix?: StyleProp<ViewStyle>;
322
- /** Prefix from Intl.NumberFormat (e.g. "$" in "$1,000") */
327
+ /** Container for the Intl.NumberFormat-generated prefix (e.g. "$" in "$1,000"). */
323
328
  i18nPrefix?: StyleProp<ViewStyle>;
324
- /** Suffix from Intl.NumberFormat (e.g. "K" in "100K") */
329
+ /** Container for the Intl.NumberFormat-generated suffix (e.g. "K" in "100K"). */
325
330
  i18nSuffix?: StyleProp<ViewStyle>;
326
- /** Integer portion of formatted value */
331
+ /** Container for the integer portion of the value. */
327
332
  integer?: StyleProp<ViewStyle>;
328
- /** Fractional portion of formatted value */
333
+ /** Container for the fractional portion of the value. */
329
334
  fraction?: StyleProp<ViewStyle>;
330
- /** Text element for digits and symbols */
335
+ /**
336
+ * Style applied to every text element — digits, symbols, prefix text, and suffix text. Set
337
+ * `color` here to apply a custom (non-token) text color.
338
+ */
331
339
  text?: StyleProp<TextStyle>;
332
340
  };
333
341
  };
package/dts/numbers/RollingNumber/RollingNumber.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"RollingNumber.d.ts","sourceRoot":"","sources":["../../../src/numbers/RollingNumber/RollingNumber.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"RollingNumber.d.ts","sourceRoot":"","sources":["../../../src/numbers/RollingNumber/RollingNumber.tsx"],"names":[],"mappings":"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"}
package/esm/motion/AnimatedCaret.js CHANGED
@@ -1,21 +1,25 @@
1
1
  const _excluded = ["rotate", "size", "color", "style"];
2
2
  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; }
3
3
  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); }
4
- import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react';
4
+ import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
5
5
  import { Animated } from 'react-native';
6
- import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
7
6
  import { animateRotateConfig } from '@coinbase/cds-common/motion/animatedCaret';
8
7
  import { convertMotionConfig } from '../animation/convertMotionConfig';
9
8
  import { Icon } from '../icons/Icon';
10
9
  import { HStack } from '../layout/HStack';
11
10
  import { jsx as _jsx } from "react/jsx-runtime";
12
- export const useAnimatedCaretAnimation = () => {
13
- const rotateValue = useRef(new Animated.Value(0)).current;
14
- const animate = useCallback(rotate => {
11
+ export const useAnimatedCaretAnimation = rotate => {
12
+ const [rotateValue] = useState(() => new Animated.Value(rotate));
13
+ const isInitialRender = useRef(true);
14
+ useEffect(() => {
15
+ if (isInitialRender.current) {
16
+ isInitialRender.current = false;
17
+ return;
18
+ }
15
19
  Animated.timing(rotateValue, convertMotionConfig(_extends({}, animateRotateConfig, {
16
20
  toValue: rotate
17
21
  }))).start();
18
- }, [rotateValue]);
22
+ }, [rotate, rotateValue]);
19
23
  const interpolatedRotateValue = rotateValue.interpolate({
20
24
  inputRange: [0, 360],
21
25
  outputRange: ['0deg', '360deg']
@@ -25,9 +29,8 @@ export const useAnimatedCaretAnimation = () => {
25
29
  transform: [{
26
30
  rotate: interpolatedRotateValue
27
31
  }]
28
- },
29
- animate
30
- }), [interpolatedRotateValue, animate]);
32
+ }
33
+ }), [interpolatedRotateValue]);
31
34
  };
32
35
  export const AnimatedCaret = /*#__PURE__*/memo(function AnimatedCaret(_ref) {
33
36
  let {
@@ -38,13 +41,8 @@ export const AnimatedCaret = /*#__PURE__*/memo(function AnimatedCaret(_ref) {
38
41
  } = _ref,
39
42
  props = _objectWithoutPropertiesLoose(_ref, _excluded);
40
43
  const {
41
- animatedStyles,
42
- animate
43
- } = useAnimatedCaretAnimation();
44
- const previousRotate = usePreviousValue(rotate);
45
- useEffect(() => {
46
- if (rotate !== previousRotate) animate(rotate);
47
- }, [rotate, previousRotate, animate]);
44
+ animatedStyles
45
+ } = useAnimatedCaretAnimation(rotate);
48
46
  return (
49
47
  /*#__PURE__*/
50
48
  // HStack to limit rotate boundary
package/esm/numbers/RollingNumber/RollingNumber.js CHANGED
@@ -148,6 +148,13 @@ export const RollingNumber = /*#__PURE__*/memo(_ref => {
148
148
  transitionConfig,
149
149
  formatted
150
150
  });
151
+
152
+ // Only apply the animated color style while pulsing. When idle it just re-emits the token base
153
+ // color (already applied via textProps.color), and — because a Reanimated animated style
154
+ // overrides static styles regardless of array order — it would clobber a custom styles.text
155
+ // color. Omitting it when not pulsing lets textProps.color (token) or styles.text (custom) drive
156
+ // the color statically.
157
+ const textColorStyles = useMemo(() => colorPulseOnUpdate ? [animatedColorStyle, styles == null ? void 0 : styles.text] : styles == null ? void 0 : styles.text, [colorPulseOnUpdate, animatedColorStyle, styles == null ? void 0 : styles.text]);
151
158
  const rootStyle = useMemo(() => [style, styles == null ? void 0 : styles.root], [style, styles == null ? void 0 : styles.root]);
152
159
  const invisibleMeasuredDigits = useMemo(() => /*#__PURE__*/_jsx(Text, _extends({
153
160
  accessibilityElementsHidden: true,
@@ -165,11 +172,11 @@ export const RollingNumber = /*#__PURE__*/memo(_ref => {
165
172
  justifyContent: "flex-end",
166
173
  style: styles == null ? void 0 : styles.prefix,
167
174
  styles: {
168
- text: [animatedColorStyle, styles == null ? void 0 : styles.text]
175
+ text: textColorStyles
169
176
  },
170
177
  textProps: textProps,
171
178
  children: prefix
172
- }), [RollingNumberAffixSectionComponent, animatedColorStyle, styles == null ? void 0 : styles.prefix, textProps, prefix, styles == null ? void 0 : styles.text]);
179
+ }), [RollingNumberAffixSectionComponent, textColorStyles, styles == null ? void 0 : styles.prefix, textProps, prefix]);
173
180
  const suffixSection = useMemo(() =>
174
181
  /*#__PURE__*/
175
182
  // suffix from props
@@ -177,11 +184,11 @@ export const RollingNumber = /*#__PURE__*/memo(_ref => {
177
184
  justifyContent: "flex-start",
178
185
  style: styles == null ? void 0 : styles.suffix,
179
186
  styles: {
180
- text: [animatedColorStyle, styles == null ? void 0 : styles.text]
187
+ text: textColorStyles
181
188
  },
182
189
  textProps: textProps,
183
190
  children: suffix
184
- }), [RollingNumberAffixSectionComponent, animatedColorStyle, styles == null ? void 0 : styles.suffix, textProps, suffix, styles == null ? void 0 : styles.text]);
191
+ }), [RollingNumberAffixSectionComponent, textColorStyles, styles == null ? void 0 : styles.suffix, textProps, suffix]);
185
192
  const intlPartsValueSection = useMemo(() => {
186
193
  const {
187
194
  pre,
@@ -204,7 +211,7 @@ export const RollingNumber = /*#__PURE__*/memo(_ref => {
204
211
  justifyContent: "flex-end",
205
212
  style: styles == null ? void 0 : styles.i18nPrefix,
206
213
  styles: {
207
- text: [animatedColorStyle, styles == null ? void 0 : styles.text]
214
+ text: textColorStyles
208
215
  },
209
216
  textProps: textProps,
210
217
  transitionConfig: transitionConfig
@@ -219,7 +226,7 @@ export const RollingNumber = /*#__PURE__*/memo(_ref => {
219
226
  justifyContent: "flex-end",
220
227
  style: styles == null ? void 0 : styles.integer,
221
228
  styles: {
222
- text: [animatedColorStyle, styles == null ? void 0 : styles.text]
229
+ text: textColorStyles
223
230
  },
224
231
  textProps: textProps,
225
232
  transitionConfig: transitionConfig
@@ -234,7 +241,7 @@ export const RollingNumber = /*#__PURE__*/memo(_ref => {
234
241
  justifyContent: "flex-start",
235
242
  style: styles == null ? void 0 : styles.fraction,
236
243
  styles: {
237
- text: [animatedColorStyle, styles == null ? void 0 : styles.text]
244
+ text: textColorStyles
238
245
  },
239
246
  textProps: textProps,
240
247
  transitionConfig: transitionConfig
@@ -249,13 +256,13 @@ export const RollingNumber = /*#__PURE__*/memo(_ref => {
249
256
  justifyContent: "flex-start",
250
257
  style: styles == null ? void 0 : styles.i18nSuffix,
251
258
  styles: {
252
- text: [animatedColorStyle, styles == null ? void 0 : styles.text]
259
+ text: textColorStyles
253
260
  },
254
261
  textProps: textProps,
255
262
  transitionConfig: transitionConfig
256
263
  })]
257
264
  });
258
- }, [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]);
265
+ }, [intlNumberFormatter, enableSubscriptNotation, styles == null ? void 0 : styles.formattedValueSection, styles == null ? void 0 : styles.i18nPrefix, textColorStyles, 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, textProps, transitionConfig]);
259
266
  const formattedValueValueSection = useMemo(() => /*#__PURE__*/_jsx(RollingNumberValueSectionComponent, {
260
267
  RollingNumberDigitComponent: RollingNumberDigitComponent,
261
268
  RollingNumberMaskComponent: RollingNumberMaskComponent,
@@ -268,11 +275,11 @@ export const RollingNumber = /*#__PURE__*/memo(_ref => {
268
275
  justifyContent: "flex-start",
269
276
  style: styles == null ? void 0 : styles.formattedValueSection,
270
277
  styles: {
271
- text: [animatedColorStyle, styles == null ? void 0 : styles.text]
278
+ text: textColorStyles
272
279
  },
273
280
  textProps: textProps,
274
281
  transitionConfig: transitionConfig
275
- }), [RollingNumberMaskComponent, styles == null ? void 0 : styles.formattedValueSection, styles == null ? void 0 : styles.text, RollingNumberValueSectionComponent, RollingNumberDigitComponent, RollingNumberSymbolComponent, formattedValue, digitHeight, digitTransitionVariant, direction, animatedColorStyle, textProps, transitionConfig]);
282
+ }), [RollingNumberMaskComponent, styles == null ? void 0 : styles.formattedValueSection, textColorStyles, RollingNumberValueSectionComponent, RollingNumberDigitComponent, RollingNumberSymbolComponent, formattedValue, digitHeight, digitTransitionVariant, direction, textProps, transitionConfig]);
276
283
  const screenReaderOnlySection = useMemo(() => {
277
284
  const prefixString = typeof prefix === 'string' ? prefix : '';
278
285
  const suffixString = typeof suffix === 'string' ? suffix : '';
package/esm/numbers/__stories__/RollingNumber.stories.js CHANGED
@@ -426,6 +426,21 @@ export const ColorAndTransition = () => {
426
426
  }
427
427
  },
428
428
  value: price
429
+ }), /*#__PURE__*/_jsx(Text, {
430
+ font: "label1",
431
+ children: "Custom non-token color via styles.text (no pulse)"
432
+ }), /*#__PURE__*/_jsx(RollingNumber, {
433
+ font: "title1",
434
+ format: {
435
+ style: 'currency',
436
+ currency: 'USD'
437
+ },
438
+ styles: {
439
+ text: {
440
+ color: '#6366f1'
441
+ }
442
+ },
443
+ value: price
429
444
  }), /*#__PURE__*/_jsx(Text, {
430
445
  font: "label1",
431
446
  children: "Custom easings"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/cds-mobile",
3
- "version": "9.6.4",
3
+ "version": "9.6.6",
4
4
  "description": "Coinbase Design System - Mobile",
5
5
  "repository": {
6
6
  "type": "git",
@@ -206,7 +206,7 @@
206
206
  "react-native-worklets": "0.5.2"
207
207
  },
208
208
  "dependencies": {
209
- "@coinbase/cds-common": "^9.6.4",
209
+ "@coinbase/cds-common": "^9.6.6",
210
210
  "@coinbase/cds-icons": "^5.20.0",
211
211
  "@coinbase/cds-illustrations": "^4.44.0",
212
212
  "@coinbase/cds-lottie-files": "^3.3.4",