@coinbase/cds-mobile-visualization 0.0.0 → 3.4.0-beta.1

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

@@ -0,0 +1,77 @@
+import { useTheme } from '@coinbase/cds-mobile';
+import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
+import { LineChart } from '../LineChart';
+import { ReferenceLine } from '../ReferenceLine';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ReferenceLineStories = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Basic",
+      children: /*#__PURE__*/_jsxs(LineChart, {
+        showArea: true,
+        curve: "monotone",
+        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",
+          labelProps: {
+            horizontalAlignment: 'left',
+            dx: 6,
+            inset: 0
+          }
+        }), /*#__PURE__*/_jsx(ReferenceLine, {
+          dataY: 70,
+          label: "Horizontal Reference Line",
+          labelProps: {
+            verticalAlignment: 'bottom',
+            dy: -6,
+            horizontalAlignment: 'right',
+            inset: 0
+          }
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With Custom Label",
+      children: /*#__PURE__*/_jsx(LineChart, {
+        curve: "monotone",
+        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, {
+          dataY: 25,
+          label: "Liquidation",
+          labelPosition: "left",
+          labelProps: {
+            dx: 4,
+            borderRadius: 100,
+            inset: {
+              top: 4,
+              bottom: 4,
+              left: 8,
+              right: 8
+            },
+            horizontalAlignment: 'left',
+            color: "rgb(" + theme.spectrum.yellow70 + ")",
+            background: theme.color.accentSubtleYellow
+          },
+          stroke: theme.color.bgWarning
+        })
+      })
+    })]
+  });
+};
+export default ReferenceLineStories;

package/esm/chart/line/index.js

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

package/esm/chart/scrubber/Scrubber.js

@@ -0,0 +1,186 @@
+import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import { Animated } from 'react-native';
+import { useAnimatedProps, useSharedValue } from 'react-native-reanimated';
+import { G, Rect } from 'react-native-svg';
+import { useRefMap } from '@coinbase/cds-common/hooks/useRefMap';
+import { useTheme } from '@coinbase/cds-mobile';
+import { useCartesianChartContext } from '../ChartProvider';
+import { ReferenceLine } from '../line';
+import { useScrubberContext } from '../utils';
+import { ScrubberBeacon } from './ScrubberBeacon';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const AnimatedRect = Animated.createAnimatedComponent(Rect);
+
+/**
+ * Configuration for scrubber functionality across chart components.
+ * Provides consistent API with smart defaults and component customization.
+ */
+
+/**
+ * Unified component that manages all scrubber elements (beacons, line, labels)
+ * with intelligent collision detection and consistent positioning.
+ */
+export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    seriesIds,
+    hideLine,
+    label,
+    lineStroke,
+    labelProps,
+    BeaconComponent = ScrubberBeacon,
+    LineComponent = ReferenceLine,
+    hideOverlay,
+    overlayOffset = 2,
+    testID,
+    idlePulse
+  } = _ref;
+  const theme = useTheme();
+  const ScrubberBeaconRefs = useRefMap();
+
+  // Animated values for overlay positions (using react-native Animated)
+  const overlayX = useRef(new Animated.Value(0)).current;
+  const overlayWidth = useRef(new Animated.Value(0)).current;
+
+  // Reanimated shared value for scrubber line
+  const scrubberLineX = useSharedValue(0);
+  const {
+    scrubberPosition: scrubberPosition
+  } = useScrubberContext();
+  const {
+    getXScale,
+    getYScale,
+    getSeriesData,
+    getXAxis,
+    series,
+    drawingArea
+  } = useCartesianChartContext();
+  const getStackedSeriesData = getSeriesData; // getSeriesData now returns stacked data
+
+  // Animated props for scrubber line
+  const scrubberLineAnimatedProps = useAnimatedProps(() => ({
+    x1: scrubberLineX.value,
+    x2: scrubberLineX.value
+  }));
+
+  // Expose imperative handle with pulse method
+  useImperativeHandle(ref, () => ({
+    pulse: () => {
+      // Pulse all registered scrubber beacons
+      Object.values(ScrubberBeaconRefs.refs).forEach(beaconRef => {
+        beaconRef == null || beaconRef.pulse();
+      });
+    }
+  }));
+  const {
+    dataX,
+    dataIndex
+  } = useMemo(() => {
+    var _series$reduce;
+    const xScale = getXScale();
+    const xAxis = getXAxis();
+    if (!xScale) return {
+      dataX: undefined,
+      dataIndex: undefined
+    };
+    const maxDataLength = (_series$reduce = series == null ? void 0 : series.reduce((max, s) => {
+      var _seriesData$length;
+      const seriesData = getStackedSeriesData(s.id) || getSeriesData(s.id);
+      return Math.max(max, (_seriesData$length = seriesData == null ? void 0 : seriesData.length) != null ? _seriesData$length : 0);
+    }, 0)) != null ? _series$reduce : 0;
+    const dataIndex = scrubberPosition != null ? scrubberPosition : Math.max(0, maxDataLength - 1);
+
+    // Convert index to actual x value if axis has data
+    let dataX;
+    if (xAxis != null && xAxis.data && Array.isArray(xAxis.data) && xAxis.data[dataIndex] !== undefined) {
+      const dataValue = xAxis.data[dataIndex];
+      dataX = typeof dataValue === 'string' ? dataIndex : dataValue;
+    } else {
+      dataX = dataIndex;
+    }
+    return {
+      dataX,
+      dataIndex
+    };
+  }, [getXScale, getXAxis, series, scrubberPosition, getStackedSeriesData, getSeriesData]);
+  const beaconPositions = useMemo(() => {
+    var _series$filter$map$fi, _series$filter;
+    const xScale = getXScale();
+    if (!xScale || dataX === undefined || dataIndex === undefined) return [];
+    return (_series$filter$map$fi = series == null || (_series$filter = series.filter(s => {
+      if (seriesIds === undefined) return true;
+      return seriesIds.includes(s.id);
+    })) == null ? void 0 : _series$filter.map(s => {
+      const sourceData = getStackedSeriesData(s.id) || getSeriesData(s.id);
+      // Use dataIndex to get the y value from the series data array
+      const stuff = sourceData == null ? void 0 : sourceData[dataIndex];
+      let dataY;
+      if (Array.isArray(stuff)) {
+        dataY = stuff[stuff.length - 1];
+      } else if (typeof stuff === 'number') {
+        dataY = stuff;
+      }
+      if (dataY !== undefined) {
+        const resolvedLabel = typeof s.label === 'function' ? s.label(dataIndex) : s.label;
+        return {
+          x: dataX,
+          y: dataY,
+          label: resolvedLabel,
+          targetSeries: s
+        };
+      }
+    }).filter(beacon => beacon !== undefined)) != null ? _series$filter$map$fi : [];
+  }, [getXScale, dataX, dataIndex, series, seriesIds, getStackedSeriesData, getSeriesData]);
+  const createScrubberBeaconRef = useCallback(seriesId => {
+    return beaconRef => {
+      if (beaconRef) {
+        ScrubberBeaconRefs.registerRef(seriesId, beaconRef);
+      }
+    };
+  }, [ScrubberBeaconRefs]);
+  const defaultXScale = getXScale();
+  const pixelX = dataX !== undefined && defaultXScale ? defaultXScale(dataX) : undefined;
+  const memoizedScrubberLabel = useMemo(() => {
+    if (typeof label === 'function') {
+      if (dataIndex === undefined) return undefined;
+      return label(dataIndex);
+    }
+    return label;
+  }, [label, dataIndex]);
+  useEffect(() => {
+    if (pixelX !== undefined) {
+      scrubberLineX.value = pixelX;
+      overlayX.setValue(pixelX);
+      overlayWidth.setValue(drawingArea.x + drawingArea.width - pixelX + overlayOffset);
+    }
+  }, [pixelX, drawingArea, overlayOffset, scrubberLineX, overlayX, overlayWidth]);
+  if (!defaultXScale) return null;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [!hideOverlay && dataX !== undefined && scrubberPosition !== undefined && pixelX !== undefined && /*#__PURE__*/_jsx(AnimatedRect, {
+      fill: theme.color.bg,
+      height: drawingArea.height + overlayOffset * 2,
+      opacity: 0.8,
+      width: overlayWidth,
+      x: overlayX,
+      y: drawingArea.y - overlayOffset
+    }), !hideLine && scrubberPosition !== undefined && dataX !== undefined && /*#__PURE__*/_jsx(LineComponent, {
+      dataX: dataX,
+      label: memoizedScrubberLabel,
+      labelProps: labelProps,
+      stroke: lineStroke
+    }), beaconPositions.filter(beacon => beacon !== undefined).map(beacon => {
+      var _beacon$targetSeries;
+      return /*#__PURE__*/_jsx(G, {
+        "data-component": "scrubber-beacon",
+        children: /*#__PURE__*/_jsx(BeaconComponent, {
+          ref: createScrubberBeaconRef(beacon.targetSeries.id),
+          color: (_beacon$targetSeries = beacon.targetSeries) == null ? void 0 : _beacon$targetSeries.color,
+          dataX: beacon.x,
+          dataY: beacon.y,
+          idlePulse: idlePulse,
+          seriesId: beacon.targetSeries.id,
+          testID: testID ? testID + "-" + beacon.targetSeries.id + "-dot" : undefined
+        })
+      }, beacon.targetSeries.id);
+    })]
+  });
+}));

package/esm/chart/scrubber/ScrubberBeacon.js

@@ -0,0 +1,199 @@
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo } from 'react';
+import Reanimated, { cancelAnimation, useAnimatedProps, useSharedValue, withRepeat, withSequence, withTiming } from 'react-native-reanimated';
+import { Circle, G } from 'react-native-svg';
+import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
+import { useTheme } from '@coinbase/cds-mobile';
+import { useCartesianChartContext } from '../ChartProvider';
+import { projectPoint, useScrubberContext } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AnimatedCircle = Reanimated.createAnimatedComponent(Circle);
+const radius = 5;
+const glowRadius = 10;
+const pulseRadius = 15;
+const pulseDuration = 2000; // 2 seconds
+const singlePulseDuration = 1000; // 1 second
+
+/**
+ * The ScrubberBeacon is a special instance of a Point used to mark the scrubber's position on a specific series.
+ */
+export const ScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  var _pixelCoordinate$x, _pixelCoordinate$y, _ref2;
+  let {
+    seriesId,
+    dataX: dataXProp,
+    dataY: dataYProp,
+    color,
+    testID,
+    idlePulse,
+    opacity = 1
+  } = _ref;
+  const theme = useTheme();
+  const {
+    getSeries,
+    getXScale,
+    getYScale,
+    getSeriesData,
+    animate
+  } = useCartesianChartContext();
+  const {
+    scrubberPosition
+  } = useScrubberContext();
+  const targetSeries = getSeries(seriesId);
+  const sourceData = getSeriesData(seriesId);
+  const xScale = getXScale();
+  const yScale = getYScale(targetSeries == null ? void 0 : targetSeries.yAxisId);
+  const isIdleState = scrubberPosition === undefined;
+  const {
+    dataX,
+    dataY
+  } = useMemo(() => {
+    let x;
+    let y;
+    if (xScale && yScale) {
+      if (dataXProp !== undefined && dataYProp !== undefined && !isNaN(dataYProp) && !isNaN(dataXProp)) {
+        // Use direct coordinates if provided
+        x = dataXProp;
+        y = dataYProp;
+      } else if (sourceData && scrubberPosition != null && scrubberPosition >= 0 && scrubberPosition < sourceData.length) {
+        // Use series data at highlight index
+        x = scrubberPosition;
+        const dataValue = sourceData[scrubberPosition];
+        if (typeof dataValue === 'number') {
+          y = dataValue;
+        } else if (Array.isArray(dataValue)) {
+          const validValues = dataValue.filter(val => val !== null);
+          if (validValues.length >= 2) {
+            y = validValues[1];
+          }
+        }
+      }
+    }
+    return {
+      dataX: x,
+      dataY: y
+    };
+  }, [dataXProp, dataYProp, sourceData, scrubberPosition, xScale, yScale]);
+  const previousIdleState = usePreviousValue(!!isIdleState);
+  const pixelCoordinate = useMemo(() => {
+    if (!xScale || !yScale || dataX === undefined || dataY === undefined) return undefined;
+    const point = projectPoint({
+      x: dataX,
+      y: dataY,
+      xScale,
+      yScale
+    });
+
+    // Return undefined if coordinates are invalid
+    if (!point || isNaN(point.x) || isNaN(point.y)) return undefined;
+    return point;
+  }, [xScale, yScale, dataX, dataY]);
+  const animatedX = useSharedValue((_pixelCoordinate$x = pixelCoordinate == null ? void 0 : pixelCoordinate.x) != null ? _pixelCoordinate$x : 0);
+  const animatedY = useSharedValue((_pixelCoordinate$y = pixelCoordinate == null ? void 0 : pixelCoordinate.y) != null ? _pixelCoordinate$y : 0);
+  const pulseOpacity = useSharedValue(0);
+  useImperativeHandle(ref, () => ({
+    pulse: () => {
+      if (isIdleState && animate) {
+        pulseOpacity.value = 0.1;
+        pulseOpacity.value = withTiming(0, {
+          duration: singlePulseDuration
+        });
+      }
+    }
+  }));
+  useEffect(() => {
+    const shouldPulse = animate && isIdleState && idlePulse;
+    if (shouldPulse) {
+      pulseOpacity.value = withRepeat(withSequence(withTiming(0.1, {
+        duration: pulseDuration / 2
+      }), withTiming(0, {
+        duration: pulseDuration / 2
+      })), -1,
+      // loop
+      false);
+    } else {
+      cancelAnimation(pulseOpacity);
+      pulseOpacity.value = withTiming(0, {
+        duration: 200
+      });
+    }
+  }, [animate, isIdleState, idlePulse, pulseOpacity]);
+
+  // Update position when data coordinates change
+  useEffect(() => {
+    if (!pixelCoordinate) return;
+
+    // When scrubbing or animations disabled: snap immediately
+    if (!isIdleState || !animate || !previousIdleState) {
+      // Cancel any ongoing animations before snapping
+      cancelAnimation(animatedX);
+      cancelAnimation(animatedY);
+      animatedX.value = pixelCoordinate.x;
+      animatedY.value = pixelCoordinate.y;
+    } else {
+      // When idle with animations enabled: animate smoothly
+      animatedX.value = withTiming(pixelCoordinate.x, {
+        duration: 300
+      });
+      animatedY.value = withTiming(pixelCoordinate.y, {
+        duration: 300
+      });
+    }
+  }, [pixelCoordinate, isIdleState, animate, previousIdleState, animatedX, animatedY]);
+
+  // Animated props for all circles in idle state
+  const glowAnimatedProps = useAnimatedProps(() => ({
+    cx: animatedX.value,
+    cy: animatedY.value
+  }));
+  const pointAnimatedProps = useAnimatedProps(() => ({
+    cx: animatedX.value,
+    cy: animatedY.value
+  }));
+  const pulseAnimatedProps = useAnimatedProps(() => ({
+    cx: animatedX.value,
+    cy: animatedY.value,
+    opacity: pulseOpacity.value
+  }));
+  if (!pixelCoordinate) return;
+  const pointColor = (_ref2 = color != null ? color : targetSeries == null ? void 0 : targetSeries.color) != null ? _ref2 : theme.color.fgPrimary;
+  if (!isIdleState) {
+    return /*#__PURE__*/_jsxs(G, {
+      opacity: opacity,
+      testID: testID,
+      children: [/*#__PURE__*/_jsx(Circle, {
+        cx: pixelCoordinate.x,
+        cy: pixelCoordinate.y,
+        fill: pointColor,
+        opacity: 0.15,
+        r: glowRadius
+      }), /*#__PURE__*/_jsx(Circle, {
+        cx: pixelCoordinate.x,
+        cy: pixelCoordinate.y,
+        fill: pointColor,
+        r: radius,
+        stroke: theme.color.bg,
+        strokeWidth: 2
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs(G, {
+    opacity: opacity,
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(AnimatedCircle, {
+      animatedProps: glowAnimatedProps,
+      fill: pointColor,
+      opacity: 0.15,
+      r: glowRadius
+    }), /*#__PURE__*/_jsx(AnimatedCircle, {
+      animatedProps: pulseAnimatedProps,
+      fill: pointColor,
+      r: pulseRadius
+    }), /*#__PURE__*/_jsx(AnimatedCircle, {
+      animatedProps: pointAnimatedProps,
+      fill: pointColor,
+      r: radius,
+      stroke: theme.color.bg,
+      strokeWidth: 2
+    })]
+  });
+}));

package/esm/chart/scrubber/ScrubberProvider.js

@@ -0,0 +1,143 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { Platform } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { runOnJS } from 'react-native-reanimated';
+import { Haptics } from '@coinbase/cds-mobile/utils/haptics';
+import { useCartesianChartContext } from '../ChartProvider';
+import { isCategoricalScale, ScrubberContext } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A component which encapsulates the ScrubberContext.
+ * It depends on a ChartContext in order to provide accurate touch tracking.
+ */
+export const ScrubberProvider = _ref => {
+  let {
+    children,
+    enableScrubbing,
+    onScrubberPositionChange,
+    allowOverflowGestures
+  } = _ref;
+  const chartContext = useCartesianChartContext();
+  if (!chartContext) {
+    throw new Error('ScrubberProvider must be used within a ChartContext');
+  }
+  const {
+    getXScale,
+    getXAxis,
+    series
+  } = chartContext;
+  const [scrubberPosition, setScrubberPosition] = useState(undefined);
+  const getDataIndexFromX = useCallback(touchX => {
+    const xScale = getXScale();
+    const xAxis = getXAxis();
+    if (!xScale || !xAxis) return 0;
+    if (isCategoricalScale(xScale)) {
+      var _ref2, _xScale$domain, _xScale$bandwidth;
+      const categories = (_ref2 = (_xScale$domain = xScale.domain == null ? void 0 : xScale.domain()) != null ? _xScale$domain : xAxis.data) != null ? _ref2 : [];
+      const bandwidth = (_xScale$bandwidth = xScale.bandwidth == null ? void 0 : xScale.bandwidth()) != null ? _xScale$bandwidth : 0;
+      let closestIndex = 0;
+      let closestDistance = Infinity;
+      for (let i = 0; i < categories.length; i++) {
+        const xPos = xScale(i);
+        if (xPos !== undefined) {
+          const distance = Math.abs(touchX - (xPos + bandwidth / 2));
+          if (distance < closestDistance) {
+            closestDistance = distance;
+            closestIndex = i;
+          }
+        }
+      }
+      return closestIndex;
+    } else {
+      // For numeric scales with axis data, find the nearest data point
+      const axisData = xAxis.data;
+      if (axisData && Array.isArray(axisData) && typeof axisData[0] === 'number') {
+        // We have numeric axis data - find the closest data point
+        const numericData = axisData;
+        let closestIndex = 0;
+        let closestDistance = Infinity;
+        for (let i = 0; i < numericData.length; i++) {
+          const xValue = numericData[i];
+          const xPos = xScale(xValue);
+          if (xPos !== undefined) {
+            const distance = Math.abs(touchX - xPos);
+            if (distance < closestDistance) {
+              closestDistance = distance;
+              closestIndex = i;
+            }
+          }
+        }
+        return closestIndex;
+      } else {
+        var _domain$min, _domain$max;
+        const xValue = xScale.invert(touchX);
+        const dataIndex = Math.round(xValue);
+        const domain = xAxis.domain;
+        return Math.max((_domain$min = domain.min) != null ? _domain$min : 0, Math.min(dataIndex, (_domain$max = domain.max) != null ? _domain$max : 0));
+      }
+    }
+  }, [getXScale, getXAxis]);
+  const handlePositionUpdate = useCallback(x => {
+    if (!enableScrubbing || !series || series.length === 0) return;
+    const dataIndex = getDataIndexFromX(x);
+    if (dataIndex !== scrubberPosition) {
+      setScrubberPosition(dataIndex);
+      onScrubberPositionChange == null || onScrubberPositionChange(dataIndex);
+    }
+  }, [enableScrubbing, series, getDataIndexFromX, scrubberPosition, onScrubberPositionChange]);
+  const handleInteractionEnd = useCallback(() => {
+    if (!enableScrubbing) return;
+    setScrubberPosition(undefined);
+    onScrubberPositionChange == null || onScrubberPositionChange(undefined);
+  }, [enableScrubbing, onScrubberPositionChange]);
+
+  // Gesture handler callbacks
+  const handleOnStartJsThread = useCallback(() => {
+    void Haptics.lightImpact();
+    // Could add onScrubStart callback here if needed
+  }, []);
+  const handleOnEndOrCancelledJsThread = useCallback(() => {
+    handleInteractionEnd();
+  }, [handleInteractionEnd]);
+  const handleOnUpdateJsThread = useCallback(x => {
+    handlePositionUpdate(x);
+  }, [handlePositionUpdate]);
+  const handleOnEndJsThread = useCallback(() => {
+    void Haptics.lightImpact();
+    handleOnEndOrCancelledJsThread();
+  }, [handleOnEndOrCancelledJsThread]);
+
+  // Create the long press pan gesture
+  const longPressGesture = useMemo(() => Gesture.Pan().activateAfterLongPress(110).shouldCancelWhenOutside(!allowOverflowGestures).onStart(function onStart(event) {
+    runOnJS(handleOnStartJsThread)();
+
+    // Android does not trigger onUpdate when the gesture starts. This achieves consistent behavior across both iOS and Android
+    if (Platform.OS === 'android') {
+      runOnJS(handleOnUpdateJsThread)(event.x);
+    }
+  }).onUpdate(function onUpdate(event) {
+    runOnJS(handleOnUpdateJsThread)(event.x);
+  }).onEnd(function onEnd() {
+    runOnJS(handleOnEndJsThread)();
+  }).onTouchesCancelled(function onTouchesCancelled() {
+    runOnJS(handleOnEndOrCancelledJsThread)();
+  }), [allowOverflowGestures, handleOnStartJsThread, handleOnUpdateJsThread, handleOnEndJsThread, handleOnEndOrCancelledJsThread]);
+  const contextValue = useMemo(() => ({
+    enableScrubbing: !!enableScrubbing,
+    scrubberPosition,
+    onScrubberPositionChange: setScrubberPosition
+  }), [enableScrubbing, scrubberPosition]);
+  const content = /*#__PURE__*/_jsx(ScrubberContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+
+  // Wrap with gesture handler only if scrubbing is enabled
+  if (enableScrubbing) {
+    return /*#__PURE__*/_jsx(GestureDetector, {
+      gesture: longPressGesture,
+      children: content
+    });
+  }
+  return content;
+};

package/esm/chart/scrubber/index.js

@@ -0,0 +1,2 @@
+// Only export Scrubber component
+export * from './Scrubber';