import { type Animated, type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
import type { ThemeVars } from '@coinbase/cds-common/core/theme';
import type { ElevationLevels } from '@coinbase/cds-common/types/ElevationLevels';
import { type BoxBaseProps } from '../layout/Box';
/**
 * Custom color overrides for different interaction states.
 * Base colors (background, borderColor) are used directly, while interaction
 * state colors (pressed, disabled) are used as alternative base colors
 * for blending calculations with blend strength and color scheme considerations.
 *
 * @example
 * ```tsx
 * <Interactable
 *   blendStyles={{
 *     background: '#ffffff',
 *     pressedBackground: '#e0e0e0',
 *     borderColor: '#cccccc'
 *   }}
 * />
 * ```
 */
export type InteractableBlendStyles = {
  background?: string;
  pressedBackground?: string;
  disabledBackground?: string;
  borderColor?: string;
  pressedBorderColor?: string;
  disabledBorderColor?: string;
};
export type InteractableBaseProps = Omit<BoxBaseProps, 'animated'> & {
  /** Apply animated styles to the outer container. */
  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>[];
  /** Background color of the overlay (element being interacted with). */
  background?: ThemeVars.Color;
  /** Set element to block and expand to 100% width. */
  block?: boolean;
  /** Is the element currently disabled. */
  disabled?: boolean;
  /** Is the element elevated. */
  elevation?: ElevationLevels;
  /**
   * Is the element currenty loading.
   * When set to true, will disable element from press and keyboard events
   */
  loading?: boolean;
  /** Is the element being pressed. Primarily a mobile feature, but can be used on the web. */
  pressed?: boolean;
  /**
   * Mark the background and border as transparent until the element is interacted with (hovered, pressed, etc).
   * Must be used in conjunction with the "pressed" prop
   * */
  transparentWhileInactive?: boolean;
  /**
   * Mark the background and border as transparent even while element is interacted with (elevation underlay issue).
   * Must be used in conjunction with the "pressed" prop
   * */
  transparentWhilePressed?: boolean;
  blendStyles?: InteractableBlendStyles;
  /** Apply animated styles to the inner container. */
  contentStyle?: StyleProp<ViewStyle>;
  /** Apply styles to the outer container. */
  wrapperStyles?: {
    base?: StyleProp<ViewStyle>;
    pressed?: StyleProp<ViewStyle>;
    disabled?: StyleProp<ViewStyle>;
  };
};
export type InteractableProps = InteractableBaseProps & Omit<ViewProps, 'style'>;
export declare const Interactable: import('react').NamedExoticComponent<InteractableProps>;
//# sourceMappingURL=Interactable.d.ts.map