@coinbase/cds-web-visualization 3.4.0-beta.5 → 3.4.0-beta.7

package/CHANGELOG.md

@@ -8,6 +8,21 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 3.4.0-beta.7 (12/2/2025 PST)
+
+#### 🐞 Fixes
+
+- Improve opacity customization for ReferenceLine. [[#201](https://github.com/coinbase/cds/pull/201)]
+
+## 3.4.0-beta.6 (10/16/2025 PST)
+
+#### 🚀 Updates
+
+- Support connecting null values in Area and Line
+- Added label to XAxis and YAxis
+- Added gradient support
+- Improved charts accessibility support
+
 ## 3.4.0-beta.5 (11/4/2025 PST)
 
 This is an artificial version bump with no new change.

package/dts/chart/CartesianChart.d.ts

@@ -19,7 +19,7 @@ export type CartesianChartBaseProps = BoxBaseProps &
      */
     xAxis?: Partial<Omit<AxisConfigProps, 'id'>>;
     /**
-     * Configuration for y-axis(es). First defined axis becomes default.
+     * Configuration for y-axis(es). Can be a single config or array of configs.
      */
     yAxis?: Partial<Omit<AxisConfigProps, 'data'>> | Partial<Omit<AxisConfigProps, 'data'>>[];
     /**
@@ -27,7 +27,43 @@ export type CartesianChartBaseProps = BoxBaseProps &
      */
     inset?: number | Partial<ChartInset>;
   };
-export type CartesianChartProps = BoxProps<'svg'> & CartesianChartBaseProps;
+export type CartesianChartProps = Omit<BoxProps<'div'>, 'title'> &
+  CartesianChartBaseProps & {
+    /**
+     * Custom class name for the root element.
+     */
+    className?: string;
+    /**
+     * Custom class names for the component.
+     */
+    classNames?: {
+      /**
+       * Custom class name for the root element.
+       */
+      root?: string;
+      /**
+       * Custom class name for the chart SVG element.
+       */
+      chart?: string;
+    };
+    /**
+     * Custom styles for the root element.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Custom styles for the component.
+     */
+    styles?: {
+      /**
+       * Custom styles for the root element.
+       */
+      root?: React.CSSProperties;
+      /**
+       * Custom styles for the chart SVG element.
+       */
+      chart?: React.CSSProperties;
+    };
+  };
 export declare const CartesianChart: React.MemoExoticComponent<
   React.ForwardRefExoticComponent<
     Omit<CartesianChartProps, 'ref'> & React.RefAttributes<SVGSVGElement>

package/dts/chart/CartesianChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CartesianChart.d.ts","sourceRoot":"","sources":["../../src/chart/CartesianChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAI9E,OAAO,EAAO,KAAK,YAAY,EAAE,KAAK,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAGjF,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAE3F,OAAO,EAEL,KAAK,eAAe,EAEpB,KAAK,UAAU,EAUf,KAAK,MAAM,EAEZ,MAAM,SAAS,CAAC;AAYjB,MAAM,MAAM,uBAAuB,GAAG,YAAY,GAChD,IAAI,CAAC,qBAAqB,EAAE,iBAAiB,GAAG,0BAA0B,CAAC,GAAG;IAC5E;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC,CAAC;IAC7C;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,EAAE,CAAC;IAC1F;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;CACtC,CAAC;AAEJ,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,uBAAuB,CAAC;AAE5E,eAAO,MAAM,cAAc,mIAqS1B,CAAC"}
+{"version":3,"file":"CartesianChart.d.ts","sourceRoot":"","sources":["../../src/chart/CartesianChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAI9E,OAAO,EAAO,KAAK,YAAY,EAAE,KAAK,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAGjF,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAE3F,OAAO,EAEL,KAAK,eAAe,EAEpB,KAAK,UAAU,EAUf,KAAK,MAAM,EAEZ,MAAM,SAAS,CAAC;AAYjB,MAAM,MAAM,uBAAuB,GAAG,YAAY,GAChD,IAAI,CAAC,qBAAqB,EAAE,iBAAiB,GAAG,0BAA0B,CAAC,GAAG;IAC5E;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC,CAAC;IAC7C;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,EAAE,CAAC;IAC1F;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;CACtC,CAAC;AAEJ,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,GAC9D,uBAAuB,GAAG;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC7B,CAAC;CACH,CAAC;AAEJ,eAAO,MAAM,cAAc,mIA6U1B,CAAC"}

package/dts/chart/Path.d.ts

@@ -1,7 +1,17 @@
-import 'd3-transition';
 import type { SVGProps } from 'react';
 import type { Rect, SharedProps } from '@coinbase/cds-common/types';
-export type PathProps = SharedProps &
+import { type Transition } from 'framer-motion';
+/**
+ * Duration in seconds for path enter transition.
+ */
+export declare const pathEnterTransitionDuration = 0.5;
+export type PathBaseProps = SharedProps & {
+  /**
+   * Whether to animate this path. Overrides the animate prop on the Chart component.
+   */
+  animate?: boolean;
+};
+export type PathProps = PathBaseProps &
   Omit<
     SVGProps<SVGPathElement>,
     | 'onAnimationStart'
@@ -18,17 +28,27 @@ export type PathProps = SharedProps &
     | 'onDragStartCapture'
   > & {
     /**
-     * Whether to animate this path. Overrides the animate prop on the Chart component.
+     * Offset added to the clip rect boundaries.
      */
-    animate?: boolean;
+    clipOffset?: number;
     /**
      * Custom clip path rect. If provided, this overrides the default chart rect for clipping.
+     * Pass null to disable clipping.
+     * @default drawingArea of chart + clipOffset
      */
-    clipRect?: Rect;
+    clipRect?: Rect | null;
     /**
-     * The offset to add to the clip rect boundaries.
+     * Transition configuration for path.
+     *
+     * @example
+     * // Timing based animation
+     * transition={{ type: 'tween', duration: 0.2, ease: 'easeOut' }}
+     *
+     * @example
+     * // Spring animation
+     * transition={{ type: 'spring', damping: 20, stiffness: 300 }}
      */
-    clipOffset?: number;
+    transition?: Transition;
   };
 export declare const Path: import('react').NamedExoticComponent<PathProps>;
 //# sourceMappingURL=Path.d.ts.map

package/dts/chart/Path.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Path.d.ts","sourceRoot":"","sources":["../../src/chart/Path.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AAGvB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAOpE,MAAM,MAAM,SAAS,GAAG,WAAW,GACjC,IAAI,CACF,QAAQ,CAAC,cAAc,CAAC,EACtB,kBAAkB,GAClB,gBAAgB,GAChB,sBAAsB,GACtB,yBAAyB,GACzB,uBAAuB,GACvB,6BAA6B,GAC7B,QAAQ,GACR,WAAW,GACX,aAAa,GACb,eAAe,GACf,kBAAkB,GAClB,oBAAoB,CACvB,GAAG;IACF;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEJ,eAAO,MAAM,IAAI,iDAuEhB,CAAC"}
+{"version":3,"file":"Path.d.ts","sourceRoot":"","sources":["../../src/chart/Path.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAK7D;;GAEG;AACH,eAAO,MAAM,2BAA2B,MAAM,CAAC;AAE/C,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG;IACxC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GACnC,IAAI,CACF,QAAQ,CAAC,cAAc,CAAC,EACtB,kBAAkB,GAClB,gBAAgB,GAChB,sBAAsB,GACtB,yBAAyB,GACzB,uBAAuB,GACvB,6BAA6B,GAC7B,QAAQ,GACR,WAAW,GACX,aAAa,GACb,eAAe,GACf,kBAAkB,GAClB,oBAAoB,CACvB,GAAG;IACF;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACvB;;;;;;;;;;OAUG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAWJ,eAAO,MAAM,IAAI,iDA+DhB,CAAC"}

package/dts/chart/PeriodSelector.d.ts

@@ -23,10 +23,6 @@ export type LiveTabLabelBaseProps = TextBaseProps & {
    * Whether to hide the dot.
    */
   hideDot?: boolean;
-  /**
-   * Whether to disable the pulse animation.
-   */
-  disablePulse?: boolean;
 };
 export type LiveTabLabelProps<AsComponent extends React.ElementType> = Polymorphic.Props<
   AsComponent,

package/dts/chart/PeriodSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PeriodSelector.d.ts","sourceRoot":"","sources":["../../src/chart/PeriodSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAEvE,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,wBAAwB,EAE9B,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAaxE,eAAO,MAAM,6BAA6B,4FAOrC,wBAAwB,oDAwB5B,CAAC;AAEF,eAAO,MAAM,0BAA0B,SAAS,CAAC;AAEjD,MAAM,MAAM,0BAA0B,GAAG,OAAO,0BAA0B,CAAC;AAE3E,MAAM,MAAM,qBAAqB,GAAG,aAAa,GAAG;IAClD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,IAAI,WAAW,CAAC,KAAK,CACtF,WAAW,EACX,qBAAqB,CACtB,CAAC;AAYF,KAAK,qBAAqB,GAAG,CAAC,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,0BAA0B,EAC/F,KAAK,EAAE,iBAAiB,CAAC,WAAW,CAAC,KAClC,WAAW,CAAC,WAAW,CAAC,GAC3B,WAAW,CAAC,UAAU,CAAC;AAEzB,eAAO,MAAM,YAAY,EAAE,qBA+C1B,CAAC;AASF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,CAAC;AAErD;;;GAGG;AACH,eAAO,MAAM,cAAc,+TA0B1B,CAAC"}
+{"version":3,"file":"PeriodSelector.d.ts","sourceRoot":"","sources":["../../src/chart/PeriodSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAEvE,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,wBAAwB,EAE9B,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAOxE,eAAO,MAAM,6BAA6B,4FAOrC,wBAAwB,oDAwB5B,CAAC;AAEF,eAAO,MAAM,0BAA0B,SAAS,CAAC;AAEjD,MAAM,MAAM,0BAA0B,GAAG,OAAO,0BAA0B,CAAC;AAE3E,MAAM,MAAM,qBAAqB,GAAG,aAAa,GAAG;IAClD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,IAAI,WAAW,CAAC,KAAK,CACtF,WAAW,EACX,qBAAqB,CACtB,CAAC;AAYF,KAAK,qBAAqB,GAAG,CAAC,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,0BAA0B,EAC/F,KAAK,EAAE,iBAAiB,CAAC,WAAW,CAAC,KAClC,WAAW,CAAC,WAAW,CAAC,GAC3B,WAAW,CAAC,UAAU,CAAC;AAEzB,eAAO,MAAM,YAAY,EAAE,qBAiC1B,CAAC;AASF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,CAAC;AAErD;;;GAGG;AACH,eAAO,MAAM,cAAc,+TA0B1B,CAAC"}

package/dts/chart/area/Area.d.ts

@@ -1,48 +1,78 @@
 import React from 'react';
 import type { SVGProps } from 'react';
-import { type ChartPathCurveType } from '../utils';
-export type AreaComponentProps = {
-  d: SVGProps<SVGPathElement>['d'];
+import type { Transition } from 'framer-motion';
+import { type ChartPathCurveType, type GradientDefinition } from '../utils';
+export type AreaBaseProps = {
+  /**
+   * The ID of the series to render. Will be used to find the data from the chart context.
+   */
+  seriesId: string;
+  /**
+   * The curve interpolation method to use for the line.
+   * @default 'bump'
+   */
+  curve?: ChartPathCurveType;
+  /**
+   * The type of area to render.
+   * @default 'solid'
+   */
+  type?: 'solid' | 'dotted' | 'gradient';
+  /**
+   * Component to render the area.
+   * Takes precedence over the type prop if provided.
+   */
+  AreaComponent?: AreaComponent;
+  /**
+   * When true, the area is connected across null values.
+   */
+  connectNulls?: boolean;
   /**
    * The color of the area.
    * @default color of the series or 'var(--color-fgPrimary)'
    */
   fill?: string;
+  /**
+   * Opacity of the area
+   * @note when combined with gradient, both will be applied
+   * @default 1
+   */
   fillOpacity?: number;
-  stroke?: string;
-  strokeWidth?: number;
-  yAxisId?: string;
-  animate?: boolean;
   /**
    * Baseline value for the gradient.
    * When set, overrides the default baseline.
    */
   baseline?: number;
-};
-export type AreaComponent = React.FC<AreaComponentProps>;
-export type AreaProps = Pick<
-  AreaComponentProps,
-  'fill' | 'fillOpacity' | 'stroke' | 'strokeWidth' | 'baseline'
-> & {
   /**
-   * The ID of the series to render. Will be used to find the data from the chart context.
+   * Gradient configuration.
+   * When provided, creates gradient or threshold-based coloring.
    */
-  seriesId: string;
+  gradient?: GradientDefinition;
   /**
-   * The curve interpolation method to use for the line.
-   * @default 'linear'
+   * Whether to animate the area.
+   * Overrides the animate value from the chart context.
    */
-  curve?: ChartPathCurveType;
+  animate?: boolean;
+};
+export type AreaProps = AreaBaseProps & {
   /**
-   * The type of area to render.
-   * @default 'solid'
+   * Transition configuration for path animations.
    */
-  type?: 'solid' | 'dotted' | 'gradient';
+  transition?: Transition;
+};
+export type AreaComponentProps = Pick<
+  AreaProps,
+  'fill' | 'fillOpacity' | 'baseline' | 'gradient' | 'animate' | 'transition'
+> & {
   /**
-   * Component to render the area.
-   * Takes precedence over the type prop if provided.
+   * Path of the area
    */
-  AreaComponent?: AreaComponent;
+  d: SVGProps<SVGPathElement>['d'];
+  /**
+   * ID of the y-axis to use.
+   * If not provided, defaults to the default y-axis.
+   */
+  yAxisId?: string;
 };
+export type AreaComponent = React.FC<AreaComponentProps>;
 export declare const Area: React.NamedExoticComponent<AreaProps>;
 //# sourceMappingURL=Area.d.ts.map

package/dts/chart/area/Area.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Area.d.ts","sourceRoot":"","sources":["../../../src/chart/area/Area.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,EAAE,KAAK,kBAAkB,EAAe,MAAM,UAAU,CAAC;AAMhE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC;IACjC;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC;AAEzD,MAAM,MAAM,SAAS,GAAG,IAAI,CAC1B,kBAAkB,EAClB,MAAM,GAAG,aAAa,GAAG,QAAQ,GAAG,aAAa,GAAG,UAAU,CAC/D,GAAG;IACF;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;IACvC;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,IAAI,uCAmFhB,CAAC"}
+{"version":3,"file":"Area.d.ts","sourceRoot":"","sources":["../../../src/chart/area/Area.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhD,OAAO,EAAE,KAAK,kBAAkB,EAAe,KAAK,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAMzF,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;IACvC;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG;IACtC;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,SAAS,EACT,MAAM,GAAG,aAAa,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,YAAY,CAC5E,GAAG;IACF;;OAEG;IACH,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC;AAEzD,eAAO,MAAM,IAAI,uCA+EhB,CAAC"}

package/dts/chart/area/AreaChart.d.ts

@@ -1,13 +1,28 @@
 import { type XAxisProps, type YAxisProps } from '../axis';
-import { type CartesianChartProps } from '../CartesianChart';
+import { type CartesianChartBaseProps, type CartesianChartProps } from '../CartesianChart';
 import { type LineProps } from '../line/Line';
 import { type AxisConfigProps, type Series } from '../utils';
 import { type AreaProps } from './Area';
 export type AreaSeries = Series &
-  Partial<Pick<AreaProps, 'AreaComponent' | 'curve' | 'fillOpacity' | 'type' | 'fill'>> &
-  Partial<Pick<LineProps, 'LineComponent' | 'strokeWidth' | 'stroke' | 'opacity'>>;
-export type AreaChartProps = Omit<CartesianChartProps, 'xAxis' | 'yAxis' | 'series'> &
-  Pick<AreaProps, 'AreaComponent' | 'curve' | 'fillOpacity' | 'type'> &
+  Partial<
+    Pick<
+      AreaProps,
+      'AreaComponent' | 'curve' | 'fillOpacity' | 'type' | 'fill' | 'connectNulls' | 'transition'
+    >
+  > &
+  Partial<Pick<LineProps, 'LineComponent' | 'strokeWidth' | 'stroke' | 'opacity'>> & {
+    /**
+     * The type of line to render for this series.
+     * Overrides the chart-level lineType if provided.
+     * @default 'solid'
+     */
+    lineType?: 'solid' | 'dotted';
+  };
+export type AreaChartBaseProps = Omit<CartesianChartBaseProps, 'xAxis' | 'yAxis' | 'series'> &
+  Pick<
+    AreaProps,
+    'AreaComponent' | 'curve' | 'fillOpacity' | 'type' | 'connectNulls' | 'transition'
+  > &
   Pick<LineProps, 'LineComponent' | 'strokeWidth'> & {
     /**
      * Configuration objects that define how to visualize the data.
@@ -40,10 +55,22 @@ export type AreaChartProps = Omit<CartesianChartProps, 'xAxis' | 'yAxis' | 'seri
      * The type of line to render.
      * @default 'solid'
      */
-    lineType?: 'solid' | 'dotted' | 'gradient';
+    lineType?: 'solid' | 'dotted';
+    /**
+     * Configuration for x-axis.
+     * Accepts axis config and axis props.
+     * To show the axis, set `showXAxis` to true.
+     */
     xAxis?: Partial<AxisConfigProps> & XAxisProps;
+    /**
+     * Configuration for y-axis.
+     * Accepts axis config and axis props.
+     * To show the axis, set `showYAxis` to true.
+     */
     yAxis?: Partial<AxisConfigProps> & YAxisProps;
   };
+export type AreaChartProps = AreaChartBaseProps &
+  Omit<CartesianChartProps, 'xAxis' | 'yAxis' | 'series'>;
 export declare const AreaChart: import('react').MemoExoticComponent<
   import('react').ForwardRefExoticComponent<
     Omit<AreaChartProps, 'ref'> & import('react').RefAttributes<SVGSVGElement>

package/dts/chart/area/AreaChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AreaChart.d.ts","sourceRoot":"","sources":["../../../src/chart/area/AreaChart.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,UAAU,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACzE,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7E,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EACL,KAAK,eAAe,EAIpB,KAAK,MAAM,EACZ,MAAM,UAAU,CAAC;AAElB,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAE9C,MAAM,MAAM,UAAU,GAAG,MAAM,GAC7B,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,eAAe,GAAG,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,MAAM,CAAC,CAAC,GACrF,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,eAAe,GAAG,aAAa,GAAG,QAAQ,GAAG,SAAS,CAAC,CAAC,CAAC;AAEnF,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC,GAClF,IAAI,CAAC,SAAS,EAAE,eAAe,GAAG,OAAO,GAAG,aAAa,GAAG,MAAM,CAAC,GACnE,IAAI,CAAC,SAAS,EAAE,eAAe,GAAG,aAAa,CAAC,GAAG;IACjD;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC3B;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;IAE3C,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU,CAAC;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU,CAAC;CAC/C,CAAC;AAEJ,eAAO,MAAM,SAAS,4JAuKrB,CAAC"}
+{"version":3,"file":"AreaChart.d.ts","sourceRoot":"","sources":["../../../src/chart/area/AreaChart.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,UAAU,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACzE,OAAO,EAEL,KAAK,uBAAuB,EAC5B,KAAK,mBAAmB,EACzB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EACL,KAAK,eAAe,EAIpB,KAAK,MAAM,EACZ,MAAM,UAAU,CAAC;AAElB,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAE9C,MAAM,MAAM,UAAU,GAAG,MAAM,GAC7B,OAAO,CACL,IAAI,CACF,SAAS,EACT,eAAe,GAAG,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,MAAM,GAAG,cAAc,GAAG,YAAY,CAC5F,CACF,GACD,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,eAAe,GAAG,aAAa,GAAG,QAAQ,GAAG,SAAS,CAAC,CAAC,GAAG;IACjF;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC/B,CAAC;AAEJ,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,uBAAuB,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC,GAC1F,IAAI,CACF,SAAS,EACT,eAAe,GAAG,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,cAAc,GAAG,YAAY,CACnF,GACD,IAAI,CAAC,SAAS,EAAE,eAAe,GAAG,aAAa,CAAC,GAAG;IACjD;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC3B;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC9B;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU,CAAC;IAC9C;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU,CAAC;CAC/C,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAC7C,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC,CAAC;AAE1D,eAAO,MAAM,SAAS,4JA8KrB,CAAC"}

package/dts/chart/area/DottedArea.d.ts

@@ -1,7 +1,18 @@
 import { type PathProps } from '../Path';
 import type { AreaComponentProps } from './Area';
-export type DottedAreaProps = Omit<PathProps, 'd' | 'fill' | 'fillOpacity' | 'clipRect'> &
-  Omit<AreaComponentProps, 'clipRect'> & {
+export type DottedAreaProps = Pick<
+  PathProps,
+  | 'stroke'
+  | 'strokeWidth'
+  | 'strokeOpacity'
+  | 'strokeLinecap'
+  | 'strokeLinejoin'
+  | 'strokeDasharray'
+  | 'strokeDashoffset'
+  | 'clipOffset'
+  | 'children'
+> &
+  AreaComponentProps & {
     /**
      * Size of the pattern unit (width and height).
      * @default 4
@@ -14,55 +25,21 @@ export type DottedAreaProps = Omit<PathProps, 'd' | 'fill' | 'fillOpacity' | 'cl
     dotSize?: number;
     /**
      * Opacity at the peak values (top/bottom of gradient).
-     * @default 0.3
+     * @note only used when no gradient is provided
+     * @default 1
      */
     peakOpacity?: number;
     /**
      * Opacity at the baseline (0 or edge closest to 0).
+     * @note only used when no gradient is provided
      * @default 0
      */
     baselineOpacity?: number;
-    /**
-     * ID of the y-axis to use for gradient range.
-     * If not provided, defaults to the default y-axis.
-     */
-    yAxisId?: string;
-    className?: string;
-    style?: React.CSSProperties;
-    /**
-     * Custom class names for the component.
-     */
-    classNames?: {
-      /**
-       * Custom class name for the root element.
-       */
-      root?: string;
-      /**
-       * Custom class name for the pattern element.
-       */
-      pattern?: string;
-      /**
-       * Custom class name for the area path element.
-       */
-      path?: string;
-    };
-    /**
-     * Custom styles for the component.
-     */
-    styles?: {
-      /**
-       * Custom styles for the root element.
-       */
-      root?: React.CSSProperties;
-      /**
-       * Custom styles for the pattern element.
-       */
-      pattern?: React.CSSProperties;
-      /**
-       * Custom styles for the area path element.
-       */
-      path?: React.CSSProperties;
-    };
   };
+/**
+ * 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 declare const DottedArea: import('react').NamedExoticComponent<DottedAreaProps>;
 //# sourceMappingURL=DottedArea.d.ts.map

package/dts/chart/area/DottedArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DottedArea.d.ts","sourceRoot":"","sources":["../../../src/chart/area/DottedArea.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAE/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAEjD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,GAAG,MAAM,GAAG,aAAa,GAAG,UAAU,CAAC,GACtF,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,GAAG;IACrC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC9B;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC5B,CAAC;CACH,CAAC;AAEJ,eAAO,MAAM,UAAU,uDA+HtB,CAAC"}
+{"version":3,"file":"DottedArea.d.ts","sourceRoot":"","sources":["../../../src/chart/area/DottedArea.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAG/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAEjD,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,SAAS,EACP,QAAQ,GACR,aAAa,GACb,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,iBAAiB,GACjB,kBAAkB,GAClB,YAAY,GACZ,UAAU,CACb,GACC,kBAAkB,GAAG;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEJ;;;;GAIG;AACH,eAAO,MAAM,UAAU,uDAoEtB,CAAC"}

package/dts/chart/area/GradientArea.d.ts

@@ -1,30 +1,39 @@
 import { type PathProps } from '../Path';
 import type { AreaComponentProps } from './Area';
-export type GradientAreaProps = Omit<PathProps, 'd' | 'fill' | 'fillOpacity'> &
+export type GradientAreaProps = Pick<
+  PathProps,
+  | 'stroke'
+  | 'strokeWidth'
+  | 'strokeOpacity'
+  | 'strokeLinecap'
+  | 'strokeLinejoin'
+  | 'strokeDasharray'
+  | 'strokeDashoffset'
+  | 'clipRect'
+  | 'clipOffset'
+  | 'children'
+> &
   AreaComponentProps & {
-    /**
-     * The color at peak values (top/bottom of gradient).
-     * @default fill or 'var(--color-fgPrimary)'
-     */
-    peakColor?: string;
-    /**
-     * The color at the baseline (0 or edge closest to 0).
-     * @default peakColor or fill
-     */
-    baselineColor?: string;
     /**
      * Opacity at peak values.
+     * @note only used when no gradient is provided
      * @default 0.3
      */
     peakOpacity?: number;
     /**
      * Opacity at the baseline.
+     * @note only used when no gradient is provided
      * @default 0
      */
     baselineOpacity?: number;
   };
 /**
- * A customizable gradient area component which uses Path.
+ * 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 declare const GradientArea: import('react').NamedExoticComponent<GradientAreaProps>;
 //# sourceMappingURL=GradientArea.d.ts.map

package/dts/chart/area/GradientArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GradientArea.d.ts","sourceRoot":"","sources":["../../../src/chart/area/GradientArea.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAE/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,GAAG,MAAM,GAAG,aAAa,CAAC,GAC3E,kBAAkB,GAAG;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEJ;;GAEG;AACH,eAAO,MAAM,YAAY,yDAsGxB,CAAC"}
+{"version":3,"file":"GradientArea.d.ts","sourceRoot":"","sources":["../../../src/chart/area/GradientArea.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAG/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,SAAS,EACP,QAAQ,GACR,aAAa,GACb,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,iBAAiB,GACjB,kBAAkB,GAClB,UAAU,GACV,YAAY,GACZ,UAAU,CACb,GACC,kBAAkB,GAAG;IACnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEJ;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,yDAmDxB,CAAC"}

package/dts/chart/area/SolidArea.d.ts

@@ -1,8 +1,23 @@
 import { type PathProps } from '../Path';
 import type { AreaComponentProps } from './Area';
-export type SolidAreaProps = Omit<PathProps, 'd' | 'fill' | 'fillOpacity'> & AreaComponentProps;
+export type SolidAreaProps = Pick<
+  PathProps,
+  | 'stroke'
+  | 'strokeWidth'
+  | 'strokeOpacity'
+  | 'strokeLinecap'
+  | 'strokeLinejoin'
+  | 'strokeDasharray'
+  | 'strokeDashoffset'
+  | 'clipRect'
+  | 'clipOffset'
+  | 'children'
+> &
+  AreaComponentProps;
 /**
  * A customizable solid area component which uses Path.
+ * When a gradient is provided, renders with gradient fill.
+ * Otherwise, renders with solid fill.
  */
 export declare const SolidArea: import('react').NamedExoticComponent<SolidAreaProps>;
 //# sourceMappingURL=SolidArea.d.ts.map

package/dts/chart/area/SolidArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidArea.d.ts","sourceRoot":"","sources":["../../../src/chart/area/SolidArea.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAE/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAEjD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,GAAG,MAAM,GAAG,aAAa,CAAC,GAAG,kBAAkB,CAAC;AAEhG;;GAEG;AACH,eAAO,MAAM,SAAS,sDAIrB,CAAC"}
+{"version":3,"file":"SolidArea.d.ts","sourceRoot":"","sources":["../../../src/chart/area/SolidArea.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAE/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAEjD,MAAM,MAAM,cAAc,GAAG,IAAI,CAC/B,SAAS,EACP,QAAQ,GACR,aAAa,GACb,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,iBAAiB,GACjB,kBAAkB,GAClB,UAAU,GACV,YAAY,GACZ,UAAU,CACb,GACC,kBAAkB,CAAC;AAErB;;;;GAIG;AACH,eAAO,MAAM,SAAS,sDAqCrB,CAAC"}