import React from 'react';
import type {
  DotCountPinPlacement,
  DotCountVariants,
  DotOverlap,
  SharedAccessibilityProps,
  SharedProps,
} from '@coinbase/cds-common/types';
export type DotCountBaseProps = SharedProps &
  Pick<
    SharedAccessibilityProps,
    'accessibilityLabel' | 'accessibilityLabelledBy' | 'accessibilityHint'
  > & {
    /**
     * The number value to be shown in the dot. If count is <= 0, dot will not show up.
     *  */
    count: number;
    /**
     * If a badge count is greater than max, it will truncate the numbers so its max+
     * @default 99
     *  */
    max?: number;
    /**
     * Background color of dot
     * @default negative
     * */
    variant?: DotCountVariants;
    /** Position of dot relative to its parent */
    pin?: DotCountPinPlacement;
    /** Children of where the dot will anchor to */
    children?: React.ReactNode;
    /** Indicates what shape Dot is overlapping */
    overlap?: DotOverlap;
  };
export type DotCountProps = DotCountBaseProps & {
  className?: string;
  style?: React.CSSProperties;
  /** Custom class names for individual elements of the DotCount component */
  classNames?: {
    /** Root element */
    root?: string;
    /** Container element */
    container?: string;
    /** Text element */
    text?: string;
  };
  /** Custom styles for individual elements of the DotCount component */
  styles?: {
    /** Root element */
    root?: React.CSSProperties;
    /** Container element */
    container?: React.CSSProperties;
    /** Text element */
    text?: React.CSSProperties;
  };
};
export declare const DotCount: React.MemoExoticComponent<
  (_props: DotCountProps) => import('react/jsx-runtime').JSX.Element
>;
//# sourceMappingURL=DotCount.d.ts.map