@coinbase/cds-mobile-visualization 3.4.0-beta.8 → 3.4.0-beta.9

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 (12) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dts/chart/PeriodSelector.d.ts +1 -1
  3. package/dts/chart/PeriodSelector.d.ts.map +1 -1
  4. package/esm/chart/PeriodSelector.js +1 -1
  5. package/esm/chart/__stories__/CartesianChart.stories.js +11 -6
  6. package/esm/chart/__stories__/PeriodSelector.stories.js +3 -3
  7. package/esm/chart/line/__stories__/LineChart.stories.js +5 -4
  8. package/esm/sparkline/__stories__/Sparkline.stories.js +11 -7
  9. package/esm/sparkline/__stories__/SparklineGradient.stories.js +7 -4
  10. package/esm/sparkline/sparkline-interactive/__stories__/SparklineInteractive.stories.js +51 -26
  11. package/esm/sparkline/sparkline-interactive-header/__stories__/SparklineInteractiveHeader.stories.js +17 -9
  12. package/package.json +13 -9
package/CHANGELOG.md CHANGED
@@ -8,6 +8,16 @@ All notable changes to this project will be documented in this file.
8
8
 
9
9
  <!-- template-start -->
10
10
 
11
+ ## 3.4.0-beta.9 (12/18/2025 PST)
12
+
13
+ #### 🐞 Fixes
14
+
15
+ - Fix: update package exports. [[#261](https://github.com/coinbase/cds/pull/261)]
16
+
17
+ #### 📘 Misc
18
+
19
+ - Update storybook to use new Text import. [[#238](https://github.com/coinbase/cds/pull/238)]
20
+
11
21
  ## 3.4.0-beta.8 (12/2/2025 PST)
12
22
 
13
23
  #### 🐞 Fixes
package/dts/chart/PeriodSelector.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { View } from 'react-native';
3
3
  import { type SegmentedTabsProps, type TabsActiveIndicatorProps } from '@coinbase/cds-mobile/tabs';
4
- import { type TextBaseProps } from '@coinbase/cds-mobile/typography/Text';
4
+ import { type TextBaseProps } from '@coinbase/cds-mobile/typography';
5
5
  export declare const PeriodSelectorActiveIndicator: ({
6
6
  activeTabRect,
7
7
  background,
package/dts/chart/PeriodSelector.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PeriodSelector.d.ts","sourceRoot":"","sources":["../../src/chart/PeriodSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAc,IAAI,EAAkB,MAAM,cAAc,CAAC;AAGhE,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,wBAAwB,EAC9B,MAAM,2BAA2B,CAAC;AAGnC,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAGhF,eAAO,MAAM,6BAA6B,GAAI,wDAK3C,wBAAwB,wDAmD1B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,aAAa,GAAG;IAClD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC;AAStD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;IAxBvB;;;OAGG;YACK,MAAM;IACd;;OAEG;cACO,OAAO;IACjB;;OAEG;YACK,GAAG;+BAyCZ,CAAC;AASF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,CAAC;AAErD;;;GAGG;AACH,eAAO,MAAM,cAAc,6TA0B1B,CAAC"}
1
+ {"version":3,"file":"PeriodSelector.d.ts","sourceRoot":"","sources":["../../src/chart/PeriodSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAc,IAAI,EAAkB,MAAM,cAAc,CAAC;AAGhE,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,wBAAwB,EAC9B,MAAM,2BAA2B,CAAC;AAGnC,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAG3E,eAAO,MAAM,6BAA6B,GAAI,wDAK3C,wBAAwB,wDAmD1B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,aAAa,GAAG;IAClD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC;AAStD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;IAxBvB;;;OAGG;YACK,MAAM;IACd;;OAEG;cACO,OAAO;IACjB;;OAEG;YACK,GAAG;+BAyCZ,CAAC;AASF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,CAAC;AAErD;;;GAGG;AACH,eAAO,MAAM,cAAc,6TA0B1B,CAAC"}
package/esm/chart/PeriodSelector.js CHANGED
@@ -9,7 +9,7 @@ import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
9
9
  import { SegmentedTabs } from '@coinbase/cds-mobile/tabs';
10
10
  import { SegmentedTab } from '@coinbase/cds-mobile/tabs/SegmentedTab';
11
11
  import { tabsSpringConfig } from '@coinbase/cds-mobile/tabs/Tabs';
12
- import { Text } from '@coinbase/cds-mobile/typography/Text';
12
+ import { Text } from '@coinbase/cds-mobile/typography';
13
13
 
14
14
  // Animated active indicator to support smooth transition of background color
15
15
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
package/esm/chart/__stories__/CartesianChart.stories.js CHANGED
@@ -6,7 +6,7 @@ import { candles as btcCandles } from '@coinbase/cds-common/internal/data/candle
6
6
  import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
7
7
  import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
8
8
  import { Box, HStack, VStack } from '@coinbase/cds-mobile/layout';
9
- import { TextLabel1, TextLabel2, TextTitle1, TextTitle2 } from '@coinbase/cds-mobile/typography';
9
+ import { Text } from '@coinbase/cds-mobile/typography';
10
10
  import { Circle, Group, Skia } from '@shopify/react-native-skia';
11
11
  import { Area } from '../area/Area';
12
12
  import { XAxis, YAxis } from '../axis';
@@ -168,7 +168,8 @@ const EarningsHistory = () => {
168
168
  style: [styles.legendDot, {
169
169
  opacity
170
170
  }]
171
- }), /*#__PURE__*/_jsx(TextLabel2, {
171
+ }), /*#__PURE__*/_jsx(Text, {
172
+ font: "label2",
172
173
  children: label
173
174
  })]
174
175
  });
@@ -350,9 +351,11 @@ const PriceWithVolumeHeader = /*#__PURE__*/memo(_ref7 => {
350
351
  paddingX: 0,
351
352
  children: [/*#__PURE__*/_jsxs(VStack, {
352
353
  gap: 0,
353
- children: [/*#__PURE__*/_jsx(TextTitle1, {
354
+ children: [/*#__PURE__*/_jsx(Text, {
355
+ font: "title1",
354
356
  children: "Bitcoin"
355
- }), /*#__PURE__*/_jsx(TextTitle2, {
357
+ }), /*#__PURE__*/_jsx(Text, {
358
+ font: "title2",
356
359
  children: formatPrice(currentPrice)
357
360
  })]
358
361
  }), /*#__PURE__*/_jsxs(HStack, {
@@ -360,9 +363,11 @@ const PriceWithVolumeHeader = /*#__PURE__*/memo(_ref7 => {
360
363
  children: [/*#__PURE__*/_jsxs(VStack, {
361
364
  alignItems: "flex-end",
362
365
  justifyContent: "center",
363
- children: [/*#__PURE__*/_jsx(TextLabel1, {
366
+ children: [/*#__PURE__*/_jsx(Text, {
367
+ font: "label1",
364
368
  children: formatDate(currentDate)
365
- }), /*#__PURE__*/_jsx(TextLabel2, {
369
+ }), /*#__PURE__*/_jsx(Text, {
370
+ font: "label2",
366
371
  children: volumeText
367
372
  })]
368
373
  }), /*#__PURE__*/_jsx(VStack, {
package/esm/chart/__stories__/PeriodSelector.stories.js CHANGED
@@ -11,8 +11,7 @@ import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScr
11
11
  import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
12
12
  import { HStack } from '@coinbase/cds-mobile/layout';
13
13
  import { SegmentedTab } from '@coinbase/cds-mobile/tabs/SegmentedTab';
14
- import { TextLabel1 } from '@coinbase/cds-mobile/typography';
15
- import { Text } from '@coinbase/cds-mobile/typography/Text';
14
+ import { Text } from '@coinbase/cds-mobile/typography';
16
15
  import { LiveTabLabel, PeriodSelector, PeriodSelectorActiveIndicator } from '../PeriodSelector';
17
16
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
18
17
  const PeriodSelectorExample = () => {
@@ -196,8 +195,9 @@ const BTCTab = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
196
195
 
197
196
  // If label is already a React element (like LiveTabLabel), pass it through directly
198
197
  // For string labels, wrap with custom BTC color when active
199
- const wrappedLabel = typeof label === 'string' ? /*#__PURE__*/_jsx(TextLabel1, {
198
+ const wrappedLabel = typeof label === 'string' ? /*#__PURE__*/_jsx(Text, {
200
199
  dangerouslySetColor: isActive ? btcColor : theme.color.fg,
200
+ font: "label1",
201
201
  children: label
202
202
  }) : label;
203
203
  return /*#__PURE__*/_jsx(SegmentedTab, _extends({
package/esm/chart/line/__stories__/LineChart.stories.js CHANGED
@@ -21,8 +21,7 @@ import { Avatar, RemoteImage } from '@coinbase/cds-mobile/media';
21
21
  import { SectionHeader } from '@coinbase/cds-mobile/section-header/SectionHeader';
22
22
  import { Pressable } from '@coinbase/cds-mobile/system';
23
23
  import { SegmentedTab } from '@coinbase/cds-mobile/tabs/SegmentedTab';
24
- import { TextLabel1 } from '@coinbase/cds-mobile/typography';
25
- import { Text } from '@coinbase/cds-mobile/typography/Text';
24
+ import { Text } from '@coinbase/cds-mobile/typography';
26
25
  import { Circle, FontWeight, Group, Line as SkiaLine, Rect, Skia, TextAlign } from '@shopify/react-native-skia';
27
26
  import { Area, DottedArea } from '../../area';
28
27
  import { DefaultAxisTickLabel, XAxis, YAxis } from '../../axis';
@@ -831,7 +830,8 @@ function AssetPriceWithDottedArea() {
831
830
  const isActive = (activeTab == null ? void 0 : activeTab.id) === props.id;
832
831
  return /*#__PURE__*/_jsx(SegmentedTab, _extends({
833
832
  ref: ref,
834
- label: /*#__PURE__*/_jsx(TextLabel1, {
833
+ label: /*#__PURE__*/_jsx(Text, {
834
+ font: "label1",
835
835
  style: {
836
836
  color: isActive ? assets.btc.color : undefined
837
837
  },
@@ -2349,8 +2349,9 @@ function ExampleNavigator() {
2349
2349
  children: [/*#__PURE__*/_jsx(Text, {
2350
2350
  font: "title3",
2351
2351
  children: currentExample.title
2352
- }), /*#__PURE__*/_jsxs(TextLabel1, {
2352
+ }), /*#__PURE__*/_jsxs(Text, {
2353
2353
  color: "fgMuted",
2354
+ font: "label1",
2354
2355
  children: [currentIndex + 1, " / ", examples.length]
2355
2356
  })]
2356
2357
  }), /*#__PURE__*/_jsx(IconButton, {
package/esm/sparkline/__stories__/Sparkline.stories.js CHANGED
@@ -12,8 +12,7 @@ import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScr
12
12
  import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
13
13
  import { HStack } from '@coinbase/cds-mobile/layout/HStack';
14
14
  import { VStack } from '@coinbase/cds-mobile/layout/VStack';
15
- import { TextBody } from '@coinbase/cds-mobile/typography/TextBody';
16
- import { TextHeadline } from '@coinbase/cds-mobile/typography/TextHeadline';
15
+ import { Text } from '@coinbase/cds-mobile/typography';
17
16
  import { Sparkline } from '../Sparkline';
18
17
  import { SparklineArea } from '../SparklineArea';
19
18
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -42,13 +41,15 @@ const SparklineExample = _ref => {
42
41
  alignItems: "flex-end",
43
42
  justifyContent: "center",
44
43
  paddingStart: 2,
45
- children: [/*#__PURE__*/_jsx(TextBody, {
44
+ children: [/*#__PURE__*/_jsx(Text, {
46
45
  align: "end",
46
+ font: "body",
47
47
  numberOfLines: 1,
48
48
  children: "$2,874.49"
49
- }), /*#__PURE__*/_jsx(TextBody, {
49
+ }), /*#__PURE__*/_jsx(Text, {
50
50
  align: "end",
51
51
  color: "fgMuted",
52
+ font: "body",
52
53
  numberOfLines: 1,
53
54
  children: "+36.08%"
54
55
  })]
@@ -61,12 +62,14 @@ const SparklineExample = _ref => {
61
62
  }),
62
63
  children: /*#__PURE__*/_jsxs(VStack, {
63
64
  justifyContent: "center",
64
- children: [/*#__PURE__*/_jsx(TextHeadline, {
65
+ children: [/*#__PURE__*/_jsx(Text, {
65
66
  ellipsize: "tail",
67
+ font: "headline",
66
68
  numberOfLines: 1,
67
69
  children: name
68
- }), /*#__PURE__*/_jsx(TextBody, {
70
+ }), /*#__PURE__*/_jsx(Text, {
69
71
  ellipsize: "tail",
72
+ font: "body",
70
73
  numberOfLines: 1,
71
74
  children: symbol
72
75
  })]
@@ -84,8 +87,9 @@ const SparklineScalingExample = props => {
84
87
  const path = useSparklinePath(_extends({}, dimensions, props));
85
88
  const area = useSparklineArea(_extends({}, dimensions, props));
86
89
  return /*#__PURE__*/_jsxs(VStack, {
87
- children: [/*#__PURE__*/_jsxs(TextHeadline, {
90
+ children: [/*#__PURE__*/_jsxs(Text, {
88
91
  ellipsize: "tail",
92
+ font: "headline",
89
93
  numberOfLines: 1,
90
94
  children: ["Scale: ", props.yAxisScalingFactor]
91
95
  }), /*#__PURE__*/_jsx(Sparkline, _extends({}, dimensions, {
package/esm/sparkline/__stories__/SparklineGradient.stories.js CHANGED
@@ -11,7 +11,7 @@ import { CellMedia } from '@coinbase/cds-mobile/cells/CellMedia';
11
11
  import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
12
12
  import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
13
13
  import { VStack } from '@coinbase/cds-mobile/layout';
14
- import { TextBody, TextHeadline } from '@coinbase/cds-mobile/typography';
14
+ import { Text } from '@coinbase/cds-mobile/typography';
15
15
  import { SparklineArea } from '../SparklineArea';
16
16
  import { SparklineGradient } from '../SparklineGradient';
17
17
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -45,12 +45,14 @@ const SparklineGradientExample = _ref => {
45
45
  }),
46
46
  children: /*#__PURE__*/_jsxs(VStack, {
47
47
  justifyContent: "center",
48
- children: [/*#__PURE__*/_jsx(TextHeadline, {
48
+ children: [/*#__PURE__*/_jsx(Text, {
49
49
  ellipsize: "tail",
50
+ font: "headline",
50
51
  numberOfLines: 1,
51
52
  children: name
52
- }), /*#__PURE__*/_jsx(TextBody, {
53
+ }), /*#__PURE__*/_jsx(Text, {
53
54
  ellipsize: "tail",
55
+ font: "body",
54
56
  numberOfLines: 1,
55
57
  children: symbol
56
58
  })]
@@ -75,8 +77,9 @@ const SparklineScalingExample = props => {
75
77
  const path = useSparklinePath(_extends({}, dimensions, props));
76
78
  const area = useSparklineArea(_extends({}, dimensions, props));
77
79
  return /*#__PURE__*/_jsxs(VStack, {
78
- children: [/*#__PURE__*/_jsxs(TextHeadline, {
80
+ children: [/*#__PURE__*/_jsxs(Text, {
79
81
  ellipsize: "tail",
82
+ font: "headline",
80
83
  numberOfLines: 1,
81
84
  children: ["Scale: ", props.yAxisScalingFactor]
82
85
  }), /*#__PURE__*/_jsx(SparklineGradient, _extends({}, dimensions, {
package/esm/sparkline/sparkline-interactive/__stories__/SparklineInteractive.stories.js CHANGED
@@ -3,7 +3,7 @@ import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
3
3
  import { sparklineInteractiveData, sparklineInteractiveHoverData, strokeColor } from '@coinbase/cds-common/internal/visualizations/SparklineInteractiveData';
4
4
  import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
5
5
  import { Box } from '@coinbase/cds-mobile/layout';
6
- import { TextTitle3 } from '@coinbase/cds-mobile/typography/TextTitle3';
6
+ import { Text } from '@coinbase/cds-mobile/typography';
7
7
  import { SparklineInteractiveHeader } from '../../sparkline-interactive-header/SparklineInteractiveHeader';
8
8
  import { SparklineInteractive } from '../SparklineInteractive';
9
9
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -175,7 +175,8 @@ const SparklineInteractiveScreen = () => {
175
175
  children: [/*#__PURE__*/_jsx(Example, {
176
176
  padding: 0,
177
177
  children: /*#__PURE__*/_jsxs(Box, {
178
- children: [/*#__PURE__*/_jsx(TextTitle3, {
178
+ children: [/*#__PURE__*/_jsx(Text, {
179
+ font: "title3",
179
180
  paddingX: 3,
180
181
  paddingY: 3,
181
182
  children: "Default"
@@ -187,7 +188,8 @@ const SparklineInteractiveScreen = () => {
187
188
  }), /*#__PURE__*/_jsx(Example, {
188
189
  padding: 0,
189
190
  children: /*#__PURE__*/_jsxs(Box, {
190
- children: [/*#__PURE__*/_jsx(TextTitle3, {
191
+ children: [/*#__PURE__*/_jsx(Text, {
192
+ font: "title3",
191
193
  paddingX: 3,
192
194
  paddingY: 3,
193
195
  children: "Compact"
@@ -200,7 +202,8 @@ const SparklineInteractiveScreen = () => {
200
202
  }), /*#__PURE__*/_jsx(Example, {
201
203
  padding: 0,
202
204
  children: /*#__PURE__*/_jsxs(Box, {
203
- children: [/*#__PURE__*/_jsx(TextTitle3, {
205
+ children: [/*#__PURE__*/_jsx(Text, {
206
+ font: "title3",
204
207
  paddingX: 3,
205
208
  paddingY: 3,
206
209
  children: "Disable Scrubbing"
@@ -213,7 +216,8 @@ const SparklineInteractiveScreen = () => {
213
216
  }), /*#__PURE__*/_jsx(Example, {
214
217
  padding: 0,
215
218
  children: /*#__PURE__*/_jsxs(Box, {
216
- children: [/*#__PURE__*/_jsx(TextTitle3, {
219
+ children: [/*#__PURE__*/_jsx(Text, {
220
+ font: "title3",
217
221
  paddingX: 3,
218
222
  paddingY: 3,
219
223
  children: "Hide period selector"
@@ -226,7 +230,8 @@ const SparklineInteractiveScreen = () => {
226
230
  }), /*#__PURE__*/_jsx(Example, {
227
231
  padding: 0,
228
232
  children: /*#__PURE__*/_jsxs(Box, {
229
- children: [/*#__PURE__*/_jsx(TextTitle3, {
233
+ children: [/*#__PURE__*/_jsx(Text, {
234
+ font: "title3",
230
235
  paddingX: 3,
231
236
  paddingY: 3,
232
237
  children: "Hide min/max label"
@@ -239,7 +244,8 @@ const SparklineInteractiveScreen = () => {
239
244
  }), /*#__PURE__*/_jsx(Example, {
240
245
  padding: 0,
241
246
  children: /*#__PURE__*/_jsxs(Box, {
242
- children: [/*#__PURE__*/_jsx(TextTitle3, {
247
+ children: [/*#__PURE__*/_jsx(Text, {
248
+ font: "title3",
243
249
  paddingX: 3,
244
250
  paddingY: 3,
245
251
  children: "Default period All"
@@ -252,7 +258,8 @@ const SparklineInteractiveScreen = () => {
252
258
  }), /*#__PURE__*/_jsx(Example, {
253
259
  padding: 0,
254
260
  children: /*#__PURE__*/_jsxs(Box, {
255
- children: [/*#__PURE__*/_jsx(TextTitle3, {
261
+ children: [/*#__PURE__*/_jsx(Text, {
262
+ font: "title3",
256
263
  paddingX: 3,
257
264
  paddingY: 3,
258
265
  children: "Fill Disabled"
@@ -265,7 +272,8 @@ const SparklineInteractiveScreen = () => {
265
272
  }), /*#__PURE__*/_jsx(Example, {
266
273
  padding: 0,
267
274
  children: /*#__PURE__*/_jsxs(Box, {
268
- children: [/*#__PURE__*/_jsx(TextTitle3, {
275
+ children: [/*#__PURE__*/_jsx(Text, {
276
+ font: "title3",
269
277
  paddingX: 3,
270
278
  paddingY: 3,
271
279
  children: "Y axis scaling"
@@ -278,7 +286,8 @@ const SparklineInteractiveScreen = () => {
278
286
  }), /*#__PURE__*/_jsx(Example, {
279
287
  padding: 0,
280
288
  children: /*#__PURE__*/_jsxs(Box, {
281
- children: [/*#__PURE__*/_jsx(TextTitle3, {
289
+ children: [/*#__PURE__*/_jsx(Text, {
290
+ font: "title3",
282
291
  paddingX: 3,
283
292
  paddingY: 3,
284
293
  children: "Fallback"
@@ -289,7 +298,8 @@ const SparklineInteractiveScreen = () => {
289
298
  }), /*#__PURE__*/_jsx(Example, {
290
299
  padding: 0,
291
300
  children: /*#__PURE__*/_jsxs(Box, {
292
- children: [/*#__PURE__*/_jsx(TextTitle3, {
301
+ children: [/*#__PURE__*/_jsx(Text, {
302
+ font: "title3",
293
303
  paddingX: 3,
294
304
  paddingY: 3,
295
305
  children: "Fallback Negative"
@@ -301,7 +311,8 @@ const SparklineInteractiveScreen = () => {
301
311
  }), /*#__PURE__*/_jsx(Example, {
302
312
  padding: 0,
303
313
  children: /*#__PURE__*/_jsxs(Box, {
304
- children: [/*#__PURE__*/_jsx(TextTitle3, {
314
+ children: [/*#__PURE__*/_jsx(Text, {
315
+ font: "title3",
305
316
  paddingX: 3,
306
317
  paddingY: 3,
307
318
  children: "Fallback Compact"
@@ -313,7 +324,8 @@ const SparklineInteractiveScreen = () => {
313
324
  }), /*#__PURE__*/_jsx(Example, {
314
325
  padding: 0,
315
326
  children: /*#__PURE__*/_jsxs(Box, {
316
- children: [/*#__PURE__*/_jsx(TextTitle3, {
327
+ children: [/*#__PURE__*/_jsx(Text, {
328
+ font: "title3",
317
329
  paddingX: 3,
318
330
  paddingY: 3,
319
331
  children: "No Hover Date"
@@ -326,7 +338,8 @@ const SparklineInteractiveScreen = () => {
326
338
  }), /*#__PURE__*/_jsx(Example, {
327
339
  padding: 0,
328
340
  children: /*#__PURE__*/_jsxs(Box, {
329
- children: [/*#__PURE__*/_jsx(TextTitle3, {
341
+ children: [/*#__PURE__*/_jsx(Text, {
342
+ font: "title3",
330
343
  paddingX: 3,
331
344
  paddingY: 3,
332
345
  children: "With Header Node"
@@ -338,7 +351,8 @@ const SparklineInteractiveScreen = () => {
338
351
  }), /*#__PURE__*/_jsx(Example, {
339
352
  padding: 0,
340
353
  children: /*#__PURE__*/_jsxs(Box, {
341
- children: [/*#__PURE__*/_jsx(TextTitle3, {
354
+ children: [/*#__PURE__*/_jsx(Text, {
355
+ font: "title3",
342
356
  paddingX: 3,
343
357
  paddingY: 3,
344
358
  children: "No padding"
@@ -352,7 +366,8 @@ const SparklineInteractiveScreen = () => {
352
366
  }), /*#__PURE__*/_jsx(Example, {
353
367
  padding: 4,
354
368
  children: /*#__PURE__*/_jsxs(Box, {
355
- children: [/*#__PURE__*/_jsx(TextTitle3, {
369
+ children: [/*#__PURE__*/_jsx(Text, {
370
+ font: "title3",
356
371
  paddingY: 3,
357
372
  children: "In Container With 4 padding"
358
373
  }), /*#__PURE__*/_jsx(SparklineInteractiveWithHeaderBuild, {
@@ -365,7 +380,8 @@ const SparklineInteractiveScreen = () => {
365
380
  }), /*#__PURE__*/_jsx(Example, {
366
381
  padding: 0,
367
382
  children: /*#__PURE__*/_jsxs(Box, {
368
- children: [/*#__PURE__*/_jsx(TextTitle3, {
383
+ children: [/*#__PURE__*/_jsx(Text, {
384
+ font: "title3",
369
385
  paddingX: 3,
370
386
  paddingY: 3,
371
387
  children: "Custom screen padding 6"
@@ -378,7 +394,8 @@ const SparklineInteractiveScreen = () => {
378
394
  }), /*#__PURE__*/_jsx(Example, {
379
395
  padding: 0,
380
396
  children: /*#__PURE__*/_jsxs(Box, {
381
- children: [/*#__PURE__*/_jsx(TextTitle3, {
397
+ children: [/*#__PURE__*/_jsx(Text, {
398
+ font: "title3",
382
399
  paddingX: 3,
383
400
  paddingY: 3,
384
401
  children: "Hover data"
@@ -391,7 +408,8 @@ const SparklineInteractiveScreen = () => {
391
408
  }), /*#__PURE__*/_jsx(Example, {
392
409
  padding: 0,
393
410
  children: /*#__PURE__*/_jsxs(Box, {
394
- children: [/*#__PURE__*/_jsx(TextTitle3, {
411
+ children: [/*#__PURE__*/_jsx(Text, {
412
+ font: "title3",
395
413
  paddingX: 3,
396
414
  paddingY: 3,
397
415
  children: "Auto Stoke Color"
@@ -403,7 +421,8 @@ const SparklineInteractiveScreen = () => {
403
421
  }), /*#__PURE__*/_jsx(Example, {
404
422
  padding: 0,
405
423
  children: /*#__PURE__*/_jsxs(Box, {
406
- children: [/*#__PURE__*/_jsx(TextTitle3, {
424
+ children: [/*#__PURE__*/_jsx(Text, {
425
+ font: "title3",
407
426
  paddingX: 3,
408
427
  paddingY: 3,
409
428
  children: "Custom RGB Stoke Color"
@@ -415,7 +434,8 @@ const SparklineInteractiveScreen = () => {
415
434
  }), /*#__PURE__*/_jsx(Example, {
416
435
  padding: 0,
417
436
  children: /*#__PURE__*/_jsxs(Box, {
418
- children: [/*#__PURE__*/_jsx(TextTitle3, {
437
+ children: [/*#__PURE__*/_jsx(Text, {
438
+ font: "title3",
419
439
  paddingX: 3,
420
440
  paddingY: 3,
421
441
  children: "Custom RGBA Stoke Color"
@@ -427,7 +447,8 @@ const SparklineInteractiveScreen = () => {
427
447
  }), /*#__PURE__*/_jsx(Example, {
428
448
  padding: 0,
429
449
  children: /*#__PURE__*/_jsxs(Box, {
430
- children: [/*#__PURE__*/_jsx(TextTitle3, {
450
+ children: [/*#__PURE__*/_jsx(Text, {
451
+ font: "title3",
431
452
  paddingX: 3,
432
453
  paddingY: 3,
433
454
  children: "No Data In SelectedPeriod"
@@ -441,7 +462,8 @@ const SparklineInteractiveScreen = () => {
441
462
  }), /*#__PURE__*/_jsx(Example, {
442
463
  padding: 0,
443
464
  children: /*#__PURE__*/_jsxs(Box, {
444
- children: [/*#__PURE__*/_jsx(TextTitle3, {
465
+ children: [/*#__PURE__*/_jsx(Text, {
466
+ font: "title3",
445
467
  paddingX: 3,
446
468
  paddingY: 3,
447
469
  children: "Enable Interaction When Outside"
@@ -454,7 +476,8 @@ const SparklineInteractiveScreen = () => {
454
476
  }), /*#__PURE__*/_jsx(Example, {
455
477
  padding: 0,
456
478
  children: /*#__PURE__*/_jsxs(Box, {
457
- children: [/*#__PURE__*/_jsx(TextTitle3, {
479
+ children: [/*#__PURE__*/_jsx(Text, {
480
+ font: "title3",
458
481
  paddingX: 3,
459
482
  paddingY: 3,
460
483
  children: "Custom Node Header Styles"
@@ -471,7 +494,8 @@ const SparklineInteractiveScreen = () => {
471
494
  }), /*#__PURE__*/_jsx(Example, {
472
495
  padding: 0,
473
496
  children: /*#__PURE__*/_jsxs(Box, {
474
- children: [/*#__PURE__*/_jsx(TextTitle3, {
497
+ children: [/*#__PURE__*/_jsx(Text, {
498
+ font: "title3",
475
499
  paddingX: 3,
476
500
  paddingY: 3,
477
501
  children: "Dotted Fill Type"
@@ -484,7 +508,8 @@ const SparklineInteractiveScreen = () => {
484
508
  }), /*#__PURE__*/_jsx(Example, {
485
509
  padding: 0,
486
510
  children: /*#__PURE__*/_jsxs(Box, {
487
- children: [/*#__PURE__*/_jsx(TextTitle3, {
511
+ children: [/*#__PURE__*/_jsx(Text, {
512
+ font: "title3",
488
513
  paddingX: 3,
489
514
  paddingY: 3,
490
515
  children: "Y Scale Custom"
package/esm/sparkline/sparkline-interactive-header/__stories__/SparklineInteractiveHeader.stories.js CHANGED
@@ -6,7 +6,7 @@ import { IconButton } from '@coinbase/cds-mobile/buttons';
6
6
  import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
7
7
  import { Icon } from '@coinbase/cds-mobile/icons';
8
8
  import { Box, HStack } from '@coinbase/cds-mobile/layout';
9
- import { TextTitle3 } from '@coinbase/cds-mobile/typography/TextTitle3';
9
+ import { Text } from '@coinbase/cds-mobile/typography';
10
10
  import { SparklineInteractive } from '../../sparkline-interactive/SparklineInteractive';
11
11
  import { SparklineInteractiveHeader } from '../SparklineInteractiveHeader';
12
12
  import { useSparklineInteractiveHeaderStyles } from '../useSparklineInteractiveHeaderStyles';
@@ -155,7 +155,8 @@ const HeaderLabel = () => {
155
155
  active: true,
156
156
  name: "wallet",
157
157
  size: "s"
158
- }), /*#__PURE__*/_jsx(TextTitle3, {
158
+ }), /*#__PURE__*/_jsx(Text, {
159
+ font: "title3",
159
160
  children: "CustomHeader"
160
161
  })]
161
162
  });
@@ -468,7 +469,8 @@ const SparklineInteractiveHeaderScreen = () => {
468
469
  children: [/*#__PURE__*/_jsx(Example, {
469
470
  padding: 0,
470
471
  children: /*#__PURE__*/_jsxs(Box, {
471
- children: [/*#__PURE__*/_jsx(TextTitle3, {
472
+ children: [/*#__PURE__*/_jsx(Text, {
473
+ font: "title3",
472
474
  paddingX: 3,
473
475
  paddingY: 3,
474
476
  children: "SparklineInteractive Header Example"
@@ -480,7 +482,8 @@ const SparklineInteractiveHeaderScreen = () => {
480
482
  }), /*#__PURE__*/_jsx(Example, {
481
483
  padding: 0,
482
484
  children: /*#__PURE__*/_jsxs(Box, {
483
- children: [/*#__PURE__*/_jsx(TextTitle3, {
485
+ children: [/*#__PURE__*/_jsx(Text, {
486
+ font: "title3",
484
487
  paddingX: 3,
485
488
  paddingY: 3,
486
489
  children: "SparklineInteractive Header Trailing"
@@ -493,7 +496,8 @@ const SparklineInteractiveHeaderScreen = () => {
493
496
  }), /*#__PURE__*/_jsx(Example, {
494
497
  padding: 0,
495
498
  children: /*#__PURE__*/_jsxs(Box, {
496
- children: [/*#__PURE__*/_jsx(TextTitle3, {
499
+ children: [/*#__PURE__*/_jsx(Text, {
500
+ font: "title3",
497
501
  paddingX: 3,
498
502
  paddingY: 3,
499
503
  children: "SparklineInteractive Header Custom Label"
@@ -506,7 +510,8 @@ const SparklineInteractiveHeaderScreen = () => {
506
510
  }), /*#__PURE__*/_jsx(Example, {
507
511
  padding: 0,
508
512
  children: /*#__PURE__*/_jsxs(Box, {
509
- children: [/*#__PURE__*/_jsx(TextTitle3, {
513
+ children: [/*#__PURE__*/_jsx(Text, {
514
+ font: "title3",
510
515
  paddingX: 3,
511
516
  paddingY: 3,
512
517
  children: "SparklineInteractive Header Example with AltHeader"
@@ -518,7 +523,8 @@ const SparklineInteractiveHeaderScreen = () => {
518
523
  }), /*#__PURE__*/_jsx(Example, {
519
524
  padding: 0,
520
525
  children: /*#__PURE__*/_jsxs(Box, {
521
- children: [/*#__PURE__*/_jsx(TextTitle3, {
526
+ children: [/*#__PURE__*/_jsx(Text, {
527
+ font: "title3",
522
528
  paddingX: 3,
523
529
  paddingY: 3,
524
530
  children: "SparklineInteractive Header Example with Smaller Period Set"
@@ -530,7 +536,8 @@ const SparklineInteractiveHeaderScreen = () => {
530
536
  }), /*#__PURE__*/_jsx(Example, {
531
537
  padding: 0,
532
538
  children: /*#__PURE__*/_jsxs(Box, {
533
- children: [/*#__PURE__*/_jsx(TextTitle3, {
539
+ children: [/*#__PURE__*/_jsx(Text, {
540
+ font: "title3",
534
541
  paddingX: 3,
535
542
  paddingY: 3,
536
543
  children: "SparklineInteractive Header Example with No Period Set"
@@ -543,7 +550,8 @@ const SparklineInteractiveHeaderScreen = () => {
543
550
  }), /*#__PURE__*/_jsx(Example, {
544
551
  padding: 0,
545
552
  children: /*#__PURE__*/_jsxs(Box, {
546
- children: [/*#__PURE__*/_jsx(TextTitle3, {
553
+ children: [/*#__PURE__*/_jsx(Text, {
554
+ font: "title3",
547
555
  paddingX: 3,
548
556
  paddingY: 3,
549
557
  children: "SparklineInteractive Header Custom Title"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/cds-mobile-visualization",
3
- "version": "3.4.0-beta.8",
3
+ "version": "3.4.0-beta.9",
4
4
  "description": "Coinbase Design System - Mobile Visualization Native",
5
5
  "repository": {
6
6
  "type": "git",
@@ -16,6 +16,10 @@
16
16
  "types": "./dts/index.d.ts",
17
17
  "default": "./esm/index.js"
18
18
  },
19
+ "./chart": {
20
+ "types": "./dts/chart/index.d.ts",
21
+ "default": "./esm/chart/index.js"
22
+ },
19
23
  "./sparkline": {
20
24
  "types": "./dts/sparkline/index.d.ts",
21
25
  "default": "./esm/sparkline/index.js"
@@ -32,10 +36,10 @@
32
36
  "CHANGELOG"
33
37
  ],
34
38
  "peerDependencies": {
35
- "@coinbase/cds-common": "^8.27.2",
36
- "@coinbase/cds-lottie-files": "^3.3.3",
37
- "@coinbase/cds-mobile": "^8.27.2",
38
- "@coinbase/cds-utils": "^2.3.4",
39
+ "@coinbase/cds-common": "^8.32.3",
40
+ "@coinbase/cds-lottie-files": "^3.3.4",
41
+ "@coinbase/cds-mobile": "^8.32.3",
42
+ "@coinbase/cds-utils": "^2.3.5",
39
43
  "@shopify/react-native-skia": "^1.12.4 || ^2.0.0",
40
44
  "react": "^18.3.1",
41
45
  "react-native": "^0.74.5",
@@ -53,10 +57,10 @@
53
57
  "@babel/preset-env": "^7.28.0",
54
58
  "@babel/preset-react": "^7.27.1",
55
59
  "@babel/preset-typescript": "^7.27.1",
56
- "@coinbase/cds-common": "^8.27.2",
57
- "@coinbase/cds-lottie-files": "^3.3.3",
58
- "@coinbase/cds-mobile": "^8.27.2",
59
- "@coinbase/cds-utils": "^2.3.4",
60
+ "@coinbase/cds-common": "^8.32.3",
61
+ "@coinbase/cds-lottie-files": "^3.3.4",
62
+ "@coinbase/cds-mobile": "^8.32.3",
63
+ "@coinbase/cds-utils": "^2.3.5",
60
64
  "@figma/code-connect": "^1.3.4",
61
65
  "@shopify/react-native-skia": "1.12.4",
62
66
  "@types/react": "^18.3.12",