@coinbase/cds-mobile-visualization 3.4.0-beta.4 → 3.4.0-beta.6

package/esm/chart/area/Area.js

@@ -1,5 +1,4 @@
 import React, { memo, useMemo } from 'react';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { useCartesianChartContext } from '../ChartProvider';
 import { getAreaPath } from '../utils';
 import { DottedArea } from './DottedArea';
@@ -7,37 +6,30 @@ import { GradientArea } from './GradientArea';
 import { SolidArea } from './SolidArea';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Area = /*#__PURE__*/memo(_ref => {
-  var _ref2;
   let {
     seriesId,
-    curve = 'linear',
+    curve = 'bump',
     type = 'solid',
-    AreaComponent: SelectedAreaComponent,
-    fill: specifiedFill,
+    AreaComponent: AreaComponentProp,
+    fill: fillProp,
     fillOpacity = 1,
-    stroke,
-    strokeWidth,
-    baseline
+    baseline,
+    connectNulls,
+    gradient: gradientProp,
+    transition,
+    animate
   } = _ref;
-  const theme = useTheme();
   const {
     getSeries,
     getSeriesData,
     getXScale,
     getYScale,
-    getXAxis,
-    drawingArea
+    getXAxis
   } = useCartesianChartContext();
-
-  // Get sourceData from series (using stacked data if available)
   const matchedSeries = useMemo(() => getSeries(seriesId), [seriesId, getSeries]);
-
-  // Check for stacked data first, then fall back to raw data
-  const sourceData = useMemo(() => {
-    return getSeriesData(seriesId) || null;
-  }, [seriesId, getSeriesData]);
-
-  // Get scales and axes for this series
+  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 yScale = getYScale(matchedSeries == null ? void 0 : matchedSeries.yAxisId);
@@ -51,35 +43,33 @@ export const Area = /*#__PURE__*/memo(_ref => {
       xScale,
       yScale,
       curve,
-      xData
+      xData,
+      connectNulls
     });
-  }, [sourceData, xScale, yScale, curve, xAxis == null ? void 0 : xAxis.data]);
+  }, [sourceData, xScale, yScale, curve, xAxis == null ? void 0 : xAxis.data, connectNulls]);
   const AreaComponent = useMemo(() => {
-    if (SelectedAreaComponent) {
-      return SelectedAreaComponent;
+    if (AreaComponentProp) {
+      return AreaComponentProp;
     }
     switch (type) {
-      case 'solid':
-        return SolidArea;
       case 'dotted':
         return DottedArea;
       case 'gradient':
-      default:
         return GradientArea;
+      case 'solid':
+      default:
+        return SolidArea;
     }
-  }, [SelectedAreaComponent, type]);
-  if (!xScale || !yScale || !sourceData || !area) {
-    return null;
-  }
-  const fill = (_ref2 = specifiedFill != null ? specifiedFill : matchedSeries == null ? void 0 : matchedSeries.color) != null ? _ref2 : theme.color.fgPrimary;
+  }, [AreaComponentProp, type]);
+  if (!xScale || !yScale || !sourceData || !area) return;
   return /*#__PURE__*/_jsx(AreaComponent, {
+    animate: animate,
     baseline: baseline,
-    clipRect: drawingArea,
     d: area,
     fill: fill,
     fillOpacity: fillOpacity,
-    stroke: stroke,
-    strokeWidth: strokeWidth,
+    gradient: gradient,
+    transition: transition,
     yAxisId: matchedSeries == null ? void 0 : matchedSeries.yAxisId
   });
 });

package/esm/chart/area/AreaChart.js

@@ -1,8 +1,8 @@
-const _excluded = ["series", "stacked", "AreaComponent", "curve", "fillOpacity", "type", "LineComponent", "strokeWidth", "showXAxis", "showYAxis", "showLines", "lineType", "xAxis", "yAxis", "inset", "children"],
+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"],
   _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"];
+  _excluded5 = ["id", "data", "label", "color", "yAxisId", "fill", "fillOpacity", "stackId", "type", "lineType"];
 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';
@@ -20,6 +20,8 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       curve,
       fillOpacity,
       type,
+      connectNulls,
+      transition,
       LineComponent,
       strokeWidth,
       showXAxis,
@@ -28,11 +30,11 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       lineType = 'solid',
       xAxis,
       yAxis,
-      inset: userInset,
+      inset,
       children
     } = _ref,
     chartProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const calculatedInset = useMemo(() => getChartInset(userInset, defaultChartInset), [userInset]);
+  const calculatedInset = useMemo(() => getChartInset(inset, defaultChartInset), [inset]);
 
   // Convert AreaSeries to Series for Chart context
   const chartSeries = useMemo(() => {
@@ -41,6 +43,7 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       data: s.data,
       label: s.label,
       color: s.color,
+      gradient: s.gradient,
       yAxisId: s.yAxisId,
       stackId: s.stackId
     }));
@@ -120,27 +123,29 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
         areaPropsFromSeries = _objectWithoutPropertiesLoose(_ref4, _excluded4);
       return /*#__PURE__*/_jsx(Area, _extends({
         AreaComponent: AreaComponent,
+        connectNulls: connectNulls,
         curve: curve,
         fillOpacity: fillOpacity,
         seriesId: id,
+        transition: transition,
         type: type
       }, areaPropsFromSeries), id);
     }), showLines && (series == null ? void 0 : series.map(_ref5 => {
       let {
           id,
-          color
+          // Area type (don't pass to Line)
+          lineType: seriesLineType
         } = _ref5,
-        linePropsFromSeries = _objectWithoutPropertiesLoose(_ref5, _excluded5);
+        otherPropsFromSeries = _objectWithoutPropertiesLoose(_ref5, _excluded5);
       return /*#__PURE__*/_jsx(Line, _extends({
         LineComponent: LineComponent,
+        connectNulls: connectNulls,
         curve: curve,
-        seriesId: id // Line component now handles stacked data automatically
-        ,
-        stroke: color // Default to series color
-        ,
+        seriesId: id,
         strokeWidth: strokeWidth,
-        type: lineType
-      }, linePropsFromSeries), id + "-line");
+        transition: transition,
+        type: seriesLineType != null ? seriesLineType : lineType
+      }, otherPropsFromSeries), id);
     })), children]
   }));
 }));

package/esm/chart/area/DottedArea.js

@@ -1,128 +1,80 @@
-const _excluded = ["d", "fill", "fillOpacity", "patternSize", "dotSize", "peakOpacity", "baselineOpacity", "baseline", "yAxisId", "clipRect"];
+const _excluded = ["d", "fill", "patternSize", "dotSize", "peakOpacity", "baselineOpacity", "baseline", "yAxisId", "gradient", "animate", "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, useId } from 'react';
-import { Circle, Defs, G, LinearGradient, Mask, Pattern, Stop } from 'react-native-svg';
+import { memo, useMemo } from 'react';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { Group, Skia } from '@shopify/react-native-skia';
 import { useCartesianChartContext } from '../ChartProvider';
+import { Gradient } from '../gradient';
 import { Path } from '../Path';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createGradient, getBaseline } from '../utils';
+import { getDottedAreaPath } from '../utils/path';
+import { usePathTransition } from '../utils/transition';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A customizable dotted area gradient component.
+ * When no gradient is provided, renders a default gradient based
+ * on the fill color and peak/baseline opacities.
+ */
 export const DottedArea = /*#__PURE__*/memo(_ref => {
   let {
       d,
-      fill,
-      fillOpacity = 1,
+      fill: fillProp,
       patternSize = 4,
       dotSize = 1,
       peakOpacity = 1,
       baselineOpacity = 0,
       baseline,
       yAxisId,
-      clipRect
+      gradient: gradientProp,
+      animate: animateProp,
+      transition
     } = _ref,
     pathProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
-  const context = useCartesianChartContext();
-  const patternId = useId();
-  const gradientId = useId();
-  const maskId = useId();
-  const dotCenterPosition = patternSize / 2;
-
-  // Get the y-scale for the specified axis (or default)
-  const yScale = context.getYScale(yAxisId);
-  const yRange = yScale == null ? void 0 : yScale.range();
-  const yDomain = yScale == null ? void 0 : yScale.domain();
-
-  // Use chart range if available, otherwise fall back to percentage
-  const useUserSpaceUnits = yRange !== undefined;
-
-  // Auto-calculate baseline position based on domain
-  let baselinePosition;
-  let baselinePercentage;
-  if (yScale && yDomain) {
-    const [minValue, maxValue] = yDomain;
-    let dataBaseline;
-    if (minValue >= 0) {
-      // All positive: baseline at min
-      dataBaseline = minValue;
-    } else if (maxValue <= 0) {
-      // All negative: baseline at max
-      dataBaseline = maxValue;
-    } else {
-      // Crosses zero: baseline at 0
-      dataBaseline = 0;
-    }
-    if (useUserSpaceUnits && yRange) {
-      // Get the actual y coordinate for the baseline
-      const scaledValue = yScale(baseline != null ? baseline : dataBaseline);
-      if (typeof scaledValue === 'number') {
-        baselinePosition = scaledValue;
-      }
-    } else {
-      // Calculate percentage position
-      baselinePercentage = (maxValue - (baseline != null ? baseline : dataBaseline)) / (maxValue - minValue) * 100 + "%";
-    }
-  }
-  const gradientY1 = useUserSpaceUnits && yRange ? String(yRange[1]) : '0%';
-  const gradientY2 = useUserSpaceUnits && yRange ? String(yRange[0]) : '100%';
-  const effectiveFill = fill != null ? fill : theme.color.fgPrimary;
-  return /*#__PURE__*/_jsxs(G, {
-    children: [/*#__PURE__*/_jsxs(Defs, {
-      children: [/*#__PURE__*/_jsx(Pattern, {
-        height: patternSize,
-        id: patternId,
-        patternUnits: "userSpaceOnUse",
-        width: patternSize,
-        x: "0",
-        y: "0",
-        children: /*#__PURE__*/_jsx(Circle, {
-          cx: dotCenterPosition,
-          cy: dotCenterPosition,
-          fill: effectiveFill,
-          r: dotSize
-        })
-      }), /*#__PURE__*/_jsx(LinearGradient, {
-        gradientUnits: useUserSpaceUnits ? 'userSpaceOnUse' : 'objectBoundingBox',
-        id: gradientId,
-        x1: useUserSpaceUnits ? '0' : '0%',
-        x2: useUserSpaceUnits ? '0' : '0%',
-        y1: gradientY1,
-        y2: gradientY2,
-        children: baselinePosition !== undefined || baselinePercentage !== undefined ? /* Diverging gradient: high opacity at extremes, low at baseline */
-        [/*#__PURE__*/_jsx(Stop, {
-          offset: "0%",
-          stopColor: "white",
-          stopOpacity: peakOpacity
-        }, "0"), /*#__PURE__*/_jsx(Stop, {
-          offset: baselinePercentage != null ? baselinePercentage : (baselinePosition - yRange[1]) / (yRange[0] - yRange[1]) * 100 + "%",
-          stopColor: "white",
-          stopOpacity: baselineOpacity
-        }, "1"), /*#__PURE__*/_jsx(Stop, {
-          offset: "100%",
-          stopColor: "white",
-          stopOpacity: peakOpacity
-        }, "2")] : /* Simple gradient from top to bottom */
-        [/*#__PURE__*/_jsx(Stop, {
-          offset: "0%",
-          stopColor: "white",
-          stopOpacity: peakOpacity
-        }, "0"), /*#__PURE__*/_jsx(Stop, {
-          offset: "100%",
-          stopColor: "white",
-          stopOpacity: baselineOpacity
-        }, "1")]
-      }), /*#__PURE__*/_jsx(Mask, {
-        id: maskId,
-        children: /*#__PURE__*/_jsx(Path, {
-          d: d,
-          fill: "url(#" + gradientId + ")"
-        })
-      })]
-    }), /*#__PURE__*/_jsx(Path, _extends({
-      clipRect: clipRect,
-      d: d,
-      fill: "url(#" + patternId + ")",
-      mask: "url(#" + maskId + ")"
-    }, pathProps))]
+  const {
+    drawingArea,
+    animate,
+    getYAxis
+  } = useCartesianChartContext();
+  const yAxisConfig = getYAxis(yAxisId);
+  const fill = useMemo(() => fillProp != null ? fillProp : theme.color.fgPrimary, [fillProp, theme.color.fgPrimary]);
+  const dottedPath = useMemo(() => {
+    if (!drawingArea) return '';
+    return getDottedAreaPath({
+      x: drawingArea.x,
+      y: drawingArea.y,
+      width: drawingArea.width,
+      height: drawingArea.height
+    }, patternSize, dotSize);
+  }, [drawingArea, patternSize, dotSize]);
+  const animatedClipPath = usePathTransition({
+    currentPath: d,
+    transition
+  });
+  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]);
+  return /*#__PURE__*/_jsx(Group, {
+    clip: animate ? animatedClipPath : staticClipPath,
+    children: /*#__PURE__*/_jsx(Path, _extends({
+      animate: animateProp != null ? animateProp : animate,
+      d: dottedPath,
+      fill: fill,
+      transition: transition
+    }, pathProps, {
+      children: gradient && /*#__PURE__*/_jsx(Gradient, {
+        gradient: gradient,
+        yAxisId: yAxisId
+      })
+    }))
   });
 });

package/esm/chart/area/GradientArea.js

@@ -1,110 +1,54 @@
-const _excluded = ["d", "fill", "fillOpacity", "peakColor", "baselineColor", "peakOpacity", "baselineOpacity", "baseline", "yAxisId", "clipRect"];
+const _excluded = ["d", "fill", "fillOpacity", "gradient", "peakOpacity", "baselineOpacity", "baseline", "yAxisId", "animate", "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, useId } from 'react';
-import { Defs, LinearGradient, Stop } from 'react-native-svg';
+import { memo, useMemo } from 'react';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { useCartesianChartContext } from '../ChartProvider';
+import { Gradient } from '../gradient';
 import { Path } from '../Path';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createGradient, getBaseline } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * A customizable gradient area component which uses Path.
+ * A customizable gradient area component.
+ * When no gradient is provided, renders a default gradient based
+ * on the fill color and peak/baseline opacities.
  */
 export const GradientArea = /*#__PURE__*/memo(_ref => {
   let {
       d,
-      fill,
+      fill: fillProp,
       fillOpacity = 1,
-      peakColor,
-      baselineColor,
+      gradient: gradientProp,
       peakOpacity = 0.3,
       baselineOpacity = 0,
       baseline,
       yAxisId,
-      clipRect
+      animate,
+      transition
     } = _ref,
     pathProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const context = useCartesianChartContext();
+  const {
+    getYAxis
+  } = useCartesianChartContext();
   const theme = useTheme();
-  const patternId = useId();
-
-  // Get the y-scale for the specified axis (or default)
-  const yScale = context.getYScale(yAxisId);
-  const yRange = yScale == null ? void 0 : yScale.range();
-  const yDomain = yScale == null ? void 0 : yScale.domain();
-
-  // Use chart range if available, otherwise fall back to percentage
-  const useUserSpaceUnits = yRange !== undefined;
-  const gradientY1 = useUserSpaceUnits && yRange ? String(yRange[1]) : '0%';
-  const gradientY2 = useUserSpaceUnits && yRange ? String(yRange[0]) : '100%';
-
-  // Auto-calculate baseline position based on domain
-  let baselinePosition;
-  let baselinePercentage;
-  if (yScale && yDomain) {
-    const [minValue, maxValue] = yDomain;
-    let dataBaseline;
-    if (minValue >= 0) {
-      // All positive: baseline at min
-      dataBaseline = minValue;
-    } else if (maxValue <= 0) {
-      // All negative: baseline at max
-      dataBaseline = maxValue;
-    } else {
-      // Crosses zero: baseline at 0
-      dataBaseline = 0;
-    }
-    if (useUserSpaceUnits && yRange) {
-      // Get the actual y coordinate for the baseline
-      const scaledValue = yScale(baseline != null ? baseline : dataBaseline);
-      if (typeof scaledValue === 'number') {
-        baselinePosition = scaledValue;
-      }
-    } else {
-      // Calculate percentage position
-      baselinePercentage = (maxValue - (baseline != null ? baseline : dataBaseline)) / (maxValue - minValue) * 100 + "%";
-    }
-  }
-  const effectiveFill = fill != null ? fill : theme.color.fgPrimary;
-  const effectivePeakColor = peakColor != null ? peakColor : effectiveFill;
-  const effectiveBaselineColor = baselineColor != null ? baselineColor : effectiveFill;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Defs, {
-      children: /*#__PURE__*/_jsx(LinearGradient, {
-        gradientUnits: useUserSpaceUnits ? 'userSpaceOnUse' : 'objectBoundingBox',
-        id: patternId,
-        x1: useUserSpaceUnits ? '0' : '0%',
-        x2: useUserSpaceUnits ? '0' : '0%',
-        y1: gradientY1,
-        y2: gradientY2,
-        children: baselinePosition !== undefined || baselinePercentage !== undefined ? /* Diverging gradient: peak opacity at extremes, baseline opacity at baseline */
-        [/*#__PURE__*/_jsx(Stop, {
-          offset: "0%",
-          stopColor: effectivePeakColor,
-          stopOpacity: peakOpacity
-        }, "0"), /*#__PURE__*/_jsx(Stop, {
-          offset: baselinePercentage != null ? baselinePercentage : (baselinePosition - yRange[1]) / (yRange[0] - yRange[1]) * 100 + "%",
-          stopColor: effectiveBaselineColor,
-          stopOpacity: baselineOpacity
-        }, "1"), /*#__PURE__*/_jsx(Stop, {
-          offset: "100%",
-          stopColor: effectivePeakColor,
-          stopOpacity: peakOpacity
-        }, "2")] : /* Simple gradient from peak to baseline */
-        [/*#__PURE__*/_jsx(Stop, {
-          offset: "0%",
-          stopColor: effectivePeakColor,
-          stopOpacity: peakOpacity
-        }, "0"), /*#__PURE__*/_jsx(Stop, {
-          offset: "100%",
-          stopColor: effectiveBaselineColor,
-          stopOpacity: baselineOpacity
-        }, "1")]
-      })
-    }), /*#__PURE__*/_jsx(Path, _extends({
-      clipRect: clipRect,
-      d: d,
-      fill: "url(#" + patternId + ")"
-    }, pathProps))]
-  });
+  const yAxisConfig = getYAxis(yAxisId);
+  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]);
+  return /*#__PURE__*/_jsx(Path, _extends({
+    animate: animate,
+    d: d,
+    fill: fill,
+    fillOpacity: fillOpacity,
+    transition: transition
+  }, pathProps, {
+    children: gradient && /*#__PURE__*/_jsx(Gradient, {
+      gradient: gradient,
+      yAxisId: yAxisId
+    })
+  }));
 });

package/esm/chart/area/SolidArea.js

@@ -1,24 +1,38 @@
-const _excluded = ["d", "fill", "fillOpacity", "clipRect"];
+const _excluded = ["d", "fill", "fillOpacity", "yAxisId", "animate", "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';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { Gradient } from '../gradient';
 import { Path } from '../Path';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * A customizable solid area component which uses Path.
+ * A customizable solid area component.
+ * When a gradient is provided, renders with gradient fill.
+ * Otherwise, renders with solid fill.
  */
 export const SolidArea = /*#__PURE__*/memo(_ref => {
   let {
       d,
       fill,
       fillOpacity = 1,
-      clipRect
+      yAxisId,
+      animate,
+      transition,
+      gradient
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    pathProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
   return /*#__PURE__*/_jsx(Path, _extends({
-    clipRect: clipRect,
+    animate: animate,
     d: d,
-    fill: fill,
-    fillOpacity: fillOpacity
-  }, props));
+    fill: fill != null ? fill : theme.color.fgPrimary,
+    fillOpacity: fillOpacity,
+    transition: transition
+  }, pathProps, {
+    children: gradient && /*#__PURE__*/_jsx(Gradient, {
+      gradient: gradient,
+      yAxisId: yAxisId
+    })
+  }));
 });

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

@@ -64,7 +64,7 @@ const AreaChartStories = () => {
           id: 'pageViews',
           data: [24, 13, -98, 39, 48, 38, 43]
         }],
-        type: "gradient",
+        type: "solid",
         yAxis: {
           showGrid: true
         },

package/esm/chart/axis/Axis.js

@@ -1,5 +1,7 @@
 /**
  * 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: {

package/esm/chart/axis/DefaultAxisTickLabel.js

@@ -0,0 +1,11 @@
+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 } from 'react';
+import { ChartText } from '../text';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * DefaultAxisTickLabel is the default label component for axis tick labels.
+ * Provides standard styling for both X and Y axis tick labels.
+ */
+export const DefaultAxisTickLabel = /*#__PURE__*/memo(props => {
+  return /*#__PURE__*/_jsx(ChartText, _extends({}, props));
+});