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

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

@@ -2,22 +2,30 @@ import React from 'react';
 import type { ChartDataPoint, ChartTimeseries } from '@coinbase/cds-common/types';
 import type { Area, Line } from 'd3-shape';
 export type TimeseriesPathOnRenderParams = {
-    path: string;
-    area: string;
+  path: string;
+  area: string;
 };
 export type TimeseriesPathProps = {
-    lineFn: Line<ChartDataPoint>;
-    areaFn: Area<ChartDataPoint>;
-    timeseries: ChartTimeseries;
-    initialPath: string;
-    onRender?: ({ path, area }: TimeseriesPathOnRenderParams) => void;
+  lineFn: Line<ChartDataPoint>;
+  areaFn: Area<ChartDataPoint>;
+  timeseries: ChartTimeseries;
+  initialPath: string;
+  onRender?: ({ path, area }: TimeseriesPathOnRenderParams) => void;
 };
 export type SparklineInteractiveTimeseriesPathsProps = {
-    initialPath: string;
-    data: ChartTimeseries[];
-    width: number;
-    height: number;
-    onRender: ({ path, area }: TimeseriesPathOnRenderParams) => void;
+  initialPath: string;
+  data: ChartTimeseries[];
+  width: number;
+  height: number;
+  onRender: ({ path, area }: TimeseriesPathOnRenderParams) => void;
 };
-export declare const SparklineInteractiveTimeseriesPaths: React.MemoExoticComponent<({ data, width, height, initialPath, onRender }: SparklineInteractiveTimeseriesPathsProps) => import("react/jsx-runtime").JSX.Element>;
-//# sourceMappingURL=SparklineInteractiveTimeseriesPaths.d.ts.map
+export declare const SparklineInteractiveTimeseriesPaths: React.MemoExoticComponent<
+  ({
+    data,
+    width,
+    height,
+    initialPath,
+    onRender,
+  }: SparklineInteractiveTimeseriesPathsProps) => import('react/jsx-runtime').JSX.Element
+>;
+//# sourceMappingURL=SparklineInteractiveTimeseriesPaths.d.ts.map

package/dts/sparkline/sparkline-interactive/__figma__/SparklineInteractive.figma.d.ts

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

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

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

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

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

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

@@ -1,3 +1,6 @@
 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
+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/useSparklineInteractiveConstants.d.ts

@@ -1,22 +1,22 @@
 type Props = {
-    compact?: boolean;
+  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;
+  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
+//# sourceMappingURL=useSparklineInteractiveConstants.d.ts.map

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

@@ -1,5 +1,6 @@
 export declare function useSparklineInteractiveLineStyles(): {
-    dotStyle: ({
+  dotStyle: (
+    | {
         backgroundColor: string;
         position?: undefined;
         top?: undefined;
@@ -8,7 +9,8 @@ export declare function useSparklineInteractiveLineStyles(): {
         width?: undefined;
         borderRadius?: undefined;
         opacity?: undefined;
-    } | {
+      }
+    | {
         position: string;
         top: number;
         left: number;
@@ -17,15 +19,16 @@ export declare function useSparklineInteractiveLineStyles(): {
         borderRadius: number;
         opacity: number;
         backgroundColor?: undefined;
-    })[];
-    lineProps: {
-        strokeWidth: number;
-        stroke: string;
-        x1: number;
-        x2: number;
-        y1: number;
-        y2: number;
-        strokeDasharray: number[];
-    };
+      }
+  )[];
+  lineProps: {
+    strokeWidth: number;
+    stroke: string;
+    x1: number;
+    x2: number;
+    y1: number;
+    y2: number;
+    strokeDasharray: number[];
+  };
 };
-//# sourceMappingURL=useSparklineInteractiveLineStyles.d.ts.map
+//# sourceMappingURL=useSparklineInteractiveLineStyles.d.ts.map

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

@@ -1,110 +1,118 @@
 import React from 'react';
 import type { ReactNode } from 'react';
-import type { SharedProps, SparklineInteractiveHeaderSignVariant, SparklineInteractiveHeaderVariant } from '@coinbase/cds-common/types';
+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;
+  /**
+   * 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;
+  /**
+   * 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;
+  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;
+  /**
+   * 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
+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/__figma__/SparklineInteractiveHeader.figma.d.ts

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

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

@@ -2,25 +2,28 @@ 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"[];
-    };
+  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>;
+  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
+//# sourceMappingURL=useSparklineInteractiveHeaderStyles.d.ts.map