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

package/dts/chart/utils/point.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"point.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/point.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAE9E,OAAO,EAEL,KAAK,kBAAkB,EAIvB,KAAK,iBAAiB,EACvB,MAAM,SAAS,CAAC;AAEjB;;;;;;GAMG;AACH,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEhF;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,GAAI,WAAW,MAAM,EAAE,OAAO,kBAAkB,KAAG,MAc9E,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,2BAA2B,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,iBAAiB,GAAG,MAAM,CAc/F;AAED;;;GAGG;AACH,wBAAgB,iCAAiC,CAAC,EAChD,CAAC,EACD,CAAC,EACD,MAAM,EACN,MAAM,GACP,EAAE;IACD,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,MAAM,EAAE,iBAAiB,CAAC;IAC1B,MAAM,EAAE,iBAAiB,CAAC;CAC3B,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAM3B;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,YAAY,GAAI,2BAK1B;IACD,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,MAAM,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,kBAAkB,CAAC;CAC5B,KAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAEzB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,GAAI,yCAM3B;IACD,IAAI,EAAE,CAAC,MAAM,GAAG,IAAI,GAAG;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,CAAC;IACnD,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,MAAM,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,kBAAkB,CAAC;CAC5B,KAAG,KAAK,CAAC;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAqDxC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,wBAAwB,GACnC,UAAU,kBAAkB,KAC3B;IAAE,mBAAmB,EAAE,uBAAuB,CAAC;IAAC,iBAAiB,EAAE,qBAAqB,CAAA;CAyB1F,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAC9B,GAAG,MAAM,EACT,GAAG,MAAM,EACT,UAAU,kBAAkB,EAC5B,QAAQ,MAAM,KACb;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CA0BxB,CAAC"}

package/dts/chart/utils/scale.d.ts

@@ -0,0 +1,134 @@
+import type { ScaleBand, ScaleLinear, ScaleLogarithmic } from 'd3-scale';
+import type { AxisBounds } from './chart';
+export type ChartAxisScaleType = 'linear' | 'log' | 'band';
+export type NumericScale =
+  | ScaleLinear<number, number, never>
+  | ScaleLogarithmic<number, number, never>;
+export type CategoricalScale = ScaleBand<number>;
+export type ChartScaleFunction = NumericScale | CategoricalScale;
+export declare const isCategoricalScale: (scale: ChartScaleFunction) => scale is CategoricalScale;
+export declare const isNumericScale: (scale: ChartScaleFunction) => scale is NumericScale;
+/**
+ * Type guard to check if a scale is logarithmic.
+ */
+export declare const isLogScale: (
+  scale: ChartScaleFunction,
+) => scale is ScaleLogarithmic<number, number, never>;
+/**
+ * Type guard to check if a scale is a SerializableScale.
+ * This can be used in worklets to differentiate between scale objects and scale functions.
+ */
+export declare const isSerializableScale: (
+  scale: SerializableScale | ChartScaleFunction,
+) => scale is SerializableScale;
+/**
+ * Create a numeric scale (linear or logarithmic)
+ * @returns A numeric scale function
+ */
+export declare const getNumericScale: ({
+  scaleType,
+  domain,
+  range,
+}: {
+  scaleType: 'linear' | 'log';
+  domain: AxisBounds;
+  range: AxisBounds;
+}) => NumericScale;
+/**
+ * Create a categorical scale (band)
+ * @returns A categorical scale function
+ */
+export declare const getCategoricalScale: ({
+  domain,
+  range,
+  padding,
+}: {
+  domain: AxisBounds;
+  range: AxisBounds;
+  padding?: number;
+}) => CategoricalScale;
+/**
+ * Convert a D3 scale to a serializable scale configuration that can be used in worklets
+ */
+export declare function convertToSerializableScale(
+  d3Scale: ChartScaleFunction,
+): SerializableScale | undefined;
+/**
+ * Convert multiple D3 scales to serializable scales
+ */
+export declare function convertScalesToSerializableScales(
+  xScale?: ChartScaleFunction,
+  yScales?: Map<string, ChartScaleFunction>,
+): {
+  xScale?: SerializableScale;
+  yScales: Record<string, SerializableScale>;
+};
+/**
+ * Serializable scale implementations based on D3 scale concepts.
+ * These scales can be used directly on the UI thread in Reanimated worklets.
+ */
+export type SerializableLinearScale = {
+  type: 'linear';
+  domain: [number, number];
+  range: [number, number];
+};
+export type SerializableLogScale = {
+  type: 'log';
+  domain: [number, number];
+  range: [number, number];
+  base?: number;
+};
+export type SerializableBandScale = {
+  type: 'band';
+  domain: [number, number];
+  range: [number, number];
+  bandwidth: number;
+  step: number;
+};
+export type SerializableScale =
+  | SerializableLinearScale
+  | SerializableLogScale
+  | SerializableBandScale;
+/**
+ * Serializable linear scale function
+ */
+export declare function applyLinearScale(value: number, scale: SerializableLinearScale): number;
+/**
+ * Serializable log scale function
+ */
+export declare function applyLogScale(value: number, scale: SerializableLogScale): number;
+/**
+ * Serializable band scale function
+ */
+export declare function applyBandScale(value: number, scale: SerializableBandScale): number;
+/**
+ * Universal serializable scale function that handles any scale type
+ */
+export declare function applySerializableScale(value: number, scale: SerializableScale): number;
+/**
+ * Get bandwidth for band scales (returns 0 for other scale types)
+ */
+export declare function getScaleBandwidth(scale: SerializableBandScale): number;
+/**
+ * Invert a linear scale - convert from range value back to domain value
+ */
+export declare function invertLinearScale(
+  rangeValue: number,
+  scale: SerializableLinearScale,
+): number;
+/**
+ * Invert a log scale - convert from range value back to domain value
+ */
+export declare function invertLogScale(rangeValue: number, scale: SerializableLogScale): number;
+/**
+ * Invert a band scale - convert from range value back to domain index
+ */
+export declare function invertBandScale(rangeValue: number, scale: SerializableBandScale): number;
+/**
+ * Universal serializable scale invert function that handles any scale type
+ */
+export declare function invertSerializableScale(
+  rangeValue: number,
+  scale: SerializableScale,
+): number;
+//# sourceMappingURL=scale.d.ts.map

package/dts/chart/utils/scale.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scale.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/scale.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,39 @@
+import type { Rect } from '@coinbase/cds-common/types';
+export type ScrubberLabelPosition = 'left' | 'right';
+export type LabelPosition = {
+  seriesId: string;
+  x: number;
+  y: number;
+};
+export type LabelDimensions = {
+  width: number;
+  height: number;
+};
+/**
+ * Determines which side (left/right) to place scrubber labels based on available space.
+ * Prefers right side, switches to left when labels would overflow.
+ */
+export declare const getLabelPosition: (
+  beaconX: number,
+  maxLabelWidth: number,
+  drawingArea: Rect,
+  xOffset?: number,
+) => ScrubberLabelPosition;
+type LabelDimension = {
+  seriesId: string;
+  width: number;
+  height: number;
+  preferredX: number;
+  preferredY: number;
+};
+/**
+ * Calculates Y positions for all labels avoiding overlaps while maintaining order.
+ */
+export declare const calculateLabelYPositions: (
+  dimensions: LabelDimension[],
+  drawingArea: Rect,
+  labelHeight: number,
+  minGap: number,
+) => Map<string, number>;
+export {};
+//# sourceMappingURL=scrubber.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scrubber.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/scrubber.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAEvD,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,OAAO,CAAC;AAErD,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAC3B,SAAS,MAAM,EACf,eAAe,MAAM,EACrB,aAAa,IAAI,EACjB,UAAS,MAAW,KACnB,qBAWF,CAAC;AAQF,KAAK,cAAc,GAAG;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB,GACnC,YAAY,cAAc,EAAE,EAC5B,aAAa,IAAI,EACjB,aAAa,MAAM,EACnB,QAAQ,MAAM,KACb,GAAG,CAAC,MAAM,EAAE,MAAM,CAsIpB,CAAC"}

package/dts/chart/utils/transition.d.ts

@@ -0,0 +1,140 @@
+import {
+  type ExtrapolationType,
+  type SharedValue,
+  type WithSpringConfig,
+  type WithTimingConfig,
+} from 'react-native-reanimated';
+import { type SkPath } from '@shopify/react-native-skia';
+/**
+ * Transition for animations.
+ * Supports timing and spring animation types.
+ * Used for paths, positions, opacity, and any other animated properties.
+ *
+ * @example
+ * // Spring animation
+ * { type: 'spring', damping: 10, stiffness: 100 }
+ *
+ * @example
+ * // Timing animation
+ * { type: 'timing', duration: 500, easing: Easing.inOut(Easing.ease) }
+ */
+export type Transition =
+  | ({
+      type: 'timing';
+    } & WithTimingConfig)
+  | ({
+      type: 'spring';
+    } & WithSpringConfig);
+/**
+ * Default transition configuration used across all chart components.
+ */
+export declare const defaultTransition: Transition;
+/**
+ * Duration in milliseconds for accessory elements to fade in.
+ */
+export declare const accessoryFadeTransitionDuration = 150;
+/**
+ * Delay in milliseconds before accessory elements fade in.
+ */
+export declare const accessoryFadeTransitionDelay = 350;
+/**
+ * Custom hook that uses d3-interpolate-path for more robust path interpolation.
+ * then use Skia's native interpolation in the worklet.
+ *
+ * @param progress - Shared value between 0 and 1
+ * @param fromPath - Starting path as SVG string
+ * @param toPath - Ending path as SVG string
+ * @returns Interpolated SkPath as a shared value
+ */
+export declare const useD3PathInterpolation: (
+  progress: SharedValue<number>,
+  fromPath: string,
+  toPath: string,
+) => SharedValue<SkPath>;
+/**
+ * @worklet
+ */
+type Interpolator<T> = (
+  value: number,
+  input: number[],
+  output: T[],
+  options: ExtrapolationType,
+  result: T,
+) => T;
+export declare const useInterpolator: <T>(
+  factory: () => T,
+  value: SharedValue<number>,
+  interpolator: Interpolator<T>,
+  input: number[],
+  output: T[],
+  options?: ExtrapolationType,
+) => SharedValue<T>;
+/**
+ * Builds a react-native-reanimated animation based on the configuration.
+ *
+ * @param targetValue - The target value to animate to
+ * @param config - The transition configuration
+ * @returns The animation value to assign to a shared value
+ *
+ * @example
+ * // Use directly for animation
+ * progress.value = 0;
+ * progress.value = buildTransition(1, { type: 'spring', damping: 10, stiffness: 100 });
+ *
+ * @example
+ * // Coordinate animations
+ * animatedX.value = buildTransition(100, { type: 'spring', damping: 10, stiffness: 100 });
+ * animatedY.value = buildTransition(200, { type: 'spring', damping: 10, stiffness: 100 });
+ *
+ * @example
+ * // Timing animation
+ * progress.value = buildTransition(1, { type: 'timing', duration: 500 });
+ */
+export declare const buildTransition: (targetValue: number, transition: Transition) => number;
+/**
+ * Hook for path animation state and transitions.
+ *
+ * @param currentPath - Current target path to animate to
+ * @param initialPath - Initial path for enter animation. When provided, the first animation will go from initialPath to currentPath.
+ * @param transition - Transition configuration
+ * @returns Animated SkPath as a shared value
+ *
+ * @example
+ * // Simple path transition
+ * const path = usePathTransition({
+ *   currentPath: d ?? '',
+ *   animate: shouldAnimate,
+ *   transition: { type: 'timing', duration: 3000 }
+ * });
+ *
+ * @example
+ * // Enter animation with different initial config (like DefaultBar)
+ * const path = usePathTransition({
+ *   currentPath: targetPath,
+ *   initialPath: baselinePath,
+ *   animate: true,
+ *   transition: { type: 'timing', duration: 300 }
+ * });
+ */
+export declare const usePathTransition: ({
+  currentPath,
+  initialPath,
+  transition,
+}: {
+  /**
+   * Current target path to animate to.
+   */
+  currentPath: string;
+  /**
+   * Initial path for enter animation.
+   * When provided, the first animation will go from initialPath to currentPath.
+   * If not provided, defaults to currentPath (no enter animation).
+   */
+  initialPath?: string;
+  /**
+   * Transition configuration
+   */
+  transition?: Transition;
+}) => SharedValue<SkPath>;
+export {};
+//# sourceMappingURL=transition.d.ts.map

package/dts/chart/utils/transition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transition.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/transition.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,WAAW,EAIhB,KAAK,gBAAgB,EAErB,KAAK,gBAAgB,EACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAsB,KAAK,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAG7E;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,UAAU,GAClB,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAAG,gBAAgB,CAAC,GACvC,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAAG,gBAAgB,CAAC,CAAC;AAE5C;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,UAI/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,+BAA+B,MAAM,CAAC;AAEnD;;GAEG;AACH,eAAO,MAAM,4BAA4B,MAAM,CAAC;AAEhD;;;;;;;;GAQG;AACH,eAAO,MAAM,sBAAsB,GACjC,UAAU,WAAW,CAAC,MAAM,CAAC,EAC7B,UAAU,MAAM,EAChB,QAAQ,MAAM,KACb,WAAW,CAAC,MAAM,CA2BpB,CAAC;AAGF;;GAEG;AACH,KAAK,YAAY,CAAC,CAAC,IAAI,CACrB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EAAE,EACf,MAAM,EAAE,CAAC,EAAE,EACX,OAAO,EAAE,iBAAiB,EAC1B,MAAM,EAAE,CAAC,KACN,CAAC,CAAC;AAEP,eAAO,MAAM,eAAe,GAAI,CAAC,EAC/B,SAAS,MAAM,CAAC,EAChB,OAAO,WAAW,CAAC,MAAM,CAAC,EAC1B,cAAc,YAAY,CAAC,CAAC,CAAC,EAC7B,OAAO,MAAM,EAAE,EACf,QAAQ,CAAC,EAAE,EACX,UAAU,iBAAiB,mBAc5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe,GAAI,aAAa,MAAM,EAAE,YAAY,UAAU,KAAG,MAc7E,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,iBAAiB,GAAI,2CAI/B;IACD;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,KAAG,WAAW,CAAC,MAAM,CAwBrB,CAAC"}

package/dts/index.d.ts

@@ -1,2 +1,3 @@
+export * from './chart';
 export * from './sparkline';
-//# sourceMappingURL=index.d.ts.map
+//# sourceMappingURL=index.d.ts.map

package/dts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC"}

package/dts/sparkline/Counter.d.ts

@@ -1,3 +1,8 @@
 import type { CounterBaseProps } from '@coinbase/cds-mobile/visualizations/Counter';
-export declare const Counter: ({ startNum, endNum, renderNum, durationInMillis }: CounterBaseProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Counter.d.ts.map
+export declare const Counter: ({
+  startNum,
+  endNum,
+  renderNum,
+  durationInMillis,
+}: CounterBaseProps) => import('react/jsx-runtime').JSX.Element;
+//# sourceMappingURL=Counter.d.ts.map

package/dts/sparkline/Sparkline.d.ts

@@ -1,22 +1,73 @@
 import React from 'react';
+import { Path } from 'react-native-svg';
 import type { ElementChildren, SharedProps } from '@coinbase/cds-common/types';
 import type { SparklineAreaBaseProps } from './SparklineArea';
+export type SparklineStrokeType = 'gradient' | 'solid';
+export type SparklineFillType = 'dotted' | 'gradient' | 'gradientDotted';
 export type SparklineBaseProps = SharedProps & {
-    /** @danger Use this only if the background color beneath the Sparkline is a non-CDS color. It ensures an accessible contrast by returning either white or black when color is set to 'auto'. Accepts any valid color format (hex, RGB, RGBA). */
-    background?: string;
-    /** The color of the Sparkline graph's line. Accepts any raw color value (hex, rgba, hsl, etc) or 'auto'. Using 'auto' dynamically selects black or white for optimal accessibility. Does not work with CDS theme color names like 'fgPrimary' or CSS variables.  */
-    color: string;
-    /** Height of the Sparkline */
-    height: number;
-    /** Svg path as string. CDS offers a `useSparklinePath` which is useful to generate this string. This is accessible via `import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath';`. Alternatively, you can use product tailored tooling to generate the SVG path. This component only requires a valid path string is provided. */
-    path?: string;
-    /** Width of the Sparkline */
-    width: number;
-    /** an optional SparklineArea that can be used to fill in the Sparkline */
-    children?: ElementChildren<SparklineAreaBaseProps>;
-    /** Scales the sparkline to show more or less variance. Use a number less than 1 for less variance and a number greater than 1 for more variance. If you use a number greater than 1 it may clip the boundaries of the sparkline. */
-    yAxisScalingFactor?: number;
+  /** @danger Use this only if the background color beneath the Sparkline is a non-CDS color. It ensures an accessible contrast by returning either white or black when color is set to 'auto'. Accepts any valid color format (hex, RGB, RGBA). */
+  background?: string;
+  /** The color of the Sparkline graph's line. Accepts any raw color value (hex, rgba, hsl, etc) or 'auto'. Using 'auto' dynamically selects black or white for optimal accessibility. Does not work with CDS theme color names like 'fgPrimary' or CSS variables.  */
+  color: string;
+  /** Height of the Sparkline */
+  height: number;
+  /** Svg path as string. CDS offers a `useSparklinePath` which is useful to generate this string. This is accessible via `import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath';`. Alternatively, you can use product tailored tooling to generate the SVG path. This component only requires a valid path string is provided. */
+  path?: string;
+  /** Width of the Sparkline */
+  width: number;
+  /** an optional SparklineArea that can be used to fill in the Sparkline */
+  children?: ElementChildren<SparklineAreaBaseProps>;
+  /** Scales the sparkline to show more or less variance. Use a number less than 1 for less variance and a number greater than 1 for more variance. If you use a number greater than 1 it may clip the boundaries of the sparkline. */
+  yAxisScalingFactor?: number;
+  /**
+   * Type of stroke to use for the line
+   * - 'gradient': Gradient colored stroke line
+   * - 'solid': Solid colored stroke line
+   *
+   * @default 'solid'
+   */
+  strokeType?: SparklineStrokeType;
+  /**
+   * Type of fill to use for the area
+   * @default 'dotted'
+   */
+  fillType?: SparklineFillType;
 };
 export type SparklineProps = SparklineBaseProps;
-export declare const Sparkline: React.MemoExoticComponent<({ background, color, height, path, width, yAxisScalingFactor, children }: SparklineProps) => import("react/jsx-runtime").JSX.Element>;
-//# sourceMappingURL=Sparkline.d.ts.map
+/**
+ * @deprecated Use LineChart instead.
+ */
+export declare const Sparkline: React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<
+    SharedProps & {
+      /** @danger Use this only if the background color beneath the Sparkline is a non-CDS color. It ensures an accessible contrast by returning either white or black when color is set to 'auto'. Accepts any valid color format (hex, RGB, RGBA). */
+      background?: string;
+      /** The color of the Sparkline graph's line. Accepts any raw color value (hex, rgba, hsl, etc) or 'auto'. Using 'auto' dynamically selects black or white for optimal accessibility. Does not work with CDS theme color names like 'fgPrimary' or CSS variables.  */
+      color: string;
+      /** Height of the Sparkline */
+      height: number;
+      /** Svg path as string. CDS offers a `useSparklinePath` which is useful to generate this string. This is accessible via `import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath';`. Alternatively, you can use product tailored tooling to generate the SVG path. This component only requires a valid path string is provided. */
+      path?: string;
+      /** Width of the Sparkline */
+      width: number;
+      /** an optional SparklineArea that can be used to fill in the Sparkline */
+      children?: ElementChildren<SparklineAreaBaseProps>;
+      /** Scales the sparkline to show more or less variance. Use a number less than 1 for less variance and a number greater than 1 for more variance. If you use a number greater than 1 it may clip the boundaries of the sparkline. */
+      yAxisScalingFactor?: number;
+      /**
+       * Type of stroke to use for the line
+       * - 'gradient': Gradient colored stroke line
+       * - 'solid': Solid colored stroke line
+       *
+       * @default 'solid'
+       */
+      strokeType?: SparklineStrokeType;
+      /**
+       * Type of fill to use for the area
+       * @default 'dotted'
+       */
+      fillType?: SparklineFillType;
+    } & React.RefAttributes<Path | null>
+  >
+>;
+//# sourceMappingURL=Sparkline.d.ts.map

package/dts/sparkline/Sparkline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sparkline.d.ts","sourceRoot":"","sources":["../../src/sparkline/Sparkline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAC;AAG5C,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAO/E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAG9D,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG;IAC7C,iPAAiP;IACjP,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oQAAoQ;IACpQ,KAAK,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,kWAAkW;IAClW,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,eAAe,CAAC,sBAAsB,CAAC,CAAC;IACnD,oOAAoO;IACpO,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAC;AAEhD,eAAO,MAAM,SAAS,uGACuD,cAAc,6CAmC1F,CAAC"}
+{"version":3,"file":"Sparkline.d.ts","sourceRoot":"","sources":["../../src/sparkline/Sparkline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AACjE,OAAO,EAAiC,IAAI,EAAmB,MAAM,kBAAkB,CAAC;AAGxF,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAQ/E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAG9D,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,OAAO,CAAC;AACvD,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,UAAU,GAAG,gBAAgB,CAAC;AAEzE,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG;IAC7C,iPAAiP;IACjP,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oQAAoQ;IACpQ,KAAK,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,kWAAkW;IAClW,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,eAAe,CAAC,sBAAsB,CAAC,CAAC;IACnD,oOAAoO;IACpO,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAC;AAEhD;;GAEG;AACH,eAAO,MAAM,SAAS;IAlCpB,iPAAiP;iBACpO,MAAM;IACnB,oQAAoQ;WAC7P,MAAM;IACb,8BAA8B;YACtB,MAAM;IACd,kWAAkW;WAC3V,MAAM;IACb,6BAA6B;WACtB,MAAM;IACb,0EAA0E;eAC/D,eAAe,CAAC,sBAAsB,CAAC;IAClD,oOAAoO;yBAC/M,MAAM;IAC3B;;;;;;OAMG;iBACU,mBAAmB;IAChC;;;OAGG;eACQ,iBAAiB;sCAiK7B,CAAC"}

package/dts/sparkline/SparklineArea.d.ts

@@ -1,8 +1,14 @@
 import React from 'react';
 import { Path } from 'react-native-svg';
 export type SparklineAreaBaseProps = {
-    area?: string;
-    patternId?: string;
+  area?: string;
+  patternId?: string;
+  maskId?: string;
 };
-export declare const SparklineArea: React.MemoExoticComponent<React.ForwardRefExoticComponent<SparklineAreaBaseProps & React.RefAttributes<Path | null>>>;
-//# sourceMappingURL=SparklineArea.d.ts.map
+/**
+ * @deprecated Use AreaChart instead.
+ */
+export declare const SparklineArea: React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<SparklineAreaBaseProps & React.RefAttributes<Path | null>>
+>;
+//# sourceMappingURL=SparklineArea.d.ts.map

package/dts/sparkline/SparklineArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SparklineArea.d.ts","sourceRoot":"","sources":["../../src/sparkline/SparklineArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,aAAa,uHAMzB,CAAC"}
+{"version":3,"file":"SparklineArea.d.ts","sourceRoot":"","sources":["../../src/sparkline/SparklineArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,uHAazB,CAAC"}

package/dts/sparkline/SparklineAreaPattern.d.ts

@@ -1,6 +1,14 @@
 export type SparklineAreaPatternBaseProps = {
-    color: string;
-    id: string;
+  color: string;
+  id: string;
+  /**
+   * Opacity for the pattern. If not provided, uses theme-based opacity from useSparklineAreaOpacity.
+   */
+  opacity?: number;
 };
-export declare const SparklineAreaPattern: ({ color, id }: SparklineAreaPatternBaseProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=SparklineAreaPattern.d.ts.map
+export declare const SparklineAreaPattern: ({
+  color,
+  id,
+  opacity,
+}: SparklineAreaPatternBaseProps) => import('react/jsx-runtime').JSX.Element;
+//# sourceMappingURL=SparklineAreaPattern.d.ts.map

package/dts/sparkline/SparklineAreaPattern.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SparklineAreaPattern.d.ts","sourceRoot":"","sources":["../../src/sparkline/SparklineAreaPattern.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,6BAA6B,GAAG;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,eAAe,6BAA6B,4CAWhF,CAAC"}
+{"version":3,"file":"SparklineAreaPattern.d.ts","sourceRoot":"","sources":["../../src/sparkline/SparklineAreaPattern.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,6BAA6B,GAAG;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,wBAAwB,6BAA6B,4CAazF,CAAC"}

package/dts/sparkline/SparklineGradient.d.ts

@@ -1,12 +1,23 @@
 import React from 'react';
 import { Path } from 'react-native-svg';
-export declare const SparklineGradient: React.MemoExoticComponent<React.ForwardRefExoticComponent<import("@coinbase/cds-common").SharedProps & {
-    background?: string;
-    color: string;
-    height: number;
-    path?: string;
-    width: number;
-    children?: import("@coinbase/cds-common").ElementChildren<import("./SparklineArea").SparklineAreaBaseProps>;
-    yAxisScalingFactor?: number;
-} & React.RefAttributes<Path | null>>>;
-//# sourceMappingURL=SparklineGradient.d.ts.map
+/**
+ * @deprecated Use LineChart instead.
+ */
+export declare const SparklineGradient: React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<
+    import('@coinbase/cds-common').SharedProps & {
+      background?: string;
+      color: string;
+      height: number;
+      path?: string;
+      width: number;
+      children?: import('@coinbase/cds-common').ElementChildren<
+        import('./SparklineArea').SparklineAreaBaseProps
+      >;
+      yAxisScalingFactor?: number;
+      strokeType?: import('./Sparkline').SparklineStrokeType;
+      fillType?: import('./Sparkline').SparklineFillType;
+    } & React.RefAttributes<Path | null>
+  >
+>;
+//# sourceMappingURL=SparklineGradient.d.ts.map

package/dts/sparkline/SparklineGradient.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SparklineGradient.d.ts","sourceRoot":"","sources":["../../src/sparkline/SparklineGradient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AACjE,OAAO,EAA2B,IAAI,EAAa,MAAM,kBAAkB,CAAC;AAY5E,eAAO,MAAM,iBAAiB;;;;;;;;sCAqD7B,CAAC"}
+{"version":3,"file":"SparklineGradient.d.ts","sourceRoot":"","sources":["../../src/sparkline/SparklineGradient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AACjE,OAAO,EAA2B,IAAI,EAAa,MAAM,kBAAkB,CAAC;AAY5E;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;sCAqD7B,CAAC"}

package/dts/sparkline/__figma__/Sparkline.figma.d.ts

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

package/dts/sparkline/generateSparklineWithId.d.ts

@@ -1,5 +1,11 @@
 import type React from 'react';
 import type { ElementChildren } from '@coinbase/cds-common/types';
 import type { SparklineAreaBaseProps } from './SparklineArea';
-export declare function generateSparklineAreaWithId(id: string, children: ElementChildren<SparklineAreaBaseProps>): React.ReactElement<SparklineAreaBaseProps, string | React.JSXElementConstructor<any>> | undefined;
-//# sourceMappingURL=generateSparklineWithId.d.ts.map
+export declare function generateSparklineAreaWithId(
+  id: string,
+  children: ElementChildren<SparklineAreaBaseProps>,
+  maskId?: string,
+):
+  | React.ReactElement<SparklineAreaBaseProps, string | React.JSXElementConstructor<any>>
+  | undefined;
+//# sourceMappingURL=generateSparklineWithId.d.ts.map

package/dts/sparkline/generateSparklineWithId.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generateSparklineWithId.d.ts","sourceRoot":"","sources":["../../src/sparkline/generateSparklineWithId.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAE9D,wBAAgB,2BAA2B,CACzC,EAAE,EAAE,MAAM,EACV,QAAQ,EAAE,eAAe,CAAC,sBAAsB,CAAC,qGAOlD"}
+{"version":3,"file":"generateSparklineWithId.d.ts","sourceRoot":"","sources":["../../src/sparkline/generateSparklineWithId.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAE9D,wBAAgB,2BAA2B,CACzC,EAAE,EAAE,MAAM,EACV,QAAQ,EAAE,eAAe,CAAC,sBAAsB,CAAC,EACjD,MAAM,CAAC,EAAE,MAAM,qGAQhB"}

package/dts/sparkline/index.d.ts

@@ -3,4 +3,4 @@ export * from './sparkline-interactive/SparklineInteractive';
 export * from './sparkline-interactive-header/SparklineInteractiveHeader';
 export * from './SparklineArea';
 export * from './SparklineGradient';
-//# sourceMappingURL=index.d.ts.map
+//# sourceMappingURL=index.d.ts.map

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { SparklineInteractiveBaseProps } from './SparklineInteractive';
 type SparklineAccessibleViewProps<Period extends string> = {
-    selectedPeriod: Period;
+  selectedPeriod: Period;
 } & Pick<SparklineInteractiveBaseProps<Period>, 'data'>;
 /**
  * SparklineAccessibleView renders an accessible view for Sparkline Chart.
@@ -13,6 +13,11 @@ type SparklineAccessibleViewProps<Period extends string> = {
  * @param data - The sparkline data mapped by time period
  * @param selectedPeriod - The currently selected time period
  */
-export declare const SparklineAccessibleView: React.MemoExoticComponent<(<Period extends string>({ data, selectedPeriod }: SparklineAccessibleViewProps<Period>) => import("react/jsx-runtime").JSX.Element)>;
+export declare const SparklineAccessibleView: React.MemoExoticComponent<
+  <Period extends string>({
+    data,
+    selectedPeriod,
+  }: SparklineAccessibleViewProps<Period>) => import('react/jsx-runtime').JSX.Element
+>;
 export {};
-//# sourceMappingURL=SparklineAccessibleView.d.ts.map
+//# sourceMappingURL=SparklineAccessibleView.d.ts.map