import * as React from "react";
export type ShuttleControlsProps = {
  children?: (args: {
    setShuttleState: (e?: React.SyntheticEvent<HTMLDivElement>) => void,
    getButtonProps: (
      button: $Values<typeof CONTROL_BUTTONS>,
      size?: number
    ) => { [key: string]: string, ... },
    moveAllFromSource: () => void,
    moveAllFromTarget: () => void,
    moveSelectedFromSource: () => void,
    moveSelectedFromTarget: () => void,
    ...
  }) => React.Node,
  className?: string,
  ...
};
declare export var CONTROL_BUTTONS: {|
  +MOVE_ALL_TARGET: "MOVE_ALL_TARGET", // "MOVE_ALL_TARGET"
  +MOVE_SELECTED_TARGET: "MOVE_SELECTED_TARGET", // "MOVE_SELECTED_TARGET"
  +MOVE_SELECTED_SOURCE: "MOVE_SELECTED_SOURCE", // "MOVE_SELECTED_SOURCE"
  +MOVE_ALL_SOURCE: "MOVE_ALL_SOURCE" // "MOVE_ALL_SOURCE"
|};

/**
 * ShuttleControls. Provide your own render function
 * to customize the buttons. The Shuttle `dispatch` method
 * is provided or you can use your own state reducer
 * as needed.
 * @example // Custom render controls
 * <Shuttle.Controls render={setShuttleState => (
 *      <CustomButton onClick={() => setShuttleState({ type: 'MOVE_ALL' })} />
 * )} />
 */
declare export var ShuttleControls: React.FC<ShuttleControlsProps>;