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

package/CHANGELOG.md

@@ -8,6 +8,24 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 3.4.0-beta.13 (1/20/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: support styling default scrubber beacon. [[#315](https://github.com/coinbase/cds/pull/315)]
+- Fix: idlePulse works on mobile even when Chart animation is off, matching web. [[#315](https://github.com/coinbase/cds/pull/315)]
+
+#### 📘 Misc
+
+- Internal: code connect file lint fixes. [[#311](https://github.com/coinbase/cds/pull/311)]
+- Internal: update figma code connect config and some mapping files. [[#304](https://github.com/coinbase/cds/pull/304)]
+
+## 3.4.0-beta.12 (1/8/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix pulse with spread operator broken on new react-native architecture. [[#296](https://github.com/coinbase/cds/pull/296)]
+
 ## 3.4.0-beta.11 (1/7/2026 PST)
 
 #### 🐞 Fixes

package/dts/chart/scrubber/DefaultScrubberBeacon.d.ts

@@ -1,8 +1,30 @@
 import type { ScrubberBeaconProps, ScrubberBeaconRef } from './Scrubber';
-export type DefaultScrubberBeaconProps = ScrubberBeaconProps;
+export type DefaultScrubberBeaconProps = ScrubberBeaconProps & {
+  /**
+   * Radius of the beacon circle.
+   * @default 5
+   */
+  radius?: number;
+  /**
+   * Stroke width of the beacon circle.
+   * @default 2
+   */
+  strokeWidth?: number;
+};
 export declare const DefaultScrubberBeacon: import('react').MemoExoticComponent<
   import('react').ForwardRefExoticComponent<
-    ScrubberBeaconProps & import('react').RefAttributes<ScrubberBeaconRef>
+    ScrubberBeaconProps & {
+      /**
+       * Radius of the beacon circle.
+       * @default 5
+       */
+      radius?: number;
+      /**
+       * Stroke width of the beacon circle.
+       * @default 2
+       */
+      strokeWidth?: number;
+    } & import('react').RefAttributes<ScrubberBeaconRef>
   >
 >;
 //# sourceMappingURL=DefaultScrubberBeacon.d.ts.map

package/dts/chart/scrubber/DefaultScrubberBeacon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultScrubberBeacon.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/DefaultScrubberBeacon.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAkBzE,MAAM,MAAM,0BAA0B,GAAG,mBAAmB,CAAC;AAE7D,eAAO,MAAM,qBAAqB,wJAgLjC,CAAC"}
+{"version":3,"file":"DefaultScrubberBeacon.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/DefaultScrubberBeacon.tsx"],"names":[],"mappings":"AAoBA,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;IAZhC;;;OAGG;aACM,MAAM;IACf;;;OAGG;kBACW,MAAM;sDAiMrB,CAAC"}

package/dts/chart/scrubber/Scrubber.d.ts

@@ -43,11 +43,14 @@ export type ScrubberBeaconProps = {
   isIdle: AnimatedProp<boolean>;
   /**
    * Pulse the beacon while it is at rest.
+   *
+   * @note Only has an effect when `isIdle` is `true`. Pulse animations work
+   * regardless of the chart's `animate` prop.
    */
   idlePulse?: boolean;
   /**
-   * Whether animations are enabled.
-   * @default true
+   * Whether position animations are enabled.
+   * @default to ChartContext's animate value
    */
   animate?: boolean;
   /**
@@ -76,6 +79,11 @@ export type ScrubberBeaconProps = {
    * @default 1
    */
   opacity?: AnimatedProp<number>;
+  /**
+   * Stroke color of the beacon circle.
+   * @default theme.color.bg
+   */
+  stroke?: string;
 };
 export type ScrubberBeaconComponent = React.FC<
   ScrubberBeaconProps & {
@@ -159,6 +167,11 @@ export type ScrubberBaseProps = Pick<ScrubberBeaconGroupBaseProps, 'idlePulse'>
      * Transition configuration for the scrubber beacon.
      */
     beaconTransitions?: ScrubberBeaconProps['transitions'];
+    /**
+     * Stroke color of the scrubber beacon circle.
+     * @default theme.color.bg
+     */
+    beaconStroke?: string;
   };
 export type ScrubberProps = ScrubberBaseProps;
 export type ScrubberRef = ScrubberBeaconGroupRef;
@@ -227,6 +240,11 @@ export declare const Scrubber: React.MemoExoticComponent<
          * Transition configuration for the scrubber beacon.
          */
         beaconTransitions?: ScrubberBeaconProps['transitions'];
+        /**
+         * Stroke color of the scrubber beacon circle.
+         * @default theme.color.bg
+         */
+        beaconStroke?: string;
       } & React.RefAttributes<ScrubberBeaconGroupRef>
   >
 >;

package/dts/chart/scrubber/Scrubber.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Scrubber.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/Scrubber.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Scrubber.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/Scrubber.tsx"],"names":[],"mappings":"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"}

package/dts/chart/scrubber/ScrubberBeaconGroup.d.ts

@@ -25,6 +25,11 @@ export type ScrubberBeaconGroupProps = ScrubberBeaconGroupBaseProps & {
    * @default DefaultScrubberBeacon
    */
   BeaconComponent?: ScrubberBeaconComponent;
+  /**
+   * Stroke color of the beacon circle.
+   * @default theme.color.bg
+   */
+  stroke?: string;
 };
 export declare const ScrubberBeaconGroup: import('react').MemoExoticComponent<
   import('react').ForwardRefExoticComponent<
@@ -38,6 +43,11 @@ export declare const ScrubberBeaconGroup: import('react').MemoExoticComponent<
        * @default DefaultScrubberBeacon
        */
       BeaconComponent?: ScrubberBeaconComponent;
+      /**
+       * Stroke color of the beacon circle.
+       * @default theme.color.bg
+       */
+      stroke?: string;
     } & import('react').RefAttributes<ScrubberBeaconGroupRef>
   >
 >;

package/dts/chart/scrubber/ScrubberBeaconGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrubberBeaconGroup.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/ScrubberBeaconGroup.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,uBAAuB,EAAE,mBAAmB,EAAqB,MAAM,YAAY,CAAC;AAgHlG,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,4BAA4B,GAAG;IACzC;;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;CAC3C,CAAC;AAEF,eAAO,MAAM,mBAAmB;IAX9B;;OAEG;kBACW,mBAAmB,CAAC,aAAa,CAAC;IAChD;;;OAGG;sBACe,uBAAuB;2DAqE1C,CAAC"}
+{"version":3,"file":"ScrubberBeaconGroup.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/ScrubberBeaconGroup.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,uBAAuB,EAAE,mBAAmB,EAAqB,MAAM,YAAY,CAAC;AAmHlG,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,4BAA4B,GAAG;IACzC;;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;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,mBAAmB;IAhB9B;;OAEG;kBACW,mBAAmB,CAAC,aAAa,CAAC;IAChD;;;OAGG;sBACe,uBAAuB;IACzC;;;OAGG;aACM,MAAM;2DAyEhB,CAAC"}

package/esm/chart/line/__stories__/LineChart.stories.js

@@ -2014,6 +2014,122 @@ function HiddenScrubberWhenIdle() {
     })
   });
 }
+function CustomBeaconStroke() {
+  const theme = useTheme();
+  const backgroundColor = "rgb(" + theme.spectrum.red40 + ")";
+  const foregroundColor = "rgb(" + theme.spectrum.gray0 + ")";
+  return /*#__PURE__*/_jsx(Box, {
+    borderRadius: 300,
+    padding: 2,
+    style: {
+      backgroundColor
+    },
+    children: /*#__PURE__*/_jsx(LineChart, {
+      enableScrubbing: true,
+      showArea: true,
+      height: 150,
+      series: [{
+        id: 'prices',
+        data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+        color: foregroundColor
+      }],
+      children: /*#__PURE__*/_jsx(Scrubber, {
+        hideOverlay: true,
+        idlePulse: true,
+        beaconStroke: backgroundColor,
+        lineStroke: foregroundColor
+      })
+    })
+  });
+}
+function CustomBeaconSize() {
+  const theme = useTheme();
+  const dataCount = 14;
+  const minDataValue = 0;
+  const maxDataValue = 100;
+  const minStepOffset = 5;
+  const maxStepOffset = 20;
+  const updateInterval = 2000;
+  function generateNextValue(previousValue) {
+    const range = maxStepOffset - minStepOffset;
+    const offset = Math.random() * range + minStepOffset;
+    let direction;
+    if (previousValue >= maxDataValue) {
+      direction = -1;
+    } else if (previousValue <= minDataValue) {
+      direction = 1;
+    } else {
+      direction = Math.random() < 0.5 ? -1 : 1;
+    }
+    const newValue = previousValue + offset * direction;
+    return Math.max(minDataValue, Math.min(maxDataValue, newValue));
+  }
+  function generateInitialData() {
+    const data = [];
+    let previousValue = Math.random() * (maxDataValue - minDataValue) + minDataValue;
+    data.push(previousValue);
+    for (let i = 1; i < dataCount; i++) {
+      const newValue = generateNextValue(previousValue);
+      data.push(newValue);
+      previousValue = newValue;
+    }
+    return data;
+  }
+  const InvertedBeacon = useMemo(() => props => /*#__PURE__*/_jsx(DefaultScrubberBeacon, _extends({}, props, {
+    color: theme.color.bg,
+    radius: 5,
+    stroke: theme.color.fg,
+    strokeWidth: 3
+  })), [theme.color.fg, theme.color.bg]);
+  const CustomBeaconSizeChart = /*#__PURE__*/memo(() => {
+    const [data, setData] = useState(generateInitialData);
+    useEffect(() => {
+      const intervalId = setInterval(() => {
+        setData(currentData => {
+          var _currentData2;
+          const lastValue = (_currentData2 = currentData[currentData.length - 1]) != null ? _currentData2 : 50;
+          const newValue = generateNextValue(lastValue);
+          return [...currentData.slice(1), newValue];
+        });
+      }, updateInterval);
+      return () => clearInterval(intervalId);
+    }, []);
+    return /*#__PURE__*/_jsx(LineChart, {
+      enableScrubbing: true,
+      showArea: true,
+      showYAxis: true,
+      height: 150,
+      series: [{
+        id: 'prices',
+        data,
+        color: theme.color.fg
+      }],
+      xAxis: {
+        range: _ref23 => {
+          let {
+            min,
+            max
+          } = _ref23;
+          return {
+            min,
+            max: max - 16
+          };
+        }
+      },
+      yAxis: {
+        showGrid: true,
+        domain: {
+          min: 0,
+          max: 100
+        }
+      },
+      children: /*#__PURE__*/_jsx(Scrubber, {
+        BeaconComponent: InvertedBeacon
+      })
+    });
+  });
+  return /*#__PURE__*/_jsx(CustomBeaconSizeChart, {});
+}
 function TwoLineScrubberLabel() {
   const theme = useTheme();
   const data = useMemo(() => [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58], []);
@@ -2260,11 +2376,11 @@ function ExampleNavigator() {
       }],
       xAxis: {
         // Give space before the end of the chart for the scrubber
-        range: _ref23 => {
+        range: _ref24 => {
           let {
             min,
             max
-          } = _ref23;
+          } = _ref24;
           return {
             min,
             max: max - 24
@@ -2319,6 +2435,12 @@ function ExampleNavigator() {
   }, {
     title: 'Two-Line Scrubber Label',
     component: /*#__PURE__*/_jsx(TwoLineScrubberLabel, {})
+  }, {
+    title: 'Custom Beacon Stroke',
+    component: /*#__PURE__*/_jsx(CustomBeaconStroke, {})
+  }, {
+    title: 'Custom Beacon Size',
+    component: /*#__PURE__*/_jsx(CustomBeaconSize, {})
   }], [theme.color.fg, theme.color.fgPositive, theme.spectrum.gray50]);
   const currentExample = examples[currentIndex];
   const isFirstExample = currentIndex === 0;

package/esm/chart/scrubber/DefaultScrubberBeacon.js

@@ -1,6 +1,5 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import { forwardRef, memo, useImperativeHandle, useMemo } from 'react';
-import { cancelAnimation, Easing, useAnimatedReaction, useDerivedValue, useSharedValue, withRepeat, withSequence } from 'react-native-reanimated';
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo } from 'react';
+import { cancelAnimation, Easing, useAnimatedReaction, useDerivedValue, useSharedValue, withDelay, withRepeat, withSequence, withTiming } from 'react-native-reanimated';
 import { useTheme } from '@coinbase/cds-mobile';
 import { Circle, Group } from '@shopify/react-native-skia';
 import { useCartesianChartContext } from '../ChartProvider';
@@ -8,12 +7,12 @@ import { unwrapAnimatedValue } from '../utils';
 import { projectPointWithSerializableScale } from '../utils/point';
 import { buildTransition, defaultTransition } from '../utils/transition';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const radius = 5;
-const strokeWidth = 2;
+const defaultRadius = 5;
+const defaultStrokeWidth = 2;
 const pulseOpacityStart = 0.5;
 const pulseOpacityEnd = 0;
-const pulseRadiusStart = 10;
-const pulseRadiusEnd = 15;
+const pulseRadiusStartMultiplier = 2;
+const pulseRadiusEndMultiplier = 3;
 const defaultPulseTransition = {
   type: 'timing',
   duration: 1600,
@@ -30,7 +29,10 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
     idlePulse,
     animate = true,
     transitions,
-    opacity: opacityProp = 1
+    opacity: opacityProp = 1,
+    radius = defaultRadius,
+    stroke,
+    strokeWidth = defaultStrokeWidth
   } = _ref;
   const theme = useTheme();
   const {
@@ -58,8 +60,18 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
     var _transitions$pulseRep;
     return (_transitions$pulseRep = transitions == null ? void 0 : transitions.pulseRepeatDelay) != null ? _transitions$pulseRep : defaultPulseRepeatDelay;
   }, [transitions == null ? void 0 : transitions.pulseRepeatDelay]);
+  const pulseRadiusStart = radius * pulseRadiusStartMultiplier;
+  const pulseRadiusEnd = radius * pulseRadiusEndMultiplier;
   const pulseOpacity = useSharedValue(0);
   const pulseRadius = useSharedValue(pulseRadiusStart);
+
+  // Convert idlePulse prop to SharedValue so useAnimatedReaction can detect changes.
+  // In the new React Native architecture, regular JS props are captured by value in worklets
+  // and won't update when the prop changes.
+  const idlePulseShared = useSharedValue(idlePulse != null ? idlePulse : false);
+  useEffect(() => {
+    idlePulseShared.value = idlePulse != null ? idlePulse : false;
+  }, [idlePulse, idlePulseShared]);
   const animatedX = useSharedValue(0);
   const animatedY = useSharedValue(0);
 
@@ -103,41 +115,33 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
   useImperativeHandle(ref, () => ({
     pulse: () => {
       // Only trigger manual pulse when idlePulse is not enabled
-      if (!idlePulse) {
+      if (!idlePulseShared.value) {
         cancelAnimation(pulseOpacity);
         cancelAnimation(pulseRadius);
 
         // Manual pulse without delay
-        const immediatePulseTransition = _extends({}, pulseTransition, {
-          delay: 0
-        });
         pulseOpacity.value = pulseOpacityStart;
         pulseRadius.value = pulseRadiusStart;
-        pulseOpacity.value = buildTransition(pulseOpacityEnd, immediatePulseTransition);
-        pulseRadius.value = buildTransition(pulseRadiusEnd, immediatePulseTransition);
+        pulseOpacity.value = buildTransition(pulseOpacityEnd, pulseTransition);
+        pulseRadius.value = buildTransition(pulseRadiusEnd, pulseTransition);
       }
     }
-  }), [idlePulse, pulseOpacity, pulseRadius, pulseTransition]);
+  }), [idlePulseShared, pulseOpacity, pulseRadius, pulseTransition, pulseRadiusStart, pulseRadiusEnd]);
 
   // Watch idlePulse changes and control continuous pulse
-  useAnimatedReaction(() => idlePulse, (current, previous) => {
-    if (!animate) return;
+  useAnimatedReaction(() => idlePulseShared.value, current => {
     if (current) {
       // Start continuous pulse when idlePulse is enabled
-      // Create instant transition to reset pulse after delay
-      const instantTransition = {
-        type: 'timing',
-        duration: 0
-      };
-      const resetWithDelay = _extends({}, instantTransition, {
-        delay: pulseRepeatDelay
-      });
       pulseOpacity.value = pulseOpacityStart;
       pulseRadius.value = pulseRadiusStart;
-      pulseOpacity.value = withRepeat(withSequence(buildTransition(pulseOpacityEnd, pulseTransition), buildTransition(pulseOpacityStart, resetWithDelay)), -1,
+      pulseOpacity.value = withRepeat(withSequence(buildTransition(pulseOpacityEnd, pulseTransition), withDelay(pulseRepeatDelay, withTiming(pulseOpacityStart, {
+        duration: 0
+      }))), -1,
       // infinite loop
       false);
-      pulseRadius.value = withRepeat(withSequence(buildTransition(pulseRadiusEnd, pulseTransition), buildTransition(pulseRadiusStart, resetWithDelay)), -1,
+      pulseRadius.value = withRepeat(withSequence(buildTransition(pulseRadiusEnd, pulseTransition), withDelay(pulseRepeatDelay, withTiming(pulseRadiusStart, {
+        duration: 0
+      }))), -1,
       // infinite loop
       false);
     } else {
@@ -147,7 +151,7 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
       pulseOpacity.value = pulseOpacityEnd;
       pulseRadius.value = pulseRadiusStart;
     }
-  }, [animate, pulseTransition, pulseRepeatDelay]);
+  }, [pulseTransition, pulseRepeatDelay, pulseRadiusStart, pulseRadiusEnd]);
   const pulseVisibility = useDerivedValue(() => {
     // Never pulse when scrubbing
     if (!unwrapAnimatedValue(isIdle)) return 0;
@@ -168,7 +172,7 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
       r: pulseRadius
     }), /*#__PURE__*/_jsx(Circle, {
       c: animatedPoint,
-      color: theme.color.bg,
+      color: stroke != null ? stroke : theme.color.bg,
       r: radius + strokeWidth / 2
     }), /*#__PURE__*/_jsx(Circle, {
       c: animatedPoint,

package/esm/chart/scrubber/Scrubber.js

@@ -32,7 +32,8 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
     labelBoundsInset,
     beaconLabelFont,
     idlePulse,
-    beaconTransitions
+    beaconTransitions,
+    beaconStroke
   } = _ref;
   const theme = useTheme();
   const beaconGroupRef = React.useRef(null);
@@ -154,6 +155,7 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       BeaconComponent: BeaconComponent,
       idlePulse: idlePulse,
       seriesIds: filteredSeriesIds,
+      stroke: beaconStroke,
       transitions: beaconTransitions
     }), beaconLabels.length > 0 && /*#__PURE__*/_jsx(ScrubberBeaconLabelGroup, {
       BeaconLabelComponent: BeaconLabelComponent,

package/esm/chart/scrubber/ScrubberBeaconGroup.js

@@ -18,7 +18,8 @@ const BeaconWithData = /*#__PURE__*/memo(_ref => {
     idlePulse,
     animate,
     transitions,
-    beaconRef
+    beaconRef,
+    stroke
   } = _ref;
   const {
     getSeries,
@@ -91,6 +92,7 @@ const BeaconWithData = /*#__PURE__*/memo(_ref => {
     idlePulse: idlePulse,
     isIdle: isIdle,
     seriesId: seriesId,
+    stroke: stroke,
     transitions: transitions
   });
 });
@@ -99,7 +101,8 @@ export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
     seriesIds,
     idlePulse,
     transitions,
-    BeaconComponent = DefaultScrubberBeacon
+    BeaconComponent = DefaultScrubberBeacon,
+    stroke
   } = _ref2;
   const ScrubberBeaconRefs = useRefMap();
   const {
@@ -156,6 +159,7 @@ export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
     idlePulse: idlePulse,
     isIdle: isIdle,
     seriesId: s.id,
+    stroke: stroke,
     transitions: transitions
   }, s.id));
 }));

package/esm/sparkline/__figma__/Sparkline.figma.js

@@ -4,7 +4,7 @@ import { figma } from '@figma/code-connect';
 import { Sparkline } from '../Sparkline';
 import { jsx as _jsx } from "react/jsx-runtime";
 figma.connect(Sparkline, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=320%3A15040', {
-  imports: ["import { Sparkline } from '@coinbase/cds-mobile-visualization';", "import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath';"],
+  imports: ["import { Sparkline } from '@coinbase/cds-mobile-visualization'", "import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath'"],
   example: function Example() {
     const data = [20, 30, 5, 45, 0];
     const path = useSparklinePath({

package/esm/sparkline/sparkline-interactive/__figma__/SparklineInteractive.figma.js

@@ -4,7 +4,7 @@ import { figma } from '@figma/code-connect';
 import { SparklineInteractive } from '../SparklineInteractive';
 import { jsx as _jsx } from "react/jsx-runtime";
 figma.connect(SparklineInteractive, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=320-14858&m=dev', {
-  imports: ["import { SparklineInteractive } from '@coinbase/cds-web-visualization';"],
+  imports: ["import { SparklineInteractive } from '@coinbase/cds-mobile-visualization'"],
   props: {
     compact: figma.boolean('compact'),
     disableScrubbing: figma.boolean('scrubbing', {

package/esm/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.js

@@ -5,7 +5,7 @@ import { SparklineInteractive } from '../../sparkline-interactive/SparklineInter
 import { SparklineInteractiveHeader } from '../SparklineInteractiveHeader';
 import { jsx as _jsx } from "react/jsx-runtime";
 figma.connect(SparklineInteractiveHeader, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=320-14931&m=dev', {
-  imports: ["import { SparklineInteractiveHeader } from '@coinbase/cds-web-visualization';", "import { SparklineInteractive } from '@coinbase/cds-web-visualization';"],
+  imports: ["import { SparklineInteractiveHeader } from '@coinbase/cds-mobile-visualization'", "import { SparklineInteractive } from '@coinbase/cds-mobile-visualization'"],
   props: {
     compact: figma.boolean('compact'),
     disableScrubbing: figma.boolean('scrubbing', {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile-visualization",
-  "version": "3.4.0-beta.11",
+  "version": "3.4.0-beta.13",
   "description": "Coinbase Design System - Mobile Visualization Native",
   "repository": {
     "type": "git",
@@ -36,9 +36,9 @@
     "CHANGELOG"
   ],
   "peerDependencies": {
-    "@coinbase/cds-common": "^8.36.2",
+    "@coinbase/cds-common": "^8.38.1",
     "@coinbase/cds-lottie-files": "^3.3.4",
-    "@coinbase/cds-mobile": "^8.36.2",
+    "@coinbase/cds-mobile": "^8.38.1",
     "@coinbase/cds-utils": "^2.3.5",
     "@shopify/react-native-skia": "^1.12.4 || ^2.0.0",
     "react": "^18.3.1",
@@ -57,11 +57,10 @@
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@coinbase/cds-common": "^8.36.2",
+    "@coinbase/cds-common": "^8.38.1",
     "@coinbase/cds-lottie-files": "^3.3.4",
-    "@coinbase/cds-mobile": "^8.36.2",
+    "@coinbase/cds-mobile": "^8.38.1",
     "@coinbase/cds-utils": "^2.3.5",
-    "@figma/code-connect": "^1.3.4",
     "@shopify/react-native-skia": "1.12.4",
     "@types/react": "^18.3.12",
     "react-native-gesture-handler": "2.16.2",