@coinbase/cds-web-visualization 3.4.0-beta.18 → 3.4.0-beta.19

package/esm/chart/point/Point.js

@@ -1,4 +1,4 @@
-const _excluded = ["dataX", "dataY", "yAxisId", "fill", "radius", "opacity", "onClick", "className", "style", "classNames", "styles", "stroke", "strokeWidth", "accessibilityLabel", "label", "LabelComponent", "labelPosition", "labelOffset", "labelFont", "testID", "animate", "transition"];
+const _excluded = ["dataX", "dataY", "yAxisId", "fill", "radius", "opacity", "onClick", "className", "style", "classNames", "styles", "stroke", "strokeWidth", "accessibilityLabel", "label", "LabelComponent", "labelPosition", "labelOffset", "labelFont", "testID", "animate", "transitions", "transition"];
 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; }
@@ -10,7 +10,7 @@ import React, { memo, useMemo } from 'react';
 import { cx } from '@coinbase/cds-web';
 import { m as motion } from 'framer-motion';
 import { useCartesianChartContext } from '../ChartProvider';
-import { projectPoint } from '../utils';
+import { defaultAccessoryEnterTransition, defaultTransition, getTransition, projectPoint } from '../utils';
 import { DefaultPointLabel } from './DefaultPointLabel';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const containerCss = "cds-containerCss-ckemp0e";
@@ -43,6 +43,7 @@ export const Point = /*#__PURE__*/memo(_ref => {
       labelFont,
       testID,
       animate: animateProp,
+      transitions,
       transition
     } = _ref,
     svgProps = _objectWithoutProperties(_ref, _excluded);
@@ -53,6 +54,8 @@ export const Point = /*#__PURE__*/memo(_ref => {
     drawingArea
   } = useCartesianChartContext();
   const animate = animateProp !== null && animateProp !== void 0 ? animateProp : animationEnabled;
+  const enterTransition = useMemo(() => getTransition(transitions === null || transitions === void 0 ? void 0 : transitions.enter, animate, defaultAccessoryEnterTransition), [animate, transitions === null || transitions === void 0 ? void 0 : transitions.enter]);
+  const updateTransition = useMemo(() => getTransition((transitions === null || transitions === void 0 ? void 0 : transitions.update) !== undefined ? transitions.update : transition, animate, defaultTransition), [animate, transitions === null || transitions === void 0 ? void 0 : transitions.update, transition]);
   const xScale = getXScale();
   const yScale = getYScale(yAxisId);
   const pixelCoordinate = useMemo(() => {
@@ -133,7 +136,6 @@ export const Point = /*#__PURE__*/memo(_ref => {
       cx: pixelCoordinate.x,
       cy: pixelCoordinate.y,
       fill: fill,
-      initial: false,
       onClick: onClick ? event => onClick(event, {
         dataX,
         dataY,
@@ -147,34 +149,48 @@ export const Point = /*#__PURE__*/memo(_ref => {
       strokeWidth: strokeWidth,
       style: mergedStyles,
       tabIndex: onClick ? 0 : -1,
-      transition: transition,
+      transition: {
+        cx: updateTransition,
+        cy: updateTransition
+      },
       variants: variants,
       whileHover: onClick ? 'hovered' : 'default',
       whileTap: onClick ? 'pressed' : 'default'
     }, svgProps));
-  }, [style, styles === null || styles === void 0 ? void 0 : styles.point, classNames === null || classNames === void 0 ? void 0 : classNames.point, fill, animate, radius, className, onClick, stroke, strokeWidth, svgProps, dataX, dataY, pixelCoordinate.x, pixelCoordinate.y, accessibilityLabel, transition]);
+  }, [style, styles === null || styles === void 0 ? void 0 : styles.point, classNames === null || classNames === void 0 ? void 0 : classNames.point, fill, animate, radius, className, onClick, stroke, strokeWidth, svgProps, dataX, dataY, pixelCoordinate.x, pixelCoordinate.y, accessibilityLabel, updateTransition]);
   if (!xScale || !yScale) {
     return;
   }
-  return /*#__PURE__*/_jsxs("g", {
+  return /*#__PURE__*/_jsx("g", {
     opacity: isWithinDrawingArea ? 1 : 0,
-    children: [/*#__PURE__*/_jsx("g", {
-      className: cx(containerCss, classNames === null || classNames === void 0 ? void 0 : classNames.root),
-      "data-testid": testID,
-      opacity: opacity,
-      style: styles === null || styles === void 0 ? void 0 : styles.root,
-      children: innerPoint
-    }), label && /*#__PURE__*/_jsx(LabelComponent, {
-      dataX: dataX,
-      dataY: dataY,
-      fill: fill,
-      font: labelFont,
-      offset: labelOffset,
-      position: labelPosition,
-      x: pixelCoordinate.x,
-      y: pixelCoordinate.y,
-      children: label
-    })]
+    children: /*#__PURE__*/_jsxs(motion.g, {
+      animate: {
+        opacity: 1
+      },
+      initial: animate ? {
+        opacity: 0
+      } : false,
+      transition: {
+        opacity: enterTransition
+      },
+      children: [/*#__PURE__*/_jsx("g", {
+        className: cx(containerCss, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+        "data-testid": testID,
+        opacity: opacity,
+        style: styles === null || styles === void 0 ? void 0 : styles.root,
+        children: innerPoint
+      }), label && /*#__PURE__*/_jsx(LabelComponent, {
+        dataX: dataX,
+        dataY: dataY,
+        fill: fill,
+        font: labelFont,
+        offset: labelOffset,
+        position: labelPosition,
+        x: pixelCoordinate.x,
+        y: pixelCoordinate.y,
+        children: label
+      })]
+    })
   });
 });
 import "./Point.css";

package/esm/chart/scrubber/DefaultScrubberBeacon.js

@@ -4,9 +4,10 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 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 { forwardRef, memo, useImperativeHandle, useMemo } from 'react';
+import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
 import { m as motion, useAnimate } from 'framer-motion';
 import { useCartesianChartContext } from '../ChartProvider';
-import { defaultTransition, projectPoint } from '../utils';
+import { defaultTransition, getTransition, instantTransition, projectPoint } from '../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultRadius = 5;
 const defaultStrokeWidth = 2;
@@ -54,10 +55,13 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
     var _ref2;
     return (_ref2 = colorProp !== null && colorProp !== void 0 ? colorProp : targetSeries === null || targetSeries === void 0 ? void 0 : targetSeries.color) !== null && _ref2 !== void 0 ? _ref2 : 'var(--color-fgPrimary)';
   }, [colorProp, targetSeries]);
+  const prevIsIdle = usePreviousValue(isIdle);
+  const isIdleTransition = prevIsIdle !== undefined && isIdle !== prevIsIdle;
   const updateTransition = useMemo(() => {
-    var _transitions$update;
-    return (_transitions$update = transitions === null || transitions === void 0 ? void 0 : transitions.update) !== null && _transitions$update !== void 0 ? _transitions$update : defaultTransition;
-  }, [transitions === null || transitions === void 0 ? void 0 : transitions.update]);
+    if (isIdleTransition) return instantTransition;
+    if (!isIdle) return instantTransition;
+    return getTransition(transitions === null || transitions === void 0 ? void 0 : transitions.update, animate, defaultTransition);
+  }, [transitions === null || transitions === void 0 ? void 0 : transitions.update, isIdle, animate, isIdleTransition]);
   const pulseTransition = useMemo(() => {
     var _transitions$pulse;
     return (_transitions$pulse = transitions === null || transitions === void 0 ? void 0 : transitions.pulse) !== null && _transitions$pulse !== void 0 ? _transitions$pulse : defaultPulseTransition;
@@ -119,35 +123,10 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
       r: pulseRadiusStart
     }
   });
-  const beaconCircle = isIdle && animate ? /*#__PURE__*/_jsx(motion.circle, {
-    animate: {
-      cx: pixelCoordinate.x,
-      cy: pixelCoordinate.y
-    },
-    className: className,
-    cx: pixelCoordinate.x,
-    cy: pixelCoordinate.y,
-    fill: color,
-    initial: false,
-    r: radius,
-    stroke: stroke,
-    strokeWidth: strokeWidth,
-    style: style,
-    transition: updateTransition
-  }) : /*#__PURE__*/_jsx("circle", {
-    className: className,
-    cx: pixelCoordinate.x,
-    cy: pixelCoordinate.y,
-    fill: color,
-    r: radius,
-    stroke: stroke,
-    strokeWidth: strokeWidth,
-    style: style
-  });
   return /*#__PURE__*/_jsxs("g", {
     "data-testid": testID,
     opacity: isWithinDrawingArea ? opacity : 0,
-    children: [isIdle && (animate ? /*#__PURE__*/_jsx(motion.g, {
+    children: [isIdle && /*#__PURE__*/_jsx(motion.g, {
       animate: {
         x: pixelCoordinate.x,
         y: pixelCoordinate.y
@@ -155,9 +134,21 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
       initial: false,
       transition: updateTransition,
       children: pulseCircle
-    }) : /*#__PURE__*/_jsx("g", {
-      transform: "translate(".concat(pixelCoordinate.x, ", ").concat(pixelCoordinate.y, ")"),
-      children: pulseCircle
-    })), beaconCircle]
+    }), /*#__PURE__*/_jsx(motion.circle, {
+      animate: {
+        cx: pixelCoordinate.x,
+        cy: pixelCoordinate.y
+      },
+      className: className,
+      cx: pixelCoordinate.x,
+      cy: pixelCoordinate.y,
+      fill: color,
+      initial: false,
+      r: radius,
+      stroke: stroke,
+      strokeWidth: strokeWidth,
+      style: style,
+      transition: updateTransition
+    })]
   });
 }));

package/esm/chart/scrubber/DefaultScrubberBeaconLabel.js

@@ -1,4 +1,4 @@
-const _excluded = ["background", "color", "elevated", "borderRadius", "font", "verticalAlignment", "inset", "label"];
+const _excluded = ["background", "color", "elevated", "borderRadius", "font", "verticalAlignment", "inset", "label", "transition", "y"];
 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; }
@@ -7,6 +7,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 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 { m as motion } from 'framer-motion';
 import { ChartText } from '../text';
 import { jsx as _jsx } from "react/jsx-runtime";
 const labelVerticalInset = 3.5;
@@ -28,19 +29,29 @@ export const DefaultScrubberBeaconLabel = /*#__PURE__*/memo(_ref => {
         top: labelVerticalInset,
         bottom: labelVerticalInset
       },
-      label
+      label,
+      transition,
+      y
     } = _ref,
     chartTextProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_jsx(ChartText, _objectSpread(_objectSpread({
-    disableRepositioning: true,
-    background: background,
-    borderRadius: borderRadius,
-    color: color,
-    elevated: elevated,
-    font: font,
-    inset: inset,
-    verticalAlignment: verticalAlignment
-  }, chartTextProps), {}, {
-    children: label
-  }));
+  return /*#__PURE__*/_jsx(motion.g, {
+    animate: {
+      y
+    },
+    initial: false,
+    transition: transition,
+    children: /*#__PURE__*/_jsx(ChartText, _objectSpread(_objectSpread({
+      disableRepositioning: true,
+      background: background,
+      borderRadius: borderRadius,
+      color: color,
+      elevated: elevated,
+      font: font,
+      inset: inset,
+      verticalAlignment: verticalAlignment,
+      y: transition ? 0 : y
+    }, chartTextProps), {}, {
+      children: label
+    }))
+  });
 });

package/esm/chart/scrubber/Scrubber.js

@@ -7,7 +7,7 @@ import React, { forwardRef, memo, useImperativeHandle, useMemo } from 'react';
 import { m as motion } from 'framer-motion';
 import { useCartesianChartContext } from '../ChartProvider';
 import { ReferenceLine } from '../line';
-import { accessoryFadeTransitionDelay, accessoryFadeTransitionDuration, getPointOnScale, useScrubberContext } from '../utils';
+import { defaultAccessoryEnterTransition, getPointOnScale, getTransition, useScrubberContext } from '../utils';
 import { DefaultScrubberBeacon } from './DefaultScrubberBeacon';
 import { DefaultScrubberLabel } from './DefaultScrubberLabel';
 import { ScrubberBeaconGroup } from './ScrubberBeaconGroup';
@@ -40,6 +40,7 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
     testID,
     idlePulse,
     beaconTransitions,
+    transitions = beaconTransitions,
     beaconStroke,
     styles,
     classNames
@@ -118,6 +119,7 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       color: s.color
     }))) !== null && _series$filter$filter !== void 0 ? _series$filter$filter : [];
   }, [series, filteredSeriesIds]);
+  const groupEnterTransition = useMemo(() => getTransition(transitions === null || transitions === void 0 ? void 0 : transitions.enter, animate, defaultAccessoryEnterTransition), [transitions === null || transitions === void 0 ? void 0 : transitions.enter, animate]);
 
   // Check if we have at least the default X scale
   const defaultXScale = getXScale();
@@ -133,16 +135,7 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
   }, animate ? {
     animate: {
       opacity: 1,
-      transition: {
-        duration: accessoryFadeTransitionDuration,
-        delay: accessoryFadeTransitionDelay
-      }
-    },
-    exit: {
-      opacity: 0,
-      transition: {
-        duration: accessoryFadeTransitionDuration
-      }
+      transition: groupEnterTransition
     },
     initial: {
       opacity: 0
@@ -181,14 +174,15 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       stroke: beaconStroke,
       style: styles === null || styles === void 0 ? void 0 : styles.beacon,
       testID: testID,
-      transitions: beaconTransitions
+      transitions: transitions
     }), !hideBeaconLabels && beaconLabels.length > 0 && /*#__PURE__*/_jsx(ScrubberBeaconLabelGroup, {
       BeaconLabelComponent: BeaconLabelComponent,
       labelFont: beaconLabelFont,
       labelHorizontalOffset: beaconLabelHorizontalOffset,
       labelMinGap: beaconLabelMinGap,
       labelPreferredSide: beaconLabelPreferredSide,
-      labels: beaconLabels
+      labels: beaconLabels,
+      transitions: transitions
     })]
   }));
 }));

package/esm/chart/scrubber/ScrubberBeaconLabelGroup.js

@@ -4,8 +4,9 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 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 { memo, useCallback, useMemo, useState } from 'react';
+import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
 import { useCartesianChartContext } from '../ChartProvider';
-import { getPointOnScale, useScrubberContext } from '../utils';
+import { defaultTransition, getPointOnScale, getTransition, instantTransition, useScrubberContext } from '../utils';
 import { calculateLabelYPositions, getLabelPosition } from '../utils/scrubber';
 import { DefaultScrubberBeaconLabel } from './DefaultScrubberBeaconLabel';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -20,7 +21,8 @@ const PositionedLabel = /*#__PURE__*/memo(_ref => {
     onDimensionsChange,
     BeaconLabelComponent,
     labelHorizontalOffset,
-    labelFont
+    labelFont,
+    updateTransition
   } = _ref;
   const pos = positions[index];
 
@@ -40,6 +42,7 @@ const PositionedLabel = /*#__PURE__*/memo(_ref => {
     label: label,
     onDimensionsChange: d => onDimensionsChange(seriesId, d),
     seriesId: seriesId,
+    transition: updateTransition,
     x: x,
     y: y
   });
@@ -51,7 +54,8 @@ export const ScrubberBeaconLabelGroup = /*#__PURE__*/memo(_ref2 => {
     labelHorizontalOffset = 16,
     labelFont,
     labelPreferredSide = 'right',
-    BeaconLabelComponent = DefaultScrubberBeaconLabel
+    BeaconLabelComponent = DefaultScrubberBeaconLabel,
+    transitions
   } = _ref2;
   const {
     getSeries,
@@ -60,11 +64,20 @@ export const ScrubberBeaconLabelGroup = /*#__PURE__*/memo(_ref2 => {
     getYScale,
     getXAxis,
     drawingArea,
-    dataLength
+    dataLength,
+    animate
   } = useCartesianChartContext();
   const {
     scrubberPosition
   } = useScrubberContext();
+  const isIdle = scrubberPosition === undefined;
+  const prevIsIdle = usePreviousValue(isIdle);
+  const isIdleTransition = prevIsIdle !== undefined && isIdle !== prevIsIdle;
+  const updateTransition = useMemo(() => {
+    if (isIdleTransition) return instantTransition;
+    if (!isIdle) return instantTransition;
+    return getTransition(transitions === null || transitions === void 0 ? void 0 : transitions.update, animate, defaultTransition);
+  }, [transitions === null || transitions === void 0 ? void 0 : transitions.update, isIdle, animate, isIdleTransition]);
   const [labelDimensions, setLabelDimensions] = useState({});
   const handleDimensionsChange = useCallback((seriesId, dimensions) => {
     setLabelDimensions(prev => {
@@ -181,7 +194,8 @@ export const ScrubberBeaconLabelGroup = /*#__PURE__*/memo(_ref2 => {
       onDimensionsChange: handleDimensionsChange,
       position: currentPosition,
       positions: allLabelPositions,
-      seriesId: info.seriesId
+      seriesId: info.seriesId,
+      updateTransition: updateTransition
     }, info.seriesId);
   });
 });

package/esm/chart/utils/bar.js

@@ -1,3 +1,51 @@
+const _excluded = ["staggerDelay"];
+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); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+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 { defaultTransition } from './transition';
+
+/**
+ * A bar-specific transition that extends Transition with stagger support.
+ * When `staggerDelay` is provided, bars will animate with increasing delays
+ * based on their horizontal position (leftmost starts first, rightmost last).
+ *
+ * @example
+ * // Bars stagger in from left to right over 0.25s, each animating for 0.75s
+ * { type: 'tween', duration: 0.75, staggerDelay: 0.25 }
+ */
+
+/**
+ * Strips `staggerDelay` from a transition and computes a positional delay.
+ *
+ * @param transition - The transition config (may include staggerDelay)
+ * @param normalizedX - The bar's normalized x position (0 = left edge, 1 = right edge)
+ * @returns A standard Transition with computed delay
+ */
+export const withStaggerDelayTransition = (transition, normalizedX) => {
+  var _baseTransition$delay;
+  const {
+      staggerDelay
+    } = transition,
+    baseTransition = _objectWithoutProperties(transition, _excluded);
+  if (!staggerDelay) return transition;
+  return _objectSpread(_objectSpread({}, baseTransition), {}, {
+    delay: ((_baseTransition$delay = baseTransition === null || baseTransition === void 0 ? void 0 : baseTransition.delay) !== null && _baseTransition$delay !== void 0 ? _baseTransition$delay : 0) + normalizedX * staggerDelay
+  });
+};
+
+/**
+ * Default bar enter transition. Uses the default spring with a stagger delay
+ * so bars spring into place from left to right.
+ * `{ type: 'spring', stiffness: 900, damping: 120, mass: 4, staggerDelay: 0.25 }`
+ */
+export const defaultBarEnterTransition = _objectSpread(_objectSpread({}, defaultTransition), {}, {
+  staggerDelay: 0.25
+});
+
 /**
  * Calculates the size adjustment needed for bars when accounting for gaps between them.
  * This function helps determine how much to reduce each bar's width to accommodate

package/esm/chart/utils/path.js

@@ -1,6 +1,15 @@
 import { area as d3Area, curveBumpX, curveCatmullRom, curveLinear, curveLinearClosed, curveMonotoneX, curveNatural, curveStep, curveStepAfter, curveStepBefore, line as d3Line } from 'd3-shape';
 import { projectPoint, projectPoints } from './point';
 import { isCategoricalScale } from './scale';
+
+/**
+ * Default enter transition for path-based components (Line, Area).
+ * `{ type: 'tween', duration: 0.5 }`
+ */
+export const defaultPathEnterTransition = {
+  type: 'tween',
+  duration: 0.5
+};
 /**
  * Get the d3 curve function for a path.
  * See https://d3js.org/d3-shape/curve

package/esm/chart/utils/transition.js

@@ -5,10 +5,11 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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 { useEffect, useRef } from 'react';
 import { interpolatePath } from 'd3-interpolate-path';
-import { animate, useMotionValue, useTransform } from 'framer-motion';
+import { animate, useMotionValue } from 'framer-motion';
 
 /**
- * Default transition configuration used across all chart components.
+ * Default update transition used across all chart components.
+ * `{ type: 'spring', stiffness: 900, damping: 120, mass: 4 }`
  */
 export const defaultTransition = {
   type: 'spring',
@@ -17,6 +18,15 @@ export const defaultTransition = {
   mass: 4
 };
 
+/**
+ * Instant transition that completes immediately with no animation.
+ * Used when a transition is set to `null`.
+ */
+export const instantTransition = {
+  type: 'tween',
+  duration: 0
+};
+
 /**
  * Duration in seconds for accessory elements to fade in.
  */
@@ -27,85 +37,97 @@ export const accessoryFadeTransitionDuration = 0.15;
  */
 export const accessoryFadeTransitionDelay = 0.35;
 
+/**
+ * Default enter transition for accessory elements (Point, Scrubber beacons).
+ * `{ type: 'tween', duration: 0.15, delay: 0.35 }`
+ */
+export const defaultAccessoryEnterTransition = {
+  type: 'tween',
+  duration: accessoryFadeTransitionDuration,
+  delay: accessoryFadeTransitionDelay
+};
+
+/**
+ * Resolves a transition value based on the animation state and a default.
+ * @note Passing in null will disable an animation.
+ * @note Passing in undefined will use the provided default.
+ */
+export const getTransition = (value, animate, defaultValue) => {
+  if (!animate || value === null) return instantTransition;
+  return value !== null && value !== void 0 ? value : defaultValue;
+};
+
 /**
  * Hook for path animation state and transitions.
  *
  * @param currentPath - Current target path to animate to
  * @param initialPath - Initial path for enter animation. When provided, the first animation will go from initialPath to currentPath.
- * @param transition - Transition configuration
+ * @param transitions - Transition configuration for enter and update animations
  * @returns MotionValue containing the current interpolated path string
  *
  * @example
  * // Simple path transition
  * const animatedPath = usePathTransition({
  *   currentPath: d ?? '',
- *   transition: {
- *     type: 'spring',
- *     stiffness: 300,
- *     damping: 20
- *   }
+ *   transitions: {
+ *     update: { type: 'spring', stiffness: 300, damping: 20 },
+ *   },
  * });
  *
  * @example
- * // Time based animation
+ * // Enter animation with different initial config (like DefaultBar)
  * const animatedPath = usePathTransition({
  *   currentPath: targetPath,
  *   initialPath: baselinePath,
- *   transition: {
- *     type: 'tween',
- *     duration: 0.3,
- *     ease: 'easeInOut'
- *   }
+ *   transitions: {
+ *     enter: { type: 'tween', duration: 0.5 },
+ *     update: { type: 'spring', stiffness: 900, damping: 120, mass: 4 },
+ *   },
  * });
  */
 export const usePathTransition = _ref => {
+  var _transitions$update;
   let {
     currentPath,
     initialPath,
+    transitions,
     transition = defaultTransition
   } = _ref;
-  const isInitialRender = useRef(true);
+  const updateTransition = (_transitions$update = transitions === null || transitions === void 0 ? void 0 : transitions.update) !== null && _transitions$update !== void 0 ? _transitions$update : transition;
+  const enterTransition = transitions === null || transitions === void 0 ? void 0 : transitions.enter;
   const previousPathRef = useRef(initialPath !== null && initialPath !== void 0 ? initialPath : currentPath);
-  const targetPathRef = useRef(currentPath);
+  const targetPathRef = useRef(initialPath !== null && initialPath !== void 0 ? initialPath : currentPath);
   const animationRef = useRef(null);
-  const progress = useMotionValue(0);
-
-  // Derive the interpolated path from progress using useTransform
-  const interpolatedPath = useTransform(progress, latest => {
-    const pathInterpolator = interpolatePath(previousPathRef.current, targetPathRef.current);
-    return pathInterpolator(latest);
-  });
+  const isFirstAnimation = useRef(!!initialPath);
+  const animatedPath = useMotionValue(initialPath !== null && initialPath !== void 0 ? initialPath : currentPath);
   useEffect(() => {
-    // Only proceed if the target path has actually changed
     if (targetPathRef.current !== currentPath) {
-      // Cancel any ongoing animation before starting a new one
-      const wasAnimating = !!animationRef.current;
+      const currentVisualPath = animatedPath.get();
       if (animationRef.current) {
-        animationRef.current.cancel();
+        animationRef.current.stop();
         animationRef.current = null;
-      }
-      const currentInterpolatedPath = interpolatedPath.get();
-
-      // If we were animating and the interpolated path is different from both start and end,
-      // use it as the starting point for the next animation (smooth interruption)
-      const isInterpolatedPosition = currentInterpolatedPath !== previousPathRef.current && currentInterpolatedPath !== currentPath;
-      if (wasAnimating && isInterpolatedPosition) {
-        previousPathRef.current = currentInterpolatedPath;
+        previousPathRef.current = currentVisualPath;
       }
       targetPathRef.current = currentPath;
-      progress.set(0);
-      animationRef.current = animate(progress, 1, _objectSpread(_objectSpread({}, transition), {}, {
+      const activeTransition = isFirstAnimation.current && enterTransition !== undefined ? enterTransition : updateTransition;
+      isFirstAnimation.current = false;
+      const pathInterpolator = interpolatePath(previousPathRef.current, currentPath);
+      animationRef.current = animate(0, 1, _objectSpread(_objectSpread({}, activeTransition), {}, {
+        onUpdate: latest => {
+          animatedPath.set(pathInterpolator(latest));
+        },
         onComplete: () => {
+          animatedPath.set(currentPath);
           previousPathRef.current = currentPath;
+          animationRef.current = null;
         }
       }));
-      isInitialRender.current = false;
     }
     return () => {
       if (animationRef.current) {
-        animationRef.current.cancel();
+        animationRef.current.stop();
       }
     };
-  }, [currentPath, transition, progress, interpolatedPath]);
-  return interpolatedPath;
+  }, [currentPath, updateTransition, enterTransition, animatedPath]);
+  return animatedPath;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web-visualization",
-  "version": "3.4.0-beta.18",
+  "version": "3.4.0-beta.19",
   "description": "Coinbase Design System - Web Sparkline",
   "repository": {
     "type": "git",
@@ -38,10 +38,10 @@
     "CHANGELOG"
   ],
   "peerDependencies": {
-    "@coinbase/cds-common": "^8.43.0",
+    "@coinbase/cds-common": "^8.48.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",
-    "@coinbase/cds-web": "^8.43.0",
+    "@coinbase/cds-web": "^8.48.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
@@ -58,10 +58,10 @@
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@coinbase/cds-common": "^8.43.0",
+    "@coinbase/cds-common": "^8.48.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",
-    "@coinbase/cds-web": "^8.43.0",
+    "@coinbase/cds-web": "^8.48.0",
     "@linaria/core": "^3.0.0-beta.22",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1"