@coinbase/cds-mobile-visualization 3.8.1 → 4.0.0

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

@@ -1,226 +0,0 @@
-const _excluded = ["accentColor", "yellowColor"];
-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); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import { memo, useCallback, useMemo } from 'react';
-import { useDerivedValue, withTiming } from 'react-native-reanimated';
-import { sparklineInteractiveData } from '@coinbase/cds-common/internal/visualizations/SparklineInteractiveData';
-import { useTheme } from '@coinbase/cds-mobile';
-import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
-import { useCartesianChartContext } from '../../ChartProvider';
-import { Scrubber } from '../../scrubber';
-import { getPointOnSerializableScale, useScrubberContext } from '../../utils';
-import { DefaultReferenceLineLabel } from '../DefaultReferenceLineLabel';
-import { DottedLine } from '../DottedLine';
-import { LineChart } from '../LineChart';
-import { ReferenceLine } from '../ReferenceLine';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const LiquidationLabelMobile = /*#__PURE__*/memo(_ref => {
-  let {
-      accentColor,
-      yellowColor
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return /*#__PURE__*/_jsx(DefaultReferenceLineLabel, _extends({}, props, {
-    background: accentColor,
-    borderRadius: 100,
-    color: "rgb(" + yellowColor + ")",
-    horizontalAlignment: "left",
-    inset: {
-      top: 4,
-      bottom: 4,
-      left: 8,
-      right: 8
-    }
-  }));
-});
-const ReferenceLineStories = () => {
-  const theme = useTheme();
-  const liquidationLabelComponent = useCallback(props => /*#__PURE__*/_jsx(LiquidationLabelMobile, _extends({}, props, {
-    accentColor: theme.color.accentSubtleYellow,
-    yellowColor: theme.spectrum.yellow70
-  })), [theme.color.accentSubtleYellow, theme.spectrum.yellow70]);
-  return /*#__PURE__*/_jsxs(ExampleScreen, {
-    children: [/*#__PURE__*/_jsx(Example, {
-      title: "Simple Reference Line",
-      children: /*#__PURE__*/_jsx(LineChart, {
-        showArea: true,
-        height: 250,
-        series: [{
-          id: 'prices',
-          data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
-          color: theme.color.fgPositive
-        }],
-        children: /*#__PURE__*/_jsx(ReferenceLine, {
-          LineComponent: props => /*#__PURE__*/_jsx(DottedLine, _extends({}, props, {
-            dashIntervals: [0, 16],
-            strokeWidth: 3
-          })),
-          dataY: 10,
-          stroke: theme.color.fg
-        })
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "With Labels",
-      children: /*#__PURE__*/_jsxs(LineChart, {
-        showArea: true,
-        height: 250,
-        inset: 0,
-        series: [{
-          id: 'prices',
-          data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58]
-        }],
-        children: [/*#__PURE__*/_jsx(ReferenceLine, {
-          dataX: 4,
-          label: "Vertical Reference Line",
-          labelHorizontalAlignment: "left"
-        }), /*#__PURE__*/_jsx(ReferenceLine, {
-          dataY: 70,
-          label: "Horizontal Reference Line",
-          labelHorizontalAlignment: "right",
-          labelVerticalAlignment: "bottom"
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Label Customization",
-      children: /*#__PURE__*/_jsxs(LineChart, {
-        showArea: true,
-        height: 250,
-        series: [{
-          id: 'prices',
-          data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58]
-        }],
-        children: [/*#__PURE__*/_jsx(ReferenceLine, {
-          dataY: 75,
-          label: "Top Right",
-          labelDx: -8,
-          labelDy: -8,
-          labelFont: "label1",
-          labelHorizontalAlignment: "right",
-          labelPosition: "right",
-          labelVerticalAlignment: "bottom"
-        }), /*#__PURE__*/_jsx(ReferenceLine, {
-          dataX: 7,
-          label: "Bottom Left",
-          labelDx: 8,
-          labelDy: 8,
-          labelFont: "label1",
-          labelHorizontalAlignment: "left",
-          labelPosition: "top",
-          labelVerticalAlignment: "top"
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "With Custom Label Component",
-      children: /*#__PURE__*/_jsx(LineChart, {
-        height: 250,
-        inset: {
-          right: 32,
-          top: 0,
-          left: 0,
-          bottom: 0
-        },
-        series: [{
-          id: 'prices',
-          data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58]
-        }],
-        children: /*#__PURE__*/_jsx(ReferenceLine, {
-          LabelComponent: liquidationLabelComponent,
-          dataY: 25,
-          label: "Liquidation",
-          labelPosition: "left",
-          stroke: theme.color.bgWarning
-        })
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Start Price Reference Line",
-      children: /*#__PURE__*/_jsx(StartPriceReferenceLine, {})
-    })]
-  });
-};
-const FADE_ZONE = 128;
-const StartPriceLabel = /*#__PURE__*/memo(props => {
-  const theme = useTheme();
-  const {
-    scrubberPosition
-  } = useScrubberContext();
-  const {
-    getXSerializableScale,
-    drawingArea
-  } = useCartesianChartContext();
-  const xScale = useMemo(() => getXSerializableScale(), [getXSerializableScale]);
-  const opacity = useDerivedValue(() => {
-    if (scrubberPosition.value === undefined) return withTiming(0, {
-      duration: 250
-    });
-    if (!xScale) return withTiming(1, {
-      duration: 250
-    });
-    const scrubX = getPointOnSerializableScale(scrubberPosition.value, xScale);
-    const rightEdge = drawingArea.x + drawingArea.width;
-    const target = rightEdge - scrubX >= FADE_ZONE ? 1 : 0;
-    return withTiming(target, {
-      duration: 250
-    });
-  }, [scrubberPosition, xScale, drawingArea]);
-  return /*#__PURE__*/_jsx(DefaultReferenceLineLabel, _extends({}, props, {
-    background: theme.color.bgSecondary,
-    borderRadius: 12.5,
-    color: theme.color.fg,
-    font: "label1",
-    inset: {
-      top: 4,
-      bottom: 4,
-      left: 8,
-      right: 8
-    },
-    opacity: opacity
-  }));
-});
-function StartPriceReferenceLine() {
-  const theme = useTheme();
-  const hourData = useMemo(() => sparklineInteractiveData.hour, []);
-  const startPrice = hourData[0].value;
-  const endPrice = hourData[hourData.length - 1].value;
-  const isPositive = endPrice >= startPrice;
-  const seriesColor = isPositive ? theme.color.fgPositive : theme.color.fgNegative;
-  return /*#__PURE__*/_jsxs(LineChart, {
-    enableScrubbing: true,
-    showArea: true,
-    areaType: "dotted",
-    height: 300,
-    inset: 0,
-    series: [{
-      id: 'hourly-prices',
-      data: hourData.map(d => d.value),
-      color: seriesColor
-    }],
-    xAxis: {
-      range: _ref2 => {
-        let {
-          min,
-          max
-        } = _ref2;
-        return {
-          min,
-          max: max - 24
-        };
-      }
-    },
-    children: [/*#__PURE__*/_jsx(Scrubber, {}), /*#__PURE__*/_jsx(ReferenceLine, {
-      LabelComponent: StartPriceLabel,
-      LineComponent: props => /*#__PURE__*/_jsx(DottedLine, _extends({}, props, {
-        dashIntervals: [0, 16],
-        strokeWidth: 3
-      })),
-      dataY: startPrice,
-      label: startPrice.toLocaleString('en-US', {
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2
-      }),
-      labelDx: -12,
-      labelHorizontalAlignment: "right",
-      stroke: theme.color.fgMuted
-    })]
-  });
-}
-export default ReferenceLineStories;

package/esm/chart/line/index.js

@@ -1,8 +0,0 @@
-// codegen:start {preset: barrel, include: ./*.tsx, exclude: ./__stories__/*.tsx}
-export * from './DefaultReferenceLineLabel';
-export * from './DottedLine';
-export * from './Line';
-export * from './LineChart';
-export * from './ReferenceLine';
-export * from './SolidLine';
-// codegen:end

package/esm/chart/point/DefaultPointLabel.js

@@ -1,39 +0,0 @@
-const _excluded = ["x", "y", "position", "offset", "children"];
-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); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import { memo, useMemo } from 'react';
-import { ChartText } from '../text';
-import { getAlignmentFromPosition, getLabelCoordinates } from '../utils/point';
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * DefaultPointLabel is the default label component for point labels.
- * It renders text at the specified position relative to the point.
- */
-export const DefaultPointLabel = /*#__PURE__*/memo(_ref => {
-  let {
-      x,
-      y,
-      position = 'center',
-      offset,
-      children
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const {
-    horizontalAlignment,
-    verticalAlignment
-  } = useMemo(() => getAlignmentFromPosition(position), [position]);
-  const labelCoordinates = useMemo(() => {
-    if (offset === undefined) return {
-      x,
-      y
-    };
-    return getLabelCoordinates(x, y, position, offset);
-  }, [x, y, position, offset]);
-  return /*#__PURE__*/_jsx(ChartText, _extends({}, props, {
-    horizontalAlignment: horizontalAlignment,
-    verticalAlignment: verticalAlignment,
-    x: labelCoordinates.x,
-    y: labelCoordinates.y,
-    children: children
-  }));
-});

package/esm/chart/point/Point.js

@@ -1,187 +0,0 @@
-import { memo, useEffect, useMemo } from 'react';
-import { cancelAnimation, useDerivedValue, useSharedValue } from 'react-native-reanimated';
-import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { Circle, Group, interpolateColors } from '@shopify/react-native-skia';
-import { useCartesianChartContext } from '../ChartProvider';
-import { projectPoint } from '../utils';
-import { buildTransition, defaultAccessoryEnterTransition, defaultTransition, getTransition } from '../utils/transition';
-import { DefaultPointLabel } from './DefaultPointLabel';
-
-/**
- * Props for point label components.
- */
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-export const Point = /*#__PURE__*/memo(_ref => {
-  let {
-    dataX,
-    dataY,
-    xAxisId,
-    yAxisId,
-    fill: fillProp,
-    radius = 5,
-    opacity,
-    stroke: strokeProp,
-    strokeWidth = 2,
-    label,
-    LabelComponent = DefaultPointLabel,
-    labelPosition = 'center',
-    labelOffset,
-    labelFont,
-    transitions,
-    transition,
-    animate: animateProp
-  } = _ref;
-  const theme = useTheme();
-  const stroke = strokeProp != null ? strokeProp : theme.color.bg;
-  const fill = fillProp != null ? fillProp : theme.color.fgPrimary;
-  const {
-    getXScale,
-    getYScale,
-    animate: animationEnabled,
-    drawingArea
-  } = useCartesianChartContext();
-  const animate = animateProp != null ? animateProp : animationEnabled;
-  const xScale = getXScale(xAxisId);
-  const yScale = getYScale(yAxisId);
-  const shouldAnimate = animate != null ? animate : false;
-  const updateTransition = useMemo(() => getTransition((transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition, animate, defaultTransition), [animate, transitions == null ? void 0 : transitions.update, transition]);
-  const enterTransition = useMemo(() => getTransition(transitions == null ? void 0 : transitions.enter, animate, defaultAccessoryEnterTransition), [animate, transitions == null ? void 0 : transitions.enter]);
-
-  // Calculate pixel coordinates from data coordinates
-  const pixelCoordinate = useMemo(() => {
-    if (!xScale || !yScale) {
-      return undefined;
-    }
-    return projectPoint({
-      x: dataX,
-      y: dataY,
-      xScale,
-      yScale
-    });
-  }, [xScale, yScale, dataX, dataY]);
-  const previousPixelCoordinate = usePreviousValue(pixelCoordinate);
-  const previousFill = usePreviousValue(fill);
-
-  // Animated values for position
-  const animatedX = useSharedValue(0);
-  const animatedY = useSharedValue(0);
-  const enterOpacity = useSharedValue(shouldAnimate ? 0 : 1);
-  const colorProgress = useSharedValue(1);
-  const isReady = !!xScale && !!yScale;
-  useEffect(() => {
-    if (!shouldAnimate || !isReady) return;
-    enterOpacity.value = buildTransition(1, enterTransition);
-  }, [shouldAnimate, isReady, enterTransition, enterOpacity]);
-
-  // Update position when coordinates change
-  useEffect(() => {
-    if (!pixelCoordinate) {
-      return;
-    }
-    if (shouldAnimate && previousPixelCoordinate) {
-      animatedX.value = buildTransition(pixelCoordinate.x, updateTransition);
-      animatedY.value = buildTransition(pixelCoordinate.y, updateTransition);
-    } else {
-      cancelAnimation(animatedX);
-      cancelAnimation(animatedY);
-      animatedX.value = pixelCoordinate.x;
-      animatedY.value = pixelCoordinate.y;
-    }
-  }, [pixelCoordinate, shouldAnimate, previousPixelCoordinate, animatedX, animatedY, updateTransition]);
-
-  // Update color when fill changes
-  useEffect(() => {
-    if (shouldAnimate && previousFill && previousFill !== fill) {
-      colorProgress.value = 0;
-      colorProgress.value = buildTransition(1, updateTransition);
-    } else {
-      cancelAnimation(colorProgress);
-      colorProgress.value = 1;
-    }
-  }, [fill, shouldAnimate, previousFill, colorProgress, updateTransition]);
-
-  // Create animated point for circles
-  const animatedPoint = useDerivedValue(() => {
-    return {
-      x: animatedX.value,
-      y: animatedY.value
-    };
-  }, [animatedX, animatedY]);
-
-  // Interpolate between previous and current fill color
-  const animatedFillColor = useDerivedValue(() => {
-    if (!previousFill || previousFill === fill) {
-      return fill;
-    }
-    return interpolateColors(colorProgress.value, [0, 1], [previousFill, fill]);
-  }, [colorProgress, previousFill, fill]);
-  const isWithinDrawingArea = useMemo(() => {
-    if (!pixelCoordinate) return false;
-    return pixelCoordinate.x >= drawingArea.x && pixelCoordinate.x <= drawingArea.x + drawingArea.width && pixelCoordinate.y >= drawingArea.y && pixelCoordinate.y <= drawingArea.y + drawingArea.height;
-  }, [pixelCoordinate, drawingArea]);
-  const effectiveOpacity = useDerivedValue(() => {
-    const baseOpacity = opacity != null ? opacity : 1;
-    return isWithinDrawingArea ? baseOpacity * enterOpacity.value : 0;
-  }, [isWithinDrawingArea, opacity, enterOpacity]);
-  const offset = useMemo(() => labelOffset != null ? labelOffset : radius * 2, [labelOffset, radius]);
-  if (!pixelCoordinate) {
-    return null;
-  }
-  if (!shouldAnimate) {
-    const isWithinBounds = pixelCoordinate.x >= drawingArea.x && pixelCoordinate.x <= drawingArea.x + drawingArea.width && pixelCoordinate.y >= drawingArea.y && pixelCoordinate.y <= drawingArea.y + drawingArea.height;
-    const staticOpacity = isWithinBounds ? opacity != null ? opacity : 1 : 0;
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsxs(Group, {
-        opacity: staticOpacity,
-        children: [strokeWidth > 0 && /*#__PURE__*/_jsx(Circle, {
-          c: {
-            x: pixelCoordinate.x,
-            y: pixelCoordinate.y
-          },
-          color: stroke,
-          r: radius + strokeWidth / 2
-        }), /*#__PURE__*/_jsx(Circle, {
-          c: {
-            x: pixelCoordinate.x,
-            y: pixelCoordinate.y
-          },
-          color: fill,
-          r: radius - strokeWidth / 2
-        })]
-      }), label && /*#__PURE__*/_jsx(LabelComponent, {
-        dataX: dataX,
-        dataY: dataY,
-        fill: fill,
-        font: labelFont,
-        offset: offset,
-        position: labelPosition,
-        x: pixelCoordinate.x,
-        y: pixelCoordinate.y,
-        children: label
-      })]
-    });
-  }
-  return /*#__PURE__*/_jsxs(Group, {
-    opacity: effectiveOpacity,
-    children: [strokeWidth > 0 && /*#__PURE__*/_jsx(Circle, {
-      c: animatedPoint,
-      color: stroke,
-      r: radius + strokeWidth / 2
-    }), /*#__PURE__*/_jsx(Circle, {
-      c: animatedPoint,
-      color: animatedFillColor,
-      r: radius - strokeWidth / 2
-    }), label && /*#__PURE__*/_jsx(LabelComponent, {
-      dataX: dataX,
-      dataY: dataY,
-      fill: fill,
-      font: labelFont,
-      offset: offset,
-      position: labelPosition,
-      x: pixelCoordinate.x,
-      y: pixelCoordinate.y,
-      children: label
-    })]
-  });
-});

package/esm/chart/point/index.js

@@ -1,2 +0,0 @@
-export * from './DefaultPointLabel';
-export * from './Point';

package/esm/chart/scrubber/DefaultScrubberBeacon.js

@@ -1,182 +0,0 @@
-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';
-import { unwrapAnimatedValue } from '../utils';
-import { projectPointWithSerializableScale } from '../utils/point';
-import { buildTransition, defaultTransition, getTransition } from '../utils/transition';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const defaultRadius = 5;
-const defaultStrokeWidth = 2;
-const pulseOpacityStart = 0.5;
-const pulseOpacityEnd = 0;
-const pulseRadiusStartMultiplier = 2;
-const pulseRadiusEndMultiplier = 3;
-const defaultPulseTransition = {
-  type: 'timing',
-  duration: 1600,
-  easing: Easing.bezier(0.0, 0.0, 0.0, 1.0)
-};
-const defaultPulseRepeatDelay = 400;
-export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    seriesId,
-    color: colorProp,
-    dataX,
-    dataY,
-    isIdle,
-    idlePulse,
-    animate = true,
-    transitions,
-    opacity: opacityProp = 1,
-    radius = defaultRadius,
-    stroke,
-    strokeWidth = defaultStrokeWidth
-  } = _ref;
-  const theme = useTheme();
-  const {
-    getSeries,
-    getXSerializableScale,
-    getYSerializableScale,
-    drawingArea
-  } = useCartesianChartContext();
-  const targetSeries = useMemo(() => getSeries(seriesId), [getSeries, seriesId]);
-  const xScale = useMemo(() => getXSerializableScale(targetSeries == null ? void 0 : targetSeries.xAxisId), [getXSerializableScale, targetSeries == null ? void 0 : targetSeries.xAxisId]);
-  const yScale = useMemo(() => getYSerializableScale(targetSeries == null ? void 0 : targetSeries.yAxisId), [getYSerializableScale, targetSeries == null ? void 0 : targetSeries.yAxisId]);
-  const color = useMemo(() => {
-    var _ref2;
-    return (_ref2 = colorProp != null ? colorProp : targetSeries == null ? void 0 : targetSeries.color) != null ? _ref2 : theme.color.fgPrimary;
-  }, [colorProp, targetSeries == null ? void 0 : targetSeries.color, theme.color.fgPrimary]);
-  const updateTransition = useMemo(() => getTransition(transitions == null ? void 0 : transitions.update, animate, defaultTransition), [transitions == null ? void 0 : transitions.update, animate]);
-  const pulseTransition = useMemo(() => {
-    var _transitions$pulse;
-    return (_transitions$pulse = transitions == null ? void 0 : transitions.pulse) != null ? _transitions$pulse : defaultPulseTransition;
-  }, [transitions == null ? void 0 : transitions.pulse]);
-  const pulseRepeatDelay = useMemo(() => {
-    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(null);
-  const animatedY = useSharedValue(null);
-
-  // Calculate the target point position - project data to pixels
-  const targetPoint = useDerivedValue(() => {
-    if (!xScale || !yScale) return {
-      x: 0,
-      y: 0
-    };
-    return projectPointWithSerializableScale({
-      x: unwrapAnimatedValue(dataX),
-      y: unwrapAnimatedValue(dataY),
-      xScale,
-      yScale
-    });
-  }, [dataX, dataY, xScale, yScale]);
-  useAnimatedReaction(() => {
-    return {
-      point: targetPoint.value,
-      isIdle: unwrapAnimatedValue(isIdle)
-    };
-  }, (current, previous) => {
-    // When animation is disabled, on initial render, or when we are starting,
-    // continuing, or finishing scrubbing we should immediately transition
-    if (!animate || previous === null || !previous.isIdle || !current.isIdle) {
-      animatedX.value = current.point.x;
-      animatedY.value = current.point.y;
-      return;
-    }
-    animatedX.value = buildTransition(current.point.x, updateTransition);
-    animatedY.value = buildTransition(current.point.y, updateTransition);
-  }, [animate, updateTransition]);
-
-  // Create animated point using the animated values
-  const animatedPoint = useDerivedValue(() => {
-    // If the animated values have not been set yet, return the target point
-    if (animatedX.value === null || animatedY.value === null) return targetPoint.value;
-    return {
-      x: animatedX.value,
-      y: animatedY.value
-    };
-  }, [targetPoint, animatedX, animatedY]);
-  useImperativeHandle(ref, () => ({
-    pulse: () => {
-      // Only trigger manual pulse when idlePulse is not enabled
-      if (!idlePulseShared.value) {
-        cancelAnimation(pulseOpacity);
-        cancelAnimation(pulseRadius);
-
-        // Manual pulse without delay
-        pulseOpacity.value = pulseOpacityStart;
-        pulseRadius.value = pulseRadiusStart;
-        pulseOpacity.value = buildTransition(pulseOpacityEnd, pulseTransition);
-        pulseRadius.value = buildTransition(pulseRadiusEnd, pulseTransition);
-      }
-    }
-  }), [idlePulseShared, pulseOpacity, pulseRadius, pulseTransition, pulseRadiusStart, pulseRadiusEnd]);
-
-  // Watch idlePulse changes and control continuous pulse
-  useAnimatedReaction(() => idlePulseShared.value, current => {
-    if (current) {
-      // Start continuous pulse when idlePulse is enabled
-      pulseOpacity.value = pulseOpacityStart;
-      pulseRadius.value = pulseRadiusStart;
-      pulseOpacity.value = withRepeat(withSequence(buildTransition(pulseOpacityEnd, pulseTransition), withDelay(pulseRepeatDelay, withTiming(pulseOpacityStart, {
-        duration: 0
-      }))), -1,
-      // infinite loop
-      false);
-      pulseRadius.value = withRepeat(withSequence(buildTransition(pulseRadiusEnd, pulseTransition), withDelay(pulseRepeatDelay, withTiming(pulseRadiusStart, {
-        duration: 0
-      }))), -1,
-      // infinite loop
-      false);
-    } else {
-      // Stop pulse when idlePulse is disabled
-      cancelAnimation(pulseOpacity);
-      cancelAnimation(pulseRadius);
-      pulseOpacity.value = pulseOpacityEnd;
-      pulseRadius.value = pulseRadiusStart;
-    }
-  }, [pulseTransition, pulseRepeatDelay, pulseRadiusStart, pulseRadiusEnd]);
-  const pulseVisibility = useDerivedValue(() => {
-    // Never pulse when scrubbing
-    if (!unwrapAnimatedValue(isIdle)) return 0;
-    return pulseOpacity.value;
-  }, [isIdle, pulseOpacity]);
-  const beaconOpacity = useDerivedValue(() => {
-    const point = targetPoint.value;
-    const isWithinDrawingArea = point.x >= drawingArea.x && point.x <= drawingArea.x + drawingArea.width && point.y >= drawingArea.y && point.y <= drawingArea.y + drawingArea.height;
-    const userOpacity = unwrapAnimatedValue(opacityProp);
-    return isWithinDrawingArea ? userOpacity : 0;
-  }, [targetPoint, drawingArea, opacityProp]);
-  return /*#__PURE__*/_jsxs(Group, {
-    opacity: beaconOpacity,
-    children: [/*#__PURE__*/_jsx(Circle, {
-      c: animatedPoint,
-      color: color,
-      opacity: pulseVisibility,
-      r: pulseRadius
-    }), /*#__PURE__*/_jsx(Circle, {
-      c: animatedPoint,
-      color: stroke != null ? stroke : theme.color.bg,
-      r: radius + strokeWidth / 2
-    }), /*#__PURE__*/_jsx(Circle, {
-      c: animatedPoint,
-      color: color,
-      r: radius - strokeWidth / 2
-    })]
-  });
-}));

package/esm/chart/scrubber/DefaultScrubberBeaconLabel.js

@@ -1,43 +0,0 @@
-const _excluded = ["background", "color", "elevated", "borderRadius", "font", "verticalAlignment", "inset", "label"];
-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); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import { memo } from 'react';
-import { useTheme } from '@coinbase/cds-mobile';
-import { ChartText } from '../text';
-import { jsx as _jsx } from "react/jsx-runtime";
-const labelVerticalInset = 3.5;
-const labelHorizontalInset = 4;
-/**
- * DefaultScrubberBeaconLabel is a special instance of ChartText used to label a series' scrubber beacon.
- */
-export const DefaultScrubberBeaconLabel = /*#__PURE__*/memo(_ref => {
-  let {
-      background,
-      color,
-      elevated = true,
-      borderRadius = 4,
-      font = 'label1',
-      verticalAlignment = 'middle',
-      inset = {
-        left: labelHorizontalInset,
-        right: labelHorizontalInset,
-        top: labelVerticalInset,
-        bottom: labelVerticalInset
-      },
-      label
-    } = _ref,
-    chartTextProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const theme = useTheme();
-  return /*#__PURE__*/_jsx(ChartText, _extends({
-    disableRepositioning: true,
-    background: background != null ? background : theme.color.bg,
-    borderRadius: borderRadius,
-    color: color != null ? color : theme.color.fgPrimary,
-    elevated: elevated,
-    font: font,
-    inset: inset,
-    verticalAlignment: verticalAlignment
-  }, chartTextProps, {
-    children: label
-  }));
-});