import React from 'react';
import { type View } from 'react-native';
import type { ButtonVariant } from '@coinbase/cds-common/types/ButtonBaseProps';
import type { IconName } from '@coinbase/cds-common/types/IconName';
import type { SharedAccessibilityProps } from '@coinbase/cds-common/types/SharedAccessibilityProps';
import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
import { type PressableBaseProps } from '../system/Pressable';
export declare const styles: {
  inline: {
    width: 'auto';
  };
  block: {
    width: '100%';
    maxWidth: '100%';
  };
  text: {
    flexShrink: number;
  };
  icon: {
    flexShrink: number;
  };
};
export type ButtonBaseProps = SharedProps &
  Pick<SharedAccessibilityProps, 'accessibilityLabel'> &
  PressableBaseProps & {
    /**
     * Toggle design and visual variants.
     * @default primary
     */
    variant?: ButtonVariant;
    /** Mark the button as disabled. */
    disabled?: boolean;
    /** Mark the button as loading and display a spinner. */
    loading?: boolean;
    /** Size of the loading progress circle in px.
     * @default 24
     */
    progressCircleSize?: number;
    /** Mark the background and border as transparent until interacted with. */
    transparent?: boolean;
    /** Change to block and expand to 100% of parent width. */
    block?: boolean;
    /** Reduce the inner padding within the button itself. */
    compact?: boolean;
    /** Children to render within the button. */
    children: React.ReactNode;
    /** Set the start node */
    start?: React.ReactNode;
    /** Icon to render at the start of the button. */
    startIcon?: IconName;
    /** Whether the start icon is active */
    startIconActive?: boolean;
    /** Set the end node */
    end?: React.ReactNode;
    /** Icon to render at the end of the button. */
    endIcon?: IconName;
    /** Whether the end icon is active */
    endIconActive?: boolean;
    /** Ensure the button aligns flush on the left or right.
     * This prop will translate the entire button left/right,
     * so take care to ensure it is not overflowing awkwardly
     */
    flush?: 'start' | 'end';
    /** Uniquely identify the button within a form. */
    name?: string;
    /** Don't scale element on press. */
    noScaleOnPress?: boolean;
    /**
     * Truncates text after wrapping to a defined number of lines.
     * @default 1
     */
    numberOfLines?: number;
  };
export type ButtonProps = ButtonBaseProps;
export declare const Button: React.NamedExoticComponent<
  SharedProps &
    Pick<SharedAccessibilityProps, 'accessibilityLabel'> &
    import('react-native').AccessibilityProps &
    import('@coinbase/cds-common').ComponentEventHandlerProps &
    Pick<import('react-native').PressableProps, 'style' | 'hitSlop' | 'onPress'> &
    Omit<import('../system').InteractableBaseProps, 'style' | 'pressed'> & {
      noScaleOnPress?: boolean;
      onPressIn?: (event: import('react-native').GestureResponderEvent) => void;
      onPressOut?: (event: import('react-native').GestureResponderEvent) => void;
      feedback?: import('../system').HapticFeedbackType;
      loading?: boolean;
      debounceTime?: number;
      disableDebounce?: boolean;
    } & {
      /**
       * Toggle design and visual variants.
       * @default primary
       */
      variant?: ButtonVariant;
      /** Mark the button as disabled. */
      disabled?: boolean;
      /** Mark the button as loading and display a spinner. */
      loading?: boolean;
      /** Size of the loading progress circle in px.
       * @default 24
       */
      progressCircleSize?: number;
      /** Mark the background and border as transparent until interacted with. */
      transparent?: boolean;
      /** Change to block and expand to 100% of parent width. */
      block?: boolean;
      /** Reduce the inner padding within the button itself. */
      compact?: boolean;
      /** Children to render within the button. */
      children: React.ReactNode;
      /** Set the start node */
      start?: React.ReactNode;
      /** Icon to render at the start of the button. */
      startIcon?: IconName;
      /** Whether the start icon is active */
      startIconActive?: boolean;
      /** Set the end node */
      end?: React.ReactNode;
      /** Icon to render at the end of the button. */
      endIcon?: IconName;
      /** Whether the end icon is active */
      endIconActive?: boolean;
      /** Ensure the button aligns flush on the left or right.
       * This prop will translate the entire button left/right,
       * so take care to ensure it is not overflowing awkwardly
       */
      flush?: 'start' | 'end';
      /** Uniquely identify the button within a form. */
      name?: string;
      /** Don't scale element on press. */
      noScaleOnPress?: boolean;
      /**
       * Truncates text after wrapping to a defined number of lines.
       * @default 1
       */
      numberOfLines?: number;
    } & {
      ref?: React.Ref<View>;
    }
>;
//# sourceMappingURL=Button.d.ts.map