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

package/CHANGELOG.md

@@ -8,6 +8,15 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 3.4.0-beta.6 (10/16/2025 PST)
+
+#### 🚀 Updates
+
+- Support connecting null values in Area and Line
+- Added label to XAxis and YAxis
+- Switched charts to @shopify/react-native-skia
+- Added gradient 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

@@ -1,9 +1,10 @@
 import React from 'react';
-import { type View, type ViewStyle } from 'react-native';
+import { type StyleProp, type View, type ViewStyle } from 'react-native';
 import type { BoxBaseProps, BoxProps } from '@coinbase/cds-mobile/layout';
+import { type SkTypefaceFontProvider } from '@shopify/react-native-skia';
 import { type ScrubberProviderProps } from './scrubber/ScrubberProvider';
 import { type AxisConfigProps, type ChartInset, type Series } from './utils';
-export type CartesianChartBaseProps = BoxBaseProps &
+export type CartesianChartBaseProps = Omit<BoxBaseProps, 'fontFamily'> &
   Pick<ScrubberProviderProps, 'enableScrubbing' | 'onScrubberPositionChange'> & {
     /**
      * Configuration objects that define how to visualize the data.
@@ -21,7 +22,6 @@ export type CartesianChartBaseProps = BoxBaseProps &
     xAxis?: Partial<Omit<AxisConfigProps, 'id'>>;
     /**
      * Configuration for y-axis(es). Can be a single config or array of configs.
-     * If array, first axis becomes default if no id is specified.
      */
     yAxis?: Partial<AxisConfigProps> | Partial<AxisConfigProps>[];
     /**
@@ -31,37 +31,41 @@ export type CartesianChartBaseProps = BoxBaseProps &
   };
 export type CartesianChartProps = CartesianChartBaseProps &
   Pick<ScrubberProviderProps, 'allowOverflowGestures'> &
-  BoxProps & {
+  Omit<BoxProps, 'fontFamily'> & {
     /**
-     * Chart width. If not provided, will use the container's measured width.
+     * Default font families to use within ChartText.
+     * If not provided, will be the default for the system.
+     * @example
+     * ['Helvetica', 'sans-serif']
      */
-    width?: number | string;
+    fontFamilies?: string[];
     /**
-     * Chart height. If not provided, will use the container's measured height.
+     * Skia font provider to allow for custom fonts.
+     * If not provided, the only available fonts will be those defined by the system.
      */
-    height?: number | string;
+    fontProvider?: SkTypefaceFontProvider;
+    /**
+     * Custom styles for the root element.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Custom styles for the component.
+     */
+    styles?: {
+      /**
+       * Custom styles for the root element.
+       */
+      root?: StyleProp<ViewStyle>;
+      /**
+       * Custom styles for the chart canvas element.
+       */
+      chart?: StyleProp<ViewStyle>;
+    };
   };
 export declare const CartesianChart: React.MemoExoticComponent<
   React.ForwardRefExoticComponent<
-    import('@coinbase/cds-mobile/styles/styleProps').StyleProps & {
-      children?: React.ReactNode;
-      style?: import('react-native').Animated.WithAnimatedValue<
-        import('react-native').StyleProp<ViewStyle>
-      >;
-      animated?: boolean;
-      elevation?: import('@coinbase/cds-common').ElevationLevels;
-      font?: import('@coinbase/cds-common').ThemeVars.FontFamily | 'inherit';
-      pin?: import('@coinbase/cds-common').PinningDirection;
-      bordered?: boolean;
-      borderedTop?: boolean;
-      borderedBottom?: boolean;
-      borderedStart?: boolean;
-      borderedEnd?: boolean;
-      borderedHorizontal?: boolean;
-      borderedVertical?: boolean;
-      dangerouslySetBackground?: string;
-      testID?: string;
-    } & Pick<ScrubberProviderProps, 'enableScrubbing' | 'onScrubberPositionChange'> & {
+    Omit<BoxBaseProps, 'fontFamily'> &
+      Pick<ScrubberProviderProps, 'enableScrubbing' | 'onScrubberPositionChange'> & {
         /**
          * Configuration objects that define how to visualize the data.
          * Each series contains its own data array.
@@ -78,7 +82,6 @@ export declare const CartesianChart: React.MemoExoticComponent<
         xAxis?: Partial<Omit<AxisConfigProps, 'id'>>;
         /**
          * Configuration for y-axis(es). Can be a single config or array of configs.
-         * If array, first axis becomes default if no id is specified.
          */
         yAxis?: Partial<AxisConfigProps> | Partial<AxisConfigProps>[];
         /**
@@ -86,15 +89,36 @@ export declare const CartesianChart: React.MemoExoticComponent<
          */
         inset?: number | Partial<ChartInset>;
       } & Pick<ScrubberProviderProps, 'allowOverflowGestures'> &
-      Omit<import('react-native').ViewProps, 'style'> & {
+      Omit<BoxProps, 'fontFamily'> & {
+        /**
+         * Default font families to use within ChartText.
+         * If not provided, will be the default for the system.
+         * @example
+         * ['Helvetica', 'sans-serif']
+         */
+        fontFamilies?: string[];
+        /**
+         * Skia font provider to allow for custom fonts.
+         * If not provided, the only available fonts will be those defined by the system.
+         */
+        fontProvider?: SkTypefaceFontProvider;
         /**
-         * Chart width. If not provided, will use the container's measured width.
+         * Custom styles for the root element.
          */
-        width?: number | string;
+        style?: StyleProp<ViewStyle>;
         /**
-         * Chart height. If not provided, will use the container's measured height.
+         * Custom styles for the component.
          */
-        height?: number | string;
+        styles?: {
+          /**
+           * Custom styles for the root element.
+           */
+          root?: StyleProp<ViewStyle>;
+          /**
+           * Custom styles for the chart canvas element.
+           */
+          chart?: StyleProp<ViewStyle>;
+        };
       } & React.RefAttributes<View>
   >
 >;

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,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzD,OAAO,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAG1E,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAE3F,OAAO,EAEL,KAAK,eAAe,EAEpB,KAAK,UAAU,EAUf,KAAK,MAAM,EAEZ,MAAM,SAAS,CAAC;AAEjB,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;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,OAAO,CAAC,eAAe,CAAC,EAAE,CAAC;IAC9D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;CACtC,CAAC;AAEJ,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,GACvD,IAAI,CAAC,qBAAqB,EAAE,uBAAuB,CAAC,GACpD,QAAQ,GAAG;IACT;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B,CAAC;AAEJ,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;IAtCvB;;;OAGG;aACM,KAAK,CAAC,MAAM,CAAC;IACtB;;;OAGG;cACO,OAAO;IACjB;;OAEG;YACK,OAAO,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC;IAC5C;;;OAGG;YACK,OAAO,CAAC,eAAe,CAAC,GAAG,OAAO,CAAC,eAAe,CAAC,EAAE;IAC7D;;OAEG;YACK,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC;;IAMpC;;OAEG;YACK,MAAM,GAAG,MAAM;IACvB;;OAEG;aACM,MAAM,GAAG,MAAM;+BAuS3B,CAAC"}
+{"version":3,"file":"CartesianChart.d.ts","sourceRoot":"","sources":["../../src/chart/CartesianChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzE,OAAO,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAE1E,OAAO,EAAgB,KAAK,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAEvF,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAI3F,OAAO,EAEL,KAAK,eAAe,EAEpB,KAAK,UAAU,EAUf,KAAK,MAAM,EAEZ,MAAM,SAAS,CAAC;AAcjB,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,YAAY,EAAE,YAAY,CAAC,GACpE,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,eAAe,CAAC,GAAG,OAAO,CAAC,eAAe,CAAC,EAAE,CAAC;IAC9D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;CACtC,CAAC;AAEJ,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,GACvD,IAAI,CAAC,qBAAqB,EAAE,uBAAuB,CAAC,GACpD,IAAI,CAAC,QAAQ,EAAE,YAAY,CAAC,GAAG;IAC7B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,sBAAsB,CAAC;IACtC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B;;WAEG;QACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC9B,CAAC;CACH,CAAC;AAEJ,eAAO,MAAM,cAAc;IA1DvB;;;OAGG;aACM,KAAK,CAAC,MAAM,CAAC;IACtB;;;OAGG;cACO,OAAO;IACjB;;OAEG;YACK,OAAO,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC;IAC5C;;OAEG;YACK,OAAO,CAAC,eAAe,CAAC,GAAG,OAAO,CAAC,eAAe,CAAC,EAAE;IAC7D;;OAEG;YACK,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC;;IAMpC;;;;;OAKG;mBACY,MAAM,EAAE;IACvB;;;OAGG;mBACY,sBAAsB;IACrC;;OAEG;YACK,SAAS,CAAC,SAAS,CAAC;IAC5B;;OAEG;aACM;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B;;WAEG;QACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC9B;+BAqWJ,CAAC"}

package/dts/chart/ChartContextBridge.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Simplified context bridge utilities for React Native.
+ * Adapted from its-fine to enable context sharing across React renderers
+ * https://github.com/pmndrs/its-fine/blob/598b81f02778c22ed21121c2b1a786bdefb14e23/src/index.tsx
+ */
+import * as React from 'react';
+/**
+ * A react-internal tree node provider that binds React children to the React tree for chart context bridging.
+ */
+export declare class ChartBridgeProvider extends React.Component<{
+  children?: React.ReactNode;
+}> {
+  private _reactInternals;
+  render(): import('react/jsx-runtime').JSX.Element;
+}
+export type ContextMap = Map<React.Context<any>, any> & {
+  get<T>(context: React.Context<T>): T | undefined;
+};
+/**
+ * Represents a chart context bridge provider component.
+ */
+export type ChartContextBridge = React.FC<React.PropsWithChildren<object>>;
+/**
+ * Returns a ChartContextBridge of live context providers to pierce Context across renderers.
+ * Pass ChartContextBridge as a component to a secondary renderer (e.g., Skia Canvas) to enable context-sharing in charts.
+ */
+export declare function useChartContextBridge(): ChartContextBridge;
+//# sourceMappingURL=ChartContextBridge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartContextBridge.d.ts","sourceRoot":"","sources":["../../src/chart/ChartContextBridge.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAwE/B;;GAEG;AACH,qBAAa,mBAAoB,SAAQ,KAAK,CAAC,SAAS,CAAC;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC;IACtF,OAAO,CAAC,eAAe,CAAY;IAEnC,MAAM;CAOP;AA4BD,MAAM,MAAM,UAAU,GAAG,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,GAAG;IACtD,GAAG,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;CAClD,CAAC;AA8BF;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC;AAE3E;;;GAGG;AACH,wBAAgB,qBAAqB,IAAI,kBAAkB,CAgB1D"}

package/dts/chart/Path.d.ts

@@ -1,48 +1,91 @@
-import { type PathProps as SvgPathProps } from 'react-native-svg';
-import type { Rect as RectType, SharedProps } from '@coinbase/cds-common/types';
-export type PathProps = SharedProps &
-  SvgPathProps & {
+import type { Rect } from '@coinbase/cds-common/types';
+import { type AnimatedProp, type PathProps as SkiaPathProps } from '@shopify/react-native-skia';
+import type { Transition } from './utils/transition';
+/**
+ * Duration in milliseconds for path enter transition.
+ */
+export declare const pathEnterTransitionDuration = 500;
+export type PathBaseProps = {
+  /**
+   * Whether to animate this path. Overrides the animate prop on the Chart component.
+   */
+  animate?: boolean;
+  /**
+   * Initial path for enter animation.
+   * When provided, the first animation will go from initialPath to d.
+   * If not provided, defaults to d (no enter animation).
+   */
+  initialPath?: string;
+  /**
+   * Fill color for the path.
+   * When provided, will render a fill with the given color.
+   * If not provided, will not render a fill.
+   */
+  fill?: string;
+  /**
+   * Opacity for the path fill.
+   */
+  fillOpacity?: number;
+  /**
+   * Stroke color for the path.
+   * When provided, will render a fill with the given color.
+   * If not provided, will not render a fill.
+   */
+  stroke?: string;
+  /**
+   * Opacity for the path stroke.
+   */
+  strokeOpacity?: number;
+};
+export type PathProps = PathBaseProps &
+  Pick<
+    SkiaPathProps,
+    | 'antiAlias'
+    | 'blendMode'
+    | 'children'
+    | 'dither'
+    | 'invertClip'
+    | 'origin'
+    | 'matrix'
+    | 'strokeCap'
+    | 'strokeJoin'
+    | 'strokeMiter'
+    | 'strokeWidth'
+    | 'style'
+    | 'transform'
+  > & {
     /**
-     * The SVG path data string
+     * The SVG path data string.
      */
-    d?: string;
+    d?: AnimatedProp<string | undefined>;
     /**
-     * Path fill color
+     * Offset added to the clip rect boundaries.
      */
-    fill?: string;
-    /**
-     * Path stroke color
-     */
-    stroke?: string;
-    /**
-     * Path stroke width
-     */
-    strokeWidth?: number;
-    /**
-     * Path stroke opacity
-     */
-    strokeOpacity?: number;
+    clipOffset?: number;
     /**
-     * Path fill opacity
+     * Custom clip path.
+     * When set, overrides clipRect.
+     * @note pass null to disable clipping.
      */
-    fillOpacity?: number;
+    clipPath?: string | null;
     /**
      * Custom clip path rect. If provided, this overrides the default chart rect for clipping.
+     * @default drawingArea of chart + clipOffset
+     * Will be overridden by clipPath if set.
      */
-    clipRect?: RectType;
-    /**
-     * Stroke dash array for dashed lines
-     */
-    strokeDasharray?: string;
+    clipRect?: Rect;
     /**
-     * Whether to animate the path.
-     * Overrides the animate prop on the Chart component.
+     * Animation transition
+     *
+     * @example
+     * // Duration based
+     * transition={{ type: 'timing', duration: 300 }}
+     *
+     * @example
+     * // Spring based
+     * transition={{ type: 'spring', damping: 20, stiffness: 300 }}
      */
-    animate?: boolean;
-    /**
-     * The offset to add to the clip rect boundaries.
-     */
-    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":"AAQA,OAAO,EAKL,KAAK,SAAS,IAAI,YAAY,EAG/B,MAAM,kBAAkB,CAAC;AAE1B,OAAO,KAAK,EAAE,IAAI,IAAI,QAAQ,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAmChF,MAAM,MAAM,SAAS,GAAG,WAAW,GACjC,YAAY,GAAG;IACb;;OAEG;IACH,CAAC,CAAC,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEJ,eAAO,MAAM,IAAI,iDA2HhB,CAAC"}
+{"version":3,"file":"Path.d.ts","sourceRoot":"","sources":["../../src/chart/Path.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EACL,KAAK,YAAY,EAGjB,KAAK,SAAS,IAAI,aAAa,EAGhC,MAAM,4BAA4B,CAAC;AAEpC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAKrD;;GAEG;AACH,eAAO,MAAM,2BAA2B,MAAM,CAAC;AAE/C,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GACnC,IAAI,CACF,aAAa,EACX,WAAW,GACX,WAAW,GACX,UAAU,GACV,QAAQ,GACR,YAAY,GACZ,QAAQ,GACR,QAAQ,GACR,WAAW,GACX,YAAY,GACZ,aAAa,GACb,aAAa,GACb,OAAO,GACP,WAAW,CACd,GAAG;IACF;;OAEG;IACH,CAAC,CAAC,EAAE,YAAY,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACrC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB;;;;;;;;;;OAUG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAmEJ,eAAO,MAAM,IAAI,iDAwJf,CAAC"}

package/dts/chart/PeriodSelector.d.ts

@@ -7,7 +7,7 @@ export declare const PeriodSelectorActiveIndicator: ({
   background,
   position,
   borderRadius,
-}: TabsActiveIndicatorProps) => import('react/jsx-runtime').JSX.Element | null;
+}: TabsActiveIndicatorProps) => import('react/jsx-runtime').JSX.Element | undefined;
 export type LiveTabLabelBaseProps = TextBaseProps & {
   /**
    * The label to display.

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,EAAc,IAAI,EAAkB,MAAM,cAAc,CAAC;AAGhE,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,wBAAwB,EAC9B,MAAM,2BAA2B,CAAC;AAGnC,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAGhF,eAAO,MAAM,6BAA6B,GAAI,wDAK3C,wBAAwB,mDAmD1B,CAAC;AAEF,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,KAAK,CAAC,EAAE,GAAG,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC;AAStD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;IAxBvB;;;OAGG;YACK,MAAM;IACd;;OAEG;cACO,OAAO;IACjB;;OAEG;YACK,GAAG;+BAyCZ,CAAC;AASF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,CAAC;AAErD;;;GAGG;AACH,eAAO,MAAM,cAAc,6TA0B1B,CAAC"}
+{"version":3,"file":"PeriodSelector.d.ts","sourceRoot":"","sources":["../../src/chart/PeriodSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAc,IAAI,EAAkB,MAAM,cAAc,CAAC;AAGhE,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,wBAAwB,EAC9B,MAAM,2BAA2B,CAAC;AAGnC,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAGhF,eAAO,MAAM,6BAA6B,GAAI,wDAK3C,wBAAwB,wDAmD1B,CAAC;AAEF,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,KAAK,CAAC,EAAE,GAAG,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC;AAStD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;IAxBvB;;;OAGG;YACK,MAAM;IACd;;OAEG;cACO,OAAO;IACjB;;OAEG;YACK,GAAG;+BAyCZ,CAAC;AASF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,CAAC;AAErD;;;GAGG;AACH,eAAO,MAAM,cAAc,6TA0B1B,CAAC"}

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

@@ -1,33 +1,14 @@
 import React from 'react';
-import type { Rect } from '@coinbase/cds-common/types';
-import { type ChartPathCurveType } from '../utils';
-export type AreaComponentProps = {
-  d: string;
-  fill: string;
-  fillOpacity?: number;
-  clipRect?: Rect;
-  stroke?: string;
-  strokeWidth?: number;
-  /**
-   * ID of the y-axis to use.
-   * If not provided, defaults to the default y-axis.
-   */
-  yAxisId?: string;
-  /**
-   * Baseline value for the gradient.
-   * When set, overrides the default baseline.
-   */
-  baseline?: number;
-};
-export type AreaComponent = React.FC<AreaComponentProps>;
-export type AreaProps = {
+import { type ChartPathCurveType, type Transition } from '../utils';
+import type { GradientDefinition } from '../utils/gradient';
+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 'linear'
+   * @default 'bump'
    */
   curve?: ChartPathCurveType;
   /**
@@ -40,23 +21,57 @@ export type AreaProps = {
    * 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 theme.color.fgPrimary
+   * @default color of the series or 'var(--color-fgPrimary)'
    */
   fill?: string;
   /**
-   * Opacity of the area.
+   * Opacity of the area
+   * @note when combined with gradient, both will be applied
    * @default 1
    */
   fillOpacity?: number;
-  stroke?: string;
-  strokeWidth?: number;
   /**
    * Baseline value for the gradient.
    * When set, overrides the default baseline.
    */
   baseline?: number;
+  /**
+   * Gradient configuration.
+   * When provided, creates gradient or threshold-based coloring.
+   */
+  gradient?: GradientDefinition;
+  /**
+   * Whether to animate the area.
+   * Overrides the animate value from the chart context.
+   */
+  animate?: boolean;
+};
+export type AreaProps = AreaBaseProps & {
+  /**
+   * Transition configuration for path animations.
+   */
+  transition?: Transition;
+};
+export type AreaComponentProps = Pick<
+  AreaProps,
+  'fill' | 'fillOpacity' | 'baseline' | 'gradient' | 'animate' | 'transition'
+> & {
+  /**
+   * Path of the area
+   */
+  d: string;
+  /**
+   * 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,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAIvD,OAAO,EAAE,KAAK,kBAAkB,EAAe,MAAM,UAAU,CAAC;AAMhE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;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;IACtB;;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;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,IAAI,uCAkFhB,CAAC"}
+{"version":3,"file":"Area.d.ts","sourceRoot":"","sources":["../../../src/chart/area/Area.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAG7C,OAAO,EAAE,KAAK,kBAAkB,EAAe,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AACjF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAM5D,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,MAAM,CAAC;IACV;;;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,14 +1,29 @@
 import type { View } from 'react-native';
 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.
@@ -41,14 +56,29 @@ 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<CartesianChartProps, 'series' | 'xAxis' | 'yAxis'> &
-      Pick<AreaProps, 'type' | 'curve' | 'fillOpacity' | 'AreaComponent'> &
+    Omit<CartesianChartBaseProps, 'series' | 'xAxis' | 'yAxis'> &
+      Pick<
+        AreaProps,
+        'type' | 'curve' | 'connectNulls' | 'transition' | 'fillOpacity' | 'AreaComponent'
+      > &
       Pick<LineProps, 'strokeWidth' | 'LineComponent'> & {
         /**
          * Configuration objects that define how to visualize the data.
@@ -81,10 +111,21 @@ export declare const AreaChart: import('react').MemoExoticComponent<
          * 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;
-      } & import('react').RefAttributes<View>
+      } & Omit<CartesianChartProps, 'series' | 'xAxis' | 'yAxis'> &
+      import('react').RefAttributes<View>
   >
 >;
 //# sourceMappingURL=AreaChart.d.ts.map

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":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,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;IArClB;;;OAGG;aACM,KAAK,CAAC,UAAU,CAAC;IAC1B;;;;;;;OAOG;cACO,OAAO;IACjB;;OAEG;gBACS,OAAO;IACnB;;OAEG;gBACS,OAAO;IACnB;;;OAGG;gBACS,OAAO;IACnB;;;OAGG;eACQ,OAAO,GAAG,QAAQ,GAAG,UAAU;YAElC,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU;YACrC,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU;yCA0KhD,CAAC"}
+{"version":3,"file":"AreaChart.d.ts","sourceRoot":"","sources":["../../../src/chart/area/AreaChart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,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;IAjDlB;;;OAGG;aACM,KAAK,CAAC,UAAU,CAAC;IAC1B;;;;;;;OAOG;cACO,OAAO;IACjB;;OAEG;gBACS,OAAO;IACnB;;OAEG;gBACS,OAAO;IACnB;;;OAGG;gBACS,OAAO;IACnB;;;OAGG;eACQ,OAAO,GAAG,QAAQ;IAC7B;;;;OAIG;YACK,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU;IAC7C;;;;OAIG;YACK,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU;mGAkLhD,CAAC"}

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

@@ -1,6 +1,18 @@
 import { type PathProps } from '../Path';
 import type { AreaComponentProps } from './Area';
-export type DottedAreaProps = Omit<PathProps, 'd' | 'fill' | 'fillOpacity'> &
+export type DottedAreaProps = Pick<
+  PathProps,
+  | 'initialPath'
+  | 'children'
+  | 'stroke'
+  | 'strokeOpacity'
+  | 'strokeWidth'
+  | 'strokeCap'
+  | 'strokeJoin'
+  | 'clipRect'
+  | 'clipPath'
+  | 'clipOffset'
+> &
   AreaComponentProps & {
     /**
      * Size of the pattern unit (width and height).
@@ -14,14 +26,21 @@ export type DottedAreaProps = Omit<PathProps, 'd' | 'fill' | 'fillOpacity'> &
     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;
   };
+/**
+ * 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":"AAKA,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,CAAC,GACzE,kBAAkB,GAAG;IACnB;;;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;CAC1B,CAAC;AAEJ,eAAO,MAAM,UAAU,uDA+HtB,CAAC"}
+{"version":3,"file":"DottedArea.d.ts","sourceRoot":"","sources":["../../../src/chart/area/DottedArea.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAK/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAEjD,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,SAAS,EACP,aAAa,GACb,UAAU,GACV,QAAQ,GACR,eAAe,GACf,aAAa,GACb,WAAW,GACX,YAAY,GACZ,UAAU,GACV,UAAU,GACV,YAAY,CACf,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,uDAwEtB,CAAC"}