@coinbase/cds-web 8.66.1 → 9.0.0-rc.1

package/esm/visualizations/sparkline/sparkline-interactive/SparklineInteractivePaths.js

@@ -0,0 +1,56 @@
+import React, { memo, useCallback, useRef } from 'react';
+import { chartCompactHeight, chartHeight } from '@coinbase/cds-common/tokens/sparkline';
+import { SparklineInteractiveAnimatedPath } from './SparklineInteractiveAnimatedPath';
+import { SparklineInteractiveTimeseriesPaths } from './SparklineInteractiveTimeseriesPaths';
+import { useSparklineInteractiveConstants } from './useSparklineInteractiveConstants';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+function SparklineInteractivePathsWithGeneric(_ref) {
+  let {
+    showHoverData,
+    fill,
+    fillType = 'gradient',
+    path,
+    area,
+    selectedPeriod,
+    yAxisScalingFactor,
+    strokeColor,
+    hoverData,
+    compact
+  } = _ref;
+  // Map 'dotted' to 'gradientDotted' for Sparkline
+  const sparklineFillType = fillType === 'dotted' ? 'gradientDotted' : 'gradient';
+  const hoverPathRef = useRef(undefined);
+  const hoverAreaRef = useRef(undefined);
+  const shouldShowFill = !!fill;
+  const {
+    chartWidth
+  } = useSparklineInteractiveConstants();
+  const innerSparklineInteractiveHeight = compact ? chartCompactHeight : chartHeight;
+  const handleMultiTimeseriesRender = useCallback(_ref2 => {
+    let {
+      area: timeseriesArea,
+      path: timeseriesPath
+    } = _ref2;
+    hoverPathRef.current = timeseriesPath;
+    hoverAreaRef.current = timeseriesArea;
+  }, []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [!showHoverData && /*#__PURE__*/_jsx(SparklineInteractiveAnimatedPath, {
+      area: shouldShowFill ? area : undefined,
+      color: strokeColor,
+      d: path,
+      fillType: sparklineFillType,
+      initialArea: hoverAreaRef.current,
+      initialPath: hoverPathRef.current,
+      selectedPeriod: selectedPeriod,
+      yAxisScalingFactor: yAxisScalingFactor
+    }), !!showHoverData && /*#__PURE__*/_jsx(SparklineInteractiveTimeseriesPaths, {
+      data: hoverData === null || hoverData === void 0 ? void 0 : hoverData[selectedPeriod],
+      height: innerSparklineInteractiveHeight,
+      initialPath: path,
+      onRender: handleMultiTimeseriesRender,
+      width: chartWidth
+    })]
+  });
+}
+export const SparklineInteractivePaths = /*#__PURE__*/memo(SparklineInteractivePathsWithGeneric);

package/esm/visualizations/sparkline/sparkline-interactive/SparklineInteractivePeriodSelector.js

@@ -0,0 +1,71 @@
+import React, { memo, useCallback, useMemo } from 'react';
+import { periodLabelMap } from '@coinbase/cds-common/tokens/sparkline';
+import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
+import { useTheme } from '../../../hooks/useTheme';
+import { Box, HStack } from '../../../layout';
+import { Pressable } from '../../../system/Pressable';
+import { Text } from '../../../typography/Text';
+import { jsx as _jsx } from "react/jsx-runtime";
+function SparklineInteractivePeriodWithGeneric(_ref) {
+  var _periodLabelMap$perio;
+  let {
+    period,
+    selectedPeriod,
+    setSelectedPeriod,
+    color
+  } = _ref;
+  const periodLabel = (_periodLabelMap$perio = periodLabelMap[period.label]) !== null && _periodLabelMap$perio !== void 0 ? _periodLabelMap$perio : period.label;
+  const isSelected = period.value === selectedPeriod;
+  const handleOnClick = useCallback(() => {
+    setSelectedPeriod(period.value);
+  }, [period, setSelectedPeriod]);
+  const background = useMemo(() => isSelected ? 'bgPrimaryWash' : 'transparent', [isSelected]);
+  return /*#__PURE__*/_jsx(Box, {
+    alignItems: "center",
+    height: "fit-content",
+    justifyContent: "center",
+    children: /*#__PURE__*/_jsx(Pressable, {
+      accessibilityLabel: periodLabel,
+      "aria-pressed": isSelected,
+      background: background,
+      borderRadius: 200,
+      onClick: handleOnClick,
+      children: /*#__PURE__*/_jsx(Text, {
+        noWrap: true,
+        as: "span",
+        dangerouslySetColor: isSelected ? color : 'var(--color-fgMuted)',
+        display: "block",
+        font: "label1",
+        paddingX: 2,
+        paddingY: 1,
+        children: period.label
+      })
+    })
+  });
+}
+const SparklineInteractivePeriod = /*#__PURE__*/memo(SparklineInteractivePeriodWithGeneric);
+export const SparklineInteractivePeriodSelector = _ref2 => {
+  let {
+    selectedPeriod,
+    setSelectedPeriod,
+    periods,
+    color
+  } = _ref2;
+  const theme = useTheme();
+  const accessibleForeground = color !== 'auto' ? color : getAccessibleColor({
+    background: theme.color.bg,
+    foreground: 'auto',
+    enhanced: true
+  });
+  return /*#__PURE__*/_jsx(HStack, {
+    justifyContent: "space-between",
+    paddingX: 1,
+    width: "100%",
+    children: periods.map(period => /*#__PURE__*/_jsx(SparklineInteractivePeriod, {
+      color: accessibleForeground,
+      period: period,
+      selectedPeriod: selectedPeriod,
+      setSelectedPeriod: setSelectedPeriod
+    }, period.value))
+  });
+};

package/esm/visualizations/sparkline/sparkline-interactive/SparklineInteractiveProvider.js

@@ -0,0 +1,45 @@
+import React, { createContext, memo, useCallback, useContext, useMemo, useState } from 'react';
+import { noop } from '@coinbase/cds-utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const SparklineInteractiveContext = /*#__PURE__*/createContext({
+  isFallbackVisible: true,
+  compact: false,
+  width: 0,
+  height: 0,
+  showFallback: noop,
+  hideFallback: noop,
+  setWidth: noop,
+  setHeight: noop
+});
+export const SparklineInteractiveProvider = /*#__PURE__*/memo(_ref => {
+  let {
+    children,
+    compact = false
+  } = _ref;
+  const [isFallbackVisible, setIsFallbackVisible] = useState(true);
+  const [width, setWidth] = useState(0);
+  const [height, setHeight] = useState(0);
+  const showFallback = useCallback(() => {
+    setIsFallbackVisible(true);
+  }, [setIsFallbackVisible]);
+  const hideFallback = useCallback(() => {
+    setIsFallbackVisible(false);
+  }, [setIsFallbackVisible]);
+  const value = useMemo(() => ({
+    compact,
+    width,
+    height,
+    showFallback,
+    hideFallback,
+    isFallbackVisible,
+    setHeight,
+    setWidth
+  }), [compact, height, hideFallback, isFallbackVisible, showFallback, width]);
+  return /*#__PURE__*/_jsx(SparklineInteractiveContext.Provider, {
+    value: value,
+    children: children
+  });
+});
+export function useSparklineInteractiveContext() {
+  return useContext(SparklineInteractiveContext);
+}

package/esm/visualizations/sparkline/sparkline-interactive/SparklineInteractiveScrubHandler.css

@@ -0,0 +1,5 @@
+@layer cds{.insetFocusRingCss-i1i8rbea{position:relative;}.insetFocusRingCss-i1i8rbea:focus{outline:none;}.insetFocusRingCss-i1i8rbea:focus-visible{outline-style:solid;outline-width:2px;outline-color:var(--color-bgPrimary);outline-offset:0;}
+.scrubHandlerContainerCss-s1b6sasl{position:relative;width:100%;height:100%;}
+.scrubHandlerCss-s1vgyxo6.cds-sparkline--scrubhandler{position:absolute;width:100%;height:100%;top:0;left:0;}
+.fadeInMaskCss-f1jemchj.fadeInMaskCss-f1jemchj{-webkit-animation:cdsSparklineInteractiveScrubFadeInMask-fadeInMaskCss-f1jemchj 200ms cubic-bezier(0.6,0,0.15,1);animation:cdsSparklineInteractiveScrubFadeInMask-fadeInMaskCss-f1jemchj 200ms cubic-bezier(0.6,0,0.15,1);opacity:0.8;}@-webkit-keyframes cdsSparklineInteractiveScrubFadeInMask-fadeInMaskCss-f1jemchj{0%{opacity:0;}100%{opacity:0.8;}}@keyframes cdsSparklineInteractiveScrubFadeInMask-fadeInMaskCss-f1jemchj{0%{opacity:0;}100%{opacity:0.8;}}
+.fadeOutMaskCss-f1s7f7a7.fadeOutMaskCss-f1s7f7a7{-webkit-animation:cdsSparklineInteractiveScrubFadeOutMask-fadeOutMaskCss-f1s7f7a7 200ms cubic-bezier(0.6,0,0.15,1);animation:cdsSparklineInteractiveScrubFadeOutMask-fadeOutMaskCss-f1s7f7a7 200ms cubic-bezier(0.6,0,0.15,1);opacity:0;}@-webkit-keyframes cdsSparklineInteractiveScrubFadeOutMask-fadeOutMaskCss-f1s7f7a7{0%{opacity:0.8;}100%{opacity:0;}}@keyframes cdsSparklineInteractiveScrubFadeOutMask-fadeOutMaskCss-f1s7f7a7{0%{opacity:0.8;}100%{opacity:0;}}}

package/esm/visualizations/sparkline/sparkline-interactive/SparklineInteractiveScrubHandler.js

@@ -0,0 +1,201 @@
+import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { fadeDuration, maskOpacity } from '@coinbase/cds-common/tokens/sparkline';
+import { debounce } from '@coinbase/cds-common/utils/debounce';
+import { noop } from '@coinbase/cds-utils';
+import { cubicBezier } from '../../../animation/convertMotionConfig';
+import { useDimensions } from '../../../hooks/useDimensions';
+import { cx } from '../../../index';
+import { fadeIn, fadeOut } from './fade';
+import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
+import { useSparklineInteractiveScrubContext } from './SparklineInteractiveScrubProvider';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const scrubHandlerStaticClassName = 'cds-sparkline--scrubhandler';
+const insetFocusRingCss = "insetFocusRingCss-i1i8rbea";
+const scrubHandlerContainerCss = "scrubHandlerContainerCss-s1b6sasl";
+const scrubHandlerCss = "scrubHandlerCss-s1vgyxo6";
+const fadeInMaskCss = "fadeInMaskCss-f1jemchj";
+const fadeOutMaskCss = "fadeOutMaskCss-f1s7f7a7";
+
+// Number of steps for keyboard users to navigate through the sparkline
+const STEPS = 100;
+const STEPS_ARRAY = Array.from(Array(STEPS).keys());
+const padding = 8;
+function fadeOutMask(domNode) {
+  domNode === null || domNode === void 0 || domNode.classList.remove(fadeInMaskCss);
+  domNode === null || domNode === void 0 || domNode.classList.add(fadeOutMaskCss);
+}
+export function fadeInMask(domNode) {
+  domNode === null || domNode === void 0 || domNode.classList.add(fadeInMaskCss);
+  domNode === null || domNode === void 0 || domNode.classList.remove(fadeOutMaskCss);
+}
+const SparklineInteractiveScrubHandlerWithGeneric = _ref => {
+  let {
+    onScrubEnd = noop,
+    onScrubStart = noop,
+    children,
+    disabled,
+    onScrub,
+    getMarker,
+    selectedPeriod,
+    formatHoverDate,
+    formatHoverPrice
+  } = _ref;
+  const containerRef = useRef(null);
+  const {
+    lineDOMNode,
+    maskDOMNode,
+    hoverDateDOMNode,
+    hoverPriceDOMNode
+  } = useSparklineInteractiveScrubContext();
+  const {
+    width: chartWidth
+  } = useSparklineInteractiveContext();
+  const scrubHandlerCssWithFocus = cx(scrubHandlerStaticClassName, scrubHandlerCss, insetFocusRingCss);
+  const [xPos, setXPos] = useState(0);
+  const {
+    width,
+    observe
+  } = useDimensions();
+  const steps = useMemo(() => {
+    const sparklineSteps = STEPS_ARRAY.map(step => {
+      return Math.floor(Number(width) / STEPS * step) || 1;
+    });
+
+    // Make sure each step is within the sparkline container
+    sparklineSteps[0] = 1;
+    sparklineSteps[STEPS] = Math.floor(width) - 1;
+    return sparklineSteps;
+  }, [width]);
+  const debouncedUpdatePositionHandler = useMemo(() => debounce(position => {
+    setXPos(position);
+  }, 20), [setXPos]);
+
+  // eslint-disable-next-line react-hooks/use-memo
+  const safelyUpdatePosition = useCallback(debouncedUpdatePositionHandler, [debouncedUpdatePositionHandler]);
+
+  // This method is used by mouseMove and keyboard events
+  const updateScrubber = useCallback(position => {
+    const dataPoint = getMarker(position);
+    if (dataPoint) {
+      onScrub === null || onScrub === void 0 || onScrub({
+        point: dataPoint,
+        period: selectedPeriod
+      });
+      if (lineDOMNode) {
+        lineDOMNode.style.transform = "translateX(".concat(position, "px)");
+      }
+      if (maskDOMNode) {
+        maskDOMNode.style.transform = "translateX(".concat(position, "px)");
+      }
+      if (hoverDateDOMNode && formatHoverDate) {
+        fadeIn(hoverDateDOMNode);
+        hoverDateDOMNode.innerText = formatHoverDate(dataPoint.date, selectedPeriod);
+        const textWidth = hoverDateDOMNode.offsetWidth;
+        const halfTextWidth = textWidth / 2;
+        let textPos = position - halfTextWidth;
+        textPos = Math.max(padding, textPos);
+        textPos = Math.min(textPos, chartWidth - textWidth - padding);
+        hoverDateDOMNode.style.transform = "translateX(".concat(textPos, "px)");
+      }
+      if (hoverPriceDOMNode && formatHoverPrice) {
+        fadeIn(hoverPriceDOMNode);
+        hoverPriceDOMNode.innerText = formatHoverPrice(dataPoint.value);
+        const textWidth = hoverPriceDOMNode.offsetWidth;
+        const halfTextWidth = textWidth / 2;
+        let textPos = position - halfTextWidth;
+        textPos = Math.max(padding, textPos);
+        textPos = Math.min(textPos, chartWidth - textWidth - padding);
+        hoverPriceDOMNode.style.transform = "translateX(".concat(textPos, "px)");
+      }
+    }
+
+    /**
+     *  Keep track of the position for a seamless
+     *  transition from MouseMove to Keyboard interaction
+     */
+    safelyUpdatePosition(position);
+  }, [getMarker, safelyUpdatePosition, onScrub, selectedPeriod, lineDOMNode, maskDOMNode, hoverDateDOMNode, formatHoverDate, formatHoverPrice, hoverPriceDOMNode, chartWidth]);
+
+  // Show the scrub UI
+  const handleMouseEnter = useCallback(() => {
+    onScrubStart === null || onScrubStart === void 0 || onScrubStart();
+    fadeIn(lineDOMNode);
+    fadeInMask(maskDOMNode);
+  }, [lineDOMNode, maskDOMNode, onScrubStart]);
+  const handleMouseMove = useCallback(event => {
+    var _containerRef$current, _containerRef$current2;
+    const xPosition = Math.max(0, event.clientX - ((_containerRef$current = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.getBoundingClientRect().left) !== null && _containerRef$current !== void 0 ? _containerRef$current : 0));
+
+    // Update UI
+    updateScrubber(xPosition);
+  }, [updateScrubber]);
+  const getPosition = useCallback((direction, multiSkip) => {
+    // Use the xPos to find the nearest step
+    const closestStep = steps.reduce((prev, curr) => {
+      return Math.abs(curr - xPos) < Math.abs(prev - xPos) ? curr : prev;
+    });
+    // The index of the closest step
+    const currentIndex = steps.findIndex(pos => pos === closestStep);
+    // Holding the shift key allows users to jump 10 steps
+    const stepIncrement = multiSkip ? 10 : 1;
+
+    // The location to move to
+    const nextLocation = currentIndex + (direction === 'next' ? stepIncrement : -stepIncrement);
+
+    // return the location if we're within bounds of the chart
+    return nextLocation > 0 && nextLocation < STEPS ? nextLocation : null;
+  }, [steps, xPos]);
+  const handleKeyDown = useCallback(e => {
+    const multiSkip = !!e.shiftKey;
+
+    // Go to the correct step
+    if (e.key === 'ArrowRight') {
+      var _getPosition;
+      e.preventDefault();
+      const nextStep = (_getPosition = getPosition('next', multiSkip)) !== null && _getPosition !== void 0 ? _getPosition : STEPS;
+      updateScrubber(steps[nextStep] - 1);
+    }
+    if (e.key === 'ArrowLeft') {
+      var _getPosition2;
+      e.preventDefault();
+      const previousStep = (_getPosition2 = getPosition('previous', multiSkip)) !== null && _getPosition2 !== void 0 ? _getPosition2 : 0;
+      updateScrubber(steps[previousStep]);
+    }
+
+    // Jump to beginning or end
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      updateScrubber(steps[STEPS] - 1);
+    }
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      updateScrubber(0);
+    }
+  }, [getPosition, updateScrubber, steps]);
+  const handleMouseLeave = useCallback(() => {
+    onScrubEnd === null || onScrubEnd === void 0 || onScrubEnd();
+    fadeOut(lineDOMNode);
+    fadeOutMask(maskDOMNode);
+    fadeOut(hoverDateDOMNode);
+    fadeOut(hoverPriceDOMNode);
+  }, [hoverDateDOMNode, lineDOMNode, maskDOMNode, hoverPriceDOMNode, onScrubEnd]);
+  return /*#__PURE__*/_jsxs("div", {
+    ref: containerRef,
+    className: scrubHandlerContainerCss,
+    children: [children, !disabled && /*#__PURE__*/_jsx("div", {
+      ref: observe,
+      "aria-label": "Price chart (use arrow keys to adjust view)",
+      className: scrubHandlerCssWithFocus,
+      onBlur: handleMouseLeave,
+      onFocus: handleMouseEnter,
+      onKeyDown: handleKeyDown,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onMouseMove: handleMouseMove,
+      role: "button",
+      tabIndex: 0
+    })]
+  });
+};
+export const SparklineInteractiveScrubHandler = /*#__PURE__*/memo(SparklineInteractiveScrubHandlerWithGeneric);
+import "./SparklineInteractiveScrubHandler.css";

package/esm/visualizations/sparkline/sparkline-interactive/SparklineInteractiveScrubProvider.js

@@ -0,0 +1,39 @@
+import React, { createContext, memo, useContext, useMemo, useState } from 'react';
+import { noop } from '@coinbase/cds-utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const SparklineInteractiveScrubContext = /*#__PURE__*/createContext({
+  setLineDOMNode: noop,
+  setMaskDOMNode: noop,
+  setHoverDateDOMNode: noop,
+  setHoverPriceDOMNode: noop,
+  lineDOMNode: null,
+  maskDOMNode: null,
+  hoverDateDOMNode: null,
+  hoverPriceDOMNode: null
+});
+export const SparklineInteractiveScrubProvider = /*#__PURE__*/memo(_ref => {
+  let {
+    children
+  } = _ref;
+  const [lineDOMNode, setLineDOMNode] = useState(null);
+  const [maskDOMNode, setMaskDOMNode] = useState(null);
+  const [hoverDateDOMNode, setHoverDateDOMNode] = useState(null);
+  const [hoverPriceDOMNode, setHoverPriceDOMNode] = useState(null);
+  const value = useMemo(() => ({
+    setLineDOMNode,
+    setMaskDOMNode,
+    lineDOMNode,
+    maskDOMNode,
+    hoverDateDOMNode,
+    setHoverDateDOMNode,
+    setHoverPriceDOMNode,
+    hoverPriceDOMNode
+  }), [hoverDateDOMNode, lineDOMNode, maskDOMNode, hoverPriceDOMNode]);
+  return /*#__PURE__*/_jsx(SparklineInteractiveScrubContext.Provider, {
+    value: value,
+    children: children
+  });
+});
+export function useSparklineInteractiveScrubContext() {
+  return useContext(SparklineInteractiveScrubContext);
+}

package/esm/visualizations/sparkline/sparkline-interactive/SparklineInteractiveTimeseriesPaths.js

@@ -0,0 +1,92 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { animatedPathConfig } from '@coinbase/cds-common/animation/sparkline';
+import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
+import { getSparklineTransform } from '@coinbase/cds-common/visualizations/getSparklineTransform';
+import { useTimeseriesPaths } from '@coinbase/cds-common/visualizations/useTimeseriesPaths';
+import { interpolatePath } from 'd3-interpolate-path';
+import { select } from 'd3-selection';
+import { useTheme } from '../../../hooks/useTheme';
+import { SparklinePath } from '../SparklinePath';
+import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  duration,
+  easing
+} = animatedPathConfig;
+const TimeseriesPath = /*#__PURE__*/memo(_ref => {
+  let {
+    timeseries,
+    lineFn,
+    initialPath,
+    onRender,
+    areaFn
+  } = _ref;
+  const theme = useTheme();
+  const pathRef = useRef(null);
+  const {
+    strokeColor
+  } = timeseries;
+  const lineColor = strokeColor !== 'auto' ? strokeColor : getAccessibleColor({
+    background: theme.color.bg,
+    foreground: 'auto',
+    usage: 'graphic'
+  });
+  const newPath = useMemo(() => lineFn(timeseries.points), [lineFn, timeseries.points]);
+  const newArea = useMemo(() => onRender ? areaFn(timeseries.points) : null, [areaFn, onRender, timeseries.points]);
+  const playAnimation = useCallback(() => {
+    select(pathRef.current).transition().duration(duration).ease(easing).attrTween('d', function tween() {
+      const current = newPath;
+      return interpolatePath(initialPath, current);
+    });
+  }, [initialPath, newPath]);
+  useEffect(() => {
+    playAnimation();
+    onRender === null || onRender === void 0 || onRender({
+      path: newPath,
+      area: newArea
+    });
+  }, [newArea, newPath, onRender, playAnimation]);
+  return /*#__PURE__*/_jsx(SparklinePath, {
+    ref: pathRef,
+    path: initialPath,
+    stroke: lineColor
+  });
+});
+export const SparklineInteractiveTimeseriesPaths = /*#__PURE__*/memo(_ref2 => {
+  let {
+    data,
+    width,
+    height,
+    initialPath,
+    onRender
+  } = _ref2;
+  const {
+    lineFn,
+    areaFn
+  } = useTimeseriesPaths({
+    data,
+    width,
+    height
+  });
+  const translateProps = useMemo(() => getSparklineTransform(width, height), [width, height]);
+  const paths = data.map((timeseries, index) => {
+    return /*#__PURE__*/_jsx(TimeseriesPath, {
+      areaFn: areaFn,
+      initialPath: initialPath,
+      lineFn: lineFn,
+      onRender: index === 0 ? onRender : undefined,
+      timeseries: timeseries
+    }, timeseries.id);
+  });
+  return /*#__PURE__*/_jsx("svg", {
+    height: height,
+    width: width,
+    children: /*#__PURE__*/_jsx("g", _objectSpread(_objectSpread({}, translateProps), {}, {
+      children: paths
+    }))
+  });
+});

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

@@ -0,0 +1,89 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+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/✨-CDS-Components?node-id=320-14858&m=dev', {
+  imports: ["import { SparklineInteractive } from '@coinbase/cds-web/visualizations/sparkline'"],
+  props: {
+    compact: figma.boolean('compact'),
+    disableScrubbing: figma.boolean('scrubbing', {
+      false: true,
+      true: false
+    })
+  },
+  example: props => {
+    const periods = [{
+      label: '1H',
+      value: 'hour'
+    }, {
+      label: '1D',
+      value: 'day'
+    }, {
+      label: '1W',
+      value: 'week'
+    }, {
+      label: '1M',
+      value: 'month'
+    }, {
+      label: '1Y',
+      value: 'year'
+    }, {
+      label: 'All',
+      value: 'all'
+    }];
+    const data = {
+      hour: [],
+      day: [{
+        value: 49259.38,
+        date: new Date('2021-12-05T04:00:00.000Z')
+      }, {
+        value: 49163.79,
+        date: new Date('2021-12-05T04:05:00.000Z')
+      }, {
+        value: 49146.66,
+        date: new Date('2021-12-05T04:10:00.000Z')
+      }, {
+        value: 49083.92,
+        date: new Date('2021-12-05T04:15:00.000Z')
+      }, {
+        value: 49115.3,
+        date: new Date('2021-12-05T04:20:00.000Z')
+      }, {
+        value: 48992.14,
+        date: new Date('2021-12-05T04:25:00.000Z')
+      }, {
+        value: 49075.75,
+        date: new Date('2021-12-05T04:30:00.000Z')
+      }, {
+        value: 49025.78,
+        date: new Date('2021-12-05T04:35:00.000Z')
+      }, {
+        value: 49066.23,
+        date: new Date('2021-12-05T04:40:00.000Z')
+      }, {
+        value: 49247.82,
+        date: new Date('2021-12-05T04:45:00.000Z')
+      }],
+      week: [],
+      month: [],
+      year: [],
+      all: []
+    };
+    return /*#__PURE__*/_jsx(SparklineInteractive, _objectSpread({
+      data: data,
+      defaultPeriod: "day",
+      formatDate: date => date.toLocaleString('en-US', {
+        timeZone: 'America/New_York',
+        hour: 'numeric',
+        minute: 'numeric'
+      }),
+      periods: periods,
+      strokeColor: "#cb51bb"
+    }, props));
+  }
+});

package/esm/visualizations/sparkline/sparkline-interactive/fade.css

@@ -0,0 +1,2 @@
+@layer cds{.fadeInCss-f5f0xq8.fadeInCss-f5f0xq8{-webkit-animation:cdsSparklineInteractiveFadeIn-fadeInCss-f5f0xq8 200ms cubic-bezier(0.6,0,0.15,1);animation:cdsSparklineInteractiveFadeIn-fadeInCss-f5f0xq8 200ms cubic-bezier(0.6,0,0.15,1);opacity:1;}@-webkit-keyframes cdsSparklineInteractiveFadeIn-fadeInCss-f5f0xq8{0%{opacity:0;}100%{opacity:1;}}@keyframes cdsSparklineInteractiveFadeIn-fadeInCss-f5f0xq8{0%{opacity:0;}100%{opacity:1;}}
+.fadeOutCss-f1c3trwc.fadeOutCss-f1c3trwc{-webkit-animation:cdsSparklineInteractiveFadeOut-fadeOutCss-f1c3trwc 200ms cubic-bezier(0.6,0,0.15,1);animation:cdsSparklineInteractiveFadeOut-fadeOutCss-f1c3trwc 200ms cubic-bezier(0.6,0,0.15,1);opacity:0;}@-webkit-keyframes cdsSparklineInteractiveFadeOut-fadeOutCss-f1c3trwc{0%{opacity:1;}100%{opacity:0;}}@keyframes cdsSparklineInteractiveFadeOut-fadeOutCss-f1c3trwc{0%{opacity:1;}100%{opacity:0;}}}

package/esm/visualizations/sparkline/sparkline-interactive/fade.js

@@ -0,0 +1,15 @@
+import { fadeDuration } from '@coinbase/cds-common/tokens/sparkline';
+import { cubicBezier } from '../../../animation/convertMotionConfig';
+
+// keyframes are global so they should be namespaced
+const fadeInCss = "fadeInCss-f5f0xq8";
+const fadeOutCss = "fadeOutCss-f1c3trwc";
+export function fadeOut(domNode) {
+  domNode === null || domNode === void 0 || domNode.classList.remove(fadeInCss);
+  domNode === null || domNode === void 0 || domNode.classList.add(fadeOutCss);
+}
+export function fadeIn(domNode) {
+  domNode === null || domNode === void 0 || domNode.classList.add(fadeInCss);
+  domNode === null || domNode === void 0 || domNode.classList.remove(fadeOutCss);
+}
+import "./fade.css";

package/esm/visualizations/sparkline/sparkline-interactive/useSparklineInteractiveConstants.js

@@ -0,0 +1,28 @@
+import { useMemo } from 'react';
+import { borderWidth, chartCompactHeight, chartHeight as chartHeightToken } from '@coinbase/cds-common/tokens/sparkline';
+import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
+export function useSparklineInteractiveConstants() {
+  const {
+    width: chartWidth,
+    compact
+  } = useSparklineInteractiveContext();
+  return useMemo(() => {
+    const chartHeight = compact ? chartCompactHeight : chartHeightToken;
+    const xRange = [borderWidth, chartWidth - borderWidth];
+    const yRange = [chartHeight - borderWidth, borderWidth];
+    const startX = 0;
+    const endX = xRange[1];
+    return {
+      chartWidth,
+      chartHeight,
+      chartDimensionStyles: {
+        height: chartHeight,
+        width: chartWidth
+      },
+      xRange,
+      yRange,
+      startX,
+      endX
+    };
+  }, [chartWidth, compact]);
+}