import React from 'react';
import { Animated } from 'react-native';
import type { StyleProp, ViewStyle } from 'react-native';
import type { ThemeVars } from '@coinbase/cds-common/core/theme';
import type { InputVariant } from '@coinbase/cds-common/types/InputBaseProps';
import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
import type { BoxBaseProps, BoxProps } from '../layout/Box';
export type InputStackBaseProps = SharedProps & {
  /**
   * Determines the sentiment of the input. Because
   * we allow startContent and endContent to be custom ReactNode,
   * the content placed inside these slots will not change colors according
   * to the variant. You will have to add that yourself
   */
  variant?: InputVariant;
  /**
   * Width of input as a percentage string.
   * @default 100%
   * */
  width?: BoxProps['width'];
  /**
   * Height of input
   */
  height?: BoxBaseProps['height'];
  /**
   * Toggles input interactability and opacity
   * @default false
   */
  disabled?: boolean;
  /**
   * Width of the border.
   * @default 100
   */
  borderWidth?: ThemeVars.BorderWidth;
  /**
   * Additional border width when focused.
   * @default borderWidth
   */
  focusedBorderWidth?: ThemeVars.BorderWidth;
  /** Prepends custom content to the start. Content is not part of input */
  prependNode?: React.ReactNode;
  /** Adds content to the start of the inner input. Refer to diagram for location of startNode in InputStack component */
  startNode?: React.ReactNode;
  /** Appends custom content to the end. Content is not part of input */
  appendNode?: React.ReactNode;
  /** Adds content to the end of the inner input. Refer to diagram for location of endNode in InputStack component */
  endNode?: React.ReactNode;
  /** Editable area of the Input */
  inputNode: React.ReactNode;
  /** Text shown below input. Used for when label is not enough to indicate what this input does */
  helperTextNode?: React.ReactNode;
  /** A message indicating the purpose of this input */
  labelNode?: React.ReactNode;
  /** This should only be used when focused styles need to be persisted */
  focused?: boolean;
  /**
   * Leverage one of the borderRadius styles we offer to round the corners of the input.
   * @default 200
   */
  borderRadius?: BoxProps['borderRadius'];
  /**
   * Enable Color Surge motion
   */
  enableColorSurge?: boolean;
  /** Adds border styling to input  */
  borderStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
  /** Border overlay to animate border when focused */
  borderFocusedStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
  /**
   * The variant of the label. Only used when compact is not true.
   * @default 'outside'
   */
  labelVariant?: 'inside' | 'outside';
  /**
   * Background color of the input
   * @default 'bg'
   */
  inputBackground?: ThemeVars.Color;
};
export type InputStackProps = Omit<BoxProps, 'width' | 'height' | 'borderRadius'> &
  InputStackBaseProps & {
    styles?: {
      /** Root container element */
      root?: StyleProp<ViewStyle>;
      /** Input horizontal container element */
      inputContainer?: StyleProp<ViewStyle>;
      /** Input area element */
      input?: StyleProp<ViewStyle>;
    };
  };
export declare const InputStack: React.NamedExoticComponent<InputStackProps>;
//# sourceMappingURL=InputStack.d.ts.map