@coinbase/cds-mobile-visualization 0.0.0 → 3.4.0-beta.1

package/CHANGELOG.md

@@ -0,0 +1,26 @@
+# @coinbase/cds-mobile-visualization
+
+> [NPM registry](https://www.npmjs.com/package/@coinbase/cds-mobile-visualization)
+
+All notable changes to this project will be documented in this file.
+
+`@coinbase/cds-mobile-visualization` adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+<!-- template-start -->
+
+## 3.4.0-beta.1 (10/3/2025 PST)
+
+#### 🚀 Updates
+
+- Introduces new data visualization components: CartesianChart, LineChart, BarChart, etc,
+- Deprecates Sparkline components.
+
+## 3.3.1 (10/1/2025 PST)
+
+#### 🐞 Fixes
+
+- Update links for new repo. [[#42](https://github.com/coinbase/cds/pull/42)]
+
+## 3.3.0 (9/18/2025 PST)
+
+- Prepare for open source release.

package/README.md

@@ -0,0 +1,3 @@
+# @coinbase/cds-mobile-visualization
+
+@coinbase/cds-mobile-visualization is a domain set of components that we have identified as mobile visualization components. They were moved from cds-web in an effort to decompose our core package and make it more reliable. The decomposition of our core packages (cds-web and cds-mobile) is an ongoing effort that should be continued over time, see [Design System Package Decomposition](../../docs/package-decomposition.md) for more information.

package/dts/chart/CartesianChart.d.ts

@@ -0,0 +1,101 @@
+import React from 'react';
+import { type View, type ViewStyle } from 'react-native';
+import type { BoxBaseProps, BoxProps } from '@coinbase/cds-mobile/layout';
+import { type ScrubberProviderProps } from './scrubber/ScrubberProvider';
+import { type AxisConfigProps, type ChartInset, type Series } from './utils';
+export type CartesianChartBaseProps = BoxBaseProps &
+  Pick<ScrubberProviderProps, 'enableScrubbing' | 'onScrubberPositionChange'> & {
+    /**
+     * Configuration objects that define how to visualize the data.
+     * Each series contains its own data array.
+     */
+    series?: Array<Series>;
+    /**
+     * Whether to animate the chart.
+     * @default true
+     */
+    animate?: boolean;
+    /**
+     * Configuration for x-axis.
+     */
+    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>[];
+    /**
+     * Inset around the entire chart (outside the axes).
+     */
+    inset?: number | Partial<ChartInset>;
+  };
+export type CartesianChartProps = CartesianChartBaseProps &
+  Pick<ScrubberProviderProps, 'allowOverflowGestures'> &
+  BoxProps & {
+    /**
+     * Chart width. If not provided, will use the container's measured width.
+     */
+    width?: number | string;
+    /**
+     * Chart height. If not provided, will use the container's measured height.
+     */
+    height?: number | string;
+  };
+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'> & {
+        /**
+         * Configuration objects that define how to visualize the data.
+         * Each series contains its own data array.
+         */
+        series?: Array<Series>;
+        /**
+         * Whether to animate the chart.
+         * @default true
+         */
+        animate?: boolean;
+        /**
+         * Configuration for x-axis.
+         */
+        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>[];
+        /**
+         * Inset around the entire chart (outside the axes).
+         */
+        inset?: number | Partial<ChartInset>;
+      } & Pick<ScrubberProviderProps, 'allowOverflowGestures'> &
+      Omit<import('react-native').ViewProps, 'style'> & {
+        /**
+         * Chart width. If not provided, will use the container's measured width.
+         */
+        width?: number | string;
+        /**
+         * Chart height. If not provided, will use the container's measured height.
+         */
+        height?: number | string;
+      } & React.RefAttributes<View>
+  >
+>;
+//# sourceMappingURL=CartesianChart.d.ts.map

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

@@ -0,0 +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"}

package/dts/chart/ChartProvider.d.ts

@@ -0,0 +1,6 @@
+import type { CartesianChartContextValue } from './utils';
+export declare const useCartesianChartContext: () => CartesianChartContextValue;
+export declare const CartesianChartProvider: import('react').Provider<
+  CartesianChartContextValue | undefined
+>;
+//# sourceMappingURL=ChartProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartProvider.d.ts","sourceRoot":"","sources":["../../src/chart/ChartProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAI1D,eAAO,MAAM,wBAAwB,QAAO,0BAQ3C,CAAC;AAEF,eAAO,MAAM,sBAAsB,kEAAiC,CAAC"}

package/dts/chart/Path.d.ts

@@ -0,0 +1,48 @@
+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 & {
+    /**
+     * The SVG path data string
+     */
+    d?: string;
+    /**
+     * Path fill color
+     */
+    fill?: string;
+    /**
+     * Path stroke color
+     */
+    stroke?: string;
+    /**
+     * Path stroke width
+     */
+    strokeWidth?: number;
+    /**
+     * Path stroke opacity
+     */
+    strokeOpacity?: number;
+    /**
+     * Path fill opacity
+     */
+    fillOpacity?: number;
+    /**
+     * Custom clip path rect. If provided, this overrides the default chart rect for clipping.
+     */
+    clipRect?: RectType;
+    /**
+     * Stroke dash array for dashed lines
+     */
+    strokeDasharray?: string;
+    /**
+     * Whether to animate the path.
+     * Overrides the animate prop on the Chart component.
+     */
+    animate?: boolean;
+    /**
+     * The offset to add to the clip rect boundaries.
+     */
+    clipOffset?: number;
+  };
+export declare const Path: import('react').NamedExoticComponent<PathProps>;
+//# sourceMappingURL=Path.d.ts.map

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

@@ -0,0 +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"}

package/dts/chart/PeriodSelector.d.ts

@@ -0,0 +1,85 @@
+import React from 'react';
+import { View } from 'react-native';
+import { type SegmentedTabsProps, type TabsActiveIndicatorProps } from '@coinbase/cds-mobile/tabs';
+import { type TextBaseProps } from '@coinbase/cds-mobile/typography/Text';
+export declare const PeriodSelectorActiveIndicator: ({
+  activeTabRect,
+  background,
+  position,
+  borderRadius,
+}: TabsActiveIndicatorProps) => import('react/jsx-runtime').JSX.Element | null;
+export type LiveTabLabelBaseProps = TextBaseProps & {
+  /**
+   * The label to display.
+   * @default 'LIVE'
+   */
+  label?: string;
+  /**
+   * Whether to hide the dot.
+   */
+  hideDot?: boolean;
+  /**
+   * Style prop for customization
+   */
+  style?: any;
+};
+export type LiveTabLabelProps = LiveTabLabelBaseProps;
+export declare const LiveTabLabel: React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<
+    import('@coinbase/cds-mobile/styles/styleProps').StyleProps & {
+      children?: React.ReactNode;
+      style?: import('react-native').Animated.WithAnimatedValue<
+        import('react-native').StyleProp<import('react-native').TextStyle>
+      >;
+      animated?: boolean;
+      align?: 'start' | 'end' | 'center' | 'justify';
+      font?: import('@coinbase/cds-common').ThemeVars.FontFamily | 'inherit';
+      disabled?: boolean;
+      mono?: boolean;
+      underline?: boolean;
+      tabularNumbers?: boolean;
+      numberOfLines?: number;
+      ellipsize?: import('react-native').TextProps['ellipsizeMode'];
+      noWrap?: boolean;
+      dangerouslySetColor?: import('react-native').TextStyle['color'];
+      dangerouslySetBackground?: import('react-native').TextStyle['backgroundColor'];
+      renderEmptyNode?: boolean;
+      testID?: string;
+    } & {
+      /**
+       * The label to display.
+       * @default 'LIVE'
+       */
+      label?: string;
+      /**
+       * Whether to hide the dot.
+       */
+      hideDot?: boolean;
+      /**
+       * Style prop for customization
+       */
+      style?: any;
+    } & React.RefAttributes<View>
+  >
+>;
+export type PeriodSelectorProps = SegmentedTabsProps;
+/**
+ * PeriodSelector is a specialized version of SegmentedTabs optimized for chart period selection.
+ * It provides transparent background, primary wash active state, and full-width layout by default.
+ */
+export declare const PeriodSelector: React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<
+    Partial<
+      Pick<
+        import('@coinbase/cds-mobile/tabs').TabsProps<string>,
+        'TabComponent' | 'TabsActiveIndicatorComponent'
+      >
+    > &
+      Omit<
+        import('@coinbase/cds-mobile/tabs').TabsProps<string>,
+        'TabComponent' | 'TabsActiveIndicatorComponent'
+      > &
+      React.RefAttributes<any>
+  >
+>;
+//# sourceMappingURL=PeriodSelector.d.ts.map

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

@@ -0,0 +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"}

package/dts/chart/Point.d.ts

@@ -0,0 +1,103 @@
+import type { SharedProps } from '@coinbase/cds-common/types';
+import type { ChartTextChildren } from './text/ChartText';
+import { type ChartTextProps } from './text';
+/**
+ * Parameters passed to renderPoints callback function.
+ */
+export type RenderPointsParams = {
+  /**
+   * X coordinate in SVG pixel space.
+   */
+  x: number;
+  /**
+   * Y coordinate in SVG pixel space.
+   */
+  y: number;
+  /**
+   * X coordinate in data space (usually same as index).
+   */
+  dataX: number;
+  /**
+   * Y coordinate in data space (same as value).
+   */
+  dataY: number;
+};
+/**
+ * Shared configuration for point appearance and behavior.
+ * Used by line-associated points rendered via Line/LineChart components.
+ */
+export type PointConfig = {
+  /**
+   * The fill color of the point.
+   */
+  fill?: string;
+  /**
+   * Optional Y-axis id to specify which axis to plot along.
+   * Defaults to the first y-axis
+   */
+  yAxisId?: string;
+  /**
+   * Radius of the point.
+   * @default 4
+   */
+  radius?: number;
+  /**
+   * Opacity of the point.
+   */
+  opacity?: number;
+  /**
+   * Handler for when the point is clicked.
+   */
+  onPress?: (point: { x: number; y: number; dataX: number; dataY: number }) => void;
+  /**
+   * Handler for when the scrubber enters this point.
+   */
+  onScrubberEnter?: (point: { x: number; y: number }) => void;
+  /**
+   * Color of the outer stroke around the point.
+   * @default theme.color.bg
+   */
+  stroke?: string;
+  /**
+   * Outer stroke width of the point.
+   * Set to  0 to remove the stroke.
+   * @default 2
+   */
+  strokeWidth?: number;
+  /**
+   * Simple text label to display at the point position.
+   * If provided, a ChartText will be automatically rendered.
+   */
+  label?: ChartTextChildren;
+  /**
+   * Configuration for the automatically rendered label.
+   * Only used when `label` prop is provided.
+   */
+  labelProps?: Omit<ChartTextProps, 'x' | 'y' | 'children'>;
+  /**
+   * Accessibility label for screen readers to describe the point.
+   * If not provided, a default label will be generated using the data coordinates.
+   */
+  accessibilityLabel?: string;
+};
+export type PointProps = SharedProps &
+  PointConfig & {
+    /**
+     * X coordinate in data space (not pixel coordinates).
+     */
+    dataX: number;
+    /**
+     * Y coordinate in data space (not pixel coordinates).
+     */
+    dataY: number;
+    /**
+     * Optional pixel coordinates to use instead of calculating from dataX/dataY.
+     * Useful for performance when coordinates are already calculated.
+     */
+    pixelCoordinates?: {
+      x: number;
+      y: number;
+    };
+  };
+export declare const Point: import('react').NamedExoticComponent<PointProps>;
+//# sourceMappingURL=Point.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Point.d.ts","sourceRoot":"","sources":["../../src/chart/Point.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAG9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,QAAQ,CAAC;AAGxD;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAClF;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC5D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,GAAG,GAAG,GAAG,GAAG,UAAU,CAAC,CAAC;IAC1D;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,WAAW,GAClC,WAAW,GAAG;IACZ;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,gBAAgB,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC7C,CAAC;AAEJ,eAAO,MAAM,KAAK,kDAyFjB,CAAC"}

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

@@ -0,0 +1,62 @@
+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 = {
+  /**
+   * 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'
+   */
+  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;
+  /**
+   * The color of the area.
+   * @default color of the series or theme.color.fgPrimary
+   */
+  fill?: string;
+  /**
+   * Opacity of the area.
+   * @default 1
+   */
+  fillOpacity?: number;
+  stroke?: string;
+  strokeWidth?: number;
+  /**
+   * Baseline value for the gradient.
+   * When set, overrides the default baseline.
+   */
+  baseline?: number;
+};
+export declare const Area: React.NamedExoticComponent<AreaProps>;
+//# sourceMappingURL=Area.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,90 @@
+import type { View } from 'react-native';
+import { type XAxisProps, type YAxisProps } from '../axis';
+import { 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'> &
+  Pick<LineProps, 'LineComponent' | 'strokeWidth'> & {
+    /**
+     * Configuration objects that define how to visualize the data.
+     * Each series supports Area and Line component props for individual customization.
+     */
+    series?: Array<AreaSeries>;
+    /**
+     * Whether to stack the areas on top of each other.
+     * When true, each series builds cumulative values on top of the previous series.
+     *
+     * **Note**: Only applies to series data containing singular numbers (e.g., `[10, 20, 30]`).
+     * Series with [baseline, value] tuples (e.g., `[[0, 10], [0, -5]]`) will be skipped during stacking
+     * and rendered as-is.
+     */
+    stacked?: boolean;
+    /**
+     * Whether to show the X axis.
+     */
+    showXAxis?: boolean;
+    /**
+     * Whether to show the Y axis.
+     */
+    showYAxis?: boolean;
+    /**
+     * Whether to show lines on top of the areas.
+     * Useful for stacked contexts to show the outline of each area.
+     */
+    showLines?: boolean;
+    /**
+     * The type of line to render.
+     * @default 'solid'
+     */
+    lineType?: 'solid' | 'dotted' | 'gradient';
+    xAxis?: Partial<AxisConfigProps> & XAxisProps;
+    yAxis?: Partial<AxisConfigProps> & YAxisProps;
+  };
+export declare const AreaChart: import('react').MemoExoticComponent<
+  import('react').ForwardRefExoticComponent<
+    Omit<CartesianChartProps, 'series' | 'xAxis' | 'yAxis'> &
+      Pick<AreaProps, 'type' | 'curve' | 'fillOpacity' | 'AreaComponent'> &
+      Pick<LineProps, 'strokeWidth' | 'LineComponent'> & {
+        /**
+         * Configuration objects that define how to visualize the data.
+         * Each series supports Area and Line component props for individual customization.
+         */
+        series?: Array<AreaSeries>;
+        /**
+         * Whether to stack the areas on top of each other.
+         * When true, each series builds cumulative values on top of the previous series.
+         *
+         * **Note**: Only applies to series data containing singular numbers (e.g., `[10, 20, 30]`).
+         * Series with [baseline, value] tuples (e.g., `[[0, 10], [0, -5]]`) will be skipped during stacking
+         * and rendered as-is.
+         */
+        stacked?: boolean;
+        /**
+         * Whether to show the X axis.
+         */
+        showXAxis?: boolean;
+        /**
+         * Whether to show the Y axis.
+         */
+        showYAxis?: boolean;
+        /**
+         * Whether to show lines on top of the areas.
+         * Useful for stacked contexts to show the outline of each area.
+         */
+        showLines?: boolean;
+        /**
+         * The type of line to render.
+         * @default 'solid'
+         */
+        lineType?: 'solid' | 'dotted' | 'gradient';
+        xAxis?: Partial<AxisConfigProps> & XAxisProps;
+        yAxis?: Partial<AxisConfigProps> & YAxisProps;
+      } & import('react').RefAttributes<View>
+  >
+>;
+//# sourceMappingURL=AreaChart.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,27 @@
+import { type PathProps } from '../Path';
+import type { AreaComponentProps } from './Area';
+export type DottedAreaProps = Omit<PathProps, 'd' | 'fill' | 'fillOpacity'> &
+  AreaComponentProps & {
+    /**
+     * Size of the pattern unit (width and height).
+     * @default 4
+     */
+    patternSize?: number;
+    /**
+     * Size of the dots within the pattern.
+     * @default 1
+     */
+    dotSize?: number;
+    /**
+     * Opacity at the peak values (top/bottom of gradient).
+     * @default 0.3
+     */
+    peakOpacity?: number;
+    /**
+     * Opacity at the baseline (0 or edge closest to 0).
+     * @default 0
+     */
+    baselineOpacity?: number;
+  };
+export declare const DottedArea: import('react').NamedExoticComponent<DottedAreaProps>;
+//# sourceMappingURL=DottedArea.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,30 @@
+import { type PathProps } from '../Path';
+import type { AreaComponentProps } from './Area';
+export type GradientAreaProps = Omit<PathProps, 'd' | 'fill' | 'fillOpacity'> &
+  AreaComponentProps & {
+    /**
+     * The color at peak values (top/bottom of gradient).
+     * @default fill or theme.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.
+     * @default 0.3
+     */
+    peakOpacity?: number;
+    /**
+     * Opacity at the baseline.
+     * @default 0
+     */
+    baselineOpacity?: number;
+  };
+/**
+ * A customizable gradient area component which uses Path.
+ */
+export declare const GradientArea: import('react').NamedExoticComponent<GradientAreaProps>;
+//# sourceMappingURL=GradientArea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GradientArea.d.ts","sourceRoot":"","sources":["../../../src/chart/area/GradientArea.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,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,yDAwHxB,CAAC"}

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

@@ -0,0 +1,8 @@
+import { type PathProps } from '../Path';
+import type { AreaComponentProps } from './Area';
+export type SolidAreaProps = Omit<PathProps, 'd' | 'fill' | 'fillOpacity'> & AreaComponentProps;
+/**
+ * A customizable solid area component which uses Path.
+ */
+export declare const SolidArea: import('react').NamedExoticComponent<SolidAreaProps>;
+//# sourceMappingURL=SolidArea.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,6 @@
+export * from './Area';
+export * from './AreaChart';
+export * from './DottedArea';
+export * from './GradientArea';
+export * from './SolidArea';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/chart/area/index.ts"],"names":[],"mappings":"AACA,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC"}