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

package/esm/chart/__stories__/PeriodSelector.stories.js

@@ -2,15 +2,18 @@ const _excluded = ["label"],
   _excluded2 = ["label", "font", "hideDot", "style"];
 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; }
 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 { forwardRef, memo, useMemo, useState } from 'react';
+import { forwardRef, memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { ScrollView, View } from 'react-native';
+import { interpolateColor, runOnJS, useAnimatedReaction, useSharedValue, withSpring } from 'react-native-reanimated';
 import { assets } from '@coinbase/cds-common/internal/data/assets';
 import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
 import { IconButton } from '@coinbase/cds-mobile/buttons';
 import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { Icon } from '@coinbase/cds-mobile/icons';
 import { HStack } from '@coinbase/cds-mobile/layout';
 import { SegmentedTab } from '@coinbase/cds-mobile/tabs/SegmentedTab';
+import { tabsSpringConfig } from '@coinbase/cds-mobile/tabs/Tabs';
 import { Text } from '@coinbase/cds-mobile/typography';
 import { LiveTabLabel, PeriodSelector, PeriodSelectorActiveIndicator } from '../PeriodSelector';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -70,6 +73,27 @@ const MinWidthPeriodSelectorExample = () => {
     width: "fit-content"
   });
 };
+const PaddedPeriodSelectorExample = () => {
+  const tabs = [{
+    id: '1W',
+    label: '1W'
+  }, {
+    id: '1M',
+    label: '1M'
+  }, {
+    id: 'YTD',
+    label: 'YTD'
+  }];
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  return /*#__PURE__*/_jsx(PeriodSelector, {
+    activeTab: activeTab,
+    gap: 2,
+    onChange: tab => setActiveTab(tab),
+    padding: 3,
+    tabs: tabs,
+    width: "fit-content"
+  });
+};
 const LivePeriodSelectorExample = () => {
   const tabs = useMemo(() => [{
     id: '1H',
@@ -297,6 +321,74 @@ const ColoredExcludingLivePeriodSelectorExample = () => {
     tabs: tabs
   });
 };
+const ColoredIcon = /*#__PURE__*/memo(_ref3 => {
+  let {
+    tabId,
+    name
+  } = _ref3;
+  const {
+    activeTab
+  } = useTabsContext();
+  const isActive = (activeTab == null ? void 0 : activeTab.id) === tabId;
+  const theme = useTheme();
+  const progress = useSharedValue(isActive ? 1 : 0);
+  const [color, setColor] = useState(isActive ? theme.color.fgPrimary : theme.color.fg);
+  useEffect(() => {
+    progress.value = withSpring(isActive ? 1 : 0, tabsSpringConfig);
+  }, [isActive, progress]);
+  useAnimatedReaction(() => interpolateColor(progress.value, [0, 1], [theme.color.fg, theme.color.fgPrimary]), newColor => {
+    runOnJS(setColor)(newColor);
+  });
+  return /*#__PURE__*/_jsx(Icon, {
+    active: true,
+    name: name,
+    size: "s",
+    styles: {
+      icon: {
+        color
+      }
+    }
+  });
+});
+function IconsPeriodSelectorExample() {
+  const theme = useTheme();
+  const tabs = [{
+    id: 'buy',
+    label: /*#__PURE__*/_jsx(ColoredIcon, {
+      name: "chartLine",
+      tabId: "buy"
+    })
+  }, {
+    id: 'sell',
+    label: /*#__PURE__*/_jsx(ColoredIcon, {
+      name: "chartCandles",
+      tabId: "sell"
+    })
+  }, {
+    id: 'convert',
+    label: /*#__PURE__*/_jsx(ColoredIcon, {
+      name: "chartBar",
+      tabId: "convert"
+    })
+  }];
+  const [activeTab, updateActiveTab] = useState(tabs[0]);
+  const handleChange = useCallback(activeTab => updateActiveTab(activeTab), []);
+  return /*#__PURE__*/_jsx(PeriodSelector, {
+    accessibilityLabel: "Switch token action views",
+    activeTab: activeTab,
+    borderRadius: 300,
+    gap: 0.5,
+    onChange: handleChange,
+    padding: 0.5,
+    styles: {
+      activeIndicator: {
+        borderRadius: theme.borderRadius[200]
+      }
+    },
+    tabs: tabs,
+    width: "fit-content"
+  });
+}
 export default function All() {
   return /*#__PURE__*/_jsxs(ExampleScreen, {
     children: [/*#__PURE__*/_jsx(Example, {
@@ -317,6 +409,12 @@ export default function All() {
     }), /*#__PURE__*/_jsx(Example, {
       title: "Colored Excluding Live",
       children: /*#__PURE__*/_jsx(ColoredExcludingLivePeriodSelectorExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With Padding",
+      children: /*#__PURE__*/_jsx(PaddedPeriodSelectorExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With Icons",
+      children: /*#__PURE__*/_jsx(IconsPeriodSelectorExample, {})
     })]
   });
 }

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 : matchedSeries == null ? void 0 : matchedSeries.gradient, [gradientProp, matchedSeries == null ? void 0 : matchedSeries.gradient]);
   const fill = useMemo(() => fillProp != null ? fillProp : matchedSeries == null ? void 0 : matchedSeries.color, [fillProp, matchedSeries == null ? void 0 : matchedSeries.color]);
   const sourceData = useMemo(() => getSeriesData(seriesId), [seriesId, getSeriesData]);
-  const xAxis = getXAxis();
-  const xScale = getXScale();
+  const xAxis = getXAxis(matchedSeries == null ? void 0 : matchedSeries.xAxisId);
+  const xScale = getXScale(matchedSeries == null ? void 0 : matchedSeries.xAxisId);
   const yScale = getYScale(matchedSeries == null ? void 0 : matchedSeries.yAxisId);
+  const yAxis = getYAxis(matchedSeries == null ? 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.data && Array.isArray(xAxis.data) && typeof xAxis.data[0] === 'number' ? xAxis.data : undefined;
+    const indexData = categoryAxis != null && 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 ? 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 ? void 0 : matchedSeries.xAxisId,
     yAxisId: matchedSeries == null ? void 0 : matchedSeries.yAxisId
   });
 });

package/esm/chart/area/AreaChart.js

@@ -1,15 +1,15 @@
-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", "transition", "transitions", "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"],
-  _excluded5 = ["id", "data", "label", "color", "yAxisId", "fill", "fillOpacity", "stackId", "type", "lineType"];
+  _excluded4 = ["id", "data", "label", "color", "xAxisId", "yAxisId", "opacity", "LineComponent", "stackId"],
+  _excluded5 = ["id", "data", "label", "color", "xAxisId", "yAxisId", "fill", "fillOpacity", "stackId", "type"];
 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 { 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) => {
@@ -22,6 +22,7 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       type,
       connectNulls,
       transition,
+      transitions,
       LineComponent,
       strokeWidth,
       showXAxis,
@@ -34,8 +35,6 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       children
     } = _ref,
     chartProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const calculatedInset = useMemo(() => getChartInset(inset, defaultChartInset), [inset]);
-
   // Convert AreaSeries to Series for Chart context
   const chartSeries = useMemo(() => {
     return series == null ? void 0 : series.map(s => ({
@@ -44,6 +43,7 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       label: s.label,
       color: s.color,
       gradient: s.gradient,
+      xAxisId: s.xAxisId,
       yAxisId: s.yAxisId,
       stackId: s.stackId
     }));
@@ -67,7 +67,8 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       categoryPadding: xCategoryPadding,
       domain: xDomain,
       domainLimit: xDomainLimit,
-      range: xRange
+      range: xRange,
+      id: xAxisId
     } = _ref2,
     xAxisVisualProps = _objectWithoutPropertiesLoose(_ref2, _excluded2);
   const _ref3 = yAxis || {},
@@ -110,11 +111,13 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
   };
   return /*#__PURE__*/_jsxs(CartesianChart, _extends({}, chartProps, {
     ref: ref,
-    inset: calculatedInset,
+    inset: inset,
     series: seriesToRender,
     xAxis: xAxisConfig,
     yAxis: yAxisConfig,
-    children: [showXAxis && /*#__PURE__*/_jsx(XAxis, _extends({}, xAxisVisualProps)), showYAxis && /*#__PURE__*/_jsx(YAxis, _extends({
+    children: [showXAxis && /*#__PURE__*/_jsx(XAxis, _extends({
+      axisId: xAxisId
+    }, xAxisVisualProps)), showYAxis && /*#__PURE__*/_jsx(YAxis, _extends({
       axisId: yAxisId
     }, yAxisVisualProps)), series == null ? void 0 : series.map(_ref4 => {
       let {
@@ -128,13 +131,14 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
         fillOpacity: fillOpacity,
         seriesId: id,
         transition: transition,
+        transitions: transitions,
         type: type
       }, areaPropsFromSeries), id);
     }), showLines && (series == null ? void 0 : series.map(_ref5 => {
       let {
-          id,
+          id
+
           // Area type (don't pass to Line)
-          lineType: seriesLineType
         } = _ref5,
         otherPropsFromSeries = _objectWithoutPropertiesLoose(_ref5, _excluded5);
       return /*#__PURE__*/_jsx(Line, _extends({
@@ -144,7 +148,8 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
         seriesId: id,
         strokeWidth: strokeWidth,
         transition: transition,
-        type: seriesLineType != null ? seriesLineType : lineType
+        transitions: transitions,
+        type: lineType
       }, otherPropsFromSeries), id);
     })), children]
   }));

package/esm/chart/area/DottedArea.js

@@ -1,15 +1,15 @@
-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 _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 } from 'react';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { Group, Skia } from '@shopify/react-native-skia';
+import { Group } from '@shopify/react-native-skia';
 import { useCartesianChartContext } from '../ChartProvider';
 import { Gradient } from '../gradient';
 import { Path } from '../Path';
 import { createGradient, getBaseline } from '../utils';
 import { getDottedAreaPath } from '../utils/path';
-import { usePathTransition } from '../utils/transition';
+import { defaultTransition, usePathTransition } from '../utils/transition';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * A customizable dotted area gradient component.
@@ -25,9 +25,11 @@ export const DottedArea = /*#__PURE__*/memo(_ref => {
       peakOpacity = 1,
       baselineOpacity = 0,
       baseline,
+      xAxisId,
       yAxisId,
       gradient: gradientProp,
       animate: animateProp,
+      transitions,
       transition
     } = _ref,
     pathProps = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -35,10 +37,17 @@ export const DottedArea = /*#__PURE__*/memo(_ref => {
   const {
     drawingArea,
     animate,
+    layout,
+    getXAxis,
     getYAxis
   } = useCartesianChartContext();
-  const yAxisConfig = getYAxis(yAxisId);
+  const shouldAnimate = animateProp != null ? animateProp : animate;
+  const valueAxisConfig = layout !== 'horizontal' ? getYAxis(yAxisId) : getXAxis(xAxisId);
+  const gradientAxis = layout !== 'horizontal' ? 'y' : 'x';
   const fill = useMemo(() => fillProp != null ? fillProp : theme.color.fgPrimary, [fillProp, theme.color.fgPrimary]);
+  const updateTransition = useMemo(() => {
+    return (transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition !== undefined ? transition : defaultTransition;
+  }, [transitions == null ? void 0 : transitions.update, transition]);
   const dottedPath = useMemo(() => {
     if (!drawingArea) return '';
     return getDottedAreaPath({
@@ -48,31 +57,32 @@ export const DottedArea = /*#__PURE__*/memo(_ref => {
       height: drawingArea.height
     }, patternSize, dotSize);
   }, [drawingArea, patternSize, dotSize]);
-  const animatedClipPath = usePathTransition({
+  const clipPath = usePathTransition({
     currentPath: d,
-    transition
+    transitions: {
+      update: shouldAnimate ? updateTransition : null
+    }
   });
-  const staticClipPath = useMemo(() => {
-    var _Skia$Path$MakeFromSV;
-    if (!d) return;
-    return (_Skia$Path$MakeFromSV = Skia.Path.MakeFromSVGString(d)) != null ? _Skia$Path$MakeFromSV : undefined;
-  }, [d]);
   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]);
+
+  // Update transition is used for clip path, we skip update animation on Path itself
   return /*#__PURE__*/_jsx(Group, {
-    clip: animate ? animatedClipPath : staticClipPath,
+    clip: clipPath,
     children: /*#__PURE__*/_jsx(Path, _extends({
-      animate: animateProp != null ? animateProp : animate,
+      animate: shouldAnimate,
       d: dottedPath,
       fill: fill,
-      transition: transition
+      transition: transition,
+      transitions: transitions
     }, pathProps, {
       children: gradient && /*#__PURE__*/_jsx(Gradient, {
         gradient: gradient,
+        xAxisId: xAxisId,
         yAxisId: yAxisId
       })
     }))

package/esm/chart/area/GradientArea.js

@@ -1,4 +1,4 @@
-const _excluded = ["d", "fill", "fillOpacity", "gradient", "peakOpacity", "baselineOpacity", "baseline", "yAxisId", "animate", "transition"];
+const _excluded = ["d", "fill", "fillOpacity", "gradient", "peakOpacity", "baselineOpacity", "baseline", "xAxisId", "yAxisId", "animate", "transitions", "transition"];
 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 } from 'react';
@@ -22,32 +22,39 @@ export const GradientArea = /*#__PURE__*/memo(_ref => {
       peakOpacity = 0.3,
       baselineOpacity = 0,
       baseline,
+      xAxisId,
       yAxisId,
       animate,
+      transitions,
       transition
     } = _ref,
     pathProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
+    layout,
+    getXAxis,
     getYAxis
   } = useCartesianChartContext();
   const theme = useTheme();
-  const yAxisConfig = getYAxis(yAxisId);
+  const valueAxisConfig = layout !== 'horizontal' ? getYAxis(yAxisId) : getXAxis(xAxisId);
+  const gradientAxis = layout !== 'horizontal' ? 'y' : 'x';
   const fill = useMemo(() => fillProp != null ? fillProp : theme.color.fgPrimary, [fillProp, theme.color.fgPrimary]);
   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__*/_jsx(Path, _extends({
     animate: animate,
     d: d,
     fill: fill,
     fillOpacity: fillOpacity,
-    transition: transition
+    transition: transition,
+    transitions: transitions
   }, pathProps, {
     children: gradient && /*#__PURE__*/_jsx(Gradient, {
       gradient: gradient,
+      xAxisId: xAxisId,
       yAxisId: yAxisId
     })
   }));

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 _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 } from 'react';
@@ -16,8 +16,10 @@ export const SolidArea = /*#__PURE__*/memo(_ref => {
       d,
       fill,
       fillOpacity = 1,
+      xAxisId,
       yAxisId,
       animate,
+      transitions,
       transition,
       gradient
     } = _ref,
@@ -28,10 +30,12 @@ export const SolidArea = /*#__PURE__*/memo(_ref => {
     d: d,
     fill: fill != null ? fill : theme.color.fgPrimary,
     fillOpacity: fillOpacity,
-    transition: transition
+    transition: transition,
+    transitions: transitions
   }, pathProps, {
     children: gradient && /*#__PURE__*/_jsx(Gradient, {
       gradient: gradient,
+      xAxisId: xAxisId,
       yAxisId: yAxisId
     })
   }));

package/esm/chart/area/__stories__/AreaChart.stories.js

@@ -1,17 +1,22 @@
+import { useCallback } from 'react';
 import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { DottedLine } from '../../line';
 import { Scrubber } from '../../scrubber/Scrubber';
 import { AreaChart } from '..';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const basicData = [24, 13, 98, 39, 48, 38, 43];
 const BasicExample = () => {
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + basicData[index], []);
   return /*#__PURE__*/_jsx(AreaChart, {
     enableScrubbing: true,
     showYAxis: true,
+    accessibilityLabel: "Area chart with " + basicData.length + " data points. Swipe to navigate.",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 400,
     series: [{
       id: 'pageViews',
-      data: [24, 13, 98, 39, 48, 38, 43]
+      data: basicData
     }],
     yAxis: {
       showGrid: true,
@@ -22,21 +27,26 @@ const BasicExample = () => {
     children: /*#__PURE__*/_jsx(Scrubber, {})
   });
 };
+const currentRewardsData = [100, 150, 200, 280, 380, 500, 650, 820, 1020, 1250, 1510, 1800, 2120, 2470, 2850, 3260, 3700, 4170];
+const potentialRewardsData = [150, 220, 300, 400, 520, 660, 820, 1000, 1200, 1420, 1660, 1920, 2200, 2500, 2820, 3160, 3520, 3900];
 const StackedExample = () => {
   const theme = useTheme();
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": current " + currentRewardsData[index] + ", potential " + potentialRewardsData[index], []);
   return /*#__PURE__*/_jsx(AreaChart, {
     enableScrubbing: true,
     showLines: true,
     stacked: true,
+    accessibilityLabel: "Stacked rewards chart with " + currentRewardsData.length + " data points. Swipe to navigate.",
     curve: "natural",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 256,
     series: [{
       id: 'currentRewards',
-      data: [100, 150, 200, 280, 380, 500, 650, 820, 1020, 1250, 1510, 1800, 2120, 2470, 2850, 3260, 3700, 4170],
+      data: currentRewardsData,
       color: theme.color.fg
     }, {
       id: 'potentialRewards',
-      data: [150, 220, 300, 400, 520, 660, 820, 1000, 1200, 1420, 1660, 1920, 2200, 2500, 2820, 3160, 3520, 3900],
+      data: potentialRewardsData,
       color: theme.color.fgPositive,
       type: 'dotted',
       LineComponent: DottedLine
@@ -59,12 +69,14 @@ const AreaChartStories = () => {
         enableScrubbing: true,
         showLines: true,
         showYAxis: true,
-        height: 400,
+        accessibilityLabel: "Area chart with negative values. 7 data points. Swipe to navigate.",
+        getScrubberAccessibilityLabel: index => "Point " + (index + 1) + ": " + [24, 13, -98, 39, 48, 38, 43][index],
+        height: 150,
         series: [{
           id: 'pageViews',
           data: [24, 13, -98, 39, 48, 38, 43]
         }],
-        type: "solid",
+        type: "gradient",
         yAxis: {
           showGrid: true
         },
@@ -94,6 +106,36 @@ const AreaChartStories = () => {
           type: 'gradient'
         }]
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Horizontal Layout",
+      children: /*#__PURE__*/_jsx(AreaChart, {
+        enableScrubbing: true,
+        showLines: true,
+        showXAxis: true,
+        showYAxis: true,
+        accessibilityLabel: "Volume by asset. 5 data points. Swipe to navigate.",
+        getScrubberAccessibilityLabel: index => ['BTC', 'ETH', 'SOL', 'DOGE', 'ADA'][index] + ": " + [68, 54, 43, 29, 18][index] + "%",
+        height: 280,
+        layout: "horizontal",
+        series: [{
+          id: 'volume',
+          data: [68, 54, 43, 29, 18],
+          label: 'Volume'
+        }],
+        type: "gradient",
+        xAxis: {
+          domain: {
+            min: 0,
+            max: 80
+          },
+          tickLabelFormatter: value => value + "%"
+        },
+        yAxis: {
+          data: ['BTC', 'ETH', 'SOL', 'DOGE', 'ADA'],
+          scaleType: 'band'
+        },
+        children: /*#__PURE__*/_jsx(Scrubber, {})
+      })
     })]
   });
 };

package/esm/chart/axis/Axis.js

@@ -1,45 +1,9 @@
-/**
- * Animation variants for grouped axis tick labels - initial mount
- * Note: Mobile currently doesn't use these variants. Axes render immediately without animation.
- * Web uses similar variants with delay to match path enter animation timing.
- */
-export const axisTickLabelsInitialAnimationVariants = {
-  initial: {
-    opacity: 0
-  },
-  animate: {
-    opacity: 1,
-    transition: {
-      duration: 0,
-      delay: 0
-    }
-  },
-  exit: {
-    opacity: 0,
-    transition: {
-      duration: 0.15
-    }
-  }
-};
+import { accessoryFadeTransitionDuration } from '../utils';
 
 /**
- * Animation variants for axis elements - updates (used for both grid lines and tick labels)
+ * Animation transition for axis elements (grid lines, tick marks, tick labels).
+ * Matches web's axisUpdateAnimationTransition timing.
  */
-export const axisUpdateAnimationVariants = {
-  initial: {
-    opacity: 0
-  },
-  animate: {
-    opacity: 1,
-    transition: {
-      duration: 0.15,
-      delay: 0.15 // For updates: fade out 150ms, then fade in 150ms
-    }
-  },
-  exit: {
-    opacity: 0,
-    transition: {
-      duration: 0.15
-    }
-  }
+export const axisUpdateAnimationTransition = {
+  duration: accessoryFadeTransitionDuration
 };