@coinbase/cds-mcp-server 8.32.3 → 8.33.0
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.
- package/CHANGELOG.md +4 -0
- package/mcp-docs/mobile/components/AreaChart.txt +3 -3
- package/mcp-docs/mobile/components/BarChart.txt +2 -2
- package/mcp-docs/mobile/components/CartesianChart.txt +2 -2
- package/mcp-docs/mobile/components/LineChart.txt +3 -3
- package/mcp-docs/mobile/components/PeriodSelector.txt +2 -2
- package/mcp-docs/mobile/components/RollingNumber.txt +42 -4
- package/mcp-docs/mobile/components/Sparkline.txt +2 -2
- package/mcp-docs/mobile/components/SparklineGradient.txt +2 -2
- package/mcp-docs/mobile/components/SparklineInteractive.txt +1 -1
- package/mcp-docs/web/components/RollingNumber.txt +116 -8
- package/mcp-docs/web/components/Sparkline.txt +2 -2
- package/mcp-docs/web/components/SparklineGradient.txt +2 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
|
|
|
8
8
|
|
|
9
9
|
<!-- template-start -->
|
|
10
10
|
|
|
11
|
+
## 8.33.0 ((12/18/2025, 11:46 AM PST))
|
|
12
|
+
|
|
13
|
+
This is an artificial version bump with no new change.
|
|
14
|
+
|
|
11
15
|
## 8.32.3 (12/18/2025)
|
|
12
16
|
|
|
13
17
|
This is an artificial version bump with no new change.
|
|
@@ -252,13 +252,13 @@ You can have different area styles for each series.
|
|
|
252
252
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
|
|
253
253
|
| `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
|
|
254
254
|
| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
|
|
255
|
-
| `textDecorationStyle` | `solid \|
|
|
255
|
+
| `textDecorationStyle` | `solid \| double \| dotted \| dashed` | No | `-` | - |
|
|
256
256
|
| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
|
|
257
257
|
| `top` | `string \| number` | No | `-` | - |
|
|
258
258
|
| `transform` | `string \| (({ perspective: AnimatableNumericValue; } & { rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleX: AnimatableNumericValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
|
|
259
259
|
| `transition` | `{ type: timing; } & TimingConfig \| { type: spring; } & { stiffness?: number \| undefined; overshootClamping?: boolean \| undefined; restDisplacementThreshold?: number \| undefined; restSpeedThreshold?: number \| undefined; velocity?: number \| undefined; reduceMotion?: ReduceMotion \| undefined; } & { mass?: number \| undefined; damping?: number \| undefined; duration?: undefined; dampingRatio?: undefined; clamp?: undefined; } \| { type: spring; } & { stiffness?: number \| undefined; overshootClamping?: boolean \| undefined; restDisplacementThreshold?: number \| undefined; restSpeedThreshold?: number \| undefined; velocity?: number \| undefined; reduceMotion?: ReduceMotion \| undefined; } & { mass?: undefined; damping?: undefined; duration?: number \| undefined; dampingRatio?: number \| undefined; clamp?: { min?: number \| undefined; max?: number \| undefined; } \| undefined; }` | No | `-` | Transition configuration for path animations. |
|
|
260
|
-
| `type` | `
|
|
261
|
-
| `userSelect` | `
|
|
260
|
+
| `type` | `solid \| dotted \| gradient` | No | `'solid'` | The type of area to render. |
|
|
261
|
+
| `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
|
|
262
262
|
| `width` | `string \| number` | No | `-` | - |
|
|
263
263
|
| `xAxis` | `(Partial<AxisConfigProps> & AxisBaseProps & { GridLineComponent?: LineComponent; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { position?: top \| bottom \| undefined; height?: number \| undefined; }) \| undefined` | No | `-` | Configuration for x-axis. Accepts axis config and axis props. To show the axis, set showXAxis to true. |
|
|
264
264
|
| `yAxis` | `(Partial<AxisConfigProps> & AxisBaseProps & { GridLineComponent?: LineComponent; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: left \| right \| undefined; width?: number \| undefined; }) \| undefined` | No | `-` | Configuration for y-axis. Accepts axis config and axis props. To show the axis, set showYAxis to true. |
|
|
@@ -803,12 +803,12 @@ function MultipleYAxes() {
|
|
|
803
803
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
|
|
804
804
|
| `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
|
|
805
805
|
| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
|
|
806
|
-
| `textDecorationStyle` | `solid \|
|
|
806
|
+
| `textDecorationStyle` | `solid \| double \| dotted \| dashed` | No | `-` | - |
|
|
807
807
|
| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
|
|
808
808
|
| `top` | `string \| number` | No | `-` | - |
|
|
809
809
|
| `transform` | `string \| (({ perspective: AnimatableNumericValue; } & { rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleX: AnimatableNumericValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
|
|
810
810
|
| `transition` | `{ type: timing; } & TimingConfig \| { type: spring; } & { stiffness?: number \| undefined; overshootClamping?: boolean \| undefined; restDisplacementThreshold?: number \| undefined; restSpeedThreshold?: number \| undefined; velocity?: number \| undefined; reduceMotion?: ReduceMotion \| undefined; } & { mass?: number \| undefined; damping?: number \| undefined; duration?: undefined; dampingRatio?: undefined; clamp?: undefined; } \| { type: spring; } & { stiffness?: number \| undefined; overshootClamping?: boolean \| undefined; restDisplacementThreshold?: number \| undefined; restSpeedThreshold?: number \| undefined; velocity?: number \| undefined; reduceMotion?: ReduceMotion \| undefined; } & { mass?: undefined; damping?: undefined; duration?: number \| undefined; dampingRatio?: number \| undefined; clamp?: { min?: number \| undefined; max?: number \| undefined; } \| undefined; }` | No | `-` | Transition configurations for different animation phases. |
|
|
811
|
-
| `userSelect` | `
|
|
811
|
+
| `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
|
|
812
812
|
| `width` | `string \| number` | No | `-` | - |
|
|
813
813
|
| `xAxis` | `(Partial<AxisConfigProps> & AxisBaseProps & { GridLineComponent?: LineComponent; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { position?: top \| bottom \| undefined; height?: number \| undefined; }) \| undefined` | No | `-` | Configuration for x-axis. Accepts axis config and axis props. To show the axis, set showXAxis to true. |
|
|
814
814
|
| `yAxis` | `(Partial<AxisConfigProps> & AxisBaseProps & { GridLineComponent?: LineComponent; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: left \| right \| undefined; width?: number \| undefined; }) \| undefined` | No | `-` | Configuration for y-axis. Accepts axis config and axis props. To show the axis, set showYAxis to true. |
|
|
@@ -843,11 +843,11 @@ function TradingTrends() {
|
|
|
843
843
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
|
|
844
844
|
| `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
|
|
845
845
|
| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
|
|
846
|
-
| `textDecorationStyle` | `solid \|
|
|
846
|
+
| `textDecorationStyle` | `solid \| double \| dotted \| dashed` | No | `-` | - |
|
|
847
847
|
| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
|
|
848
848
|
| `top` | `string \| number` | No | `-` | - |
|
|
849
849
|
| `transform` | `string \| (({ perspective: AnimatableNumericValue; } & { rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleX: AnimatableNumericValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
|
|
850
|
-
| `userSelect` | `
|
|
850
|
+
| `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
|
|
851
851
|
| `width` | `string \| number` | No | `-` | - |
|
|
852
852
|
| `xAxis` | `Partial<Omit<AxisConfigProps, id>>` | No | `-` | Configuration for x-axis. |
|
|
853
853
|
| `yAxis` | `Partial<AxisConfigProps> \| Partial<AxisConfigProps>[]` | No | `-` | Configuration for y-axis(es). Can be a single config or array of configs. |
|
|
@@ -1926,7 +1926,7 @@ function ForecastAssetPrice() {
|
|
|
1926
1926
|
| `allowOverflowGestures` | `boolean` | No | `-` | Allows continuous gestures on the chart to continue outside the bounds of the chart element. |
|
|
1927
1927
|
| `animate` | `boolean` | No | `true` | Whether to animate the chart. |
|
|
1928
1928
|
| `animated` | `boolean` | No | `-` | - |
|
|
1929
|
-
| `areaType` | `
|
|
1929
|
+
| `areaType` | `solid \| dotted \| gradient` | No | `'gradient'` | The type of area fill to add to the line. |
|
|
1930
1930
|
| `aspectRatio` | `string \| number` | No | `-` | - |
|
|
1931
1931
|
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
|
|
1932
1932
|
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
@@ -2023,13 +2023,13 @@ function ForecastAssetPrice() {
|
|
|
2023
2023
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
|
|
2024
2024
|
| `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
|
|
2025
2025
|
| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
|
|
2026
|
-
| `textDecorationStyle` | `solid \|
|
|
2026
|
+
| `textDecorationStyle` | `solid \| double \| dotted \| dashed` | No | `-` | - |
|
|
2027
2027
|
| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
|
|
2028
2028
|
| `top` | `string \| number` | No | `-` | - |
|
|
2029
2029
|
| `transform` | `string \| (({ perspective: AnimatableNumericValue; } & { rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleX: AnimatableNumericValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
|
|
2030
2030
|
| `transition` | `{ type: timing; } & TimingConfig \| { type: spring; } & { stiffness?: number \| undefined; overshootClamping?: boolean \| undefined; restDisplacementThreshold?: number \| undefined; restSpeedThreshold?: number \| undefined; velocity?: number \| undefined; reduceMotion?: ReduceMotion \| undefined; } & { mass?: number \| undefined; damping?: number \| undefined; duration?: undefined; dampingRatio?: undefined; clamp?: undefined; } \| { type: spring; } & { stiffness?: number \| undefined; overshootClamping?: boolean \| undefined; restDisplacementThreshold?: number \| undefined; restSpeedThreshold?: number \| undefined; velocity?: number \| undefined; reduceMotion?: ReduceMotion \| undefined; } & { mass?: undefined; damping?: undefined; duration?: number \| undefined; dampingRatio?: number \| undefined; clamp?: { min?: number \| undefined; max?: number \| undefined; } \| undefined; }` | No | `-` | Transition configuration for line animations. |
|
|
2031
2031
|
| `type` | `solid \| dotted` | No | `'solid'` | The type of line to render. |
|
|
2032
|
-
| `userSelect` | `
|
|
2032
|
+
| `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
|
|
2033
2033
|
| `width` | `string \| number` | No | `-` | - |
|
|
2034
2034
|
| `xAxis` | `(Partial<AxisConfigProps> & AxisBaseProps & { GridLineComponent?: LineComponent; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { position?: top \| bottom \| undefined; height?: number \| undefined; }) \| undefined` | No | `-` | Configuration for x-axis. Accepts axis config and axis props. To show the axis, set showXAxis to true. |
|
|
2035
2035
|
| `yAxis` | `(Partial<AxisConfigProps> & AxisBaseProps & { GridLineComponent?: LineComponent; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: left \| right \| undefined; width?: number \| undefined; }) \| undefined` | No | `-` | Configuration for y-axis. Accepts axis config and axis props. To show the axis, set showYAxis to true. |
|
|
@@ -396,11 +396,11 @@ function ColoredExcludingLiveExample() {
|
|
|
396
396
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
|
|
397
397
|
| `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
|
|
398
398
|
| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
|
|
399
|
-
| `textDecorationStyle` | `solid \|
|
|
399
|
+
| `textDecorationStyle` | `solid \| double \| dotted \| dashed` | No | `-` | - |
|
|
400
400
|
| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
|
|
401
401
|
| `top` | `string \| number` | No | `-` | - |
|
|
402
402
|
| `transform` | `string \| (({ perspective: AnimatableNumericValue; } & { rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleX: AnimatableNumericValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
|
|
403
|
-
| `userSelect` | `
|
|
403
|
+
| `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
|
|
404
404
|
| `width` | `string \| number` | No | `-` | - |
|
|
405
405
|
| `zIndex` | `number` | No | `-` | - |
|
|
406
406
|
|
|
@@ -274,6 +274,43 @@ function ColorAndTransition() {
|
|
|
274
274
|
}
|
|
275
275
|
```
|
|
276
276
|
|
|
277
|
+
### Digit Transition Variants
|
|
278
|
+
|
|
279
|
+
RollingNumber supports two digit transition styles via the `digitTransitionVariant` prop:
|
|
280
|
+
|
|
281
|
+
- **`'every'`** (default): Rolls through every intermediate digit (e.g., 1→2→3→...→9).
|
|
282
|
+
- **`'single'`**: Rolls directly to the new digit without showing intermediates. Direction (up/down) is based on the total value change.
|
|
283
|
+
|
|
284
|
+
```tsx
|
|
285
|
+
function DigitTransitionVariants() {
|
|
286
|
+
const price = 12345.67;
|
|
287
|
+
return (
|
|
288
|
+
<VStack gap={2}>
|
|
289
|
+
<Text font="label1">Every variant (default)</Text>
|
|
290
|
+
<RollingNumber
|
|
291
|
+
colorPulseOnUpdate
|
|
292
|
+
digitTransitionVariant="every"
|
|
293
|
+
font="display3"
|
|
294
|
+
format={{ style: 'currency', currency: 'USD' }}
|
|
295
|
+
value={price}
|
|
296
|
+
/>
|
|
297
|
+
<Text font="label1">Single variant</Text>
|
|
298
|
+
<RollingNumber
|
|
299
|
+
colorPulseOnUpdate
|
|
300
|
+
digitTransitionVariant="single"
|
|
301
|
+
font="display3"
|
|
302
|
+
format={{ style: 'currency', currency: 'USD' }}
|
|
303
|
+
value={price}
|
|
304
|
+
/>
|
|
305
|
+
</VStack>
|
|
306
|
+
);
|
|
307
|
+
}
|
|
308
|
+
```
|
|
309
|
+
|
|
310
|
+
::::tip Direction-aware animation
|
|
311
|
+
The single variant determines scroll direction based on the **total value change**, not individual digit changes. When the value increases, digits roll up (new digits enter from below). When the value decreases, digits roll down (new digits enter from above). This matches the behavior of the color pulse feature.
|
|
312
|
+
::::
|
|
313
|
+
|
|
277
314
|
### Prefix and Suffix
|
|
278
315
|
|
|
279
316
|
Attach text or React nodes before/after the number to create rich compositions. If the prefix/suffix is a string, it will pulse color together with the main number.
|
|
@@ -690,12 +727,13 @@ ValueSection
|
|
|
690
727
|
| `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
691
728
|
| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
692
729
|
| `bottom` | `string \| number` | No | `-` | - |
|
|
693
|
-
| `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No |
|
|
730
|
+
| `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `'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. |
|
|
694
731
|
| `colorPulseOnUpdate` | `boolean` | No | `-` | Enables color pulsing on positive or negative changes. |
|
|
695
732
|
| `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
696
733
|
| `dangerouslySetBackground` | `string \| OpaqueColorValue` | No | `-` | - |
|
|
697
734
|
| `dangerouslySetColor` | `string \| OpaqueColorValue` | No | `-` | - |
|
|
698
735
|
| `dataDetectorType` | `link \| none \| all \| email \| phoneNumber \| null` | No | `-` | Determines the types of data converted to clickable URLs in the text element. By default no data types are detected. |
|
|
736
|
+
| `digitTransitionVariant` | `every \| single` | No | `'every'` | 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). |
|
|
699
737
|
| `disabled` | `boolean` | No | `-` | Add disabled opacity style to text Specifies the disabled state of the text view for testing purposes. |
|
|
700
738
|
| `display` | `flex \| none` | No | `-` | - |
|
|
701
739
|
| `dynamicTypeRamp` | `title1 \| title2 \| title3 \| headline \| body \| caption2 \| caption1 \| footnote \| subheadline \| callout \| largeTitle` | No | `-` | The Dynamic Type scale ramp to apply to this element on iOS. |
|
|
@@ -739,7 +777,7 @@ ValueSection
|
|
|
739
777
|
| `minimumFontScale` | `number` | No | `-` | Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0). |
|
|
740
778
|
| `mono` | `boolean` | No | `-` | Use monospace font family. |
|
|
741
779
|
| `nativeID` | `string` | No | `-` | Used to reference react managed views from native code. |
|
|
742
|
-
| `negativePulseColor` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No |
|
|
780
|
+
| `negativePulseColor` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `'fgNegative'` | Color token used for negative numeric changes. |
|
|
743
781
|
| `noWrap` | `boolean` | No | `false` | Set text to be in a single line. |
|
|
744
782
|
| `numberOfLines` | `number` | No | `-` | Truncates text after wrapping to a defined number of lines. Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. This prop is commonly used with ellipsizeMode. |
|
|
745
783
|
| `onLayout` | `((event: LayoutChangeEvent) => void)` | No | `-` | Invoked on mount and layout changes with {nativeEvent: { layout: {x, y, width, height}}}. |
|
|
@@ -758,7 +796,7 @@ ValueSection
|
|
|
758
796
|
| `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
759
797
|
| `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
760
798
|
| `position` | `static \| relative \| fixed \| absolute \| sticky` | No | `-` | - |
|
|
761
|
-
| `positivePulseColor` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No |
|
|
799
|
+
| `positivePulseColor` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `'fgPositive'` | Color token used for positive numeric changes. |
|
|
762
800
|
| `prefix` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Content rendered before the formatted value. |
|
|
763
801
|
| `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
|
|
764
802
|
| `renderEmptyNode` | `boolean` | No | `-` | - |
|
|
@@ -770,7 +808,7 @@ ValueSection
|
|
|
770
808
|
| `styles` | `{ root?: StyleProp<ViewStyle>; visibleContent?: StyleProp<ViewStyle>; formattedValueSection?: StyleProp<ViewStyle>; prefix?: StyleProp<ViewStyle>; suffix?: StyleProp<ViewStyle>; i18nPrefix?: StyleProp<ViewStyle>; i18nSuffix?: StyleProp<ViewStyle>; integer?: StyleProp<ViewStyle>; fraction?: StyleProp<ViewStyle>; text?: StyleProp<TextStyle>; }` | No | `-` | Style overrides applied to RollingNumber slots. |
|
|
771
809
|
| `suffix` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Content rendered after the formatted value. |
|
|
772
810
|
| `suppressHighlighting` | `boolean` | No | `-` | When true, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down. |
|
|
773
|
-
| `tabularNumbers` | `boolean` | No | `false` | Activates the set of figures where numbers are all of the same size, allowing them to be easily aligned. Enables tabular figures on the underlying {@link Text}. All digits render with equal width.
|
|
811
|
+
| `tabularNumbers` | `boolean` | No | `false true` | Activates the set of figures where numbers are all of the same size, allowing them to be easily aligned. Enables tabular figures on the underlying {@link Text}. All digits render with equal width. |
|
|
774
812
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
|
|
775
813
|
| `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
|
|
776
814
|
| `textBreakStrategy` | `simple \| highQuality \| balanced` | No | `-` | Set text break strategy on Android API Level 23+ default is highQuality. |
|
|
@@ -113,11 +113,11 @@ function Example() {
|
|
|
113
113
|
| `width` | `number` | Yes | `-` | Width of the Sparkline |
|
|
114
114
|
| `background` | `string` | No | `-` | - |
|
|
115
115
|
| `children` | `null \| false \| ReactElement<SparklineAreaBaseProps, string \| JSXElementConstructor<any>> \| OptionalElement<SparklineAreaBaseProps>[]` | No | `-` | an optional SparklineArea that can be used to fill in the Sparkline |
|
|
116
|
-
| `fillType` | `
|
|
116
|
+
| `fillType` | `dotted \| gradient \| gradientDotted` | No | `'dotted'` | Type of fill to use for the area |
|
|
117
117
|
| `key` | `Key \| null` | No | `-` | - |
|
|
118
118
|
| `path` | `string` | No | `-` | Svg path as string. CDS offers a useSparklinePath which is useful to generate this string. This is accessible via import { useSparklinePath } from @coinbase/cds-common/visualizations/useSparklinePath;. Alternatively, you can use product tailored tooling to generate the SVG path. This component only requires a valid path string is provided. |
|
|
119
119
|
| `ref` | `((instance: Path \| null) => void) \| RefObject<Path \| null> \| null` | No | `-` | - |
|
|
120
|
-
| `strokeType` | `
|
|
120
|
+
| `strokeType` | `solid \| gradient` | No | `'solid'` | Type of stroke to use for the line - gradient: Gradient colored stroke line - solid: Solid colored stroke line |
|
|
121
121
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
|
|
122
122
|
| `yAxisScalingFactor` | `number` | No | `-` | Scales the sparkline to show more or less variance. Use a number less than 1 for less variance and a number greater than 1 for more variance. If you use a number greater than 1 it may clip the boundaries of the sparkline. |
|
|
123
123
|
|
|
@@ -97,11 +97,11 @@ function Example() {
|
|
|
97
97
|
| `width` | `number` | Yes | `-` | Width of the Sparkline |
|
|
98
98
|
| `background` | `string` | No | `-` | - |
|
|
99
99
|
| `children` | `null \| false \| ReactElement<SparklineAreaBaseProps, string \| JSXElementConstructor<any>> \| OptionalElement<SparklineAreaBaseProps>[]` | No | `-` | an optional SparklineArea that can be used to fill in the Sparkline |
|
|
100
|
-
| `fillType` | `
|
|
100
|
+
| `fillType` | `dotted \| gradient \| gradientDotted` | No | `'dotted'` | Type of fill to use for the area |
|
|
101
101
|
| `key` | `Key \| null` | No | `-` | - |
|
|
102
102
|
| `path` | `string` | No | `-` | Svg path as string. CDS offers a useSparklinePath which is useful to generate this string. This is accessible via import { useSparklinePath } from @coinbase/cds-common/visualizations/useSparklinePath;. Alternatively, you can use product tailored tooling to generate the SVG path. This component only requires a valid path string is provided. |
|
|
103
103
|
| `ref` | `((instance: Path \| null) => void) \| RefObject<Path \| null> \| null` | No | `-` | - |
|
|
104
|
-
| `strokeType` | `
|
|
104
|
+
| `strokeType` | `solid \| gradient` | No | `'solid'` | Type of stroke to use for the line - gradient: Gradient colored stroke line - solid: Solid colored stroke line |
|
|
105
105
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
|
|
106
106
|
| `yAxisScalingFactor` | `number` | No | `-` | Scales the sparkline to show more or less variance. Use a number less than 1 for less variance and a number greater than 1 for more variance. If you use a number greater than 1 it may clip the boundaries of the sparkline. |
|
|
107
107
|
|
|
@@ -133,7 +133,7 @@ You can also provide custom styles, such as to remove bottom padding from the he
|
|
|
133
133
|
| `fallback` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Fallback shown in the chart when data is not available. This is usually a loading state. |
|
|
134
134
|
| `fallbackType` | `positive \| negative` | No | `-` | If you use the default fallback then this specifies if the fallback line is decreasing or increasing |
|
|
135
135
|
| `fill` | `boolean` | No | `true` | Adds an area fill to the Sparkline |
|
|
136
|
-
| `fillType` | `
|
|
136
|
+
| `fillType` | `dotted \| gradient` | No | `'gradient'` | Type of fill to use for the area |
|
|
137
137
|
| `formatHoverDate` | `((date: Date, period: Period) => string)` | No | `-` | Formats the date above the chart as you scrub. Omit this if you dont want to show the date as the user scrubs |
|
|
138
138
|
| `formatHoverPrice` | `((price: number) => string)` | No | `-` | Formats the price above the chart as you scrub. Omit this if you dont want to show the price as the user scrubs |
|
|
139
139
|
| `formatMinMaxLabel` | `ChartFormatAmount` | No | `-` | function used to format the amount of money used in the minMaxLabel |
|
|
@@ -248,6 +248,7 @@ function Example() {
|
|
|
248
248
|
format={{ style: 'currency', currency: 'USD' }}
|
|
249
249
|
transition={{
|
|
250
250
|
color: { duration: 0.3, ease: 'easeInOut' },
|
|
251
|
+
opacity: { duration: 0.3, ease: 'easeInOut' },
|
|
251
252
|
y: { duration: 0.3, ease: 'easeIn' },
|
|
252
253
|
}}
|
|
253
254
|
value={price}
|
|
@@ -260,6 +261,7 @@ function Example() {
|
|
|
260
261
|
format={{ style: 'currency', currency: 'USD' }}
|
|
261
262
|
transition={{
|
|
262
263
|
color: { duration: 1.2, ease: 'easeInOut' },
|
|
264
|
+
opacity: { duration: 1.2, ease: 'easeInOut' },
|
|
263
265
|
y: { duration: 1.2, ease: 'easeIn' },
|
|
264
266
|
}}
|
|
265
267
|
value={price}
|
|
@@ -284,8 +286,9 @@ function Example() {
|
|
|
284
286
|
font="title1"
|
|
285
287
|
format={{ style: 'currency', currency: 'USD' }}
|
|
286
288
|
transition={{
|
|
287
|
-
y: { duration: 0.1, ease: 'easeIn' },
|
|
288
289
|
color: { duration: 1.2, ease: 'easeInOut' },
|
|
290
|
+
opacity: { duration: 0.1, ease: 'easeInOut' },
|
|
291
|
+
y: { duration: 0.1, ease: 'easeIn' },
|
|
289
292
|
}}
|
|
290
293
|
value={price}
|
|
291
294
|
/>
|
|
@@ -298,6 +301,7 @@ function Example() {
|
|
|
298
301
|
font="title1"
|
|
299
302
|
format={{ style: 'currency', currency: 'USD' }}
|
|
300
303
|
transition={{
|
|
304
|
+
opacity: { duration: 2, ease: 'easeInOut' },
|
|
301
305
|
y: {
|
|
302
306
|
type: 'spring',
|
|
303
307
|
stiffness: 1000,
|
|
@@ -316,8 +320,9 @@ function Example() {
|
|
|
316
320
|
font="title1"
|
|
317
321
|
format={{ style: 'currency', currency: 'USD' }}
|
|
318
322
|
transition={{
|
|
319
|
-
y: { duration: 0.25, ease: 'easeOut' },
|
|
320
323
|
color: { duration: 0.5, ease: 'easeInOut' },
|
|
324
|
+
opacity: { duration: 0.5, ease: 'easeInOut' },
|
|
325
|
+
y: { duration: 0.25, ease: 'easeOut' },
|
|
321
326
|
}}
|
|
322
327
|
value={price}
|
|
323
328
|
/>
|
|
@@ -329,6 +334,108 @@ function Example() {
|
|
|
329
334
|
}
|
|
330
335
|
```
|
|
331
336
|
|
|
337
|
+
### Digit Transition Variants
|
|
338
|
+
|
|
339
|
+
RollingNumber supports two digit transition styles via the `digitTransitionVariant` prop:
|
|
340
|
+
|
|
341
|
+
- **`'every'`** (default): Rolls through every intermediate digit (e.g., 1→2→3→...→9).
|
|
342
|
+
- **`'single'`**: Rolls directly to the new digit without showing intermediates. Direction (up/down) is based on the total value change.
|
|
343
|
+
|
|
344
|
+
```tsx live
|
|
345
|
+
function Example() {
|
|
346
|
+
const [price, setPrice] = React.useState(12345.67);
|
|
347
|
+
const [variant, setVariant] = React.useState<'every' | 'single'>('single');
|
|
348
|
+
|
|
349
|
+
const onIncrease = () => setPrice((p) => Math.round((p + Math.random() * 500 + 100) * 100) / 100);
|
|
350
|
+
const onDecrease = () =>
|
|
351
|
+
setPrice((p) => Math.max(0, Math.round((p - Math.random() * 500 - 100) * 100) / 100));
|
|
352
|
+
const onRandom = () =>
|
|
353
|
+
setPrice((p) => {
|
|
354
|
+
const delta = (Math.random() - 0.5) * 1000;
|
|
355
|
+
return Math.max(0, Math.round((p + delta) * 100) / 100);
|
|
356
|
+
});
|
|
357
|
+
|
|
358
|
+
return (
|
|
359
|
+
<VStack gap={2}>
|
|
360
|
+
<Text as="p" display="block" font="label1">
|
|
361
|
+
Digit transition variant: <strong>{variant}</strong>
|
|
362
|
+
</Text>
|
|
363
|
+
<RollingNumber
|
|
364
|
+
digitTransitionVariant={variant}
|
|
365
|
+
font="display1"
|
|
366
|
+
format={{ style: 'currency', currency: 'USD' }}
|
|
367
|
+
value={price}
|
|
368
|
+
/>
|
|
369
|
+
<HStack gap={2}>
|
|
370
|
+
<Button onClick={onIncrease}>Increase</Button>
|
|
371
|
+
<Button onClick={onDecrease}>Decrease</Button>
|
|
372
|
+
<Button onClick={onRandom}>Random</Button>
|
|
373
|
+
</HStack>
|
|
374
|
+
<HStack gap={2}>
|
|
375
|
+
<Button
|
|
376
|
+
variant={variant === 'every' ? 'primary' : 'secondary'}
|
|
377
|
+
onClick={() => setVariant('every')}
|
|
378
|
+
>
|
|
379
|
+
Every
|
|
380
|
+
</Button>
|
|
381
|
+
<Button
|
|
382
|
+
variant={variant === 'single' ? 'primary' : 'secondary'}
|
|
383
|
+
onClick={() => setVariant('single')}
|
|
384
|
+
>
|
|
385
|
+
Single
|
|
386
|
+
</Button>
|
|
387
|
+
</HStack>
|
|
388
|
+
</VStack>
|
|
389
|
+
);
|
|
390
|
+
}
|
|
391
|
+
```
|
|
392
|
+
|
|
393
|
+
#### Variant comparison
|
|
394
|
+
|
|
395
|
+
```tsx live
|
|
396
|
+
function Example() {
|
|
397
|
+
const [price, setPrice] = React.useState(98765.43);
|
|
398
|
+
|
|
399
|
+
const onNext = () =>
|
|
400
|
+
setPrice((p) => {
|
|
401
|
+
const delta = (Math.random() - 0.5) * 2000;
|
|
402
|
+
return Math.max(0, Math.round((p + delta) * 100) / 100);
|
|
403
|
+
});
|
|
404
|
+
|
|
405
|
+
return (
|
|
406
|
+
<VStack gap={2}>
|
|
407
|
+
<Text as="p" display="block" font="label1">
|
|
408
|
+
Every variant (default)
|
|
409
|
+
</Text>
|
|
410
|
+
<RollingNumber
|
|
411
|
+
colorPulseOnUpdate
|
|
412
|
+
digitTransitionVariant="every"
|
|
413
|
+
font="display3"
|
|
414
|
+
format={{ style: 'currency', currency: 'USD' }}
|
|
415
|
+
value={price}
|
|
416
|
+
/>
|
|
417
|
+
<Text as="p" display="block" font="label1">
|
|
418
|
+
Single variant
|
|
419
|
+
</Text>
|
|
420
|
+
<RollingNumber
|
|
421
|
+
colorPulseOnUpdate
|
|
422
|
+
digitTransitionVariant="single"
|
|
423
|
+
font="display3"
|
|
424
|
+
format={{ style: 'currency', currency: 'USD' }}
|
|
425
|
+
value={price}
|
|
426
|
+
/>
|
|
427
|
+
<Button alignSelf="flex-start" onClick={onNext}>
|
|
428
|
+
Random Change
|
|
429
|
+
</Button>
|
|
430
|
+
</VStack>
|
|
431
|
+
);
|
|
432
|
+
}
|
|
433
|
+
```
|
|
434
|
+
|
|
435
|
+
::::tip Direction-aware animation
|
|
436
|
+
The single variant determines scroll direction based on the **total value change**, not individual digit changes. When the value increases, digits roll up (new digits enter from below). When the value decreases, digits roll down (new digits enter from above). This matches the behavior of the color pulse feature.
|
|
437
|
+
::::
|
|
438
|
+
|
|
332
439
|
### Prefix and Suffix
|
|
333
440
|
|
|
334
441
|
Attach text or React nodes before/after the number to create rich compositions. If the prefix/suffix is a string, it will pulse color together with the main number.
|
|
@@ -903,7 +1010,7 @@ ValueSection
|
|
|
903
1010
|
| `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
|
|
904
1011
|
| `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
905
1012
|
| `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
906
|
-
| `ariaLive` | `off \| assertive \| polite` | No |
|
|
1013
|
+
| `ariaLive` | `off \| assertive \| polite` | No | `'polite'` | aria-live politeness level. |
|
|
907
1014
|
| `as` | `symbol \| object \| style \| div \| a \| abbr \| address \| area \| article \| aside \| audio \| b \| base \| bdi \| bdo \| big \| blockquote \| body \| br \| button \| canvas \| caption \| center \| cite \| code \| col \| colgroup \| data \| datalist \| dd \| del \| details \| dfn \| dialog \| dl \| dt \| em \| embed \| fieldset \| figcaption \| figure \| footer \| form \| h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| head \| header \| hgroup \| hr \| html \| i \| iframe \| img \| input \| ins \| kbd \| keygen \| label \| legend \| li \| link \| main \| map \| mark \| menu \| menuitem \| meta \| meter \| nav \| noindex \| noscript \| ol \| optgroup \| option \| output \| p \| param \| picture \| pre \| progress \| q \| rp \| rt \| ruby \| s \| samp \| search \| slot \| script \| section \| select \| small \| source \| span \| strong \| sub \| summary \| sup \| table \| template \| tbody \| td \| textarea \| tfoot \| th \| thead \| time \| title \| tr \| track \| u \| ul \| var \| video \| wbr \| webview \| svg \| animate \| animateMotion \| animateTransform \| circle \| clipPath \| defs \| desc \| ellipse \| feBlend \| feColorMatrix \| feComponentTransfer \| feComposite \| feConvolveMatrix \| feDiffuseLighting \| feDisplacementMap \| feDistantLight \| feDropShadow \| feFlood \| feFuncA \| feFuncB \| feFuncG \| feFuncR \| feGaussianBlur \| feImage \| feMerge \| feMergeNode \| feMorphology \| feOffset \| fePointLight \| feSpecularLighting \| feSpotLight \| feTile \| feTurbulence \| filter \| foreignObject \| g \| image \| line \| linearGradient \| marker \| mask \| metadata \| mpath \| path \| pattern \| polygon \| polyline \| radialGradient \| rect \| set \| stop \| switch \| text \| textPath \| tspan \| use \| view \| ComponentClass<any, any> \| FunctionComponent<any>` | No | `-` | - |
|
|
908
1015
|
| `aspectRatio` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
909
1016
|
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
|
|
@@ -927,11 +1034,12 @@ ValueSection
|
|
|
927
1034
|
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
928
1035
|
| `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
|
|
929
1036
|
| `classNames` | `{ root?: string; visibleContent?: string \| undefined; formattedValueSection?: string \| undefined; prefix?: string \| undefined; suffix?: string \| undefined; i18nPrefix?: string \| undefined; i18nSuffix?: string \| undefined; integer?: string \| undefined; fraction?: string \| undefined; text?: string \| undefined; } \| undefined` | No | `-` | Class name overrides applied to RollingNumber slots. |
|
|
930
|
-
| `color` | `((Color \| { base?: Color; phone?: Color \| undefined; tablet?: Color \| undefined; desktop?: Color \| undefined; }) & Color) \| undefined` | No |
|
|
931
|
-
| `colorPulseOnUpdate` | `boolean` | No | `-` | Enables color pulsing on positive or negative changes.
|
|
1037
|
+
| `color` | `((Color \| { base?: Color; phone?: Color \| undefined; tablet?: Color \| undefined; desktop?: Color \| undefined; }) & Color) \| undefined` | No | `'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. |
|
|
1038
|
+
| `colorPulseOnUpdate` | `boolean` | No | `-` | Enables color pulsing on positive or negative changes. |
|
|
932
1039
|
| `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
933
1040
|
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
934
1041
|
| `dangerouslySetColor` | `string` | No | `-` | - |
|
|
1042
|
+
| `digitTransitionVariant` | `every \| single` | No | `'every'` | 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). |
|
|
935
1043
|
| `disabled` | `boolean` | No | `-` | - |
|
|
936
1044
|
| `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
|
|
937
1045
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | - |
|
|
@@ -980,7 +1088,7 @@ ValueSection
|
|
|
980
1088
|
| `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
|
|
981
1089
|
| `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
|
|
982
1090
|
| `mono` | `boolean` | No | `-` | Use monospace font family. |
|
|
983
|
-
| `negativePulseColor` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No |
|
|
1091
|
+
| `negativePulseColor` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `'fgNegative'` | Color token used for negative numeric changes. |
|
|
984
1092
|
| `noWrap` | `boolean` | No | `false` | Set text to be in a single line. |
|
|
985
1093
|
| `numberOfLines` | `number` | No | `-` | - |
|
|
986
1094
|
| `opacity` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
@@ -994,7 +1102,7 @@ ValueSection
|
|
|
994
1102
|
| `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
995
1103
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
996
1104
|
| `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
|
|
997
|
-
| `positivePulseColor` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No |
|
|
1105
|
+
| `positivePulseColor` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `'fgPositive'` | Color token used for positive numeric changes. |
|
|
998
1106
|
| `prefix` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Content rendered before the formatted value. |
|
|
999
1107
|
| `ref` | `any` | No | `-` | - |
|
|
1000
1108
|
| `renderEmptyNode` | `boolean` | No | `-` | - |
|
|
@@ -1004,7 +1112,7 @@ ValueSection
|
|
|
1004
1112
|
| `style` | `CSSProperties` | No | `-` | - |
|
|
1005
1113
|
| `styles` | `{ root?: CSSProperties; visibleContent?: CSSProperties \| undefined; formattedValueSection?: CSSProperties \| undefined; prefix?: CSSProperties \| undefined; suffix?: CSSProperties \| undefined; i18nPrefix?: CSSProperties \| undefined; i18nSuffix?: CSSProperties \| undefined; integer?: CSSProperties \| undefined; fraction?: CSSProperties \| undefined; text?: CSSProperties \| undefined; } \| undefined` | No | `-` | Inline style overrides applied to RollingNumber slots. |
|
|
1006
1114
|
| `suffix` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Content rendered after the formatted value. |
|
|
1007
|
-
| `tabularNumbers` | `boolean` | No | `false` | Activates the set of figures where numbers are all of the same size, allowing them to be easily aligned. Enables tabular figures on the underlying {@link Text}.
|
|
1115
|
+
| `tabularNumbers` | `boolean` | No | `false true` | Activates the set of figures where numbers are all of the same size, allowing them to be easily aligned. Enables tabular figures on the underlying {@link Text}. |
|
|
1008
1116
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
|
|
1009
1117
|
| `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
|
|
1010
1118
|
| `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
|
|
@@ -113,11 +113,11 @@ function Example() {
|
|
|
113
113
|
| `width` | `number` | Yes | `-` | Width of the Sparkline |
|
|
114
114
|
| `background` | `string` | No | `-` | - |
|
|
115
115
|
| `children` | `null \| false \| ReactElement<SparklineAreaBaseProps, string \| JSXElementConstructor<any>> \| OptionalElement<SparklineAreaBaseProps>[]` | No | `-` | an optional SparklineArea that can be used to fill in the Sparkline |
|
|
116
|
-
| `fillType` | `
|
|
116
|
+
| `fillType` | `dotted \| gradient \| gradientDotted` | No | `'dotted'` | Type of fill to use for the area |
|
|
117
117
|
| `key` | `Key \| null` | No | `-` | - |
|
|
118
118
|
| `path` | `string` | No | `-` | Svg path as string. CDS offers a useSparklinePath which is useful to generate this string. This is accessible via import { useSparklinePath } from @coinbase/cds-common/visualizations/useSparklinePath;. Alternatively, you can use product tailored tooling to generate the SVG path. This component only requires a valid path string is provided. |
|
|
119
119
|
| `ref` | `((instance: SparklinePathRef) => void) \| RefObject<SparklinePathRef> \| null` | No | `-` | - |
|
|
120
|
-
| `strokeType` | `
|
|
120
|
+
| `strokeType` | `solid \| gradient` | No | `'solid'` | Type of stroke to use for the line |
|
|
121
121
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
|
|
122
122
|
| `yAxisScalingFactor` | `number` | No | `-` | Scales the sparkline to show more or less variance. Use a number less than 1 for less variance and a number greater than 1 for more variance. If you use a number greater than 1 it may clip the boundaries of the sparkline. |
|
|
123
123
|
|
|
@@ -97,11 +97,11 @@ function Example() {
|
|
|
97
97
|
| `width` | `number` | Yes | `-` | Width of the Sparkline |
|
|
98
98
|
| `background` | `string` | No | `-` | - |
|
|
99
99
|
| `children` | `null \| false \| ReactElement<SparklineAreaBaseProps, string \| JSXElementConstructor<any>> \| OptionalElement<SparklineAreaBaseProps>[]` | No | `-` | an optional SparklineArea that can be used to fill in the Sparkline |
|
|
100
|
-
| `fillType` | `
|
|
100
|
+
| `fillType` | `dotted \| gradient \| gradientDotted` | No | `'dotted'` | Type of fill to use for the area |
|
|
101
101
|
| `key` | `Key \| null` | No | `-` | - |
|
|
102
102
|
| `path` | `string` | No | `-` | Svg path as string. CDS offers a useSparklinePath which is useful to generate this string. This is accessible via import { useSparklinePath } from @coinbase/cds-common/visualizations/useSparklinePath;. Alternatively, you can use product tailored tooling to generate the SVG path. This component only requires a valid path string is provided. |
|
|
103
103
|
| `ref` | `((instance: SparklinePathRef) => void) \| RefObject<SparklinePathRef> \| null` | No | `-` | - |
|
|
104
|
-
| `strokeType` | `
|
|
104
|
+
| `strokeType` | `solid \| gradient` | No | `'solid'` | Type of stroke to use for the line |
|
|
105
105
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
|
|
106
106
|
| `yAxisScalingFactor` | `number` | No | `-` | Scales the sparkline to show more or less variance. Use a number less than 1 for less variance and a number greater than 1 for more variance. If you use a number greater than 1 it may clip the boundaries of the sparkline. |
|
|
107
107
|
|