import React from 'react';
import type { IconName } from '@coinbase/cds-common/types';
import { type TextInputBaseProps, type TextInputProps } from './TextInput';
export declare const scales: {
  regular: number;
  compact: number;
};
export type SearchInputBaseProps = Pick<
  TextInputBaseProps,
  | 'accessibilityHint'
  | 'accessibilityLabel'
  | 'accessibilityLabelledBy'
  | 'bordered'
  | 'borderRadius'
  | 'compact'
  | 'disabled'
  | 'enableColorSurge'
  | 'focusedBorderWidth'
  | 'helperTextErrorIconAccessibilityLabel'
  | 'font'
  | 'placeholder'
  | 'testID'
  | 'testIDMap'
  | 'width'
> & {
  /**
   * Callback is fired when a user hits enter on the keyboard. Can obtain the query
   * through str parameter
   */
  onSearch?: (str: string) => void;
  /**
   * hide the start icon
   * @default false
   */
  hideStartIcon?: boolean;
  /**
   * Set the start icon. You can only
   * set it to search | backArrow icon. If
   * you set this, the icon would not toggle
   * between search and backArrow depending on
   * the focus state
   * @default search
   */
  startIcon?: Extract<IconName, 'search' | 'backArrow'>;
  /**
   * hide the end icon
   */
  hideEndIcon?: boolean;
  /**
   * Set the end node
   */
  end?: React.ReactNode;
  /**
   * Set the a11y label for the clear icon
   */
  clearIconAccessibilityLabel?: string | undefined;
  /**
   * Set the a11y label for the start icon
   */
  startIconAccessibilityLabel?: string | undefined;
};
export type SearchInputProps = SearchInputBaseProps &
  TextInputProps & {
    onClear?: React.MouseEventHandler;
    onChangeText: (text: string) => void;
    /**
     * Callback fired when pressed/clicked
     */
    onClick?: React.MouseEventHandler;
  };
export declare const SearchInput: React.MemoExoticComponent<
  React.ForwardRefExoticComponent<
    Omit<SearchInputProps, 'ref'> & React.RefAttributes<HTMLInputElement>
  >
>;
//# sourceMappingURL=SearchInput.d.ts.map