@coinbase/cds-mobile-visualization 0.0.0 → 3.3.0

package/dts/sparkline/sparkline-interactive/__tests__/SparklineInteractiveTimeseriesPaths.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SparklineInteractiveTimeseriesPaths.test.d.ts.map

package/dts/sparkline/sparkline-interactive/__tests__/SparklineInteractiveTimeseriesPaths.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SparklineInteractiveTimeseriesPaths.test.d.ts","sourceRoot":"","sources":["../../../../src/sparkline/sparkline-interactive/__tests__/SparklineInteractiveTimeseriesPaths.test.tsx"],"names":[],"mappings":""}

package/dts/sparkline/sparkline-interactive/__tests__/useMinMaxTransform.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useMinMaxTransform.test.d.ts.map

package/dts/sparkline/sparkline-interactive/__tests__/useMinMaxTransform.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMinMaxTransform.test.d.ts","sourceRoot":"","sources":["../../../../src/sparkline/sparkline-interactive/__tests__/useMinMaxTransform.test.ts"],"names":[],"mappings":""}

package/dts/sparkline/sparkline-interactive/useInterruptiblePathAnimation.d.ts

@@ -0,0 +1,9 @@
+import { Animated } from 'react-native';
+type Params = {
+    animationListener: Animated.ValueListenerCallback;
+    onInterrupt: () => void;
+    ignoreMinMax?: boolean;
+};
+export declare const useInterruptiblePathAnimation: ({ animationListener, onInterrupt, ignoreMinMax, }: Params) => () => void;
+export {};
+//# sourceMappingURL=useInterruptiblePathAnimation.d.ts.map

package/dts/sparkline/sparkline-interactive/useInterruptiblePathAnimation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInterruptiblePathAnimation.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/useInterruptiblePathAnimation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAWxC,KAAK,MAAM,GAAG;IACZ,iBAAiB,EAAE,QAAQ,CAAC,qBAAqB,CAAC;IAClD,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,6BAA6B,GAAI,mDAI3C,MAAM,eA4CR,CAAC"}

package/dts/sparkline/sparkline-interactive/useInterruptiblePathAnimation.test.disable.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useInterruptiblePathAnimation.test.disable.d.ts.map

package/dts/sparkline/sparkline-interactive/useInterruptiblePathAnimation.test.disable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInterruptiblePathAnimation.test.disable.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/useInterruptiblePathAnimation.test.disable.ts"],"names":[],"mappings":""}

package/dts/sparkline/sparkline-interactive/useMinMaxTransform.d.ts

@@ -0,0 +1,11 @@
+import { Animated } from 'react-native';
+import type { LayoutRectangle } from 'react-native';
+type MinMaxTransformParams = {
+    minMaxLayout: LayoutRectangle;
+    x: number;
+    transform: Animated.ValueXY;
+    opacity: Animated.Value;
+};
+export declare function useMinMaxTransform({ minMaxLayout, x, transform, opacity }: MinMaxTransformParams): void;
+export {};
+//# sourceMappingURL=useMinMaxTransform.d.ts.map

package/dts/sparkline/sparkline-interactive/useMinMaxTransform.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMinMaxTransform.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/useMinMaxTransform.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAOpD,KAAK,qBAAqB,GAAG;IAC3B,YAAY,EAAE,eAAe,CAAC;IAC9B,CAAC,EAAE,MAAM,CAAC;IACV,SAAS,EAAE,QAAQ,CAAC,OAAO,CAAC;IAC5B,OAAO,EAAE,QAAQ,CAAC,KAAK,CAAC;CACzB,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,qBAAqB,QAiDhG"}

package/dts/sparkline/sparkline-interactive/useOpacityAnimation.d.ts

@@ -0,0 +1,3 @@
+import { Animated } from 'react-native';
+export declare function useOpacityAnimation(initialValue?: number | undefined, duration?: number | undefined): [Animated.Value, Animated.CompositeAnimation, Animated.CompositeAnimation];
+//# sourceMappingURL=useOpacityAnimation.d.ts.map

package/dts/sparkline/sparkline-interactive/useOpacityAnimation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOpacityAnimation.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/useOpacityAnimation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,wBAAgB,mBAAmB,CACjC,YAAY,GAAE,MAAM,GAAG,SAAa,EACpC,QAAQ,GAAE,MAAM,GAAG,SAAwB,GAC1C,CAAC,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,kBAAkB,EAAE,QAAQ,CAAC,kBAAkB,CAAC,CAwB5E"}

package/dts/sparkline/sparkline-interactive/useSparklineInteractiveConstants.d.ts

@@ -0,0 +1,22 @@
+type Props = {
+    compact?: boolean;
+};
+export declare function useSparklineInteractiveConstants({ compact }: Props): {
+    chartHorizontalGutter: number;
+    chartWidth: number;
+    chartHeight: number;
+    chartDimensionStyles: {
+        height: number;
+        width: number;
+    };
+    chartMarkerSize: number;
+    SparklineInteractiveMinMaxLabelHeight: number;
+    SparklineInteractiveMinMaxVerticalGutter: number;
+    chartVerticalLineWidth: number;
+    xRange: number[];
+    yRange: number[];
+    startX: number;
+    endX: number;
+};
+export {};
+//# sourceMappingURL=useSparklineInteractiveConstants.d.ts.map

package/dts/sparkline/sparkline-interactive/useSparklineInteractiveConstants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSparklineInteractiveConstants.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/useSparklineInteractiveConstants.ts"],"names":[],"mappings":"AAWA,KAAK,KAAK,GAAG;IACX,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,gCAAgC,CAAC,EAAE,OAAe,EAAE,EAAE,KAAK;;;;;;;;;;;;;;;;EAoC1E"}

package/dts/sparkline/sparkline-interactive/useSparklineInteractiveLineStyles.d.ts

@@ -0,0 +1,31 @@
+export declare function useSparklineInteractiveLineStyles(): {
+    dotStyle: ({
+        backgroundColor: string;
+        position?: undefined;
+        top?: undefined;
+        left?: undefined;
+        height?: undefined;
+        width?: undefined;
+        borderRadius?: undefined;
+        opacity?: undefined;
+    } | {
+        position: string;
+        top: number;
+        left: number;
+        height: number;
+        width: number;
+        borderRadius: number;
+        opacity: number;
+        backgroundColor?: undefined;
+    })[];
+    lineProps: {
+        strokeWidth: number;
+        stroke: string;
+        x1: number;
+        x2: number;
+        y1: number;
+        y2: number;
+        strokeDasharray: number[];
+    };
+};
+//# sourceMappingURL=useSparklineInteractiveLineStyles.d.ts.map

package/dts/sparkline/sparkline-interactive/useSparklineInteractiveLineStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSparklineInteractiveLineStyles.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/useSparklineInteractiveLineStyles.ts"],"names":[],"mappings":"AAYA,wBAAgB,iCAAiC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4BhD"}

package/dts/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.d.ts

@@ -0,0 +1,110 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import type { SharedProps, SparklineInteractiveHeaderSignVariant, SparklineInteractiveHeaderVariant } from '@coinbase/cds-common/types';
+export * from '@coinbase/cds-common/types/SparklineInteractiveHeaderBaseProps';
+export type SparklineInteractiveSubHead = {
+    /**
+     * Free form percentage change
+     */
+    percent: string;
+    /**
+     * Sign to denote the change in price
+     */
+    sign: SparklineInteractiveHeaderSignVariant;
+    /**
+     * The variant to use for the price and percentage change
+     */
+    variant: SparklineInteractiveHeaderVariant;
+    /**
+     * Show the dollar amount of price change
+     */
+    priceChange?: string;
+    /**
+     * The accessoryText to show after the price and / or percentage change. An example is "All time"
+     */
+    accessoryText?: string;
+    /**
+     * The accessibilityLabel to show for the price and / or percentage change. This should be localized
+     * @example
+     * // First, configure your i18n strings
+     * const messages = defineMessages({
+     *   subHeadPrefix: {
+     *     id: `${i18nKey}.subHeadPrefix`,
+     *     defaultMessage: 'Price increase in the amount of',
+     *     description: 'A prefix to make it clear which direction the price action was moving',
+     *   }
+     * });
+     *
+     * // then  provide the translated string the accessibilityLabel prop
+     * messages.subHeadPrefix
+     */
+    accessibilityLabel?: string;
+};
+export type SparklineInteractiveHeaderValues = {
+    /**
+     * Describes what the Header represents e.g. Bitcoin Price
+     */
+    label?: string;
+    /**
+     * Main content of header, this is usually the price
+     */
+    title?: React.ReactNode;
+    /**
+     * Provides additional information about the title, such as a price change
+     */
+    subHead?: SparklineInteractiveSubHead;
+};
+export type SparklineInteractiveHeaderRef = {
+    update: (params: SparklineInteractiveHeaderValues) => void;
+};
+export type SparklineInteractiveHeaderProps = SharedProps & {
+    /**
+     * Default title, changing this prop has no effect once the default is rendered. If you use a ReactNode that is not a string, then you cannot use the text based label that supports updates.
+     */
+    defaultTitle: React.ReactNode;
+    /**
+     * Default label, changing this prop has no effect once the default is rendered.
+     */
+    defaultLabel?: string;
+    /**
+     * Default SubHead, changing this prop has no effect once the default is rendered.
+     */
+    defaultSubHead?: SparklineInteractiveSubHead;
+    /**
+     * Adds a label node that allows React components. If you use this node then you cannot use the text based label that supports updates.
+     */
+    labelNode?: React.ReactNode;
+    /**
+     * Reduce the font size used for the header itself.
+     */
+    compact?: boolean;
+};
+export declare const interpolateSubHeadText: (subHead: SparklineInteractiveSubHead) => string;
+export declare const SparklineInteractiveHeader: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
+    /**
+     * Adds content next to the header. This is useful for interactive buttons
+     */
+    trailing?: ReactNode;
+} & SharedProps & {
+    /**
+     * Default title, changing this prop has no effect once the default is rendered. If you use a ReactNode that is not a string, then you cannot use the text based label that supports updates.
+     */
+    defaultTitle: React.ReactNode;
+    /**
+     * Default label, changing this prop has no effect once the default is rendered.
+     */
+    defaultLabel?: string;
+    /**
+     * Default SubHead, changing this prop has no effect once the default is rendered.
+     */
+    defaultSubHead?: SparklineInteractiveSubHead;
+    /**
+     * Adds a label node that allows React components. If you use this node then you cannot use the text based label that supports updates.
+     */
+    labelNode?: React.ReactNode;
+    /**
+     * Reduce the font size used for the header itself.
+     */
+    compact?: boolean;
+} & React.RefAttributes<SparklineInteractiveHeaderRef>>>;
+//# sourceMappingURL=SparklineInteractiveHeader.d.ts.map

package/dts/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SparklineInteractiveHeader.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqE,MAAM,OAAO,CAAC;AAE1F,OAAO,KAAK,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,KAAK,EACV,WAAW,EACX,qCAAqC,EACrC,iCAAiC,EAClC,MAAM,4BAA4B,CAAC;AAKpC,cAAc,gEAAgE,CAAC;AAE/E,MAAM,MAAM,2BAA2B,GAAG;IACxC;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,IAAI,EAAE,qCAAqC,CAAC;IAC5C;;OAEG;IACH,OAAO,EAAE,iCAAiC,CAAC;IAC3C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;;;;;;;;;OAcG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG;IAC7C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,2BAA2B,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG;IAC1C,MAAM,EAAE,CAAC,MAAM,EAAE,gCAAgC,KAAK,IAAI,CAAC;CAC5D,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG,WAAW,GAAG;IAC1D;;OAEG;IACH,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,cAAc,CAAC,EAAE,2BAA2B,CAAC;IAC7C;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,SAAS,2BAA2B,WAQ1E,CAAC;AAwNF,eAAO,MAAM,0BAA0B;IANrC;;OAEG;eACQ,SAAS;;IAnPpB;;OAEG;kBACW,KAAK,CAAC,SAAS;IAC7B;;OAEG;mBACY,MAAM;IACrB;;OAEG;qBACc,2BAA2B;IAC5C;;OAEG;gBACS,KAAK,CAAC,SAAS;IAC3B;;OAEG;cACO,OAAO;wDAuPlB,CAAC"}

package/dts/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SparklineInteractiveHeader.figma.d.ts.map

package/dts/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SparklineInteractiveHeader.figma.d.ts","sourceRoot":"","sources":["../../../../src/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.tsx"],"names":[],"mappings":""}

package/dts/sparkline/sparkline-interactive-header/__stories__/SparklineInteractiveHeader.stories.d.ts

@@ -0,0 +1,4 @@
+export declare const SparklineInteractiveHeaderWithCustomTitle: () => import("react/jsx-runtime").JSX.Element;
+declare const SparklineInteractiveHeaderScreen: () => import("react/jsx-runtime").JSX.Element;
+export default SparklineInteractiveHeaderScreen;
+//# sourceMappingURL=SparklineInteractiveHeader.stories.d.ts.map

package/dts/sparkline/sparkline-interactive-header/__stories__/SparklineInteractiveHeader.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SparklineInteractiveHeader.stories.d.ts","sourceRoot":"","sources":["../../../../src/sparkline/sparkline-interactive-header/__stories__/SparklineInteractiveHeader.stories.tsx"],"names":[],"mappings":"AA8aA,eAAO,MAAM,yCAAyC,+CAuFrD,CAAC;AAEF,QAAA,MAAM,gCAAgC,+CA2FrC,CAAC;AAEF,eAAe,gCAAgC,CAAC"}

package/dts/sparkline/sparkline-interactive-header/__tests__/SparklineInteractiveHeader.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SparklineInteractiveHeader.test.d.ts.map

package/dts/sparkline/sparkline-interactive-header/__tests__/SparklineInteractiveHeader.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SparklineInteractiveHeader.test.d.ts","sourceRoot":"","sources":["../../../../src/sparkline/sparkline-interactive-header/__tests__/SparklineInteractiveHeader.test.tsx"],"names":[],"mappings":""}

package/dts/sparkline/sparkline-interactive-header/__tests__/useSparklineInteractiveHeaderStyles.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useSparklineInteractiveHeaderStyles.test.d.ts.map

package/dts/sparkline/sparkline-interactive-header/__tests__/useSparklineInteractiveHeaderStyles.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSparklineInteractiveHeaderStyles.test.d.ts","sourceRoot":"","sources":["../../../../src/sparkline/sparkline-interactive-header/__tests__/useSparklineInteractiveHeaderStyles.test.ts"],"names":[],"mappings":""}

package/dts/sparkline/sparkline-interactive-header/useSparklineInteractiveHeaderStyles.d.ts

@@ -0,0 +1,26 @@
+import type { StyleProp, TextStyle } from 'react-native';
+import type { SparklineInteractiveSubHead } from './SparklineInteractiveHeader';
+export type SparklineInteractiveSubHeadIconColor = SparklineInteractiveSubHead['variant'];
+export declare const styles: {
+    inputReset: {
+        padding: number;
+        margin: number;
+        backgroundColor: string;
+        overflow: "visible";
+        lineHeight: undefined;
+    };
+    fullWidth: {
+        width: "100%";
+    };
+    tabularNumbers: {
+        fontVariant: "tabular-nums"[];
+    };
+};
+export declare function useSparklineInteractiveHeaderStyles(): {
+    readonly title: (text: string) => StyleProp<TextStyle>;
+    readonly label: StyleProp<TextStyle>;
+    readonly subHeadIcon: (color: SparklineInteractiveSubHeadIconColor) => StyleProp<TextStyle>;
+    readonly subHead: (color: SparklineInteractiveSubHeadIconColor, useFullWidth?: boolean) => StyleProp<TextStyle>;
+    readonly subHeadAccessory: () => StyleProp<TextStyle>;
+};
+//# sourceMappingURL=useSparklineInteractiveHeaderStyles.d.ts.map

package/dts/sparkline/sparkline-interactive-header/useSparklineInteractiveHeaderStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSparklineInteractiveHeaderStyles.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive-header/useSparklineInteractiveHeaderStyles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKzD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,8BAA8B,CAAC;AAEhF,MAAM,MAAM,oCAAoC,GAAG,2BAA2B,CAAC,SAAS,CAAC,CAAC;AA0B1F,eAAO,MAAM,MAAM;;;;;;;;;;;;;;CAejB,CAAC;AAEH,wBAAgB,mCAAmC;2BA+B/B,MAAM,KAAG,SAAS,CAAC,SAAS,CAAC;oBA+BtC,SAAS,CAAC,SAAS,CAAC;kCAEJ,oCAAoC,KAAG,SAAS,CAAC,SAAS,CAAC;8BAYvE,oCAAoC,6BAE1C,SAAS,CAAC,SAAS,CAAC;qCAUD,SAAS,CAAC,SAAS,CAAC;EAqB/C"}

package/esm/index.js

@@ -0,0 +1 @@
+export * from './sparkline';

package/esm/sparkline/Counter.js

@@ -0,0 +1,45 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useCounter } from '@coinbase/cds-common/visualizations/useCounter';
+import { Box } from '@coinbase/cds-mobile/layout';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const styles = StyleSheet.create({
+  hidden: {
+    opacity: 0
+  },
+  visible: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    display: 'flex'
+  }
+});
+export const Counter = _ref => {
+  let {
+    startNum,
+    endNum,
+    renderNum,
+    durationInMillis
+  } = _ref;
+  const count = useCounter({
+    startNum,
+    endNum,
+    durationInMillis
+  });
+  const renderFunction = useMemo(() => {
+    return num => {
+      return renderNum ? renderNum(num) : num;
+    };
+  }, [renderNum]);
+  return /*#__PURE__*/_jsxs(Box, {
+    alignSelf: "flex-start",
+    justifyContent: "center",
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.hidden,
+      children: renderFunction(endNum)
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.visible,
+      children: renderFunction(count)
+    })]
+  });
+};

package/esm/sparkline/Sparkline.js

@@ -0,0 +1,51 @@
+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 React, { memo, useRef } from 'react';
+import { Defs, G, Path, Svg } from 'react-native-svg';
+import { borderWidth } from '@coinbase/cds-common/tokens/sparkline';
+import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
+import { getSparklineTransform } from '@coinbase/cds-common/visualizations/getSparklineTransform';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { generateRandomId } from '@coinbase/cds-utils';
+import { generateSparklineAreaWithId } from './generateSparklineWithId';
+import { SparklineAreaPattern } from './SparklineAreaPattern';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Sparkline = /*#__PURE__*/memo(_ref => {
+  let {
+    background,
+    color,
+    height,
+    path,
+    width,
+    yAxisScalingFactor,
+    children
+  } = _ref;
+  const theme = useTheme();
+  const patternId = useRef(generateRandomId());
+  const stroke = color !== 'auto' ? color : getAccessibleColor({
+    background: background != null ? background : theme.color.bg,
+    foreground: 'auto',
+    usage: 'graphic'
+  });
+  const translateProps = getSparklineTransform(width, height, yAxisScalingFactor);
+  const defs = children ? /*#__PURE__*/_jsx(Defs, {
+    children: /*#__PURE__*/_jsx(SparklineAreaPattern, {
+      color: stroke,
+      id: patternId.current
+    })
+  }) : null;
+  return /*#__PURE__*/_jsxs(Svg, {
+    fill: "none",
+    height: height,
+    width: width,
+    children: [defs, /*#__PURE__*/_jsxs(G, _extends({}, translateProps, {
+      children: [/*#__PURE__*/_jsx(Path, {
+        d: path,
+        stroke: stroke,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: borderWidth
+      }), generateSparklineAreaWithId(patternId.current, children)]
+    }))]
+  });
+});
+Sparkline.displayName = 'Sparkline';

package/esm/sparkline/SparklineArea.js

@@ -0,0 +1,14 @@
+import React, { forwardRef, memo } from 'react';
+import { Path } from 'react-native-svg';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SparklineArea = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    area,
+    patternId
+  } = _ref;
+  return /*#__PURE__*/_jsx(Path, {
+    ref: ref,
+    d: area,
+    fill: "url(#" + patternId + ")"
+  });
+}));

package/esm/sparkline/SparklineAreaPattern.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Circle, G, Pattern, Rect } from 'react-native-svg';
+import { useSparklineAreaOpacity } from '@coinbase/cds-common/visualizations/useSparklineAreaOpacity';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const SparklineAreaPattern = _ref => {
+  let {
+    color,
+    id
+  } = _ref;
+  const {
+    activeColorScheme
+  } = useTheme();
+  const fillOpacity = useSparklineAreaOpacity(activeColorScheme);
+  return /*#__PURE__*/_jsx(Pattern, {
+    height: "4",
+    id: id,
+    patternUnits: "userSpaceOnUse",
+    width: "4",
+    x: "0",
+    y: "0",
+    children: /*#__PURE__*/_jsxs(G, {
+      children: [/*#__PURE__*/_jsx(Rect, {
+        fill: "transparent",
+        height: "4",
+        width: "4"
+      }), /*#__PURE__*/_jsx(Circle, {
+        cx: "1",
+        cy: "1",
+        fill: color,
+        fillOpacity: fillOpacity,
+        r: "1"
+      })]
+    })
+  });
+};

package/esm/sparkline/SparklineGradient.js

@@ -0,0 +1,72 @@
+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 React, { forwardRef, memo, useMemo, useRef } from 'react';
+import { Defs, G, LinearGradient, Path, Stop, Svg } from 'react-native-svg';
+import { getAccessibleForegroundGradient } from '@coinbase/cds-common/color/getAccessibleForegroundGradient';
+import { borderWidth } from '@coinbase/cds-common/tokens/sparkline';
+import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
+import { getSparklineTransform } from '@coinbase/cds-common/visualizations/getSparklineTransform';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { generateRandomId } from '@coinbase/cds-utils';
+import { generateSparklineAreaWithId } from './generateSparklineWithId';
+import { SparklineAreaPattern } from './SparklineAreaPattern';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const SparklineGradient = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    background,
+    color,
+    path,
+    height,
+    width,
+    yAxisScalingFactor,
+    children
+  } = _ref;
+  const theme = useTheme();
+  const patternId = useRef(generateRandomId());
+  const translateProps = getSparklineTransform(width, height, yAxisScalingFactor);
+  const gradient = getAccessibleForegroundGradient({
+    background: background != null ? background : theme.color.bg,
+    color,
+    colorScheme: theme.activeColorScheme,
+    usage: 'graphic'
+  });
+  const areaColor = color !== 'auto' ? color : getAccessibleColor({
+    background: background != null ? background : theme.color.bg,
+    foreground: 'auto',
+    usage: 'graphic'
+  });
+  const hasChildren = !!children;
+  const linearGradient = useMemo(() => {
+    return /*#__PURE__*/_jsxs(Defs, {
+      children: [/*#__PURE__*/_jsx(LinearGradient, {
+        id: "gradient",
+        x1: "0%",
+        x2: "100%",
+        y1: "0%",
+        y2: "0%",
+        children: gradient.map((item, i) => /*#__PURE__*/_jsx(Stop, {
+          offset: item.offset,
+          stopColor: item.color
+        }, i + "_" + item))
+      }), hasChildren && /*#__PURE__*/_jsx(SparklineAreaPattern, {
+        color: areaColor,
+        id: patternId.current
+      })]
+    });
+  }, [areaColor, hasChildren, gradient]);
+  return /*#__PURE__*/_jsxs(Svg, {
+    fill: "none",
+    height: height,
+    width: width,
+    children: [linearGradient, /*#__PURE__*/_jsxs(G, _extends({}, translateProps, {
+      children: [/*#__PURE__*/_jsx(Path, {
+        ref: ref,
+        d: path,
+        stroke: "url(#gradient)",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: borderWidth
+      }), generateSparklineAreaWithId(patternId.current, children)]
+    }))]
+  });
+}));
+SparklineGradient.displayName = 'SparklineGradient';

package/esm/sparkline/__figma__/Sparkline.figma.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath';
+import { figma } from '@figma/code-connect';
+import { Sparkline } from '../Sparkline';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(Sparkline, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=320%3A15040', {
+  imports: ["import { Sparkline } from '@coinbase/cds-mobile-visualization';", "import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath';"],
+  example: function Example() {
+    const data = [20, 30, 5, 45, 0];
+    const path = useSparklinePath({
+      height: 200,
+      width: 200,
+      data
+    });
+    return /*#__PURE__*/_jsx(Sparkline, {
+      color: "auto",
+      height: 200,
+      path: path,
+      width: 400
+    });
+  }
+});