@coinbase/cds-mobile-visualization 3.4.0-beta.2 → 3.4.0-beta.20

package/esm/sparkline/sparkline-interactive-header/__stories__/SparklineInteractiveHeader.stories.js

@@ -6,7 +6,7 @@ import { IconButton } from '@coinbase/cds-mobile/buttons';
 import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
 import { Icon } from '@coinbase/cds-mobile/icons';
 import { Box, HStack } from '@coinbase/cds-mobile/layout';
-import { TextTitle3 } from '@coinbase/cds-mobile/typography/TextTitle3';
+import { Text } from '@coinbase/cds-mobile/typography';
 import { SparklineInteractive } from '../../sparkline-interactive/SparklineInteractive';
 import { SparklineInteractiveHeader } from '../SparklineInteractiveHeader';
 import { useSparklineInteractiveHeaderStyles } from '../useSparklineInteractiveHeaderStyles';
@@ -155,7 +155,8 @@ const HeaderLabel = () => {
       active: true,
       name: "wallet",
       size: "s"
-    }), /*#__PURE__*/_jsx(TextTitle3, {
+    }), /*#__PURE__*/_jsx(Text, {
+      font: "title3",
       children: "CustomHeader"
     })]
   });
@@ -468,7 +469,8 @@ const SparklineInteractiveHeaderScreen = () => {
     children: [/*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "SparklineInteractive Header Example"
@@ -480,7 +482,8 @@ const SparklineInteractiveHeaderScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "SparklineInteractive Header Trailing"
@@ -493,7 +496,8 @@ const SparklineInteractiveHeaderScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "SparklineInteractive Header Custom Label"
@@ -506,7 +510,8 @@ const SparklineInteractiveHeaderScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "SparklineInteractive Header Example with AltHeader"
@@ -518,7 +523,8 @@ const SparklineInteractiveHeaderScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "SparklineInteractive Header Example with Smaller Period Set"
@@ -530,7 +536,8 @@ const SparklineInteractiveHeaderScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "SparklineInteractive Header Example with No Period Set"
@@ -543,7 +550,8 @@ const SparklineInteractiveHeaderScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "SparklineInteractive Header Custom Title"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile-visualization",
-  "version": "3.4.0-beta.2",
+  "version": "3.4.0-beta.20",
   "description": "Coinbase Design System - Mobile Visualization Native",
   "repository": {
     "type": "git",
@@ -16,6 +16,10 @@
       "types": "./dts/index.d.ts",
       "default": "./esm/index.js"
     },
+    "./chart": {
+      "types": "./dts/chart/index.d.ts",
+      "default": "./esm/chart/index.js"
+    },
     "./sparkline": {
       "types": "./dts/sparkline/index.d.ts",
       "default": "./esm/sparkline/index.js"
@@ -32,10 +36,11 @@
     "CHANGELOG"
   ],
   "peerDependencies": {
-    "@coinbase/cds-common": "^8.14.0",
-    "@coinbase/cds-lottie-files": "^3.3.2",
-    "@coinbase/cds-mobile": "^8.14.0",
-    "@coinbase/cds-utils": "^2.3.3",
+    "@coinbase/cds-common": "^8.49.0",
+    "@coinbase/cds-lottie-files": "^3.3.4",
+    "@coinbase/cds-mobile": "^8.49.0",
+    "@coinbase/cds-utils": "^2.3.5",
+    "@shopify/react-native-skia": "^1.12.4 || ^2.0.0",
     "react": "^18.3.1",
     "react-native": "^0.74.5",
     "react-native-gesture-handler": "^2.16.2",
@@ -52,11 +57,11 @@
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@coinbase/cds-common": "^8.14.0",
-    "@coinbase/cds-lottie-files": "^3.3.2",
-    "@coinbase/cds-mobile": "^8.14.0",
-    "@coinbase/cds-utils": "^2.3.3",
-    "@figma/code-connect": "^1.3.4",
+    "@coinbase/cds-common": "^8.49.0",
+    "@coinbase/cds-lottie-files": "^3.3.4",
+    "@coinbase/cds-mobile": "^8.49.0",
+    "@coinbase/cds-utils": "^2.3.5",
+    "@shopify/react-native-skia": "1.12.4",
     "@types/react": "^18.3.12",
     "react-native-gesture-handler": "2.16.2",
     "react-native-reanimated": "3.14.0",

package/dts/chart/Point.d.ts

@@ -1,103 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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/line/GradientLine.d.ts

@@ -1,45 +0,0 @@
-import type { SharedProps } from '@coinbase/cds-common/types';
-import { type PathProps } from '../Path';
-export type GradientLineProps = SharedProps &
-  Omit<PathProps, 'stroke' | 'strokeOpacity' | 'strokeWidth'> & {
-    /**
-     * The color of the line.
-     * @default theme.color.bgLine
-     */
-    stroke?: string;
-    /**
-     * Opacity of the line.
-     * @default 1
-     */
-    strokeOpacity?: number;
-    /**
-     * Path stroke width
-     * @default 2
-     */
-    strokeWidth?: number;
-    /**
-     * The color of the start of the gradient.
-     * @default stroke or theme.color.bgLine
-     */
-    startColor?: string;
-    /**
-     * The color of the end of the gradient.
-     * @default stroke or theme.color.bgLine
-     */
-    endColor?: string;
-    /**
-     * Opacity of the start color.
-     * @default strokeOpacity
-     */
-    startOpacity?: number;
-    /**
-     * Opacity of the end color.
-     * @default strokeOpacity
-     */
-    endOpacity?: number;
-  };
-/**
- * A gradient line component which uses path element.
- */
-export declare const GradientLine: import('react').NamedExoticComponent<GradientLineProps>;
-//# sourceMappingURL=GradientLine.d.ts.map

package/dts/chart/line/GradientLine.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"GradientLine.d.ts","sourceRoot":"","sources":["../../../src/chart/line/GradientLine.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAI9D,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAE/C,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,IAAI,CAAC,SAAS,EAAE,QAAQ,GAAG,eAAe,GAAG,aAAa,CAAC,GAAG;IAC5D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEJ;;GAEG;AACH,eAAO,MAAM,YAAY,yDAmDxB,CAAC"}

package/dts/chart/scrubber/ScrubberBeacon.d.ts

@@ -1,75 +0,0 @@
-import type { SharedProps } from '@coinbase/cds-common/types';
-export type ScrubberBeaconRef = {
-  /**
-   * Triggers a single pulse animation.
-   */
-  pulse: () => void;
-};
-export type ScrubberBeaconProps = SharedProps & {
-  /**
-   * Optional data X coordinate to position the beacon.
-   * If not provided, uses the scrubber position from context.
-   */
-  dataX?: number;
-  /**
-   * Optional data Y coordinate to position the beacon.
-   * If not provided, looks up the Y value from series data at scrubber position.
-   */
-  dataY?: number;
-  /**
-   * Filter to only show dot for specific series (used for hover-based positioning).
-   */
-  seriesId?: string;
-  /**
-   * Color of the beacon point.
-   * If not provided, uses the series color.
-   */
-  color?: string;
-  /**
-   * Opacity of the beacon.
-   * @default 1
-   */
-  opacity?: number;
-  /**
-   * Pulse the scrubber beacon while it is at rest.
-   */
-  idlePulse?: boolean;
-};
-/**
- * The ScrubberBeacon is a special instance of a Point used to mark the scrubber's position on a specific series.
- */
-export declare const ScrubberBeacon: import('react').MemoExoticComponent<
-  import('react').ForwardRefExoticComponent<
-    SharedProps & {
-      /**
-       * Optional data X coordinate to position the beacon.
-       * If not provided, uses the scrubber position from context.
-       */
-      dataX?: number;
-      /**
-       * Optional data Y coordinate to position the beacon.
-       * If not provided, looks up the Y value from series data at scrubber position.
-       */
-      dataY?: number;
-      /**
-       * Filter to only show dot for specific series (used for hover-based positioning).
-       */
-      seriesId?: string;
-      /**
-       * Color of the beacon point.
-       * If not provided, uses the series color.
-       */
-      color?: string;
-      /**
-       * Opacity of the beacon.
-       * @default 1
-       */
-      opacity?: number;
-      /**
-       * Pulse the scrubber beacon while it is at rest.
-       */
-      idlePulse?: boolean;
-    } & import('react').RefAttributes<ScrubberBeaconRef>
-  >
->;
-//# sourceMappingURL=ScrubberBeacon.d.ts.map

package/dts/chart/scrubber/ScrubberBeacon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScrubberBeacon.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/ScrubberBeacon.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAe9D,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAAG;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc;IAjCzB;;;OAGG;YACK,MAAM;IACd;;;OAGG;YACK,MAAM;IACd;;OAEG;eACQ,MAAM;IACjB;;;OAGG;YACK,MAAM;IACd;;;OAGG;cACO,MAAM;IAChB;;OAEG;gBACS,OAAO;sDAgMpB,CAAC"}

package/dts/chart/text/SmartChartTextGroup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SmartChartTextGroup.d.ts","sourceRoot":"","sources":["../../../src/chart/text/SmartChartTextGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,iBAAiB,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAErF;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,KAAK,EAAE,iBAAiB,CAAC;IACzB;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,aAAa,GAAG;IAAE,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AAEnE,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAC1C,CAAC;AAiBF;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,gEAwL/B,CAAC"}

package/esm/chart/Point.js

@@ -1,111 +0,0 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import { memo, useEffect, useMemo } from 'react';
-import { Circle, G } from 'react-native-svg';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { useCartesianChartContext } from './ChartProvider';
-import { ChartText } from './text';
-import { projectPoint, useScrubberContext } from './utils';
-
-/**
- * Parameters passed to renderPoints callback function.
- */
-
-/**
- * Shared configuration for point appearance and behavior.
- * Used by line-associated points rendered via Line/LineChart components.
- */
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-export const Point = /*#__PURE__*/memo(_ref => {
-  let {
-    dataX,
-    dataY,
-    yAxisId,
-    fill,
-    radius = 4,
-    opacity,
-    onPress,
-    onScrubberEnter,
-    stroke,
-    strokeWidth = 2,
-    accessibilityLabel,
-    label,
-    labelProps,
-    pixelCoordinates,
-    testID
-  } = _ref;
-  const theme = useTheme();
-  const effectiveStroke = stroke != null ? stroke : theme.color.bg;
-  const {
-    getXScale,
-    getYScale
-  } = useCartesianChartContext();
-  const {
-    scrubberPosition
-  } = useScrubberContext();
-  const xScale = getXScale();
-  const yScale = getYScale(yAxisId);
-
-  // Scrubber detection: check if this point is highlighted by the scrubber
-  const isScrubberHighlighted = scrubberPosition !== undefined && scrubberPosition === dataX;
-
-  // Use provided pixelCoordinates or calculate from data coordinates
-  const pixelCoordinate = useMemo(() => {
-    if (pixelCoordinates) {
-      return pixelCoordinates;
-    }
-    if (!xScale || !yScale) {
-      return {
-        x: 0,
-        y: 0
-      };
-    }
-    return projectPoint({
-      x: dataX,
-      y: dataY,
-      xScale,
-      yScale
-    });
-  }, [pixelCoordinates, xScale, yScale, dataX, dataY]);
-  useEffect(() => {
-    if (isScrubberHighlighted && onScrubberEnter) {
-      onScrubberEnter({
-        x: pixelCoordinate.x,
-        y: pixelCoordinate.y
-      });
-    }
-  }, [isScrubberHighlighted, onScrubberEnter, pixelCoordinate.x, pixelCoordinate.y]);
-  if (!xScale || !yScale) {
-    return null;
-  }
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(G, {
-      opacity: opacity,
-      testID: testID,
-      transform: [{
-        translateX: pixelCoordinate.x
-      }, {
-        translateY: pixelCoordinate.y
-      }],
-      children: /*#__PURE__*/_jsx(Circle, {
-        accessibilityLabel: accessibilityLabel,
-        cx: 0,
-        cy: 0,
-        fill: fill != null ? fill : theme.color.fgPrimary,
-        onPress: onPress ? event => onPress({
-          dataX,
-          dataY,
-          x: pixelCoordinate.x,
-          y: pixelCoordinate.y
-        }) : undefined,
-        r: radius,
-        stroke: effectiveStroke,
-        strokeWidth: strokeWidth
-      })
-    }), label && /*#__PURE__*/_jsx(ChartText, _extends({
-      x: pixelCoordinate.x,
-      y: pixelCoordinate.y
-    }, labelProps, {
-      children: label
-    }))]
-  });
-});

package/esm/chart/__stories__/Chart.stories.js

@@ -1,79 +0,0 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
-import { CartesianChart, DottedArea, GradientLine, Line, LineChart } from '../';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const defaultChartHeight = 250;
-const BasicLineChart = () => {
-  const chartData = [65, 78, 45, 88, 92, 73, 69];
-  return /*#__PURE__*/_jsx(LineChart, {
-    showYAxis: true,
-    height: defaultChartHeight,
-    series: [{
-      id: 'monthly-growth',
-      data: chartData,
-      label: 'Monthly Growth',
-      color: '#2ca02c'
-    }],
-    yAxis: {
-      requestedTickCount: 2,
-      tickLabelFormatter: value => "$" + value,
-      showGrid: true
-    }
-  });
-};
-const LineStyles = () => {
-  const topChartData = [15, 28, 32, 44, 46, 36, 40, 45, 48, 38];
-  const upperMiddleChartData = [12, 23, 21, 29, 34, 28, 31, 38, 42, 35];
-  const lowerMiddleChartData = [8, 15, 14, 25, 20, 18, 22, 28, 24, 30];
-  const bottomChartData = [4, 8, 11, 15, 16, 14, 16, 10, 12, 14];
-  return /*#__PURE__*/_jsxs(CartesianChart, {
-    height: defaultChartHeight,
-    series: [{
-      id: 'top',
-      data: topChartData
-    }, {
-      id: 'upperMiddle',
-      data: upperMiddleChartData,
-      color: '#ef4444'
-    }, {
-      id: 'lowerMiddle',
-      data: lowerMiddleChartData,
-      color: '#f59e0b'
-    }, {
-      id: 'bottom',
-      data: bottomChartData,
-      color: '#800080'
-    }],
-    children: [/*#__PURE__*/_jsx(Line, {
-      seriesId: "top"
-    }), /*#__PURE__*/_jsx(Line, {
-      seriesId: "upperMiddle",
-      type: "dotted"
-    }), /*#__PURE__*/_jsx(Line, {
-      LineComponent: props => /*#__PURE__*/_jsx(GradientLine, _extends({}, props, {
-        endColor: "#F7931A",
-        startColor: "#E3D74D",
-        strokeWidth: 4
-      })),
-      curve: "natural",
-      seriesId: "lowerMiddle"
-    }), /*#__PURE__*/_jsx(Line, {
-      showArea: true,
-      AreaComponent: DottedArea,
-      curve: "step",
-      seriesId: "bottom"
-    })]
-  });
-};
-const ChartStories = () => {
-  return /*#__PURE__*/_jsxs(ExampleScreen, {
-    children: [/*#__PURE__*/_jsx(Example, {
-      title: "Basic Line Chart",
-      children: /*#__PURE__*/_jsx(BasicLineChart, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Line Styles",
-      children: /*#__PURE__*/_jsx(LineStyles, {})
-    })]
-  });
-};
-export default ChartStories;

package/esm/chart/line/GradientLine.js

@@ -1,62 +0,0 @@
-const _excluded = ["fill", "stroke", "startColor", "endColor", "strokeOpacity", "startOpacity", "endOpacity", "strokeLinecap", "strokeLinejoin", "strokeWidth", "animate"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import { memo, useId } from 'react';
-import { Defs, LinearGradient, Stop } from 'react-native-svg';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { useCartesianChartContext } from '../ChartProvider';
-import { Path } from '../Path';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * A gradient line component which uses path element.
- */
-export const GradientLine = /*#__PURE__*/memo(_ref => {
-  var _ref2, _ref3;
-  let {
-      fill = 'none',
-      stroke,
-      startColor,
-      endColor,
-      strokeOpacity = 1,
-      startOpacity = strokeOpacity,
-      endOpacity = strokeOpacity,
-      strokeLinecap = 'round',
-      strokeLinejoin = 'round',
-      strokeWidth = 2,
-      animate
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const context = useCartesianChartContext();
-  const theme = useTheme();
-  const patternId = useId();
-  const shouldAnimate = animate != null ? animate : context.animate;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Defs, {
-      children: /*#__PURE__*/_jsxs(LinearGradient, {
-        id: patternId,
-        x1: "0%",
-        x2: "0%",
-        y1: "0%",
-        y2: "100%",
-        children: [/*#__PURE__*/_jsx(Stop, {
-          offset: "0%",
-          stopColor: (_ref2 = startColor != null ? startColor : stroke) != null ? _ref2 : theme.color.bgLine,
-          stopOpacity: startOpacity
-        }), /*#__PURE__*/_jsx(Stop, {
-          offset: "100%",
-          stopColor: (_ref3 = endColor != null ? endColor : stroke) != null ? _ref3 : theme.color.bgLine,
-          stopOpacity: endOpacity
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Path, _extends({
-      animate: shouldAnimate,
-      clipOffset: strokeWidth,
-      fill: fill,
-      stroke: "url(#" + patternId + ")",
-      strokeLinecap: strokeLinecap,
-      strokeLinejoin: strokeLinejoin,
-      strokeOpacity: strokeOpacity,
-      strokeWidth: strokeWidth
-    }, props))]
-  });
-});