@coinbase/cds-web-visualization 3.4.0-beta.11 → 3.4.0-beta.13

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 CHANGED
@@ -8,6 +8,21 @@ 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.13 (1/20/2026 PST)
12
+
13
+ #### 🚀 Updates
14
+
15
+ - Feat: support styling default scrubber beacon. [[#315](https://github.com/coinbase/cds/pull/315)]
16
+
17
+ #### 📘 Misc
18
+
19
+ - Internal: code connect file lint fixes. [[#311](https://github.com/coinbase/cds/pull/311)]
20
+ - Internal: update figma code connect config and some mapping files. [[#304](https://github.com/coinbase/cds/pull/304)]
21
+
22
+ ## 3.4.0-beta.12 (1/8/2026 PST)
23
+
24
+ This is an artificial version bump with no new change.
25
+
11
26
  ## 3.4.0-beta.11 (1/7/2026 PST)
12
27
 
13
28
  #### 🐞 Fixes
@@ -1,6 +1,17 @@
1
1
  import { type Transition } from 'framer-motion';
2
2
  import type { ScrubberBeaconProps, ScrubberBeaconRef } from './Scrubber';
3
- export type DefaultScrubberBeaconProps = ScrubberBeaconProps;
3
+ export type DefaultScrubberBeaconProps = ScrubberBeaconProps & {
4
+ /**
5
+ * Radius of the beacon circle.
6
+ * @default 5
7
+ */
8
+ radius?: number;
9
+ /**
10
+ * Stroke width of the beacon circle.
11
+ * @default 2
12
+ */
13
+ strokeWidth?: number;
14
+ };
4
15
  export declare const DefaultScrubberBeacon: import('react').MemoExoticComponent<
5
16
  import('react').ForwardRefExoticComponent<
6
17
  import('@coinbase/cds-common').SharedProps & {
@@ -10,14 +21,27 @@ export declare const DefaultScrubberBeacon: import('react').MemoExoticComponent<
10
21
  dataY: number;
11
22
  isIdle?: boolean;
12
23
  idlePulse?: boolean;
24
+ animate?: boolean;
13
25
  transitions?: {
14
26
  update?: Transition;
15
27
  pulse?: Transition;
16
28
  pulseRepeatDelay?: number;
17
29
  };
18
30
  opacity?: number;
31
+ stroke?: string;
19
32
  className?: string;
20
33
  style?: React.CSSProperties;
34
+ } & {
35
+ /**
36
+ * Radius of the beacon circle.
37
+ * @default 5
38
+ */
39
+ radius?: number;
40
+ /**
41
+ * Stroke width of the beacon circle.
42
+ * @default 2
43
+ */
44
+ strokeWidth?: number;
21
45
  } & import('react').RefAttributes<ScrubberBeaconRef>
22
46
  >
23
47
  >;
@@ -1 +1 @@
1
- {"version":3,"file":"DefaultScrubberBeacon.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/DefaultScrubberBeacon.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,UAAU,EAGhB,MAAM,eAAe,CAAC;AAKvB,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAiBzE,MAAM,MAAM,0BAA0B,GAAG,mBAAmB,CAAC;AAE7D,eAAO,MAAM,qBAAqB;;;;;;;;cAwCT,CAAC;aAKI,CAAA;wBAMZ,CAAC;;;;;sDA4GlB,CAAC"}
1
+ {"version":3,"file":"DefaultScrubberBeacon.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/DefaultScrubberBeacon.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,UAAU,EAGhB,MAAM,eAAe,CAAC;AAKvB,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAkBzE,MAAM,MAAM,0BAA0B,GAAG,mBAAmB,GAAG;IAC7D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;;;;cA4C5B,CAAL;aAIK,CAAF;wBAIE,CAAN;;;;;;;IAhEE;;;OAGG;aACM,MAAM;IACf;;;OAGG;kBACW,MAAM;sDAqLrB,CAAC"}
@@ -43,8 +43,16 @@ export type ScrubberBeaconProps = SharedProps & {
43
43
  isIdle?: boolean;
44
44
  /**
45
45
  * Pulse the beacon while it is at rest.
46
+ *
47
+ * @note Only has an effect when `isIdle` is `true`. Pulse animations work
48
+ * regardless of the chart's `animate` prop.
46
49
  */
47
50
  idlePulse?: boolean;
51
+ /**
52
+ * Whether position animations are enabled.
53
+ * @default to ChartContext's animate value
54
+ */
55
+ animate?: boolean;
48
56
  /**
49
57
  * Transition configuration for beacon animations.
50
58
  */
@@ -71,6 +79,11 @@ export type ScrubberBeaconProps = SharedProps & {
71
79
  * @default 1
72
80
  */
73
81
  opacity?: number;
82
+ /**
83
+ * Stroke color of the beacon circle.
84
+ * @default 'var(--color-bg)'
85
+ */
86
+ stroke?: string;
74
87
  /**
75
88
  * Custom className for styling.
76
89
  */
@@ -165,6 +178,11 @@ export type ScrubberBaseProps = SharedProps &
165
178
  * Transition configuration for the scrubber beacon.
166
179
  */
167
180
  beaconTransitions?: ScrubberBeaconProps['transitions'];
181
+ /**
182
+ * Stroke color of the scrubber beacon circle.
183
+ * @default 'var(--color-bg)'
184
+ */
185
+ beaconStroke?: string;
168
186
  };
169
187
  export type ScrubberProps = ScrubberBaseProps & {
170
188
  /**
@@ -260,6 +278,11 @@ export declare const Scrubber: React.MemoExoticComponent<
260
278
  * Transition configuration for the scrubber beacon.
261
279
  */
262
280
  beaconTransitions?: ScrubberBeaconProps['transitions'];
281
+ /**
282
+ * Stroke color of the scrubber beacon circle.
283
+ * @default 'var(--color-bg)'
284
+ */
285
+ beaconStroke?: string;
263
286
  } & {
264
287
  /**
265
288
  * Accessibility label for the scrubber. Can be a static string or a function that receives the current dataIndex.
@@ -1 +1 @@
1
- {"version":3,"file":"Scrubber.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/Scrubber.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Scrubber.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/Scrubber.tsx"],"names":[],"mappings":"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"}
@@ -34,6 +34,11 @@ export type ScrubberBeaconGroupProps = ScrubberBeaconGroupBaseProps & {
34
34
  * Custom inline styles for beacons.
35
35
  */
36
36
  style?: React.CSSProperties;
37
+ /**
38
+ * Stroke color of the beacon circle.
39
+ * @default 'var(--color-bg)'
40
+ */
41
+ stroke?: string;
37
42
  };
38
43
  export declare const ScrubberBeaconGroup: import('react').MemoExoticComponent<
39
44
  import('react').ForwardRefExoticComponent<
@@ -64,6 +69,11 @@ export declare const ScrubberBeaconGroup: import('react').MemoExoticComponent<
64
69
  * Custom inline styles for beacons.
65
70
  */
66
71
  style?: React.CSSProperties;
72
+ /**
73
+ * Stroke color of the beacon circle.
74
+ * @default 'var(--color-bg)'
75
+ */
76
+ stroke?: string;
67
77
  } & import('react').RefAttributes<ScrubberBeaconGroupRef>
68
78
  >
69
79
  >;
@@ -1 +1 @@
1
- {"version":3,"file":"ScrubberBeaconGroup.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/ScrubberBeaconGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAW9D,OAAO,KAAK,EAAE,uBAAuB,EAAE,mBAAmB,EAAqB,MAAM,YAAY,CAAC;AAsGlG,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,4BAA4B,GAAG,WAAW,GAAG;IACvD;;OAEG;IACH,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,4BAA4B,GAAG;IACpE;;OAEG;IACH,WAAW,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAC;IACjD;;;OAGG;IACH,eAAe,CAAC,EAAE,uBAAuB,CAAC;IAC1C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,mBAAmB;IA9B9B;;OAEG;eACQ,MAAM,EAAE;IACnB;;OAEG;gBACS,OAAO;;IAInB;;OAEG;kBACW,mBAAmB,CAAC,aAAa,CAAC;IAChD;;;OAGG;sBACe,uBAAuB;IACzC;;OAEG;gBACS,MAAM;IAClB;;OAEG;YACK,KAAK,CAAC,aAAa;2DAsF5B,CAAC"}
1
+ {"version":3,"file":"ScrubberBeaconGroup.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/ScrubberBeaconGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAW9D,OAAO,KAAK,EAAE,uBAAuB,EAAE,mBAAmB,EAAqB,MAAM,YAAY,CAAC;AAyGlG,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,4BAA4B,GAAG,WAAW,GAAG;IACvD;;OAEG;IACH,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,4BAA4B,GAAG;IACpE;;OAEG;IACH,WAAW,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAC;IACjD;;;OAGG;IACH,eAAe,CAAC,EAAE,uBAAuB,CAAC;IAC1C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,mBAAmB;IAnC9B;;OAEG;eACQ,MAAM,EAAE;IACnB;;OAEG;gBACS,OAAO;;IAInB;;OAEG;kBACW,mBAAmB,CAAC,aAAa,CAAC;IAChD;;;OAGG;sBACe,uBAAuB;IACzC;;OAEG;gBACS,MAAM;IAClB;;OAEG;YACK,KAAK,CAAC,aAAa;IAC3B;;;OAGG;aACM,MAAM;2DAyFhB,CAAC"}
@@ -8,12 +8,13 @@ import { m as motion, useAnimate } from 'framer-motion';
8
8
  import { useCartesianChartContext } from '../ChartProvider';
9
9
  import { defaultTransition, projectPoint } from '../utils';
10
10
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
11
- const radius = 5;
12
- const strokeWidth = 2;
11
+ const defaultRadius = 5;
12
+ const defaultStrokeWidth = 2;
13
+ const defaultStroke = 'var(--color-bg)';
13
14
  const pulseOpacityStart = 0.5;
14
15
  const pulseOpacityEnd = 0;
15
- const pulseRadiusStart = 10;
16
- const pulseRadiusEnd = 15;
16
+ const pulseRadiusStartMultiplier = 2;
17
+ const pulseRadiusEndMultiplier = 3;
17
18
  const defaultPulseTransition = {
18
19
  duration: 1.6,
19
20
  ease: [0.0, 0.0, 0.0, 1.0]
@@ -27,19 +28,25 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
27
28
  dataY,
28
29
  isIdle,
29
30
  idlePulse,
31
+ animate: animateProp,
30
32
  transitions,
31
33
  opacity = 1,
34
+ radius = defaultRadius,
35
+ stroke = defaultStroke,
36
+ strokeWidth = defaultStrokeWidth,
32
37
  className,
33
38
  style,
34
- testID
39
+ testID = "".concat(seriesId, "-beacon")
35
40
  } = _ref;
36
- const [scope, animate] = useAnimate();
41
+ const [scope, animateFn] = useAnimate();
37
42
  const {
43
+ animate: animateContext,
38
44
  getSeries,
39
45
  getXScale,
40
46
  getYScale,
41
47
  drawingArea
42
48
  } = useCartesianChartContext();
49
+ const animate = animateProp !== null && animateProp !== void 0 ? animateProp : animateContext;
43
50
  const targetSeries = getSeries(seriesId);
44
51
  const xScale = getXScale();
45
52
  const yScale = getYScale(targetSeries === null || targetSeries === void 0 ? void 0 : targetSeries.yAxisId);
@@ -68,17 +75,19 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
68
75
  yScale
69
76
  });
70
77
  }, [dataX, dataY, xScale, yScale]);
78
+ const pulseRadiusStart = radius * pulseRadiusStartMultiplier;
79
+ const pulseRadiusEnd = radius * pulseRadiusEndMultiplier;
71
80
  useImperativeHandle(ref, () => ({
72
81
  pulse: () => {
73
82
  // Only pulse when idle and idlePulse is not enabled
74
83
  if (isIdle && !idlePulse && scope.current) {
75
- animate(scope.current, {
84
+ animateFn(scope.current, {
76
85
  opacity: [pulseOpacityStart, pulseOpacityEnd],
77
86
  r: [pulseRadiusStart, pulseRadiusEnd]
78
87
  }, pulseTransition);
79
88
  }
80
89
  }
81
- }), [isIdle, idlePulse, scope, animate, pulseTransition]);
90
+ }), [isIdle, idlePulse, scope, animateFn, pulseTransition, pulseRadiusStart, pulseRadiusEnd]);
82
91
 
83
92
  // Create continuous pulse transition by repeating the base pulse transition with delay
84
93
  const continuousPulseTransition = useMemo(() => _objectSpread(_objectSpread({}, pulseTransition), {}, {
@@ -91,65 +100,64 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
91
100
  return pixelCoordinate.x >= drawingArea.x && pixelCoordinate.x <= drawingArea.x + drawingArea.width && pixelCoordinate.y >= drawingArea.y && pixelCoordinate.y <= drawingArea.y + drawingArea.height;
92
101
  }, [pixelCoordinate, drawingArea]);
93
102
  if (!pixelCoordinate) return;
94
- if (isIdle) {
95
- return /*#__PURE__*/_jsxs("g", {
96
- "data-testid": testID,
97
- opacity: isWithinDrawingArea ? opacity : 0,
98
- children: [/*#__PURE__*/_jsx(motion.g, {
99
- animate: {
100
- x: pixelCoordinate.x,
101
- y: pixelCoordinate.y
102
- },
103
- initial: false,
104
- transition: updateTransition,
105
- children: /*#__PURE__*/_jsx(motion.circle, {
106
- ref: scope,
107
- animate: shouldPulse ? {
108
- opacity: [pulseOpacityStart, pulseOpacityEnd],
109
- r: [pulseRadiusStart, pulseRadiusEnd],
110
- transition: continuousPulseTransition
111
- } : {
112
- opacity: pulseOpacityEnd,
113
- r: pulseRadiusStart
114
- },
115
- cx: 0,
116
- cy: 0,
117
- fill: color,
118
- initial: {
119
- opacity: shouldPulse ? pulseOpacityStart : pulseOpacityEnd,
120
- r: pulseRadiusStart
121
- }
122
- })
123
- }), /*#__PURE__*/_jsx(motion.circle, {
124
- animate: {
125
- cx: pixelCoordinate.x,
126
- cy: pixelCoordinate.y
127
- },
128
- className: className,
129
- cx: pixelCoordinate.x,
130
- cy: pixelCoordinate.y,
131
- fill: color,
132
- initial: false,
133
- r: radius,
134
- stroke: "var(--color-bg)",
135
- strokeWidth: strokeWidth,
136
- style: style,
137
- transition: updateTransition
138
- })]
139
- });
140
- }
141
- return /*#__PURE__*/_jsx("g", {
103
+ const pulseCircle = /*#__PURE__*/_jsx(motion.circle, {
104
+ ref: scope,
105
+ animate: shouldPulse ? {
106
+ opacity: [pulseOpacityStart, pulseOpacityEnd],
107
+ r: [pulseRadiusStart, pulseRadiusEnd],
108
+ transition: continuousPulseTransition
109
+ } : {
110
+ opacity: pulseOpacityEnd,
111
+ r: pulseRadiusStart
112
+ },
113
+ cx: 0,
114
+ cy: 0,
115
+ "data-testid": "".concat(testID, "-pulse"),
116
+ fill: color,
117
+ initial: {
118
+ opacity: shouldPulse ? pulseOpacityStart : pulseOpacityEnd,
119
+ r: pulseRadiusStart
120
+ }
121
+ });
122
+ const beaconCircle = isIdle && animate ? /*#__PURE__*/_jsx(motion.circle, {
123
+ animate: {
124
+ cx: pixelCoordinate.x,
125
+ cy: pixelCoordinate.y
126
+ },
127
+ className: className,
128
+ cx: pixelCoordinate.x,
129
+ cy: pixelCoordinate.y,
130
+ fill: color,
131
+ initial: false,
132
+ r: radius,
133
+ stroke: stroke,
134
+ strokeWidth: strokeWidth,
135
+ style: style,
136
+ transition: updateTransition
137
+ }) : /*#__PURE__*/_jsx("circle", {
138
+ className: className,
139
+ cx: pixelCoordinate.x,
140
+ cy: pixelCoordinate.y,
141
+ fill: color,
142
+ r: radius,
143
+ stroke: stroke,
144
+ strokeWidth: strokeWidth,
145
+ style: style
146
+ });
147
+ return /*#__PURE__*/_jsxs("g", {
142
148
  "data-testid": testID,
143
149
  opacity: isWithinDrawingArea ? opacity : 0,
144
- children: /*#__PURE__*/_jsx("circle", {
145
- className: className,
146
- cx: pixelCoordinate.x,
147
- cy: pixelCoordinate.y,
148
- fill: color,
149
- r: radius,
150
- stroke: "var(--color-bg)",
151
- strokeWidth: strokeWidth,
152
- style: style
153
- })
150
+ children: [isIdle && (animate ? /*#__PURE__*/_jsx(motion.g, {
151
+ animate: {
152
+ x: pixelCoordinate.x,
153
+ y: pixelCoordinate.y
154
+ },
155
+ initial: false,
156
+ transition: updateTransition,
157
+ children: pulseCircle
158
+ }) : /*#__PURE__*/_jsx("g", {
159
+ transform: "translate(".concat(pixelCoordinate.x, ", ").concat(pixelCoordinate.y, ")"),
160
+ children: pulseCircle
161
+ })), beaconCircle]
154
162
  });
155
163
  }));
@@ -38,6 +38,7 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
38
38
  testID,
39
39
  idlePulse,
40
40
  beaconTransitions,
41
+ beaconStroke,
41
42
  styles,
42
43
  classNames
43
44
  } = _ref;
@@ -175,6 +176,7 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
175
176
  className: classNames === null || classNames === void 0 ? void 0 : classNames.beacon,
176
177
  idlePulse: idlePulse,
177
178
  seriesIds: filteredSeriesIds,
179
+ stroke: beaconStroke,
178
180
  style: styles === null || styles === void 0 ? void 0 : styles.beacon,
179
181
  testID: testID,
180
182
  transitions: beaconTransitions
@@ -13,11 +13,13 @@ const BeaconWithData = /*#__PURE__*/memo(_ref => {
13
13
  isIdle,
14
14
  BeaconComponent,
15
15
  idlePulse,
16
+ animate,
16
17
  transitions,
17
18
  className,
18
19
  style,
19
20
  testID,
20
- beaconRef
21
+ beaconRef,
22
+ stroke
21
23
  } = _ref;
22
24
  const {
23
25
  getSeries,
@@ -71,6 +73,7 @@ const BeaconWithData = /*#__PURE__*/memo(_ref => {
71
73
  if (dataY === undefined) return null;
72
74
  return /*#__PURE__*/_jsx(BeaconComponent, {
73
75
  ref: beaconRef,
76
+ animate: animate,
74
77
  className: className,
75
78
  color: color,
76
79
  dataX: dataX,
@@ -78,6 +81,7 @@ const BeaconWithData = /*#__PURE__*/memo(_ref => {
78
81
  idlePulse: idlePulse,
79
82
  isIdle: isIdle,
80
83
  seriesId: seriesId,
84
+ stroke: stroke,
81
85
  style: style,
82
86
  testID: testID,
83
87
  transitions: transitions
@@ -91,7 +95,8 @@ export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
91
95
  BeaconComponent = DefaultScrubberBeacon,
92
96
  className,
93
97
  style,
94
- testID
98
+ testID,
99
+ stroke
95
100
  } = _ref2;
96
101
  const ScrubberBeaconRefs = useRefMap();
97
102
  const {
@@ -101,7 +106,8 @@ export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
101
106
  getXScale,
102
107
  getXAxis,
103
108
  dataLength,
104
- series
109
+ series,
110
+ animate
105
111
  } = useCartesianChartContext();
106
112
 
107
113
  // Expose imperative handle with pulse method
@@ -152,6 +158,7 @@ export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
152
158
  if (dataX === undefined || dataIndex === undefined) return null;
153
159
  return filteredSeries.map(s => /*#__PURE__*/_jsx(BeaconWithData, {
154
160
  BeaconComponent: BeaconComponent,
161
+ animate: animate,
155
162
  beaconRef: createBeaconRef(s.id),
156
163
  className: className,
157
164
  dataIndex: dataIndex,
@@ -159,6 +166,7 @@ export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
159
166
  idlePulse: idlePulse,
160
167
  isIdle: isIdle,
161
168
  seriesId: s.id,
169
+ stroke: stroke,
162
170
  style: style,
163
171
  testID: testID ? "".concat(testID !== null && testID !== void 0 ? testID : 'beacon', "-").concat(s.id) : undefined,
164
172
  transitions: transitions
@@ -5,7 +5,7 @@ import { figma } from '@figma/code-connect';
5
5
  import { Sparkline } from '../Sparkline';
6
6
  import { jsx as _jsx } from "react/jsx-runtime";
7
7
  figma.connect(Sparkline, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=320-15040&m=dev', {
8
- imports: ["import { Sparkline } from '@coinbase/cds-web-visualization';", "import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath';"],
8
+ imports: ["import { Sparkline } from '@coinbase/cds-web-visualization'", "import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath'"],
9
9
  example: () => {
10
10
  const data = [20, 30, 5, 45, 0];
11
11
  // @ts-expect-error: useSparklinePath is not typed correctly
@@ -8,7 +8,7 @@ import { figma } from '@figma/code-connect';
8
8
  import { SparklineInteractive } from '../SparklineInteractive';
9
9
  import { jsx as _jsx } from "react/jsx-runtime";
10
10
  figma.connect(SparklineInteractive, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=320-14858&m=dev', {
11
- imports: ["import { SparklineInteractive } from '@coinbase/cds-web-visualization';"],
11
+ imports: ["import { SparklineInteractive } from '@coinbase/cds-web-visualization'"],
12
12
  props: {
13
13
  compact: figma.boolean('compact'),
14
14
  disableScrubbing: figma.boolean('scrubbing', {
@@ -9,7 +9,7 @@ import { SparklineInteractive } from '../../sparkline-interactive/SparklineInter
9
9
  import { SparklineInteractiveHeader } from '../SparklineInteractiveHeader';
10
10
  import { jsx as _jsx } from "react/jsx-runtime";
11
11
  figma.connect(SparklineInteractiveHeader, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=320-14931&m=dev', {
12
- imports: ["import { SparklineInteractiveHeader } from '@coinbase/cds-web-visualization';", "import { SparklineInteractive } from '@coinbase/cds-web-visualization';"],
12
+ imports: ["import { SparklineInteractiveHeader } from '@coinbase/cds-web-visualization'", "import { SparklineInteractive } from '@coinbase/cds-web-visualization'"],
13
13
  props: {
14
14
  compact: figma.boolean('compact'),
15
15
  disableScrubbing: figma.boolean('scrubbing', {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/cds-web-visualization",
3
- "version": "3.4.0-beta.11",
3
+ "version": "3.4.0-beta.13",
4
4
  "description": "Coinbase Design System - Web Sparkline",
5
5
  "repository": {
6
6
  "type": "git",
@@ -38,10 +38,10 @@
38
38
  "CHANGELOG"
39
39
  ],
40
40
  "peerDependencies": {
41
- "@coinbase/cds-common": "^8.36.2",
41
+ "@coinbase/cds-common": "^8.38.1",
42
42
  "@coinbase/cds-lottie-files": "^3.3.4",
43
43
  "@coinbase/cds-utils": "^2.3.5",
44
- "@coinbase/cds-web": "^8.36.2",
44
+ "@coinbase/cds-web": "^8.38.1",
45
45
  "react": "^18.3.1",
46
46
  "react-dom": "^18.3.1"
47
47
  },
@@ -58,11 +58,10 @@
58
58
  "@babel/preset-env": "^7.28.0",
59
59
  "@babel/preset-react": "^7.27.1",
60
60
  "@babel/preset-typescript": "^7.27.1",
61
- "@coinbase/cds-common": "^8.36.2",
61
+ "@coinbase/cds-common": "^8.38.1",
62
62
  "@coinbase/cds-lottie-files": "^3.3.4",
63
63
  "@coinbase/cds-utils": "^2.3.5",
64
- "@coinbase/cds-web": "^8.36.2",
65
- "@figma/code-connect": "^1.3.4",
64
+ "@coinbase/cds-web": "^8.38.1",
66
65
  "@linaria/core": "^3.0.0-beta.22",
67
66
  "@types/react": "^18.3.12",
68
67
  "@types/react-dom": "^18.3.1"