import React from 'react';
import { Path } from 'react-native-svg';
import type { ElementChildren } from '@coinbase/cds-common/types/React';
import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
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;
  /**
   * 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;
/**
 * @deprecated Use LineChart instead. This will be removed in a future major release.
 * @deprecationExpectedRemoval v4
 */
export declare const Sparkline: React.MemoExoticComponent<
  ({
    ref,
    background,
    color,
    height,
    path,
    width,
    yAxisScalingFactor,
    children,
    strokeType,
    fillType,
  }: SparklineProps & {
    ref?: React.Ref<Path | null>;
  }) => import('react/jsx-runtime').JSX.Element
>;
//# sourceMappingURL=Sparkline.d.ts.map