@coinbase/cds-mobile-visualization 3.8.1 → 4.0.0

package/esm/chart/bar/BarChart.js

@@ -1,122 +0,0 @@
-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", "baseline", "id"],
-  _excluded3 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "baseline", "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); }
-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 { forwardRef, memo, useMemo } from 'react';
-import { XAxis, YAxis } from '../axis';
-import { CartesianChart } from '../CartesianChart';
-import { defaultStackId, withBaselineDomain } from '../utils';
-import { BarPlot } from './BarPlot';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-      series: seriesProp,
-      stacked,
-      showXAxis,
-      showYAxis,
-      xAxis,
-      yAxis,
-      inset,
-      children,
-      barPadding,
-      BarComponent,
-      fillOpacity,
-      stroke,
-      strokeWidth,
-      borderRadius,
-      roundBaseline,
-      BarStackComponent,
-      stackGap,
-      barMinSize,
-      stackMinSize,
-      transitions,
-      transition
-    } = _ref,
-    chartProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const series = useMemo(() => {
-    if (!stacked || !seriesProp) return seriesProp;
-    return seriesProp.map(s => {
-      var _s$stackId;
-      return _extends({}, s, {
-        stackId: (_s$stackId = s.stackId) != null ? _s$stackId : defaultStackId
-      });
-    });
-  }, [seriesProp, stacked]);
-  const seriesIds = useMemo(() => series == null ? void 0 : series.map(s => s.id), [series]);
-  const isHorizontalLayout = chartProps.layout === 'horizontal';
-  const defaultXScaleType = isHorizontalLayout ? 'linear' : 'band';
-  const defaultYScaleType = isHorizontalLayout ? 'band' : 'linear';
-
-  // Split axis props into config props for Chart and visual props for axis components
-  const _ref2 = xAxis || {},
-    {
-      scaleType: xScaleType,
-      data: xData,
-      categoryPadding: xCategoryPadding,
-      domain: xDomain,
-      domainLimit: xDomainLimit,
-      range: xRange,
-      baseline: xBaseline,
-      id: xAxisId
-    } = _ref2,
-    xAxisVisualProps = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-  const _ref3 = yAxis || {},
-    {
-      scaleType: yScaleType,
-      data: yData,
-      categoryPadding: yCategoryPadding,
-      domain: yDomain,
-      domainLimit: yDomainLimit,
-      range: yRange,
-      baseline: yBaseline,
-      id: yAxisId
-    } = _ref3,
-    yAxisVisualProps = _objectWithoutPropertiesLoose(_ref3, _excluded3);
-  const valueAxisBaseline = isHorizontalLayout ? xBaseline : yBaseline;
-  const xAxisConfig = useMemo(() => ({
-    scaleType: xScaleType != null ? xScaleType : defaultXScaleType,
-    data: xData,
-    categoryPadding: xCategoryPadding,
-    domain: isHorizontalLayout ? withBaselineDomain(xDomain, valueAxisBaseline) : xDomain,
-    domainLimit: xDomainLimit,
-    range: xRange,
-    baseline: xBaseline
-  }), [xScaleType, defaultXScaleType, xData, xCategoryPadding, isHorizontalLayout, xDomain, xDomainLimit, xRange, xBaseline, valueAxisBaseline]);
-  const yAxisConfig = useMemo(() => ({
-    scaleType: yScaleType != null ? yScaleType : defaultYScaleType,
-    data: yData,
-    categoryPadding: yCategoryPadding,
-    domain: !isHorizontalLayout ? withBaselineDomain(yDomain, valueAxisBaseline) : yDomain,
-    domainLimit: yDomainLimit,
-    range: yRange,
-    baseline: yBaseline
-  }), [yScaleType, defaultYScaleType, yData, yCategoryPadding, isHorizontalLayout, yDomain, yDomainLimit, yRange, yBaseline, valueAxisBaseline]);
-  return /*#__PURE__*/_jsxs(CartesianChart, _extends({}, chartProps, {
-    ref: ref,
-    inset: inset,
-    series: series,
-    xAxis: xAxisConfig,
-    yAxis: yAxisConfig,
-    children: [showXAxis && /*#__PURE__*/_jsx(XAxis, _extends({
-      axisId: xAxisId
-    }, xAxisVisualProps)), showYAxis && /*#__PURE__*/_jsx(YAxis, _extends({
-      axisId: yAxisId
-    }, yAxisVisualProps)), /*#__PURE__*/_jsx(BarPlot, {
-      BarComponent: BarComponent,
-      BarStackComponent: BarStackComponent,
-      barMinSize: barMinSize,
-      barPadding: barPadding,
-      borderRadius: borderRadius,
-      fillOpacity: fillOpacity,
-      roundBaseline: roundBaseline,
-      seriesIds: seriesIds,
-      stackGap: stackGap,
-      stackMinSize: stackMinSize,
-      stroke: stroke,
-      strokeWidth: strokeWidth,
-      transition: transition,
-      transitions: transitions
-    }), children]
-  }));
-}));

package/esm/chart/bar/BarPlot.js

@@ -1,106 +0,0 @@
-import { memo, useEffect, useMemo, useState } from 'react';
-import { useSharedValue } from 'react-native-reanimated';
-import { Group, Skia, usePathInterpolation } from '@shopify/react-native-skia';
-import { useCartesianChartContext } from '../ChartProvider';
-import { getStackGroups } from '../utils';
-import { buildTransition, instantTransition } from '../utils/transition';
-import { BarStackGroup } from './BarStackGroup';
-import { jsx as _jsx } from "react/jsx-runtime";
-const makeClipPath = area => {
-  const path = Skia.Path.Make();
-  path.addRect(area);
-  return path;
-};
-
-/**
- * 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.
- * This allows series with different y-axes to be rendered side by side while preventing
- * cross-axis stacking (e.g., comparing $1M vs $1B companies on different scales).
- */
-export const BarPlot = /*#__PURE__*/memo(_ref => {
-  let {
-    seriesIds,
-    barPadding = 0.1,
-    BarComponent: defaultBarComponent,
-    fillOpacity: defaultFillOpacity,
-    stroke: defaultStroke,
-    strokeWidth: defaultStrokeWidth,
-    borderRadius: defaultBorderRadius,
-    roundBaseline,
-    BarStackComponent,
-    stackGap,
-    barMinSize,
-    stackMinSize,
-    transitions,
-    transition
-  } = _ref;
-  const {
-    animate,
-    series: allSeries,
-    drawingArea
-  } = useCartesianChartContext();
-  const targetSeries = useMemo(() => {
-    // Then filter by seriesIds if provided
-    if (seriesIds !== undefined) {
-      return allSeries.filter(s => seriesIds.includes(s.id));
-    }
-    return allSeries;
-  }, [allSeries, seriesIds]);
-  const stackGroups = useMemo(() => getStackGroups(targetSeries), [targetSeries]);
-  const clipUpdateTransition = useMemo(() => (transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : instantTransition, [transitions == null ? void 0 : transitions.update]);
-  const emptyPath = useMemo(() => Skia.Path.Make(), []);
-  const initialPath = useMemo(() => drawingArea ? makeClipPath(drawingArea) : emptyPath,
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  []);
-  const [clipPaths, setClipPaths] = useState({
-    from: initialPath,
-    to: initialPath
-  });
-  const clipProgress = useSharedValue(0);
-  useEffect(() => {
-    if (!drawingArea) return;
-    const nextPath = makeClipPath(drawingArea);
-    setClipPaths(prev => ({
-      from: prev.to,
-      to: nextPath
-    }));
-    if (drawingArea.width || !drawingArea.height) {
-      clipProgress.value = 1;
-    } else {
-      clipProgress.value = 0;
-      clipProgress.value = buildTransition(1, animate ? clipUpdateTransition : null);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [drawingArea, animate, clipUpdateTransition]);
-  const animatedClipPath = usePathInterpolation(clipProgress, [0, 1], [clipPaths.from, clipPaths.to]);
-  if (!drawingArea) return;
-
-  // Clip path animation for bar is just for chart size changes, not for
-  // enter transition. One caveat, bar update transitions are staggered
-  // but clip path is not, so some bars could be clipped in rare cases
-
-  return /*#__PURE__*/_jsx(Group, {
-    clip: animatedClipPath,
-    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,
-      transitions: transitions,
-      xAxisId: group.xAxisId,
-      yAxisId: group.yAxisId
-    }, group.stackId))
-  });
-});

package/esm/chart/bar/BarStack.js

@@ -1,173 +0,0 @@
-import React, { memo, useMemo } from 'react';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { useCartesianChartContext } from '../ChartProvider';
-import { EPSILON, getBars, getBaselinePx, getStackOrigin } from '../utils/bar';
-import { getGradientStops } from '../utils/gradient';
-import { convertToSerializableScale } from '../utils/scale';
-import { Bar } from './Bar';
-import { DefaultBarStack } from './DefaultBarStack';
-
-/**
- * Extended series type that includes bar-specific properties.
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * BarStack component that renders a single stack of bars at a specific category index.
- * Handles the stacking logic for bars within a single category.
- */
-export const BarStack = /*#__PURE__*/memo(_ref => {
-  let {
-    series,
-    categoryIndex,
-    indexPos,
-    thickness,
-    indexScale,
-    valueScale,
-    rect,
-    xAxisId,
-    yAxisId,
-    BarComponent: defaultBarComponent,
-    fillOpacity: defaultFillOpacity,
-    stroke: defaultStroke,
-    strokeWidth: defaultStrokeWidth,
-    borderRadius = 4,
-    BarStackComponent = DefaultBarStack,
-    stackGap,
-    barMinSize,
-    stackMinSize,
-    roundBaseline,
-    transitions,
-    transition
-  } = _ref;
-  const theme = useTheme();
-  const {
-    layout,
-    getSeriesData,
-    getXAxis,
-    getYAxis
-  } = useCartesianChartContext();
-  const xAxis = getXAxis(xAxisId);
-  const yAxis = getYAxis(yAxisId);
-  const baseline = useMemo(() => {
-    var _ref2;
-    return (_ref2 = layout === 'vertical' ? yAxis : xAxis) == null ? void 0 : _ref2.baseline;
-  }, [layout, yAxis, xAxis]);
-  const baselinePx = useMemo(() => getBaselinePx(valueScale, rect, layout, baseline), [rect, valueScale, layout, baseline]);
-  const seriesGradients = useMemo(() => {
-    return series.map(s => {
-      if (!s.gradient) return;
-      const gradientScale = s.gradient.axis === 'x' ? layout === 'vertical' ? indexScale : valueScale : layout === 'vertical' ? valueScale : indexScale;
-      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, indexScale, valueScale, layout]);
-  const categoryAxis = layout === 'vertical' ? xAxis : yAxis;
-  const categoryData = categoryAxis != null && categoryAxis.data && Array.isArray(categoryAxis.data) && typeof categoryAxis.data[0] === 'number' ? categoryAxis.data : undefined;
-  const categoryValue = categoryData ? categoryData[categoryIndex] : categoryIndex;
-  const seriesData = useMemo(() => Object.fromEntries(series.map(s => {
-    var _getSeriesData;
-    return [s.id, (_getSeriesData = getSeriesData(s.id)) != null ? _getSeriesData : []];
-  })), [series, getSeriesData]);
-  const bars = useMemo(() => getBars({
-    series,
-    seriesData,
-    categoryIndex,
-    categoryValue,
-    indexPos,
-    thickness,
-    valueScale,
-    seriesGradients,
-    roundBaseline,
-    layout,
-    baseline,
-    baselinePx,
-    stackGap,
-    barMinSize,
-    stackMinSize,
-    defaultFill: theme.color.fgPrimary,
-    borderRadius,
-    defaultFillOpacity,
-    defaultStroke,
-    defaultStrokeWidth,
-    defaultBarComponent
-  }), [series, seriesData, categoryIndex, categoryValue, indexPos, thickness, valueScale, seriesGradients, roundBaseline, layout, baseline, baselinePx, stackGap, barMinSize, stackMinSize, theme.color.fgPrimary, borderRadius, defaultFillOpacity, defaultStroke, defaultStrokeWidth, defaultBarComponent]);
-  const stackRect = useMemo(() => {
-    if (bars.length === 0) {
-      return {
-        x: layout === 'vertical' ? indexPos : baselinePx,
-        y: layout === 'vertical' ? baselinePx : indexPos,
-        width: layout === 'vertical' ? thickness : 0,
-        height: layout === 'vertical' ? 0 : thickness
-      };
-    }
-    const minX = Math.min(...bars.map(b => b.x));
-    const minY = Math.min(...bars.map(b => b.y));
-    const maxX = Math.max(...bars.map(b => b.x + b.width));
-    const maxY = Math.max(...bars.map(b => b.y + b.height));
-    return {
-      x: minX,
-      y: minY,
-      width: maxX - minX,
-      height: maxY - minY
-    };
-  }, [bars, baselinePx, indexPos, layout, thickness]);
-  const stackOrigin = useMemo(() => {
-    var _getStackOrigin;
-    return (_getStackOrigin = getStackOrigin(bars.map(b => b.origin), bars.map(b => {
-      var _b$minSize;
-      return (_b$minSize = b.minSize) != null ? _b$minSize : 0;
-    }))) != null ? _getStackOrigin : baselinePx;
-  }, [bars, baselinePx]);
-  const barElements = bars.map((bar, index) => /*#__PURE__*/_jsx(Bar, {
-    BarComponent: bar.BarComponent,
-    borderRadius: bar.borderRadius,
-    dataX: bar.dataX,
-    dataY: bar.dataY,
-    fill: bar.fill,
-    fillOpacity: bar.fillOpacity,
-    height: bar.height,
-    minSize: bar.minSize,
-    origin: bar.origin,
-    roundBottom: bar.roundBottom,
-    roundTop: bar.roundTop,
-    seriesId: bar.seriesId,
-    stroke: bar.stroke,
-    strokeWidth: bar.strokeWidth,
-    transition: transition,
-    transitions: transitions,
-    width: bar.width,
-    x: bar.x,
-    y: bar.y
-  }, bar.seriesId + "-" + categoryIndex + "-" + index));
-  const edge = layout === 'vertical' ? stackRect.y : stackRect.x;
-  const size = layout === 'vertical' ? stackRect.height : stackRect.width;
-  const stackRoundLower = roundBaseline || Math.abs(edge - baselinePx) >= EPSILON;
-  const stackRoundHigher = roundBaseline || Math.abs(edge + size - baselinePx) >= EPSILON;
-  const stackRoundTop = layout === 'vertical' ? stackRoundLower : stackRoundHigher;
-  const stackRoundBottom = layout === 'vertical' ? stackRoundHigher : stackRoundLower;
-  return /*#__PURE__*/_jsx(BarStackComponent, {
-    borderRadius: borderRadius,
-    categoryIndex: categoryIndex,
-    height: stackRect.height,
-    origin: stackOrigin,
-    roundBottom: stackRoundBottom,
-    roundTop: stackRoundTop,
-    transition: transition,
-    transitions: transitions,
-    width: stackRect.width,
-    x: stackRect.x,
-    y: stackRect.y,
-    children: barElements
-  });
-});

package/esm/chart/bar/BarStackGroup.js

@@ -1,89 +0,0 @@
-const _excluded = ["series", "xAxisId", "yAxisId", "stackIndex", "totalStacks", "barPadding"];
-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); }
-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, useMemo, createElement as _createElement } from 'react';
-import { useCartesianChartContext } from '../ChartProvider';
-import { defaultAxisId, getBarSizeAdjustment, isCategoricalScale } from '../utils';
-import { BarStack } from './BarStack';
-/**
- * BarStackGroup component that renders a group of stacks across all categories.
- * Delegates the actual stacking logic to BarStack for each category.
- */
-export const BarStackGroup = /*#__PURE__*/memo(_ref => {
-  let {
-      series,
-      xAxisId = defaultAxisId,
-      yAxisId = defaultAxisId,
-      stackIndex,
-      totalStacks,
-      barPadding = 0.1
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const {
-    layout,
-    getXScale,
-    getYScale,
-    drawingArea,
-    dataLength
-  } = useCartesianChartContext();
-  const xScale = getXScale(xAxisId);
-  const yScale = getYScale(yAxisId);
-  const stackConfigs = useMemo(() => {
-    if (!xScale || !yScale || !drawingArea || dataLength === 0) return [];
-    const indexScale = layout !== 'horizontal' ? xScale : yScale;
-    if (!isCategoricalScale(indexScale)) {
-      return [];
-    }
-    const categoryWidth = indexScale.bandwidth();
-
-    // Calculate thickness for each stack within a category.
-    const gapSize = totalStacks > 1 ? categoryWidth * barPadding / (totalStacks - 1) : 0;
-    const stackThickness = categoryWidth / totalStacks - getBarSizeAdjustment(totalStacks, gapSize);
-    const configs = [];
-
-    // Calculate position for each category.
-    for (let categoryIndex = 0; categoryIndex < dataLength; categoryIndex++) {
-      // Get position for this category along the index axis.
-      const categoryPos = indexScale(categoryIndex);
-      if (categoryPos !== undefined) {
-        // Calculate position for this specific stack within the category.
-        const stackPos = categoryPos + stackIndex * (stackThickness + gapSize);
-        configs.push({
-          categoryIndex,
-          indexPos: stackPos,
-          thickness: stackThickness
-        });
-      }
-    }
-    return configs;
-  }, [xScale, yScale, drawingArea, dataLength, layout, totalStacks, barPadding, stackIndex]);
-  const indexScaleComputed = layout !== 'horizontal' ? xScale : yScale;
-  const valueScaleComputed = layout !== 'horizontal' ? yScale : xScale;
-  if (indexScaleComputed && !isCategoricalScale(indexScaleComputed)) {
-    throw new Error("BarStackGroup requires a band scale for " + (layout !== 'horizontal' ? 'x-axis' : 'y-axis') + ". See https://cds.coinbase.com/components/charts/" + (layout !== 'horizontal' ? 'XAxis' : 'YAxis') + "/#scale-type");
-  }
-  if (!indexScaleComputed || !valueScaleComputed || !drawingArea || stackConfigs.length === 0) return;
-
-  // In horizontal layout, render stacks in reverse order so top rows (lower categoryIndex)
-  // appear on top. Otherwise bottom rows would overlap and obscure top rows during animation.
-  const orderedConfigs = layout === 'horizontal' ? [...stackConfigs].reverse() : stackConfigs;
-  return orderedConfigs.map(_ref2 => {
-    let {
-      categoryIndex,
-      indexPos,
-      thickness
-    } = _ref2;
-    return /*#__PURE__*/_createElement(BarStack, _extends({}, props, {
-      key: "stack-" + stackIndex + "-category-" + categoryIndex,
-      categoryIndex: categoryIndex,
-      indexPos: indexPos,
-      indexScale: indexScaleComputed,
-      rect: drawingArea,
-      series: series,
-      thickness: thickness,
-      valueScale: valueScaleComputed,
-      xAxisId: xAxisId,
-      yAxisId: yAxisId
-    }));
-  });
-});

package/esm/chart/bar/DefaultBar.js

@@ -1,79 +0,0 @@
-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); }
-import { memo, useMemo } from 'react';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { useCartesianChartContext } from '../ChartProvider';
-import { Path } from '../Path';
-import { defaultBarEnterOpacityTransition, defaultBarEnterTransition, getBarPath, withStaggerDelayTransition } from '../utils';
-import { getNormalizedStagger } from '../utils/bar';
-import { defaultTransition, getTransition } from '../utils/transition';
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Default bar component that renders a solid bar with animation support.
- */
-export const DefaultBar = /*#__PURE__*/memo(_ref => {
-  let {
-    x,
-    y,
-    width,
-    height,
-    borderRadius = 4,
-    roundTop,
-    roundBottom,
-    d,
-    fill,
-    fillOpacity = 1,
-    stroke,
-    strokeWidth,
-    origin,
-    minSize = 1,
-    transitions,
-    transition
-  } = _ref;
-  const {
-    animate,
-    drawingArea,
-    layout
-  } = useCartesianChartContext();
-  const theme = useTheme();
-  const defaultFill = fill || theme.color.fgPrimary;
-  const normalizedStagger = useMemo(() => getNormalizedStagger(layout, x, y, drawingArea), [layout, x, y, drawingArea]);
-  const enterTransition = useMemo(() => getTransition(transitions == null ? void 0 : transitions.enter, animate, defaultBarEnterTransition), [transitions == null ? void 0 : transitions.enter, animate]);
-  const enterTransitionWithStagger = useMemo(() => withStaggerDelayTransition(enterTransition, normalizedStagger), [enterTransition, normalizedStagger]);
-  const enterOpacityTransition = useMemo(() => {
-    var _enterOpacityTransiti, _enterOpacityTransiti2;
-    if ((transitions == null ? void 0 : transitions.enterOpacity) === undefined && enterTransition === null) return null;
-    const enterOpacityTransition = getTransition(transitions == null ? void 0 : transitions.enterOpacity, animate, defaultBarEnterOpacityTransition);
-    if (!enterOpacityTransition) return null;
-    return _extends({}, enterOpacityTransition, {
-      delay: (_enterOpacityTransiti = enterOpacityTransition.delay) != null ? _enterOpacityTransiti : enterTransition == null ? void 0 : enterTransition.delay,
-      staggerDelay: (_enterOpacityTransiti2 = enterOpacityTransition.staggerDelay) != null ? _enterOpacityTransiti2 : enterTransition == null ? void 0 : enterTransition.staggerDelay
-    });
-  }, [transitions == null ? void 0 : transitions.enterOpacity, animate, enterTransition]);
-  const enterOpacityTransitionWithStagger = useMemo(() => withStaggerDelayTransition(enterOpacityTransition, normalizedStagger), [enterOpacityTransition, normalizedStagger]);
-  const updateTransition = useMemo(() => withStaggerDelayTransition(getTransition((transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition, animate, defaultTransition), normalizedStagger), [transitions == null ? void 0 : transitions.update, transition, animate, normalizedStagger]);
-  const initialPath = useMemo(() => {
-    if (!animate) return;
-    const isHorizontalLayout = layout === 'horizontal';
-    const baseline = origin != null ? origin : isHorizontalLayout ? x : y + height;
-    const initialX = isHorizontalLayout ? baseline : x;
-    const initialY = isHorizontalLayout ? y : baseline;
-    const initialWidth = isHorizontalLayout ? minSize : width;
-    const initialHeight = isHorizontalLayout ? height : minSize;
-    return getBarPath(initialX, initialY, initialWidth, initialHeight, borderRadius, !!roundTop, !!roundBottom, layout);
-  }, [animate, layout, x, y, origin, width, height, borderRadius, roundTop, roundBottom, minSize]);
-  return /*#__PURE__*/_jsx(Path, {
-    animate: animate,
-    clipPath: null,
-    d: d,
-    fill: stroke ? 'none' : defaultFill,
-    fillOpacity: fillOpacity,
-    initialPath: initialPath,
-    stroke: stroke,
-    strokeWidth: strokeWidth,
-    transitions: {
-      enter: enterTransitionWithStagger,
-      enterOpacity: enterOpacityTransitionWithStagger,
-      update: updateTransition
-    }
-  });
-});

package/esm/chart/bar/DefaultBarStack.js

@@ -1,68 +0,0 @@
-import { memo, useMemo } from 'react';
-import { Group, Skia } from '@shopify/react-native-skia';
-import { useCartesianChartContext } from '../ChartProvider';
-import { getBarPath } from '../utils';
-import { defaultBarEnterTransition, getNormalizedStagger, getStackInitialClipRect, withStaggerDelayTransition } from '../utils/bar';
-import { defaultTransition, getTransition, 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.
- */
-export const DefaultBarStack = /*#__PURE__*/memo(_ref => {
-  let {
-    children,
-    width,
-    height,
-    x,
-    y,
-    borderRadius = 4,
-    roundTop = true,
-    roundBottom = true,
-    origin,
-    transitions,
-    transition
-  } = _ref;
-  const {
-    animate,
-    drawingArea,
-    layout
-  } = useCartesianChartContext();
-  const normalizedStagger = useMemo(() => getNormalizedStagger(layout, x, y, drawingArea), [layout, x, y, drawingArea]);
-  const enterTransition = useMemo(() => getTransition(transitions == null ? void 0 : transitions.enter, animate, defaultBarEnterTransition), [transitions == null ? void 0 : transitions.enter, animate]);
-  const enterTransitionWithStagger = useMemo(() => withStaggerDelayTransition(enterTransition, normalizedStagger), [enterTransition, normalizedStagger]);
-  const updateTransition = useMemo(() => withStaggerDelayTransition(getTransition((transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition, animate, defaultTransition), normalizedStagger), [animate, transitions == null ? void 0 : transitions.update, transition, normalizedStagger]);
-
-  // Generate target clip path (full bar)
-  const targetPath = useMemo(() => {
-    return getBarPath(x, y, width, height, borderRadius, roundTop, roundBottom, layout);
-  }, [x, y, width, height, borderRadius, roundTop, roundBottom, layout]);
-
-  // Initial clip path for entry animation (bar at baseline with minimal height)
-  const initialPath = useMemo(() => {
-    if (!animate) return;
-    const initialClipRect = getStackInitialClipRect({
-      x,
-      y,
-      width,
-      height
-    }, layout, origin);
-    return getBarPath(initialClipRect.x, initialClipRect.y, initialClipRect.width, initialClipRect.height, borderRadius, roundTop, roundBottom, layout);
-  }, [animate, layout, x, y, height, width, borderRadius, roundTop, roundBottom, origin]);
-  const animatedClipPath = usePathTransition({
-    currentPath: targetPath,
-    initialPath,
-    transitions: {
-      enter: enterTransitionWithStagger,
-      update: updateTransition
-    }
-  });
-  const staticClipPath = useMemo(() => {
-    var _Skia$Path$MakeFromSV;
-    return (_Skia$Path$MakeFromSV = Skia.Path.MakeFromSVGString(targetPath)) != null ? _Skia$Path$MakeFromSV : Skia.Path.Make();
-  }, [targetPath]);
-  const clipPath = animate ? animatedClipPath : staticClipPath;
-  return /*#__PURE__*/_jsx(Group, {
-    clip: clipPath,
-    children: children
-  });
-});