@coinbase/cds-web-visualization 3.4.0-beta.9 → 3.4.0

package/esm/chart/Path.js

@@ -1,5 +1,5 @@
-const _excluded = ["d", "transition"],
-  _excluded2 = ["animate", "clipRect", "clipOffset", "d", "transition"];
+const _excluded = ["d", "initialPath", "transitions"],
+  _excluded2 = ["animate", "clipRect", "clipOffset", "d", "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; }
@@ -9,23 +9,28 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, 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, useId, useMemo } from 'react';
 import { m as motion } from 'framer-motion';
-import { usePathTransition } from './utils/transition';
+import { defaultPathEnterTransition } from './utils/path';
+import { defaultTransition, getTransition, usePathTransition } from './utils/transition';
 import { useCartesianChartContext } from './ChartProvider';
 
 /**
  * Duration in seconds for path enter transition.
+ * @deprecated Use `transitions.enter` on the Path component instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v4
  */
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export const pathEnterTransitionDuration = 0.5;
 const AnimatedPath = /*#__PURE__*/memo(_ref => {
   let {
       d = '',
-      transition
+      initialPath,
+      transitions
     } = _ref,
     pathProps = _objectWithoutProperties(_ref, _excluded);
   const interpolatedPath = usePathTransition({
     currentPath: d,
-    transition
+    initialPath,
+    transitions
   });
   return /*#__PURE__*/_jsx(motion.path, _objectSpread({
     d: interpolatedPath
@@ -37,6 +42,7 @@ export const Path = /*#__PURE__*/memo(_ref2 => {
       clipRect,
       clipOffset = 0,
       d = '',
+      transitions,
       transition
     } = _ref2,
     pathProps = _objectWithoutProperties(_ref2, _excluded2);
@@ -44,6 +50,10 @@ export const Path = /*#__PURE__*/memo(_ref2 => {
   const context = useCartesianChartContext();
   const rect = clipRect !== undefined ? clipRect : context.drawingArea;
   const animate = animateProp !== null && animateProp !== void 0 ? animateProp : context.animate;
+  const clipPath = rect !== null ? "url(#".concat(clipPathId, ")") : undefined;
+  const enterTransition = useMemo(() => getTransition(transitions === null || transitions === void 0 ? void 0 : transitions.enter, animate, defaultPathEnterTransition), [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 shouldAnimateClip = animate && enterTransition !== null;
 
   // The clip offset provides extra padding to prevent path from being cut off
   // Area charts typically use offset=0 for exact clipping, while lines use offset=2 for breathing room
@@ -51,44 +61,50 @@ export const Path = /*#__PURE__*/memo(_ref2 => {
 
   const clipPathAnimation = useMemo(() => {
     if (rect === null) return;
+    const categoryAxisIsX = context.layout !== 'horizontal';
+    const fullWidth = rect.width + totalOffset;
+    const fullHeight = rect.height + totalOffset;
     return {
       hidden: {
-        width: 0
+        width: categoryAxisIsX ? 0 : fullWidth,
+        height: categoryAxisIsX ? fullHeight : 0
       },
       visible: {
-        width: rect.width + totalOffset,
+        width: fullWidth,
+        height: fullHeight,
         transition: {
           type: 'timing',
           duration: pathEnterTransitionDuration
         }
       }
     };
-  }, [rect, totalOffset]);
+  }, [rect, totalOffset, context.layout]);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [rect !== null && /*#__PURE__*/_jsx("defs", {
       children: /*#__PURE__*/_jsx("clipPath", {
         id: clipPathId,
-        children: !animate ? /*#__PURE__*/_jsx("rect", {
+        children: shouldAnimateClip ? /*#__PURE__*/_jsx(motion.rect, {
+          animate: "visible",
           height: rect.height + totalOffset,
+          initial: "hidden",
+          variants: clipPathAnimation,
           width: rect.width + totalOffset,
           x: rect.x - clipOffset,
           y: rect.y - clipOffset
-        }) : /*#__PURE__*/_jsx(motion.rect, {
-          animate: "visible",
+        }) : /*#__PURE__*/_jsx("rect", {
           height: rect.height + totalOffset,
-          initial: "hidden",
-          variants: clipPathAnimation,
+          width: rect.width + totalOffset,
           x: rect.x - clipOffset,
           y: rect.y - clipOffset
         })
       })
-    }), !animate ? /*#__PURE__*/_jsx("path", _objectSpread({
-      clipPath: "url(#".concat(clipPathId, ")"),
-      d: d
-    }, pathProps)) : /*#__PURE__*/_jsx(AnimatedPath, _objectSpread({
-      clipPath: "url(#".concat(clipPathId, ")"),
+    }), /*#__PURE__*/_jsx(AnimatedPath, _objectSpread({
+      clipPath: clipPath,
       d: d,
-      transition: transition
+      transitions: {
+        enter: enterTransition,
+        update: updateTransition
+      }
     }, pathProps))]
   });
 });

package/esm/chart/PeriodSelector.js

@@ -1,13 +1,15 @@
-const _excluded = ["as", "color", "label", "display", "alignItems", "font", "hideDot"],
-  _excluded2 = ["background", "activeBackground", "width", "justifyContent", "TabComponent", "TabsActiveIndicatorComponent"];
-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; }
+const _excluded = ["activeTabRect", "background", "position", "borderRadius", "style"],
+  _excluded2 = ["as", "color", "label", "display", "alignItems", "font", "hideDot"],
+  _excluded3 = ["background", "activeBackground", "width", "justifyContent", "TabComponent", "TabsActiveIndicatorComponent", "className", "classNames", "style", "styles"];
 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 React, { forwardRef, memo, useMemo } from 'react';
+import { cx } from '@coinbase/cds-web';
 import { Box } from '@coinbase/cds-web/layout';
 import { SegmentedTabs, tabsTransitionConfig } from '@coinbase/cds-web/tabs';
 import { SegmentedTab } from '@coinbase/cds-web/tabs/SegmentedTab';
@@ -19,12 +21,13 @@ const MotionBox = motion(Box);
 // Animated active indicator to support smooth transition of background color
 export const PeriodSelectorActiveIndicator = /*#__PURE__*/memo(_ref => {
   let {
-    activeTabRect,
-    background = 'bgPrimaryWash',
-    position = 'absolute',
-    borderRadius = 1000,
-    style
-  } = _ref;
+      activeTabRect,
+      background = 'bgPrimaryWash',
+      position = 'absolute',
+      borderRadius = 1000,
+      style
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   const {
     width,
     height,
@@ -35,12 +38,13 @@ export const PeriodSelectorActiveIndicator = /*#__PURE__*/memo(_ref => {
     x
   }), [width, x]);
   if (!width) return null;
-  return /*#__PURE__*/_jsx(MotionBox, {
+  return /*#__PURE__*/_jsx(MotionBox, _objectSpread({
     animate: activeAnimation,
     borderRadius: borderRadius,
     "data-testid": "period-selector-active-indicator",
     height: height,
     initial: false,
+    left: 0,
     position: position,
     role: "none",
     style: _objectSpread({
@@ -48,7 +52,7 @@ export const PeriodSelectorActiveIndicator = /*#__PURE__*/memo(_ref => {
       transition: 'background-color 0.2s ease'
     }, style),
     transition: tabsTransitionConfig
-  });
+  }, props));
 });
 export const liveTabLabelDefaultElement = 'span';
 // is this bad to use var(--space-1) for height and width?
@@ -63,7 +67,7 @@ export const LiveTabLabel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, re
       font = 'label1',
       hideDot
     } = _ref2,
-    props = _objectWithoutProperties(_ref2, _excluded);
+    props = _objectWithoutProperties(_ref2, _excluded2);
   const Component = as !== null && as !== void 0 ? as : liveTabLabelDefaultElement;
   return /*#__PURE__*/_jsxs(Text, _objectSpread(_objectSpread({
     ref: ref,
@@ -96,16 +100,30 @@ export const PeriodSelector = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3,
       width = '100%',
       justifyContent = 'space-between',
       TabComponent = PeriodSelectorTab,
-      TabsActiveIndicatorComponent = PeriodSelectorActiveIndicator
+      TabsActiveIndicatorComponent = PeriodSelectorActiveIndicator,
+      className,
+      classNames,
+      style,
+      styles
     } = _ref3,
-    props = _objectWithoutProperties(_ref3, _excluded2);
+    props = _objectWithoutProperties(_ref3, _excluded3);
   return /*#__PURE__*/_jsx(SegmentedTabs, _objectSpread({
     ref: ref,
     TabComponent: TabComponent,
     TabsActiveIndicatorComponent: TabsActiveIndicatorComponent,
     activeBackground: activeBackground,
     background: background,
+    className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+    classNames: {
+      tab: classNames === null || classNames === void 0 ? void 0 : classNames.tab,
+      activeIndicator: classNames === null || classNames === void 0 ? void 0 : classNames.activeIndicator
+    },
     justifyContent: justifyContent,
+    style: styles !== null && styles !== void 0 && styles.root ? _objectSpread(_objectSpread({}, style), styles.root) : style,
+    styles: {
+      tab: styles === null || styles === void 0 ? void 0 : styles.tab,
+      activeIndicator: styles === null || styles === void 0 ? void 0 : styles.activeIndicator
+    },
     width: width
   }, props));
 }));

package/esm/chart/area/Area.js

@@ -16,37 +16,47 @@ export const Area = /*#__PURE__*/memo(_ref => {
     baseline,
     connectNulls,
     gradient: gradientProp,
+    transitions,
     transition,
     animate
   } = _ref;
   const {
+    layout,
     getSeries,
     getSeriesData,
     getXScale,
     getYScale,
-    getXAxis
+    getXAxis,
+    getYAxis
   } = useCartesianChartContext();
   const matchedSeries = useMemo(() => getSeries(seriesId), [seriesId, getSeries]);
   const gradient = useMemo(() => gradientProp !== null && gradientProp !== void 0 ? gradientProp : matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.gradient, [gradientProp, matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.gradient]);
   const fill = useMemo(() => fillProp !== null && fillProp !== void 0 ? fillProp : matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.color, [fillProp, matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.color]);
   const sourceData = useMemo(() => getSeriesData(seriesId), [seriesId, getSeriesData]);
-  const xAxis = getXAxis();
-  const xScale = getXScale();
+  const xAxis = getXAxis(matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.xAxisId);
+  const xScale = getXScale(matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.xAxisId);
   const yScale = getYScale(matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.yAxisId);
+  const yAxis = getYAxis(matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.yAxisId);
+  const categoryAxisIsX = useMemo(() => {
+    return layout !== 'horizontal';
+  }, [layout]);
+  const categoryAxis = useMemo(() => {
+    return categoryAxisIsX ? xAxis : yAxis;
+  }, [categoryAxisIsX, xAxis, yAxis]);
   const area = useMemo(() => {
     if (!sourceData || sourceData.length === 0 || !xScale || !yScale) return '';
-
-    // Get numeric x-axis data if available
-    const xData = xAxis !== null && xAxis !== void 0 && xAxis.data && Array.isArray(xAxis.data) && typeof xAxis.data[0] === 'number' ? xAxis.data : undefined;
+    const indexData = categoryAxis !== null && categoryAxis !== void 0 && categoryAxis.data && Array.isArray(categoryAxis.data) && typeof categoryAxis.data[0] === 'number' ? categoryAxis.data : undefined;
     return getAreaPath({
       data: sourceData,
       xScale,
       yScale,
       curve,
-      xData,
-      connectNulls
+      xData: categoryAxisIsX ? indexData : undefined,
+      yData: !categoryAxisIsX ? indexData : undefined,
+      connectNulls,
+      layout
     });
-  }, [sourceData, xScale, yScale, curve, xAxis === null || xAxis === void 0 ? void 0 : xAxis.data, connectNulls]);
+  }, [sourceData, xScale, yScale, curve, categoryAxis, categoryAxisIsX, connectNulls, layout]);
   const AreaComponent = useMemo(() => {
     if (AreaComponentProp) {
       return AreaComponentProp;
@@ -70,6 +80,8 @@ export const Area = /*#__PURE__*/memo(_ref => {
     fillOpacity: fillOpacity,
     gradient: gradient,
     transition: transition,
+    transitions: transitions,
+    xAxisId: matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.xAxisId,
     yAxisId: matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.yAxisId
   });
 });

package/esm/chart/area/AreaChart.js

@@ -1,8 +1,8 @@
-const _excluded = ["series", "stacked", "AreaComponent", "curve", "fillOpacity", "type", "connectNulls", "transition", "LineComponent", "strokeWidth", "showXAxis", "showYAxis", "showLines", "lineType", "xAxis", "yAxis", "inset", "children"],
-  _excluded2 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range"],
+const _excluded = ["series", "stacked", "AreaComponent", "curve", "fillOpacity", "type", "connectNulls", "transitions", "transition", "LineComponent", "strokeWidth", "showXAxis", "showYAxis", "showLines", "lineType", "xAxis", "yAxis", "inset", "children"],
+  _excluded2 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "id"],
   _excluded3 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "id"],
-  _excluded4 = ["id", "data", "label", "color", "yAxisId", "opacity", "LineComponent", "stackId", "transition"],
-  _excluded5 = ["id", "data", "label", "color", "yAxisId", "fill", "fillOpacity", "stackId", "type", "lineType", "transition"];
+  _excluded4 = ["id", "data", "label", "color", "yAxisId", "opacity", "LineComponent", "stackId", "legendShape"],
+  _excluded5 = ["id", "data", "label", "color", "yAxisId", "fill", "fillOpacity", "stackId", "legendShape", "type"];
 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; }
@@ -14,7 +14,7 @@ import { forwardRef, memo, useMemo } from 'react';
 import { XAxis, YAxis } from '../axis';
 import { CartesianChart } from '../CartesianChart';
 import { Line } from '../line/Line';
-import { defaultChartInset, defaultStackId, getChartInset } from '../utils';
+import { defaultStackId } from '../utils';
 import { Area } from './Area';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
@@ -26,6 +26,7 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       fillOpacity,
       type,
       connectNulls,
+      transitions,
       transition,
       LineComponent,
       strokeWidth,
@@ -39,8 +40,6 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       children
     } = _ref,
     chartProps = _objectWithoutProperties(_ref, _excluded);
-  const calculatedInset = useMemo(() => getChartInset(inset, defaultChartInset), [inset]);
-
   // Convert AreaSeries to Series for Chart context
   const chartSeries = useMemo(() => {
     return series === null || series === void 0 ? void 0 : series.map(s => ({
@@ -48,6 +47,7 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       data: s.data,
       label: s.label,
       color: s.color,
+      xAxisId: s.xAxisId,
       yAxisId: s.yAxisId,
       stackId: s.stackId,
       gradient: s.gradient
@@ -72,7 +72,8 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       categoryPadding: xCategoryPadding,
       domain: xDomain,
       domainLimit: xDomainLimit,
-      range: xRange
+      range: xRange,
+      id: xAxisId
     } = _ref2,
     xAxisVisualProps = _objectWithoutProperties(_ref2, _excluded2);
   const _ref3 = yAxis || {},
@@ -86,6 +87,13 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       id: yAxisId
     } = _ref3,
     yAxisVisualProps = _objectWithoutProperties(_ref3, _excluded3);
+  const hasNegativeValues = useMemo(() => {
+    if (!series) return false;
+    return series.some(s => {
+      var _s$data;
+      return (_s$data = s.data) === null || _s$data === void 0 ? void 0 : _s$data.some(value => typeof value === 'number' && value < 0 || Array.isArray(value) && value.some(v => typeof v === 'number' && v < 0));
+    });
+  }, [series]);
   const xAxisConfig = {
     scaleType: xScaleType,
     data: xData,
@@ -94,13 +102,6 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
     domainLimit: xDomainLimit,
     range: xRange
   };
-  const hasNegativeValues = useMemo(() => {
-    if (!series) return false;
-    return series.some(s => {
-      var _s$data;
-      return (_s$data = s.data) === null || _s$data === void 0 ? void 0 : _s$data.some(value => typeof value === 'number' && value < 0 || Array.isArray(value) && value.some(v => typeof v === 'number' && v < 0));
-    });
-  }, [series]);
 
   // Set default min domain to 0 for area chart, but only if there are no negative values
   const yAxisConfig = {
@@ -115,11 +116,13 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
   };
   return /*#__PURE__*/_jsxs(CartesianChart, _objectSpread(_objectSpread({}, chartProps), {}, {
     ref: ref,
-    inset: calculatedInset,
+    inset: inset,
     series: seriesToRender,
     xAxis: xAxisConfig,
     yAxis: yAxisConfig,
-    children: [showXAxis && /*#__PURE__*/_jsx(XAxis, _objectSpread({}, xAxisVisualProps)), showYAxis && /*#__PURE__*/_jsx(YAxis, _objectSpread({
+    children: [showXAxis && /*#__PURE__*/_jsx(XAxis, _objectSpread({
+      axisId: xAxisId
+    }, xAxisVisualProps)), showYAxis && /*#__PURE__*/_jsx(YAxis, _objectSpread({
       axisId: yAxisId
     }, yAxisVisualProps)), series === null || series === void 0 ? void 0 : series.map(_ref4 => {
       let {
@@ -131,7 +134,7 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
           opacity,
           LineComponent,
           stackId,
-          transition: seriesTransition
+          legendShape
         } = _ref4,
         areaPropsFromSeries = _objectWithoutProperties(_ref4, _excluded4);
       return /*#__PURE__*/_jsx(Area, _objectSpread({
@@ -140,7 +143,8 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
         curve: curve,
         fillOpacity: fillOpacity,
         seriesId: id,
-        transition: seriesTransition !== null && seriesTransition !== void 0 ? seriesTransition : transition,
+        transition: transition,
+        transitions: transitions,
         type: type
       }, areaPropsFromSeries), id);
     }), showLines && (series === null || series === void 0 ? void 0 : series.map(_ref5 => {
@@ -153,10 +157,8 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
           fill,
           fillOpacity,
           stackId,
-          type,
-          // Area type (don't pass to Line)
-          lineType: seriesLineType,
-          transition: seriesTransition
+          legendShape,
+          type // Area type (don't pass to Line)
         } = _ref5,
         otherPropsFromSeries = _objectWithoutProperties(_ref5, _excluded5);
       return /*#__PURE__*/_jsx(Line, _objectSpread({
@@ -165,8 +167,9 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
         curve: curve,
         seriesId: id,
         strokeWidth: strokeWidth,
-        transition: seriesTransition !== null && seriesTransition !== void 0 ? seriesTransition : transition,
-        type: seriesLineType !== null && seriesLineType !== void 0 ? seriesLineType : lineType
+        transition: transition,
+        transitions: transitions,
+        type: lineType
       }, otherPropsFromSeries), id);
     })), children]
   }));

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", "xAxisId", "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)',
@@ -26,26 +27,31 @@ export const DottedArea = /*#__PURE__*/memo(_ref => {
       peakOpacity = 1,
       baselineOpacity = 0,
       baseline,
+      xAxisId,
       yAxisId,
       gradient: gradientProp,
       animate,
+      transitions,
       transition
     } = _ref,
     pathProps = _objectWithoutProperties(_ref, _excluded);
   const {
+    layout,
+    getXAxis,
     getYAxis
   } = useCartesianChartContext();
   const patternId = useId();
   const gradientId = useId();
   const maskId = useId();
   const dotCenterPosition = patternSize / 2;
-  const yAxisConfig = getYAxis(yAxisId);
+  const valueAxisConfig = layout !== 'horizontal' ? getYAxis(yAxisId) : getXAxis(xAxisId);
+  const gradientAxis = layout !== 'horizontal' ? 'y' : 'x';
   const gradient = useMemo(() => {
     if (gradientProp) return gradientProp;
-    if (!yAxisConfig) return;
-    const baselineValue = getBaseline(yAxisConfig.domain, baseline);
-    return createGradient(yAxisConfig.domain, baselineValue, fill, peakOpacity, baselineOpacity);
-  }, [gradientProp, yAxisConfig, fill, baseline, peakOpacity, baselineOpacity]);
+    if (!valueAxisConfig) return;
+    const baselineValue = getBaseline(valueAxisConfig.domain, baseline);
+    return createGradient(valueAxisConfig.domain, baselineValue, fill, peakOpacity, baselineOpacity, gradientAxis);
+  }, [gradientProp, valueAxisConfig, fill, baseline, peakOpacity, baselineOpacity, gradientAxis]);
   return /*#__PURE__*/_jsxs("g", {
     children: [/*#__PURE__*/_jsxs("defs", {
       children: [/*#__PURE__*/_jsx("pattern", {
@@ -67,13 +73,15 @@ 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,
+        xAxisId: xAxisId,
         yAxisId: yAxisId
       })]
     }), /*#__PURE__*/_jsx(Path, _objectSpread({
@@ -81,7 +89,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", "xAxisId", "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)',
@@ -28,30 +29,36 @@ export const GradientArea = /*#__PURE__*/memo(_ref => {
       peakOpacity = 0.3,
       baselineOpacity = 0,
       baseline,
+      xAxisId,
       yAxisId,
       gradient: gradientProp,
       animate,
+      transitions,
       transition
     } = _ref,
     pathProps = _objectWithoutProperties(_ref, _excluded);
   const {
+    layout,
+    getXAxis,
     getYAxis
   } = useCartesianChartContext();
   const patternId = useId();
-  const yAxisConfig = getYAxis(yAxisId);
+  const valueAxisConfig = layout !== 'horizontal' ? getYAxis(yAxisId) : getXAxis(xAxisId);
+  const gradientAxis = layout !== 'horizontal' ? 'y' : 'x';
   const gradient = useMemo(() => {
     if (gradientProp) return gradientProp;
-    if (!yAxisConfig) return;
-    const baselineValue = getBaseline(yAxisConfig.domain, baseline);
-    return createGradient(yAxisConfig.domain, baselineValue, fill, peakOpacity, baselineOpacity);
-  }, [gradientProp, yAxisConfig, fill, baseline, peakOpacity, baselineOpacity]);
+    if (!valueAxisConfig) return;
+    const baselineValue = getBaseline(valueAxisConfig.domain, baseline);
+    return createGradient(valueAxisConfig.domain, baselineValue, fill, peakOpacity, baselineOpacity, gradientAxis);
+  }, [gradientProp, valueAxisConfig, fill, baseline, peakOpacity, baselineOpacity, gradientAxis]);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [gradient && /*#__PURE__*/_jsx("defs", {
       children: /*#__PURE__*/_jsx(Gradient, {
         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,
+        xAxisId: xAxisId,
         yAxisId: yAxisId
       })
     }), /*#__PURE__*/_jsx(Path, _objectSpread({
@@ -59,7 +66,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", "xAxisId", "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,15 @@ 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,
+      xAxisId,
       yAxisId,
       animate,
+      transitions,
       transition,
       gradient
     } = _ref,
@@ -33,7 +36,8 @@ 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,
+        xAxisId: xAxisId,
         yAxisId: yAxisId
       })
     }), /*#__PURE__*/_jsx(Path, _objectSpread({
@@ -41,7 +45,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/axis/Axis.js

@@ -5,21 +5,7 @@ export const axisTickMarkStyles = "\n  stroke: var(--color-fg);\n  stroke-lineca
 /**
  * Animation variants for axis elements - updates (used for both grid lines and tick labels)
  */
-export const axisUpdateAnimationVariants = {
-  initial: {
-    opacity: 0
-  },
-  animate: {
-    opacity: 1,
-    transition: {
-      duration: accessoryFadeTransitionDuration,
-      delay: accessoryFadeTransitionDuration
-    }
-  },
-  exit: {
-    opacity: 0,
-    transition: {
-      duration: accessoryFadeTransitionDuration
-    }
-  }
+export const axisUpdateAnimationTransition = {
+  duration: accessoryFadeTransitionDuration,
+  ease: 'easeOut'
 };