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

package/esm/chart/area/DottedArea.js

@@ -1,4 +1,4 @@
-const _excluded = ["d", "fill", "patternSize", "dotSize", "peakOpacity", "baselineOpacity", "baseline", "yAxisId", "gradient", "animate", "transition"];
+const _excluded = ["d", "fill", "patternSize", "dotSize", "peakOpacity", "baselineOpacity", "baseline", "yAxisId", "gradient", "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; }
@@ -18,6 +18,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * on the fill color and peak/baseline opacities.
  */
 export const DottedArea = /*#__PURE__*/memo(_ref => {
+  var _transitions$update;
   let {
       d,
       fill = 'var(--color-fgPrimary)',
@@ -29,6 +30,7 @@ export const DottedArea = /*#__PURE__*/memo(_ref => {
       yAxisId,
       gradient: gradientProp,
       animate,
+      transitions,
       transition
     } = _ref,
     pathProps = _objectWithoutProperties(_ref, _excluded);
@@ -67,13 +69,14 @@ export const DottedArea = /*#__PURE__*/memo(_ref => {
           animate: animate,
           d: d,
           fill: "url(#".concat(patternId, ")"),
-          transition: transition
+          transition: transition,
+          transitions: transitions
         })
       }), gradient && /*#__PURE__*/_jsx(Gradient, {
         animate: animate,
         gradient: gradient,
         id: gradientId,
-        transition: transition,
+        transition: (_transitions$update = transitions === null || transitions === void 0 ? void 0 : transitions.update) !== null && _transitions$update !== void 0 ? _transitions$update : transition,
         yAxisId: yAxisId
       })]
     }), /*#__PURE__*/_jsx(Path, _objectSpread({
@@ -81,7 +84,8 @@ export const DottedArea = /*#__PURE__*/memo(_ref => {
       d: d,
       fill: gradient ? "url(#".concat(gradientId, ")") : fill,
       mask: "url(#".concat(maskId, ")"),
-      transition: transition
+      transition: transition,
+      transitions: transitions
     }, pathProps))]
   });
 });

package/esm/chart/area/GradientArea.js

@@ -1,4 +1,4 @@
-const _excluded = ["d", "fill", "fillOpacity", "peakOpacity", "baselineOpacity", "baseline", "yAxisId", "gradient", "animate", "transition"];
+const _excluded = ["d", "fill", "fillOpacity", "peakOpacity", "baselineOpacity", "baseline", "yAxisId", "gradient", "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; }
@@ -21,6 +21,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * - For all-positive or all-negative data: Creates a simple gradient from baseline to peak.
  */
 export const GradientArea = /*#__PURE__*/memo(_ref => {
+  var _transitions$update;
   let {
       d,
       fill = 'var(--color-fgPrimary)',
@@ -31,6 +32,7 @@ export const GradientArea = /*#__PURE__*/memo(_ref => {
       yAxisId,
       gradient: gradientProp,
       animate,
+      transitions,
       transition
     } = _ref,
     pathProps = _objectWithoutProperties(_ref, _excluded);
@@ -51,7 +53,7 @@ export const GradientArea = /*#__PURE__*/memo(_ref => {
         animate: animate,
         gradient: gradient,
         id: patternId,
-        transition: transition,
+        transition: (_transitions$update = transitions === null || transitions === void 0 ? void 0 : transitions.update) !== null && _transitions$update !== void 0 ? _transitions$update : transition,
         yAxisId: yAxisId
       })
     }), /*#__PURE__*/_jsx(Path, _objectSpread({
@@ -59,7 +61,8 @@ export const GradientArea = /*#__PURE__*/memo(_ref => {
       d: d,
       fill: gradient ? "url(#".concat(patternId, ")") : fill,
       fillOpacity: fillOpacity,
-      transition: transition
+      transition: transition,
+      transitions: transitions
     }, pathProps))]
   });
 });

package/esm/chart/area/SolidArea.js

@@ -1,4 +1,4 @@
-const _excluded = ["d", "fill", "fillOpacity", "yAxisId", "animate", "transition", "gradient"];
+const _excluded = ["d", "fill", "fillOpacity", "yAxisId", "animate", "transitions", "transition", "gradient"];
 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; }
@@ -16,12 +16,14 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * Otherwise, renders with solid fill.
  */
 export const SolidArea = /*#__PURE__*/memo(_ref => {
+  var _transitions$update;
   let {
       d,
       fill = 'var(--color-fgPrimary)',
       fillOpacity = 1,
       yAxisId,
       animate,
+      transitions,
       transition,
       gradient
     } = _ref,
@@ -33,7 +35,7 @@ export const SolidArea = /*#__PURE__*/memo(_ref => {
         animate: animate,
         gradient: gradient,
         id: patternId,
-        transition: transition,
+        transition: (_transitions$update = transitions === null || transitions === void 0 ? void 0 : transitions.update) !== null && _transitions$update !== void 0 ? _transitions$update : transition,
         yAxisId: yAxisId
       })
     }), /*#__PURE__*/_jsx(Path, _objectSpread({
@@ -41,7 +43,8 @@ export const SolidArea = /*#__PURE__*/memo(_ref => {
       d: d,
       fill: gradient ? "url(#".concat(patternId, ")") : fill,
       fillOpacity: fillOpacity,
-      transition: transition
+      transition: transition,
+      transitions: transitions
     }, pathProps))]
   });
 });

package/esm/chart/bar/Bar.js

@@ -32,6 +32,7 @@ export const Bar = /*#__PURE__*/memo(_ref => {
     borderRadius = 4,
     roundTop = true,
     roundBottom = true,
+    transitions,
     transition
   } = _ref;
   const barPath = useMemo(() => {
@@ -56,6 +57,7 @@ export const Bar = /*#__PURE__*/memo(_ref => {
     stroke: stroke,
     strokeWidth: strokeWidth,
     transition: transition,
+    transitions: transitions,
     width: width,
     x: x,
     y: y

package/esm/chart/bar/BarChart.js

@@ -1,4 +1,4 @@
-const _excluded = ["series", "stacked", "showXAxis", "showYAxis", "xAxis", "yAxis", "inset", "children", "barPadding", "BarComponent", "fillOpacity", "stroke", "strokeWidth", "borderRadius", "roundBaseline", "BarStackComponent", "stackGap", "barMinSize", "stackMinSize", "transition"],
+const _excluded = ["series", "stacked", "showXAxis", "showYAxis", "xAxis", "yAxis", "inset", "children", "barPadding", "BarComponent", "fillOpacity", "stroke", "strokeWidth", "borderRadius", "roundBaseline", "BarStackComponent", "stackGap", "barMinSize", "stackMinSize", "transitions", "transition"],
   _excluded2 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range"],
   _excluded3 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "id"];
 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; }
@@ -35,6 +35,7 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       stackGap,
       barMinSize,
       stackMinSize,
+      transitions,
       transition
     } = _ref,
     chartProps = _objectWithoutProperties(_ref, _excluded);
@@ -124,7 +125,8 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       stackMinSize: stackMinSize,
       stroke: stroke,
       strokeWidth: strokeWidth,
-      transition: transition
+      transition: transition,
+      transitions: transitions
     }), children]
   }));
 }));

package/esm/chart/bar/BarPlot.js

@@ -23,6 +23,7 @@ export const BarPlot = /*#__PURE__*/memo(_ref => {
     stackGap,
     barMinSize,
     stackMinSize,
+    transitions,
     transition
   } = _ref;
   const {
@@ -90,6 +91,7 @@ export const BarPlot = /*#__PURE__*/memo(_ref => {
         strokeWidth: defaultStrokeWidth,
         totalStacks: stackGroups.length,
         transition: transition,
+        transitions: transitions,
         yAxisId: group.yAxisId
       }, group.stackId))
     })]

package/esm/chart/bar/BarStack.js

@@ -37,6 +37,7 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
     barMinSize,
     stackMinSize,
     roundBaseline,
+    transitions,
     transition
   } = _ref;
   const {
@@ -543,6 +544,7 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
       stroke: (_bar$stroke = bar.stroke) !== null && _bar$stroke !== void 0 ? _bar$stroke : defaultStroke,
       strokeWidth: (_bar$strokeWidth = bar.strokeWidth) !== null && _bar$strokeWidth !== void 0 ? _bar$strokeWidth : defaultStrokeWidth,
       transition: transition,
+      transitions: transitions,
       width: bar.width,
       x: bar.x,
       y: bar.y
@@ -559,6 +561,7 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
     roundBottom: stackRoundBottom,
     roundTop: stackRoundTop,
     transition: transition,
+    transitions: transitions,
     width: stackRect.width,
     x: stackRect.x,
     y: stackRect.y,

package/esm/chart/bar/DefaultBar.js

@@ -1,4 +1,4 @@
-const _excluded = ["x", "width", "borderRadius", "roundTop", "roundBottom", "originY", "d", "fill", "fillOpacity", "dataX", "dataY", "seriesId", "transition"];
+const _excluded = ["x", "width", "borderRadius", "roundTop", "roundBottom", "originY", "d", "fill", "fillOpacity", "dataX", "dataY", "seriesId", "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; }
@@ -7,9 +7,9 @@ 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 React, { memo, useMemo } from 'react';
-import { m as motion } from 'framer-motion';
 import { useCartesianChartContext } from '../ChartProvider';
-import { getBarPath } from '../utils';
+import { Path } from '../Path';
+import { defaultBarEnterTransition, defaultTransition, getBarPath, getTransition, withStaggerDelayTransition } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Default bar component that renders a solid bar with animation.
@@ -28,35 +28,32 @@ export const DefaultBar = /*#__PURE__*/memo(_ref => {
       dataX,
       dataY,
       seriesId,
+      transitions,
       transition
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const {
-    animate
+    animate,
+    drawingArea
   } = useCartesianChartContext();
+  const normalizedX = useMemo(() => drawingArea.width > 0 ? (x - drawingArea.x) / drawingArea.width : 0, [x, drawingArea.x, drawingArea.width]);
+  const enterTransition = useMemo(() => withStaggerDelayTransition(getTransition(transitions === null || transitions === void 0 ? void 0 : transitions.enter, animate, defaultBarEnterTransition), normalizedX), [transitions === null || transitions === void 0 ? void 0 : transitions.enter, animate, normalizedX]);
+  const updateTransition = useMemo(() => withStaggerDelayTransition(getTransition((transitions === null || transitions === void 0 ? void 0 : transitions.update) !== undefined ? transitions.update : transition, animate, defaultTransition), normalizedX), [transitions === null || transitions === void 0 ? void 0 : transitions.update, transition, animate, normalizedX]);
   const initialPath = useMemo(() => {
-    if (!animate) return undefined;
-    // Need a minimum height to allow for animation
     const minHeight = 1;
     const initialY = (originY !== null && originY !== void 0 ? originY : 0) - minHeight;
-    return getBarPath(x, initialY, width, minHeight, borderRadius, !!roundTop, !!roundBottom);
-  }, [animate, x, originY, width, borderRadius, roundTop, roundBottom]);
-  if (animate && initialPath) {
-    return /*#__PURE__*/_jsx(motion.path, _objectSpread(_objectSpread({}, props), {}, {
-      animate: {
-        d
-      },
-      fill: fill,
-      fillOpacity: fillOpacity,
-      initial: {
-        d: initialPath
-      },
-      transition: transition
-    }));
-  }
-  return /*#__PURE__*/_jsx("path", _objectSpread(_objectSpread({}, props), {}, {
+    return getBarPath(x, initialY, width, minHeight, borderRadius !== null && borderRadius !== void 0 ? borderRadius : 0, !!roundTop, !!roundBottom);
+  }, [x, originY, width, borderRadius, roundTop, roundBottom]);
+  return /*#__PURE__*/_jsx(Path, _objectSpread(_objectSpread({}, props), {}, {
+    animate: animate,
+    clipRect: null,
     d: d,
     fill: fill,
-    fillOpacity: fillOpacity
+    fillOpacity: fillOpacity,
+    initialPath: initialPath,
+    transitions: {
+      enter: enterTransition,
+      update: updateTransition
+    }
   }));
 });

package/esm/chart/bar/DefaultBarStack.js

@@ -1,7 +1,8 @@
 import { memo, useId, useMemo } from 'react';
 import { m as motion } from 'framer-motion';
 import { useCartesianChartContext } from '../ChartProvider';
-import { getBarPath } from '../utils';
+import { defaultBarEnterTransition, defaultTransition, getBarPath, getTransition, withStaggerDelayTransition } from '../utils';
+import { usePathTransition } from '../utils/transition';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Default stack component that renders children in a group with animated clip path.
@@ -19,33 +20,38 @@ export const DefaultBarStack = /*#__PURE__*/memo(_ref => {
     roundTop = true,
     roundBottom = true,
     yOrigin,
+    transitions,
     transition
   } = _ref;
   const {
-    animate
+    animate,
+    drawingArea
   } = useCartesianChartContext();
   const clipPathId = useId();
-  const clipPathData = useMemo(() => {
+  const normalizedX = useMemo(() => drawingArea.width > 0 ? (x - drawingArea.x) / drawingArea.width : 0, [x, drawingArea.x, drawingArea.width]);
+  const enterTransition = useMemo(() => withStaggerDelayTransition(getTransition(transitions === null || transitions === void 0 ? void 0 : transitions.enter, animate, defaultBarEnterTransition), normalizedX), [animate, transitions === null || transitions === void 0 ? void 0 : transitions.enter, normalizedX]);
+  const updateTransition = useMemo(() => withStaggerDelayTransition(getTransition((transitions === null || transitions === void 0 ? void 0 : transitions.update) !== undefined ? transitions.update : transition, animate, defaultTransition), normalizedX), [animate, transitions === null || transitions === void 0 ? void 0 : transitions.update, transition, normalizedX]);
+  const targetPath = useMemo(() => {
     return getBarPath(x, y, width, height, borderRadius, roundTop, roundBottom);
   }, [x, y, width, height, borderRadius, roundTop, roundBottom]);
-  const initialClipPathData = useMemo(() => {
-    if (!animate) return undefined;
-    return getBarPath(x, yOrigin !== null && yOrigin !== void 0 ? yOrigin : y + height, width, 1, borderRadius, roundTop, roundBottom);
-  }, [animate, x, yOrigin, y, height, width, borderRadius, roundTop, roundBottom]);
+  const initialPath = useMemo(() => {
+    const baselineY = yOrigin !== null && yOrigin !== void 0 ? yOrigin : y + height;
+    return getBarPath(x, baselineY, width, 1, borderRadius, roundTop, roundBottom);
+  }, [x, yOrigin, y, height, width, borderRadius, roundTop, roundBottom]);
+  const animatedClipPath = usePathTransition({
+    currentPath: targetPath,
+    initialPath,
+    transitions: {
+      enter: enterTransition,
+      update: updateTransition
+    }
+  });
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx("defs", {
       children: /*#__PURE__*/_jsx("clipPath", {
         id: clipPathId,
-        children: animate ? /*#__PURE__*/_jsx(motion.path, {
-          animate: {
-            d: clipPathData
-          },
-          initial: {
-            d: initialClipPathData
-          },
-          transition: transition
-        }) : /*#__PURE__*/_jsx("path", {
-          d: clipPathData
+        children: /*#__PURE__*/_jsx(motion.path, {
+          d: animatedClipPath
         })
       })
     }), /*#__PURE__*/_jsx("g", {

package/esm/chart/line/DottedLine.js

@@ -1,4 +1,4 @@
-const _excluded = ["fill", "stroke", "strokeDasharray", "strokeLinecap", "strokeLinejoin", "strokeOpacity", "strokeWidth", "vectorEffect", "gradient", "yAxisId", "animate", "transition", "d"];
+const _excluded = ["fill", "stroke", "strokeDasharray", "strokeLinecap", "strokeLinejoin", "strokeOpacity", "strokeWidth", "vectorEffect", "gradient", "yAxisId", "animate", "transitions", "transition", "d"];
 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; }
@@ -15,6 +15,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * Supports gradient for gradient effects on the dots.
  */
 export const DottedLine = /*#__PURE__*/memo(_ref => {
+  var _transitions$update;
   let {
       fill = 'none',
       stroke = 'var(--color-fgPrimary)',
@@ -27,6 +28,7 @@ export const DottedLine = /*#__PURE__*/memo(_ref => {
       gradient,
       yAxisId,
       animate,
+      transitions,
       transition,
       d
     } = _ref,
@@ -38,7 +40,7 @@ export const DottedLine = /*#__PURE__*/memo(_ref => {
         animate: animate,
         gradient: gradient,
         id: gradientId,
-        transition: transition,
+        transition: (_transitions$update = transitions === null || transitions === void 0 ? void 0 : transitions.update) !== null && _transitions$update !== void 0 ? _transitions$update : transition,
         yAxisId: yAxisId
       })
     }), /*#__PURE__*/_jsx(Path, _objectSpread({
@@ -53,6 +55,7 @@ export const DottedLine = /*#__PURE__*/memo(_ref => {
       strokeOpacity: strokeOpacity,
       strokeWidth: strokeWidth,
       transition: transition,
+      transitions: transitions,
       vectorEffect: vectorEffect
     }, props))]
   });

package/esm/chart/line/Line.js

@@ -1,4 +1,4 @@
-const _excluded = ["seriesId", "curve", "type", "areaType", "areaBaseline", "stroke", "strokeOpacity", "onPointClick", "showArea", "LineComponent", "AreaComponent", "opacity", "points", "connectNulls", "transition", "gradient"];
+const _excluded = ["seriesId", "curve", "type", "areaType", "areaBaseline", "stroke", "strokeOpacity", "onPointClick", "showArea", "LineComponent", "AreaComponent", "opacity", "points", "connectNulls", "transitions", "transition", "gradient"];
 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,11 +7,10 @@ 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 React, { memo, useMemo } from 'react';
-import { m as motion } from 'framer-motion';
 import { Area } from '../area/Area';
 import { useCartesianChartContext } from '../ChartProvider';
 import { Point } from '../point';
-import { accessoryFadeTransitionDelay, accessoryFadeTransitionDuration, evaluateGradientAtValue, getGradientConfig, getLineData, getLinePath } from '../utils';
+import { evaluateGradientAtValue, getGradientConfig, getLineData, getLinePath } from '../utils';
 import { DottedLine } from './DottedLine';
 import { SolidLine } from './SolidLine';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
@@ -32,6 +31,7 @@ export const Line = /*#__PURE__*/memo(_ref => {
       opacity = 1,
       points,
       connectNulls,
+      transitions,
       transition,
       gradient: gradientProp
     } = _ref,
@@ -108,6 +108,7 @@ export const Line = /*#__PURE__*/memo(_ref => {
       gradient: gradient,
       seriesId: seriesId,
       transition: transition,
+      transitions: transitions,
       type: areaType
     }), /*#__PURE__*/_jsx(LineComponent, _objectSpread({
       d: path,
@@ -115,27 +116,10 @@ export const Line = /*#__PURE__*/memo(_ref => {
       stroke: stroke,
       strokeOpacity: strokeOpacity !== null && strokeOpacity !== void 0 ? strokeOpacity : opacity,
       transition: transition,
+      transitions: transitions,
       yAxisId: matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.yAxisId
-    }, props)), points && /*#__PURE__*/_jsx(motion.g, _objectSpread(_objectSpread({
-      "data-component": "line-points-group"
-    }, animate ? {
-      animate: {
-        opacity: 1,
-        transition: {
-          duration: accessoryFadeTransitionDuration,
-          delay: accessoryFadeTransitionDelay
-        }
-      },
-      exit: {
-        opacity: 0,
-        transition: {
-          duration: accessoryFadeTransitionDuration
-        }
-      },
-      initial: {
-        opacity: 0
-      }
-    } : {}), {}, {
+    }, props)), points && /*#__PURE__*/_jsx("g", {
+      "data-component": "line-points-group",
       children: chartData.map((value, index) => {
         var _pointConfig$onClick;
         if (value === null) return;
@@ -167,7 +151,8 @@ export const Line = /*#__PURE__*/memo(_ref => {
         if (points === true) {
           return /*#__PURE__*/_jsx(Point, _objectSpread({
             onClick: onPointClick,
-            transition: transition
+            transition: transition,
+            transitions: transitions
           }, defaults), "".concat(seriesId, "-").concat(index));
         }
 
@@ -177,9 +162,10 @@ export const Line = /*#__PURE__*/memo(_ref => {
         const pointConfig = result === true ? {} : result;
         return /*#__PURE__*/_jsx(Point, _objectSpread(_objectSpread({
           onClick: (_pointConfig$onClick = pointConfig.onClick) !== null && _pointConfig$onClick !== void 0 ? _pointConfig$onClick : onPointClick,
-          transition: transition
+          transition: transition,
+          transitions: transitions
         }, defaults), pointConfig), "".concat(seriesId, "-").concat(index));
       })
-    }))]
+    })]
   });
 });

package/esm/chart/line/LineChart.js

@@ -1,4 +1,4 @@
-const _excluded = ["series", "showArea", "areaType", "type", "onPointClick", "LineComponent", "AreaComponent", "curve", "points", "strokeWidth", "strokeOpacity", "connectNulls", "transition", "opacity", "showXAxis", "showYAxis", "xAxis", "yAxis", "inset", "children"],
+const _excluded = ["series", "showArea", "areaType", "type", "onPointClick", "LineComponent", "AreaComponent", "curve", "points", "strokeWidth", "strokeOpacity", "connectNulls", "transitions", "transition", "opacity", "showXAxis", "showYAxis", "xAxis", "yAxis", "inset", "children"],
   _excluded2 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range"],
   _excluded3 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "id"],
   _excluded4 = ["id", "data", "label", "color", "yAxisId", "legendShape"];
@@ -30,6 +30,7 @@ export const LineChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       strokeWidth,
       strokeOpacity,
       connectNulls,
+      transitions,
       transition,
       opacity,
       showXAxis,
@@ -103,7 +104,7 @@ export const LineChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
     children: [showXAxis && /*#__PURE__*/_jsx(XAxis, _objectSpread({}, xAxisVisualProps)), showYAxis && /*#__PURE__*/_jsx(YAxis, _objectSpread({
       axisId: yAxisId
     }, yAxisVisualProps)), series === null || series === void 0 ? void 0 : series.map(_ref4 => {
-      var _linePropsFromSeries$;
+      var _linePropsFromSeries$, _linePropsFromSeries$2;
       let {
           id,
           data,
@@ -127,6 +128,7 @@ export const LineChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
         strokeOpacity: strokeOpacity,
         strokeWidth: strokeWidth,
         transition: (_linePropsFromSeries$ = linePropsFromSeries.transition) !== null && _linePropsFromSeries$ !== void 0 ? _linePropsFromSeries$ : transition,
+        transitions: (_linePropsFromSeries$2 = linePropsFromSeries.transitions) !== null && _linePropsFromSeries$2 !== void 0 ? _linePropsFromSeries$2 : transitions,
         type: type
       }, linePropsFromSeries), id);
     }), children]

package/esm/chart/line/SolidLine.js

@@ -1,4 +1,4 @@
-const _excluded = ["fill", "stroke", "strokeLinecap", "strokeLinejoin", "strokeOpacity", "strokeWidth", "gradient", "yAxisId", "animate", "transition", "d"];
+const _excluded = ["fill", "stroke", "strokeLinecap", "strokeLinejoin", "strokeOpacity", "strokeWidth", "gradient", "yAxisId", "animate", "transitions", "transition", "d"];
 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; }
@@ -15,6 +15,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * Supports gradient for gradient effects and smooth data transitions.
  */
 export const SolidLine = /*#__PURE__*/memo(_ref => {
+  var _transitions$update;
   let {
       fill = 'none',
       stroke = 'var(--color-fgPrimary)',
@@ -25,6 +26,7 @@ export const SolidLine = /*#__PURE__*/memo(_ref => {
       gradient,
       yAxisId,
       animate,
+      transitions,
       transition,
       d
     } = _ref,
@@ -36,7 +38,7 @@ export const SolidLine = /*#__PURE__*/memo(_ref => {
         animate: animate,
         gradient: gradient,
         id: gradientId,
-        transition: transition,
+        transition: (_transitions$update = transitions === null || transitions === void 0 ? void 0 : transitions.update) !== null && _transitions$update !== void 0 ? _transitions$update : transition,
         yAxisId: yAxisId
       })
     }), /*#__PURE__*/_jsx(Path, _objectSpread({
@@ -49,7 +51,8 @@ export const SolidLine = /*#__PURE__*/memo(_ref => {
       strokeLinejoin: strokeLinejoin,
       strokeOpacity: strokeOpacity,
       strokeWidth: strokeWidth,
-      transition: transition
+      transition: transition,
+      transitions: transitions
     }, props))]
   });
 });