import {
  type StyleProp,
  type TextStyle,
  type View,
  type ViewProps,
  type ViewStyle,
} from 'react-native';
import { type AnimatedStyle } from 'react-native-reanimated';
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 HStackProps } from '../../layout/HStack';
import type { Transition } from '../../motion/types';
import { Text, type TextBaseProps, type TextProps } from '../../typography/Text';
export declare const digits: number[];
/**
 * Defines transition overrides for RollingNumber animations.
 */
export type RollingNumberTransitionConfig = {
  /**
   * Transition override for the vertical translation animation (digit roll).
   */
  y?: Transition;
  /**
   * Transition override for the opacity animation during digit transitions.
   * Controls how digits fade in/out during the single variant animation.
   */
  opacity?: Transition;
  /**
   * Transition override for the color interpolation animation (color pulse).
   */
  color?: Transition;
};
export declare const defaultTransitionConfig: RollingNumberTransitionConfig;
/**
 * 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 type RollingNumberMaskProps = HStackProps & {
  /**
   * Content rendered inside the mask container.
   */
  children?: React.ReactNode;
  /**
   * Ref forwarded to the mask view element.
   */
  ref?: React.Ref<View>;
};
export type RollingNumberAffixSectionProps = HStackProps & {
  /**
   * Content rendered inside the affix section.
   */
  children?: React.ReactNode;
  /**
   * Text props forwarded to the Text components rendered inside the section.
   */
  textProps?: TextProps;
  styles?: {
    /** Affix section container element */
    root?: StyleProp<ViewStyle>;
    /** Text element within the affix section */
    text?:
      | AnimatedStyle<TextStyle>
      | StyleProp<TextStyle>
      | (AnimatedStyle<TextStyle> | StyleProp<TextStyle>)[];
  };
  /**
   * Ref forwarded to the affix section view element.
   */
  ref?: React.Ref<View>;
};
export type RollingNumberValueSectionProps = HStackProps & {
  /**
   * Parts from Intl.NumberFormat used to render digits and symbols.
   */
  intlNumberParts: KeyedNumberPart[];
  /**
   * Height of a single digit row used to size the animated mask.
   */
  digitHeight?: number;
  /**
   * Component used to render digit columns.
   */
  RollingNumberDigitComponent?: RollingNumberDigitComponent;
  /**
   * Component used to render symbols and literals.
   */
  RollingNumberSymbolComponent?: RollingNumberSymbolComponent;
  /**
   * Component used to mask the value section.
   */
  RollingNumberMaskComponent?: RollingNumberMaskComponent;
  /**
   * Preformatted value 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;
  /**
   * Text props forwarded to Text children within the section.
   */
  textProps?: TextProps;
  styles?: {
    /** Value section container element */
    root?: StyleProp<ViewStyle>;
    /** Text element within the value section */
    text?:
      | AnimatedStyle<TextStyle>
      | StyleProp<TextStyle>
      | (AnimatedStyle<TextStyle> | StyleProp<TextStyle>)[];
  };
  /**
   * Ref forwarded to the value section view element.
   */
  ref?: React.Ref<View>;
};
export type RollingNumberDigitProps = ViewProps & {
  /**
   * Digit currently displayed in the rotating 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;
  /**
   * Height of the digit column used to compute translations.
   */
  digitHeight: number;
  /**
   * Text props forwarded to the Text elements rendering digits.
   */
  textProps?: TextProps;
  styles?: {
    /** Digit container element */
    root?: StyleProp<ViewStyle>;
    /** Digit text element */
    text?:
      | AnimatedStyle<TextStyle>
      | StyleProp<TextStyle>
      | (AnimatedStyle<TextStyle> | StyleProp<TextStyle>)[];
  };
  /**
   * Ref forwarded to the digit container view element.
   */
  ref?: React.Ref<View>;
};
export type RollingNumberSymbolProps = HStackProps & {
  /**
   * Literal symbol rendered within the formatted value.
   */
  value: string;
  /**
   * Text props forwarded to the Text components rendering the symbol.
   */
  textProps?: TextProps;
  styles?: {
    /** Symbol container element */
    root?: StyleProp<ViewStyle>;
    /** Symbol text element */
    text?:
      | AnimatedStyle<TextStyle>
      | StyleProp<TextStyle>
      | (AnimatedStyle<TextStyle> | StyleProp<TextStyle>)[];
  };
  /**
   * Ref forwarded to the symbol container view element.
   */
  ref?: React.Ref<View>;
};
export type RollingNumberMaskComponent = React.FC<RollingNumberMaskProps>;
export type RollingNumberAffixSectionComponent = React.FC<RollingNumberAffixSectionProps>;
export type RollingNumberValueSectionComponent = React.FC<RollingNumberValueSectionProps>;
export type RollingNumberDigitComponent = React.FC<RollingNumberDigitProps>;
export type RollingNumberSymbolComponent = React.FC<RollingNumberSymbolProps>;
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.
     *
     * Only CDS design token colors are accepted here. To apply a non-token color (e.g. a hex string),
     * use `styles={{ text: { color: '#FF0000' } }}` instead.
     * @default 'fg'
     */
    color?: ThemeVars.Color;
    /**
     * Enables color pulsing on positive or negative changes. Overriding the default color using
     * `styles.text` nullifies the effect.
     */
    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;
    /**
     * Reanimated 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;
    /**
     * accessibilityLiveRegion value used for screen readers on Android.
     * @default 'polite'
     */
    accessibilityLiveRegion?: React.ComponentProps<typeof Text>['accessibilityLiveRegion'];
    /**
     * Enables tabular figures on the underlying {@link Text}. All digits render with equal width.
     * @default true
     */
    tabularNumbers?: boolean;
  };
export type RollingNumberProps = TextProps &
  RollingNumberBaseProps & {
    /** Custom styles for individual elements of the RollingNumber component */
    styles?: {
      /** Outer container element. */
      root?: StyleProp<ViewStyle>;
      /** Wrapper around the visible number (prefix, value, and suffix). */
      visibleContent?: StyleProp<ViewStyle>;
      /** Wrapper around the formatted numeric value (the four i18n sections). */
      formattedValueSection?: StyleProp<ViewStyle>;
      /** Container for the `prefix` prop content. */
      prefix?: StyleProp<ViewStyle>;
      /** Container for the `suffix` prop content. */
      suffix?: StyleProp<ViewStyle>;
      /** Container for the Intl.NumberFormat-generated prefix (e.g. "$" in "$1,000"). */
      i18nPrefix?: StyleProp<ViewStyle>;
      /** Container for the Intl.NumberFormat-generated suffix (e.g. "K" in "100K"). */
      i18nSuffix?: StyleProp<ViewStyle>;
      /** Container for the integer portion of the value. */
      integer?: StyleProp<ViewStyle>;
      /** Container for the fractional portion of the value. */
      fraction?: StyleProp<ViewStyle>;
      /**
       * Style applied to every text element — digits, symbols, prefix text, and suffix text. Set
       * `color` here to apply a custom (non-token) text color.
       */
      text?: StyleProp<TextStyle>;
    };
  };
export declare const RollingNumber: import('react').MemoExoticComponent<
  ({
    ref,
    ..._props
  }: RollingNumberProps & {
    ref?: React.Ref<View>;
  }) => import('react/jsx-runtime').JSX.Element
>;
//# sourceMappingURL=RollingNumber.d.ts.map