import type { ThemeVars } from '@coinbase/cds-common/core/theme';
import { type KeyedNumberPart } from '@coinbase/cds-common/numbers/IntlNumberFormat';
import { type SingleDirection } from '@coinbase/cds-common/numbers/useValueChangeDirection';
import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
import { type Transition } from 'framer-motion';
import type { Polymorphic } from '../../core/polymorphism';
import { type TextBaseProps, type TextDefaultElement, type TextProps } from '../../typography/Text';
/**
 * Defines transition overrides for RollingNumber animations.
 */
type RollingNumberTransitionConfig = {
  /**
   * Transition applied to the vertical translation animation (digit roll).
   */
  y?: Transition;
  /**
   * Transition applied to the opacity animation during digit transitions.
   * Controls how digits fade in/out during the single variant animation.
   */
  opacity?: Transition;
  /**
   * Transition applied to the color interpolation animation (color pulse).
   */
  color?: Transition;
};
/**
 * Defines the style of digit transition animation.
 * - `'every'`: Rolls through every intermediate digit (e.g., 1→2→3→...→9). Default behavior.
 * - `'single'`: Rolls directly to the new digit without showing intermediates (e.g., 1→9).
 */
export type DigitTransitionVariant = 'every' | 'single';
export declare const defaultTransitionConfig: {
  readonly y: {
    readonly type: 'spring';
    readonly stiffness: 280;
    readonly damping: 18;
    readonly mass: 0.3;
  };
  readonly opacity: {
    readonly duration: number;
    readonly ease: import('@coinbase/cds-common/motion/tokens').EasingArray;
  };
  readonly color: {
    readonly duration: number;
    readonly ease: import('@coinbase/cds-common/motion/tokens').EasingArray;
  };
};
export type RollingNumberMaskProps = TextProps<TextDefaultElement> & {
  /**
   * Content rendered inside the mask container.
   */
  children?: React.ReactNode;
  /**
   * Ref forwarded to the mask element.
   */
  ref?: React.Ref<HTMLSpanElement>;
};
export type RollingNumberAffixSectionProps = TextProps<TextDefaultElement> & {
  /**
   * Content rendered inside the affix section.
   */
  children?: React.ReactNode;
  /**
   * Ref forwarded to the affix section wrapper element.
   */
  ref?: React.Ref<HTMLSpanElement>;
  styles?: {
    /** Affix section container element */
    root?: React.CSSProperties;
    /** Text element within the section */
    text?: React.CSSProperties;
  };
  classNames?: {
    /** Affix section container element */
    root?: string;
    /** Text element within the section */
    text?: string;
  };
};
export type RollingNumberValueSectionProps = TextProps<TextDefaultElement> & {
  /**
   * Parts provided by Intl.NumberFormat used to render the formatted value.
   */
  intlNumberParts: KeyedNumberPart[];
  /**
   * Component used to render numeric digits within the section.
   */
  RollingNumberDigitComponent?: RollingNumberDigitComponent;
  /**
   * Component used to render non-digit symbols within the section.
   */
  RollingNumberSymbolComponent?: RollingNumberSymbolComponent;
  /**
   * Component used to mask and animate digit transitions.
   */
  RollingNumberMaskComponent?: RollingNumberMaskComponent;
  /**
   * Preformatted string rendered instead of intlNumberParts when provided.
   */
  formattedValue?: string;
  /**
   * Transition overrides applied to digit and symbol animations.
   */
  transitionConfig?: RollingNumberTransitionConfig;
  /**
   * Style of digit transition animation.
   * @default 'every'
   */
  digitTransitionVariant?: DigitTransitionVariant;
  /**
   * Direction of the roll animation. Only used when {@link digitTransitionVariant} is `'single'`.
   */
  direction?: SingleDirection;
  styles?: {
    /** Value section container element */
    root?: React.CSSProperties;
    /** Text element within the section */
    text?: React.CSSProperties;
  };
  classNames?: {
    /** Value section container element */
    root?: string;
    /** Text element within the section */
    text?: string;
  };
  /**
   * Ref forwarded to the section container element.
   */
  ref?: React.Ref<HTMLSpanElement>;
};
export type RollingNumberDigitProps = TextProps<TextDefaultElement> & {
  /**
   * Digit currently displayed in the animated column.
   */
  value: number;
  /**
   * Digit displayed during the initial render.
   */
  initialValue?: number;
  /**
   * Transition overrides applied to the digit animation.
   */
  transitionConfig?: RollingNumberTransitionConfig;
  /**
   * Component used to mask the digit column.
   */
  RollingNumberMaskComponent?: RollingNumberMaskComponent;
  /**
   * Style of digit transition animation.
   * @default 'every'
   */
  digitTransitionVariant?: DigitTransitionVariant;
  /**
   * Direction of the roll animation. Only used when {@link digitTransitionVariant} is `'single'`.
   */
  direction?: SingleDirection;
  styles?: {
    /** Digit container element */
    root?: React.CSSProperties;
    /** Digit text element */
    text?: React.CSSProperties;
  };
  classNames?: {
    /** Digit container element */
    root?: string;
    /** Digit text element */
    text?: string;
  };
  /**
   * Ref forwarded to the digit container element.
   */
  ref?: React.Ref<HTMLSpanElement>;
};
export type RollingNumberSymbolProps = TextProps<TextDefaultElement> & {
  /**
   * Literal symbol rendered within the number stream.
   */
  value: string;
  styles?: {
    /** Symbol container element */
    root?: React.CSSProperties;
    /** Symbol text element */
    text?: React.CSSProperties;
  };
  classNames?: {
    /** Symbol container element */
    root?: string;
    /** Symbol text element */
    text?: string;
  };
  /**
   * Ref forwarded to the symbol container element.
   */
  ref?: React.Ref<HTMLSpanElement>;
};
export type RollingNumberMaskComponent = React.FC<RollingNumberMaskProps>;
export type RollingNumberAffixSectionComponent = React.FC<RollingNumberAffixSectionProps>;
export type RollingNumberDigitComponent = React.FC<RollingNumberDigitProps>;
export type RollingNumberSymbolComponent = React.FC<RollingNumberSymbolProps>;
export type RollingNumberValueSectionComponent = React.FC<RollingNumberValueSectionProps>;
export type RollingNumberBaseProps = SharedProps &
  TextBaseProps & {
    /**
     * Number to display.
     */
    value: number;
    /**
     * Intl.NumberFormat options applied when formatting the value. Scientific and engineering notation are not supported.
     */
    format?: Omit<Intl.NumberFormatOptions, 'notation'> & {
      notation?: Extract<Intl.NumberFormatOptions['notation'], 'standard' | 'compact'>;
    };
    /**
     * Preformatted value rendered instead of formatting {@link value}. {@link value} is still used to determine numeric deltas.
     */
    formattedValue?: string;
    /**
     * Content rendered before the formatted value.
     */
    prefix?: React.ReactNode;
    /**
     * Content rendered after the formatted value.
     */
    suffix?: React.ReactNode;
    /**
     * Component used to render the mask container.
     */
    RollingNumberMaskComponent?: RollingNumberMaskComponent;
    /**
     * Component used to render prefix and suffix sections.
     */
    RollingNumberAffixSectionComponent?: RollingNumberAffixSectionComponent;
    /**
     * Component used to render the numeric sections.
     */
    RollingNumberValueSectionComponent?: RollingNumberValueSectionComponent;
    /**
     * Component used to render individual digits.
     */
    RollingNumberDigitComponent?: RollingNumberDigitComponent;
    /**
     * Component used to render separators and other symbols.
     */
    RollingNumberSymbolComponent?: RollingNumberSymbolComponent;
    /**
     * Locale used for formatting. Defaults to the locale from {@link LocaleProvider}.
     */
    locale?: Intl.LocalesArgument;
    /**
     * Base text color token. When {@link colorPulseOnUpdate} is true, the color briefly pulses to a positive or negative mid color before returning to this base color.
     * @default 'fg'
     */
    color?: ThemeVars.Color;
    /**
     * Enables color pulsing on positive or negative changes.
     */
    colorPulseOnUpdate?: boolean;
    /**
     * Color token used for positive numeric changes.
     * @default 'fgPositive'
     */
    positivePulseColor?: ThemeVars.Color;
    /**
     * Color token used for negative numeric changes.
     * @default 'fgNegative'
     */
    negativePulseColor?: ThemeVars.Color;
    /**
     * Enables subscript notation for leading zeros in the fractional part (for example, {@code 0.00009 => 0.0₄9}).
     */
    enableSubscriptNotation?: boolean;
    /**
     * Framer Motion transition overrides. Supports per-property overrides for {@code y} and {@code color} only.
     */
    transition?: RollingNumberTransitionConfig;
    /**
     * Style of digit transition animation.
     * - `'every'`: Rolls through every intermediate digit (e.g., 1→2→3→...→9).
     * - `'single'`: Rolls directly to the new digit without showing intermediates (e.g., 1→9).
     * @default 'every'
     */
    digitTransitionVariant?: DigitTransitionVariant;
    /**
     * Accessibility label prefix announced before the value.
     */
    accessibilityLabelPrefix?: string;
    /**
     * Accessibility label suffix announced after the value.
     */
    accessibilityLabelSuffix?: string;
    /**
     * aria-live politeness level.
     * @default 'polite'
     */
    ariaLive?: React.AriaAttributes['aria-live'];
    /**
     * Enables tabular figures on the underlying {@link Text}.
     * @default true
     */
    tabularNumbers?: boolean;
  };
export type RollingNumberProps<AsComponent extends React.ElementType> = Polymorphic.Props<
  AsComponent,
  RollingNumberBaseProps & {
    /** Custom class names for individual elements of the RollingNumber component */
    classNames?: {
      /** Outer container element */
      root?: string;
      /** Animated visible content wrapper */
      visibleContent?: string;
      /** Formatted numeric value wrapper */
      formattedValueSection?: string;
      /** Prefix section (from props) */
      prefix?: string;
      /** Suffix section (from props) */
      suffix?: string;
      /** Prefix from Intl.NumberFormat (e.g. "$" in "$1,000") */
      i18nPrefix?: string;
      /** Suffix from Intl.NumberFormat (e.g. "K" in "100K") */
      i18nSuffix?: string;
      /** Integer portion of formatted value */
      integer?: string;
      /** Fractional portion of formatted value */
      fraction?: string;
      /** Text element for digits and symbols */
      text?: string;
    };
    /** Custom styles for individual elements of the RollingNumber component */
    styles?: {
      /** Outer container element */
      root?: React.CSSProperties;
      /** Animated visible content wrapper */
      visibleContent?: React.CSSProperties;
      /** Formatted numeric value wrapper */
      formattedValueSection?: React.CSSProperties;
      /** Prefix section (from props) */
      prefix?: React.CSSProperties;
      /** Suffix section (from props) */
      suffix?: React.CSSProperties;
      /** Prefix from Intl.NumberFormat (e.g. "$" in "$1,000") */
      i18nPrefix?: React.CSSProperties;
      /** Suffix from Intl.NumberFormat (e.g. "K" in "100K") */
      i18nSuffix?: React.CSSProperties;
      /** Integer portion of formatted value */
      integer?: React.CSSProperties;
      /** Fractional portion of formatted value */
      fraction?: React.CSSProperties;
      /** Text element for digits and symbols */
      text?: React.CSSProperties;
    };
  }
>;
export declare const rollingNumberDefaultElement = 'span';
export type RollingNumberDefaultElement = typeof rollingNumberDefaultElement;
type RollingNumberComponent = (<
  AsComponent extends React.ElementType = RollingNumberDefaultElement,
>(
  props: RollingNumberProps<AsComponent>,
) => Polymorphic.ReactReturn) &
  Polymorphic.ReactNamed;
export declare const RollingNumber: RollingNumberComponent;
export {};
//# sourceMappingURL=RollingNumber.d.ts.map