@coinbase/cds-web 8.66.2 → 9.0.0-rc.2

package/esm/visualizations/chart/area/Area.js

@@ -0,0 +1,85 @@
+import React, { memo, useMemo } from 'react';
+import { useCartesianChartContext } from '../ChartProvider';
+import { getAreaPath } from '../utils';
+import { DottedArea } from './DottedArea';
+import { GradientArea } from './GradientArea';
+import { SolidArea } from './SolidArea';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Area = /*#__PURE__*/memo(_ref => {
+  let {
+    seriesId,
+    curve = 'bump',
+    type = 'solid',
+    AreaComponent: AreaComponentProp,
+    fill: fillProp,
+    fillOpacity = 1,
+    connectNulls,
+    gradient: gradientProp,
+    transitions,
+    transition,
+    animate
+  } = _ref;
+  const {
+    layout,
+    getSeries,
+    getSeriesData,
+    getXScale,
+    getYScale,
+    getXAxis,
+    getYAxis
+  } = useCartesianChartContext();
+  const matchedSeries = useMemo(() => getSeries(seriesId), [seriesId, getSeries]);
+  const gradient = useMemo(() => gradientProp !== null && gradientProp !== void 0 ? gradientProp : matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.gradient, [gradientProp, matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.gradient]);
+  const fill = useMemo(() => fillProp !== null && fillProp !== void 0 ? fillProp : matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.color, [fillProp, matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.color]);
+  const sourceData = useMemo(() => getSeriesData(seriesId), [seriesId, getSeriesData]);
+  const xAxis = getXAxis(matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.xAxisId);
+  const xScale = getXScale(matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.xAxisId);
+  const yScale = getYScale(matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.yAxisId);
+  const yAxis = getYAxis(matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.yAxisId);
+  const categoryAxisIsX = useMemo(() => {
+    return layout !== 'horizontal';
+  }, [layout]);
+  const categoryAxis = useMemo(() => {
+    return categoryAxisIsX ? xAxis : yAxis;
+  }, [categoryAxisIsX, xAxis, yAxis]);
+  const area = useMemo(() => {
+    if (!sourceData || sourceData.length === 0 || !xScale || !yScale) return '';
+    const indexData = categoryAxis !== null && categoryAxis !== void 0 && categoryAxis.data && Array.isArray(categoryAxis.data) && typeof categoryAxis.data[0] === 'number' ? categoryAxis.data : undefined;
+    return getAreaPath({
+      data: sourceData,
+      xScale,
+      yScale,
+      curve,
+      xData: categoryAxisIsX ? indexData : undefined,
+      yData: !categoryAxisIsX ? indexData : undefined,
+      connectNulls,
+      layout
+    });
+  }, [sourceData, xScale, yScale, curve, categoryAxis, categoryAxisIsX, connectNulls, layout]);
+  const AreaComponent = useMemo(() => {
+    if (AreaComponentProp) {
+      return AreaComponentProp;
+    }
+    switch (type) {
+      case 'dotted':
+        return DottedArea;
+      case 'gradient':
+        return GradientArea;
+      case 'solid':
+      default:
+        return SolidArea;
+    }
+  }, [AreaComponentProp, type]);
+  if (!xScale || !yScale || !sourceData || !area) return;
+  return /*#__PURE__*/_jsx(AreaComponent, {
+    animate: animate,
+    d: area,
+    fill: fill,
+    fillOpacity: fillOpacity,
+    gradient: gradient,
+    transition: transition,
+    transitions: transitions,
+    xAxisId: matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.xAxisId,
+    yAxisId: matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.yAxisId
+  });
+});

package/esm/visualizations/chart/area/AreaChart.js

@@ -0,0 +1,173 @@
+const _excluded = ["series", "stacked", "AreaComponent", "curve", "fillOpacity", "type", "connectNulls", "transitions", "transition", "LineComponent", "strokeWidth", "showXAxis", "showYAxis", "showLines", "lineType", "xAxis", "yAxis", "inset", "children"],
+  _excluded2 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "baseline", "id"],
+  _excluded3 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "baseline", "id"],
+  _excluded4 = ["id", "data", "label", "color", "yAxisId", "opacity", "LineComponent", "stackId", "legendShape"],
+  _excluded5 = ["id", "data", "label", "color", "yAxisId", "fill", "fillOpacity", "stackId", "legendShape", "type"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { forwardRef, memo, useMemo } from 'react';
+import { XAxis, YAxis } from '../axis';
+import { CartesianChart } from '../CartesianChart';
+import { Line } from '../line/Line';
+import { defaultStackId, withBaselineDomain } 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) => {
+  let {
+      series,
+      stacked,
+      AreaComponent,
+      curve,
+      fillOpacity,
+      type,
+      connectNulls,
+      transitions,
+      transition,
+      LineComponent,
+      strokeWidth,
+      showXAxis,
+      showYAxis,
+      showLines,
+      lineType = 'solid',
+      xAxis,
+      yAxis,
+      inset,
+      children
+    } = _ref,
+    chartProps = _objectWithoutProperties(_ref, _excluded);
+  // Convert AreaSeries to Series for Chart context
+  const chartSeries = useMemo(() => {
+    return series === null || series === void 0 ? void 0 : series.map(s => ({
+      id: s.id,
+      data: s.data,
+      label: s.label,
+      color: s.color,
+      xAxisId: s.xAxisId,
+      yAxisId: s.yAxisId,
+      stackId: s.stackId,
+      gradient: s.gradient,
+      legendShape: s.legendShape
+    }));
+  }, [series]);
+  const transformedSeries = useMemo(() => {
+    if (!stacked || !chartSeries) return chartSeries;
+    return chartSeries.map(s => {
+      var _s$stackId;
+      return _objectSpread(_objectSpread({}, s), {}, {
+        stackId: (_s$stackId = s.stackId) !== null && _s$stackId !== void 0 ? _s$stackId : defaultStackId
+      });
+    });
+  }, [chartSeries, stacked]);
+  const seriesToRender = transformedSeries !== null && transformedSeries !== void 0 ? transformedSeries : chartSeries;
+
+  // 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 = _objectWithoutProperties(_ref2, _excluded2);
+  const _ref3 = yAxis || {},
+    {
+      scaleType: yScaleType,
+      data: yData,
+      categoryPadding: yCategoryPadding,
+      domain: yDomain,
+      domainLimit: yDomainLimit,
+      range: yRange,
+      baseline: yBaseline,
+      id: yAxisId
+    } = _ref3,
+    yAxisVisualProps = _objectWithoutProperties(_ref3, _excluded3);
+  const isHorizontalLayout = chartProps.layout === 'horizontal';
+  const valueAxisBaseline = isHorizontalLayout ? xBaseline : yBaseline;
+  const xAxisConfig = {
+    scaleType: xScaleType,
+    data: xData,
+    categoryPadding: xCategoryPadding,
+    domain: isHorizontalLayout ? withBaselineDomain(xDomain, valueAxisBaseline) : xDomain,
+    domainLimit: xDomainLimit,
+    range: xRange,
+    baseline: xBaseline
+  };
+  const yAxisConfig = {
+    scaleType: yScaleType,
+    data: yData,
+    categoryPadding: yCategoryPadding,
+    domain: !isHorizontalLayout ? withBaselineDomain(yDomain, valueAxisBaseline) : yDomain,
+    domainLimit: yDomainLimit,
+    range: yRange,
+    baseline: yBaseline
+  };
+  return /*#__PURE__*/_jsxs(CartesianChart, _objectSpread(_objectSpread({
+    ref: ref,
+    inset: inset,
+    series: seriesToRender,
+    xAxis: xAxisConfig,
+    yAxis: yAxisConfig
+  }, chartProps), {}, {
+    children: [showXAxis && /*#__PURE__*/_jsx(XAxis, _objectSpread({
+      axisId: xAxisId
+    }, xAxisVisualProps)), showYAxis && /*#__PURE__*/_jsx(YAxis, _objectSpread({
+      axisId: yAxisId
+    }, yAxisVisualProps)), series === null || series === void 0 ? void 0 : series.map(_ref4 => {
+      let {
+          id,
+          data,
+          label,
+          color,
+          yAxisId,
+          opacity,
+          LineComponent,
+          stackId,
+          legendShape
+        } = _ref4,
+        areaPropsFromSeries = _objectWithoutProperties(_ref4, _excluded4);
+      return /*#__PURE__*/_jsx(Area, _objectSpread({
+        AreaComponent: AreaComponent,
+        connectNulls: connectNulls,
+        curve: curve,
+        fillOpacity: fillOpacity,
+        seriesId: id,
+        transition: transition,
+        transitions: transitions,
+        type: type
+      }, areaPropsFromSeries), id);
+    }), showLines && (series === null || series === void 0 ? void 0 : series.map(_ref5 => {
+      let {
+          id,
+          data,
+          label,
+          color,
+          yAxisId,
+          fill,
+          fillOpacity,
+          stackId,
+          legendShape,
+          type // Area type (don't pass to Line)
+        } = _ref5,
+        otherPropsFromSeries = _objectWithoutProperties(_ref5, _excluded5);
+      return /*#__PURE__*/_jsx(Line, _objectSpread({
+        LineComponent: LineComponent,
+        connectNulls: connectNulls,
+        curve: curve,
+        seriesId: id,
+        strokeWidth: strokeWidth,
+        transition: transition,
+        transitions: transitions,
+        type: lineType
+      }, otherPropsFromSeries), id);
+    })), children]
+  }));
+}));

package/esm/visualizations/chart/area/DottedArea.js

@@ -0,0 +1,95 @@
+const _excluded = ["d", "fill", "patternSize", "dotSize", "peakOpacity", "baselineOpacity", "xAxisId", "yAxisId", "gradient", "animate", "transitions", "transition"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { memo, useId, useMemo } from 'react';
+import { useCartesianChartContext } from '../ChartProvider';
+import { Gradient } from '../gradient';
+import { Path } from '../Path';
+import { createGradient, getBaseline } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } 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 => {
+  var _transitions$update;
+  let {
+      d,
+      fill = 'var(--color-fgPrimary)',
+      patternSize = 4,
+      dotSize = 1,
+      peakOpacity = 1,
+      baselineOpacity = 0,
+      xAxisId,
+      yAxisId,
+      gradient: gradientProp,
+      animate,
+      transitions,
+      transition
+    } = _ref,
+    pathProps = _objectWithoutProperties(_ref, _excluded);
+  const {
+    layout,
+    getXAxis,
+    getYAxis
+  } = useCartesianChartContext();
+  const patternId = useId();
+  const gradientId = useId();
+  const maskId = useId();
+  const dotCenterPosition = patternSize / 2;
+  const valueAxisConfig = layout !== 'horizontal' ? getYAxis(yAxisId) : getXAxis(xAxisId);
+  const gradientAxis = layout !== 'horizontal' ? 'y' : 'x';
+  const gradient = useMemo(() => {
+    if (gradientProp) return gradientProp;
+    if (!valueAxisConfig) return;
+    const baselineValue = getBaseline(valueAxisConfig.domain, valueAxisConfig.baseline);
+    return createGradient(valueAxisConfig.domain, baselineValue, fill, peakOpacity, baselineOpacity, gradientAxis);
+  }, [gradientProp, valueAxisConfig, fill, peakOpacity, baselineOpacity, gradientAxis]);
+  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: "white",
+          r: dotSize
+        })
+      }), /*#__PURE__*/_jsx("mask", {
+        id: maskId,
+        children: /*#__PURE__*/_jsx(Path, {
+          animate: animate,
+          d: d,
+          fill: "url(#".concat(patternId, ")"),
+          transition: transition,
+          transitions: transitions
+        })
+      }), gradient && /*#__PURE__*/_jsx(Gradient, {
+        animate: animate,
+        gradient: gradient,
+        id: gradientId,
+        transition: (_transitions$update = transitions === null || transitions === void 0 ? void 0 : transitions.update) !== null && _transitions$update !== void 0 ? _transitions$update : transition,
+        xAxisId: xAxisId,
+        yAxisId: yAxisId
+      })]
+    }), /*#__PURE__*/_jsx(Path, _objectSpread({
+      animate: animate,
+      d: d,
+      fill: gradient ? "url(#".concat(gradientId, ")") : fill,
+      mask: "url(#".concat(maskId, ")"),
+      transition: transition,
+      transitions: transitions
+    }, pathProps))]
+  });
+});

package/esm/visualizations/chart/area/GradientArea.js

@@ -0,0 +1,72 @@
+const _excluded = ["d", "fill", "fillOpacity", "peakOpacity", "baselineOpacity", "xAxisId", "yAxisId", "gradient", "animate", "transitions", "transition"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { memo, useId, useMemo } from 'react';
+import { useCartesianChartContext } from '../ChartProvider';
+import { Gradient } from '../gradient';
+import { Path } from '../Path';
+import { createGradient, getBaseline } from '../utils';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A customizable gradient area component which uses Path with SVG linearGradient.
+ *
+ * When no gradient is provided, automatically creates an appropriate gradient:
+ * - For data crossing zero: Creates a diverging gradient with peak opacity at both extremes
+ *   and baseline opacity at zero (or the specified baseline).
+ * - For all-positive or all-negative data: Creates a simple gradient from baseline to peak.
+ */
+export const GradientArea = /*#__PURE__*/memo(_ref => {
+  var _transitions$update;
+  let {
+      d,
+      fill = 'var(--color-fgPrimary)',
+      fillOpacity = 1,
+      peakOpacity = 0.3,
+      baselineOpacity = 0,
+      xAxisId,
+      yAxisId,
+      gradient: gradientProp,
+      animate,
+      transitions,
+      transition
+    } = _ref,
+    pathProps = _objectWithoutProperties(_ref, _excluded);
+  const {
+    layout,
+    getXAxis,
+    getYAxis
+  } = useCartesianChartContext();
+  const patternId = useId();
+  const valueAxisConfig = layout !== 'horizontal' ? getYAxis(yAxisId) : getXAxis(xAxisId);
+  const gradientAxis = layout !== 'horizontal' ? 'y' : 'x';
+  const gradient = useMemo(() => {
+    if (gradientProp) return gradientProp;
+    if (!valueAxisConfig) return;
+    const baselineValue = getBaseline(valueAxisConfig.domain, valueAxisConfig.baseline);
+    return createGradient(valueAxisConfig.domain, baselineValue, fill, peakOpacity, baselineOpacity, gradientAxis);
+  }, [gradientProp, valueAxisConfig, fill, peakOpacity, baselineOpacity, gradientAxis]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [gradient && /*#__PURE__*/_jsx("defs", {
+      children: /*#__PURE__*/_jsx(Gradient, {
+        animate: animate,
+        gradient: gradient,
+        id: patternId,
+        transition: (_transitions$update = transitions === null || transitions === void 0 ? void 0 : transitions.update) !== null && _transitions$update !== void 0 ? _transitions$update : transition,
+        xAxisId: xAxisId,
+        yAxisId: yAxisId
+      })
+    }), /*#__PURE__*/_jsx(Path, _objectSpread({
+      animate: animate,
+      d: d,
+      fill: gradient ? "url(#".concat(patternId, ")") : fill,
+      fillOpacity: fillOpacity,
+      transition: transition,
+      transitions: transitions
+    }, pathProps))]
+  });
+});

package/esm/visualizations/chart/area/SolidArea.js

@@ -0,0 +1,52 @@
+const _excluded = ["d", "fill", "fillOpacity", "xAxisId", "yAxisId", "animate", "transitions", "transition", "gradient"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { memo, useId } from 'react';
+import { Gradient } from '../gradient';
+import { Path } from '../Path';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A customizable solid area component which uses Path.
+ * When a gradient is provided, renders with gradient fill.
+ * Otherwise, renders with solid fill.
+ */
+export const SolidArea = /*#__PURE__*/memo(_ref => {
+  var _transitions$update;
+  let {
+      d,
+      fill = 'var(--color-fgPrimary)',
+      fillOpacity = 1,
+      xAxisId,
+      yAxisId,
+      animate,
+      transitions,
+      transition,
+      gradient
+    } = _ref,
+    pathProps = _objectWithoutProperties(_ref, _excluded);
+  const patternId = useId();
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [gradient && /*#__PURE__*/_jsx("defs", {
+      children: /*#__PURE__*/_jsx(Gradient, {
+        animate: animate,
+        gradient: gradient,
+        id: patternId,
+        transition: (_transitions$update = transitions === null || transitions === void 0 ? void 0 : transitions.update) !== null && _transitions$update !== void 0 ? _transitions$update : transition,
+        xAxisId: xAxisId,
+        yAxisId: yAxisId
+      })
+    }), /*#__PURE__*/_jsx(Path, _objectSpread({
+      animate: animate,
+      d: d,
+      fill: gradient ? "url(#".concat(patternId, ")") : fill,
+      fillOpacity: fillOpacity,
+      transition: transition,
+      transitions: transitions
+    }, pathProps))]
+  });
+});

package/esm/visualizations/chart/area/index.js

@@ -0,0 +1,7 @@
+// codegen:start {preset: barrel, include: ./*.tsx, exclude: ./__stories__/*.tsx}
+export * from './Area';
+export * from './AreaChart';
+export * from './DottedArea';
+export * from './GradientArea';
+export * from './SolidArea';
+// codegen:end

package/esm/visualizations/chart/axis/Axis.js

@@ -0,0 +1,11 @@
+import { accessoryFadeTransitionDuration } from '../utils';
+export const axisLineStyles = "\n  stroke: var(--color-fg);\n  stroke-linecap: square;\n  stroke-width: 1px;\n";
+export const axisTickMarkStyles = "\n  stroke: var(--color-fg);\n  stroke-linecap: square;\n  stroke-width: 1px;\n";
+
+/**
+ * Animation variants for axis elements - updates (used for both grid lines and tick labels)
+ */
+export const axisUpdateAnimationTransition = {
+  duration: accessoryFadeTransitionDuration,
+  ease: 'easeOut'
+};

package/esm/visualizations/chart/axis/DefaultAxisTickLabel.js

@@ -0,0 +1,15 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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, _objectSpread({}, props));
+});

package/esm/visualizations/chart/axis/XAxis.css

@@ -0,0 +1,2 @@
+@layer cds{.axisTickMarkCss-a1ljkl4n{stroke:var(--color-fg);stroke-linecap:square;stroke-width:1px;}
+.axisLineCss-a1tnt2l6{stroke:var(--color-fg);stroke-linecap:square;stroke-width:1px;}}