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

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"],
+const _excluded = ["series", "stacked", "showXAxis", "showYAxis", "xAxis", "yAxis", "inset", "children", "barPadding", "BarComponent", "fillOpacity", "stroke", "strokeWidth", "borderRadius", "roundBaseline", "BarStackComponent", "stackGap", "barMinSize", "stackMinSize", "transition"],
   _excluded2 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range"],
   _excluded3 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "id"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -8,11 +8,6 @@ import { XAxis, YAxis } from '../axis';
 import { CartesianChart } from '../CartesianChart';
 import { defaultChartInset, defaultStackId, getChartInset } from '../utils';
 import { BarPlot } from './BarPlot';
-
-/**
- * Series type specifically for bar charts - supports both single numbers and tuples,
- * and allows individual customization of Bar props per series.
- */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -22,7 +17,7 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       showYAxis,
       xAxis,
       yAxis,
-      inset: userInset,
+      inset,
       children,
       barPadding,
       BarComponent,
@@ -34,44 +29,26 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       BarStackComponent,
       stackGap,
       barMinSize,
-      stackMinSize
+      stackMinSize,
+      transition
     } = _ref,
     chartProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const calculatedInset = useMemo(() => getChartInset(userInset, defaultChartInset), [userInset]);
-
-  // Convert BarSeries to Series for Chart context
-  const chartSeries = useMemo(() => {
-    return series == null ? void 0 : series.map(s => ({
-      id: s.id,
-      data: s.data,
-      label: s.label,
-      color: s.color,
-      yAxisId: s.yAxisId,
-      stackId: s.stackId
-    }));
-  }, [series]);
+  const calculatedInset = useMemo(() => getChartInset(inset, defaultChartInset), [inset]);
   const transformedSeries = useMemo(() => {
-    if (!stacked || !chartSeries) return chartSeries;
-    return chartSeries.map(s => {
-      var _s$stackId;
-      return _extends({}, s, {
-        stackId: (_s$stackId = s.stackId) != null ? _s$stackId : defaultStackId
-      });
-    });
-  }, [chartSeries, stacked]);
-  const seriesToRender = transformedSeries != null ? transformedSeries : chartSeries;
-
-  // Keep the original series with bar-specific props for BarPlot
-  const barSeriesToRender = useMemo(() => {
     if (!stacked || !series) return series;
     return series.map(s => {
-      var _s$stackId2;
+      var _s$stackId;
       return _extends({}, s, {
-        stackId: (_s$stackId2 = s.stackId) != null ? _s$stackId2 : defaultStackId
+        stackId: (_s$stackId = s.stackId) != null ? _s$stackId : defaultStackId
       });
     });
   }, [series, stacked]);
 
+  // Unlike other charts with custom props per series, we do not need to pick out
+  // the props from each series that shouldn't be passed to CartesianChart
+  const seriesToRender = transformedSeries != null ? transformedSeries : series;
+  const seriesIds = seriesToRender == null ? void 0 : seriesToRender.map(s => s.id);
+
   // Split axis props into config props for Chart and visual props for axis components
   const _ref2 = xAxis || {},
     {
@@ -137,11 +114,12 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       borderRadius: borderRadius,
       fillOpacity: fillOpacity,
       roundBaseline: roundBaseline,
-      seriesIds: barSeriesToRender == null ? void 0 : barSeriesToRender.map(s => s.id),
+      seriesIds: seriesIds,
       stackGap: stackGap,
       stackMinSize: stackMinSize,
       stroke: stroke,
-      strokeWidth: strokeWidth
+      strokeWidth: strokeWidth,
+      transition: transition
     }), children]
   }));
 }));

package/esm/chart/bar/BarPlot.js

@@ -1,9 +1,9 @@
 import { memo, useId, useMemo } from 'react';
-import { ClipPath, Defs, G, Rect } from 'react-native-svg';
+import { Group, Skia } from '@shopify/react-native-skia';
 import { useCartesianChartContext } from '../ChartProvider';
 import { defaultAxisId } from '../utils';
 import { BarStackGroup } from './BarStackGroup';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * BarPlot component that handles multiple series with proper stacking coordination.
  * Groups series by stack ID + y-axis ID combination and renders BarStackGroup for each group.
@@ -23,7 +23,8 @@ export const BarPlot = /*#__PURE__*/memo(_ref => {
     BarStackComponent,
     stackGap,
     barMinSize,
-    stackMinSize
+    stackMinSize,
+    transition
   } = _ref;
   const {
     series: allSeries,
@@ -58,39 +59,44 @@ export const BarPlot = /*#__PURE__*/memo(_ref => {
     });
     return Array.from(groups.values());
   }, [targetSeries]);
-  if (!drawingArea) {
+
+  // Create clip path for the entire chart area (shared by all bars)
+  const clipPath = useMemo(() => {
+    if (!drawingArea) return null;
+    const clip = Skia.Path.Make();
+    clip.addRect({
+      x: drawingArea.x,
+      y: drawingArea.y,
+      width: drawingArea.width,
+      height: drawingArea.height
+    });
+    return clip;
+  }, [drawingArea]);
+  if (!clipPath) {
     return null;
   }
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Defs, {
-      children: /*#__PURE__*/_jsx(ClipPath, {
-        id: clipPathId,
-        children: /*#__PURE__*/_jsx(Rect, {
-          height: drawingArea.height,
-          width: drawingArea.width,
-          x: drawingArea.x,
-          y: drawingArea.y
-        })
-      })
-    }), /*#__PURE__*/_jsx(G, {
-      clipPath: "url(#" + clipPathId + ")",
-      children: stackGroups.map((group, stackIndex) => /*#__PURE__*/_jsx(BarStackGroup, {
-        BarComponent: defaultBarComponent,
-        BarStackComponent: BarStackComponent,
-        barMinSize: barMinSize,
-        barPadding: barPadding,
-        borderRadius: defaultBorderRadius,
-        fillOpacity: defaultFillOpacity,
-        roundBaseline: roundBaseline,
-        series: group.series,
-        stackGap: stackGap,
-        stackIndex: stackIndex,
-        stackMinSize: stackMinSize,
-        stroke: defaultStroke,
-        strokeWidth: defaultStrokeWidth,
-        totalStacks: stackGroups.length,
-        yAxisId: group.yAxisId
-      }, group.stackId))
-    })]
+
+  // Note: Clipping is now handled here at the BarPlot level (one clip path for all bars!)
+  // This is much more efficient than creating a clip path for each individual bar
+  return /*#__PURE__*/_jsx(Group, {
+    clip: clipPath,
+    children: stackGroups.map((group, stackIndex) => /*#__PURE__*/_jsx(BarStackGroup, {
+      BarComponent: defaultBarComponent,
+      BarStackComponent: BarStackComponent,
+      barMinSize: barMinSize,
+      barPadding: barPadding,
+      borderRadius: defaultBorderRadius,
+      fillOpacity: defaultFillOpacity,
+      roundBaseline: roundBaseline,
+      series: group.series,
+      stackGap: stackGap,
+      stackIndex: stackIndex,
+      stackMinSize: stackMinSize,
+      stroke: defaultStroke,
+      strokeWidth: defaultStrokeWidth,
+      totalStacks: stackGroups.length,
+      transition: transition,
+      yAxisId: group.yAxisId
+    }, group.stackId))
   });
 });

package/esm/chart/bar/BarStack.js

@@ -2,9 +2,12 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React, { memo, useMemo } from 'react';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { useCartesianChartContext } from '../ChartProvider';
+import { evaluateGradientAtValue, getGradientStops } from '../utils/gradient';
+import { convertToSerializableScale } from '../utils/scale';
 import { Bar } from './Bar';
 import { DefaultBarStack } from './DefaultBarStack';
 import { jsx as _jsx } from "react/jsx-runtime";
+const EPSILON = 1e-4;
 /**
  * BarStack component that renders a single stack of bars at a specific category index.
  * Handles the stacking logic for bars within a single category.
@@ -26,14 +29,17 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
     stackGap,
     barMinSize,
     stackMinSize,
-    roundBaseline
+    roundBaseline,
+    transition
   } = _ref;
   const theme = useTheme();
   const {
     getSeriesData,
-    getXAxis
+    getXAxis,
+    getXScale
   } = useCartesianChartContext();
   const xAxis = getXAxis();
+  const xScale = getXScale();
   const baseline = useMemo(() => {
     var _yScale;
     const domain = yScale.domain();
@@ -42,6 +48,25 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
     const baseline = (_yScale = yScale(baselineValue)) != null ? _yScale : rect.y + rect.height;
     return Math.max(rect.y, Math.min(baseline, rect.y + rect.height));
   }, [rect.height, rect.y, yScale]);
+  const seriesGradients = useMemo(() => {
+    return series.map(s => {
+      if (!s.gradient || !xScale || !yScale) return;
+      const gradientScale = s.gradient.axis === 'x' ? xScale : yScale;
+      const serializableScale = convertToSerializableScale(gradientScale);
+      if (!serializableScale) return;
+      const domain = {
+        min: serializableScale.domain[0],
+        max: serializableScale.domain[1]
+      };
+      const stops = getGradientStops(s.gradient.stops, domain);
+      return {
+        seriesId: s.id,
+        gradient: s.gradient,
+        scale: serializableScale,
+        stops
+      };
+    });
+  }, [series, xScale, yScale]);
 
   // Calculate bars for this specific category
   const {
@@ -98,6 +123,24 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
       // Update stack bounds
       minY = Math.min(minY, y);
       maxY = Math.max(maxY, y + height);
+
+      // Determine fill color, respecting gradient if present
+      let barFill = s.color || theme.color.fgPrimary;
+
+      // Evaluate gradient if provided (using precomputed stops)
+      const seriesGradientConfig = seriesGradients.find(g => (g == null ? void 0 : g.seriesId) === s.id);
+      if (seriesGradientConfig) {
+        var _seriesGradientConfig;
+        const axis = (_seriesGradientConfig = seriesGradientConfig.gradient.axis) != null ? _seriesGradientConfig : 'y';
+        // For x-axis gradient, use the categoryIndex
+        // For y-axis gradient, use the actual data value
+        const dataValue = axis === 'x' ? categoryIndex : top;
+        const evaluatedColor = evaluateGradientAtValue(seriesGradientConfig.stops, dataValue, seriesGradientConfig.scale);
+        if (evaluatedColor) {
+          // Only apply gradient color if fill is not explicitly set
+          barFill = evaluatedColor;
+        }
+      }
       allBars.push({
         seriesId: s.id,
         x,
@@ -106,15 +149,10 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
         height,
         dataY: value,
         // Store the actual data value
-        // Use series-specific properties, falling back to defaults
-        BarComponent: s.BarComponent,
-        fill: s.fill || s.color || theme.color.fgPrimary,
-        fillOpacity: s.fillOpacity,
-        stroke: s.stroke,
-        strokeWidth: s.strokeWidth,
-        // Pass context data for custom components
-        roundTop: roundBaseline || barTop !== baseline,
-        roundBottom: roundBaseline || barBottom !== baseline,
+        fill: barFill,
+        // Check if the bar should be rounded based on the baseline, with an epsilon to handle floating-point rounding
+        roundTop: roundBaseline || Math.abs(barTop - baseline) >= EPSILON,
+        roundBottom: roundBaseline || Math.abs(barBottom - baseline) >= EPSILON,
         shouldApplyGap
       });
     });
@@ -200,8 +238,7 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
         if (bar.height < barMinSize) {
           var _yScale4, _yScale5, _yScale6, _yScale7;
           const heightIncrease = barMinSize - bar.height;
-          const bottom = 0;
-          const top = 0;
+          const [bottom, top] = bar.dataY.sort((a, b) => a - b);
 
           // Determine how to expand the bar
           let newBottom = bottom;
@@ -344,8 +381,7 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
 
         const bar = allBars[0];
         const heightIncrease = stackMinSize - bar.height;
-        const bottom = 0;
-        const top = 0;
+        const [bottom, top] = bar.dataY.sort((a, b) => a - b);
 
         // Determine how to expand the bar (same logic as barMinSize)
         let newBottom = bottom;
@@ -474,37 +510,38 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
       bars: allBars,
       stackRect: stackBounds
     };
-  }, [series, x, width, getSeriesData, categoryIndex, roundBaseline, baseline, stackGap, barMinSize, stackMinSize, yScale, theme.color.fgPrimary]);
+  }, [series, x, width, getSeriesData, categoryIndex, roundBaseline, baseline, stackGap, barMinSize, stackMinSize, yScale, seriesGradients, theme.color.fgPrimary]);
   const xData = xAxis != null && xAxis.data && Array.isArray(xAxis.data) && typeof xAxis.data[0] === 'number' ? xAxis.data : undefined;
   const dataX = xData ? xData[categoryIndex] : categoryIndex;
-  const barElements = bars.map((bar, index) => {
-    var _bar$fillOpacity, _bar$stroke, _bar$strokeWidth;
-    return /*#__PURE__*/_jsx(Bar, {
-      BarComponent: bar.BarComponent || defaultBarComponent,
-      borderRadius: borderRadius,
-      dataX: dataX,
-      dataY: bar.dataY,
-      fill: bar.fill,
-      fillOpacity: (_bar$fillOpacity = bar.fillOpacity) != null ? _bar$fillOpacity : defaultFillOpacity,
-      height: bar.height,
-      originY: baseline,
-      roundBottom: bar.roundBottom,
-      roundTop: bar.roundTop,
-      stroke: (_bar$stroke = bar.stroke) != null ? _bar$stroke : defaultStroke,
-      strokeWidth: (_bar$strokeWidth = bar.strokeWidth) != null ? _bar$strokeWidth : defaultStrokeWidth,
-      width: bar.width,
-      x: bar.x,
-      y: bar.y
-    }, bar.seriesId + "-" + categoryIndex + "-" + index);
-  });
-  const stackRoundBottom = roundBaseline || stackRect.y + stackRect.height !== baseline;
-  const stackRoundTop = roundBaseline || stackRect.y !== baseline;
+  const barElements = bars.map((bar, index) => /*#__PURE__*/_jsx(Bar, {
+    BarComponent: defaultBarComponent,
+    borderRadius: borderRadius,
+    dataX: dataX,
+    dataY: bar.dataY,
+    fill: bar.fill,
+    fillOpacity: defaultFillOpacity,
+    height: bar.height,
+    originY: baseline,
+    roundBottom: bar.roundBottom,
+    roundTop: bar.roundTop,
+    stroke: defaultStroke,
+    strokeWidth: defaultStrokeWidth,
+    transition: transition,
+    width: bar.width,
+    x: bar.x,
+    y: bar.y
+  }, bar.seriesId + "-" + categoryIndex + "-" + index));
+
+  // Check if the bar should be rounded based on the baseline, with an epsilon to handle floating-point rounding
+  const stackRoundBottom = roundBaseline || Math.abs(stackRect.y + stackRect.height - baseline) >= EPSILON;
+  const stackRoundTop = roundBaseline || Math.abs(stackRect.y - baseline) >= EPSILON;
   return /*#__PURE__*/_jsx(BarStackComponent, {
     borderRadius: borderRadius,
     categoryIndex: categoryIndex,
     height: stackRect.height,
     roundBottom: stackRoundBottom,
     roundTop: stackRoundTop,
+    transition: transition,
     width: stackRect.width,
     x: stackRect.x,
     y: stackRect.y,

package/esm/chart/bar/BarStackGroup.js

@@ -19,26 +19,15 @@ export const BarStackGroup = /*#__PURE__*/memo(_ref => {
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
-    getSeriesData,
     getXScale,
     getYScale,
-    drawingArea
+    drawingArea,
+    dataLength
   } = useCartesianChartContext();
   const xScale = getXScale();
   const yScale = getYScale(yAxisId);
-  const maxDataLength = useMemo(() => {
-    if (!series || series.length === 0) return 0;
-    let maxLength = 0;
-    series.forEach(s => {
-      const data = getSeriesData(s.id);
-      if (data && data.length > maxLength) {
-        maxLength = data.length;
-      }
-    });
-    return maxLength;
-  }, [series, getSeriesData]);
   const stackConfigs = useMemo(() => {
-    if (!xScale || !yScale || !drawingArea || maxDataLength === 0) return [];
+    if (!xScale || !yScale || !drawingArea || dataLength === 0) return [];
     if (!isCategoricalScale(xScale)) {
       return [];
     }
@@ -51,7 +40,8 @@ export const BarStackGroup = /*#__PURE__*/memo(_ref => {
     const configs = [];
 
     // Calculate position for each category
-    for (let categoryIndex = 0; categoryIndex < maxDataLength; categoryIndex++) {
+    // todo: look at using xDomain for this instead of dataLength
+    for (let categoryIndex = 0; categoryIndex < dataLength; categoryIndex++) {
       // Get x position for this category
       const categoryX = xScale(categoryIndex);
       if (categoryX !== undefined) {
@@ -65,7 +55,7 @@ export const BarStackGroup = /*#__PURE__*/memo(_ref => {
       }
     }
     return configs;
-  }, [xScale, yScale, drawingArea, maxDataLength, stackIndex, totalStacks, barPadding]);
+  }, [xScale, yScale, drawingArea, dataLength, stackIndex, totalStacks, barPadding]);
   if (xScale && !isCategoricalScale(xScale)) {
     throw new Error('BarStackGroup requires a band scale for x-axis. See https://cds.coinbase.com/components/graphs/XAxis/#scale-type');
   }

package/esm/chart/bar/DefaultBar.js

@@ -1,14 +1,11 @@
-import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
-import { runOnJS, useAnimatedReaction, useSharedValue, withTiming } from 'react-native-reanimated';
-import { Path } from 'react-native-svg';
-import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
+import { memo, useMemo } from 'react';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import * as interpolate from 'd3-interpolate-path';
 import { useCartesianChartContext } from '../ChartProvider';
+import { Path } from '../Path';
 import { getBarPath } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * Default bar component that renders a solid bar with animation.
+ * Default bar component that renders a solid bar with animation support.
  */
 export const DefaultBar = /*#__PURE__*/memo(_ref => {
   let {
@@ -23,56 +20,37 @@ export const DefaultBar = /*#__PURE__*/memo(_ref => {
     fill,
     fillOpacity = 1,
     stroke,
-    strokeWidth
+    strokeWidth,
+    originY,
+    transition
   } = _ref;
-  const pathRef = useRef(null);
   const {
     animate
   } = useCartesianChartContext();
   const theme = useTheme();
-  const animationProgress = useSharedValue(0);
-  const targetPath = useMemo(() => {
-    return d || getBarPath(x, y, width, height, borderRadius != null ? borderRadius : 0, roundTop != null ? roundTop : true, roundBottom != null ? roundBottom : true);
-  }, [d, x, y, width, height, borderRadius, roundTop, roundBottom]);
-  const previousPath = usePreviousValue(targetPath);
-  const fromPath = useMemo(() => {
-    if (!animate) return targetPath;
-    return previousPath || targetPath;
-  }, [animate, previousPath, targetPath]);
-  const pathInterpolator = useMemo(() => interpolate.interpolatePath(fromPath, targetPath), [fromPath, targetPath]);
-  const updatePath = useCallback(progress => {
-    var _pathRef$current;
-    const val = Number(progress.toFixed(4));
-    (_pathRef$current = pathRef.current) == null || _pathRef$current.setNativeProps({
-      d: pathInterpolator(val)
-    });
-  }, [pathInterpolator]);
   const defaultFill = fill || theme.color.fgPrimary;
-  useAnimatedReaction(() => animationProgress.value, progress => {
-    'worklet';
-
-    runOnJS(updatePath)(progress);
-  }, [updatePath]);
-  useEffect(() => {
-    if (!pathRef.current) return;
-    if (!animate) {
-      pathRef.current.setNativeProps({
-        d: targetPath
-      });
-      animationProgress.value = 1;
-      return;
-    }
-    animationProgress.value = 0;
-    animationProgress.value = withTiming(1, {
-      duration: 200
-    });
-  }, [animate, animationProgress, targetPath]);
+  const targetPath = useMemo(() => {
+    const effectiveBorderRadius = borderRadius != null ? borderRadius : 0;
+    const effectiveRoundTop = roundTop != null ? roundTop : true;
+    const effectiveRoundBottom = roundBottom != null ? roundBottom : true;
+    return d || getBarPath(x, y, width, height, effectiveBorderRadius, effectiveRoundTop, effectiveRoundBottom);
+  }, [x, y, width, height, borderRadius, roundTop, roundBottom, d]);
+  const initialPath = useMemo(() => {
+    const effectiveBorderRadius = borderRadius != null ? borderRadius : 0;
+    const effectiveRoundTop = roundTop != null ? roundTop : true;
+    const effectiveRoundBottom = roundBottom != null ? roundBottom : true;
+    const baselineY = originY != null ? originY : y + height;
+    return getBarPath(x, baselineY, width, 1, effectiveBorderRadius, effectiveRoundTop, effectiveRoundBottom);
+  }, [x, originY, y, height, width, borderRadius, roundTop, roundBottom]);
   return /*#__PURE__*/_jsx(Path, {
-    ref: pathRef,
-    d: fromPath,
-    fill: defaultFill,
+    animate: animate,
+    clipPath: null,
+    d: targetPath,
+    fill: stroke ? 'none' : defaultFill,
     fillOpacity: fillOpacity,
+    initialPath: initialPath,
     stroke: stroke,
-    strokeWidth: strokeWidth
+    strokeWidth: strokeWidth,
+    transition: transition
   });
 });

package/esm/chart/bar/DefaultBarStack.js

@@ -1,11 +1,9 @@
-import { memo, useCallback, useEffect, useId, useMemo, useRef } from 'react';
-import { runOnJS, useAnimatedReaction, useSharedValue, withTiming } from 'react-native-reanimated';
-import { ClipPath, Defs, G, Path } from 'react-native-svg';
-import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
-import * as interpolate from 'd3-interpolate-path';
+import { memo, useMemo } from 'react';
+import { Group } from '@shopify/react-native-skia';
 import { useCartesianChartContext } from '../ChartProvider';
 import { getBarPath } from '../utils';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePathTransition } from '../utils/transition';
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Default stack component that renders children in a group with animated clip path.
  */
@@ -19,64 +17,31 @@ export const DefaultBarStack = /*#__PURE__*/memo(_ref => {
     borderRadius = 4,
     roundTop = true,
     roundBottom = true,
-    yOrigin
+    yOrigin,
+    transition
   } = _ref;
-  const pathRef = useRef(null);
   const {
     animate
   } = useCartesianChartContext();
-  const clipPathId = useId();
-  const animationProgress = useSharedValue(0);
-  const targetClipPath = useMemo(() => {
+
+  // Generate target clip path (full bar)
+  const targetPath = useMemo(() => {
     return getBarPath(x, y, width, height, borderRadius, roundTop, roundBottom);
   }, [x, y, width, height, borderRadius, roundTop, roundBottom]);
-  const previousClipPath = usePreviousValue(targetClipPath);
-  const initialClipPath = useMemo(() => {
-    return getBarPath(x, yOrigin != null ? yOrigin : y + height, width, 1, borderRadius, roundTop, roundBottom);
-  }, [x, yOrigin, y, height, width, borderRadius, roundTop, roundBottom]);
-  const fromClipPath = useMemo(() => {
-    if (!animate) return targetClipPath;
-    return previousClipPath || initialClipPath;
-  }, [animate, previousClipPath, initialClipPath, targetClipPath]);
-  const clipPathInterpolator = useMemo(() => interpolate.interpolatePath(fromClipPath, targetClipPath), [fromClipPath, targetClipPath]);
-  const updateClipPath = useCallback(progress => {
-    var _pathRef$current;
-    const val = Number(progress.toFixed(4));
-    (_pathRef$current = pathRef.current) == null || _pathRef$current.setNativeProps({
-      d: clipPathInterpolator(val)
-    });
-  }, [clipPathInterpolator]);
-  useAnimatedReaction(() => animationProgress.value, progress => {
-    'worklet';
 
-    runOnJS(updateClipPath)(progress);
-  }, [updateClipPath]);
-  useEffect(() => {
-    if (!pathRef.current) return;
-    if (!animate) {
-      pathRef.current.setNativeProps({
-        d: targetClipPath
-      });
-      animationProgress.value = 1;
-      return;
-    }
-    animationProgress.value = 0;
-    animationProgress.value = withTiming(1, {
-      duration: 300
-    });
-  }, [animate, animationProgress, targetClipPath, initialClipPath]);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Defs, {
-      children: /*#__PURE__*/_jsx(ClipPath, {
-        id: clipPathId,
-        children: /*#__PURE__*/_jsx(Path, {
-          ref: pathRef,
-          d: fromClipPath
-        })
-      })
-    }), /*#__PURE__*/_jsx(G, {
-      clipPath: "url(#" + clipPathId + ")",
-      children: children
-    })]
+  // Initial clip path for entry animation (bar at baseline with minimal height)
+  const initialPath = useMemo(() => {
+    const baselineY = yOrigin != null ? 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,
+    transition
+  });
+  const clipPath = animate ? animatedClipPath : targetPath;
+  return /*#__PURE__*/_jsx(Group, {
+    clip: clipPath,
+    children: children
   });
 });